@font-face { font-family: "Bricolage"; src: url("assets/fonts/bricolage.ttf") format("truetype"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("assets/fonts/plexmono-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("assets/fonts/plexmono-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }

@property --x { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --ink: #15131a;
  --ink-2: #211e29;
  --ink-3: #2d2937;
  --milk: #fff6ec;
  --milk-dim: #cfc6d6;
  --tang: #ff6a2b;
  --tang-d: #b8410f;
  --pink: #ff7ac8;
  --pink-d: #b9407f;
  --teal: #19d3c5;
  --teal-d: #0c8a80;
  --sun: #ffd23f;
  --sun-d: #b58d0b;
  --grape: #8b6dff;
  --grape-d: #5537c6;
  --display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .9, .25, 1.15);
  --gutter: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--milk);
  font-family: var(--display);
  font-variation-settings: "opsz" 14;
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; line-height: 1.55; }
.label { text-transform: uppercase; letter-spacing: .12em; color: var(--milk-dim); margin: 0 0 12px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--sun); color: var(--ink); padding: 8px 12px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

/* ---------- extruded chip: the house material ---------- */
.chip {
  display: inline-block;
  background: var(--tang);
  color: var(--ink);
  padding: .02em .22em .06em;
  border-radius: .16em;
  box-shadow:
    0 1px 0 var(--tang-d), 0 2px 0 var(--tang-d), 0 3px 0 var(--tang-d), 0 4px 0 var(--tang-d),
    0 5px 0 var(--tang-d), 0 12px 18px -6px rgba(0,0,0,.55);
  transform: translateY(-3px);
}

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px var(--gutter);
}
.logo {
  font-weight: 800; font-size: 28px; letter-spacing: -.02em; text-decoration: none;
  font-stretch: 80%; line-height: 1;
}
.logo .chip { font-size: 25px; margin-right: 1px; }
.top nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); font-size: 15px; font-weight: 600; }
.top nav a { text-decoration: none; }
.top nav a:not(.pill):hover { color: var(--sun); }
.pill {
  border: 2px solid var(--milk); padding: 7px 16px; border-radius: 999px;
  transition: background .15s, color .15s;
}
.pill:hover { background: var(--milk); color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px);
  padding: clamp(20px, 5vw, 64px) var(--gutter) 40px;
  align-items: start;
}
.kicker { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--milk-dim); margin: 0 0 18px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 2px 0 var(--teal-d); flex: none; }
h1 {
  font-size: clamp(76px, 10.4vw, 168px);
  font-weight: 800; font-stretch: 75%;
  font-variation-settings: "opsz" 96;
  line-height: .86; letter-spacing: -.012em;
  margin: 0 0 28px;
}
h1 em, h2 em { font-style: normal; color: var(--tang); }
h1 em {
  display: inline-block;
  text-shadow: 0 1px 0 var(--tang-d), 0 2px 0 var(--tang-d), 0 3px 0 var(--tang-d), 0 4px 0 var(--tang-d), 0 5px 0 var(--tang-d), 0 6px 0 var(--tang-d), 0 7px 0 var(--tang-d), 0 16px 24px rgba(0,0,0,.5);
  transform: translateY(-4px);
}
.lede { font-size: clamp(18px, 1.5vw, 21px); max-width: 30em; color: var(--milk-dim); margin: 0 0 36px; }

.ink-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ink-set {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--ink-2); border: 2px solid var(--ink-3); border-radius: 18px;
  padding: 14px 16px 12px; cursor: pointer;
  box-shadow: 0 6px 0 #0b0a0e;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s;
}
.ink-set:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #0b0a0e; }
.ink-set:active { transform: translateY(4px); box-shadow: 0 2px 0 #0b0a0e; }
.ink-set[aria-pressed="true"] { border-color: var(--milk); background: var(--ink-3); }
.ink-name { font-weight: 700; font-size: 15px; }
.spools { display: flex; }
.spools i, .art-spools i, .legend .spool {
  --c: #888;
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background:
    radial-gradient(circle, var(--ink) 0 18%, #e8e2d8 19% 27%, transparent 28%),
    repeating-radial-gradient(circle, var(--c) 0 1.5px, color-mix(in oklab, var(--c) 82%, black) 1.5px 2.5px);
  box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--c) 60%, black), 0 0 0 2px rgba(255,246,236,.22), 0 3px 0 rgba(0,0,0,.45);
}
.spools i + i { margin-left: -8px; }

/* ---------- 3D stage ---------- */
.stage-wrap { margin: 0; }
.stage {
  position: relative;
  height: clamp(420px, 46vw, 640px);
  perspective: 1600px;
  perspective-origin: 50% 20%;
  display: grid; place-items: center;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 50% 100%, #2a2535 0%, var(--ink-2) 55%, var(--ink-2) 100%);
  border: 2px solid var(--ink-3);
  cursor: grab;
  touch-action: pan-y;
  overflow: hidden;
  user-select: none;
}
.stage::before { /* studio floor dots */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,246,236,.07) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  pointer-events: none;
}
.scene {
  --x: 0;
  --w: 460px; --h: 307px;
  position: relative;
  width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: translateY(calc(40px + var(--x) * 30px)) rotateX(var(--tilt, 58deg)) rotateZ(var(--turn, -34deg));
  transition: --x .95s var(--ease), transform .45s var(--ease);
}
.stage.dragging { cursor: grabbing; }
.stage.dragging .scene, .stage.scrub .scene { transition: none; }
.stage.intro .scene { transition: --x 1.6s cubic-bezier(.2,.8,.2,1); }
.stage:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.scene .fallback { width: 100%; height: 100%; object-fit: cover; }
.js .scene .fallback { display: none; }
.slab, .plate { position: absolute; inset: 0; transform-style: preserve-3d; }
.slab img, .plate img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.slab .face {
  position: absolute; inset: -10px; border-radius: 6px;
  background: #ebe4d8;
}
.plate {
  transform: translateZ(calc(8px + var(--i) * var(--x) * var(--gap, 64px) + var(--lift)));
  transition: --lift .3s var(--ease);
}
.plate.lifted { --lift: 26px; }
.plate-label {
  position: absolute; left: 100%; top: 0;
  margin-left: 22px;
  font-family: var(--mono); font-size: 11px; white-space: nowrap;
  color: var(--milk); background: rgba(21,19,26,.85); border-radius: 6px; padding: 3px 7px;
  transform-origin: left top;
  transform: translateZ(9px) rotateZ(calc(var(--turn, -34deg) * -1)) rotateX(calc(var(--tilt, 58deg) * -1));
  opacity: calc((var(--x) - .35) * 3);
  pointer-events: none;
}
.drag-hint {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; margin: 0;
  color: var(--milk-dim); opacity: .7;
}

.controls { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 22px 0 14px; }
.big-btn {
  border: 0; padding: 0; background: var(--tang-d); border-radius: 16px; cursor: pointer;
}
.btn-face {
  display: block; padding: 15px 24px; border-radius: 16px;
  background: var(--tang); color: var(--ink);
  font-weight: 800; font-size: 18px; font-stretch: 85%;
  transform: translateY(-7px);
  transition: transform .14s var(--ease);
}
.big-btn:hover .btn-face { transform: translateY(-9px); }
.big-btn:active .btn-face { transform: translateY(-1px); }
.slider { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 240px; color: var(--milk-dim); }
input[type="range"] { accent-color: var(--tang); }
.slider input { flex: 1; }

.legend {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.legend li {
  display: flex; align-items: center; gap: 10px;
  background: var(--ink-2); border: 2px solid var(--ink-3); border-radius: 14px; padding: 8px 10px;
  cursor: default; transition: border-color .15s, transform .15s var(--ease);
}
.legend li:hover, .legend li:focus-visible { border-color: var(--milk); transform: translateY(-2px); }
.legend .spool { width: 26px; height: 26px; }
.legend b { display: block; font-size: 14px; }
.legend small { display: block; font-family: var(--mono); font-size: 11px; color: var(--milk-dim); }
.cap { color: var(--milk-dim); margin: 0; max-width: 64em; }
.cap span { display: block; margin-top: 4px; }

/* ---------- stats ---------- */
.stats {
  display: flex; flex-wrap: wrap; gap: 14px 12px;
  padding: 28px var(--gutter) 64px;
}
.stat {
  font-size: clamp(17px, 1.6vw, 22px); font-weight: 600;
  padding: 10px 18px 11px; border-radius: 999px; color: var(--ink);
  transform: rotate(var(--r, 0deg));
}
.stat b { font-weight: 800; font-stretch: 80%; margin-right: 4px; }
.s1 { background: var(--sun); box-shadow: 0 5px 0 var(--sun-d); --r: -2deg; }
.s2 { background: var(--milk); box-shadow: 0 5px 0 #a39a8e; --r: 1.5deg; }
.s3 { background: var(--pink); box-shadow: 0 5px 0 var(--pink-d); --r: -1deg; }
.s4 { background: var(--teal); box-shadow: 0 5px 0 var(--teal-d); --r: 2deg; }
.s5 { background: var(--grape); color: var(--ink); box-shadow: 0 5px 0 var(--grape-d); --r: -1.5deg; }

/* ---------- how ---------- */
h2 {
  font-size: clamp(46px, 6.6vw, 104px); font-weight: 800; font-stretch: 75%;
  font-variation-settings: "opsz" 96;
  line-height: .9; letter-spacing: -.01em; margin: 0 0 40px;
}
h3 { font-size: 28px; font-weight: 800; font-stretch: 85%; letter-spacing: -.01em; line-height: 1.05; margin: 20px 0 10px; }
.how { padding: 72px var(--gutter) 96px; background: var(--milk); color: var(--ink); border-radius: 40px 40px 0 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.step {
  position: relative; border-radius: 28px; padding: 26px 26px 30px;
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}
.step p { margin: 0; font-size: 17px; }
.step-1 { background: var(--sun); transform: rotate(-1.2deg); }
.step-2 { background: var(--pink); transform: translateY(34px) rotate(.8deg); }
.step-3 { background: var(--teal); transform: translateY(8px) rotate(-.6deg); }
.num {
  position: absolute; top: -22px; right: 22px;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--milk); font-weight: 800; font-size: 26px;
  box-shadow: 0 5px 0 #000;
}
.step-art { height: 170px; border-radius: 16px; border: 3px solid var(--ink); overflow: hidden; background: var(--ink); }
.art-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.art-spools { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff3fa; }
.art-spools i { width: 64px; height: 64px; box-shadow: inset 0 0 0 5px color-mix(in oklab, var(--c) 60%, black), 0 6px 0 rgba(0,0,0,.35); }
.art-stack { position: relative; perspective: 700px; background: #e7fbf8; display: grid; place-items: center; }
.art-stack .tray { position: absolute; width: 58%; aspect-ratio: 1024 / 679; left: 21%; top: 30%; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-34deg); }
.art-stack .tray::before { content: ""; position: absolute; inset: -6px; border-radius: 4px; background: #ebe4d8; box-shadow: 0 3px 0 #a39a8e; }
.art-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translateZ(calc(2px + var(--i) * 16px));
  transition: transform .45s var(--ease);
}
.step-3:hover .art-stack img, .step-3:focus-within .art-stack img { transform: translateZ(2px); }

/* ---------- compare ---------- */
.compare { background: var(--milk); color: var(--ink); padding: 40px var(--gutter) 100px; }
.compare-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.compare-head h2 { margin: 0; }
.compare-head h2 em { color: var(--grape); }
.compare-head p { margin: 0; font-size: 19px; max-width: 30em; }
.pair { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.frame { margin: 0; }
.frame figcaption { margin-top: 14px; color: #4b4552; }
.cmp {
  position: relative; overflow: hidden; border-radius: 24px;
  border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--grape);
  background: var(--ink);
}
.f-tall .cmp { box-shadow: 10px 10px 0 var(--tang); }
.cmp img { width: 100%; height: auto; }
.cmp .after { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 0 0 var(--split)); }
.cmp .handle {
  position: absolute; top: 0; bottom: 0; left: var(--split); width: 4px; margin-left: -2px; background: var(--milk);
  pointer-events: none;
}
.cmp .handle::after {
  content: "↔"; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sun); color: var(--ink); font-weight: 800; border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp:has(input:focus-visible) { outline: 3px solid var(--grape); outline-offset: 4px; }
.tag { background: var(--ink); color: var(--milk); padding: 1px 7px; border-radius: 5px; }
.tag.t2 { background: var(--grape); color: var(--ink); }
.honest { margin: 36px 0 0; color: #4b4552; max-width: 60em; }

/* ---------- truth ---------- */
.truth { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; padding: 96px var(--gutter) 80px; }
.truth-card { border-radius: 28px; padding: 34px 36px; }
.truth-card h2 { font-size: clamp(40px, 4.6vw, 72px); margin-bottom: 18px; }
.truth-card h3 { font-size: 34px; margin: 0 0 14px; }
.truth-card p { margin: 0; font-size: 20px; max-width: 28em; }
.yes { background: var(--grape); color: var(--ink); box-shadow: 0 10px 0 var(--grape-d); }
.no { background: var(--ink-2); border: 2px dashed #4a4456; color: var(--milk-dim); align-self: end; }
.no h3 { color: var(--milk); text-decoration: line-through; text-decoration-color: var(--tang); text-decoration-thickness: 3px; }

/* ---------- beta ---------- */
.beta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px);
  margin: 0 var(--gutter); padding: clamp(32px, 5vw, 64px);
  background: var(--tang); color: var(--ink); border-radius: 36px;
  box-shadow: 0 12px 0 var(--tang-d);
}
.beta .label { color: var(--ink); }
.beta h2 { margin-bottom: 22px; }
.beta-copy p { font-size: 19px; max-width: 26em; }
.beta-copy p.label { font-size: 12.5px; }
.text-link { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kit { background: var(--ink); color: var(--milk); border-radius: 24px; padding: 26px; }
.kit h3 { font-family: var(--mono); font-size: 12.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 18px; color: var(--milk-dim); }
.sprue { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.sprue::before { /* the runner that holds the parts */
  content: ""; position: absolute; left: 0; top: 18px; bottom: 30px; width: 6px; border-radius: 3px; background: var(--ink-3);
}
.sprue li {
  position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--ink-2); border: 2px solid var(--ink-3); border-radius: 14px;
}
.sprue li::before { /* gate connecting part to runner */
  content: ""; position: absolute; left: -20px; top: 50%; width: 18px; height: 5px; margin-top: -2.5px; background: var(--ink-3);
}
.part {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--sun); color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 16px;
  box-shadow: 0 3px 0 var(--sun-d);
}
.sprue li:nth-child(2) .part { background: var(--pink); box-shadow: 0 3px 0 var(--pink-d); }
.sprue li:nth-child(3) .part { background: var(--teal); box-shadow: 0 3px 0 var(--teal-d); }
.sprue li:nth-child(4) .part { background: var(--grape); color: var(--milk); box-shadow: 0 3px 0 var(--grape-d); }
.sprue b { font-size: 17px; }
.sprue small { font-family: var(--mono); font-size: 11.5px; color: var(--milk-dim); }
.sprue .gone { border-style: dashed; background: transparent; }
.sprue .gone b { text-decoration: line-through; text-decoration-color: var(--tang); text-decoration-thickness: 2px; }
.sprue .gone .part { background: transparent; color: var(--milk-dim); border: 2px dashed var(--milk-dim); box-shadow: none; }

/* ---------- footer ---------- */
.foot { padding: 110px var(--gutter) 40px; }
.foot-logo {
  font-weight: 800; font-stretch: 75%; letter-spacing: -.04em; line-height: .8;
  font-size: clamp(88px, 22vw, 340px); margin-bottom: 44px;
}
.foot-logo .chip { border-radius: .08em; box-shadow: 0 .02em 0 var(--tang-d), 0 .04em 0 var(--tang-d), 0 .06em 0 var(--tang-d), 0 .08em 0 var(--tang-d), 0 .1em 0 var(--tang-d), 0 .2em .2em rgba(0,0,0,.5); transform: translateY(-.06em); padding: 0 .08em .02em; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; border-top: 2px solid var(--ink-3); padding-top: 22px; color: var(--milk-dim); font-size: 15px; }
.foot-row nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot-row a { text-decoration: none; font-weight: 600; color: var(--milk); }
.foot-row a:hover { color: var(--sun); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .step-2, .step-3 { transform: rotate(.6deg); }
  .compare-head, .pair, .truth, .beta { grid-template-columns: 1fr; }
  .f-tall { max-width: 360px; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .top nav a:not(.pill) { display: none; }
  .stage { height: 380px; border-radius: 22px; }
  .how { border-radius: 28px 28px 0 0; }
  .beta { margin: 0 12px; }
  .truth-card { padding: 26px 24px; }
  .kit { padding: 18px; }
  .ink-row { flex-wrap: nowrap; gap: 8px; }
  .ink-set { flex: 1 1 0; min-width: 0; padding: 12px 10px 10px; }
  .ink-set .spools i { width: 22px; height: 22px; }
  .ink-set .spools i + i { margin-left: -7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .scene, .plate { transition: none !important; }
}

/* download button on the orange card: dark face so it doesn't vanish */
a.big-btn { display: inline-block; text-decoration: none; }
.beta .big-btn.dl { margin: 8px 24px 18px 0; background: #000; }
.beta .big-btn.dl .btn-face { background: var(--ink); color: var(--milk); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: -8px 0 36px; }
.hero-actions .big-btn { margin-top: 7px; }
.hero-actions .text-link { color: var(--milk); }

/* ---------- questions ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 28px 64px; padding: 20px var(--gutter) 110px; }
.faq h2 { margin: 0; }
.faq details { border-top: 2px solid var(--ink-3); }
.faq details:last-child { border-bottom: 2px solid var(--ink-3); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; font-size: 21px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink-3); font-weight: 800; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--tang); color: var(--ink); }
.faq details p { margin: 0 0 22px; color: var(--milk-dim); max-width: 38em; }
.faq a { color: var(--sun); }

/* ---------- guide / privacy / 404 ---------- */
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.document { max-width: 860px; padding-top: 40px; padding-bottom: 100px; }
.document .label { margin-bottom: 16px; }
.document h1 { font-size: clamp(60px, 9vw, 120px); margin: 0 0 26px; }
.document h1 em { color: var(--tang); }
.document .lede { font-size: 21px; }
.document h2 { font-size: clamp(34px, 4.4vw, 52px); margin: 72px 0 20px; scroll-margin-top: 24px; }
.document p, .document li, .document td { color: var(--milk-dim); font-size: 17.5px; }
.document strong { color: var(--milk); }
.document a { color: var(--sun); text-underline-offset: 3px; }
.document ul, .document ol { padding-left: 22px; }
.document li + li { margin-top: 10px; }
.document .toc { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 0; }
.document .toc a { text-decoration: none; color: var(--milk); font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; background: var(--ink-2); border: 2px solid var(--ink-3); }
.document .toc a:hover { border-color: var(--milk); }
.document table { border-collapse: collapse; width: 100%; margin: 22px 0; }
.document th, .document td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 2px solid var(--ink-3); font-size: 16px; }
.document th { color: var(--milk); font-weight: 700; }
.document .callout { margin: 32px 0; padding: 22px 26px; border-radius: 22px; background: var(--grape); color: var(--milk); box-shadow: 0 8px 0 var(--grape-d); }
.document .callout p { color: var(--milk); margin: 0; }
.document .back-link { display: inline-block; margin-top: 56px; font-weight: 700; }
@media (max-width: 980px) { .faq { grid-template-columns: 1fr; } }
@media (hover: none) { .drag-hint { display: none; } }

/* ---------- detail levels ---------- */
.levels { background: var(--milk); color: var(--ink); padding: 20px var(--gutter) 100px; }
.levels-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; margin-bottom: 40px; }
.levels-head h2 { margin: 0; }
.levels-head h2 em { color: var(--teal-d); }
.levels-head p:last-child { margin: 0; font-size: 19px; max-width: 30em; }
.levels-head .label { color: #6b6472; }
.levels-box { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.level-tabs { display: grid; gap: 12px; }
.level-tabs button {
  text-align: left; cursor: pointer; background: #fff; color: var(--ink);
  border: 3px solid var(--ink); border-radius: 20px; padding: 16px 18px;
  box-shadow: 0 6px 0 var(--ink); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
}
.level-tabs button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink); }
.level-tabs button[aria-selected="true"] { background: var(--teal); transform: translateY(3px); box-shadow: 0 3px 0 var(--ink); }
.level-tabs b { display: block; font-size: 24px; font-weight: 800; font-stretch: 85%; }
.level-tabs small { display: block; font-family: var(--mono); font-size: 12px; color: #4b4552; }
.level-panel { margin: 0; }
.level-panel img { width: 100%; height: auto; border-radius: 24px; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--teal); background: var(--ink); }
.level-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 18px; font-size: 14px; }
.level-stats b { font-family: var(--display); font-size: 26px; font-weight: 800; font-stretch: 80%; margin-right: 4px; }
.level-inks { display: inline-flex; gap: 4px; vertical-align: middle; }
.level-inks i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(21,19,26,.18); }

/* ---------- library ---------- */
.library { padding: 100px var(--gutter) 40px; }
.lib-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; margin-bottom: 44px; }
.lib-head h2 { margin: 0; }
.lib-head h2 em { color: var(--pink); }
.lib-head p { margin: 0; color: var(--milk-dim); font-size: 19px; max-width: 30em; }
.lib-grid { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 22px; }
.lib-card { break-inside: avoid; margin: 0 0 22px; }
.lib-card button { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; cursor: pointer; border-radius: 22px; overflow: hidden; border: 2px solid var(--ink-3); background: var(--ink-2); transition: transform .2s var(--ease), border-color .2s; }
.lib-card button:hover { transform: translateY(-4px) rotate(-.4deg); border-color: var(--milk); }
.lib-card button:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.lib-card img { width: 100%; height: auto; display: block; }
.lib-photo { position: absolute; inset: 0; height: 100% !important; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.lib-card button[aria-pressed="true"] .lib-photo { opacity: 1; }

.lib-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 4px 0; }
.lib-meta b { font-size: 17px; }
.lib-meta .level-inks i { box-shadow: 0 0 0 2px rgba(255,246,236,.2); }
.library .honest { color: var(--milk-dim); margin-top: 18px; }
@media (max-width: 980px) {
  .levels-head, .lib-head, .levels-box { grid-template-columns: 1fr; }
  .level-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .level-tabs small { display: none; }
  .level-tabs b { font-size: 19px; }
  .level-tabs button { padding: 12px; }
}
.lib-meta small { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--milk-dim); }

/* ---------- support: small, in the footer links ---------- */
.foot-row a.bmc { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: #ffdd00; color: #0d0c22; font-size: 14px; }
.foot-row a.bmc:hover { color: #0d0c22; background: #ffe94d; }
.bmc img { width: 11px; height: 16px; }
.foot-row a.bt { display: inline-flex; align-items: center; gap: 10px; color: var(--milk-dim); font-weight: 500; }
.bt img { width: 40px; height: 40px; transition: transform .2s var(--ease); }
.bt-name { color: var(--milk); font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: .04em; font-size: 19px; }
.bt:hover img { transform: rotate(-9deg) scale(1.08); }
.bt:hover .bt-name { color: #24d6f2; }
.lib-meta small.lib-stats { color: var(--sun); opacity: .85; }

/* A single card owns all the treatments of a photograph. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lib-options { display: flex; align-items: center; gap: 12px; padding: 12px 4px 0; }
.lib-options select { flex: 1; min-width: 0; border: 1px solid var(--ink-3); border-radius: 10px; background: var(--ink-2); color: var(--milk); padding: 10px 8px; font: 13px var(--mono); }
.lib-options select:focus-visible, .sample-download:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.sample-download { display: inline-block; font: 13px var(--mono); padding: 12px 0; text-underline-offset: 4px; }
.lib-options .sample-download { color: var(--teal); flex-shrink: 0; }
.photo-hint { position: absolute; right: 10px; bottom: 10px; color: var(--milk); background: #15131aeb; border: 1px solid #fff6ec44; padding: 6px 10px; border-radius: 20px; font: 10px var(--mono); }
.lib-meta { align-items: start; }
.lib-meta .level-inks { flex-wrap: wrap; justify-content: end; max-width: 90px; }
@media (max-width: 560px) { .lib-grid { columns: 1; } }

.auto-photo { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font: 14px var(--mono); }
.auto-photo select { padding: 12px; border: 2px solid var(--ink); border-radius: 10px; background: white; color: var(--ink); font: inherit; max-width: 65%; }
.auto-photo select:focus-visible { outline: 3px solid var(--grape-d); outline-offset: 3px; }
.treatment-note { color: var(--milk-dim); font-size: 14px; line-height: 1.4; margin: 4px 4px 18px; }
@media (max-width: 980px) { .level-tabs { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 560px) { .level-tabs { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.example-method { max-width: 60em; margin-top: 18px; color: #4b4552; font-size: 13px; }
.example-method summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.example-method p { line-height: 1.6; }

.slice-preview { display: inline-block; color: var(--teal); font: 12px var(--mono); padding: 8px 4px; text-underline-offset: 4px; }
.slice-preview:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.level-panel .slice-preview { margin-left: 18px; }