@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

/* ── Display face: real PP Editorial Old (licensed webfonts supplied by client) ── */
@font-face{font-family:"PP Editorial Old";src:url("fonts/PPEditorialOld-Regular.woff2") format("woff2"),url("fonts/PPEditorialOld-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Editorial Old";src:url("fonts/PPEditorialOld-Italic.woff2") format("woff2"),url("fonts/PPEditorialOld-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PP Editorial Old";src:url("fonts/PPEditorialOld-Ultralight.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"PP Editorial Old";src:url("fonts/PPEditorialOld-Ultrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Core palette — Field Note Design System */
  --fn-navy:#18233F;
  --fn-beige:#F7F3E7;
  --fn-purple:#5879ED;
  --fn-lime:#CCE036;
  --fn-black:#000000;
  --fn-white:#FFFFFF;
  --fn-grey:#D9D9D9;
  --fn-beige-75:rgba(247,243,231,0.75);
  --fn-black-50:rgba(0,0,0,0.5);
  --fn-black-80:rgba(0,0,0,0.8);

  --fn-surface-paper:var(--fn-beige);
  --fn-surface-ink:var(--fn-navy);
  --fn-surface-accent:var(--fn-purple);
  --fn-surface-highlight:var(--fn-lime);
  --fn-surface-media:var(--fn-grey);
  --fn-text-primary:var(--fn-navy);
  --fn-text-body:var(--fn-black);
  --fn-text-on-ink:var(--fn-beige);
  --fn-text-on-ink-muted:var(--fn-beige-75);
  --fn-text-on-accent:var(--fn-beige);
  --fn-text-on-highlight:var(--fn-navy);
  --fn-text-kicker:var(--fn-purple);
  --fn-text-placeholder:var(--fn-black-50);
  --fn-link:var(--fn-navy);
  --fn-link-hover:var(--fn-purple);
  --fn-link-on-ink:var(--fn-beige-75);
  --fn-link-on-ink-hover:var(--fn-lime);
  --fn-rule:var(--fn-navy);
  --fn-rule-on-ink:var(--fn-beige);

  /* Type families — PP Editorial Old, Cormorant Garamond as the fallback Zoé specified */
  --fn-font-display:"PP Editorial Old","Cormorant Garamond",Georgia,serif;
  --fn-font-sans:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fn-w-display:400; --fn-w-display-mid:500; --fn-w-medium:500;
  --fn-w-semibold:600; --fn-w-bold:700; --fn-w-extrabold:800;
  --fn-track-tight:-0.010em;
  --fn-track-wide:0.010em;

  /* Fixed scale (1920 reference) */
  --fn-display-l:120px; --fn-display-m:80px; --fn-display-s:50px; --fn-display-xs:32px;
  --fn-body:20px; --fn-kicker:20px; --fn-label:16px; --fn-label-xs:10px; --fn-label-xl:25px;

  /* Fluid scale — 1920 desktop values collapsing to 390 mobile */
  --fd-l:clamp(40px,6.25vw,120px);   --fd-l-lh:1.08;
  --fd-m:clamp(32px,4.17vw,80px);    --fd-m-lh:1.16;
  --fd-s:clamp(24px,2.60vw,50px);    --fd-s-lh:1.2;
  --fd-xs:clamp(20px,1.67vw,32px);   --fd-xs-lh:1.25;
  --fd-body:clamp(15px,1.04vw,20px); --fd-body-lh:1.42;
  --fd-kicker:clamp(12px,1.04vw,20px);
  --fd-label:clamp(11px,0.83vw,16px);
  --fd-label-s:clamp(10px,0.63vw,12px);  /* small text bold — legal, copyright */
  --fd-btn:clamp(14px,1.30vw,25px);

  /* Spacing */
  --fn-margin:clamp(25px,2.6vw,50px);
  --fn-section:clamp(72px,11.98vw,230px);
  --fn-block:clamp(40px,7.81vw,150px);
  --fn-gutter:clamp(24px,5.2vw,100px);
  --fn-header-top:clamp(24px,4.01vw,77px);
  --fn-btn-h:clamp(52px,3.65vw,70px);
  --fn-field-h:clamp(52px,3.65vw,70px);
  --fn-icon:clamp(24px,1.98vw,38px);
  --fn-icon-nav:clamp(20px,1.35vw,26px);   /* header icons, matched to the nav text */

  --fn-radius:0;
  --fn-hairline:0.5px;
  --fn-rule-hairline:0.5px solid var(--fn-navy);
  --fn-rule-hairline-on-ink:0.5px solid var(--fn-beige);
  --fn-ring-outline:inset 0 0 0 2px var(--fn-navy);
  --fn-ring-field:inset 0 0 0 1px var(--fn-beige);

  --fn-dur-fast:120ms; --fn-dur:180ms;
  --fn-ease:linear;
  --fn-ease-emphasis:cubic-bezier(.2,0,.2,1);
  --fn-transition-color:color var(--fn-dur) var(--fn-ease),background-color var(--fn-dur) var(--fn-ease),box-shadow var(--fn-dur) var(--fn-ease);
}

/* ── Resets ── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fn-beige);color:var(--fn-navy);font-family:var(--fn-font-sans);-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg{display:block;max-width:100%}
input::placeholder,textarea::placeholder{color:var(--fn-black-50);opacity:1}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--fn-link);text-decoration:none;transition:var(--fn-transition-color)}
/* A button that happens to be a link is not a link for colour purposes: this
   rule was turning the hero's Preorder button purple on lime. The exclusions
   are wrapped in :where() so they carry no weight of their own. Written as
   bare :not() they added two classes to the selector, which then outranked
   every .fn-btn hover and broke the outline buttons instead. */
a:hover:where(:not(.wp-element-button):not(.wp-block-button__link):not(.fn-btn)){color:var(--fn-link-hover)}

/* ── Motion: scroll reveals, line masks, page transition ── */
@keyframes fnRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fnFade{from{opacity:0}to{opacity:1}}
@keyframes fnLeft{from{opacity:0;transform:translateX(-72px)}to{opacity:1;transform:none}}
@keyframes fnRight{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:none}}
@keyframes fnLine{from{transform:translateY(110%)}to{transform:none}}
@keyframes fnPageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fnDrawerIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes fnChar{from{opacity:.08}to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  [data-page-anim]{animation:fnPageIn .55s var(--fn-ease-emphasis) both}
  /* Hidden ONLY once JS has armed the observer — content is never invisible without JS */
  [data-fn-armed] [data-reveal]{opacity:0}
  [data-fn-armed] [data-reveal][data-in]{animation:fnRise .85s var(--fn-ease-emphasis) both;animation-delay:var(--fn-d,0s)}
  [data-fn-armed] [data-reveal="fade"][data-in]{animation-name:fnFade}
  [data-fn-armed] [data-reveal="left"][data-in]{animation-name:fnLeft}
  [data-fn-armed] [data-reveal="right"][data-in]{animation-name:fnRight}
  [data-fn-armed] [data-reveal="line"]{opacity:1;transform:translateY(110%)}
  [data-fn-armed] [data-reveal="line"][data-in]{animation:fnLine .9s var(--fn-ease-emphasis) both;animation-delay:var(--fn-d,0s)}
  [data-fn-armed] [data-reveal="line"][data-in-now]{animation-duration:.01s}
  /* Quote: letter-by-letter, long duration against a short stagger so ~30 chars
     are mid-fade at once — the leading edge reads as a gradient sweeping along
     the sentence at reading pace. Opacity only: the 4px per-character blur this
     started with put a filter layer on all 206 spans and made the sweep stutter. */
  [data-fn-armed] [data-reveal="chars"]{opacity:1}
  [data-fn-armed] [data-reveal="chars"] [data-ch]{opacity:.08}
  [data-fn-armed] [data-reveal="chars"][data-in] [data-ch]{animation:fnChar .42s var(--fn-ease-emphasis) both;animation-delay:calc(var(--fn-ci) * 12ms)}
  [data-fn-armed] [data-reveal="chars"][data-in-now] [data-ch]{animation-duration:.01s;animation-delay:0s}
  [data-lines] > *:nth-child(1){--fn-d:0s}
  [data-lines] > *:nth-child(2){--fn-d:.08s}
  [data-lines] > *:nth-child(3){--fn-d:.16s}
  [data-lines] > *:nth-child(4){--fn-d:.24s}
  [data-lines] > *:nth-child(5){--fn-d:.32s}
  [data-stagger] > *:nth-child(2){--fn-d:.1s}
  [data-stagger] > *:nth-child(3){--fn-d:.2s}
  [data-stagger] > *:nth-child(4){--fn-d:.3s}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal="line"]{opacity:1;transform:none}
  [data-reveal="chars"] [data-ch]{opacity:1}
}

/* ── Drawer ── */
[data-drawer]{transform:translateX(100%);transition:transform .45s var(--fn-ease-emphasis)}
[data-drawer][data-open]{transform:none}
[data-scrim]{opacity:0;pointer-events:none;transition:opacity .3s var(--fn-ease)}
[data-scrim][data-open]{opacity:1;pointer-events:auto}

/* ── Responsive utilities (breakpoints: 1200 tablet, 900 mobile) ── */
@media (max-width:1200px){
  [data-nav-desktop]{display:none !important}
  [data-nav-mobile]{display:flex !important}
}
@media (min-width:1201px){
  [data-nav-mobile]{display:none !important}
}
@media (max-width:900px){
  [data-hide-mobile]{display:none !important}
  [data-stack]{grid-template-columns:1fr !important}
  [data-stack-rev] > *:first-child{order:2}
  [data-cols]{grid-template-columns:1fr !important}
  [data-cols] > *{border-left:0 !important;border-top:var(--fn-rule-hairline)}
  [data-cols] > *:first-child{border-top:0 !important}
  [data-hero]{display:block !important;min-height:min(88vh,660px) !important;position:relative}
  [data-hero-media]{position:absolute !important;inset:0 !important;width:auto !important;height:auto !important}
  [data-hero-copy]{position:relative;z-index:1;background:linear-gradient(180deg,rgba(24,35,63,.45) 0%,rgba(24,35,63,.88) 62%,rgba(24,35,63,.96) 100%) !important;min-height:min(88vh,660px);display:flex;flex-direction:column;justify-content:flex-end}
  [data-footer]{grid-template-columns:1fr !important}
  [data-contact-body]{grid-template-columns:1fr !important}
  [data-footer-legal]{grid-template-columns:1fr !important;justify-items:start !important;gap:18px !important}
  [data-footer-legal] > div{justify-content:flex-start !important}
}
@media (min-width:901px){
  [data-only-mobile]{display:none !important}
}
@media (min-width:901px) and (max-width:1200px){
  [data-cols]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-cols] > *:nth-child(-n+2){border-top:0 !important}
  [data-cols] > *:nth-child(2n+1){border-left:0 !important}
  [data-cols] > *:nth-child(n+3){border-top:var(--fn-rule-hairline)}
  [data-cols-3]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
/* Masked line wrappers: leave room for descenders so overflow:hidden doesn't clip them */
[data-lines] > *{padding-bottom:.14em;margin-bottom:-.14em}

/* ── Chrome tone: header colour + logo variant follow the current page ── */
[data-page]{--fn-chrome:var(--fn-navy);--fn-chrome-hover:var(--fn-purple);--fn-logo-beige:none;--fn-logo-dark:block}
/* Home and Contact both open on a dark band — header chrome flips to beige */
[data-page="home"],
[data-page="contact"]{--fn-chrome:var(--fn-beige);--fn-chrome-hover:var(--fn-lime);--fn-logo-beige:block;--fn-logo-dark:none}
/* Current page reads as the hover state: purple + underline */
/* !important because the nav links carry their chrome colour inline */
[data-page="about"] [data-nav="about"],
[data-page="contact"] [data-nav="contact"],
[data-page="store"] [data-nav="store"],
[data-page="product"] [data-nav="store"],
[data-page="cart"] [data-nav="store"],
[data-page="checkout"] [data-nav="store"],
[data-page="store-soon"] [data-nav="store"],
[data-page="sidelines-soon"] [data-nav="sidelines"],
[data-page="sidelines"] [data-nav="sidelines"],
[data-page="article"] [data-nav="sidelines"],
[data-page="photo"] [data-nav="sidelines"]{color:var(--fn-purple) !important;text-decoration:underline;text-underline-offset:6px}

/* Module grids run rule-to-rule across the full page width — no outer rule */
[data-cols] > *:first-child{border-left:0}
/* ── Footer on tablet + mobile: newsletter, brand line, 2-column links, centred legal ── */
@media (max-width:1200px){
  [data-footer]{grid-template-columns:1fr !important;gap:clamp(32px,4vw,52px) !important}
  [data-footer-nav]{order:1;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:20px !important}
  [data-footer-news]{order:2}
  [data-footer-brand]{order:3;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;width:100%;gap:24px !important}
  [data-footer-legal]{grid-template-columns:1fr !important;justify-items:center !important;gap:16px !important;text-align:center}
  [data-footer-legal] > div{justify-content:center !important;flex-wrap:wrap;order:1}
  [data-footer-copy]{order:2}
  [data-footer-legal] > [aria-hidden]{display:none}
}

@media (max-width:1200px){
  [data-left-mobile]{text-align:left !important}
  [data-col-mobile]{flex-direction:column !important;align-items:flex-start !important}
  [data-inline-list]{display:block !important;padding-left:0 !important;list-style:none}
  [data-inline-list] > li{display:inline}
  [data-inline-list] > li:not(:last-child)::after{content:", "}
}

/* Image + copy blocks: two columns on desktop and tablet, single column on phones
   with the title above the image (text column dissolves into the grid) */
@media (min-width:641px) and (max-width:900px){
  [data-media-split]{gap:clamp(20px,3vw,32px) !important}
}
@media (max-width:640px){
  [data-media-split]{grid-template-columns:1fr !important;gap:clamp(20px,4vw,28px) !important}
  [data-media-text]{display:contents}
  [data-media-text] > span{order:1;margin-bottom:0 !important}
  [data-media-text] > h2,[data-media-text] > h1{order:2}
  [data-media-img]{order:3;max-width:none !important}
  [data-media-body]{order:4}
  [data-media-body] > p:first-child{margin-top:0 !important}
  [data-media-body] > span:first-child{margin-top:0 !important}
}

/* Contributor profile on phones: portrait reads as a wider crop above the bio,
   and the meta rail becomes full-width rules instead of a squeezed row */
@media (max-width:900px){
  [data-contrib-bio]{columns:1 !important}
}
@media (max-width:640px){
  [data-contrib-portrait]{aspect-ratio:4/5 !important;max-width:none !important}
}

@media (max-width:900px){
  [data-shop-maps]{justify-self:end}
  /* Store — coming soon: same reading order as the product page on phones
     (landscape crop first, copy and signup under it) */
  [data-soon-img]{order:-1;aspect-ratio:372/238 !important}
}
/* Stacked feature images stay modest once the columns collapse */@media (max-width:900px){
  [data-founder-img]{max-width:min(78%,440px)}
}

/* ── Sidelines module: horizontal snap-scroll on tablet + mobile ── */
@media (max-width:1200px){
  [data-contact-body]{grid-template-columns:1fr !important;gap:clamp(28px,3vw,44px) !important}
  [data-cols-3]{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  [data-cols-3]::-webkit-scrollbar{display:none}
  [data-cols-3] > *{flex:0 0 min(60%,400px);scroll-snap-align:start;border-left:var(--fn-rule-hairline) !important;border-top:0 !important;padding-left:clamp(16px,2.4vw,28px) !important;padding-right:clamp(16px,2.4vw,28px) !important}
  [data-cols-3] > *:first-child{border-left:0 !important;padding-left:var(--fn-margin) !important}
  [data-cols-3] [data-card-img]{aspect-ratio:16/9 !important}
}
@media (max-width:640px){
  [data-cols-3] > *{flex:0 0 min(80%,320px)}
}

/* ── Sidelines / Store / Product / Cart ── */
/* Current filter + page number read as the hover state (purple + underline) */
[data-tab][data-active],[data-pagebtn][data-active],[data-tab-more][data-active]{color:var(--fn-purple) !important;text-decoration:underline;text-underline-offset:6px}
[data-tab][data-hidden]{display:none}
[data-tab-row][data-active]{color:var(--fn-purple) !important}
/* “More” stays measurable but out of the flow until it is actually needed */
[data-more]{visibility:hidden;position:absolute !important;left:-9999px}
[data-more][data-show]{visibility:visible;position:relative !important;left:auto}
/* Product gallery: crossfade slides, arrows on hover, active dot in navy */
[data-slide]{opacity:0;transition:opacity .6s var(--fn-ease-emphasis)}
[data-slide][data-active]{opacity:1}
[data-arrow]{opacity:0;transition:opacity var(--fn-dur) var(--fn-ease),var(--fn-transition-color)}
[data-gal]:hover [data-arrow],[data-arrow]:focus-visible{opacity:1}
[data-dot][data-active] > span{background:var(--fn-navy) !important}

/* Multi-row card grids: hairline between rows as well as columns */
@media (min-width:1201px){
  [data-rows] > *:nth-child(n+4){border-top:var(--fn-rule-hairline)}
}

/* Photo essay: masonry gallery — mixed crops, several frames visible at once */
[data-photo-grid] > div[data-o="landscape"]{aspect-ratio:3/2}
[data-photo-grid] > div[data-o="wide"]{aspect-ratio:16/9}
[data-photo-grid] > div[data-o="square"]{aspect-ratio:1}
[data-photo-grid] > div[data-o="portrait"]{aspect-ratio:4/5}
[data-photo-grid] > div[data-o="tall"]{aspect-ratio:2/3}
@media (max-width:1200px){
  [data-photo-grid]{columns:2 !important}
}

@media (max-width:900px){
  [data-products]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:clamp(20px,4vw,32px) clamp(14px,3vw,24px) !important}
  [data-row]{grid-template-columns:1fr !important;gap:8px !important}
  [data-cart-row]{grid-template-columns:minmax(0,96px) minmax(0,1fr) !important}
  [data-cart-row] > span:last-child{grid-column:2}
}
/* Product page, phones — from the Figma "Product mobile" frame (297:961):
   landscape gallery crop, sans title block, wide-then-three gallery */
@media (max-width:900px){
  [data-gal]{aspect-ratio:372/238 !important}
  /* About + gallery stack, each spanning the full width */
  [data-prod-about]{grid-template-columns:1fr !important;gap:var(--fn-section) !important}
  [data-prod-gallery]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (min-width:901px) and (max-width:1200px){
  [data-products]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  [data-row="side"]{grid-template-columns:minmax(0,120px) minmax(0,1fr) !important}
  [data-row="side"] > p{display:none !important}
}

/* Filter tabs: single-row horizontal scroll with edge fade */
[data-tabs]{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
[data-tabs]::-webkit-scrollbar{display:none}


/* ── Secondary pages ────────────────────────────────────────────────────── */
/* Header chrome follows the tone of whatever the page opens on, not the page id */
[data-tone="ink"]{--fn-chrome:var(--fn-beige);--fn-chrome-hover:var(--fn-lime);--fn-logo-beige:block;--fn-logo-dark:none}
/* Coming soon is a holding page: it replaces the site, so no header or footer */
[data-page="coming"] > header,[data-page="coming"] > footer{display:none !important}
/* Legal: side index sticks beside the document on desktop, becomes a row on phones */
@media (max-width:900px){
  [data-legal-toc]{position:static !important;flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:clamp(16px,3vw,28px) !important}
  [data-legal-toc] > span{flex:1 1 100%}
}

/* Ruled rows on the secondary pages: each family collapses on its own terms at
   tablet width — nothing is hidden, nothing lands under the wrong column */
@media (min-width:901px) and (max-width:1200px){
  [data-row="dest"]{grid-template-columns:minmax(0,1fr) auto !important}
  [data-row="dest"] > h2{grid-column:1;grid-row:1}
  [data-row="dest"] > p{grid-column:1;grid-row:2}
  [data-row="dest"] > span{grid-column:2;grid-row:1 / span 2;align-self:center}
  [data-row="shop"]{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) !important}
  [data-row="shop"] > span:nth-child(1){grid-column:1;grid-row:1 / span 2}
  [data-row="shop"] > span:nth-child(2){grid-column:2;grid-row:1}
  [data-row="shop"] > span:nth-child(3){grid-column:2;grid-row:2}
  [data-row="issue"]{grid-template-columns:minmax(0,140px) minmax(0,1fr) !important}
  [data-row="issue"] > span:first-child{grid-row:1 / span 2}
  [data-row="issue"] > h2{grid-column:2;grid-row:1}
  [data-row="issue"] > span:last-child{grid-column:2;grid-row:2}
  [data-row="fact"]{grid-template-columns:minmax(0,160px) minmax(0,1fr) !important}
}
@media (max-width:900px){
  [data-row="shop"],[data-row="issue"],[data-row="dest"],[data-row="fact"]{gap:6px !important}
}