/* Swim Style Noosa — self-contained theme for the deployable landing site.
   Inlines all design-system tokens + base styles and loads fonts from Google Fonts,
   so this folder deploys anywhere with no dependency on ../../styles.css. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=switzer@300,400,500,600,700&display=swap");

/* Display face: Absans (Valerio Monopoli / Collletttivo, SIL OFL) — self-hosted.
   Single Regular style: weights 500/600 and italics render as synthesized bold/oblique. */
@font-face{
  font-family:"Absans";
  src:url("/fonts/Absans-Regular.woff2") format("woff2"),
      url("/fonts/Absans-Regular.woff") format("woff");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* BUILD STANDARD — paper / blush / bronze.
     blush is for alternating SECTION BACKGROUNDS only; never text, never
     borders, never small elements. bronze is STRUCTURE — small-caps labels,
     link underlines, hairlines, icon strokes, hover, arrow glyphs — never a
     button fill. bronze-dk is bronze text on blush at small sizes. */
  --paper:#FFFFFF;--ink:#1C1A18;--muted:#6E635B;--rule:#E8DAD3;--img-bg:#F3ECE8;
  --blush:#F7EAE5;--bronze:#8A5E3C;--bronze-dk:#744E31;
  /* Collection header text field. --surface-editorial is a warm off-white, not
     paper. --accent-bronze is a DETAIL colour: one hairline where the field
     meets the photograph, never a fill, never text. */
  --surface-editorial:#F2EEE6;--accent-bronze:#8A6A45;
  /* DECORATIVE ONLY — 3.7:1, never use for text. */
  --bronze-lt:#A87B52;
  /* bronze for text on --ink grounds (the footer). --bronze itself is 3.10:1
     there, under the 4.5:1 floor. Same hue 26.2deg and saturation 39.4%, with
     lightness lifted 38.8% -> 54%, which reads as the same bronze at 5.35:1.
     NOT for light grounds — on paper it is only 3.2:1. Use --bronze there. */
  --bronze-on-dark:#B8845B;
  --overlay-bg:var(--paper);--overlay-ink:var(--ink);
  /* Legacy names kept as aliases so ~200 existing call sites resolve. */
  --bg:var(--paper);
  --linen:var(--paper);--linen-2:var(--img-bg);--paper-legacy:var(--paper);
  --sand-100:var(--img-bg);--sand-200:var(--rule);--sand-300:var(--rule);--sand-400:var(--muted);
  --ocean-900:var(--ink);--ocean-800:var(--ink);--ocean-700:var(--ink);--ocean-500:var(--muted);
  --terracotta-600:var(--bronze-dk);--terracotta-500:var(--bronze);--terracotta-300:var(--bronze);
  --gold-600:var(--bronze-dk);--gold-500:var(--bronze);--gold-300:var(--rule);
  --seaglass:var(--rule);
  --ink-900:var(--ink);--ink-700:var(--ink);--ink-500:var(--muted);--ink-300:var(--muted);
  --surface-page:var(--paper);--surface-raised:var(--paper);--surface-sunken:var(--blush);--surface-card:var(--paper);--surface-inverse:var(--ink);--surface-sand:var(--blush);
  --text-strong:var(--ink);--text-body:var(--ink);--text-muted:var(--muted);--text-faint:var(--muted);--text-on-dark:var(--paper);--text-on-dark-muted:#E3D7D0;
  /* --accent maps to bronze: its job here is exactly bronze's role — links,
     hovers, arrows, small-caps labels. Button FILLS are handled separately. */
  --accent:var(--bronze);--accent-hover:var(--bronze-dk);--accent-quiet:var(--bronze);--gold:var(--bronze);--gold-strong:var(--bronze-dk);
  --line:var(--rule);--line-strong:var(--rule);--line-on-dark:rgba(255,255,255,0.24);
  --focus-ring:var(--bronze);--success:var(--ink);--error:var(--ink);--sale:var(--bronze-dk);
  --wave-blue:var(--bronze);--wave-blue-soft:var(--rule);
  /* type */
  --font-display:"Julius Sans One","Futura","Century Gothic",sans-serif; /* headlines + nav */
  /* Cormorant is gone. --font-serif is kept as an alias so the components that
     reference it (product names, pull-quotes) resolve to the display face
     rather than needing edits — the token stays, the typeface doesn't. */
  --font-serif:var(--font-display);
  --font-sans:"Switzer",-apple-system,Helvetica,sans-serif;
  /* Wordmark lockup ONLY (.nav__mark). Deliberately separate from
     --font-display and --font-sans so the masthead can change face without
     touching headings or nav. Currently set to the sans, i.e. no visual
     change — see _wordmark-compare.html before picking. */
  --font-wordmark:var(--font-display);
  --font-body:var(--font-sans);
  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;
  --text-display-xl:88px;--text-display-l:64px;--text-display-m:48px;--text-display-s:36px;--text-title:28px;
  --text-lead:22px;--text-body-l:18px;--text-body-m:16px;--text-body-s:14px;--text-caption:13px;--text-micro:11px;
  --leading-tight:1.05;--leading-display:1.12;--leading-snug:1.35;--leading-body:1.65;
  --tracking-display:-0.01em;--tracking-normal:0;--tracking-wide:0.08em;--tracking-wider:0.18em;--tracking-widest:0.32em;
  /* spacing */
  --space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--space-11:180px;
  --container-narrow:680px;--container-text:920px;--container-wide:1280px;--container-full:1280px;
  --gutter-mobile:20px;--gutter:48px;--gutter-wide:80px;
  /* effects */
  --radius-none:0;--radius-xs:0;--radius-sm:0;--radius-md:0;--radius-pill:0; /* squared corners only */
  --border-hair:1px solid var(--line);--border-strong:1px solid var(--line-strong);--border-dark:1px solid var(--line-on-dark);
  --shadow-none:none;--shadow-xs:0 1px 2px rgba(60,44,28,0.06);--shadow-sm:0 4px 14px rgba(60,44,28,0.07);--shadow-md:0 12px 32px rgba(46,34,22,0.10);--shadow-lg:0 24px 60px rgba(40,30,20,0.14);
  --scrim-bottom:linear-gradient(to top,rgba(28,26,24,0.55) 0%,rgba(28,26,24,0.12) 40%,rgba(28,26,24,0) 70%);
  --scrim-full:linear-gradient(to bottom,rgba(28,26,24,0.28),rgba(28,26,24,0.28));
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);--ease-inout:cubic-bezier(0.65,0.05,0.36,1);
  --dur-fast:180ms;--dur-base:320ms;--dur-slow:600ms;--dur-hero:900ms;
}
/* ===== Fixed-header offset — the ONE place it is applied =================
   .nav is position:fixed, so it occupies no layout space and every page needs
   the same offset. nav-offset.js measures the REAL bar (ResizeObserver on the
   element, plus resize and fonts.ready) and writes --nav-h to <html>; the bar
   is a different height on mobile because the wordmark stacks, so no pixel
   value is written anywhere in CSS. 0px is what applies before that runs and
   on pages that have no bar at all.

   Do NOT add padding-top to a page template to clear the header. It is done
   here, once, for everything. Fixed/absolute overlays (.sheet, .navdrop__menu,
   .cf__drops) are outside the body's padding box and take var(--nav-h)
   themselves. */
:root{--nav-h:0px}
html{scroll-padding-top:var(--nav-h)}
body{padding-top:var(--nav-h)}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-body-m);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);font-optical-sizing:auto;color:var(--text-strong);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:0 0 0.4em;text-wrap:balance}
h1{font-size:var(--text-display-l)}h2{font-size:var(--text-display-m)}h3{font-size:var(--text-display-s)}h4{font-size:var(--text-title)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--accent-hover)}