/*
Self-hosted @font-face. Latin subset, font-display: swap.
Syne 600/700/800, Space Grotesk 400/500/600/700, Space Mono 400/700.
Preload the two above-the-fold weights only: Syne 700, Space Grotesk 400
(see inc/enqueue.php).
*/
@font-face{
  font-family:'Syne';
  src:url('../fonts/syne-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Syne';
  src:url('../fonts/syne-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Syne';
  src:url('../fonts/syne-800.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../fonts/space-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../fonts/space-mono-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* Minimal reset */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
img,picture,video,canvas,svg{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{background:none;border:0;cursor:pointer}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  transition:background .4s ease,color .4s ease;
}

/* Type scale. DESIGN.md Section 2.2, measured clamp() values. */
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0;
}

.hero h1{
  /* D11 (DESIGN.md 0.3): min lowered 52px -> 30px so "Don't Lie." doesn't
     clip/wrap below ~430px. 10vw already governs from 300px up (10vw=30 at
     W=300), so this only changes rendering below that; 768px+ is untouched
     because 10vw exceeds 52 well before then. Approved by Saad 2026-08-04. */
  font-size:clamp(30px,10vw,132px);
  line-height:.92;
  letter-spacing:-.02em;
}

@media (max-width:560px){
  .hero h1{
    /* D11: a touch tighter tracking at the narrow end only, to buy a few
       more px of margin against "Don't Lie." wrapping at 320px. 768px+
       (outside this query) is unaffected. */
    letter-spacing:-.04em;
  }
}

.section-head h2{
  font-size:clamp(30px,4.4vw,46px);
}

.story h2{
  font-size:clamp(30px,4.4vw,50px);
}

.newsletter h2{
  font-size:clamp(28px,4vw,42px);
}

.age-gate h2{
  font-size:28px;
}

/* Mono label idiom. DESIGN.md Section 5.2. */
.u-mono-label{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  color:var(--muted);
}

.eyebrow{
  font-family:var(--mono);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.28em;
  color:var(--lime-ink);
}

/* Container. DESIGN.md Section 3.2. */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* Visually hidden utility. DESIGN.md Section 9.1 (clip-path method, not display:none). */
.u-visually-hidden{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Focus. DESIGN.md Section 9.2 / D1. --focus is var(--lime-ink), never raw --lime. */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
  border-radius:inherit;
}

::selection{
  background:var(--lime-soft);
  color:var(--ink);
}

/* ---------------------------------------------------------------------------
Seeds dropdown. DESIGN.md 5.6 extended, not replaced: the trigger carries the
same 14.5px / 500 / --muted / .24s lime underline as .site-nav__links a, and the
group headings are the 5.2 mono-label idiom. It lives in base.css because the
header is part of the critical block (8.1) and components.css is at its budget.
--------------------------------------------------------------------------- */

/* Row alignment. The trigger is a <button> with real box height, its siblings
   are inline <a>s whose 9px vertical padding does not grow their line box, so
   under the flex default (align-items:stretch) the button's label sat ~7px
   below theirs. Centring the row lines up the labels and, because both boxes
   resolve to the same 41.2px, the underlines too. The group is also centred in
   the bar rather than left against the brand: `flex:1` on the <nav> absorbs the
   free space that `.site-nav__tools`'s margin-left:auto used to take, so the
   tools still sit hard right. Both selectors deliberately carry one more class
   than components.css's `.site-nav__links`, which loads after this file. */
.site-nav__primary{flex:1;display:flex;justify-content:center}
.site-nav .site-nav__links{align-items:center;margin-left:0}

/* Trigger. A <button>, so components.css's `.site-nav__links a` rules cannot
   reach it and the nav-link look is restated here. */
.site-nav__toggle{position:relative;display:flex;align-items:center;gap:6px;
  padding:9px 0;font-size:14.5px;font-weight:500;color:var(--muted);
  transition:color var(--dur) var(--ease)}
/* D5: 44px hit rectangle over the ~39px visual, as on the sibling links. */
.site-nav__toggle::before{content:"";position:absolute;left:0;right:0;top:50%;
  height:44px;transform:translateY(-50%)}
.site-nav__toggle::after{content:"";position:absolute;left:0;bottom:-2px;
  width:0;height:2px;background:var(--lime);transition:width .24s var(--ease)}
.site-nav__toggle:hover,.site-nav__toggle[aria-expanded="true"]{color:var(--ink)}
.site-nav__toggle:hover::after,
.site-nav__toggle[aria-expanded="true"]::after{width:100%}
/* Wayfinding. The sibling links get this from `a[aria-current]`, which a
   <button> can never match, so the trigger reads WP's own state classes: on the
   9 shop URLs the item is an ancestor/parent of the current one, on /seeds/ it
   is the current item itself. The D2 light-theme override below covers these
   too, because it targets every .site-nav__toggle::after. */
.site-nav__links .current-menu-item>.site-nav__toggle::after,
.site-nav__links .current-menu-parent>.site-nav__toggle::after,
.site-nav__links .current-menu-ancestor>.site-nav__toggle::after{width:100%}
/* D2: raw --lime is 1.11:1 on a light solid header, so the underline vanishes. */
:root[data-theme="light"] .site-header[data-solid] .site-nav__toggle::after{background:var(--lime-ink)}
/* Over the hero the header is light-on-dark in both themes, like its siblings. */
.site-header:not([data-solid]) .site-nav__toggle{color:rgba(255,255,255,.82)}
.site-header:not([data-solid]) .site-nav__toggle:hover,
.site-header:not([data-solid]) .site-nav__toggle[aria-expanded="true"]{color:#fff}
.site-nav__caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;
  transition:transform var(--dur) var(--ease)}
.site-nav__toggle[aria-expanded="true"] .site-nav__caret{transform:rotate(180deg)}

/* Panel. Opaque --surface plus --shadow, so it stays legible over the hero
   while the header itself is still transparent, in both themes. */
.site-nav__links .menu-item-has-children{position:relative}
.site-nav__links .site-nav__panel{position:absolute;z-index:1;top:calc(100% + 18px);left:-12px;
  min-width:248px;padding:10px 8px 12px;
  background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
/* Bridges the 18px gap under the trigger so the pointer never leaves the item
   on its way in. Hidden with the panel, so it is inert while closed. */
.site-nav__links .site-nav__panel::before{content:"";position:absolute;
  left:0;right:0;top:-18px;height:18px}
.site-nav__links .is-open>.site-nav__panel{opacity:1;visibility:visible;transform:none}
/* Hover-open. Fine pointers only, so it can never trap a touch user: on touch
   the click path in theme.js is the only way in, and it is always available.
   No :focus-within here, or tabbing to the trigger would open the panel and
   break the disclosure contract that Enter opens it. */
@media (hover:hover) and (pointer:fine){
  .site-nav__links .menu-item-has-children:hover>.site-nav__panel{
    opacity:1;visibility:visible;transform:none}
  .site-nav__links .menu-item-has-children:hover .site-nav__caret{transform:rotate(180deg)}
}

/* Group heading. Chrome, not a destination, so it is a <span> (header.php). */
.site-nav__group{display:block;padding:8px 12px 4px}
.site-nav__links .site-nav__panel>.nav-group:not(:first-child) .site-nav__group{
  margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}

/* Panel links. The long ancestor chain is deliberate: it has to outrank
   components.css's `.site-header:not([data-solid]) .site-nav__links a` (0,3,1),
   which paints nav links white over the hero and would be white on white here,
   and base.css loads first, so an equal-specificity rule would lose. */
.site-header .site-nav .site-nav__links .site-nav__panel a{
  display:flex;align-items:center;min-height:44px;padding:8px 12px;
  border-radius:var(--radius-xs);font-size:14.5px;font-weight:500;color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
/* The row is already 44px tall and the underline belongs to the top level. */
.site-header .site-nav .site-nav__links .site-nav__panel a::before,
.site-header .site-nav .site-nav__links .site-nav__panel a::after{content:none}
.site-header .site-nav .site-nav__links .site-nav__panel a:hover,
.site-header .site-nav .site-nav__links .site-nav__panel .current-menu-item>a{
  color:var(--lime-ink);background:var(--lime-soft)}

/* Drawer: the same items flattened, headings kept. Its parent stays a link and
   its panel is always open (header.php), so only the indent is left to do. */
.site-drawer__links .site-nav__panel{padding-left:16px}
.site-drawer .site-nav__group{padding:20px 0 4px}

/* Reduced motion. DESIGN.md Section 6.4. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}