/* ==== 00-fonts.css ==== */
/* Inter latin-ext */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono latin-ext */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono latin */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans latin-ext */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url(../fonts/jakarta-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Plus Jakarta Sans latin */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:500 800;
  font-display:swap;
  src:url(../fonts/jakarta-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== 01-tokens.css ==== */
/* ============================================================
   SUNSHINE — design tokens
   DH SUNSHINE GOODS LLC · dhsunshinegoods.com

   Architecture (do not shortcut it):
     1. 10-step ramps per colour family, declared once on :root
     2. a semantic layer that assigns roles on top of the ramps
     3. components use ROLES ONLY, never a ramp directly
     4. dark theme re-points roles; no colour is defined only in a dark block
   ============================================================ */
:root{
  /* — Ramps ————————————————————————————————— */

  /* Sun: the brand. Warm gold. Reserved for meaning — primary action,
     the waybill device, the brand mark. Not for headings or decoration. */
  --sun-50:#FFF8E8;  --sun-100:#FFEFC7; --sun-200:#FFDE8C; --sun-300:#FFC94E;
  --sun-400:#F5B31E; --sun-500:#DB9600; --sun-600:#B27700; --sun-700:#8C5D00;
  --sun-800:#6B4700; --sun-900:#4A3100;

  /* Kraft: paper and packing tape. The neutral with body. */
  --kraft-50:#FBF7F0;  --kraft-100:#F5EDDF; --kraft-200:#E9DCC5; --kraft-300:#D8C4A3;
  --kraft-400:#C0A47B; --kraft-500:#A08560; --kraft-600:#7F684A; --kraft-700:#63513A;
  --kraft-800:#4A3D2C; --kraft-900:#33291D;

  /* Ink: text. Warm-cast near-black rather than a cold grey. */
  --ink-50:#F8F5EF;  --ink-100:#EFEAE0; --ink-200:#DBD4C7; --ink-300:#B8AE9E;
  --ink-400:#928674; --ink-500:#6F6455; --ink-600:#554B3D; --ink-700:#3D352A;
  --ink-800:#2A241C; --ink-900:#1A1611;

  /* Teal: the single accent. Links, state, the secondary action. */
  --teal-50:#E9F6F5;  --teal-100:#C9EAE7; --teal-200:#96D6D1; --teal-300:#5BBCB5;
  --teal-400:#2CA099; --teal-500:#14847E; --teal-600:#0D6964; --teal-700:#0C5450;
  --teal-800:#0B4340; --teal-900:#082E2C;

  /* Rust / Moss: state only. */
  --rust-50:#FDF0EC;  --rust-100:#FBDBD2; --rust-200:#F5B7A5; --rust-300:#EC8E77;
  --rust-400:#DE6446; --rust-500:#C2432A; --rust-600:#9E3320; --rust-700:#7C281A;
  --rust-800:#5E1F15; --rust-900:#40150E;

  --moss-50:#EEF6EA;  --moss-100:#D6EBCD; --moss-200:#AFD79F; --moss-300:#84BF6E;
  --moss-400:#5FA347; --moss-500:#468630; --moss-600:#356A24; --moss-700:#2A531D;
  --moss-800:#204017; --moss-900:#152C0F;

  /* — Semantic roles (light) ————————————————————— */
  --bg:#FFFDF9;
  --bg-alt:var(--kraft-50);
  --bg-tint:var(--sun-50);
  --surface:#FFFFFF;
  --surface-2:var(--kraft-100);
  --surface-deep:var(--ink-900);

  --text:var(--ink-900);
  --text-soft:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-invert:#FFFDF9;            /* dark-on-light inversion (chips) */
  --on-deep:#FFFDF9;                /* text on --surface-deep: light in BOTH themes */
  --on-deep-soft:var(--kraft-200);

  --border:var(--kraft-200);          /* decorative hairline */
  --border-strong:var(--kraft-500);   /* bounds an interactive control -> >=3:1 */
  --rule:var(--ink-300);

  /* --brand is a FILL ONLY: dark ink sits on top of it. It is 1.82:1 against
     the page, so it must never carry meaning as a stroke or a mark on its own.
     Any amber that has to be *read* uses --brand-text. */
  --brand:var(--sun-400);
  --brand-deep:var(--sun-700);
  --brand-text:var(--sun-700);      /* 5.62:1 on the page - safe at body size */
  --accent:var(--teal-500);
  --accent-text:var(--teal-600);
  --danger:var(--rust-600);
  --success:var(--moss-600);

  --btn-primary-bg:var(--sun-400);
  --btn-primary-fg:var(--ink-900);  /* dark ink on gold, not white */
  --btn-primary-bg-hover:var(--sun-300);

  --focus-ring:var(--ink-900);
  --focus-halo:var(--sun-300);

  /* Illustration: physical materials, not UI surfaces. Paper is light in both
     themes (it is paper), ink is dark in both (it is ink). Only the brightness
     is dialled back at night. */
  --ill-paper:#FFFFFF;
  --ill-paper-2:var(--kraft-100);
  --ill-ink:var(--ink-800);
  --ill-punch:#E2D6C0;

  /* — Elevation: warm, tinted with the brand. Never neutral grey. — */
  --sh-xs:0 1px 2px rgba(74,49,0,.07);
  --sh-sm:0 2px 8px -2px rgba(74,49,0,.10), 0 1px 3px rgba(74,49,0,.07);
  --sh-md:0 12px 28px -12px rgba(74,49,0,.20), 0 2px 6px rgba(74,49,0,.07);
  --sh-lg:0 28px 56px -24px rgba(74,49,0,.26), 0 4px 12px rgba(74,49,0,.08);
  --sh-glow:0 18px 40px -20px rgba(245,179,30,.55);

  /* — Radii — */
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* — Type — */
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono','Consolas',monospace;

  --t-hero:clamp(2rem,4.1vw,3.25rem);
  --t-h1:clamp(1.95rem,4.4vw,3.1rem);
  --t-h2:clamp(1.55rem,3.2vw,2.3rem);
  --t-h3:clamp(1.2rem,2vw,1.5rem);
  --t-h4:clamp(1.02rem,1.5vw,1.18rem);
  --t-lead:clamp(1.04rem,1.5vw,1.22rem);
  --t-body:1rem;
  --t-sm:.9rem;
  --t-xs:.8rem;
  --t-micro:.715rem;

  /* — Space & motion — */
  --sp-section:clamp(3.5rem,8vw,6.5rem);
  --gutter:clamp(1.1rem,4vw,2rem);
  --maxw:1120px;
  --maxw-text:68ch;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:.16s; --dur:.3s; --dur-slow:.55s;

  /* — The waybill device: perforation geometry, declared once — */
  --perf-r:7px;      /* punch radius */
  --perf-gap:20px;   /* punch pitch  */
}

/* — Dark: the same roles, re-pointed. Nothing is defined only here. — */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14110C; --bg-alt:#1C1813; --bg-tint:#211A0F;
    --surface:#221D16; --surface-2:#2C261D; --surface-deep:#0D0B07;
    --text:#F5EFE3; --text-soft:#CFC5B3; --text-muted:#A99E8B; --text-invert:#1A1611;
    --on-deep:#F5EFE3; --on-deep-soft:#CFC5B3;
    --border:#362F25; --border-strong:#82745E; --rule:#6B5F4B;
    --brand:var(--sun-300); --brand-deep:var(--sun-200); --brand-text:var(--sun-200);
    --accent:var(--teal-300); --accent-text:var(--teal-200);
    --danger:var(--rust-300); --success:var(--moss-300);
    --btn-primary-bg:var(--sun-300); --btn-primary-fg:var(--ink-900);
    --btn-primary-bg-hover:var(--sun-200);
    --focus-ring:#FFFDF9; --focus-halo:var(--sun-600);
    --ill-paper:#E8E0D1; --ill-paper-2:#D2C7B2; --ill-ink:#2A241C; --ill-punch:#BCAF96; --ill-punch:#BCAF96;
    --sh-xs:0 1px 2px rgba(0,0,0,.5);
    --sh-sm:0 2px 8px -2px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
    --sh-md:0 12px 28px -12px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.45);
    --sh-lg:0 28px 56px -24px rgba(0,0,0,.72), 0 4px 12px rgba(0,0,0,.5);
    --sh-glow:0 18px 40px -20px rgba(255,201,78,.32);
  }
}
:root[data-theme="dark"]{
  --bg:#14110C; --bg-alt:#1C1813; --bg-tint:#211A0F;
  --surface:#221D16; --surface-2:#2C261D; --surface-deep:#0D0B07;
  --text:#F5EFE3; --text-soft:#CFC5B3; --text-muted:#A99E8B; --text-invert:#1A1611;
  --on-deep:#F5EFE3; --on-deep-soft:#CFC5B3;
  --border:#362F25; --border-strong:#82745E; --rule:#6B5F4B;
  --brand:var(--sun-300); --brand-deep:var(--sun-200); --brand-text:var(--sun-200);
  --accent:var(--teal-300); --accent-text:var(--teal-200);
  --danger:var(--rust-300); --success:var(--moss-300);
  --btn-primary-bg:var(--sun-300); --btn-primary-fg:var(--ink-900);
  --btn-primary-bg-hover:var(--sun-200);
  --focus-ring:#FFFDF9; --focus-halo:var(--sun-600);
  --ill-paper:#E8E0D1; --ill-paper-2:#D2C7B2; --ill-ink:#2A241C; --ill-punch:#BCAF96;
  --sh-xs:0 1px 2px rgba(0,0,0,.5);
  --sh-sm:0 2px 8px -2px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45);
  --sh-md:0 12px 28px -12px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.45);
  --sh-lg:0 28px 56px -24px rgba(0,0,0,.72), 0 4px 12px rgba(0,0,0,.5);
  --sh-glow:0 18px 40px -20px rgba(255,201,78,.32);
}

/* ==== 02-base.css ==== */
/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--t-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;margin:0;letter-spacing:-.022em;font-weight:800}
h3,h4{letter-spacing:-.012em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:700;color:var(--text)}
/* ...except where the surface is already dark: there the role is inherited. */
.band--deep strong,.band--deep b,.site-footer strong,.site-footer b{color:inherit}

a{color:var(--accent-text);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2px}

/* Every number on this site is tabular. */
.num,time,td,.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* --- Two-tone focus ring -----------------------------------------------
   A dark stroke carries WCAG 1.4.11 (17.7:1 on the page); the amber halo
   amplifies it. A single amber ring would be 1.5:1 and fail outright.
   On deep surfaces the stroke flips to paper white and the halo darkens. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--r-xs);
  box-shadow:0 0 0 6px var(--focus-halo);
}
.band--deep :where(a,button,summary,[tabindex]):focus-visible,
.site-footer :where(a,button):focus-visible{
  outline-color:#FFFDF9;
  box-shadow:0 0 0 6px var(--sun-600);
}

::selection{background:var(--sun-200);color:var(--ink-900)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:300;
  background:var(--brand);color:var(--ink-900);padding:.8rem 1.4rem;
  border-radius:0 0 var(--r-md) var(--r-md);font-weight:700;text-decoration:none;
  transition:top var(--dur) var(--ease-out);
}
.skip:focus{top:0}


/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--sp-section);position:relative}
.band--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.band--flush{padding-top:0}   /* continues a band with the SAME background; no second gap */
.band--kraft{background:var(--bg-alt)}
.band--sun{background:var(--bg-tint)}
.band--deep{background:var(--surface-deep);color:var(--on-deep)}
.band--deep h1,.band--deep h2,.band--deep h3{color:var(--on-deep)}
.band--deep p{color:var(--on-deep-soft)}
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.prose{max-width:var(--maxw-text)}
.stack>*+*{margin-top:1rem}
.stack-lg>*+*{margin-top:1.7rem}

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-mono);font-weight:600;font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-text);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--brand-text);opacity:.75}
.band--deep .eyebrow{color:var(--sun-300)}
.band--deep .eyebrow::before{background:var(--sun-300)}

.t-hero{font-size:var(--t-hero)}
.t-h1{font-size:var(--t-h1)}
.t-h2{font-size:var(--t-h2)}
.t-h3{font-size:var(--t-h3)}
.lead{font-size:var(--t-lead);color:var(--text-soft);line-height:1.6}
.band--deep .lead{color:var(--on-deep-soft)}
.soft{color:var(--text-soft)}
.muted{color:var(--text-muted)}
.micro{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);font-weight:500;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.82rem 1.35rem;border-radius:var(--r-sm);
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),
             background-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--sh-glow)}
.btn--primary:hover{background:var(--btn-primary-bg-hover)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--text-muted)}
.band--deep .btn--ghost{color:var(--on-deep);border-color:#6B5F4B}
.band--deep .btn--ghost:hover{background:rgba(255,253,249,.08)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

/* ============================================================
   THE WAYBILL - this site's one structural device
   ------------------------------------------------------------
   A packing slip: the top edge is punched, a dotted rule tears the
   label header off the body. It is the container for the facts that
   matter on each page, not an ornament dropped in a corner.

   The mask lives on the inner element and the shadow on the outer, so
   the elevation follows the punched silhouette instead of being
   clipped flat by the mask.
   ============================================================ */
.waybill{filter:drop-shadow(0 14px 28px rgba(74,49,0,.16)) drop-shadow(0 2px 4px rgba(74,49,0,.10))}
.waybill-in{
  background:var(--surface);
  -webkit-mask-image:radial-gradient(circle at 50% 0,transparent var(--perf-r),#000 calc(var(--perf-r) + .6px));
  mask-image:radial-gradient(circle at 50% 0,transparent var(--perf-r),#000 calc(var(--perf-r) + .6px));
  -webkit-mask-size:var(--perf-gap) 100%;
  mask-size:var(--perf-gap) 100%;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  border-radius:0 0 var(--r-md) var(--r-md);
}
:root[data-theme="dark"] .waybill{filter:drop-shadow(0 14px 28px rgba(0,0,0,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.45))}

/* the label header: mono field names, the way a shipping label reads */
.waybill-head{
  padding:calc(var(--perf-r) + 1.05rem) clamp(1.1rem,3vw,1.7rem) .95rem;
  background:var(--surface-2);
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;align-items:baseline;justify-content:space-between;
}
.waybill-head .micro{color:var(--text-soft)}

/* the tear: a dotted rule with a notch bitten out of each end */
.waybill-tear{
  position:relative;height:0;border-top:2px dashed var(--rule);opacity:.6;
  margin-inline:clamp(1.1rem,3vw,1.7rem);
}
.waybill-tear::before,.waybill-tear::after{
  content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--tear-c,var(--bg));transform:translateY(-50%);
}
.waybill-tear::before{left:calc((-1 * clamp(1.1rem,3vw,1.7rem)) - 7px)}
.waybill-tear::after{right:calc((-1 * clamp(1.1rem,3vw,1.7rem)) - 7px)}
.waybill-body{padding:clamp(1.15rem,3vw,1.7rem)}

/* The same perforation as a section boundary: one vocabulary, not two.
   --tear-c is the colour of the section BELOW (it bulges upward);
   --tear-above is the colour of the section above, and defaults to
   transparent, which is correct whenever that section is the page itself. */
.tear-edge{
  height:var(--perf-r);width:100%;position:relative;z-index:1;
  background-color:var(--tear-above,transparent);
  background-image:radial-gradient(circle at 50% 0,var(--tear-c,var(--bg)) var(--perf-r),transparent calc(var(--perf-r) + .6px));
  background-size:var(--perf-gap) 100%;
  background-repeat:repeat-x;
}

/* a field row inside the waybill: mono label above, real value below */
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.2rem 1.7rem}
.field dt,.field-grid dt{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-muted);font-weight:500;margin-bottom:.3rem;
}
.field dd,.field-grid dd{
  margin:0;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;line-height:1.45;
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:clamp(1.2rem,2.6vw,1.65rem);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);
}
.card--lift:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--border-strong)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--text-soft)}
.card-ico{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--bg-tint);color:var(--brand-text);margin-bottom:1rem;
}
.card-ico svg{width:22px;height:22px}
:root[data-theme="dark"] .card-ico{background:var(--surface-2)}

/* numbered step, for "how we work" */
.step{position:relative;padding-left:3.5rem}
.step-n{
  position:absolute;left:0;top:.1rem;width:2.5rem;height:2.5rem;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--brand);color:var(--ink-900);
  font-family:var(--font-mono);font-weight:700;font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;
}

/* a plain marker list, used by the legal pages */
.ticks li{position:relative;padding-left:1.7rem;color:var(--text-soft)}
.ticks li+li{margin-top:.6rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--brand-text);
}

/* ============================================================
   MARKED GAP - a fact nobody has confirmed yet.
   Deliberately loud: it must be impossible to publish by accident.
   Every one of these is listed in README.md under "Before publishing".
   ============================================================ */
.todo{
  background:repeating-linear-gradient(135deg,var(--sun-100),var(--sun-100) 6px,var(--sun-200) 6px,var(--sun-200) 12px);
  color:var(--ink-900);border:1.5px dashed var(--sun-600);border-radius:var(--r-xs);
  padding:.1em .45em;font-family:var(--font-mono);font-size:.85em;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
}
:root[data-theme="dark"] .todo{
  background:repeating-linear-gradient(135deg,#3A2C08,#3A2C08 6px,#4A3810 6px,#4A3810 12px);
  color:var(--sun-200);border-color:var(--sun-500);
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s} .rv-d4{transition-delay:.28s}

/* ============================================================
   MOTION OFF - no exceptions, decorative keyframes included
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .btn:hover,.card--lift:hover{transform:none}
}

/* ==== 03-chrome.css ==== */
/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.site-header.is-stuck{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.35);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  border-bottom-color:var(--border);
  box-shadow:0 8px 26px -20px rgba(74,49,0,.55);
}
.header-in{display:flex;align-items:center;gap:1rem;min-height:70px}

.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text);margin-right:auto}
.brand-mark{width:38px;height:38px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1.12}
.brand-txt b{font-family:var(--font-display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
.brand-txt small{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-muted);font-weight:500;
}

.nav-links{display:flex;align-items:center;gap:.15rem}
.nav-links a{
  display:block;padding:.5rem .72rem;border-radius:var(--r-xs);
  font-size:var(--t-sm);font-weight:600;color:var(--text-soft);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover{color:var(--text);background:var(--surface-2)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a[aria-current="page"]::after{
  content:"";display:block;height:2.5px;border-radius:2px;background:var(--brand);
  margin-top:.25rem;
}

.icon-btn{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1.5px solid var(--border-strong);
  background:var(--surface);color:var(--text);cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:20px;height:20px}
.burger{display:none}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:grid}
}

/* ---------- mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:200;visibility:hidden;
}
.drawer[data-open="true"]{visibility:visible}
.drawer-scrim{
  position:absolute;inset:0;background:rgba(26,22,17,.55);opacity:0;
  transition:opacity var(--dur) var(--ease-out);
}
.drawer[data-open="true"] .drawer-scrim{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(88vw,340px);
  background:var(--bg);border-left:1px solid var(--border);
  transform:translateX(100%);transition:transform var(--dur) var(--ease-out);
  display:flex;flex-direction:column;padding:1.1rem var(--gutter) 2rem;overflow-y:auto;
}
.drawer[data-open="true"] .drawer-panel{transform:none}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem}
.dlink{
  display:block;padding:.85rem .2rem;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;color:var(--text);text-decoration:none;border-bottom:1px solid var(--border);
}
.dlink[aria-current="page"]{color:var(--brand-text)}
@media (prefers-reduced-motion:reduce){
  .drawer-panel,.drawer-scrim{transition:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--bg-tint)}
.hero::before{
  /* the sun the name gives us: warm light, not a decorative badge */
  content:"";position:absolute;top:-32%;right:-12%;width:min(760px,88vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,179,30,.34),rgba(245,179,30,.10) 46%,transparent 68%);
  pointer-events:none;
}
:root[data-theme="dark"] .hero::before{
  background:radial-gradient(circle,rgba(255,201,78,.17),rgba(255,201,78,.05) 46%,transparent 68%);
}
.hero-in{
  position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  padding-block:clamp(3rem,7vw,5.2rem) clamp(3.2rem,7vw,5.6rem);
}
@media (max-width:940px){
  .hero-in{grid-template-columns:1fr;padding-block:clamp(2.4rem,7vw,3.4rem)}
}
.hero h1{font-size:var(--t-hero);margin:1.05rem 0 1.05rem;max-width:17ch}
.hero .lead{max-width:52ch}
.hero-art{width:100%;height:auto}

/* ============================================================
   PAGE HEAD (the six inner pages)
   ============================================================ */
.page-head{background:var(--bg-tint);position:relative;overflow:hidden}
.page-head::before{
  content:"";position:absolute;top:-58%;right:-6%;width:min(560px,80vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(245,179,30,.26),transparent 66%);pointer-events:none;
}
:root[data-theme="dark"] .page-head::before{
  background:radial-gradient(circle,rgba(255,201,78,.13),transparent 66%);
}
.page-head-in{position:relative;padding-block:clamp(2.6rem,6vw,4.2rem) clamp(2.6rem,6vw,4rem)}
.page-head h1{margin:.95rem 0 .9rem;max-width:20ch}
.page-head .lead{max-width:58ch}

/* breadcrumb */
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:var(--t-xs);color:var(--text-muted)}
.crumb a{color:var(--text-muted);text-decoration:none}
.crumb a:hover{color:var(--text);text-decoration:underline}
.crumb li+li::before{content:"/";margin-right:.4rem;color:var(--border-strong)}
.crumb li{display:flex;align-items:center}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--surface-deep);color:var(--on-deep);padding-block:clamp(2.8rem,6vw,4rem) 2rem}
.site-footer h2,.site-footer h3{color:var(--on-deep)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(1.6rem,4vw,3rem)}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer .brand{color:var(--on-deep);margin-right:0}
.site-footer .brand-txt small{color:var(--kraft-300)}
.site-footer p{color:var(--on-deep-soft);font-size:var(--t-sm)}
.footer-h{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--sun-300);font-weight:600;margin-bottom:.9rem;
}
.footer-links li+li{margin-top:.5rem}
.footer-links a{color:var(--on-deep-soft);text-decoration:none;font-size:var(--t-sm)}
.footer-links a:hover{color:var(--on-deep);text-decoration:underline}
.footer-base{
  margin-top:clamp(1.8rem,4vw,2.6rem);padding-top:1.4rem;border-top:1px solid #3A3227;
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;align-items:center;
}
.footer-base p,.footer-base a{font-size:var(--t-xs);color:var(--kraft-300)}
.footer-base a{text-decoration:none}
.footer-base a:hover{color:var(--on-deep);text-decoration:underline}

/* ==== 04-pages.css ==== */
/* ============================================================
   HOME
   ============================================================ */
.hero-facts{margin-top:1.9rem;max-width:520px}

/* the honest "what this is" strip */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
@media (max-width:700px){.strip{grid-template-columns:1fr}}
.strip-cell{background:var(--surface);padding:1.25rem clamp(1rem,2.4vw,1.5rem)}
.strip-cell svg{width:22px;height:22px;color:var(--brand-text);margin-bottom:.7rem}
.strip-cell h3{font-size:var(--t-h4);margin-bottom:.35rem}
.strip-cell p{font-size:var(--t-sm);color:var(--text-soft)}

/* section heading block */
.sec-head{max-width:60ch;margin-bottom:clamp(1.7rem,3.5vw,2.6rem)}
.sec-head h2{margin:.85rem 0 .8rem}

/* where to buy */
.buy{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
@media (max-width:760px){.buy{grid-template-columns:1fr}}

/* ============================================================
   CATEGORIES
   ============================================================ */
.cat{display:flex;gap:1rem;align-items:flex-start}
.cat .card-ico{margin-bottom:0;flex:none}
.cat h3{font-size:var(--t-h4);margin-bottom:.3rem}
.cat p{font-size:var(--t-sm)}

/* ============================================================
   LEGAL / LONG-FORM PAGES
   ============================================================ */
.doc{max-width:var(--maxw-text)}
.doc h2{font-size:var(--t-h3);margin:2.6rem 0 .85rem;scroll-margin-top:90px}
.doc h2:first-of-type{margin-top:0}
.doc h3{font-size:var(--t-h4);margin:1.7rem 0 .5rem}
.doc p{color:var(--text-soft);margin-bottom:1rem}
.doc p:last-child{margin-bottom:0}
.doc a{font-weight:600}

/* the numbered declaration list: the public face of what was signed */
.decl{counter-reset:d;margin:1.4rem 0}
.decl li{
  counter-increment:d;position:relative;padding-left:3.2rem;margin-bottom:1.35rem;
  color:var(--text-soft);
}
.decl li:last-child{margin-bottom:0}
.decl li::before{
  content:counter(d,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  width:2.25rem;height:2.25rem;border-radius:var(--r-xs);display:grid;place-items:center;
  background:var(--surface-2);color:var(--brand-text);
  font-family:var(--font-mono);font-size:var(--t-xs);font-weight:700;
  font-variant-numeric:tabular-nums;border:1px solid var(--border);
}
.decl b{display:block;color:var(--text);margin-bottom:.2rem}

/* a short "in plain terms" aside */
.aside{
  border-left:3px solid var(--brand);background:var(--bg-tint);
  padding:1.1rem 1.3rem;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:1.5rem 0;
}
.aside p{color:var(--text-soft);margin:0}
.aside p+p{margin-top:.7rem}

/* effective-date line */
.stamp{
  display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .8rem;
  border:1.5px dashed var(--border-strong);border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);
}
.stamp svg{width:14px;height:14px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,2.6rem);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.mail-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.mail-row svg{width:22px;height:22px;color:var(--brand-text);flex:none}
.mail-link{
  font-family:var(--font-mono);font-size:clamp(.95rem,2.4vw,1.12rem);font-weight:600;
  color:var(--accent-text);word-break:break-all;
}

/* ============================================================
   HERO ILLUSTRATION
   ============================================================ */
.hero-art{filter:drop-shadow(0 24px 44px rgba(74,49,0,.18))}
:root[data-theme="dark"] .hero-art{filter:drop-shadow(0 24px 44px rgba(0,0,0,.55))}
@media (max-width:940px){
  .hero-art-wrap{max-width:460px;margin-inline:auto;width:100%}
}

/* ============================================================
   DOC LAYOUT
   A single 68ch column inside a 1120px page leaves half the width
   empty, which reads as content floating in a hole. The space earns
   its keep as a sticky contents rail, generated from the page's own
   <h2>s by build.js so it cannot drift out of sync.
   ============================================================ */
.doc-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 250px;
  gap:clamp(2rem,5vw,4.5rem);align-items:start;
}
.doc-aside{position:sticky;top:94px}
/* Below the breakpoint the page is one column and a trailing list of links
   the reader has already scrolled past helps nobody. It is navigation, not
   content: every word it points at is still on the page. */
@media (max-width:980px){
  .doc-layout{grid-template-columns:1fr}
  .doc-aside{display:none}
}
.toc{border-left:2px solid var(--border);padding-left:1.15rem}
.toc-h{
  font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:.95rem;
}
.toc li+li{margin-top:.6rem}
.toc a{
  color:var(--text-soft);text-decoration:none;font-size:var(--t-sm);
  display:block;line-height:1.35;
}
.toc a:hover{color:var(--brand-text);text-decoration:underline}


/* ==== generated: system-dark twins of the stamped dark rules ==== */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .waybill{filter:drop-shadow(0 14px 28px rgba(0,0,0,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.45))}
  :root:not([data-theme="light"]) .card-ico{background:var(--surface-2)}
  :root:not([data-theme="light"]) .todo{
  background:repeating-linear-gradient(135deg,#3A2C08,#3A2C08 6px,#4A3810 6px,#4A3810 12px);
  color:var(--sun-200);border-color:var(--sun-500);
}
  :root:not([data-theme="light"]) .hero::before{
  background:radial-gradient(circle,rgba(255,201,78,.17),rgba(255,201,78,.05) 46%,transparent 68%);
}
  :root:not([data-theme="light"]) .page-head::before{
  background:radial-gradient(circle,rgba(255,201,78,.13),transparent 66%);
}
  :root:not([data-theme="light"]) .hero-art{filter:drop-shadow(0 24px 44px rgba(0,0,0,.55))}
}