/* JUNE OKAFOR — ink first, pixels second
   Tokens mirror export/brand.css (the DNA source). */

:root{
  --paper:#f4efe6;
  --paper-2:#ece5d6;
  --ink:#1d2440;
  --ink-2:#2b3357;
  --accent:#d8492b;
  --accent-soft:#e2694f;
  --muted:#6c6455;
  --font-display:"Fraunces",Georgia,serif;
  --font-text:"Archivo",system-ui,sans-serif;
  --font-wide:"Archivo Expanded","Archivo",sans-serif;
  --radius:10px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px;
  --act-gap:clamp(96px,14vh,160px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.2s; --t:.45s; --t-slow:.9s;
  --bg:var(--paper);
  --fg:var(--ink);
}
[data-theme="dark"]{
  --bg:var(--ink);
  --fg:var(--paper);
  --paper-2:#28304f;
  --muted:#a9a294;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  transition:background var(--t-slow) var(--ease-out),color var(--t-slow) var(--ease-out);
}
::selection{background:var(--accent);color:var(--paper)}
a{color:inherit}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* living background + grain */
#ink-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.55}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:40;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.05}
.freeze .grain,.freeze .hs-bar{animation:none !important}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:var(--s4);
  padding:var(--s2) clamp(16px,4vw,48px);transition:transform var(--t) var(--ease-out),background var(--t)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.nav.hidden{transform:translateY(-110%)}
.nav-mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-name{font-family:var(--font-wide);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem}
.nav-links{margin-left:auto;display:flex;gap:var(--s3);align-items:center}
.nav-links a{text-decoration:none;font-size:.9rem;font-weight:500;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--accent);transition:width var(--t) var(--ease-out)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}
.nav-cta{border:2px solid var(--fg);padding:6px 16px !important;border-radius:999px;transition:background var(--t-fast),color var(--t-fast)}
.nav-cta:hover{background:var(--fg);color:var(--bg)}
.nav-cta::after{display:none}
.theme-flip{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:inherit;font-family:var(--font-text);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.tf-dot{width:14px;height:14px;border-radius:50%;background:var(--fg);transition:transform var(--t) var(--ease-out)}
.theme-flip:hover .tf-dot{transform:scale(1.3)}

/* mark */
.mark{width:64px;height:64px;overflow:visible}
.mark-sm{width:34px;height:34px}
.mk-accent{fill:var(--accent);opacity:.92}
.mk-ink{fill:var(--ink);opacity:.86}
[data-theme="dark"] .mk-ink{fill:var(--paper);opacity:.9}
.mk-line{fill:none;stroke:var(--paper);stroke-width:3;stroke-linecap:round}
[data-theme="dark"] .mk-line{stroke:var(--ink)}
.mark-mono{color:var(--fg)}

/* HERO */
.hero{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;
  padding:calc(var(--s6)) clamp(16px,4vw,48px) var(--s5);gap:var(--s4);position:relative}
.hero-stage{position:relative}
.hero-wordmark{position:relative;font-family:var(--font-display);font-weight:900;
  font-size:clamp(4rem,16vw,15rem);line-height:.82;letter-spacing:-.03em}
.wm-pass{display:flex;flex-direction:column}
.wm-pass span{display:block}
.wm-accent{color:var(--accent);position:absolute;inset:0;transform:translate(.12em,.1em);opacity:.9}
.wm-ink{color:var(--fg);position:relative;mix-blend-mode:normal}
/* THE KIT ARTIFACT — the brand kit arrives as an object and unpacks */
.hero-right{display:flex;flex-direction:column;align-items:flex-end;justify-self:end;align-self:center;gap:var(--s4)}
.hero-kit{position:relative;width:clamp(280px,24vw,400px);height:clamp(250px,21vw,340px);perspective:900px}
.hk-case{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:80%;height:52%;
  background:var(--ink);border-radius:6px 6px 12px 12px;box-shadow:0 24px 60px rgba(29,36,64,.18);z-index:5}
[data-theme="dark"] .hk-case{background:var(--ink-2);box-shadow:0 24px 60px rgba(0,0,0,.4)}
.hk-flap{position:absolute;left:0;top:-1px;width:100%;height:42%;background:var(--ink-2);
  border-radius:6px 6px 0 0;transform-origin:50% 0;z-index:6}
[data-theme="dark"] .hk-flap{background:#3b446e}
.hk-band{position:absolute;left:0;right:0;top:52%;height:26%;background:#ece5d6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hk-band span{font-family:var(--font-wide);font-weight:700;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#1d2440;white-space:nowrap}
.hk-seal{position:absolute;right:12%;top:38%;width:17%;aspect-ratio:1;border-radius:50%;background:var(--accent);z-index:7;
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--paper) 30%,transparent)}
.hk-piece{position:absolute;z-index:4}
.hk-plate{left:50%;top:0;width:44%;aspect-ratio:3/4;background:#ece5d6;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;
  box-shadow:0 24px 60px rgba(29,36,64,.18);z-index:8}
.hk-mark{width:62%;height:auto;overflow:visible}
.hkp-a{fill:var(--accent);opacity:.92}
.hkp-i{fill:#1d2440;opacity:.86}
.hkp-l{fill:none;stroke:#ece5d6;stroke-width:3;stroke-linecap:round}
.hk-plate em,.hk-spec em{font-style:normal;font-family:var(--font-wide);font-size:.52rem;letter-spacing:.22em;text-transform:uppercase;color:#6c6455}
.hk-book em{font-style:normal;font-family:var(--font-wide);font-size:.52rem;letter-spacing:.22em;text-transform:uppercase}
.hk-sw{width:24%;aspect-ratio:5/7;display:flex;align-items:flex-end;padding:6px;box-shadow:0 24px 60px rgba(29,36,64,.18)}
.hk-sw em{font-style:normal;font-family:var(--font-wide);font-weight:700;font-size:.5rem;letter-spacing:.14em}
.hk-sw-p{background:var(--paper);border:1.5px solid color-mix(in srgb,var(--ink) 25%,transparent);color:var(--ink);left:6%;top:26%}
.hk-sw-i{background:var(--ink);color:var(--paper);left:1%;top:16%}
.hk-sw-v{background:var(--accent);color:var(--paper);left:-4%;top:6%}
[data-theme="dark"] .hk-sw-i{border:1.5px solid color-mix(in srgb,var(--paper) 35%,transparent)}
.hk-spec{right:-2%;top:10%;width:30%;aspect-ratio:3/4;background:#ece5d6;color:#1d2440;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;box-shadow:0 24px 60px rgba(29,36,64,.18)}
.hk-spec b{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,3.4vw,3rem);line-height:1;
  text-shadow:.06em .05em 0 color-mix(in srgb,var(--accent) 55%,transparent)}
.hk-book{right:14%;bottom:6%;width:26%;aspect-ratio:3/4;background:var(--ink-2);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8%;
  border-left:4px solid var(--accent);box-shadow:0 24px 60px rgba(29,36,64,.18);z-index:6}
.hk-book i{font-style:normal;font-family:var(--font-display);font-weight:900;font-size:.72rem;letter-spacing:.04em}
.hk-book em{color:color-mix(in srgb,var(--paper) 65%,transparent)}
/* reduced-motion / no-JS resting state: kit already open */
.hero-kit.open .hk-flap{transform:rotateX(-142deg)}
.hero-kit.open .hk-sw-p{transform:rotate(-4deg)}
.hero-kit.open .hk-sw-i{transform:rotate(-12deg)}
.hero-kit.open .hk-sw-v{transform:rotate(-20deg)}
.hero-kit.open .hk-spec{transform:rotate(6deg)}
.hero-line{max-width:420px;justify-self:end;align-self:end}
.hero-kicker{font-family:var(--font-wide);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;color:var(--accent);margin-bottom:var(--s2)}
.hero-tag{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.1;margin-bottom:var(--s2)}
.hero-sub{color:var(--muted);margin-bottom:var(--s3)}
.hero-scroll{position:absolute;bottom:var(--s3);left:clamp(16px,4vw,48px);display:flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.hs-bar{display:inline-block;width:56px;height:2px;background:var(--muted);transform-origin:left;animation:hsb 2.2s var(--ease-out) infinite}
@keyframes hsb{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.btn{display:inline-block;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:700;
  padding:14px 28px;border-radius:999px;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast)}
.btn:hover{transform:translateY(-3px) rotate(-1deg);background:var(--accent);color:var(--paper)}
.btn-big{font-size:clamp(1rem,2.2vw,1.5rem);padding:18px 36px}

/* B · PALETTE ACT — full bleed living color */
.palette-act{display:grid}
.pal-panel{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:var(--s5) clamp(16px,6vw,90px);position:relative}
.pal-paper{background:var(--paper);color:var(--ink)}
.pal-ink{background:var(--ink);color:var(--paper)}
.pal-verm{background:var(--accent);color:var(--paper)}
.pal-word{font-family:var(--font-display);font-weight:900;font-size:clamp(3.4rem,13vw,12rem);line-height:.9;letter-spacing:-.02em}
.pal-ink .pal-word{margin-left:auto;text-align:right}
.swatch{margin-top:var(--s3);background:none;border:0;color:inherit;cursor:pointer;text-align:left;display:flex;gap:var(--s3);align-items:baseline;flex-wrap:wrap;font-family:var(--font-text);transition:transform var(--t-fast) var(--ease-out)}
.pal-ink .swatch{margin-left:auto}
.swatch:hover{transform:translateX(6px)}
.sw-hex{font-weight:700;letter-spacing:.1em;font-size:1.05rem;border-bottom:2px solid currentColor}
.sw-role{opacity:.75;font-size:.95rem}
.contrast{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.6}

/* C · STORY */
.story{padding:var(--act-gap) clamp(16px,4vw,48px);max-width:1280px;margin:0 auto;position:relative;display:grid;grid-template-columns:1fr 1.3fr .55fr;gap:var(--s4)}
.story-num{position:absolute;top:8px;right:0;font-family:var(--font-display);font-weight:900;font-size:clamp(6rem,18vw,16rem);opacity:.06;line-height:1;pointer-events:none}
.story-head{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.02;letter-spacing:-.02em}
.story-body p{margin-bottom:var(--s3);max-width:56ch}
.story-sign{font-family:var(--font-wide);text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;color:var(--accent)}

/* D · OFFER */
.offer{padding:var(--act-gap) clamp(16px,4vw,48px);max-width:1200px;margin:0 auto}
.offer-head,.wild-head,.kit-head{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,5.5vw,4.6rem);letter-spacing:-.02em;margin-bottom:var(--s5);line-height:1}
.offer-list{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3)}
.offer-item{padding:var(--s4);border-top:3px solid var(--fg);position:relative;transition:transform var(--t) var(--ease-out)}
.offer-item:hover{transform:translateY(-8px)}
.offer-item h3{font-family:var(--font-display);font-weight:600;font-size:1.6rem;margin:var(--s3) 0 var(--s2)}
.offer-item p{color:var(--muted);max-width:38ch}
.oi-num{font-family:var(--font-wide);font-weight:700;color:var(--accent);letter-spacing:.2em}
.oi-meta{margin-top:var(--s2);font-family:var(--font-wide);font-size:.8rem !important;letter-spacing:.12em;text-transform:uppercase;color:var(--fg) !important}
.oi-a{grid-column:1/7}
.oi-b{grid-column:7/13;transform:translateY(var(--s4))}
.oi-b:hover{transform:translateY(calc(var(--s4) - 8px))}
.oi-c{grid-column:4/10;transform:translateY(var(--s2))}
.oi-c:hover{transform:translateY(calc(var(--s2) - 8px))}
.offer{position:relative}
.offer-ghost{position:absolute;right:-.05em;bottom:-.12em;font-family:var(--font-display);font-weight:900;
  font-size:clamp(6rem,20vw,18rem);line-height:1;opacity:.05;pointer-events:none;user-select:none}

/* E · WILD */
.wild{padding:var(--act-gap) 0 calc(var(--act-gap)*.5) clamp(16px,4vw,48px);overflow:hidden}
.wild-stage{display:flex;gap:clamp(24px,4vw,64px);align-items:flex-start}
.wild-piece{flex:0 0 auto;width:clamp(240px,30vw,380px)}
.wild-piece svg{width:100%;height:auto;display:block;box-shadow:0 24px 60px rgba(29,36,64,.18)}
.wp-poster{margin-top:var(--s5)}
.wp-label{margin-top:calc(var(--s6) * 1.4)}
.wp-tote{margin-right:-60px}
.wild-piece figcaption{margin-top:var(--s2);font-family:var(--font-wide);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.svg-display{font-family:var(--font-display);font-weight:900;fill:var(--ink)}
.svg-mono{font-family:var(--font-wide);fill:var(--ink);letter-spacing:.1em}

/* E2 · PACKAGING SUITE */
.pack{padding:calc(var(--act-gap)*.35) clamp(16px,4vw,48px) var(--act-gap);max-width:1400px;margin:0 auto;overflow:hidden}
.pack-sub{color:var(--muted);max-width:52ch;margin:calc(var(--s4) * -1) 0 var(--s5)}
.pack-shelf{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);align-items:start}
.pack-item{position:relative}
.pk-tube{grid-column:1/5}
.pk-cards{grid-column:5/9;margin-top:var(--s6)}
.pk-folder{grid-column:9/13;margin-top:var(--s4)}
.pack-img{position:relative;overflow:hidden;border-radius:2px}
.pack-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,color-mix(in srgb,var(--ink) 22%,transparent));mix-blend-mode:multiply;pointer-events:none}
.pack-img img{display:block;width:100%;height:auto;filter:saturate(.94) contrast(1.02);transition:transform var(--t-slow) var(--ease-out)}
.pack-item:hover .pack-img img{transform:scale(1.04) rotate(-.5deg)}
.pk-mark{position:absolute;width:15%;height:auto}
.pk-mark-tube{left:50%;top:44%;transform:translateX(-54%) rotate(-4deg);width:13%}
.pk-mark-folder{left:50%;top:41.5%;transform:translate(-50%,-50%) scale(.62)}
.pk-wordmark{position:absolute;left:50%;bottom:14%;transform:translateX(-50%) rotate(-8deg);
  font-family:var(--font-display);font-weight:900;font-size:clamp(.9rem,1.6vw,1.4rem);letter-spacing:.02em;color:var(--ink)}
.pack-item figcaption{margin-top:var(--s2);font-size:.9rem;color:var(--muted);max-width:30ch}
.pk-num{font-family:var(--font-wide);font-weight:700;color:var(--accent);letter-spacing:.2em;margin-right:8px}

/* F · CTA */
.cta{padding:var(--act-gap) clamp(16px,4vw,48px);text-align:left;max-width:1200px;margin:0 auto}
.cta-head{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.02;letter-spacing:-.02em;max-width:16ch;margin-bottom:var(--s3)}
.cta-sub{color:var(--muted);margin-bottom:var(--s4)}

/* G · KIT */
.kit{padding:var(--act-gap) clamp(16px,4vw,48px);background:var(--paper-2);color:var(--ink)}
[data-theme="dark"] .kit{color:var(--paper)}
.kit-sub{max-width:60ch;color:var(--muted);margin-bottom:var(--s5)}
.kit-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s5);max-width:1200px}
.kit h3{font-family:var(--font-wide);text-transform:uppercase;letter-spacing:.14em;font-size:.85rem;margin-bottom:var(--s3);color:var(--accent)}
.type-spec{font-family:var(--font-display);font-weight:900;font-size:64px;line-height:1.05;min-height:1.2em;margin-bottom:var(--s4);word-break:break-word}
.kit-label{display:block;font-size:.85rem;letter-spacing:.06em;margin-bottom:var(--s3);color:var(--muted)}
.type-input{display:block;width:100%;max-width:420px;margin-top:8px;padding:12px 16px;border:2px solid var(--fg);border-radius:var(--radius);background:transparent;color:inherit;font-family:var(--font-text);font-size:1rem}
.type-size{display:block;width:100%;max-width:420px;margin-top:8px;accent-color:var(--accent)}
.lockup-row{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.lockup-word{font-family:var(--font-display);font-weight:900;font-size:1.8rem;letter-spacing:-.02em}
.kit-dl{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.dl{font-family:var(--font-wide);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:2px solid var(--fg);border-radius:999px;padding:8px 16px;transition:background var(--t-fast),color var(--t-fast)}
.dl:hover{background:var(--fg);color:var(--bg)}
.kit-note{font-size:.85rem;color:var(--muted)}

/* footer */
.foot{padding:var(--s5) clamp(16px,4vw,48px);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}
.foot-fine{color:var(--muted);font-size:.85rem}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:var(--ink);color:var(--paper);
  padding:10px 22px;border-radius:999px;font-size:.85rem;letter-spacing:.06em;z-index:60;opacity:0;transition:transform var(--t) var(--ease-out),opacity var(--t)}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ---------- DENSITY LAYER: marginalia, print artifacts, patterns ---------- */

/* registration mark (print artifact) */
.regmark{position:absolute;width:22px;height:22px;opacity:.4;pointer-events:none}
.regmark circle{fill:none;stroke:currentColor;stroke-width:1.5}
.regmark line{stroke:currentColor;stroke-width:1.5}

/* crop-mark corners on acts */
.cropped{position:relative}
.crop{position:absolute;width:18px;height:18px;pointer-events:none;opacity:.35}
.crop::before,.crop::after{content:"";position:absolute;background:currentColor}
.crop::before{width:100%;height:1.5px}
.crop::after{width:1.5px;height:100%}
.crop-tl{top:14px;left:14px}.crop-tl::before{top:0;left:0}.crop-tl::after{top:0;left:0}
.crop-tr{top:14px;right:14px}.crop-tr::before{top:0;right:0}.crop-tr::after{top:0;right:0}
.crop-bl{bottom:14px;left:14px}.crop-bl::before{bottom:0;left:0}.crop-bl::after{bottom:0;left:0}
.crop-br{bottom:14px;right:14px}.crop-br::before{bottom:0;right:0}.crop-br::after{bottom:0;right:0}

/* act numeral + running footer marginalia */
.act-mark{display:flex;align-items:center;gap:14px;font-family:var(--font-wide);font-size:.7rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s4)}
.act-mark::after{content:"";flex:1;height:1px;background:color-mix(in srgb,currentColor 30%,transparent)}
.act-mark b{color:var(--accent);font-weight:700}
.run-foot{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5);
  padding-top:var(--s2);border-top:1px solid color-mix(in srgb,var(--fg) 18%,transparent);
  font-family:var(--font-wide);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* print color bar (ink draw-down strip) */
.colorbar{display:flex;height:14px;width:min(280px,40vw);max-width:100%}
.colorbar i{flex:1}
.cb-1{background:var(--ink)}.cb-2{background:var(--ink-2)}.cb-3{background:var(--accent)}
.cb-4{background:var(--accent-soft)}.cb-5{background:var(--paper-2)}
.cb-6{background:repeating-linear-gradient(45deg,var(--ink) 0 3px,var(--paper-2) 3px 6px)}

/* mark repeated as pattern texture */
.mark-pattern{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='44' cy='48' r='21' fill='none' stroke='%231d2440' stroke-width='3'/%3E%3Ccircle cx='52' cy='48' r='21' fill='none' stroke='%231d2440' stroke-width='3'/%3E%3Cpath d='M42 36 v16 a6 6 0 0 1 -12 0' fill='none' stroke='%231d2440' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:96px 96px}
[data-theme="dark"] .mark-pattern{filter:invert(1) hue-rotate(180deg)}

/* hero margin rail + baseline artifacts */
.hero-rail{position:absolute;right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--font-wide);font-size:.66rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:16px}
.hero-rail::before{content:"";width:1px;height:64px;background:currentColor;opacity:.4}
.hero-foot{position:absolute;bottom:var(--s3);right:clamp(16px,4vw,48px);display:flex;align-items:center;gap:var(--s3)}
.hero-cmyk{display:flex;gap:6px}
.hero-cmyk i{width:12px;height:12px;border-radius:50%}
.hc-c{background:var(--ink)}.hc-m{background:var(--accent)}.hc-y{background:var(--paper-2);border:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}.hc-k{background:var(--fg)}

/* press marquee band */
.press-band{overflow:hidden;padding:var(--s3) 0;border-top:1.5px solid color-mix(in srgb,var(--fg) 24%,transparent);
  border-bottom:1.5px solid color-mix(in srgb,var(--fg) 24%,transparent);position:relative}
.pb-track{display:flex;gap:0;width:max-content;animation:pband 26s linear infinite}
.pb-item{display:flex;align-items:center;gap:var(--s4);padding-right:var(--s4);white-space:nowrap;
  font-family:var(--font-display);font-weight:900;font-size:clamp(1.6rem,3.4vw,3rem);letter-spacing:-.01em}
.pb-item .mark{width:.9em;height:.9em;flex:0 0 auto}
.pb-item .pb-alt{color:var(--accent);font-style:italic;font-weight:600}
.pb-item .pb-mono{font-family:var(--font-wide);font-weight:500;font-size:.42em;letter-spacing:.3em;color:var(--muted)}
@keyframes pband{to{transform:translateX(-50%)}}
.freeze .pb-track{animation:none}

/* palette panel print-spec marginalia */
.pal-spec{margin-top:var(--s3);display:flex;gap:var(--s4);flex-wrap:wrap;
  font-family:var(--font-wide);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
.pal-ink .pal-spec{margin-left:auto;justify-content:flex-end;text-align:right}
.pal-strip{position:absolute;bottom:0;left:0;right:0;height:10px;display:flex;opacity:.9}
.pal-strip i{flex:1}
.pal-panel .regmark{top:24px;right:28px}
.pal-ink .regmark{right:auto;left:28px}

/* TYPE SPECIMEN act */
.spec-act{padding:var(--act-gap) clamp(16px,4vw,48px);max-width:1400px;margin:0 auto;position:relative}
.spec-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s5);align-items:start}
.spec-aa{position:relative;font-family:var(--font-display);font-weight:900;line-height:.9;
  font-size:clamp(10rem,26vw,24rem);letter-spacing:-.04em}
.spec-aa .sa-ghost{position:absolute;left:.06em;top:.05em;color:var(--accent);opacity:.55;z-index:-1}
.spec-aa .sa-caption{display:block;font-family:var(--font-wide);font-weight:500;font-size:.75rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-top:var(--s2)}
.spec-rows{display:grid;gap:var(--s3)}
.spec-row{border-top:1px solid color-mix(in srgb,var(--fg) 22%,transparent);padding-top:var(--s2)}
.spec-row .sr-label{font-family:var(--font-wide);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.sr-display{font-family:var(--font-display);font-weight:900;font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;word-break:break-word}
.sr-display em{font-style:italic;font-weight:600;color:var(--accent)}
.sr-text{font-size:1.05rem;max-width:56ch;color:var(--fg)}
.sr-wide{font-family:var(--font-wide);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(.95rem,1.8vw,1.3rem);word-break:break-word}
.spec-ladder{display:flex;flex-direction:column;gap:2px;margin-top:var(--s4)}
.spec-ladder span{font-family:var(--font-display);font-weight:900;line-height:1.12;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* story specimen margin */
.story-margin{display:grid;gap:var(--s3);align-content:start}
.story-proof{border:1.5px solid color-mix(in srgb,var(--fg) 25%,transparent);padding:var(--s3);position:relative}
.story-proof .mark{width:44px;height:44px;margin-bottom:var(--s2)}
.story-proof p{font-family:var(--font-wide);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0}
.story-stamp{align-self:start;display:inline-flex;align-items:center;gap:10px;transform:rotate(-3deg);
  border:2px solid var(--accent);color:var(--accent);border-radius:4px;padding:8px 14px;
  font-family:var(--font-wide);font-weight:700;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase}

/* offer die-line artifact */
.offer-die{position:absolute;left:0;top:var(--s5);width:min(220px,22vw);opacity:.22;pointer-events:none}
.offer-die path,.offer-die rect{fill:none;stroke:var(--fg);stroke-width:1.5}
.offer-die .die-cut{stroke-dasharray:none}
.offer-die .die-fold{stroke-dasharray:5 5;stroke:var(--accent)}

/* wild proof stamps */
.wild-piece{position:relative}
.wp-stamp{position:absolute;top:-14px;right:-8px;z-index:2;background:var(--accent);color:var(--paper);
  font-family:var(--font-wide);font-weight:700;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  padding:6px 12px;transform:rotate(4deg)}

/* packaging: press-sheet staging for 6 */
.pack-shelf{position:relative}
.pk-coffee{grid-column:1/5;margin-top:var(--s6)}
.pk-jar{grid-column:5/9;margin-top:var(--s2)}
.pk-tote2{grid-column:9/13;margin-top:var(--s5)}
.pack-rule{grid-column:1/13;display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0 0;
  font-family:var(--font-wide);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.pack-rule::before,.pack-rule::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--fg) 22%,transparent)}
.pk-mark-coffee{left:50%;top:47%;transform:translate(-50%,-50%) scale(.8)}
.pk-label-patch{position:absolute;left:41.5%;top:39%;width:19%;height:16%;border-radius:2px;
  background:linear-gradient(168deg,#cfa97b 0%,#c19a68 55%,#b28a58 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.35),inset 0 -2px 4px rgba(60,40,20,.25)}
.pk-mark-jar{left:50%;top:56%;transform:translate(-50%,-50%) scale(.55)}
.pk-mark-tote2{left:50%;top:48%;transform:translate(-50%,-50%) rotate(-3deg) scale(.85)}
.pk-word-under{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--font-wide);
  font-weight:700;letter-spacing:.3em;font-size:clamp(.5rem,.9vw,.72rem);color:var(--ink)}

/* CTA pattern ground */
.cta{position:relative;overflow:hidden}
.cta .mark-pattern{opacity:.045}
.cta-inner{position:relative}
.cta-meta{display:flex;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  font-family:var(--font-wide);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* kit ramp + book */
.kit-ramp{display:flex;height:34px;margin:var(--s2) 0 var(--s4);border:1.5px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.kit-ramp i{flex:1;position:relative}
.kit-ramp i::after{content:attr(data-v);position:absolute;left:4px;bottom:-20px;font-family:var(--font-wide);font-size:.58rem;letter-spacing:.08em;color:var(--muted)}
.dl-book{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.dl-book:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* HERO DOWNLOAD — the brand book flagship: the misregistration pass lives on it,
   and a press-light sweeps it slowly. Unmissable among the chips. */
.dl-hero{display:flex;align-items:center;gap:1.1rem;width:100%;margin:0 0 1rem;
  background:var(--ink);color:var(--paper);text-decoration:none;padding:1.15rem 1.4rem;
  border-radius:6px;position:relative;overflow:hidden;
  box-shadow:4px 4px 0 var(--accent);transition:transform var(--t-fast),box-shadow var(--t-fast)}
.dl-hero:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--accent)}
.dl-hero svg{width:44px;height:44px;flex:none}
.dh-text{flex:1;display:flex;flex-direction:column;gap:.15rem}
.dh-text b{font-family:var(--font-display);font-weight:900;font-size:1.25rem}
.dh-text i{font-style:normal;font-family:var(--font-wide);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.dh-get{font-family:var(--font-wide);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--accent);color:var(--paper);border-radius:999px;padding:.6rem 1.2rem}
.dl-hero::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:40%;
  background:linear-gradient(105deg,transparent 0%,rgba(244,239,230,.14) 45%,rgba(244,239,230,.30) 50%,rgba(244,239,230,.14) 55%,transparent 100%);
  transform:skewX(-16deg);animation:dh-sheen 3.8s ease-in-out infinite}
@keyframes dh-sheen{0%{left:-70%}55%{left:130%}100%{left:130%}}
@media (prefers-reduced-motion: reduce){.dl-hero::after{animation:none;display:none}}

/* split words */
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.wi{display:inline-block;transform:translateY(115%)}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:96px;padding-bottom:120px}
  .hero-right{align-items:flex-start;justify-self:start}
  .hero-kit{width:min(320px,78vw);height:min(270px,66vw);align-self:center}
  .hero-line{justify-self:start;padding-bottom:0}
  .hero-scroll{bottom:var(--s2)}
  .story{grid-template-columns:1fr}
  .oi-a,.oi-b,.oi-c{grid-column:1/13;transform:none}
  .oi-b:hover,.oi-c:hover{transform:translateY(-8px)}
  .kit-grid{grid-template-columns:1fr}
  .pk-tube,.pk-cards,.pk-folder{grid-column:1/13;margin-top:0}
  .wild-stage{flex-direction:column}
  .wp-label,.wp-poster{margin-top:0}
  .wp-tote{margin-right:0}
  .wild{padding-right:clamp(16px,4vw,48px)}
  .nav-links a:not(.nav-cta){display:none}
  .spec-grid{grid-template-columns:1fr}
  .pk-coffee,.pk-jar,.pk-tote2{grid-column:1/13;margin-top:0}
  .hero-rail{display:none}
  .hero-foot{position:static;margin-top:var(--s3);justify-content:flex-start}
  .story-margin{grid-template-columns:1fr 1fr}
  .offer-die{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .wi{transform:none}
  #ink-bg{display:none}
}