/* ==========================================================================
   Field Note — block theme styles.
   tokens.css owns every value, keyframe and breakpoint. Nothing here invents
   a colour, size or timing; it only assembles them into modules.
   ========================================================================== */

/* ── Layout primitives ─────────────────────────────────────────────────── */
.fn-page{position:relative;background:var(--fn-beige);overflow-x:hidden;min-height:100vh}
.fn-bleed{margin-inline:0;width:100%}
.fn-pad{padding-inline:var(--fn-margin)}
.fn-section{margin-top:var(--fn-section)}
.fn-block{padding-block:var(--fn-block)}
.fn-rule-top{border-top:var(--fn-rule-hairline)}
.fn-rule-bottom{border-bottom:var(--fn-rule-hairline)}
.fn-center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* ── Type roles ────────────────────────────────────────────────────────── */
.fn-kicker{display:block;font:var(--fn-w-extrabold) var(--fd-kicker)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-purple)}
.fn-kicker--lime{color:var(--fn-lime)}
.fn-h1{margin:0;font:var(--fn-w-display-mid) var(--fd-l)/var(--fd-l-lh) var(--fn-font-display);letter-spacing:var(--fn-track-tight);text-transform:uppercase;color:var(--fn-navy)}
.fn-h1--on-ink{color:var(--fn-beige)}
.fn-h2{margin:0;font:var(--fn-w-display-mid) var(--fd-m)/var(--fd-m-lh) var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-navy)}
.fn-h2--light{font-weight:var(--fn-w-display)}
.fn-h2--wide{font-weight:var(--fn-w-display);letter-spacing:var(--fn-track-wide)}
.fn-h2--on-ink{color:var(--fn-beige)}
.fn-h3{margin:0;font:var(--fn-w-display) var(--fd-xs)/var(--fd-xs-lh) var(--fn-font-display);color:var(--fn-navy)}
.fn-body{margin:0;font:var(--fn-w-medium) var(--fd-body)/var(--fd-body-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-navy)}
.fn-body--ink{color:var(--fn-black)}
.fn-body--on-ink{color:var(--fn-beige)}
.fn-body--on-ink-muted{color:var(--fn-beige-75)}
.fn-label{font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase}
.fn-label-s{font:var(--fn-w-bold) var(--fd-label-s)/1.33 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase}
.fn-placeholder-note{font:var(--fn-w-bold) var(--fd-label)/1 var(--fn-font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fn-navy);opacity:.55}

/* Masked line reveal wrappers, one span per headline line */
.fn-line{display:block;overflow:hidden}
.fn-line > span{display:block}

/* ── Buttons — always hug the label, at every width (spec 6b) ──────────── */
.fn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--fn-btn-h);padding:0 clamp(24px,2vw,38px);border:0;border-radius:var(--fn-radius);font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;cursor:pointer;text-decoration:none;transition:var(--fn-transition-color)}
.fn-btn--primary{background:var(--fn-purple);color:var(--fn-beige);box-shadow:inset 0 0 0 1px var(--fn-purple)}
.fn-btn--primary:hover,.fn-btn--primary:focus-visible{background:var(--fn-lime);color:var(--fn-navy);box-shadow:inset 0 0 0 1px var(--fn-lime)}
.fn-btn--outline{background:transparent;color:var(--fn-navy);box-shadow:var(--fn-ring-outline)}
.fn-btn--outline:hover,.fn-btn--outline:focus-visible{background:var(--fn-navy);color:var(--fn-beige)}
.fn-btn--small{min-height:44px;padding:0 20px;font:var(--fn-w-bold) var(--fd-label)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;background:transparent;color:var(--fn-navy);box-shadow:inset 0 0 0 1px var(--fn-navy)}
.fn-btn--small:hover,.fn-btn--small:focus-visible{background:var(--fn-navy);color:var(--fn-lime)}
.fn-btn-row{display:flex;justify-content:center;padding-inline:var(--fn-margin)}

/* ── Focus: navy on paper, lime on ink (spec 8) ────────────────────────── */
/* Links, buttons, checkboxes, radios and anything else focusable get the
   offset ring. Text fields are deliberately left out: a field already draws a
   rectangle, and a second one floating 3px outside it read as a stray green
   box while typing. Each field states its own focus instead, by changing the
   edge it already has. */
:where(a,button,input[type=checkbox],input[type=radio],[tabindex]):focus-visible{outline:2px solid var(--fn-navy);outline-offset:3px}
.fn-on-ink :where(a,button,input[type=checkbox],input[type=radio],[tabindex]):focus-visible{outline-color:var(--fn-lime)}
:where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus,
:where(input:not([type=checkbox]):not([type=radio]),textarea,select):focus-visible{outline:none}
/* The replacement is the field's own edge doubling in weight while it has
   focus. It is defined at the foot of this file, after the ground-specific
   field colours that would otherwise outrank it. */

/* ── Icons: SVG masks on a coloured box, so they tint with background ──── */
.fn-icon,
.fn-photo__more a::after{display:block;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:var(--fn-transition-color)}
.fn-icon--instagram{-webkit-mask-image:var(--fn-i-instagram);mask-image:var(--fn-i-instagram)}
.fn-icon--tiktok{-webkit-mask-image:var(--fn-i-tiktok);mask-image:var(--fn-i-tiktok)}
.fn-icon--cart{-webkit-mask-image:var(--fn-i-shopping-cart);mask-image:var(--fn-i-shopping-cart)}
.fn-icon--arrow,
.fn-photo__more a::after{-webkit-mask-image:var(--fn-i-arrow-corner);mask-image:var(--fn-i-arrow-corner)}

/* ── Media: every image crops rather than breaking the grid (spec 3) ────── */
.fn-media{position:relative;background:var(--fn-grey);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fn-media > img{width:100%;height:100%;object-fit:cover}
.fn-media--32{aspect-ratio:3/2}
.fn-media--43{aspect-ratio:4/3}
.fn-media--169{aspect-ratio:16/9}
.fn-media--1610{aspect-ratio:16/10}
.fn-media--45{aspect-ratio:4/5}
.fn-media--11{aspect-ratio:1/1}

/* ══════════════════════════ HEADER ══════════════════════════
   Absolutely positioned over the first section, never sticky. Colour and logo
   variant come from --fn-chrome / --fn-logo-* in tokens.css, keyed off the
   [data-page] attribute PHP writes onto <html>.
   ------------------------------------------------------------------------ */
.fn-header{position:absolute;top:var(--fn-header-top);left:var(--fn-margin);right:var(--fn-margin);display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:30}
.fn-header__logo{display:block;flex:0 0 auto}
.fn-header__logo img{width:clamp(104px,10.4vw,200px);height:auto}
.fn-header__logo img[data-logo="beige"]{display:var(--fn-logo-beige)}
.fn-header__logo img[data-logo="dark"]{display:var(--fn-logo-dark)}

.fn-nav{display:flex;align-items:center;gap:clamp(20px,3.1vw,60px)}
.fn-nav__link{font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-chrome);background:none;border:0;padding:0;cursor:pointer}
.fn-nav__link:hover,.fn-nav__link:focus-visible{color:var(--fn-purple);text-decoration:underline;text-underline-offset:6px}
/* The current page renders in the hover state (spec 4) */
.fn-nav__link[aria-current="page"]{color:var(--fn-purple);text-decoration:underline;text-underline-offset:6px}
.fn-nav__icon-link{display:block;line-height:0;color:var(--fn-chrome)}
.fn-nav__icon{width:var(--fn-icon-nav);height:var(--fn-icon-nav)}
.fn-nav__icon-link:hover,.fn-nav__icon-link:focus-visible{color:var(--fn-purple)}

.fn-burger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer}
.fn-burger span{display:block;width:28px;height:1.5px;background:var(--fn-chrome)}
.fn-burger span:last-child{width:18px}

/* ══════════════════════════ DRAWER ══════════════════════════ */
.fn-scrim{position:fixed;inset:0;background:var(--fn-black-80);z-index:40}
.fn-drawer{position:fixed;top:0;right:0;bottom:0;width:85%;max-width:420px;background:var(--fn-purple);z-index:50;padding:var(--fn-margin);display:flex;flex-direction:column;overflow-y:auto}
.fn-drawer__close{align-self:flex-end;width:44px;height:44px;position:relative;background:none;border:0;cursor:pointer}
.fn-drawer__close span{position:absolute;left:8px;top:21px;width:28px;height:1.5px;background:var(--fn-beige)}
.fn-drawer__close span:first-child{transform:rotate(45deg)}
.fn-drawer__close span:last-child{transform:rotate(-45deg)}
.fn-drawer__nav{display:flex;flex-direction:column;gap:4px;margin-top:clamp(32px,10vw,72px)}
.fn-drawer__link{font:var(--fn-w-semibold) var(--fd-s)/1.2 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-beige);padding:10px 0;min-height:44px;display:flex;align-items:center}
.fn-drawer__link:hover,.fn-drawer__link:focus-visible{color:var(--fn-lime)}
.fn-drawer__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:32px;border-top:1px solid var(--fn-beige-75)}
.fn-drawer__social{display:flex;gap:20px}
.fn-drawer__social .fn-icon{width:32px;height:32px;color:var(--fn-beige)}
.fn-drawer__social .fn-icon--tiktok{width:28px;height:28px}
.fn-drawer__social a:hover .fn-icon{color:var(--fn-lime)}
.fn-drawer__lang{background:none;border:0;padding:12px 0;min-height:44px;cursor:pointer;font:var(--fn-w-bold) var(--fd-label)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-beige)}
.fn-drawer__lang:hover,.fn-drawer__lang:focus-visible{color:var(--fn-lime)}
body.fn-drawer-open{overflow:hidden}

/* tokens.css swaps the desktop nav for the burger at 1200px. */
@media (max-width:1200px){.fn-burger{display:flex}}

/* ══════════════════════════ FOOTER ══════════════════════════ */
.fn-footer{background:var(--fn-navy);padding:clamp(48px,4.5vw,87px) var(--fn-margin) clamp(32px,2.6vw,50px)}
/* The design's tracks are 1 / 1.2 / 1, but only the newsletter fills its own
   track: the wordmark and the link block are both narrower, so the air after
   each was wildly uneven and the links sat almost against the newsletter.
   The first two tracks are sized to their content and the slack is shared
   between the two gaps, which leaves the newsletter at exactly the width the
   design's third track gives it. Below 1200px tokens.css stacks the footer. */
.fn-footer__grid{--fn-footer-gap:clamp(32px,4vw,80px);display:grid;grid-template-columns:minmax(0,max-content) minmax(0,max-content) calc((100% - 2 * var(--fn-footer-gap)) / 3.2);justify-content:space-between;gap:var(--fn-footer-gap)}
.fn-footer__brand{display:flex;flex-direction:column;gap:clamp(24px,2.2vw,42px);align-items:flex-start}
.fn-footer__brand img{width:clamp(160px,14.6vw,280px);height:auto}
.fn-footer__social{display:flex;gap:clamp(20px,2.2vw,43px)}
.fn-footer__social .fn-icon{width:var(--fn-icon);height:var(--fn-icon);color:var(--fn-beige)}
.fn-footer__social a:hover .fn-icon,.fn-footer__social a:focus-visible .fn-icon{color:var(--fn-lime)}
/* The nav columns are sized to their labels rather than stretched to 1fr.
   Stretching pushed the last link hard against the newsletter, so the gap
   after the links read as a quarter of the gap after the wordmark, which does
   not fill its own column either. Content-sized tracks even the two out. */
.fn-footer__nav{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));justify-content:start;gap:clamp(18px,2.4vw,46px) clamp(24px,2.6vw,50px);align-content:start}
/* Footer nav labels stay on one line. */
.fn-footer__nav a{min-width:0;white-space:nowrap}
/* Footer nav uses the button text style, beige, lime on hover (spec 4) */
.fn-footer__nav a{font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-beige)}
.fn-footer__nav a:hover,.fn-footer__nav a:focus-visible{color:var(--fn-lime)}
/* Below 1200px tokens.css makes the footer nav two equal columns, so each
   link becomes a grid item stretched across its half. The words are then a
   fraction of a box that a phone paints in full when it is tapped, which is
   the blue slab Zoé reported. Hug the text; the two columns stay. */
@media (max-width:1200px){
  .fn-footer__nav a{justify-self:start}
}
.fn-footer__stay{margin-bottom:clamp(10px,1vw,18px)}
.fn-footer__legal{margin-top:clamp(40px,3.6vw,70px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px 40px}
.fn-footer__legal a,.fn-footer__legal span{color:var(--fn-beige-75)}
.fn-footer__legal a:hover,.fn-footer__legal a:focus-visible{color:var(--fn-lime)}
.fn-footer__links{display:flex;justify-content:center;gap:clamp(24px,3.4vw,65px)}

/* Footer newsletter: outlined rectangle, no fill, beige ring and beige text */
.fn-news-inline{display:flex;align-items:center;justify-content:space-between;gap:12px;height:var(--fn-field-h);padding:0 clamp(18px,1.9vw,36px);box-shadow:var(--fn-ring-field);background:transparent}
.fn-news-inline input{flex:1;min-width:0;background:none;border:0;font:var(--fn-w-bold) var(--fd-label)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-beige)}
.fn-news-inline input::placeholder{color:var(--fn-beige-75)}
.fn-news-inline__submit{flex:0 0 auto;width:16px;height:16px;padding:0;border:0;background:none;color:var(--fn-beige);cursor:pointer}
.fn-news-inline__submit:hover .fn-icon,.fn-news-inline__submit:focus-visible .fn-icon{color:var(--fn-lime)}
.fn-news-inline__submit .fn-icon{width:16px;height:16px}
.fn-news-note{margin:14px 0 0;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-lime)}
.fn-news-note[data-error]{color:var(--fn-beige)}
/* The note keeps its air under a form that is still on screen, which is what an
   error leaves. On success the form is gone and the note stands in its place,
   so it starts where the field started. */
.fn-form[hidden] + [data-fn-result] .fn-news-note,
.fn-news-band[hidden] + [data-fn-result] .fn-news-note,
.fn-news-inline[hidden] + [data-fn-result] .fn-news-note{margin-top:0}

/* ══════════════════════════ HOME ══════════════════════════ */

/* 1. Split hero. tokens.css collapses the cells ≤900px, turning the image into
      the background under a navy gradient wash. */
.fn-hero{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(560px,66.5vw,1277px)}
.fn-hero__copy{background:var(--fn-navy);padding:calc(var(--fn-header-top) + clamp(96px,14vw,300px)) var(--fn-margin) clamp(48px,5vw,90px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,1.6vw,30px)}
.fn-hero__copy .fn-h1{max-width:12ch}
.fn-hero__copy .fn-body{max-width:52ch}
.fn-hero__copy .fn-btn{margin-top:clamp(8px,1vw,20px);align-self:flex-start}
.fn-hero__media{background:var(--fn-grey)}

/* 2 & About. Media split: 0.72fr / 1fr, image left entering from the left.
      ≤640px tokens.css dissolves the copy column so the order becomes
      kicker → h2 → image → body. */
.fn-split{display:grid;grid-template-columns:minmax(0,0.72fr) minmax(0,1fr);align-items:center}
.fn-split--home{gap:var(--fn-margin);margin:var(--fn-section) var(--fn-margin) 0}
.fn-split--about{gap:clamp(32px,4vw,80px);padding:var(--fn-block) var(--fn-margin)}
.fn-split .fn-kicker{margin-bottom:clamp(12px,1.2vw,22px)}
.fn-split .fn-h2 + .fn-split__body > p:first-child,
.fn-split__body > p:first-child{margin-top:clamp(20px,1.6vw,30px)}
.fn-split__body > p{margin:clamp(14px,1.1vw,20px) 0 0;max-width:60ch}
.fn-split__body > p:first-child{max-width:58ch}

/* 3. Section head: h2 left, note right-aligned and capped at 502px.
      ≤1200px tokens.css moves the note under the heading and left-aligns it. */
.fn-sechead{margin:0 var(--fn-margin);display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.fn-sechead__note{width:min(502px,100%);text-align:right}

/* 5 & 7. Rule grids: hairlines run the full page width, no outer vertical rule;
      the column padding provides the inset. */
.fn-grid{margin-top:clamp(28px,2.6vw,50px);border-top:var(--fn-rule-hairline);border-bottom:var(--fn-rule-hairline);display:grid}
.fn-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fn-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fn-grid > *{padding:clamp(20px,2vw,26px) var(--fn-margin);border-left:var(--fn-rule-hairline)}

/* Article card */
.fn-card{display:flex;flex-direction:column;gap:clamp(14px,1.2vw,19px)}
.fn-card__title{min-height:calc(2 * var(--fd-xs-lh) * 1em);text-wrap:pretty}
.fn-card__title a{color:inherit}
.fn-card__title a:hover{color:var(--fn-purple)}
/* The whole card is the target, not just the words of the title. A stretched
   overlay on the title's own link keeps exactly one anchor per card, so
   nothing nests and the reading order is unchanged. The byline links to a
   contributor and has to sit above the overlay to stay clickable. */
.fn-card{position:relative}
.fn-card__title a::after{content:"";position:absolute;inset:0;z-index:1}
.fn-card:hover .fn-card__title a,
.fn-card:focus-within .fn-card__title a{color:var(--fn-purple)}
.fn-card__byline a{position:relative;z-index:2}
.fn-card__deck{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fn-card__byline{margin-top:auto;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}

/* Get Involved column. ≤1200px tokens.css turns each list into one
   comma-separated line; the markup stays a <ul>. */
.fn-involved__sub{margin:clamp(18px,1.6vw,30px) 0 clamp(12px,1vw,18px)}
.fn-involved__list{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px}
.fn-involved__list li{font:var(--fn-w-medium) var(--fd-body)/var(--fd-body-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}

/* 6. Newsletter band */
.fn-band{background:var(--fn-navy);padding:clamp(64px,6.5vw,125px) var(--fn-margin);display:flex;flex-direction:column;align-items:center;gap:clamp(24px,2vw,40px);text-align:center}
.fn-band .fn-h2{max-width:20ch}
.fn-band .fn-body{max-width:60ch}
/* justify-content only bites once the button wraps below the field: on one
   line the input flexes to fill and leaves no free space. That is what centres
   the button on a phone instead of leaving it flush left under a full-width
   field. The footer form is fn-news-inline and is not affected. */
.fn-news-band{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(12px,1.04vw,20px);width:min(733px,100%)}
.fn-news-band input{flex:1 1 260px;min-width:0;height:var(--fn-field-h);padding:0 clamp(20px,1.9vw,36px);background:transparent;border:0;box-shadow:var(--fn-ring-field);color:var(--fn-beige);font:var(--fn-w-bold) var(--fd-label)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase}
.fn-news-band input::placeholder{color:var(--fn-beige-75)}
.fn-news-band button{flex:0 0 auto}
.fn-band__success{margin:0;display:flex;align-items:center;gap:12px;font:var(--fn-w-bold) var(--fd-body)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-lime)}

/* ══════════════════════════ ABOUT ══════════════════════════ */
.fn-pagehead{padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(40px,4vw,70px);border-bottom:var(--fn-rule-hairline)}
.fn-pagehead .fn-kicker{margin-bottom:clamp(14px,1.4vw,26px)}
.fn-pagehead__lead{margin-top:clamp(24px,2vw,40px);max-width:100ch}

.fn-statement{padding:var(--fn-block) var(--fn-margin);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,1.4vw,26px)}
.fn-statement .fn-h2{max-width:22ch}
.fn-statement .fn-body{max-width:66ch}
.fn-statement--cta{gap:clamp(18px,1.6vw,30px)}
.fn-statement--cta .fn-h2{max-width:none}
.fn-statement--cta .fn-body{max-width:62ch}
.fn-statement--cta .fn-btn{margin-top:8px}

/* Quote band — reveals one character at a time (spec 5.2) */
.fn-quote{background:var(--fn-navy);padding:clamp(64px,6.8vw,130px) var(--fn-margin);display:flex;flex-direction:column;align-items:center;gap:clamp(20px,1.8vw,34px);text-align:center}
.fn-quote blockquote{margin:0;max-width:44ch;font:var(--fn-w-display) var(--fd-s)/1.35 var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-beige)}
.fn-quote__word{display:inline-block}

/* ══════════════════════════ CONTACT ══════════════════════════ */
.fn-photoband{position:relative;background:var(--fn-grey);padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(48px,5vw,90px);overflow:hidden}
.fn-photoband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fn-photoband__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,35,63,.55) 0%,rgba(24,35,63,.86) 100%)}
.fn-photoband__inner{position:relative;z-index:2}
.fn-photoband__lead{margin-top:clamp(24px,2vw,40px);max-width:80ch;color:var(--fn-beige)}

.fn-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,4vw,80px);align-items:start;padding:var(--fn-block) var(--fn-margin)}
.fn-contact__direct{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.fn-contact__direct a{font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-contact__direct a:hover{color:var(--fn-purple)}

/* All four fields share one left edge: no labels, no horizontal padding */
.fn-form{display:flex;flex-direction:column;gap:clamp(28px,2.4vw,44px)}
/* Every form here sets its own display, and an author display rule outranks
   the browser's [hidden] rule, so a form that JS marked hidden after a
   successful submit carried on showing under the confirmation. State it, the
   same way consent.css already has to. */
.fn-form[hidden],
.fn-news-band[hidden],
.fn-news-inline[hidden],
.fn-consent-line[hidden]{display:none}
.fn-field{width:100%;min-height:44px;padding:0 0 12px;background:none;border:0;border-bottom:var(--fn-hairline) solid var(--fn-black);font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy);border-radius:0}
textarea.fn-field{resize:vertical}
.fn-field::placeholder{color:var(--fn-black-50)}
.fn-field[aria-invalid="true"]{border-bottom-color:var(--fn-purple)}
.fn-form .fn-btn{align-self:center}
.fn-form__error{font:var(--fn-w-bold) var(--fd-label-s)/1.33 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-purple)}

/* Subject combobox — the Figma dropdown component, not a native select */
.fn-combo{position:relative}
.fn-combo__button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 0 12px;background:none;border:0;border-bottom:var(--fn-hairline) solid var(--fn-black);cursor:pointer;text-align:left}
.fn-combo__value{font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black-50)}
.fn-combo[data-selected] .fn-combo__value{color:var(--fn-navy)}
.fn-combo__arrow{flex:0 0 auto;width:15px;height:15px;color:var(--fn-navy);transform:rotate(90deg)}
.fn-combo__list{position:absolute;left:0;right:0;top:100%;z-index:10;background:var(--fn-beige);box-shadow:inset 0 0 0 1px var(--fn-navy);margin:0;padding:0;list-style:none;max-height:min(60vh,420px);overflow-y:auto}
.fn-combo__list[hidden]{display:none}
.fn-combo__option{display:flex;align-items:center;min-height:44px;padding:10px;cursor:pointer;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black);transition:var(--fn-transition-color)}
.fn-combo__option:hover,.fn-combo__option[data-active],.fn-combo__option[aria-selected="true"]{background:var(--fn-lime)}

/* Success panel replaces the form in place — no toast, no modal */
.fn-sent{padding:clamp(28px,3vw,56px);background:var(--fn-lime);display:flex;flex-direction:column;gap:14px}
.fn-sent__body{margin:0;font:var(--fn-w-display) var(--fd-xs)/var(--fd-xs-lh) var(--fn-font-display);color:var(--fn-navy)}
.fn-sent .fn-btn--small{align-self:flex-start;margin-top:8px}

/* Screen-reader-only, for live regions and skip links */
.fn-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The hero media fills its grid cell rather than holding a ratio; tokens.css
   then pins it behind the copy at 900px. */
.fn-media--hero{aspect-ratio:auto;height:100%;min-height:100%}

/* The Home page closes on the Get Involved block, which carries its own bottom
   space before the footer. */
.fn-home-tail{padding-bottom:var(--fn-block)}

/* ══════════════════════════════════════════════════════════════════════════
   Core-block markup.
   The layout modules are built from core blocks so every string and image is
   editable on the canvas. These rules make core's own wrappers carry the
   design, rather than replacing them with custom markup.
   ══════════════════════════════════════════════════════════════════════════ */

/* Core adds a block gap to columns; the design controls spacing itself. */
.fn-hero.wp-block-columns{gap:0;margin:0;min-height:clamp(560px,66.5vw,1277px);align-items:stretch}
.fn-hero.wp-block-columns > .wp-block-column{flex-basis:50%;min-width:0}
.fn-hero__copy{background:var(--fn-navy);padding:calc(var(--fn-header-top) + clamp(96px,14vw,300px)) var(--fn-margin) clamp(48px,5vw,90px);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,1.6vw,30px)}
.fn-hero__media{background:var(--fn-grey);display:flex;align-items:stretch;padding:0}
.fn-hero__media img,.fn-hero__media .wp-block-image{width:100%;height:100%;margin:0}
.fn-hero__media img{object-fit:cover}

/* Media split: 0.72fr / 1fr expressed as core column widths. */
/* The modifier must outrank the base rule, or the page margins vanish. */
.fn-split.wp-block-columns{align-items:center;margin-block:0}
.fn-split--home.wp-block-columns{margin:var(--fn-section) var(--fn-margin) 0;gap:var(--fn-margin)}
.fn-split--about.wp-block-columns{margin:0;padding:var(--fn-block) var(--fn-margin);gap:clamp(32px,4vw,80px)}
.fn-split .wp-block-column{min-width:0}
.fn-split__media img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.fn-split__media .wp-block-image{margin:0}
.fn-split__text p{max-width:60ch}

/* Section head as a core group with two children. */
.fn-sechead.wp-block-group{margin:0 var(--fn-margin);display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}

/* Rule grids built from core columns. */
.fn-grid.wp-block-columns{margin-top:clamp(28px,2.6vw,50px);border-top:var(--fn-rule-hairline);border-bottom:var(--fn-rule-hairline);gap:0;margin-bottom:0}
.fn-grid.wp-block-columns > .wp-block-column{padding:clamp(20px,2vw,26px) var(--fn-margin);border-left:var(--fn-rule-hairline);min-width:0}
.fn-grid.wp-block-columns > .wp-block-column:first-child{border-left:0}
.fn-involved__list.wp-block-list{margin:0;padding-left:1.1em}
.fn-involved__list.wp-block-list li{font:var(--fn-w-medium) var(--fd-body)/var(--fd-body-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black);margin-bottom:4px}

/* Bands and centred statements as core groups. */
.fn-band.wp-block-group{background:var(--fn-navy);padding:clamp(64px,6.5vw,125px) var(--fn-margin);display:flex;flex-direction:column;align-items:center;gap:clamp(24px,2vw,40px);text-align:center}
.fn-statement.wp-block-group{padding:var(--fn-block) var(--fn-margin);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(16px,1.4vw,26px)}

/* Buttons: core button markup wearing the theme's button. */
/* Every button, not only the ones an editor remembered to give an fn-btn
   class. Without this a plain core button keeps WordPress's own geometry, so
   it sits shorter and tighter than every other button on the page; the home
   hero's Preorder button was 44px tall beside a 52px standard. */
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--fn-btn-h);padding:0 clamp(24px,2vw,38px);border-radius:0;transition:var(--fn-transition-color)}
.fn-btn-center{display:flex;justify-content:center;padding-inline:var(--fn-margin)}
.fn-outline .wp-block-button__link{background:transparent;color:var(--fn-navy);box-shadow:var(--fn-ring-outline)}
.fn-outline .wp-block-button__link:hover{background:var(--fn-navy);color:var(--fn-beige)}

/* Cover block used for the Contact photo band. */
.fn-photoband.wp-block-cover{min-height:0;padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(48px,5vw,90px);align-items:flex-start;justify-content:flex-start}
.fn-photoband.wp-block-cover .wp-block-cover__inner-container{width:100%}
.fn-photoband .wp-block-cover__background{background:linear-gradient(180deg,rgba(24,35,63,.55) 0%,rgba(24,35,63,.86) 100%);opacity:1}

/* Editor canvas: give the modules room without the site chrome around them. */
.editor-styles-wrapper .fn-hero.wp-block-columns{min-height:clamp(420px,40vw,700px)}

/* An image column with nothing in it yet still holds its ratio and shows the
   media grey, so the layout reads correctly before photography arrives and the
   author can see where to drop an image. */
.fn-split__media{background:var(--fn-grey);aspect-ratio:3/2;align-self:center;overflow:hidden}
.fn-split__media > *{margin:0}
.fn-split__media img{width:100%;height:100%;object-fit:cover}
.editor-styles-wrapper .fn-split__media,
.editor-styles-wrapper .fn-hero__media{min-height:180px}

/* Vertical rhythm inside the modules.
   These were briefly removed in favour of block-level blockGap; the gap did not
   emit for column children and the headings collided with the copy. Keeping the
   CSS is what actually holds the design together. Block spacing attributes are
   still set in the content, so the editor shows the same rhythm. */
.fn-hero__copy > *{margin-block:0}
.fn-split__text > *{margin-block:0}
.fn-split__text > * + *{margin-top:clamp(14px,1.1vw,20px)}
.fn-split__text > .fn-kicker + h2{margin-top:clamp(12px,1.2vw,22px)}
.fn-split__text > h2 + p{margin-top:clamp(20px,1.6vw,30px)}

/* Phones: kicker, heading, photo, then the copy.
   tokens.css already sets that order, but it names the design file's own
   markup: a span for the kicker and a .fn-split__body wrapper around the
   copy. These modules are built from core columns, so the kicker is a
   paragraph and the copy sits loose in the text column, and everything the
   token rules do not name keeps order 0 and lands ABOVE the heading. That
   is why About read as two paragraphs, then the title, then the photo.
   The text column is display:contents here, so these are all siblings in
   the same flex row and the container's gap spaces them. */
/* Core stacks a Columns block at 781px, but tokens.css only dissolves the text
   column at 640, so between those two widths the module stacked in DOM order:
   kicker, heading, the whole of the copy, and the photograph last. That is the
   same fault Zoe reported on phones, just in a band nobody had measured. The
   block below therefore runs to 781 and dissolves the column itself; repeating
   what tokens.css already does under 640 is harmless. */
@media (max-width:781px){
  .fn-split__text{display:contents}
  /* Dissolving the text column turns its children into flex items of the
     module's own wrapping row, and a flex item is only as wide as its
     content. The kicker and the heading fitted on one line together, which
     is why "Sport, told like it deserves" sat to the right of its kicker
     instead of on the page margin. One item per line. */
  .fn-split > *,
  .fn-split__text > *{flex-basis:100%;min-width:0}
  /* Rhythm here comes from the margins below, not the container gap. The gap
     was stacking on top of them: the kicker sat 50px off "Meet the founder"
     where the scale asks for 18. tokens.css sets the gap with !important. */
  .fn-split.wp-block-columns{row-gap:0 !important}
  .fn-split__text > .fn-kicker{order:1;margin-bottom:0}
  .fn-split__text > h1,.fn-split__text > h2{order:2}
  .fn-split > .fn-split__media{order:3;margin-top:var(--fn-gap-stack)}
  .fn-split__text > p:not(.fn-kicker),
  .fn-split__text > ul,
  .fn-split__text > ol,
  .fn-split__text > .wp-block-buttons{order:4}
  /* The first line of copy now follows the photo, not the heading, so it
     needs the stack margin the photo cannot give it. */
  .fn-split__text > h2 + p:not(.fn-kicker){margin-top:var(--fn-gap-stack)}
}
.fn-sechead > *{margin-block:0}
.fn-grid .wp-block-column > *{margin-block:0}
.fn-grid .wp-block-column > .fn-kicker + h3{margin-top:clamp(18px,1.6vw,30px)}
.fn-grid .wp-block-column > h3 + .fn-involved__list{margin-top:clamp(12px,1vw,18px)}
.fn-band.wp-block-group > *{margin-block:0}
.fn-band.wp-block-group .fn-body{max-width:60ch}
.fn-statement.wp-block-group > *{margin-block:0}
.fn-pagehead.wp-block-group > *{margin-block:0}
.fn-pagehead.wp-block-group > * + *{margin-top:clamp(14px,1.4vw,26px)}
.fn-pagehead.wp-block-group > h1 + p{margin-top:clamp(24px,2vw,40px)}
/* Section rhythm, in case the block-level margin is stripped. */
.fn-section{margin-top:var(--fn-section)}

/* ── Hero sizing, per Zoé ───────────────────────────────────────────────────
   The headline should start at the same height as the page title on About and
   Contact, and the kicker, headline, lead and button should all be visible
   without scrolling. So the copy is top-aligned on the same padding the page
   head uses, the bottom padding is trimmed, and the block never grows taller
   than the viewport. Measured at 1728x880: content 601 + 242 top + 35 bottom
   = 878, inside the 880 available. */
.fn-hero.wp-block-columns{min-height:min(100svh,clamp(560px,66.5vw,1277px))}
.fn-hero__copy{
	padding-top:calc(var(--fn-header-top) + clamp(96px,10vw,190px));
	padding-bottom:clamp(24px,2vw,40px);
	justify-content:flex-start;
}

/* ── Editor canvas only ─────────────────────────────────────────────────────
   The page title is an editor field; it is not output on the front page, where
   the headline inside the hero is the real h1. Shown at display size it reads
   as part of the design and is confusing, so it is toned down to a label. */
.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper h1,
.editor-styles-wrapper .wp-block-post-title{
	font-family:var(--fn-font-sans);
	font-size:clamp(12px,0.9vw,15px);
	font-weight:700;
	letter-spacing:var(--fn-track-wide);
	text-transform:uppercase;
	color:var(--fn-black-50);
	line-height:1.4;
	margin-bottom:8px;
}

/* The centred button under a rule grid sits clear of the bottom hairline. */
.fn-btn-center{margin-top:clamp(28px,2.6vw,50px)}

/* =========================================================================
   Universal spacing scale.
   Every gap on the site resolves to one of these values. Modules do not
   invent their own; a new gap is added here first, then used.
   ========================================================================= */
:root{
	--fn-gap-text:clamp(14px,1.1vw,20px);    /* paragraph to paragraph          */
	--fn-gap-stack:clamp(18px,1.6vw,30px);   /* kicker, heading, body, button   */
	--fn-gap-module:clamp(28px,2.6vw,50px);  /* heading to grid, grid to button */
	--fn-gap-block:var(--fn-block);          /* module to module                */
	--fn-gap-section:var(--fn-section);      /* section to section              */
}

/* Flex stacks */
.fn-hero__copy,
.fn-band.wp-block-group,
.fn-statement.wp-block-group{gap:var(--fn-gap-stack)}

/* Flow stacks */
.fn-pagehead.wp-block-group > * + *,
.fn-split__text > * + *,
.fn-grid .wp-block-column > * + *{margin-top:var(--fn-gap-stack)}

/* The per-module exceptions written earlier are folded into the scale. */
.fn-split__text > .fn-kicker + h2,
.fn-split__text > h2 + p,
.fn-grid .wp-block-column > .fn-kicker + h3,
.fn-grid .wp-block-column > h3 + .fn-involved__list,
.fn-pagehead.wp-block-group > h1 + p{margin-top:var(--fn-gap-stack)}

/* Consecutive paragraphs sit tighter than the stack rhythm. */
.fn-split__text > p + p,
.fn-pagehead.wp-block-group > p + p,
.fn-statement.wp-block-group p + p{margin-top:var(--fn-gap-text)}

/* Module internals and page rhythm */
.fn-grid.wp-block-columns{margin-top:var(--fn-gap-module)}
.fn-btn-center{margin-top:var(--fn-gap-module)}
.fn-section{margin-top:var(--fn-gap-section)}
.fn-split--about.wp-block-columns{padding-block:var(--fn-gap-block)}
.fn-statement.wp-block-group{padding-block:var(--fn-gap-block)}

/* Quote band and Contact, now built from core blocks. */
.fn-quote.wp-block-group{background:var(--fn-navy);padding:clamp(64px,6.8vw,130px) var(--fn-margin);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,1.8vw,34px)}
.fn-quote__text.wp-block-quote{margin:0;padding:0;border:0;max-width:44ch}
.fn-quote__text.wp-block-quote p{margin:0;font:var(--fn-w-display) var(--fd-s)/1.35 var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-beige)}
.fn-contact.wp-block-columns{padding:var(--fn-gap-block) var(--fn-margin);gap:clamp(32px,4vw,80px);align-items:flex-start;margin:0}
/* Flow, not flex, so the one spacing rule governs it like every other column. */
.fn-contact__direct{align-items:flex-start}
.fn-contact__email{margin:0;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase}
.fn-contact__email a{color:var(--fn-navy)}
.fn-contact__email a:hover{color:var(--fn-purple)}
.fn-contact .wp-block-column > * + *{margin-top:var(--fn-gap-stack)}
.fn-portrait-cap{max-width:min(78%,440px)}

/* Supersedes the earlier flex rule from the custom-block build, so the Direct
   column spaces itself with the one universal rule and not twice over. */
.fn-contact .fn-contact__direct{display:block;gap:0}

/* =========================================================================
   SIDELINES — index, filter row, pagination
   Values transcribed from the design reference; tokens.css supplies the
   responsive behaviour through the data-* attributes the bridge adds.
   ========================================================================= */

/* The index head carries no bottom rule; the filter row sits between it and
   the grid, and the grid draws its own top hairline. */
.fn-pagehead--index{padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(28px,2.4vw,45px);border-bottom:0}
.fn-pagehead--index .fn-body{max-width:56ch}
.fn-pagehead--index > * + *{margin-top:clamp(14px,1.2vw,20px)}

.fn-tabs{position:relative;display:flex;gap:clamp(18px,2.1vw,40px);padding:0 var(--fn-margin) clamp(24px,2.6vw,49px);white-space:nowrap}
.fn-tab{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:6px 0;background:none;border:0;cursor:pointer;font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-tab:hover,.fn-tab:focus-visible{color:var(--fn-purple)}
.fn-tabs__more{position:relative;flex:0 0 auto}
.fn-tabs__more-btn{display:flex;align-items:center;gap:8px}
.fn-tabs__caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;font-size:0}
.fn-tabs__menu{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;z-index:20;background:var(--fn-beige);box-shadow:0 0 0 0.5px var(--fn-navy)}
.fn-tabs__menu a{display:flex;align-items:center;min-height:48px;padding:0 clamp(16px,1.2vw,22px);border-bottom:var(--fn-rule-hairline);font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-tabs__menu a:hover,.fn-tabs__menu a:focus-visible{background:var(--fn-navy);color:var(--fn-beige)}

/* The index grid draws both hairlines itself, so it needs no top margin. */
.fn-index .fn-grid{margin-top:0}
/* The grid's bottom hairline must not sit on the footer. This is the same gap
   that separates modules elsewhere, and it applies whether the archive
   paginates or not. */
.fn-index{padding-bottom:var(--fn-gap-block)}
.fn-index__empty{padding:var(--fn-block) var(--fn-margin)}

.fn-pager{display:flex;justify-content:center;gap:clamp(12px,1vw,20px);padding:clamp(28px,2.6vw,48px) var(--fn-margin) 0}
.fn-pager__n{display:flex;align-items:center;justify-content:center;min-width:34px;min-height:44px;font:var(--fn-w-bold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-navy)}
.fn-pager__n:hover,.fn-pager__n:focus-visible{color:var(--fn-purple)}

/* =========================================================================
   SIDELINES — single article, both layouts
   ========================================================================= */

/* One centred column. 1446px is the measure from the design. */
.fn-article{max-width:1446px;margin-inline:auto}

.fn-article__head{padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(32px,3vw,50px)}
.fn-article__head > * + *{margin-top:clamp(10px,1vw,18px)}
/* The text article names its sport in the display face, not as a purple
   kicker; the photo essay uses the kicker. Both are in the reference. */
/* Both layouts name the sport as the purple category kicker. The design
   reference draws the text article's in the display face; Zoe asked on
   2026-09-06 for the category style everywhere instead. */
.fn-article__head .fn-kicker{margin-bottom:0}
/* The sport is a core post-terms block, and `.fn-kicker.wp-block-post-terms`
   zeroes its margins later in this file than either head's own rule, so the
   title rendered flush against the sport in both layouts. Hang the gap off the
   title, where nothing outranks it, and use the standard stack step so it
   matches every other kicker on the site. */
.fn-article__head > .fn-kicker + .fn-article__title,
.fn-photo__head > .fn-kicker + .fn-article__title{margin-top:var(--fn-gap-stack)}
.fn-article__title{margin:0;font:var(--fn-w-display) var(--fd-l)/var(--fd-l-lh) var(--fn-font-display);letter-spacing:var(--fn-track-tight);text-transform:uppercase;color:var(--fn-navy)}
.fn-article__byline{display:block;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
/* The subtitle sits between the headline and the byline in both layouts and
   carries the day of the event, which is often not the day the piece runs. It
   takes the body face rather than the byline's uppercase label, because it
   reads as a line of writing rather than as metadata. Each head keeps its own
   rhythm above it. */
.fn-article__subtitle{margin:0;max-width:52ch;font:var(--fn-w-display) var(--fd-xs)/var(--fd-xs-lh) var(--fn-font-display);letter-spacing:var(--fn-track-tight);text-transform:uppercase;color:var(--fn-navy)}
.fn-article__head .fn-article__subtitle{margin-top:clamp(10px,1vw,18px)}
.fn-photo__head .fn-article__subtitle{margin-top:clamp(18px,1.6vw,30px)}

.fn-article__hero{margin:0;padding-inline:var(--fn-margin)}
.fn-credit{margin:clamp(14px,1.3vw,25px) 0 0;text-align:center;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black)}

/* Body copy. The article's own line height is tighter than the site default,
   as authored in the reference. */
.fn-article__body{padding:clamp(28px,2.6vw,50px) var(--fn-margin) 0}
.fn-article__body > * + *{margin-top:clamp(28px,2.6vw,50px)}
.fn-article__body p{margin:0 0 clamp(14px,1.1vw,20px);font:var(--fn-w-medium) var(--fd-body)/1.35 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}
.fn-article__body p:last-child{margin-bottom:0}
.fn-article__body > p + p{margin-top:0}
/* Images and the pull quote sit clear of the copy on both sides. The figure
   rule used to zero every margin, which left body text touching the frame.
   Margins collapse against the paragraph's own bottom margin, so the larger
   of the two wins and the rhythm stays on the scale. */
.fn-article__body .wp-block-post-content > figure,
.fn-article__body .wp-block-post-content > .wp-block-image,
.fn-article__body .wp-block-post-content > .wp-block-quote,
.fn-article__body .wp-block-post-content > .wp-block-embed{margin-block:var(--fn-gap-module)}
.fn-article__body .wp-block-post-content > *:first-child{margin-top:0}
.fn-article__body .wp-block-post-content > *:last-child{margin-bottom:0}

/* An in-body image takes its credit from the block's own caption field, so
   the photographer can differ from the author on any frame. Same treatment as
   the credit under the main image. */
.fn-article__body figcaption{margin:clamp(14px,1.3vw,25px) 0 0;text-align:center;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black)}
.fn-article__body img{width:100%;height:auto;display:block}

/* The pull quote. The client asked for this treatment to be preserved
   exactly: 2px purple rule, display face, attribution in the label style. */
.fn-pullquote.wp-block-quote{margin:0;padding:0 0 0 clamp(18px,1.6vw,30px);border:0;border-left:2px solid var(--fn-purple)}
.fn-pullquote.wp-block-quote p{margin:0;max-width:32ch;font:var(--fn-w-display) var(--fd-s)/1.25 var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-navy)}
.fn-pullquote.wp-block-quote cite{display:block;margin-top:clamp(12px,1vw,18px);font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;font-style:normal;color:var(--fn-black-50)}

/* Tags: plain uppercase links above a hairline. No outline boxes. */
.fn-tagrow{display:flex;flex-wrap:wrap;gap:clamp(18px,2.1vw,40px);margin-top:clamp(28px,2.6vw,50px);padding-top:clamp(18px,1.6vw,30px);border-top:var(--fn-rule-hairline)}
.fn-tagrow a{font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-tagrow a:hover,.fn-tagrow a:focus-visible{color:var(--fn-purple)}

.fn-related{margin-top:var(--fn-gap-section);padding-bottom:var(--fn-block)}
.fn-related__title{margin:0 var(--fn-margin) clamp(24px,2.2vw,40px);font-weight:var(--fn-w-display);letter-spacing:var(--fn-track-wide)}
.fn-related .fn-grid{margin-top:0}

/* =========================================================================
   PHOTO ESSAY
   ========================================================================= */

.fn-photo__head{padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(32px,3vw,56px)}
.fn-photo__head .fn-kicker{margin-bottom:clamp(14px,1.4vw,26px)}
.fn-photo__head .fn-article__title{max-width:20ch}
.fn-photo__lead{margin-top:clamp(18px,1.6vw,30px);max-width:52ch}
.fn-photo__meta{margin-top:clamp(18px,1.6vw,28px);display:flex;flex-wrap:wrap;gap:clamp(12px,1.4vw,28px);font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black)}
.fn-photo__recap{padding:clamp(28px,2.6vw,50px) var(--fn-margin) clamp(32px,3vw,56px)}
.fn-photo__recap p{margin:0 0 clamp(14px,1.1vw,20px);font:var(--fn-w-medium) var(--fd-body)/1.35 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}
.fn-photo__credits{margin:clamp(40px,4vw,80px) 0 0;padding:0 var(--fn-margin)}
.fn-photo__credits .fn-body{max-width:52ch;line-height:1.6}
.fn-photo__credits .fn-tagrow{margin-top:clamp(24px,2vw,36px)}
/* The link out to the full gallery, and the last thing in a photo essay. Same
   kicker-plus-corner-arrow the stockist rows use for "Find on Google Maps", and
   centred on the page the way the theme centres every other closing action. The
   arrow is a pseudo-element rather than a span so an author only ever edits the
   words and the link. */
.fn-photo__more{display:flex;justify-content:center;margin:clamp(40px,4vw,80px) 0 0;padding:0 var(--fn-margin)}
.fn-photo__more p{margin:0}
.fn-photo__more a::after{content:"";flex:0 0 auto;width:13px;height:13px}

/* Masonry gallery.
   CSS multi-column, so each frame keeps its own aspect ratio and a hundred of
   them cost one layout pass rather than a JavaScript library. The core Gallery
   block's flex rules are undone here rather than in tokens.css, which is
   verbatim from the design and must not be edited. */
.wp-block-gallery.fn-photo-grid{display:block;columns:3;column-gap:clamp(14px,1.2vw,19px);padding:0 var(--fn-margin)}
/* Core sizes gallery figures with `figure.wp-block-image:not(#individual-image)`,
   an id selector used purely to outrank theme CSS. Matching that shape is the
   only way to take the width back; without it every frame renders a third of a
   column wide. */
.wp-block-gallery.fn-photo-grid.has-nested-images figure.wp-block-image:not(#individual-image){display:block;width:100%;max-width:100%;flex:none;margin:0 0 clamp(14px,1.2vw,19px);break-inside:avoid}
.wp-block-gallery.fn-photo-grid.has-nested-images figure.wp-block-image:not(#individual-image) img{display:block;width:100%;height:auto;object-fit:initial;background:var(--fn-grey)}
/* No per-photo captions in this layout. */
.wp-block-gallery.fn-photo-grid figcaption{display:none}
@media (max-width:900px){
	.wp-block-gallery.fn-photo-grid{columns:2}
}

/* Specificity guards. The universal spacing rules are written as
   `.fn-pagehead.wp-block-group > * + *`, two classes, so the index override has
   to match that weight or the earlier rule wins. Same lesson as the Home
   concept module losing its page margins to a two-class base rule. */
.fn-pagehead--index.wp-block-group{padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) clamp(28px,2.4vw,45px);border-bottom:0}
.fn-pagehead--index.wp-block-group > * + *{margin-top:clamp(14px,1.2vw,20px)}

/* Core writes its own margins on post-terms, post-date and post-author-name;
   the byline row is a flex container and supplies the gap itself. */
.fn-article__byline.wp-block-group{gap:8px}
.fn-article__byline .wp-block-post-author-name,
.fn-article__byline .wp-block-post-date,
.fn-photo__meta .wp-block-post-author-name,
.fn-photo__meta .wp-block-post-date{margin:0;font:inherit;color:inherit}
/* The kicker is a post-terms block in both layouts. */
.fn-kicker.wp-block-post-terms{margin:0}
.fn-photo__meta.wp-block-group{gap:clamp(12px,1.4vw,28px)}
.fn-article__byline a,.fn-photo__meta a,.fn-photo__meta time{color:inherit}
.fn-tagrow.wp-block-post-terms{display:flex;flex-wrap:wrap;gap:clamp(18px,2.1vw,40px)}
.fn-tagrow .wp-block-post-terms__separator{display:none}
.fn-kicker.wp-block-post-terms a{color:inherit}
.fn-kicker.wp-block-post-terms a:hover{color:var(--fn-navy)}
.fn-photo__lead.wp-block-post-excerpt{margin-top:clamp(18px,1.6vw,30px)}
.fn-photo__lead .wp-block-post-excerpt__excerpt{margin:0}
/* The constrained layout caps children at contentSize; the gallery is meant to
   run to the page gutters. */
.wp-block-gallery.fn-photo-grid{max-width:none}
/* "By" / "Photographs by" is a paragraph beside the author block, because
   core/post-author-name takes no prefix and drops the attribute in silence. */
.fn-byline__word{margin:0;font:inherit;color:inherit}
.fn-article__byline.wp-block-group{gap:6px}

/* tokens.css makes the filter row a horizontal scroller. Above 900px the More
   menu is what handles overflow, and a scroll container clips the dropdown to
   the row, so the row must not scroll there. Below 900px the scroller is the
   design's answer and the dropdown is switched off. */
@media (min-width:901px){
	.fn-tabs[data-tabs]{overflow:visible}
}
/* The dropdown hangs left from the More control when the control is close to
   the right edge, so a long sport name cannot push it off the page. */
.fn-tabs__menu{max-width:min(320px,calc(100vw - var(--fn-margin) * 2))}
.fn-tabs__more[data-near-end] .fn-tabs__menu{left:auto;right:0}
/* The character reveal sits on the paragraph, never the blockquote: it rebuilds
   its element from textContent, which would flatten the quote and swallow the
   attribution. Styling the blockquote too keeps it right either way. */
.fn-pullquote.wp-block-quote{font:var(--fn-w-display) var(--fd-s)/1.25 var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-navy)}
.fn-pullquote.wp-block-quote > p{max-width:32ch}

/* ══════════════════════════════════════════════════════════════════════════
   Second-handoff pages: Subscribe, Contribute, Stockists, Legal, contributor
   profiles, the two holding pages and 404. Values come from tokens.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Pitch form file field ─────────────────────────────────────────────── */
.fn-file__label{display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-height:44px;padding:0 0 12px;border-bottom:var(--fn-hairline) solid var(--fn-black);cursor:pointer}
.fn-file__cta{font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-purple);transition:var(--fn-transition-color)}
.fn-file__label:hover .fn-file__cta{color:var(--fn-navy)}
.fn-file__name{font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black-50)}

/* ── Hairline row stacks: stockists, facts, credits ────────────────────── */
.fn-rows{border-top:var(--fn-rule-hairline)}
.fn-rows > *{border-bottom:var(--fn-rule-hairline);padding-block:clamp(20px,2vw,34px)}
.fn-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(24px,3vw,60px);align-items:center}
.fn-row__label{font:var(--fn-w-extrabold) var(--fd-kicker)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-purple)}
.fn-row__value{font:var(--fn-w-bold) var(--fd-label)/1.5 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-row__link,
.fn-photo__more a{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;font:var(--fn-w-extrabold) var(--fd-kicker)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-purple);text-decoration:none;transition:var(--fn-transition-color)}
.fn-row__link:hover,
.fn-photo__more a:hover{color:var(--fn-navy)}
/* The Maps link stays right-aligned when the row stacks (spec 5.13). */
@media (max-width:900px){
	.fn-row{grid-template-columns:minmax(0,1fr) auto;align-items:start}
	.fn-row__link{justify-self:end;align-self:start}
}

/* ── Stockists: the Online row keeps its button beside the line ────────── */
.fn-online{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(24px,3vw,60px);align-items:center}
@media (max-width:900px){.fn-online{grid-template-columns:minmax(0,1fr)}.fn-online .fn-btn{justify-self:start}}

/* ── Legal: sticky index beside the document ───────────────────────────── */
.fn-legal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:clamp(32px,4vw,80px);align-items:start}
.fn-legal__index{position:sticky;top:calc(var(--fn-header-top) + clamp(48px,5vw,96px));display:flex;flex-direction:column;gap:clamp(14px,1.2vw,22px)}
.fn-legal__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(10px,0.9vw,16px)}
.fn-legal__link{display:block;min-height:44px;display:flex;align-items:center;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy);text-decoration:none;transition:var(--fn-transition-color)}
.fn-legal__link:hover,.fn-legal__link.is-current{color:var(--fn-purple);text-decoration:underline;text-underline-offset:6px}
.fn-legal__doc > * + *{margin-top:clamp(16px,1.4vw,26px)}
.fn-legal__doc h2{margin-top:clamp(32px,3vw,56px)}
@media (max-width:900px){
	.fn-legal{grid-template-columns:minmax(0,1fr)}
	.fn-legal__index{position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:clamp(16px,2vw,28px)}
	.fn-legal__list{flex-direction:row;flex-wrap:wrap;gap:clamp(16px,2vw,28px)}
}

/* ── Contributor profile ───────────────────────────────────────────────── */
/* The author template opens straight into this block with only the generic
   fn-block padding, so the kicker and the name landed under the absolutely
   positioned header. Match the clearance every other page-opening module
   carries, less the fn-block padding already applied by the template. */
.fn-contributor{padding-top:calc(var(--fn-header-top) + clamp(96px,10vw,190px) - var(--fn-block))}
.fn-contributor__head{padding-bottom:clamp(28px,2.6vw,50px)}
.fn-contributor__name{margin:clamp(12px,1.2vw,22px) 0 0;text-transform:uppercase}
.fn-contributor__role{display:block;margin-top:clamp(12px,1.2vw,20px);color:var(--fn-navy)}
.fn-contributor__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,80px);align-items:start;padding-top:clamp(32px,3vw,60px)}
.fn-meta{margin:0;border-top:var(--fn-rule-hairline)}
.fn-meta__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px clamp(20px,2vw,40px);padding-block:clamp(14px,1.2vw,22px);border-bottom:var(--fn-rule-hairline)}
.fn-meta__row dd{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-meta__row dd a{color:var(--fn-navy);text-decoration:none;transition:var(--fn-transition-color)}
.fn-meta__row dd a:hover{color:var(--fn-purple)}
.fn-contributor__bio{margin-top:clamp(24px,2.2vw,42px)}
.fn-contributor__bio > * + *{margin-top:clamp(14px,1.2vw,22px)}
.fn-contributor__quote{margin:clamp(28px,2.6vw,48px) 0 0;max-width:26ch;font:var(--fn-w-display) var(--fd-s)/1.15 var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-purple);text-wrap:pretty}
.fn-contributor__credits{margin-top:clamp(48px,5vw,96px);display:flex;flex-direction:column;gap:clamp(20px,1.8vw,32px)}
.fn-credit-row{display:grid;grid-template-columns:160px minmax(0,1fr) minmax(0,1fr);gap:16px clamp(20px,2vw,40px);align-items:baseline;padding-block:clamp(16px,1.4vw,26px);border-top:var(--fn-rule-hairline)}
.fn-credit-row:last-child{border-bottom:var(--fn-rule-hairline)}
@media (max-width:900px){
	.fn-contributor__body{grid-template-columns:minmax(0,1fr)}
	.fn-credit-row{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* Bylines link to the contributor page */
.fn-byline__link{color:inherit;text-decoration:none;transition:var(--fn-transition-color)}
.fn-byline__link:hover{color:var(--fn-purple);text-decoration:underline;text-underline-offset:6px}

/* ── Holding pages: copy left, cover right; image first on phones ──────── */
.fn-soon{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(32px,4vw,80px);align-items:center}
.fn-soon__copy > * + *{margin-top:clamp(20px,1.8vw,34px)}
@media (max-width:900px){
	.fn-soon{grid-template-columns:minmax(0,1fr)}
	.fn-soon__media{order:-1}
}

/* ── 404 — type layout ─────────────────────────────────────────────────── */
/* A full navy field with the oversized numeral, left aligned and vertically
   centred; the footer beneath it is navy too, so the page reads as one ground.
   Values are the export's, unrounded (Claude design/export_404_type). */
.fn-404.wp-block-group{background:var(--fn-navy);min-height:100vh;padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) var(--fn-block);display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:clamp(24px,2.4vw,44px)}
.fn-404.wp-block-group > *{margin-block:0}
.fn-404__code{margin:0;font:var(--fn-w-display) clamp(120px,22vw,420px)/0.86 var(--fn-font-display);letter-spacing:var(--fn-track-tight);color:var(--fn-beige)}
.fn-404__lead{max-width:48ch}
/* The destination row sits under a hairline, wrapping rather than scrolling. */
.fn-404__links.wp-block-group{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2.1vw,40px);padding-top:clamp(18px,1.6vw,30px);border-top:var(--fn-rule-hairline-on-ink)}
.fn-404__link{margin:0;font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase}
.fn-404__link a{color:var(--fn-beige);text-decoration:none;transition:var(--fn-transition-color)}
.fn-404__link a:hover,.fn-404__link a:focus-visible{color:var(--fn-lime)}

/* ── Newsletter field on a paper ground ────────────────────────────────── */
/* The band's field is beige-on-navy. Subscribe and the two holding pages put
   the same form on paper, where the design specifies a navy ring (spec 5.15). */
.fn-news-band input{color:var(--fn-navy);box-shadow:inset 0 0 0 1px var(--fn-navy)}
.fn-news-band input::placeholder{color:var(--fn-black-50)}
.fn-news-note{color:var(--fn-purple)}
.fn-news-note[data-error]{color:var(--fn-purple)}
.fn-on-ink .fn-news-band input{color:var(--fn-beige);box-shadow:var(--fn-ring-field)}
.fn-on-ink .fn-news-band input::placeholder{color:var(--fn-beige-75)}
.fn-on-ink .fn-news-note{color:var(--fn-lime)}
.fn-on-ink .fn-news-note[data-error]{color:var(--fn-beige)}
/* The fact rows carry two blocks of copy rather than a label and a link, so
   they stack on phones instead of crushing the left column. */
.fn-row--fact .fn-row__value{text-align:right}
@media (max-width:900px){.fn-row--fact{grid-template-columns:minmax(0,1fr);gap:6px}.fn-row--fact .fn-row__value{text-align:left}}

/* ══════════════════════════════════════════════════════════════════════════
   Second-handoff corrections, 2026-09-06.
   Everything below is read from "Field Note Website.dc.html" in
   design_handoff_fieldnote_wordpress_02. No value is invented.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Page head without the closing rule ────────────────────────────────── */
/* Contribute and Stockists open on a head that runs straight into the next
   module; only the ruled-index pages carry the hairline. */
.fn-pagehead--flush,
.fn-pagehead--flush.wp-block-group{border-bottom:0}

/* ── Core buttons wearing the fn-btn classes ───────────────────────────── */
/* wp:button puts className on the wrapper, not on the link, so the wrapper was
   painted and the inner link kept its own colour — the hover only moved half
   the button. The wrapper is neutralised and the link carries the style. */
.wp-block-button.fn-btn{display:inline-block;min-height:0;padding:0;background:none;box-shadow:none;border-radius:0}
.wp-block-button.fn-btn > .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:var(--fn-btn-h);padding:0 clamp(24px,2vw,38px);border:0;border-radius:var(--fn-radius);font:var(--fn-w-semibold) var(--fd-btn)/1 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;text-decoration:none;transition:var(--fn-transition-color)}
.wp-block-button.fn-btn--primary > .wp-block-button__link{background:var(--fn-purple);color:var(--fn-beige);box-shadow:inset 0 0 0 1px var(--fn-purple)}
.wp-block-button.fn-btn--primary > .wp-block-button__link:hover,
.wp-block-button.fn-btn--primary > .wp-block-button__link:focus-visible{background:var(--fn-lime);color:var(--fn-navy);box-shadow:inset 0 0 0 1px var(--fn-lime)}
.wp-block-button.fn-btn--lime > .wp-block-button__link{background:var(--fn-lime);color:var(--fn-navy);box-shadow:inset 0 0 0 1px var(--fn-lime)}
.wp-block-button.fn-btn--lime > .wp-block-button__link:hover,
.wp-block-button.fn-btn--lime > .wp-block-button__link:focus-visible{background:var(--fn-beige);box-shadow:inset 0 0 0 1px var(--fn-beige)}
.wp-block-button.fn-btn--outline > .wp-block-button__link{background:transparent;color:var(--fn-navy);box-shadow:var(--fn-ring-outline)}
.wp-block-button.fn-btn--outline > .wp-block-button__link:hover,
.wp-block-button.fn-btn--outline > .wp-block-button__link:focus-visible{background:var(--fn-navy);color:var(--fn-beige)}
/* The lime button also exists as a plain anchor inside the PHP blocks. */
.fn-btn--lime{background:var(--fn-lime);color:var(--fn-navy);box-shadow:inset 0 0 0 1px var(--fn-lime)}
.fn-btn--lime:hover,.fn-btn--lime:focus-visible{background:var(--fn-beige);box-shadow:inset 0 0 0 1px var(--fn-beige)}

/* ── Contribute: the four-column grid runs to the page edge ────────────── */
/* The design gives this grid its own cell padding, narrower than the page
   margin the home grid uses, because it sits full bleed. */
.fn-grid--involved > *{padding:clamp(24px,2.2vw,40px) clamp(20px,1.8vw,34px)}
.fn-grid--involved > :first-child{border-left:0}
/* Contribute puts one sentence in each column, not a list of items, so the
   markers come off. Home's Get Involved keeps its bullets: those columns
   really are short lists. */
.fn-grid--involved .fn-involved__list{padding-left:0;list-style:none}

/* ── Stockists ─────────────────────────────────────────────────────────── */
/* Online: the button sits on the vertical centre of the headline beside it. */
/* The kicker and the headline are lifted out of their column so the button
   can sit on the headline's own centre line rather than the column's. */
.fn-online,
.fn-online.wp-block-columns{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:clamp(24px,3vw,60px);row-gap:0;align-items:center}
.fn-online .fn-btn-row{justify-content:flex-start;padding-inline:0}
@media (min-width:901px){
.fn-online > .wp-block-column:first-child{display:contents}
.fn-online > .wp-block-column:first-child > .fn-kicker{grid-column:1;grid-row:1;margin-bottom:clamp(12px,1.2vw,22px)}
.fn-online > .wp-block-column:first-child > h2{grid-column:1;grid-row:2;margin:0}
.fn-online > .wp-block-column:last-child{grid-column:2;grid-row:2;align-self:center}
}
/* Below the split the first column is an ordinary flow block again, and core
   zeroes every child margin inside one, so the kicker sat flush against the
   headline with no gap at all while every other kicker on the site keeps the
   stack gap. Both gaps here are now that token rather than a hand-picked 24px. */
@media (max-width:900px){
.fn-online,.fn-online.wp-block-columns{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:var(--fn-gap-stack)}
.fn-online > .wp-block-column:first-child > .fn-kicker{margin-bottom:var(--fn-gap-stack)}
}
/* In person: the kicker keeps its air before the first hairline. */
.fn-kicker + .fn-rows{margin-top:clamp(20px,1.8vw,32px)}
/* A shop reads as a display name over a sans address, both navy. */
.fn-row__name{margin:0;font:var(--fn-w-display) var(--fd-s)/1.2 var(--fn-font-display);letter-spacing:var(--fn-track-wide);text-transform:none;color:var(--fn-navy)}
.fn-row__addr{margin:0;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:none;color:var(--fn-navy)}
.fn-row__name + .fn-row__addr{margin-top:6px}
/* The maps link is a kicker with a corner arrow; the arrow needs a box. */
.fn-row__link .fn-icon{flex:0 0 auto;width:13px;height:13px}

/* ── Fact rows on the holding pages ────────────────────────────────────── */
/* Design: a display label in a 320px column, body copy beside it, baselines
   aligned and both left ranged. */
.fn-row--fact{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(12px,2vw,40px);align-items:baseline}
.fn-rows--fact > *{padding-block:clamp(16px,1.4vw,26px)}
.fn-row--fact .fn-row__label{font:var(--fn-w-display) var(--fd-xs)/var(--fd-xs-lh) var(--fn-font-display);letter-spacing:var(--fn-track-tight);text-transform:none;color:var(--fn-navy)}
.fn-row--fact .fn-row__value{font:var(--fn-w-medium) var(--fd-body)/var(--fd-body-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:none;color:var(--fn-black);text-align:left}

/* ── Split band on ink ─────────────────────────────────────────────────── */
/* The closing band of both holding pages is a two-column navy field, not the
   centred fn-band: kicker left, headline and actions right. */
.fn-splitband,
.fn-splitband.wp-block-group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--fn-gutter);padding:clamp(40px,4vw,80px) var(--fn-margin) var(--fn-block);background:var(--fn-navy);align-items:start;text-align:left}
.fn-splitband.wp-block-group > *{margin-block:0}
.fn-splitband__body.wp-block-group > * + *{margin-top:clamp(16px,1.4vw,26px)}
.fn-splitband__actions.wp-block-group{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2vw,36px);margin-top:clamp(24px,2.2vw,40px);padding-inline:0;justify-content:flex-start}
.fn-splitband__link{margin:0;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase}
.fn-splitband__link a{color:var(--fn-beige);text-decoration:none;transition:var(--fn-transition-color)}
.fn-splitband__link a:hover,.fn-splitband__link a:focus-visible{color:var(--fn-lime)}
@media (max-width:900px){.fn-splitband,.fn-splitband.wp-block-group{grid-template-columns:minmax(0,1fr)}}

/* ── Headline size modifiers ───────────────────────────────────────────── */
/* The holding pages set their secondary headlines one step below fn-h2. */
.fn-h2--small{font-size:var(--fd-s);line-height:var(--fd-s-lh)}
.fn-h2--upper{text-transform:uppercase}
.fn-h2--tight{line-height:1.2}

/* ── Sidelines holding page: the French half sits under a hairline ─────── */
.fn-soon-fr,
.fn-soon-fr.wp-block-group{padding:clamp(28px,2.6vw,48px) var(--fn-margin) var(--fn-block);border-top:var(--fn-rule-hairline)}
.fn-soon-fr.wp-block-group > * + *{margin-top:clamp(18px,1.6vw,32px)}
.fn-soon-fr .fn-consent{margin:0;font:var(--fn-w-bold) var(--fd-label)/1.5 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black-50)}
.fn-soon{align-items:start}
.fn-soon.wp-block-columns{align-items:flex-start}

/* -- Legal --------------------------------------------------------------- */
/* One column to a 1446px measure, not a sticky sidebar: kicker, title, intro,
   then a row of the three documents with the revision date ranged right above
   a hairline, then the sections.
   The legal documents are the one place the design fixes a type size rather
   than scaling it: 20/27 for every paragraph, heading and list item. */
.fn-legal-page,
.fn-legal-page.wp-block-group{padding:calc(var(--fn-header-top) + clamp(96px,10vw,190px)) var(--fn-margin) var(--fn-block)}
.fn-legal__wrap,
.fn-legal__wrap.wp-block-group{--fd-legal:20px;--fd-legal-lh:27px;max-width:1446px;margin-inline:auto}
.fn-legal__wrap.wp-block-group > *{margin-block:0}
.fn-legal__wrap > .fn-kicker{margin-bottom:clamp(14px,1.2vw,22px)}
.fn-legal__intro,
.fn-legal__doc .fn-legal__intro{margin:clamp(24px,2vw,40px) 0 0;max-width:72ch;font:var(--fn-w-medium) var(--fd-legal)/var(--fd-legal-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}
/* The index becomes a row of tabs; display:contents lets its list sit on the
   same flex line as the revision date. */
.fn-legal__tabs,
.fn-legal__tabs.wp-block-group{margin-top:clamp(28px,2.4vw,44px);display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.4vw,44px);padding-bottom:clamp(20px,1.8vw,32px);border-bottom:var(--fn-rule-hairline)}
.fn-legal__tabs .fn-legal__index{display:contents;position:static}
.fn-legal__tabs .fn-legal__index > .fn-kicker{display:none}
.fn-legal__tabs .fn-legal__list{flex-direction:row;flex-wrap:wrap;gap:clamp(20px,2.4vw,44px);margin:0;padding:0;list-style:none}
.fn-legal__tabs .fn-legal__link{min-height:0;display:inline-flex}
.fn-legal__updated,
.fn-legal__doc .fn-legal__updated{margin:0 0 0 auto;font:var(--fn-w-bold) var(--fd-label)/1.4 var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-black-50)}
.fn-legal__doc{margin-top:0}
.fn-legal__doc > * + *{margin-top:0}
.fn-legal__doc h2{margin:clamp(32px,2.8vw,52px) 0 clamp(12px,1vw,18px);font:var(--fn-w-extrabold) var(--fd-legal)/var(--fd-legal-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);text-transform:uppercase;color:var(--fn-navy)}
.fn-legal__doc p{margin:0 0 clamp(14px,1.1vw,20px);max-width:80ch;font:var(--fn-w-medium) var(--fd-legal)/var(--fd-legal-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}
.fn-legal__doc ul,.fn-legal__doc ol{margin:0 0 clamp(14px,1.1vw,20px);max-width:80ch;padding-left:1.2em}
.fn-legal__doc li{font:var(--fn-w-medium) var(--fd-legal)/var(--fd-legal-lh) var(--fn-font-sans);letter-spacing:var(--fn-track-wide);color:var(--fn-black)}
.fn-legal__doc .fn-legal__intro{max-width:72ch}
.fn-legal__doc .fn-legal__updated{max-width:none}
@media (max-width:640px){.fn-legal__updated{margin-left:0;flex-basis:100%}}

/* The legal title drops one step from fn-h1, to the medium display size. */
.fn-h1--m{font-size:var(--fd-m);line-height:var(--fd-m-lh);font-weight:var(--fn-w-display)}

/* Image slots. Each grey media area now holds a real core image block, so the
   photo is picked on the canvas. The figure has to carry the slot's height for
   object-fit to have anything to fit to, and the grey placeholder note steps
   aside once a photo is in. */
.fn-split__media .wp-block-image,
.fn-hero__media .wp-block-image,
.fn-media .wp-block-image{width:100%;height:100%;margin:0;display:block}
.fn-split__media .wp-block-image img,
.fn-hero__media .wp-block-image img,
.fn-media .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
/* The hero slot is the one image area with no aspect ratio, so a portrait
   photo made the whole hero as tall as the photo. Taking the figure out of
   flow lets the hero keep its own height and the photo crop to fit. */
.fn-hero__media{position:relative;overflow:hidden}
.fn-hero__media .wp-block-image{position:absolute;inset:0}

.fn-media:has(img[src]) .fn-placeholder-note{display:none}
/* An image block with no photo chosen yet saves a src-less <img>. Hide it so the
   slot stays a clean grey block on the front end. */
.fn-split__media img:not([src]),
.fn-hero__media img:not([src]),
.fn-media img:not([src]){display:none}

/* ── Newsletter consent line ───────────────────────────────────────────── */
/* Canada's anti-spam law wants the sender, the offer and the way out visible
   at the moment of signup. It is legal small print, so it uses the label-s
   size but stays sentence case: the uppercase label treatment is unreadable
   at two lines. Muted against whichever ground it lands on.

   It runs the full width of the field it explains. Capped narrower, it sat
   under the middle of the input and read as a stray sentence rather than as
   that field's own small print. */
.fn-consent-line{max-width:none;margin:12px 0 0;font:400 var(--fd-label-s)/1.5 var(--fn-font-sans);letter-spacing:0;text-transform:none;color:var(--fn-black-50)}
.fn-consent-line a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:var(--fn-transition-color)}
.fn-consent-line a:hover,.fn-consent-line a:focus-visible{color:var(--fn-purple)}
.fn-consent-line--compact{max-width:none;margin-inline:0}
.fn-on-ink .fn-consent-line{color:var(--fn-beige-75)}
.fn-on-ink .fn-consent-line a:hover,.fn-on-ink .fn-consent-line a:focus-visible{color:var(--fn-lime)}
/* The one-line promise an editor writes directly beneath a signup form. It is
   an ordinary paragraph in page content, so it is matched by position: it
   takes the form's own width and centres under the field. */
.wp-block-fieldnote-newsletter-form + .fn-label-s{width:min(733px,100%);margin-inline:0;text-align:center}

/* ── Field focus, stated by the field itself ───────────────────────────── */
/* Text fields opt out of the offset outline higher up this file: a boxed
   field plus a ring 3px outside it reads as a stray rectangle, which is what
   the lime one in the footer looked like. Focus is shown instead by doubling
   the edge the field already draws, in the colour that edge already uses.
   Drawn with a shadow rather than a border so nothing reflows on focus, and
   placed last so the on-ink field colours cannot outrank it. */
.fn-news-inline:focus-within{box-shadow:inset 0 0 0 2px var(--fn-beige)}
.fn-news-band input:focus{box-shadow:inset 0 0 0 2px var(--fn-navy)}
.fn-on-ink .fn-news-band input:focus{box-shadow:inset 0 0 0 2px var(--fn-beige)}
.fn-field:focus{box-shadow:0 1px 0 0 var(--fn-black)}