/* JJ brand system layer. Source of truth: the JJ design system artifact
   (claude.ai/artifact/2WkWDkxphR2MqaLXmRtdvg). Loaded last so it wins over each
   page's inline <style>. Tokens (colours, radius, shadows) are set in the pages
   themselves; this file holds fonts, the display/serif type rules, focus and the
   section grounds.

   Grounds alternate section by section:
     hero, footer                     -> Green   (night-turquoise)
     .lt band                         -> Khaki   (muted-khaki, ink night-turquoise)
     #contact                         -> Cool Black
   Rules kept: square corners, flat (focus ring is the only shadow), display type
   in capitals, serif for everything people read, Anzac never set on khaki. */

@font-face{font-family:'Archivo Expanded';src:url('/fonts/ArchivoExpanded-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('/fonts/LibreBaskerville-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Baskerville';src:url('/fonts/LibreBaskerville-Italic-Variable.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}

body{font-family:var(--sans);line-height:1.65}

/* display face: headlines, always capitals, tight leading */
h1,h2,h3,h4,.big,.fbig,.fw-line,.about .sig,.row h3,.step h4,.faq summary{
  font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:0;line-height:1;color:var(--ink-strong)}
.big{font-size:clamp(1.7rem,4.2vw,3.1rem);max-width:22ch;letter-spacing:-.005em}
.cta-huge .big{font-size:clamp(2rem,6vw,4.6rem);max-width:none}
.fbig{font-size:clamp(1.8rem,5vw,3.6rem);line-height:.98}
.row h3{font-size:clamp(1.1rem,2.4vw,1.6rem)}
.step h4{font-size:1rem;letter-spacing:.02em}
.faq summary{font-size:clamp(.9rem,1.7vw,1.1rem);line-height:1.25}
.fw-line{font-size:clamp(1rem,2vw,1.3rem)}

/* labels: display face, tracked capitals (the guide's eyebrow / meta style) */
.kicker,.fw-kick,.fcol h5,.row .rn,.step .sn,.dir-head,.dir-count,.di-k,
.foot-bottom,.pill,.fw-go,.dir-btn{
  font-family:var(--disp);text-transform:uppercase;letter-spacing:.14em;font-weight:900}
/* labels never drop below the guide's 11px floor (label-sm), even tracked and at small viewports */
.kicker,.fw-kick{font-size:.72rem}
.fcol h5,.foot-bottom{font-size:.7rem}

/* buttons: square, 2px rule, tracked caps */
.pill,.fw-go{font-size:.78rem;border:2px solid var(--line2);padding:16px 26px}
.pill:hover,.fw-go:hover{background:var(--ink);color:var(--bg)}
.dir-btn{font-size:.72rem;background:var(--bg);border:2px solid var(--line2)}
.dir-btn:hover{background:var(--bg2)}
.dir-panel{background:var(--bg);border:2px solid var(--line2)}
.dir-btn,.dir-panel{backdrop-filter:none;-webkit-backdrop-filter:none}
.dir-panel a .di-arr{transform:none}
.dir-panel a{font-family:var(--sans)}
.dir-btn .dir-dot{animation:none;opacity:1}

/* skip link + focus: the ring is the one permitted shadow */
.skip{background:var(--accent);color:var(--on-accent,#004137);font-family:var(--disp);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.skip:focus{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}

/* intro curtain */
#intro .w2{color:#E0B848;font-family:var(--disp)}
#intro .w2 .w2b{color:#C6BE8B}
#intro .in-rule{background:#E0B848}

/* contact: Cool Black ground, full bleed */
#contact{position:relative;isolation:isolate;--bg:#121923;--bg2:#1B2533}
#contact::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:#121923;z-index:-1}

/* khaki band: night-turquoise ink, buttons fill with the ink */
.lt .pill:hover,.lt .fw-go:hover{background:#004137;color:#C6BE8B}
.lt input,.lt textarea,.lt select{border:2px solid #004137;background:transparent;color:#004137}
.lt input::placeholder,.lt textarea::placeholder{color:#004137;opacity:.7}

/* no left-border accent cards */
.fwteaser{border-left:1px solid var(--line)}

/* ── the guide's layout grid: 12 hairlines (margins + six columns), 40% strength on the web ── */
:root{
  --grid-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1000' preserveAspectRatio='none'%3E%3Cpath d='M135 0V1000M380 0V1000M430 0V1000M678 0V1000M728 0V1000M976 0V1000M1026 0V1000M1272 0V1000M1322 0V1000M1569 0V1000M1619 0V1000M1866 0V1000' stroke='%23fff' stroke-opacity='.13' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E");
  --grid-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1000' preserveAspectRatio='none'%3E%3Cpath d='M135 0V1000M380 0V1000M430 0V1000M678 0V1000M728 0V1000M976 0V1000M1026 0V1000M1272 0V1000M1322 0V1000M1569 0V1000M1619 0V1000M1866 0V1000' stroke='%230a0200' stroke-opacity='.14' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E");
}
.lt{background-image:var(--grid-dark);background-size:100% 100%}
#contact::before{background:#121923 var(--grid-light);background-size:100% 100%}

/* ── imagery: editorial collage and vintage illustration, square-cornered ── */
.sec-head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
@media(max-width:860px){.sec-head{grid-template-columns:1fr}.sec-art{max-width:360px}}
.sec-art,.contact-art{margin:0}
.sec-art img,.contact-art img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.sec-art{margin-bottom:6px}
.contact-art{width:min(210px,52vw);margin:0 auto 38px}

/* footer: see jj-chrome.css (shared by every page) */

/* left-border cards are off-system */
.paid{border-left:1px solid var(--line)}