/* ---------------------------------------------------------------------------
   Interior pages — agency, services, casting, contact, legal, 404.

   These are compositions built from the shared components, so there is very
   little here: the two-column editorial split, the prose column for legal
   copy, and the few page-specific arrangements that would not earn a place in
   the design system.
   --------------------------------------------------------------------------- */

/* The standard editorial split: heading left, running copy right. Collapses
   to one column on tablet, where two columns of long copy stop being readable. */
.two-col{display:grid;grid-template-columns:1.25fr .75fr;
         gap:clamp(2.5rem,6vw,6rem);align-items:start}
.two-col h2{color:inherit}
.two-col .body-copy p{margin:0 0 1.4rem}
.two-col .body-copy p:last-child{margin-bottom:0}
.two-col .body-copy strong{font-weight:400;color:var(--on-light)}
.on-ivory .two-col .lede,.on-ivory .two-col .body-copy{color:var(--on-light-mute)}
.on-ink .two-col .body-copy strong{color:var(--on-dark)}

/* heading and CTA list side by side — the closing band on most pages */
.final-split{display:grid;grid-template-columns:1.15fr .85fr;
             gap:clamp(2.5rem,6vw,5rem);align-items:center}

/* --- contact -------------------------------------------------------------
   A dark editorial split: statement on the left, form on the right. The two
   halves are a single rectangle, so the form never reads as a boxed widget
   dropped onto a page. */
.contact-split{display:grid;grid-template-columns:1fr 1fr;
               gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact-aside h1{color:var(--on-dark)}
.contact-aside .lede{margin-top:var(--space-md);color:var(--on-dark-mute)}
.contact-points{margin:clamp(2rem,5vh,3.2rem) 0 0;padding:0;list-style:none}
.contact-points li{padding:1rem 0;border-top:var(--hair) solid var(--line-on-dark)}
.contact-points dt,.contact-points .k{margin:0 0 .35rem;font-size:10px;letter-spacing:.26em;
     text-transform:uppercase;color:var(--on-dark-mute)}
.contact-points dd,.contact-points .v{margin:0;font-size:14px;font-weight:300;
     color:var(--on-dark);line-height:1.7;overflow-wrap:anywhere}
/* standalone links, not links inside a sentence, so they carry a real tap
   area: at 14px the text alone came to 23px, one short of the minimum */
.contact-points a{display:inline-block;padding:.25rem 0 .3rem;
                  border-bottom:var(--hair) solid var(--champagne-dim);
                  transition:border-color var(--t-fast),color var(--t-fast)}
.contact-points a:hover{color:var(--champagne);border-bottom-color:var(--champagne)}

/* --- auth ----------------------------------------------------------------
   Sign-in, password reset and activation. One centred column on black, with
   the logo above it — no card, no shadow, no panel. */
.auth{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
      padding:calc(var(--header-h) + clamp(2.5rem,7vh,4.5rem)) 0 clamp(3rem,8vh,5rem);
      background:var(--ink)}
.auth-in{width:100%;max-width:31rem;margin:0 auto;padding:0 var(--container-pad)}
.auth-brand{display:block;margin:0 0 clamp(2rem,5vh,3rem)}
.auth-brand img{width:clamp(150px,42vw,210px);height:auto}
.auth h1{font-size:clamp(1.8rem,4.6vw,2.9rem);color:var(--on-dark);margin:0}
.auth .lede{margin-top:var(--space-md);color:var(--on-dark-mute);max-width:none}
.auth form{margin-top:clamp(2rem,5vh,3rem)}
.auth-alt{margin:clamp(1.8rem,4vh,2.6rem) 0 0;padding-top:var(--space-md);
          border-top:var(--hair) solid var(--line-on-dark);
          font-size:11px;letter-spacing:.18em;text-transform:uppercase;
          color:var(--on-dark-mute);line-height:2.2}
.auth-alt a{color:var(--on-dark);border-bottom:var(--hair) solid var(--champagne-dim);
            padding-bottom:2px;transition:color var(--t-fast),border-color var(--t-fast)}
.auth-alt a:hover{color:var(--champagne);border-bottom-color:var(--champagne)}

/* --- legal / long-form prose --------------------------------------------
   A narrow reading column on ink. Serif headings, condensed body, one rhythm
   for every section so a long document stays navigable. */
.prose{max-width:var(--prose-width);margin:0 auto}
.prose h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;
          letter-spacing:.045em;line-height:1.2;color:var(--on-dark);
          font-size:clamp(1.15rem,2.2vw,1.6rem);
          margin:clamp(2.6rem,6vh,3.6rem) 0 var(--space-md);
          padding-top:var(--space-md);border-top:var(--hair) solid var(--champagne-line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
          color:var(--on-dark);margin:var(--space-lg) 0 var(--space-sm)}
.prose p,.prose li{font-size:14px;line-height:1.95;font-weight:300;color:var(--on-dark-mute)}
.prose p{margin:0 0 1.3rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.2rem}
.prose li{margin:.45rem 0}
.prose li::marker{color:var(--champagne)}
.prose strong{font-weight:400;color:var(--on-dark)}
.prose a{color:var(--on-dark);border-bottom:var(--hair) solid var(--champagne-dim);
         padding-bottom:1px;transition:color var(--t-fast),border-color var(--t-fast)}
.prose a:hover{color:var(--champagne);border-bottom-color:var(--champagne)}
.prose .updated{font-size:10px;letter-spacing:.26em;text-transform:uppercase;
                color:var(--on-dark-faint);margin:0 0 clamp(2rem,5vh,3rem)}

/* --- 404 ----------------------------------------------------------------- */
.err-page{min-height:72svh;display:flex;align-items:center;
          padding:calc(var(--header-h) + clamp(3rem,8vh,5rem)) 0 clamp(3rem,8vh,5rem)}
.err-code{font-family:var(--serif);font-size:clamp(5rem,18vw,12rem);line-height:.9;
          color:var(--champagne);margin:0 0 var(--space-md);letter-spacing:.02em}

@media (max-width:1024px){
  .two-col,.final-split,.contact-split{grid-template-columns:1fr;gap:var(--space-lg)}
}