/* Shared visual foundation taken from the accepted homepage body direction.
   Deliberately opt-in: DARP keeps its existing type and cloud system. */

/* Figtree and its metric-matched fallback are declared once, in mock.css, which every
   page loads before this file. */

body.site-modern {
  --sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cf-font-body: var(--sans);
  --modern-paper: #f7f3eb;
  --modern-paper-warm: #f1e9db;
  --modern-ink: #1b2b3a;
  --modern-copy: #33434f;
  --modern-blue: #2f6a99;
  --modern-blue-light: #8fb7d9;
  --modern-ease: cubic-bezier(.22, 1, .36, 1);
  --surface-shadow: 0 24px 60px -40px rgba(27, 43, 58, .30);
  --spring-ease: var(--modern-ease);
  --chrome-max: 1200px;
  --page-accent: var(--modern-blue);
  background: var(--modern-paper);
  color: var(--modern-ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* Figtree's 400 cut reads lighter on the smaller interior-page copy than it
   does in the homepage's larger compositions. The variable font lets us add
   a small amount of ink without flattening the hierarchy into 500 everywhere. */
body.site-modern:not(.page-home) main {
  font-weight: 450;
}

body.page-about :where(.body-copy, .person-role),
body.page-event :where(.sess-body, .sess-by, .inv-alt, .deep .gloss, .close p),
body.page-commonllama :where(.cfp-sub, .cfp-p.muted) {
  color: var(--modern-copy);
}

body.page-commonframe .card p { font-size: 1rem; }
body.page-event .inv-alt { font-size: 1rem; }
body.page-commonllama .strata-mode p { font-size: 1rem; }
body.page-commonllama .strata-mini p {
  color: rgba(232, 221, 208, .92);
  font-size: .9375rem;
}

body.page-commonframe { --page-accent: #8a4a1f; }
body.page-commonllama,
body.page-submit { --page-accent: #5a8a6b; }

/* One deliberate exception to the page-specific chapter systems: Strata uses
   a single extending rule to mark the transition into the roadmap. */
body.site-modern .modern-rule-heading {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  width: 100%;
  max-width: none;
  color: var(--page-accent);
}

body.site-modern .modern-rule-heading::after {
  content: "";
  flex: 1 1 80px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms var(--modern-ease);
}

body.site-modern .modern-rule-heading.is-in::after {
  transform: scaleX(1);
}

/* About follows the homepage's open 1200px rhythm instead of the old narrow,
   ruled bands. The event module remains content, not the page's frame. */
body.page-about .band {
  border-top: 0;
  box-shadow: none;
}

body.page-about .band-inner {
  max-width: 1200px;
  padding: clamp(76px, 8vw, 112px) 24px;
}

body.page-about section:first-child .band-inner {
  padding-top: clamp(72px, 8vw, 108px);
}

body.page-about .band + .band:nth-of-type(even) {
  background: var(--modern-paper-warm);
}

body.page-about h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

/* Product pages keep their own drawings and brand systems while adopting the
   homepage's wider field and horizontal section rhythm. */
body.page-commonframe .wrap {
  max-width: 1200px;
  padding-inline: 24px;
}

body.page-commonframe .movement {
  padding: clamp(76px, 8vw, 108px) 0;
  border-top: 0;
}

body.page-commonllama .cfp-inner {
  max-width: 1200px;
  padding-inline: 24px;
}

body.page-commonllama .cfp-sec {
  margin-top: clamp(76px, 9vw, 112px);
}

body.page-commonllama .spined::before,
body.page-commonllama .spined::after {
  display: none;
}

body.page-commonllama .modern-rule-heading {
  margin-bottom: 18px;
  color: var(--page-accent);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.page-blog .blog-listing {
  max-width: 1200px;
  padding: clamp(76px, 8vw, 112px) 24px clamp(88px, 10vw, 132px);
}

body.page-blog .blog-listing h1 {
  max-width: none;
  color: var(--modern-ink);
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
  text-align: left;
}

body.page-blog .blog-listing-intro {
  max-width: 760px;
  margin: 28px 0 64px;
  color: var(--modern-copy);
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  text-align: left;
}

body.page-blog .post-card {
  grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 72px);
  padding: clamp(42px, 5vw, 64px) 0;
  border-top: 3px solid var(--modern-blue);
}

body.page-blog .post-card-media {
  border: 0;
  border-radius: 14px 22px 12px 24px;
}

body.page-event .sess {
  max-width: none;
  padding: clamp(76px, 8vw, 112px) 24px clamp(96px, 10vw, 140px);
  background: var(--modern-paper);
}

body.page-event .sess-inner { max-width: 1200px; }

body.page-event .sess-hero {
  max-width: 1080px;
  padding: 0;
  border: 0;
  background: transparent;
}

body.page-event .sess-hero::before,
body.page-event .sess-hero::after { display: none; }

body.page-event .sess-hero h1 {
  max-width: 18ch;
  color: var(--modern-ink);
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.025em;
}

body.page-event .sess-by {
  max-width: 760px;
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}

body.page-event .sess-sec {
  margin-top: clamp(72px, 8vw, 108px);
}

body.page-event .inv {
  margin-top: 32px;
  padding: clamp(32px, 5vw, 56px);
  border: 0;
  border-radius: 14px 22px 12px 24px;
  background: var(--modern-paper-warm);
}

body.page-event .inv:nth-of-type(even) { background: #e7eef4; }

body.page-event .close,
body.page-event .rec-wrap {
  margin-top: clamp(72px, 8vw, 108px);
  padding-top: 0;
  border-top: 0;
}

/* Contact uses the same grounded dark field as the homepage close. */
body.page-contact .contact-page {
  min-height: 64vh;
  padding: clamp(76px, 9vw, 128px) 24px;
  background: var(--modern-ink);
  color: var(--modern-paper);
}

body.page-contact .contact-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-contact .contact-inner::before { display: none; }

body.page-contact .contact-inner:has(form) {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr);
  grid-template-rows: auto 1fr;
  gap: 24px clamp(56px, 8vw, 112px);
  align-items: start;
}

body.page-contact .contact-page h1 {
  max-width: 8ch;
  margin: 0 0 24px;
  color: var(--modern-paper);
  font-size: clamp(4rem, 7vw, 6rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.03em;
}

body.page-contact .contact-page p {
  color: #d6dee5;
}

body.page-contact .contact-page a { color: var(--modern-blue-light); }

body.page-contact .contact-inner:has(form) > form {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
  border: 0;
  border-radius: 14px 22px 12px 24px;
  background: var(--modern-paper);
  color: var(--modern-ink);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.72);
}

body.page-contact .contact-page form label { color: var(--modern-blue); }

body.page-contact .contact-result {
  max-width: 760px;
  margin: 32px 0;
  padding: clamp(22px, 3vw, 32px);
  border-color: rgba(143,183,217,.35);
  border-radius: 14px 22px 12px 24px;
  background: rgba(247,243,235,.08);
}

body.page-contact .contact-result p { color: #edf3f6; }

/* The benchmark handoff stays recognizably commonllama: deep green field,
   warm working surface, no generic centered utility-card treatment. */
body.page-submit .clsf-page {
  min-height: 64vh;
  padding: clamp(76px, 9vw, 120px) 24px;
  background: #173b3f;
}

body.page-submit .clsf {
  max-width: 1000px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #eaf2ee;
}

body.page-submit .clsf::before { display: none; }
body.page-submit .clsf-brand,
body.page-submit .clsf-sub,
body.page-submit .clsf-note { color: #c6dacf; }
body.page-submit .clsf-brand span,
body.page-submit .clsf-sub a,
body.page-submit .clsf-note a { color: #8fd1a8; }
body.page-submit .clsf h1 {
  max-width: 12ch;
  color: #f3f8f5;
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 700;
  letter-spacing: -.03em;
}
body.page-submit .clsf-form,
body.page-submit .clsf-result,
body.page-submit .clsf-err-banner {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(26px, 4vw, 44px);
  border: 0;
  border-radius: 14px 22px 12px 24px;
  background: var(--modern-paper);
  color: var(--modern-ink);
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.72);
}
body.page-submit .clsf-form .clsf-note { color: var(--modern-copy); }

body.page-404 .page {
  max-width: 1200px;
  padding: clamp(76px, 9vw, 128px) 24px;
}

body.page-404 .page h1 {
  max-width: 11ch;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.035em;
}

@media (max-width: 720px) {
  body.page-blog .post-card { grid-template-columns: 1fr; }
  body.page-contact .contact-inner:has(form) { display: block; }
  body.page-contact .contact-inner:has(form) > form { margin-top: 40px; }
  body.site-modern .modern-rule-heading { align-items: flex-start; }
  body.site-modern .modern-rule-heading::after { margin-top: .65em; }
}

body.site-modern :where(h1, h2, h3, h4, p, a, button, input, textarea, select) {
  font-family: inherit;
}

/* Project pages with an explicit inherited wrapper need the same correction. */
body.site-modern .cfp {
  font-family: var(--sans);
}

body.site-modern .site-header {
  padding: 10px 40px;
  border-bottom-color: rgba(27, 43, 58, .15);
  background: rgba(247, 243, 235, .96);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

body.site-modern .site-nav,
body.site-modern .site-nav a,
body.site-modern .nav-dropdown-toggle {
  font-family: var(--sans);
  font-weight: 500;
}

body.site-modern .site-nav a,
body.site-modern .nav-dropdown-toggle {
  color: var(--modern-ink);
  letter-spacing: 0;
}

body.site-modern .site-nav a[aria-current="page"],
body.site-modern .nav-dropdown-toggle.is-active {
  color: var(--modern-blue);
  border-bottom-color: var(--modern-blue);
}

body.site-modern .nav-dropdown-menu {
  border-color: rgba(27, 43, 58, .14);
  border-radius: 12px;
  background: var(--modern-paper);
  box-shadow: var(--surface-shadow);
}

body.site-modern .site-footer {
  margin-top: 0;
  border-top-color: rgba(27, 43, 58, .15);
  background: var(--modern-paper);
}

body.site-modern .site-footer,
body.site-modern .site-footer h2,
body.site-modern .site-footer p,
body.site-modern .site-footer li,
body.site-modern .footer-subscribe input,
body.site-modern .footer-subscribe button {
  font-family: var(--sans);
}

body.site-modern .site-footer [data-analytics-choice] {
  min-height: 36px;
  margin-top: 4px;
  padding: 7px 11px;
  border: 1px solid rgba(27, 43, 58, .24);
  border-radius: 4px;
  background: transparent;
  color: var(--modern-copy);
  font: 600 12px/1.2 var(--sans);
  cursor: pointer;
  transition: transform 420ms var(--modern-ease), background-color 180ms ease;
}

body.site-modern .site-footer [data-analytics-choice]:hover {
  background: var(--modern-paper-warm);
  transform: scale(.97);
}

body.site-modern :where(.button, .home-button, .clsf-submit, .footer-subscribe button) {
  font-family: var(--sans);
  transition:
    transform 420ms var(--modern-ease),
    background-color 180ms ease,
    border-color 180ms ease;
}

body.site-modern :where(.button, .home-button, .clsf-submit, .footer-subscribe button):hover {
  transform: scale(.97);
}

body.site-modern .reveal {
  transition-timing-function: var(--modern-ease);
  transition-duration: 680ms;
}

@media (max-width: 480px) {
  body.site-modern .site-header { padding: 8px 20px; }
  body.site-modern .site-header .brand img { max-height: 34px; }
  body.site-modern .site-nav { gap: 14px; }
  body.site-modern .site-nav a,
  body.site-modern .nav-dropdown-toggle { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body.site-modern *,
  body.site-modern *::before,
  body.site-modern *::after {
    scroll-behavior: auto !important;
  }

  body.site-modern :where(.button, .home-button, .clsf-submit, .footer-subscribe button),
  body.site-modern .reveal {
    transform: none !important;
    transition: none !important;
  }

  body.site-modern .modern-rule-heading::after {
    transform: scaleX(1);
    transition: none;
  }
}

/* Contact form decoy fields (contact/index.php). Hidden here only, never in the page's
   own markup or inline style, so a script that skips stylesheets sees ordinary fields.
   visibility:hidden also removes them from tab order, screen readers and autofill.
   Specificity beats the page's inline body.page-contact .contact-field rule. */
body .contact-page .contact-field.contact-field--site {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}