/** Shopify CDN: Minification failed

Line 1445:5 Unexpected "@keyframes"

**/
/* ============================================================
   COMPOSURE — theme styles
   Lightbulb Brand Group. Client: Composure Lifestyle.

   Ground is white. Purple and orange are spent in specific
   places — the wordmark, the headlines, one full-bleed
   manifesto, the family band, and every call to action.
   ============================================================ */

:root{
  color-scheme: light;

  --paper:      #FFFFFF;
  --paper-2:    #F6F3EC;   /* warm off-white, product ground */
  --ink:        #1B0A42;   /* COMPOSURE deep purple */
  --ink-deep:   #120628;
  --flare:      #FA4714;   /* COMPOSURE orange */
  --mute:       #6A6180;   /* purple-biased grey */
  --faint:      #9A94AA;
  --line:       rgba(27,10,66,.14);
  --line-soft:  rgba(27,10,66,.08);

  /* Type, per brand standards 01.0
     Display: Visby CF ExtraBold in capitals. Supply the webfont and it takes
     over; Archivo holds the same blocky weight until then.
     Body: Open Sans. Regular for paragraphs, Semibold for labels. */
  /* The licensed face leads, then Archivo as the holding face. This stack was
     circular and therefore invalid, which silently dropped every display
     element back to the body face. Fixed, so installing the licensed Visby CF
     web fonts switches the whole site over in one step and nothing else moves.
     The extracted preview subset is deliberately NOT in this stack: it carries
     capitals and digits only, so any lowercase heading would have been set in
     a second face mid word. */
  --f-display: "Visby CF","Visby Round CF","Archivo","Archivo Black",
               "Open Sans",-apple-system,BlinkMacSystemFont,
               "Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body: "Open Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;

  --shell: min(1440px, 100%);
  --gut: clamp(18px, 4vw, 56px);
  --t-fast: 180ms cubic-bezier(.2,.7,.3,1);
  --t-mid:  420ms cubic-bezier(.16,.8,.24,1);
}

*{ box-sizing: border-box; }
[hidden]{ display:none !important; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family:var(--f-body);
  font-size:17px; line-height:1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
p{ margin:0; }
a{ color:inherit; }

h1,h2,h3,.display{
  font-family:var(--f-display);
  font-variation-settings:"wdth" 118,"wght" 800;
  text-transform:uppercase; line-height:.9;
  letter-spacing:-.015em; text-wrap:balance; margin:0;
}
h1{ font-size: clamp(2.6rem, 7vw, 6.2rem); }
h2{ font-size: clamp(1.9rem, 4.6vw, 3.9rem); }
h3{ font-size: clamp(1.05rem,1.7vw,1.35rem); font-variation-settings:"wdth" 108,"wght" 760; letter-spacing:0; line-height:1.05; }

.label{
  font-family:var(--f-display); font-variation-settings:"wdth" 100,"wght" 700;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; line-height:1;
}
.lede{ font-size: clamp(1rem,1.25vw,1.15rem); line-height:1.5; max-width:62ch; color: var(--mute); }
.tnum{ font-variant-numeric: tabular-nums; }

:where(a,button,input,summary):focus-visible{
  outline:3px solid var(--flare); outline-offset:3px; border-radius:2px;
}

.shell{ width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }
.band{ padding-block: clamp(64px, 8vw, 128px); }
.band-tight{ padding-block: clamp(44px, 5vw, 76px); }
.bleed{ width:100%; }

/* ---------- wordmark ---------- */
#mark-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.mark{ display:block; height:30px; width:auto; color: var(--ink); }
.mark.on-dark{ color:#fff; }

/* ---------- utility strip + nav (Nike-referenced) ---------- */
.util{
  background: var(--paper-2); border-bottom:1px solid var(--line-soft);
  display:flex; justify-content:flex-end; gap:0;
  padding: 7px var(--gut); font-size:12px;
}
.util a{ text-decoration:none; padding:0 12px; border-right:1px solid var(--line); color: var(--ink); }
.util a:last-child{ border-right:0; padding-right:0; }
.util a:hover{ color: var(--flare); }

.nav{
  position: sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding: 14px var(--gut);
  background: var(--paper); border-bottom:1px solid transparent;
  transition: box-shadow var(--t-mid), border-color var(--t-mid);
}
.nav.is-settled{ border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(27,10,66,.5); }
.nav .mark{ height:21px; }
.nav-links{ display:flex; gap:28px; margin-inline:auto; }
.nav-links a{ text-decoration:none; position:relative; padding-bottom:3px; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--flare); transform: scaleX(0); transform-origin:left;
  transition: transform var(--t-fast);
}
.nav-links a:hover::after{ transform: scaleX(1); }
.nav-utils{ display:flex; align-items:center; gap:18px; }
.nav-utils button{ font:inherit; background:none; border:0; padding:0; cursor:pointer; color:inherit; }
.nav-utils button:hover{ color: var(--flare); }
.bag-btn{ display:flex; align-items:center; gap:7px; }
.bag-count{
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background: var(--flare); color:#fff; display:grid; place-items:center;
  font-size:11px; font-weight:700;
}
.menu-btn{ display:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border:0; cursor:pointer; text-decoration:none;
  font-family:var(--f-display); font-variation-settings:"wdth" 104,"wght" 800;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--ink); color:#fff; }
.btn-primary:hover{ background:#2C1263; }
.btn-flare{ background: var(--flare); color: var(--ink); }
.btn-flare:hover{ background:#FF5C2B; }
.btn-line{ background:transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-line:hover{ box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-onimg{ background:#fff; color: var(--ink); }
.btn-onimg:hover{ background: var(--flare); color: var(--ink); }
.btn-ghost-img{ background:transparent; color:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.btn-ghost-img:hover{ box-shadow: inset 0 0 0 1.5px #fff; }

/* ---------- eyebrow ---------- */
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom: clamp(18px,2.4vw,30px); color: var(--flare); }
.eyebrow .bar{ width:32px; height:2px; background: currentColor; flex:none; }

/* ============================================================
   01 — HERO  (full-bleed photograph, white page around it)
   ============================================================ */
.hero{ position:relative; overflow:hidden; background:#241246; }
.hero-media{ position:relative; aspect-ratio:16/9; min-height: 460px; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: 50% 42%; }
.hero-rings{ position:absolute; inset:0; width:100%; height:100%; }
.hero-shade{
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top, rgba(12,4,26,.86) 2%, rgba(12,4,26,.30) 42%, rgba(12,4,26,.06) 70%);
}
.hero-copy{
  position:absolute; left:0; right:0; bottom: clamp(26px,4vw,56px);
  padding-inline: var(--gut); width:var(--shell); margin-inline:auto;
  color:#fff; pointer-events:none;
}
.hero-copy > *{ pointer-events:auto; }
.hero-copy .label{ color: var(--flare); margin-bottom:14px; display:inline-block; }
.hero-copy h1{ max-width:15ch; margin-bottom:16px; }
.hero-copy h1 .stop{ color: var(--flare); }
.hero-copy p{ max-width:44ch; margin-bottom:24px; color: rgba(255,255,255,.88); font-size: clamp(.98rem,1.2vw,1.1rem); }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-slate{
  position:absolute; right: var(--gut); top: clamp(18px,3vw,30px);
  display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.8);
}
.ring-hint{
  position:absolute; left: var(--gut); top: clamp(18px,3vw,30px);
  color: rgba(255,255,255,.62); display:flex; align-items:center; gap:8px;
}
.ring-hint .dot{ width:6px; height:6px; border-radius:999px; background:var(--flare); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(1) } 50%{ opacity:1; transform:scale(1.5) } }
.film-toggle{
  width:36px; height:36px; border-radius:999px; flex:none;
  background:rgba(12,4,26,.4); border:1.5px solid rgba(255,255,255,.45);
  color:#fff; cursor:pointer; display:grid; place-items:center;
}
.film-toggle:hover{ border-color:#fff; }

/* ============================================================
   02 — THREE TILES (Nike pattern: image, caption beneath)
   ============================================================ */
.tiles{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,1.6vw,22px); }
.tile{ text-decoration:none; display:block; }
.tile .frame{ position:relative; aspect-ratio:1; overflow:hidden; background: var(--paper-2); }
.tile .frame img{ width:100%; height:100%; object-fit:cover; transition: transform 700ms cubic-bezier(.16,.8,.24,1); }
.tile:hover .frame img{ transform: scale(1.04); }
.tile .frame canvas{ position:absolute; inset:0; width:100%; height:100%; }
.tile h3{ margin-top:16px; }
.tile .sub{ color: var(--mute); font-size:14.5px; margin-top:5px; }

/* ============================================================
   03 — THE LITANY
   ============================================================ */
.kinds-sec{ background: var(--ink); color:#fff; }
.kinds-sec .litany li{ color: rgba(255,255,255,.26); }
.kinds-sec .litany li.lit{ color:#fff; }
.kinds-sec .litany-note{ color: rgba(255,255,255,.66); }
.kinds-sec .litany-note a{ color:#fff; }

.litany-wrap{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); gap: clamp(28px,5vw,80px); align-items:end; }
.litany{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.litany li{
  font-family:var(--f-display); font-variation-settings:"wdth" 96,"wght" 770;
  font-size: clamp(1.5rem,4.4vw,3.6rem); line-height:1.08;
  color: rgba(27,10,66,.22); cursor:default;
  transition: color 280ms ease, transform 280ms ease;
}
.litany li.lit{ color: var(--ink); transform: translateX(8px); }
.litany li.lit::after{ content:""; display:inline-block; width:.42em; height:.09em; background: var(--flare); vertical-align:.18em; margin-left:.22em; }
.litany-note{ color: var(--mute); font-size:15px; max-width:34ch; }
.litany-note a{ color: var(--ink); text-decoration:none; border-bottom:2px solid var(--flare); padding-bottom:2px; }

/* ============================================================
   04 — THE DEVICE (interactive: the rings answer the cursor)
   ============================================================ */
.device{ background: var(--paper-2); }
.device-wrap{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(26px,4vw,72px); align-items:center; }
.device-stage{
  position:relative; aspect-ratio:1; max-width:640px; width:100%; margin-inline:auto;
  cursor: crosshair; touch-action: none;
}
.device-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.device-stage .cue{
  position:absolute; left:50%; bottom:2%; transform:translateX(-50%);
  color: var(--faint); transition: opacity var(--t-mid); white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:560px){
  .device-stage .cue{ white-space:normal; text-align:center; width:88%; }
}
.device-stage.touched .cue{ opacity:0; }
.device-steps{ list-style:none; margin: clamp(20px,2.6vw,30px) 0 0; padding:0; display:grid; }
.device-steps li{
  display:grid; grid-template-columns: 34px 1fr; gap:16px; align-items:baseline;
  padding: 14px 0; border-top:1px solid var(--line);
}
.device-steps li:last-child{ border-bottom:1px solid var(--line); }
.device-steps .n{ color: var(--flare); }
.device-steps .t{ font-family:var(--f-display); font-variation-settings:"wdth" 106,"wght" 780; text-transform:uppercase; letter-spacing:.02em; }
.device-steps .d{ display:block; color: var(--mute); font-size:14.5px; margin-top:3px; }

/* ============================================================
   05 — PRODUCT THEATER + THE OPEN FORMULA
   ============================================================ */
.theater{ display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(28px,5vw,80px); align-items:center; }
.theater figure{ margin:0; }
.theater figure img{ width:100%; }
.theater figcaption{ font-size:12.5px; color: var(--faint); padding:12px 4px 0; }
.ratio{
  font-family:var(--f-display); font-variation-settings:"wdth" 122,"wght" 850;
  font-size: clamp(3.4rem,10vw,8.2rem); line-height:.85; letter-spacing:-.01em;
  font-variant-numeric: tabular-nums;
}
.ratio .colon{ color: var(--flare); }
.ratio-key{ letter-spacing:.2em; }
.ratio-key{ margin-top:14px; color: var(--mute); }
.ratio-mark{ display:block; width:min(100%, 420px); height:auto; }

/* the proof panel, on the pack's own orange */
.facts-band{ background: var(--flare); color: var(--ink); }
.facts-band .eyebrow{ color: var(--ink); }
.facts-band table.sf th, .facts-band table.sf td{ border-bottom-color: rgba(27,10,66,.22); }
.facts-band table.sf thead th{ color: rgba(27,10,66,.72); border-bottom-color: var(--ink); }
.facts-band .dv{ color: rgba(27,10,66,.72); }
.facts-band .disclosure .block{ border-left-color: var(--ink); }
.facts-band .disclosure p{ color: rgba(27,10,66,.82); }
.facts-band .legal{ color: rgba(27,10,66,.68); border-top-color: rgba(27,10,66,.26); }

.facts{ display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items:start; }
table.sf{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.sf caption{
  text-align:left; padding-bottom:12px;
  font-family:var(--f-display); font-variation-settings:"wdth" 110,"wght" 800;
  text-transform:uppercase; letter-spacing:.05em; font-size:1rem;
}
table.sf th, table.sf td{ padding:11px 0; border-bottom:1px solid var(--line-soft); text-align:left; font-size:15px; font-weight:500; }
table.sf td:last-child, table.sf th:last-child{ text-align:right; }
table.sf thead th{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: var(--mute); font-weight:700; border-bottom:2px solid var(--ink); }
table.sf tbody tr:nth-child(-n+2) td{ font-weight:700; }
.sf-scroll{ overflow-x:auto; }
.disclosure{ display:grid; gap:18px; }
.disclosure .block{ border-left:2px solid var(--flare); padding-left:16px; }
.disclosure h3{ font-size:.9rem; letter-spacing:.09em; font-variation-settings:"wdth" 104,"wght" 800; }
.disclosure p{ font-size:14px; color: var(--mute); max-width:52ch; margin-top:6px; }
.legal{ margin-top: clamp(30px,4vw,48px); padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color: var(--faint); max-width:88ch; }

/* ============================================================
   06 — THE FAMILY (the orange spot)
   ============================================================ */
.family{ background: var(--paper); }

/* the range, laid out as one shelf: every pack at its true relative
   height, standing on a shared baseline */
.line-up{
  --s: clamp(200px, 30vw, 420px);
  display:flex; align-items:flex-end; justify-content:center;
  gap: clamp(8px, 2.4vw, 40px);
  margin-top: clamp(28px,3.5vw,48px);
  padding-bottom: clamp(14px,2vw,22px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width:none;
}
.line-up::-webkit-scrollbar{ display:none; }
.line-up figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; flex:0 0 auto; }
.line-up img{
  height: calc(var(--s) * var(--k)); width:auto; max-width:none;
  transform-origin: bottom center;
  transition: transform 420ms cubic-bezier(.16,.8,.24,1);
}
.line-up figure:hover img{ transform: translateY(-9px); }
.line-up figcaption{ color: var(--faint); white-space:nowrap; }

.fam-table{ width:100%; border-collapse:collapse; margin-top: clamp(30px,4vw,52px); }
.fam-table th, .fam-table td{ text-align:left; padding:15px 20px 15px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.fam-table thead th{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; border-bottom:2.5px solid var(--ink); padding-bottom:9px; color: var(--mute); }
.fam-table td:first-child{
  font-family:var(--f-display); font-variation-settings:"wdth" 104,"wght" 800;
  text-transform:uppercase; font-size: clamp(.9rem,1.4vw,1.05rem); width:38%;
}
.fam-table td:last-child{ color: var(--mute); }

/* SKU rail — Nike "Athlete Picks" carousel pattern */
.rail-head{ display:flex; align-items:end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
.rail-nav{ display:flex; gap:8px; }
.rail-nav button{
  width:42px; height:42px; border-radius:999px; border:1px solid var(--line); cursor:pointer;
  background: var(--paper); color: var(--ink); display:grid; place-items:center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.rail-nav button:hover{ background: var(--paper-2); border-color: var(--ink); }
.rail-nav button[disabled]{ opacity:.3; cursor:not-allowed; }
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns: minmax(230px, 1fr);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; padding-bottom:4px;
}
.rail::-webkit-scrollbar{ display:none; }
.sku{ scroll-snap-align:start; background:var(--paper); border:1px solid var(--line); padding:16px; display:grid; align-content:start; gap:7px; }
.sku .fig{ aspect-ratio:1; background: var(--paper-2); overflow:hidden; margin-bottom:8px; display:grid; place-items:center; padding:10%; }
.sku .fig img{ width:100%; height:100%; object-fit:contain; transition: transform 600ms cubic-bezier(.16,.8,.24,1); }
.sku:hover .fig img{ transform:scale(1.06); }
.sku .nm{ font-family:var(--f-display); font-variation-settings:"wdth" 102,"wght" 800; text-transform:uppercase; font-size:.98rem; line-height:1.1; }
.sku .fmt{ font-size:13px; color: var(--mute); }
.sku .price{ font-family:var(--f-display); font-variation-settings:"wght" 800; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.sku .tbc{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--faint); }
.sku .add{
  margin-top:4px; justify-self:start; padding:10px 18px; border:0; cursor:pointer;
  background: var(--ink); color:#fff;
  font-family:var(--f-display); font-variation-settings:"wdth" 102,"wght" 800;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.sku .add:hover{ background:#2C1263; }
.sku .add[disabled]{ background: rgba(27,10,66,.25); cursor:not-allowed; }

/* ============================================================
   07 — THE TRIBE
   ============================================================ */
.films{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,1.4vw,18px); }
.film{ position:relative; overflow:hidden; aspect-ratio:4/5; background: var(--ink); display:flex; align-items:flex-end; }
.film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform 700ms cubic-bezier(.16,.8,.24,1); }
.film:hover img{ transform:scale(1.045); }
.film::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(12,4,26,.9), rgba(12,4,26,.05) 62%); }
.film .meta{ position:relative; z-index:1; padding: clamp(16px,2vw,24px); color:#fff; }
.film .kind{ font-family:var(--f-display); font-variation-settings:"wdth" 96,"wght" 760; font-size: clamp(1.05rem,1.9vw,1.5rem); display:block; }
.film .who{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.66); margin-top:6px; display:block; }
.film .dur{ position:absolute; z-index:1; top:12px; right:12px; font-size:11px; letter-spacing:.1em; background: rgba(12,4,26,.72); color:#fff; padding:4px 8px; font-variant-numeric:tabular-nums; }
.film .play{
  position:absolute; z-index:1; inset:0; margin:auto; width:56px; height:56px; border-radius:999px;
  background: rgba(255,255,255,.9); display:grid; place-items:center; color: var(--ink);
  transition: transform var(--t-fast), background var(--t-fast);
}
.film:hover .play{ transform:scale(1.09); background:#fff; }
.films-foot{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:12.5px; color: var(--faint); }

.name-yours{ margin-top: clamp(48px,6vw,88px); padding-top: clamp(34px,4vw,56px); border-top:1px solid var(--line); }
.ny-grid{ display:grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(26px,4vw,64px); align-items:start; }
.ny-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.ny-field{ flex:1 1 250px; display:flex; align-items:center; gap:8px; padding:13px 16px; border:1.5px solid var(--line); background: var(--paper-2); }
.ny-field span{ color: var(--mute); }
.ny-field input{ flex:1; min-width:56px; background:transparent; border:0; font:inherit; font-size:16px; color: var(--ink); border-bottom:1.5px solid var(--flare); padding:2px 4px; }
.ny-field input:focus{ outline:none; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ padding:8px 15px; border:1px solid var(--line); background:#fff; font-size:14px; animation: chipIn 380ms cubic-bezier(.16,.8,.24,1); }
.chip.mine{ border-color: var(--flare); background: rgba(250,71,20,.07); }
@keyframes chipIn{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.ny-count{ margin-top:18px; color: var(--faint); font-variant-numeric:tabular-nums; }
.ny-note{ font-size:12.5px; color: var(--faint); margin-top:12px; max-width:52ch; }

/* ============================================================
   08 — MANIFESTO (the one purple full-bleed)
   ============================================================ */
.manifesto{ background: var(--ink-deep); color:#fff; position:relative; overflow:hidden; text-align:center; }
.manifesto canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.manifesto .shell{ position:relative; }
.manifesto .verse{
  font-family:var(--f-display); font-variation-settings:"wdth" 104,"wght" 700;
  text-transform:uppercase; line-height:1.28; font-size: clamp(1rem,2vw,1.5rem);
  color: rgba(255,255,255,.55); display:grid; gap:2px; max-width:32ch; margin-inline:auto;
}
.manifesto .verse b{ color:#fff; font-weight:inherit; }
.manifesto .mark{ margin: clamp(34px,4.5vw,58px) auto clamp(22px,3vw,34px); height: clamp(30px,6vw,60px); }
.manifesto .line{ color: var(--flare); margin-bottom: clamp(26px,3.5vw,40px); }

/* ============================================================
   09 — BUY
   ============================================================ */
.buy{ background: var(--paper-2); }
.buy-grid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,80px); align-items:center; }
.buy-media{ background:#fff; }
.buy-panel{ display:grid; gap:18px; max-width:48ch; }
.buy-price{ display:flex; align-items:baseline; gap:14px; }
.buy-price .big{ font-family:var(--f-display); font-variation-settings:"wdth" 116,"wght" 850; font-size: clamp(2.2rem,4.6vw,3.4rem); line-height:1; font-variant-numeric:tabular-nums; }
.buy-price .per{ color: var(--mute); font-size:14px; }
.opts{ display:grid; gap:9px; }
.opt{ display:flex; gap:13px; align-items:flex-start; padding:15px 17px; border:1.5px solid var(--line); background:#fff; cursor:pointer; transition: border-color var(--t-fast); }
.opt:hover{ border-color: rgba(27,10,66,.38); }
.opt.sel{ border-color: var(--ink); }
.opt input{ margin:4px 0 0; accent-color: var(--flare); width:17px; height:17px; flex:none; }
.opt .t{ font-family:var(--f-display); font-variation-settings:"wdth" 102,"wght" 780; text-transform:uppercase; font-size:13px; letter-spacing:.05em; display:block; }
.opt .d{ font-size:13.5px; color: var(--mute); display:block; margin-top:3px; }
.buy-facts{ display:grid; border-top:1px solid var(--line); margin:0; }
.buy-facts div{ display:flex; justify-content:space-between; gap:20px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.buy-facts dt{ color: var(--mute); margin:0; }
.buy-facts dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }

/* ---------- stockists ---------- */
.stock-grid{ display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(26px,4vw,64px); align-items:center; }

/* ---------- footer ---------- */
.foot{ background: var(--paper); border-top:1px solid var(--line); padding-block: clamp(40px,5vw,64px); }
.foot-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:30px; }
.foot h4{ margin:0 0 13px; color: var(--flare); font-family:var(--f-display); font-variation-settings:"wdth" 100,"wght" 700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot a{ text-decoration:none; color: var(--mute); font-size:14.5px; }
.foot a:hover{ color: var(--ink); }
/* social sits on its own rule above the sign off: the handle set in the
   display face, then the marks under it as orange discs with purple glyphs,
   which is the brand's own two colour flip rather than a row of grey badges */
.foot-social{
  margin-top: clamp(30px,3.6vw,46px); padding-top:24px;
  border-top:1px solid var(--line);
}
.foot-handle{
  font-family: var(--f-display); font-variation-settings:"wdth" 102,"wght" 800;
  font-weight:800;
  font-size: clamp(1.3rem,2.3vw,1.8rem); line-height:1; letter-spacing:-.015em;
  color: var(--ink); margin:0;
}
.foot .foot-icons{
  list-style:none; margin:14px 0 0; padding:0; display:flex; gap:12px;
}
.foot .foot-icons a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background: var(--flare); color: var(--ink); border:0;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.foot .foot-icons a:hover{
  background: var(--ink); color: var(--flare); transform: translateY(-2px);
}
.foot-social + .foot-base{ border-top:0; margin-top:0; padding-top:22px; }

.foot-base{ margin-top: clamp(34px,4vw,52px); padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12.5px; color: var(--faint); align-items:center; }

/* ---------- bag ---------- */
.scrim{ position:fixed; inset:0; background:rgba(12,4,26,.5); z-index:70; opacity:0; pointer-events:none; transition:opacity var(--t-mid); }
.scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:80;
  background:#fff; border-left:1px solid var(--line);
  transform:translateX(101%); transition:transform var(--t-mid);
  display:flex; flex-direction:column;
}
.drawer.open{ transform:none; }
.drawer header{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.drawer header button{ background:none; border:0; font-size:24px; line-height:1; cursor:pointer; color:inherit; padding:4px 8px; }
.drawer .items{ flex:1; overflow-y:auto; padding:6px 22px; }
.drawer .row{ display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.drawer .row .n{ font-family:var(--f-display); font-variation-settings:"wdth" 100,"wght" 780; text-transform:uppercase; font-size:13.5px; }
.drawer .row .q{ font-size:13px; color: var(--mute); margin-top:3px; }
.drawer .empty{ color: var(--mute); padding:32px 0; }
.drawer footer{ padding:18px 22px 24px; border-top:1px solid var(--line); display:grid; gap:12px; }
.drawer .sum{ display:flex; justify-content:space-between; font-variant-numeric:tabular-nums; }
.drawer .ship{ font-size:12.5px; color: var(--faint); }

/* ---------- mobile sticky buy ---------- */
.sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); transform:translateY(110%); transition:transform var(--t-mid);
}
.sticky-buy.show{ transform:none; }
.sticky-buy .info{ flex:1; min-width:0; }
.sticky-buy .info .n{ font-family:var(--f-display); font-variation-settings:"wdth" 100,"wght" 780; text-transform:uppercase; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-buy .info .p{ font-size:12.5px; color: var(--mute); font-variant-numeric:tabular-nums; }
.sticky-buy .btn{ padding:13px 20px; }

/* ---------- build notes ---------- */
.notes{ background: var(--paper-2); border-top:1px solid var(--line); }
.notes details{ width:var(--shell); margin-inline:auto; padding:18px var(--gut) 26px; }
.notes summary{ cursor:pointer; color: var(--flare); font-family:var(--f-display); font-variation-settings:"wdth" 100,"wght" 700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.notes .body{ margin-top:16px; display:grid; gap:11px; max-width:80ch; font-size:13.5px; color: var(--mute); }
.notes .body b{ color: var(--ink); font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .litany-wrap,.device-wrap,.theater,.facts,.buy-grid,.ny-grid,.stock-grid{ grid-template-columns:minmax(0,1fr); }
  .tiles{ grid-template-columns:1fr; }
  .films{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
  .menu-btn{ display:block; margin-inline:auto 0; }
  .sticky-buy{ display:flex; }
  .hero-media{ aspect-ratio:4/5; min-height:0; }
  .hero-media img{ object-position:58% 40%; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .util{ justify-content:center; font-size:11.5px; }
  .films{ grid-template-columns:1fr; }
  .hero-cta .btn{ flex:1 1 100%; }
  .nav-utils .lbl{ display:none; }
  .device-stage{ cursor:default; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .litany li.lit{ transform:none; }
}


/* ============================================================
   Theme additions (Shopify)
   ============================================================ */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px;
  font-family:var(--f-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:0; }

.add-error{ display:block; margin-top:8px; font-size:13px; color:var(--flare); }
.sku .fig{ display:block; }
.sku .nm a{ color:inherit; }
.rte a{ color:var(--ink); border-bottom:2px solid var(--flare); text-decoration:none; }
.rte p{ margin:0 0 12px; }
select:focus-visible{ outline:3px solid var(--flare); outline-offset:2px; }

/* the device stage needs a pointer affordance only where it reacts */
[data-pressure]{ touch-action: pan-y; }


/* ============================================================
   JOURNAL TEASER
   The private half of Name yours. Purple, because this is the
   room the customer keeps to themselves.
   ============================================================ */
.journal-teaser{ background: var(--ink); color:#fff; position:relative; overflow:hidden; }
.journal-teaser .jt-rings{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.journal-teaser .shell{ position:relative; }
.jt-grid{ display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: clamp(30px,5vw,80px); align-items:center; }
.jt-grid h2{ max-width:16ch; }
.jt-grid .lede{ color: rgba(255,255,255,.72); margin-top:18px; max-width:46ch; }

.jt-steps{ list-style:none; margin: clamp(24px,3vw,36px) 0 0; padding:0; display:grid; }
.jt-steps li{
  display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px solid rgba(255,255,255,.16); font-size:15.5px;
}
.jt-steps li:last-child{ border-bottom:1px solid rgba(255,255,255,.16); }
.jt-steps .n{ color: var(--flare); }

.jt-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top: clamp(24px,3vw,34px); }
.jt-private{ color: rgba(255,255,255,.5); display:flex; align-items:center; gap:7px; }
.jt-private::before{
  content:""; width:11px; height:13px; flex:none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'><path d='M2 5V3.5a3.5 3.5 0 017 0V5h1v8H1V5h1zm1.5 0h4V3.5a2 2 0 10-4 0V5z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'><path d='M2 5V3.5a3.5 3.5 0 017 0V5h1v8H1V5h1zm1.5 0h4V3.5a2 2 0 10-4 0V5z'/></svg>") center/contain no-repeat;
}

/* the back of the bag, rendered as a card */
.jt-card{
  margin:0; background: var(--flare); color: var(--ink);
  padding: clamp(24px,3vw,36px); display:grid; gap: clamp(20px,2.4vw,28px);
  justify-items:center; text-align:center;
}
.jt-line{ width:100%; display:grid; gap:10px; justify-items:start; }
.jt-line .rule{ width:100%; height:2px; background: var(--ink); }
.jt-qr{ display:block; width: clamp(120px,16vw,168px); color: var(--ink); }
.jt-qr .qr{ width:100%; height:auto; display:block; shape-rendering: crispEdges; }
.jt-card figcaption{ color: rgba(27,10,66,.7); }

@media (max-width:1000px){
  .jt-grid{ grid-template-columns:minmax(0,1fr); }
  .jt-card{ max-width:420px; }
}


/* ============================================================
   FULL DISCLOSURE
   Straight off the back of the pouch: orange ground, purple ink,
   one keyline round the facts, one round the FDA statement.
   ============================================================ */
.fd-top{
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:end; gap: clamp(16px,3vw,48px);
}
.facts-band .fd-head{
  max-width: 20ch;
  display:inline-block; padding-bottom:10px;
  border-bottom: 3px solid var(--ink);
}
.facts-band .fd-stand{
  text-align:right; color: var(--ink); max-width: 26ch;
  font-size: clamp(13px, 1.1vw, 15px); line-height:1.45; padding-bottom:12px;
}

.fd-grid{
  /* two columns, two rows. Row one holds the panel and the notes, row two
     holds each column's foot, so the box always ends on the same line as the
     rule above the sign off. */
  display:grid; grid-template-columns: 1.08fr 1fr;
  grid-template-rows: 1fr auto;
  column-gap: clamp(20px, 2.6vw, 40px); row-gap: 0;
  align-items:stretch;
  margin-top: clamp(26px, 3.4vw, 44px);
}
.fd-grid > *{ min-width:0; }

/* the facts box: a keyline on the orange, never a white card */
.sf-panel{
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: clamp(14px, 1.6vw, 22px);
  display:flex; flex-direction:column;
}
/* the table takes the slack so the panel is full rather than a tall box with
   air in it, and the footnote stays pinned inside the keyline */
.sf-panel > .sf-table{ flex:1 1 auto; min-height:0; }
.sf-panel > .sf-foot{ margin-top:10px; }

.sf-title{
  font-family: var(--f-display);
  font-variation-settings:"wdth" 108,"wght" 800;
  text-transform:uppercase; letter-spacing:-.005em;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height:1;
  padding-bottom: 7px; border-bottom: 1px solid var(--ink);
}
.sf-serving{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size: 13.5px; line-height:1.4; margin-top:7px;
  padding-bottom:7px; border-bottom: 1px solid var(--ink);
}

.sf-table{ width:100%; border-collapse:collapse; margin-top:0; }
.sf-table thead th{
  text-align:right; font-size:12.5px; font-weight:700; padding:3px 0;
  border-bottom: 1px solid var(--ink);
}
.sf-table thead th:first-child{ text-align:left; width:58%; border-bottom:0; }
.sf-table thead th:last-child{ width:13%; }
.sf-table tbody th{
  text-align:left; font-weight:400; font-size:13.5px; line-height:1.3;
  padding:6px 10px 6px 0; border-bottom:1px solid rgba(27,10,66,.5);
  vertical-align:top;
}
.sf-table tbody td{
  text-align:right; font-size:13.5px; font-weight:400;
  padding:6px 0; border-bottom:1px solid rgba(27,10,66,.5); vertical-align:top;
}
.sf-table tbody td:last-child{ width:13%; }
.sf-table tbody tr:last-child th,
.sf-table tbody tr:last-child td{ border-bottom: 2px solid var(--ink); }
.sf-detail{ display:block; font-size:12px; font-style:italic; opacity:.8; padding-left:16px; margin-top:1px; }
.sf-foot{ font-size:12.5px; margin-top:7px; }

.sf-other{
  margin:0; padding-top: 16px;
  font-size: 12.5px; line-height:1.5; color: var(--ink); max-width: 62ch;
}
.sf-other strong{ font-weight:700; }

/* the notes column: plain purple type on the orange, like the bag */
.sf-notes{ display:flex; flex-direction:column; gap: clamp(12px,1.4vw,18px); padding-top: 4px; }
.sf-notes .fd-curve{ margin-top:auto; }
.fd-sign{
  margin-top:0; padding-top: 16px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  border-top:1px solid rgba(27,10,66,.35);
}
.fd-sign .mark{
  font-family: var(--f-display); font-variation-settings:"wdth" 104,"wght" 800;
  text-transform:uppercase; letter-spacing:.06em; line-height:1.05;
  font-size: clamp(.9rem, 1.3vw, 1.05rem); color: var(--ink); max-width:7ch;
}
.fd-sign .site{ font-size:12.5px; color: var(--ink); text-decoration:none; }
.fd-sign .site:hover{ text-decoration:underline; }
.sf-note p{ font-size:13.5px; line-height:1.5; color: var(--ink); }
.sf-note strong{ font-weight:700; }

.fd-legal{
  border:1px solid var(--ink); border-radius:3px;
  padding: clamp(12px,1.3vw,16px);
  font-size:12.5px; line-height:1.5; color: var(--ink);
  margin-top: 4px;
}

.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;
}

@media (max-width:860px){
  .fd-top{ grid-template-columns: minmax(0,1fr); align-items:start; }
  .facts-band .fd-stand{ text-align:left; padding-bottom:0; margin-top:14px; max-width:40ch; }
  .fd-grid{ grid-template-columns: minmax(0,1fr); grid-template-rows:auto; row-gap:0; }
  .fd-grid > .sf-other{ order:1; margin-bottom: clamp(20px,4vw,30px); }
  .fd-grid > .sf-notes{ order:2; }
  .fd-grid > .fd-sign{ order:3; }
}


/* ============================================================
   PRODUCT SHOWCASE
   One pack. Purple anchors it, the rings sit behind it, the
   progression runs down the side the way it runs down the pouch.
   ============================================================ */
.showcase{ background: var(--ink); color:#fff; position:relative; overflow:hidden; }
.showcase .sc-rings{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.showcase .shell{ position:relative; }
.sc-grid{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,5vw,78px); align-items:center;
}
.sc-stage{ margin:0; display:grid; justify-items:center; gap:22px; }
.sc-frame{
  position:relative; width:100%; max-width:440px; aspect-ratio:4/5;
  display:grid; place-items:center;
}
.sc-pack{
  grid-area:1/1; max-height:100%; width:auto; max-width:100%;
  opacity:0; transform:scale(.97);
  transition: opacity 420ms cubic-bezier(.16,.8,.24,1), transform 420ms cubic-bezier(.16,.8,.24,1);
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.45));
}
.sc-pack.is-on{ opacity:1; transform:none; }
.sc-toggle{ display:flex; gap:0; border:1px solid rgba(255,255,255,.28); }
.sc-toggle button{
  background:none; border:0; color:rgba(255,255,255,.6); cursor:pointer;
  font:inherit; padding:10px 22px; letter-spacing:.2em; text-transform:uppercase;
  font-family:var(--f-display); font-size:11px; font-weight:700;
  transition: background 180ms, color 180ms;
}
.sc-toggle button + button{ border-left:1px solid rgba(255,255,255,.28); }
.sc-toggle button.is-on{ background: var(--flare); color: var(--ink); }
.sc-toggle button:hover:not(.is-on){ color:#fff; }

.sc-copy .lede{ color: rgba(255,255,255,.72); margin-top:18px; max-width:46ch; }

/* the information device, one alignment axis */
.sc-device{
  list-style:none; margin: clamp(26px,3.2vw,38px) 0 0; padding:0;
  display:grid; gap:0; justify-items:start;
}
.sc-device li{ position:relative; padding-left:26px; }
.sc-device li span{
  font-family:var(--f-display); font-variation-settings:"wdth" 104,"wght" 700;
  text-transform:uppercase; letter-spacing:.22em; font-size:12.5px;
  display:block; padding:9px 0;
}
.sc-device li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:9px; height:1.5px; background: var(--flare);
}
.sc-device li + li::after{
  content:""; position:absolute; left:4px; top:-9px; width:1.5px; height:18px;
  background: var(--flare);
}

.sc-facts{ display:grid; margin: clamp(24px,3vw,34px) 0 0; border-top:1px solid rgba(255,255,255,.18); }
.sc-facts div{
  display:flex; justify-content:space-between; gap:20px; padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.18); font-size:14.5px;
}
.sc-facts dt{ color: rgba(255,255,255,.6); margin:0; }
.sc-facts dd{ margin:0; text-align:right; }
.sc-cta{ margin-top: clamp(24px,3vw,34px); }

@media (max-width:1000px){
  .sc-grid{ grid-template-columns:minmax(0,1fr); }
  .sc-frame{ max-width:340px; }
}


/* ---- journal teaser: the code reads orange on purple, no panel ---- */
.jt-card{
  background: transparent; color:#fff;
  padding: 0; gap: clamp(18px,2.2vw,26px);
  justify-items: start; text-align: left;
  max-width: 420px;
}
.jt-line .rule{ background: var(--flare); height: 2px; }
.jt-line .label{ color: rgba(255,255,255,.72); }
.jt-qr{ color: var(--flare); width: clamp(132px,17vw,182px); }
.jt-card figcaption{ color: rgba(255,255,255,.5); }
@media (max-width:1000px){ .jt-card{ max-width:none; } }


/* ============================================================
   THE RITUAL
   The four numbers off the back of the pouch, at the size they
   deserve. Eggshell ground so the purple bands either side of it
   keep their weight, purple linework per the colourway rule.
   ============================================================ */
.ritual-band{ background: var(--paper-2); color: var(--ink); position:relative; overflow:hidden; }
.ritual-band .rit-rings{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.rit-shell{ position:relative; }

.rit-head{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(18px,3vw,56px); align-items:end;
}
.rit-head h2{ max-width:13ch; }
.rit-head .lede{ color: var(--mute); }

.rit-steps{
  list-style:none; margin: clamp(34px,5vw,64px) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px,2vw,30px);
}
.rit-steps li{
  border-top: 2px solid var(--flare);
  padding-top: clamp(12px,1.4vw,18px);
}
.rit-n{
  display:block;
  font-family: var(--f-display);
  font-variation-settings:"wdth" 104,"wght" 800;
  font-size: clamp(2.6rem, 6.6vw, 5.4rem); line-height:.92;
  letter-spacing:-.03em; color: var(--ink);
}
.rit-l{
  display:block; margin-top:10px;
  color: var(--mute); font-size:12px; letter-spacing:.16em;
}

.rit-foot{
  margin-top: clamp(30px,4vw,54px);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:20px;
  border-top:1px solid rgba(27,10,66,.2); padding-top: clamp(20px,2.4vw,30px);
}
.rit-note{ color: var(--mute); max-width:42ch; font-size:15px; }

@media (max-width:860px){
  .rit-head{ grid-template-columns: minmax(0,1fr); align-items:start; }
  .rit-steps{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px,4vw,28px); }
}


/* ============================================================
   THE KINDS, AS ONE STORY
   Three drawn kinds and a blank fourth that is the reader's.
   Name yours is the end of the sentence, not a separate band.
   ============================================================ */
.ks-head{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(18px,3vw,56px); align-items:end;
}
.ks-head h2{ max-width:14ch; }
.ks-head .lede{ color: var(--mute); }

.ks-cards{
  list-style:none; margin: clamp(30px,4vw,54px) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px,1.4vw,20px);
}
.ks-card{ position:relative; display:flex; flex-direction:column; min-width:0; }
.ks-n{
  position:absolute; z-index:2; top:12px; left:12px;
  color: var(--flare); font-size:11px; letter-spacing:.18em;
}
.ks-art{ margin:0; aspect-ratio:4/5; overflow:hidden; background: var(--ink); }
.ks-art img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 700ms cubic-bezier(.16,.8,.24,1);
}
.ks-card:hover .ks-art img{ transform:scale(1.035); }
.ks-kind{
  font-family: var(--f-display); text-transform:none;
  font-size: clamp(1.05rem,1.7vw,1.35rem); line-height:1.1;
  margin-top:16px; color: var(--ink);
}
.ks-note{ font-size:13.5px; line-height:1.5; color: var(--mute); margin-top:6px; }

/* the blank one */
.ks-card--you .ks-n{ color: var(--ink); }
.ks-blank{
  aspect-ratio:4/5; background: var(--flare); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding: clamp(16px,1.8vw,24px);
}
.ks-card--you .ny-form{ margin:0; width:100%; display:grid; gap:12px; }
.ks-blank{ flex-direction:column; gap: clamp(18px,2vw,26px); text-align:center; }
.ks-blank-line{
  display:flex; align-items:baseline; justify-content:center; gap:8px;
  font-family: var(--f-display); font-size: clamp(1rem,1.5vw,1.2rem);
  color: var(--ink); width:100%;
}
.ks-blank-line .rule{
  flex:1 1 auto; min-width:40px; height:2px; background: var(--ink); opacity:.55;
  align-self:flex-end; margin-bottom:4px;
}
.btn-ink{ background: var(--ink); color:#fff; border:0; }
.btn-ink:hover{ background: var(--ink-deep); color:#fff; }

.ks-after{
  margin-top: clamp(26px,3vw,40px); padding-top: clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line);
}
.ks-after .ny-count{ margin-top:14px; }
.ks-foot{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  margin-top: clamp(18px,2vw,26px);
  font-size:12.5px; color: var(--faint);
}
.ks-foot .ks-plat{ color: var(--flare); letter-spacing:.14em; white-space:nowrap; }

@media (max-width:1040px){
  .ks-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width:860px){
  .ks-head{ grid-template-columns: minmax(0,1fr); align-items:start; }
}
@media (max-width:560px){
  .ks-cards{ grid-template-columns: minmax(0,1fr); }
  .ks-blank{ aspect-ratio:auto; padding: clamp(20px,6vw,28px); }
}


/* ============================================================
   NO ORPHANS
   Headlines balance, body copy avoids a single word on the last
   line. composure.js also ties the last two words together for
   browsers that do not support text-wrap yet.
   ============================================================ */
h1,h2,h3,h4,.ks-kind,.rit-note,.fd-stand{ text-wrap: balance; }
p,li,figcaption,dd,dt,.sub,.lede,.ks-note,.sf-note p,.sf-other{ text-wrap: pretty; }
.nowrap-tail{ white-space:nowrap; }


/* ============================================================
   HERO, DEVICE MODE
   No borrowed photography. The field, the approved lettering and
   the pack. Copy left, product right, rings running through both.
   ============================================================ */
.tagline{ display:block; width:100%; height:auto; }

.hero--device{ background: var(--ink); }
.hero--device .hero-media{
  /* full screen, less the utility bar and the nav that sit above it */
  --chrome: 84px;
  aspect-ratio:auto;
  min-height: calc(100vh - var(--chrome));
  min-height: calc(100svh - var(--chrome));
  display:grid; align-items:center;
}
.hero--device .hero-copy{
  position:relative; bottom:auto; z-index:2;
  display:grid; justify-items:center; text-align:center;
}
.hero--device .hero-tagline{
  width:min(100%, 880px); color:#fff; margin:18px 0 26px;
}
.hero--device .hero-copy p{ max-width:52ch; margin-inline:auto; }
.hero--device .hero-cta{ justify-content:center; }

/* on the full screen hero the markers sit at the foot, clear of the nav */
.hero--device .ring-hint{ top:auto; bottom: clamp(20px,3vw,32px); }
.hero--device .hero-slate{ top:auto; bottom: clamp(20px,3vw,32px); }
.hero--device .hero-copy{ margin-top: clamp(-40px,-3vw,0px); }

@media (max-width:860px){
  .hero--device .hero-media{ --chrome: 54px; min-height: calc(92svh - var(--chrome)); }
  .hero--device .hero-tagline{ width:min(100%, 560px); }
  .hero--device .hero-cta{ width:100%; display:grid; gap:10px; }
  .hero--device .hero-cta .btn{ width:100%; }
}


/* ============================================================
   NAME YOURS, THE FULL BAND
   The Kinds leaves a blank card. This is where it gets filled in.
   ============================================================ */
.name-band{ background: var(--paper); }
.ny-grid{
  display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(26px,4vw,64px); align-items:start;
}
.name-band h2{ max-width:12ch; }
.name-band .lede{ margin-top:16px; color: var(--mute); max-width:34ch; }
.name-band .ny-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.name-band .ny-field{ flex:1 1 280px; }
.name-band .ny-field input{ width:100%; }


/* ============================================================
   THE RATIO PANEL
   One treatment for the number wherever it appears.
   ============================================================ */

@media (max-width:620px){
  .hero-slate span{ display:none; }
  .ring-hint{ font-size:10px; letter-spacing:.14em; }
}

/* the curve, filling the column under the statement.
   Hover draws it: the steady line first, the spike chasing it. */
.fd-curve{ margin: clamp(22px,2.6vw,34px) 0 0; cursor:crosshair; }
.fd-curve-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-bottom:10px; border-bottom:1px solid rgba(27,10,66,.3);
}
.fd-curve-head .label{ color: var(--ink); opacity:.8; }
.fd-curve-head p{ font-size:13.5px; color: var(--ink); max-width:34ch; text-align:right; }
.fd-curve .curve{ display:block; width:100%; height:auto; margin-top:10px; overflow:visible; }
.curve .cv-steady, .curve .cv-spike{
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.curve .cv-spike{ stroke-dasharray: 9 7; }
.fd-curve.is-drawing .cv-steady{ animation: cvDraw 1150ms cubic-bezier(.3,.7,.3,1) both; }
.fd-curve.is-drawing .cv-spike{ animation: cvFade 900ms ease 420ms both; }
@keyframes cvDraw{ from{ stroke-dashoffset:100 } to{ stroke-dashoffset:0 } }
@keyframes cvFade{ from{ opacity:0; transform:translateY(8px) } to{ opacity:.55; transform:none } }
@media (prefers-reduced-motion: reduce){
  .fd-curve.is-drawing .cv-steady,
  .fd-curve.is-drawing .cv-spike{ animation:none; }
}
@media (max-width:860px){
  .fd-curve-head p{ text-align:left; }
}


/* ============================================================
   PRODUCT PAGE
   Rail, stage, buy column. The architecture every good retail
   page uses. The corners stay square, because this brand's do.
   ============================================================ */
.pdp-grid{
  display:grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: clamp(26px,4vw,72px); align-items:start;
}
.pdp-gallery{
  display:grid; grid-template-columns: 76px minmax(0,1fr); gap: clamp(10px,1.2vw,16px);
  position:sticky; top: clamp(84px,9vw,118px);
}
.pdp-rail{ list-style:none; margin:0; padding:0; display:grid; gap:10px; align-content:start; }
.pdp-thumb{
  display:block; width:100%; aspect-ratio:1; padding:0; cursor:pointer;
  background: var(--paper-2); border:1.5px solid transparent;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:contain; padding:8px; }
.pdp-thumb.is-on{ border-color: var(--ink); }
.pdp-thumb:hover{ border-color: rgba(27,10,66,.4); }

.pdp-stage{ position:relative; background: var(--paper-2); aspect-ratio:1; overflow:hidden; }
.pdp-shot{ position:absolute; inset:0; margin:0; opacity:0; transition: opacity 320ms ease; }
.pdp-shot.is-on{ opacity:1; }
.pdp-shot img{ width:100%; height:100%; object-fit:contain; padding: clamp(24px,4vw,56px); }
.pdp-nav{ position:absolute; right:14px; bottom:14px; display:flex; gap:8px; }
.pdp-nav button{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  background:#fff; border:1.5px solid rgba(27,10,66,.22); color: var(--ink);
}
.pdp-nav button:hover{ border-color: var(--ink); }

.pdp-title{ font-size: clamp(1.9rem,3.4vw,2.9rem); line-height:1; }
.pdp-sub{ color: var(--mute); margin-top:10px; font-size:15px; }
.pdp-price{ margin-top:16px; font-size:1.3rem; font-weight:700; color: var(--ink); }

.pdp-form{ margin-top: clamp(26px,3vw,40px); }

.pdp-opt-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:14px;
}
.pdp-opt-label{ font-weight:600; font-size:15px; color: var(--ink); }
.pdp-help{ font-size:13px; color: var(--mute); text-underline-offset:3px; }
.pdp-help:hover{ color: var(--ink); }

.pdp-options{
  border:0; padding:0; margin:0;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px;
}
.pdp-option{
  position:relative; display:grid; gap:4px; cursor:pointer;
  padding:16px 18px; min-height:76px; align-content:center;
  border:1.5px solid var(--line); background:#fff;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.pdp-option:hover{ border-color: rgba(27,10,66,.5); }
.pdp-option.is-on{ border-color: var(--ink); border-width:2px; padding:15px 17px; }
.pdp-option input{ position:absolute; opacity:0; pointer-events:none; }
.pdp-option .t{ font-weight:600; font-size:15px; line-height:1.2; }
.pdp-option .p{ font-size:14px; color: var(--mute); }
.pdp-option.is-on .p{ color: var(--ink); font-weight:600; }
.pdp-opt-note{ margin-top:12px; font-size:13px; color: var(--mute); }

.pdp-actions{ display:grid; gap:12px; margin-top:26px; }
.pdp-actions .btn{ width:100%; min-height:58px; display:grid; place-items:center; font-size:14px; }
.pdp-fine{ margin-top:14px; font-size:12.5px; color: var(--faint); text-align:center; }

.pdp-service{ margin: clamp(24px,3vw,34px) 0 0; display:grid; gap:14px; }
.pdp-service dt{ font-weight:600; font-size:14px; }
.pdp-service dd{ margin:3px 0 0; font-size:14px; color: var(--mute); }

.pdp-copy{ margin-top: clamp(24px,3vw,34px); }
.pdp-copy p{ font-size:15px; line-height:1.6; color: var(--ink); }
.pdp-copy ul{ list-style:none; margin:18px 0 0; padding:0; display:grid; }
.pdp-copy li{
  display:flex; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.pdp-copy li span:first-child{ color: var(--mute); }

.pdp-more{ margin-top: clamp(22px,2.6vw,30px); }
.pdp-panel{ border-top:1px solid var(--line); }
.pdp-panel:last-child{ border-bottom:1px solid var(--line); }
.pdp-panel summary{
  list-style:none; cursor:pointer; padding:18px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:600; font-size:15px;
}
.pdp-panel summary::-webkit-details-marker{ display:none; }
.pdp-panel summary svg{ transition: transform 240ms ease; flex:none; }
.pdp-panel[open] summary svg{ transform: rotate(180deg); }
.pdp-panel-body{ padding:0 0 20px; font-size:14px; line-height:1.6; color: var(--mute); max-width:60ch; }

@media (max-width:960px){
  .pdp-grid{ grid-template-columns: minmax(0,1fr); }
  .pdp-gallery{ position:static; }
}
@media (max-width:560px){
  .pdp-gallery{ grid-template-columns: minmax(0,1fr); }
  .pdp-rail{ grid-auto-flow:column; grid-auto-columns:64px; justify-content:start; }
}

/* the number sets like type: tight box, flush left with the column,
   the caption directly under it on the same left edge. */
.ratio-mark{ display:block; width:min(100%, 420px); height:auto; }
.ratio-key{ margin-top:14px; color: var(--mute); letter-spacing:.2em; }


/* ============================================================
   THE READ BACK
   Somebody names their kind, the page says it back to them and
   shows what is in the pouch against it. The recognition is
   theirs. The formula line is the same for everyone, because a
   supplement does not get to make a claim about one person.
   ============================================================ */
.ny-card{
  position:relative; overflow:hidden;
  margin: clamp(18px,2.2vw,26px) 0 clamp(20px,2.4vw,28px);
  background: var(--paper-2); border:1.5px solid var(--ink);
  padding: clamp(20px,2.4vw,30px);
}
.ny-card .ny-rings{ position:absolute; inset:0; width:100%; height:100%; opacity:.4; }
.ny-card-in{ position:relative; }
.ny-card.is-in .ny-card-in > *{
  animation: nyIn 540ms cubic-bezier(.16,.8,.24,1) both;
}
.ny-card.is-in .ny-card-in > *:nth-child(2){ animation-delay:60ms; }
.ny-card.is-in .ny-card-in > *:nth-child(3){ animation-delay:120ms; }
.ny-card.is-in .ny-card-in > *:nth-child(4){ animation-delay:180ms; }
.ny-card.is-in .ny-card-in > *:nth-child(5){ animation-delay:240ms; }
@keyframes nyIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.ny-named{
  font-family: var(--f-display); text-transform:none;
  font-size: clamp(1.5rem,2.8vw,2.1rem); line-height:1.05;
  margin-top:12px; color: var(--ink);
}
.ny-look{
  margin-top:10px; font-size:15px; line-height:1.55; color: var(--ink);
  max-width:46ch;
}
.ny-read{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(14px,1.8vw,24px);
  margin: clamp(18px,2.2vw,26px) 0 0;
  padding-top: clamp(14px,1.8vw,20px);
  border-top:1px solid rgba(27,10,66,.25);
}
.ny-read dt{
  font-family: var(--f-display); text-transform:uppercase;
  font-size:11px; letter-spacing:.16em; color: var(--flare);
}
.ny-read dd{ margin:8px 0 0; font-size:13.5px; line-height:1.55; color: var(--ink); }
.ny-card-cta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top: clamp(18px,2.2vw,26px);
}
/* the way back in for somebody who already has a page. A button, because a
   link in body copy is a thing people read rather than a thing they press. */
.ny-standing{ margin-top: clamp(24px,3vw,34px); }
.ny-standing .label{ color: var(--mute); margin-bottom:12px; }
.ny-open{
  display:inline-flex; align-items:center; gap:12px;
  min-height:54px; padding-inline: clamp(20px,2.2vw,28px);
}
.ny-open svg{ color: var(--flare); transition: transform var(--t-fast); }
.ny-open:hover svg{ transform: translateX(4px); }
.ny-card-cta .btn{ min-height:48px; display:inline-grid; place-items:center; }
.ny-again{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13.5px; color: var(--mute);
  text-decoration:underline; text-underline-offset:3px;
}
.ny-again:hover{ color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  .ny-card.is-in .ny-card-in > *{ animation:none; }
}
@media (max-width:560px){
  .ny-read{ grid-template-columns: minmax(0,1fr); }
}


/* ============================================================
   THE INGREDIENT READ OUT
   Full disclosure means more than printing the numbers. Hover a
   row and the panel says what the thing actually is and why it
   is in the scoop. Purple on the orange, per the colourway rule.
   ============================================================ */
.fd-headline{ display:flex; align-items:flex-end; gap: clamp(16px,2.2vw,30px); flex-wrap:wrap; }
.fd-hint{
  display:inline-flex; align-items:center; gap:9px;
  padding-bottom: clamp(10px,1.2vw,16px);
  color: var(--ink); opacity:.8;
}
.fd-hint .label{ letter-spacing:.16em; white-space:nowrap; }
.fd-hint-mark{
  width:28px; height:28px; flex:none; border-radius:999px;
  border:1.5px solid var(--ink); display:grid; place-items:center;
  animation: hintPulse 3.2s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{ transform:none; opacity:.75 }
  50%{ transform:translate(1.5px,-1.5px); opacity:1 }
}

.sf-table tbody tr.is-ing{ cursor:help; transition: background var(--t-fast); }
.sf-table tbody tr.is-ing th{ position:relative; }
.sf-table tbody tr.is-ing th::after{
  content:""; position:absolute; left:0; bottom:4px; height:1px; width:0;
  background: var(--ink); opacity:.5; transition: width 260ms cubic-bezier(.16,.8,.24,1);
}
.sf-table tbody tr.is-ing:hover,
.sf-table tbody tr.is-ing:focus-visible{ background: rgba(27,10,66,.07); outline:none; }
.sf-table tbody tr.is-ing:hover th::after,
.sf-table tbody tr.is-ing:focus-visible th::after{ width:100%; }

.sf-pop{
  position:fixed; z-index:60; width:min(330px, calc(100vw - 32px));
  background: var(--ink); color:#fff;
  padding: 18px 20px 20px; border-radius:3px;
  box-shadow: 0 22px 50px rgba(12,4,26,.3);
  opacity:0; transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.16,.8,.24,1);
  pointer-events:none;
}
.sf-pop.is-on{ opacity:1; transform:none; }
/* narrow screens: the card has nowhere to stand beside the panel, so it
   comes up off the bottom edge instead of landing on top of the row */
.sf-pop.is-sheet{
  left:16px !important; right:16px; top:auto !important; bottom:16px;
  width:auto; transform: translateY(16px);
}
.sf-pop.is-sheet.is-on{ transform:none; }
.sf-pop-aka{ color: var(--flare); letter-spacing:.16em; }
.sf-pop-aka:empty{ display:none; }
.sf-pop-name{
  font-family: var(--f-display); text-transform:none;
  font-size:1.1rem; line-height:1.15; margin-top:8px;
}
.sf-pop-amount{
  margin-top:4px; font-size:13px; color: rgba(255,255,255,.6);
  letter-spacing:.04em;
}
.sf-pop-note{
  margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.2);
  font-size:13.5px; line-height:1.55; color: rgba(255,255,255,.88);
}

@media (prefers-reduced-motion: reduce){
  .fd-hint-mark{ animation:none; }
  .sf-pop{ transition:none; }
  .sf-table tbody tr.is-ing th::after{ transition:none; }
}
@media (max-width:860px){
  .fd-headline{ align-items:flex-start; flex-direction:column; gap:14px; }
  .fd-hint{ padding-bottom:0; }
}

/* ============================================================
   THE KIT
   A capsule rather than a catalogue. Three across, then two,
   so the row break is a decision and not a leftover. The method
   line sits under every piece because the method is the brand
   decision: purple is embroidered, print stays on light ground.
   ============================================================ */
.kit{ background: var(--paper); }
.kit-head{
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr);
  gap: clamp(18px,3vw,56px); align-items:end;
}
.kit-head h2{ max-width:13ch; }
.kit-head .lede{ color: var(--mute); }

.kit-grid{
  list-style:none; margin: clamp(30px,4vw,54px) 0 0; padding:0;
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: clamp(14px,1.6vw,24px);
}
.kit-card{ grid-column: span 2; min-width:0; }
.kit-card:nth-child(4), .kit-card:nth-child(5){ grid-column: span 3; }
.kit-card--wide{ grid-column: span 3; }

.kit-link{ display:block; color:inherit; text-decoration:none; }
.kit-art{
  margin:0; aspect-ratio: 9/11; overflow:hidden;
  background: var(--paper-2); border:1px solid var(--line-soft);
}
.kit-art img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform 700ms cubic-bezier(.16,.8,.24,1);
}
.kit-link:hover .kit-art img{ transform:scale(1.03); }

.kit-meta{
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:baseline; gap:6px 16px; margin-top:16px;
}
/* explicit placement, because the spec line sits between the name and the
   price in the markup and would otherwise take the first row to itself */
.kit-name{ grid-area:1 / 1; }
.kit-price{ grid-area:1 / 2; }
.kit-spec{ grid-area:2 / 1 / 3 / -1; }
.kit-name{
  font-family: var(--f-display); text-transform:none;
  font-size: clamp(1rem,1.5vw,1.25rem); line-height:1.1; color: var(--ink);
  position:relative; display:inline-block;
}
.kit-name::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px;
  background: var(--ink); transform:scaleX(0); transform-origin:left;
  transition: transform 420ms cubic-bezier(.16,.8,.24,1);
}
.kit-link:hover .kit-name::after{ transform:scaleX(1); }
.kit-price{ font-size:14px; color: var(--ink); justify-self:end; }
.kit-spec{
  font-size:11px; letter-spacing:.14em;
  color: var(--flare); margin-top:2px;
}

.kit-foot{
  margin-top: clamp(30px,4vw,54px); padding-top: clamp(18px,2vw,28px);
  border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(18px,3vw,48px); flex-wrap:wrap;
}
.kit-note{ font-size:13.5px; line-height:1.55; color: var(--mute); max-width:64ch; }

@media (max-width:1024px){
  .kit-card, .kit-card:nth-child(4), .kit-card:nth-child(5),
  .kit-card--wide{ grid-column: span 3; }
}
@media (max-width:860px){
  .kit-head{ grid-template-columns:1fr; align-items:start; }
  .kit-head h2{ max-width:none; }
}
@media (max-width:560px){
  .kit-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kit-card, .kit-card:nth-child(4), .kit-card:nth-child(5),
  .kit-card--wide{ grid-column: span 2; }
}


/* ============================================================
   THE JOURNAL
   The Name Yours concept page, brought into the theme. Scoped
   under .jrn so its phone-screen styling cannot reach the rest
   of the site, and re-cut to use the theme's own type tokens
   rather than the webfonts the concept was drawn in.
   ============================================================ */
.jrn{
  --cream:#EFEAE0;
  --on-ink:rgba(255,255,255,.66);
}
.jrn-intro{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,64px); align-items:end;
}
.jrn h2{ text-wrap:balance; }
.jrn .stage{background:var(--paper-2)}
.jrn .stage-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.jrn .phone-wrap{display:flex;justify-content:center}
.jrn .phone{
  width:min(340px,88vw); aspect-ratio:390/800; background:var(--ink-deep);
  border-radius:44px; padding:11px;
  box-shadow:0 40px 80px -50px rgba(27,10,66,.85), 0 0 0 1.5px rgba(27,10,66,.14);
  position:relative;
}
.jrn .phone .screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:var(--ink);display:flex;flex-direction:column}
.jrn .phone .notch{position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:96px;height:24px;background:var(--ink-deep);border-radius:99px;z-index:9}
.jrn .sbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px 6px;
  color:rgba(255,255,255,.62);font-size:11px;font-variant-numeric:tabular-nums;flex:none}
.jrn .view{flex:1;overflow-y:auto;padding:10px 20px 22px;color:#fff;display:none;scrollbar-width:none}
.jrn .view::-webkit-scrollbar{display:none}
.jrn .view.on{display:block;animation:fade 320ms cubic-bezier(.16,.8,.24,1)}
.jrn @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jrn .v-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.jrn .v-head .mark{height:14px}
.jrn .chip-btn{background:none;border:0;color:rgba(255,255,255,.55);font:inherit;font-size:12px;cursor:pointer;padding:4px}
.jrn .big{font-family:var(--f-display);font-variation-settings:"wdth" 108,"wght" 800;
  text-transform:uppercase;font-size:1.5rem;line-height:1.02;margin-bottom:12px}
.jrn .small{font-size:13.5px;line-height:1.5;color:var(--on-ink)}
.jrn .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 22px;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--f-display);font-variation-settings:"wdth" 104,"wght" 800;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:background 180ms,transform 180ms}
.jrn .btn:active{transform:translateY(1px)}
.jrn .btn-flare{background:var(--flare);color:var(--ink)}
.jrn .btn-flare:hover{background:#FF5C2B}
.jrn .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.jrn .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff}
.jrn .btn-row{display:grid;gap:9px;margin-top:18px}
.jrn .field{display:block;margin:20px 0 6px}
.jrn .cap{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);
  font-family:var(--f-display);font-weight:700}
.jrn .line-in{display:flex;align-items:baseline;gap:8px;margin-top:10px;
  font-family:var(--f-display);font-variation-settings:"wdth" 100,"wght" 760;
  font-size:1.18rem;color:#fff}
.jrn .line-in input{flex:1;min-width:40px;background:transparent;border:0;border-bottom:2px solid var(--flare);
  color:#fff;font:inherit;padding:2px 2px 6px;outline:none}
.jrn .line-in input::placeholder{color:rgba(255,255,255,.34)}
.jrn .suggest{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.jrn .suggest button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.86);font:inherit;font-size:12.5px;padding:7px 12px;cursor:pointer;
  transition:border-color 180ms,background 180ms}
.jrn .suggest button:hover{border-color:var(--flare);background:rgba(250,71,20,.14)}
.jrn input.text, .jrn textarea.text{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  color:#fff;font:inherit;font-size:15px;padding:13px 14px;margin-top:10px;outline:none}
.jrn textarea.text{min-height:112px;resize:vertical;line-height:1.5}
.jrn input.text:focus, .jrn textarea.text:focus{border-color:var(--flare)}
.jrn input.text::placeholder, .jrn textarea.text::placeholder{color:rgba(255,255,255,.35)}
.jrn .code{display:flex;gap:9px;margin-top:14px}
.jrn .code span{flex:1;aspect-ratio:3/4;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.24);font-size:1.3rem;font-variant-numeric:tabular-nums;
  font-family:var(--f-display);font-weight:800}
.jrn .code span.filled{border-color:var(--flare);color:#fff}
.jrn .identity{border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:18px;margin-bottom:18px}
.jrn .identity .kind{font-family:var(--f-display);font-variation-settings:"wdth" 96,"wght" 770;
  font-size:1.55rem;line-height:1.08;color:#fff}
.jrn .identity .meta{display:flex;gap:16px;margin-top:12px;color:rgba(255,255,255,.55);font-size:12px}
.jrn .identity .meta b{color:var(--flare);font-weight:700}
.jrn .ritual{display:flex;border:1px solid rgba(255,255,255,.16);margin-bottom:20px}
.jrn .ritual div{flex:1;padding:11px 10px;border-right:1px solid rgba(255,255,255,.16);text-align:center}
.jrn .ritual div:last-child{border-right:0}
.jrn .ritual .v{font-family:var(--f-display);font-weight:800;font-size:1rem}
.jrn .ritual .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:3px}
.jrn .entry{background:var(--cream);color:var(--ink);padding:15px 16px;margin-bottom:10px}
.jrn .entry .when{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  font-family:var(--f-display);font-weight:700}
.jrn .entry p{margin-top:8px;font-size:14.5px;line-height:1.5}
.jrn .entry .dots{display:flex;gap:4px;margin-top:11px}
.jrn .entry .dots i{width:7px;height:7px;border-radius:99px;background:rgba(27,10,66,.18)}
.jrn .entry .dots i.on{background:var(--flare)}
.jrn .entry.shared{box-shadow:inset 3px 0 0 var(--flare)}
.jrn .entry .tag{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--flare);
  font-family:var(--f-display);font-weight:700}
.jrn .fab{position:absolute;left:20px;right:20px;bottom:18px;z-index:8;width:auto}
.jrn .rate{display:flex;gap:7px;margin-top:12px}
.jrn .rate button{flex:1;padding:11px 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);font:inherit;font-size:13px;cursor:pointer}
.jrn .rate button.on{background:var(--flare);border-color:var(--flare);color:var(--ink);font-weight:700}
.jrn .toggle{display:flex;align-items:flex-start;gap:11px;margin-top:18px;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);padding:13px 14px}
.jrn .toggle input{margin:3px 0 0;accent-color:var(--flare);width:16px;height:16px;flex:none}
.jrn .toggle .t{font-size:13.5px;color:#fff}
.jrn .toggle .d{font-size:12px;color:rgba(255,255,255,.5);margin-top:3px;display:block}
.jrn .privacy-note{display:flex;align-items:center;gap:8px;margin-top:16px;
  color:rgba(255,255,255,.44);font-size:11.5px}
.jrn .flow{list-style:none;margin:0;padding:0;display:grid}
.jrn .flow li{border-top:1px solid rgba(27,10,66,.14)}
.jrn .flow li:last-child{border-bottom:1px solid rgba(27,10,66,.14)}
.jrn .flow button{width:100%;display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:baseline;
  background:none;border:0;text-align:left;font:inherit;color:inherit;padding:15px 0;cursor:pointer;
  transition:padding 180ms}
.jrn .flow .n{font-family:var(--f-display);font-weight:700;font-size:11px;
  letter-spacing:.1em;color:var(--faint)}
.jrn .flow .t{font-family:var(--f-display);font-variation-settings:"wdth" 106,"wght" 780;
  text-transform:uppercase;font-size:1.05rem;display:block}
.jrn .flow .d{display:block;color:var(--mute);font-size:14px;margin-top:4px;max-width:44ch}
.jrn .flow li.on .n{color:var(--flare)}
.jrn .flow li.on{box-shadow:inset 3px 0 0 var(--flare)}
.jrn .flow li.on button{padding-left:16px}
.jrn .desk{background:var(--ink);color:#fff}
.jrn .desk .eyebrow{color:var(--flare)}
.jrn .desk-app{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:0;
  margin-top:clamp(26px,3.4vw,44px);border:1px solid rgba(255,255,255,.16)}
.jrn .desk-side{padding:clamp(22px,2.6vw,32px);border-right:1px solid rgba(255,255,255,.16)}
.jrn .desk-main{padding:clamp(22px,2.6vw,32px)}
.jrn .desk-side .kind{font-family:var(--f-display);font-variation-settings:"wdth" 96,"wght" 770;
  font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.06}
.jrn .stat{display:flex;gap:26px;margin-top:20px}
.jrn .stat .v{font-family:var(--f-display);font-weight:850;font-size:1.9rem;line-height:1;
  font-variant-numeric:tabular-nums}
.jrn .stat .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:6px}
.jrn .desk-entries{display:grid;gap:10px}
.jrn .compose{border:1px solid rgba(255,255,255,.2);padding:16px;margin-bottom:18px}
.jrn .compose .row{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap}
.jrn .compose .btn{width:auto;padding:13px 24px}
@media (max-width:1000px){
.jrn-intro, .jrn .stage-grid, .jrn .desk-app{grid-template-columns:minmax(0,1fr)}
.jrn .desk-side{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
}

.jrn .jrn-dot{ color: var(--flare); }
.jrn .jrn-flow-head{ max-width:14ch; }
.jrn .jrn-hint{ margin-top:22px; font-size:14.5px; }
.jrn .jrn-desk-head{ max-width:18ch; }
.jrn .jrn-desk-lede{ color: rgba(255,255,255,.66); margin-top:16px; }
.jrn .jrn-desk-ritual{ margin-top:24px; }
.jrn .jrn-desk-note{ margin-top:20px; }
.jrn .jrn-desk-share{ margin:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.jrn .jrn-desk-share input{ accent-color: var(--flare); }
.jrn .flow{ margin-top: clamp(22px,3vw,34px); }
.jrn .notes-grid{ margin-top: clamp(22px,3vw,34px); }
.jrn-close{ background: var(--paper-2); border-top:1px solid var(--line); }
.jrn .jrn-close-head{ max-width:18ch; }
.jrn .jrn-close-lede{ margin-top:16px; max-width:60ch; }
.jrn .jrn-close-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: clamp(22px,2.6vw,32px); }
/* the journal's own buttons are drawn for the dark phone screen, so the
   page-level buttons have to win back their own styling */
.jrn .jrn-close-row .btn{ width:auto; }