/* assets/css/site.css - shipped copy. Comments removed at build time by tools/strip-comments.mjs.
   Not minified: the names, the line breaks and the indentation are the author's own. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@property --seam {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 50%;
}

:root{
  --ink:#0C1014;
  --surface:#1E2229;
  --ivory:#F3EEE4;
  --purple:#3A2758;
  --gold:#C29A52;
  --blend-white:#FFFEF8;

  --iv-dim:rgba(243,238,228,.66);
  --iv-faint:rgba(243,238,228,.55);
  --iv-hair:rgba(243,238,228,.16);

  --ik-dim:rgba(12,16,20,.74);
  --ik-faint:rgba(12,16,20,.62);
  --ik-hair:rgba(12,16,20,.16);
  --ik-caption:rgba(12,16,20,.60);
  --ik-wash:rgba(12,16,20,.03);
  --ik-box:rgba(12,16,20,.42);
  --ik-field:rgba(12,16,20,.48);
  --iv-field:rgba(243,238,228,.42);

  --gold-dim:rgba(194,154,82,.36);

  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --seam-hero:230px;
  --cut-half:0.5;

  --wrap:1120px; --gutter:44px; --nav-h:64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --sec-pad:104px; --head-gap:56px; --block-pad:20px;
  --topic-gap:48px;
  --row-pad:13px 0;
  --hair:1px; --hair-gold:1.25px;
  --radius-pill:100px;

  --z-nav:90; --z-nav-cta:91; --z-skip:100; --z-overlay:110;

  --t-hover-in:150ms; --t-fade:300ms; --t-hover-out:450ms; --t-wipe:600ms;
  --t-detent:620ms; --t-half:900ms; --t-flip:1800ms;
  --ease-mech:cubic-bezier(.75,0,.25,1);
  --ease-wipe:cubic-bezier(.6,.1,.2,1);
  --ease-over:cubic-bezier(.34,1.56,.64,1);

  --t-display-size:clamp(44px,7vw,96px); --t-display-weight:700;
  --t-h2-size:clamp(42px,7vw,86px);      --t-h2-weight:700;
  --t-head-alpha:1;
  --t-kicker-track:.2em;
  --t-link-line:2px; --t-link-alpha:1;

}

body[data-tier="2"]{
  --t-display-size:clamp(38px,5.5vw,68px); --t-display-weight:700;
  --t-h2-size:clamp(34px,5vw,60px);        --t-h2-weight:700;
  --t-head-alpha:.92;
  --t-kicker-track:.18em;
  --t-link-line:1.5px; --t-link-alpha:.8;
  --head-gap:48px; --sec-pad:96px;
}
body[data-tier="3"]{
  --t-display-size:clamp(32px,4.5vw,52px); --t-display-weight:600;
  --t-h2-size:clamp(28px,4vw,44px);        --t-h2-weight:600;
  --t-head-alpha:.84;
  --t-kicker-track:.16em;
  --t-link-line:1px; --t-link-alpha:.62;
  --head-gap:40px; --sec-pad:88px;
}

@media (max-width: 600px){ :root{ --nav-h:104px; } }

@media (max-width: 1024px){
  :root{ --gutter:36px; }
}
@media (max-width: 840px){
  body, body[data-tier="2"], body[data-tier="3"]{ --sec-pad:64px; }
}
@media (max-width: 600px){
  :root{ --gutter:24px; }
  body, body[data-tier="2"], body[data-tier="3"]{ --sec-pad:48px; }
  body, body[data-tier="2"], body[data-tier="3"]{ --head-gap:32px; }
  body[data-tier="2"]{ --t-display-size:clamp(26px, 7vw, 34px); }
  body[data-tier="3"]{ --t-display-size:clamp(22px, 6vw, 29px); }
  body, body[data-tier="1"]{ --t-h2-size:clamp(26px, 6.2vw, 32px); }
  body[data-tier="2"]{ --t-h2-size:clamp(23px, 5.6vw, 29px); }
  body[data-tier="3"]{ --t-h2-size:clamp(20px, 5vw, 26px); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ik-dim);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }

img { max-width: 100%; height: auto; display: block; }

button, input {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

a { color: inherit; }

strong { font-weight: 600; }

code { font-family: inherit; }

.num { font-variant-numeric: tabular-nums; }

::selection { background: var(--ink); color: var(--ivory); }
.dark ::selection,
.tools-band ::selection,
.summit-strip ::selection { background: var(--ivory); color: var(--ink); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn-gold:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }

h1 {
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  line-height: 1.02;
  letter-spacing: -.03em;
}

h2 {
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  line-height: .96;
  letter-spacing: -.03em;
}

h3 {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
}

.light h1, .light h2 { color: rgba(12,16,20,var(--t-head-alpha)); }
.dark h1,  .dark h2  { color: rgba(243,238,228,var(--t-head-alpha)); }

.lede {
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  letter-spacing: -.008em;
  max-width: 46ch;
}

.lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--t-kicker-track);
  text-transform: uppercase;
  line-height: 1.4;
}
.cap {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.cat {
  font-size: 14px;
  font-weight: 200;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.meter {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.light .lbl, .light .cat, .light .meter,
.hero .cat, .hero .meter, .hero .lbl {
  color: var(--ik-faint);
}
.dark .lbl, .dark .cat, .dark .meter {
  color: var(--iv-faint);
}

.light { background: var(--ivory); color: var(--ik-dim); }
.light strong { color: var(--ink); }
.dark { background: var(--ink); color: var(--iv-dim); }
.dark strong { color: var(--ivory); }

.log-sub {
  margin-top: 16px;
  color: var(--ik-faint);
}

.honesty-caption {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.5;
  color: var(--ik-caption);
}

main a:not(.btn),
.handles-row a,
.signal-links a {
  text-decoration: underline;
  text-decoration-thickness: var(--t-link-line);
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-hover-out) var(--ease-wipe);
}
main a:not(.btn):hover,
main a:not(.btn):focus-visible,
.handles-row a:hover,
.handles-row a:focus-visible,
.signal-links a:hover,
.signal-links a:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-color: color-mix(in srgb, currentColor calc(var(--t-link-alpha) * 100%), transparent);
  transition-duration: var(--t-hover-in);
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section[id] { scroll-margin-top: calc(var(--nav-h) + var(--safe-top) + 16px); }

.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: var(--z-skip);
  background: var(--ink);
  color: var(--ivory);
  padding: 12px 16px;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.skip:focus,
.skip:focus-visible { transform: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  transition: filter var(--t-hover-out) var(--ease-wipe),
              transform var(--t-hover-out) var(--ease-wipe);
}
.btn-gold:hover,
.btn-gold:focus-visible {
  filter: brightness(1.06);
  transition-duration: var(--t-hover-in);
}
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover { transform: translateY(-1px); }
}

.btn-outline {
  border: var(--hair) solid currentColor;
  background: transparent;
  transition: color var(--t-hover-out) var(--ease-wipe);
}
.btn-outline:hover,
.btn-outline:focus-visible { transition-duration: var(--t-hover-in); }
.dark .btn-outline:hover,  .dark .btn-outline:focus-visible,
.signal .btn-outline:hover, .signal .btn-outline:focus-visible { color: var(--ivory); }
.light .btn-outline:hover, .light .btn-outline:focus-visible { color: var(--ink); }

.capture-form { margin-top: 24px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.form-row { display: flex; gap: 12px; }
.capture-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: 0;
  background: transparent;
  border: var(--hair) solid var(--ik-field);
  color: var(--ink);
  transition: border-color var(--t-hover-in) var(--ease-wipe);
}
.capture-form input[type="email"]::placeholder { color: var(--ik-faint); opacity: 1; }
.capture-form input[type="email"]:focus { border-color: var(--ik-dim); }

.dark .capture-form input[type="email"],
.signal .capture-form input[type="email"] {
  border-color: var(--iv-field);
  color: var(--ivory);
}
.dark .capture-form input[type="email"]::placeholder,
.signal .capture-form input[type="email"]::placeholder { color: var(--iv-faint); }
.dark .capture-form input[type="email"]:focus,
.signal .capture-form input[type="email"]:focus { border-color: var(--iv-dim); }

.form-note, .form-confirm {
  margin-top: 8px;
  font-size: 14px;
}
.form-note[hidden] { display: none; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: var(--z-nav);
  mix-blend-mode: difference;
  color: var(--blend-white);
  display: flex;
  align-items: center;
  gap: 32px;
  padding-inline: var(--gutter);
  padding-right: calc(var(--gutter) + 232px);
  pointer-events: none;
}
.nav a { pointer-events: auto; }

.nav-mark { display: block; line-height: 0; }
.nav-mark-svg {
  height: 36px;
  aspect-ratio: 2000 / 1164.36;
  width: auto;
  display: block;
  color: inherit;
  fill: currentColor;
}

.nav nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav nav a {
  position: relative;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.nav nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: var(--hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-hover-out) var(--ease-wipe);
}
.nav nav a:hover::after,
.nav nav a:focus-visible::after {
  transform: scaleX(1);
  transition-duration: var(--t-hover-in);
}
.nav [aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: currentColor;
}

.nav-cta {
  position: fixed;
  top: 0;
  right: 0;
  height: calc(64px + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: var(--z-nav-cta);
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  pointer-events: none;
}
.nav-cta .btn { height: 40px; padding: 0 20px; pointer-events: auto; }

@media (max-width: 840px){
  .nav { gap: 16px; padding-right: calc(var(--gutter) + 216px); }
  .nav nav { gap: 14px; }
}
@media (max-width: 720px) and (min-width: 601px){
  .nav { padding-right: calc(var(--gutter) + 200px); }
  .nav nav { gap: 10px; }
  .nav-cta .btn { padding: 0 14px; }
}
@media (max-width: 600px){
  .nav {
    display: grid;
    grid-template-rows: 64px 40px;
    align-items: center;
    gap: 0;
    padding-right: var(--gutter);
    background: var(--ink);
    mix-blend-mode: normal;
    color: var(--ivory);
  }
  .nav-mark { grid-row: 1; justify-self: start; }
  .nav nav {
    grid-row: 2;
    justify-self: center;
    margin: 0;
    gap: 20px;
  }
}
@media (max-width: 344px){
  .nav nav { gap: 10px; }
}

.nav-burger {
  display: none;
  position: relative;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ivory);
  cursor: pointer;
  pointer-events: auto;
}
.nav-burger-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-fade) var(--ease-mech),
              opacity var(--t-hover-in) var(--ease-mech);
}
.nav-burger-line:nth-child(1) { transform: translate(-50%, -50%) translateY(-7px); }
.nav-burger-line:nth-child(2) { transform: translate(-50%, -50%); }
.nav-burger-line:nth-child(3) { transform: translate(-50%, -50%) translateY(7px); }
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-line:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-menu { display: none; }

html.nav-open, html.nav-open body { overflow: hidden; }

@media (max-width: 600px){
  html.js { --nav-h: 64px; }
  html.js .nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: var(--gutter);
  }
  html.js .nav nav { display: none; }
  html.js .nav-cta { display: none; }
  html.js .nav-burger { display: inline-flex; }

  html.nav-open .nav { z-index: calc(var(--z-overlay) + 1); }

  html.js .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--ink);
    color: var(--ivory);
    padding: calc(var(--safe-top) + var(--nav-h) + 32px)
             var(--gutter)
             calc(env(safe-area-inset-bottom, 0px) + 24px);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--t-wipe) var(--ease-mech),
                visibility 0s var(--t-wipe);
  }
  html.js .nav-menu.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--t-wipe) var(--ease-mech);
  }

  html.js .nav-menu-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  html.js .nav-menu-links a {
    font-size: clamp(36px, 11vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--ivory);
    text-decoration: none;
    padding: 6px 0;
  }
  html.js .nav-menu-links a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
    text-decoration-color: currentColor;
  }

  html.js .nav-menu-cta { margin-top: auto; }
  html.js .nav-menu-cta .btn { width: 100%; }

  html.js .nav-menu a {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-fade) var(--ease-mech),
                transform var(--t-fade) var(--ease-mech);
  }
  html.js .nav-menu.is-open a { opacity: 1; transform: none; }
  html.js .nav-menu.is-open .nav-menu-links a:nth-child(1) { transition-delay: 120ms; }
  html.js .nav-menu.is-open .nav-menu-links a:nth-child(2) { transition-delay: 180ms; }
  html.js .nav-menu.is-open .nav-menu-links a:nth-child(3) { transition-delay: 240ms; }
  html.js .nav-menu.is-open .nav-menu-cta .btn { transition-delay: 300ms; }
}

.seam-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --cut: 0.5;
}

.seam-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to bottom,
    var(--g-top) 0 var(--seam), var(--g-bottom) var(--seam) 100%);
}

.seam-stage--hero   { --g-top: var(--ink);   --g-bottom: var(--ivory); }
.seam-stage--footer { --g-top: var(--ivory); --g-bottom: var(--ink);   }

.seam-mark {
  display: block;
  color: var(--blend-white);
  fill: currentColor;
  mix-blend-mode: difference;
}

.seam-mark-wrap {
  position: absolute;
  z-index: 1;
  left: var(--mark-left);
  top: calc(var(--seam) - var(--mark-h) * var(--cut));
  height: var(--mark-h);
  aspect-ratio: 2000 / 1164.36;
  clip-path: inset(0 0 0 0);
  color: var(--blend-white);
  mix-blend-mode: difference;
  pointer-events: none;
}
.seam-mark-wrap .seam-mark { width: 100%; height: 100%; }

.seam-stage--footer .seam-mark {
  position: absolute;
  z-index: 1;
  height: var(--mark-h);
  width: auto;
  aspect-ratio: 2000 / 1164.36;
  left: 50%;
  top: calc(var(--seam) - var(--mark-h) * var(--cut));
  transform: translateX(-50%);
  pointer-events: none;
}

.seam-hairline {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  top: var(--seam);
  height: var(--hair-gold);
  background: var(--gold);
  mix-blend-mode: normal;
  transform-origin: left;
  pointer-events: none;
}

.seam-fallback .seam-ground { visibility: hidden; }

.seam-wave {
  position: absolute;
  left: calc(var(--mark-left) + var(--mark-h) * (2000 / 1164.36) + 24px);
  width: calc(100vw - 2 * var(--mark-left) - var(--mark-h) * (2000 / 1164.36) - 24px);
  top: calc(var(--seam) - (var(--mark-h) * 0.64 + 6px));
  height: calc(var(--mark-h) * 1.28 + 12px);
  z-index: 2;
  color: var(--blend-white);
  mix-blend-mode: difference;
  pointer-events: none;
}
@media (max-width: 639.98px){ .seam-wave { display: none; } }

.summit-wave {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(var(--seam) - 3px);
  height: 24px;
  z-index: 3;
  color: var(--gold);
  mix-blend-mode: normal;
  pointer-events: none;
}
@media (max-width: 1024px){ .summit-wave { display: none; } }

.seam-wave .string-line, .summit-wave .string-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.seam-wave .string-line {
  stroke-linecap: butt;
  stroke-width: 1.75px;
}
.summit-wave .string-line { stroke-width: 3px; }
.seam-wave .string-tips, .summit-wave .string-tips {
  fill: currentColor;
  stroke: none;
}
@media (max-width: 840px){
  .seam-wave .string-line { stroke-width: 1.75px; }
}

.seam-stage--hero {
  --mark-h: 220px;
  --seam-hero: 230px;
  --seam: var(--seam-hero);
  --h1-off: 126px;
  --strip-mt: 16px;
  --cap-mt: 8px;
  --sub-mt: 32px;
  --mark-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  --tick-lead: 48px;
  --tick-pitch: 32px;
  min-height: max(720px, calc(100svh - 72px));
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--seam-hero) + var(--h1-off));
  padding-bottom: 0;
}

.hero-h1 { color: rgba(12,16,20,var(--t-head-alpha)); }
.hero-h1 .l { display: block; }
.hero-h1 .l + .l { margin-top: 0.1em; }

.split-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.split-box {
  border: 1px solid var(--ik-box);
  background: transparent;
}
.split-handle {
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
}
.split-handle--tl { left: -3.5px; top: -3.5px; }
.split-handle--tr { right: -3.5px; top: -3.5px; }
.split-handle--bl { left: -3.5px; bottom: -3.5px; }
.split-handle--br { right: -3.5px; bottom: -3.5px; }

.split-strip, .split-controls { margin-top: var(--strip-mt); }

.strip-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 40px;
  border-top: var(--hair) solid var(--ik-hair);
  border-bottom: var(--hair) solid var(--ik-hair);
}
.split-label { color: var(--ik-faint); white-space: nowrap; }

.split-modes {
  display: flex;
  align-items: stretch;
  gap: 24px;
  height: 100%;
}
.split-modes button {
  position: relative;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  opacity: .64;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--t-hover-out) var(--ease-wipe);
}
.split-modes button:hover,
.split-modes button:focus-visible {
  opacity: 1;
  transition-duration: var(--t-hover-in);
}
.split-modes button[aria-checked="true"],
.split-modes button.is-active { opacity: 1; }
.split-modes button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
}
.split-modes button[aria-checked="true"]::after,
.split-modes button.is-active::after { transform: scaleX(1); }

.split-run {
  margin-left: auto;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--t-hover-out) var(--ease-wipe);
}
.split-run:hover,
.split-run:focus-visible { transition-duration: var(--t-hover-in); }

.split-readout {
  display: block;
  margin-top: 8px;
  color: var(--ik-faint);
}

.hero-copy .honesty-caption { margin-top: var(--cap-mt); }

html.js .hero-copy .honesty-caption {
  padding-bottom: 8px;
  border-bottom: var(--hair) solid var(--ik-hair);
}

.hero-subhead {
  margin-top: var(--sub-mt);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  letter-spacing: -.008em;
  max-width: 46ch;
  color: var(--ink);
}

.hero-ctas {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.link-arrow { font-size: 15px; color: var(--ink); }

.hero-statline {
  margin-top: 32px;
  padding-top: 12px;
  border-top: var(--hair) solid var(--ik-hair);
}

html:not(.js) .split-strip,
html:not(.js) .split-controls,
html:not(.js) .split-overlay,
html:not(.js) .split-readout { display: none; }

@media (max-width: 840px){
  .seam-stage--hero {
    --mark-h: 200px;
    --seam-hero: 204px;
    --h1-off: 116px;
    --t-display-size: clamp(38px, 6.8vw, 64px);
  }
}
@media (max-width: 600px){
  .seam-stage--hero {
    --mark-h: 160px;
    --seam-hero: 208px;
    --h1-off: 96px;
    --t-display-size: clamp(30px, 9vw, 38px);
    --strip-mt: 16px;
    --cap-mt: 8px;
    --tick-lead: 8px;
    --tick-pitch: 12px;
  }
  .split-readout { display: none; }
  .split-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .strip-row { gap: 12px; font-size: 12px; letter-spacing: .12em; }
  .split-modes { gap: 12px; }
  .split-handle { width: 5px; height: 5px; }
  .split-handle--tl { left: -2.5px; top: -2.5px; }
  .split-handle--tr { right: -2.5px; top: -2.5px; }
  .split-handle--bl { left: -2.5px; bottom: -2.5px; }
  .split-handle--br { right: -2.5px; bottom: -2.5px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .link-arrow { align-self: center; text-align: center; }
}
@media (max-width: 344px){
  .seam-stage--hero {
    --tick-lead: 2px;
    --tick-pitch: 5px;
  }
  .strip-row { gap: 6px; letter-spacing: .05em; }
  .split-modes { gap: 6px; }
}
@media (max-height: 820px) and (min-width: 840px){
  .seam-stage--hero {
    --mark-h: 180px;
    --seam-hero: 194px;
    --h1-off: 100px;
    --t-display-size: clamp(40px, 6vw, 72px);
    --strip-mt: 16px;
    --cap-mt: 8px;
    --sub-mt: 24px;
  }
}

@media (prefers-reduced-motion: no-preference){

  html.js:not(.seq-done) :is([data-seq="mark"], .seam-stage--hero .seam-mark-wrap):not(.is-in){
    clip-path: inset(0 100% 0 0);
  }
  html.js:not(.seq-done) :is([data-seq="h1-line"], .hero-h1 .l):not(.is-in){
    opacity: 0;
  }
  html.js:not(.seq-done) :is([data-seq="strip"], .split-strip, .split-controls):not(.is-in),
  html.js:not(.seq-done) :is([data-seq="caption"], .hero-copy .honesty-caption):not(.is-in),
  html.js:not(.seq-done) :is([data-seq="subhead"], .hero-subhead):not(.is-in),
  html.js:not(.seq-done) :is([data-seq="stat"], .hero-statline):not(.is-in){
    opacity: 0;
  }
  html.js:not(.seq-done) :is([data-seq="cta"], .hero-ctas):not(.is-in){
    opacity: 0;
    transform: scale(.98);
  }

  html.js:not(.seq-done) body[data-tier="2"] :is(
    [data-seq="kicker"], [data-seq="h1"], [data-seq="lede"],
    .page-head h1, .page-head .lede, .page-head .sub-line
  ):not(.is-in){ opacity: 0; }
  html.js:not(.seq-done) body[data-tier="3"] :is([data-seq="head"], .page-head):not(.is-in){
    opacity: 0;
  }

  html.js .seam-mark-wrap, html.js [data-seq="mark"]{
    transition: clip-path var(--t-wipe) var(--ease-wipe);
  }
  html.js .hero-h1 .l, html.js [data-seq="h1-line"]{
    transition: opacity var(--t-fade) var(--ease-wipe);
  }
  html.js .split-strip, html.js .split-controls, html.js [data-seq="strip"],
  html.js .hero-copy .honesty-caption, html.js [data-seq="caption"],
  html.js .hero-subhead, html.js [data-seq="subhead"],
  html.js .hero-statline, html.js [data-seq="stat"]{
    transition: opacity var(--t-hover-in) var(--ease-wipe);
  }
  html.js .hero-ctas, html.js [data-seq="cta"]{
    transition: opacity var(--t-fade) var(--ease-over),
                transform var(--t-fade) var(--ease-over);
  }
  html.js .page-head,
  html.js [data-seq="head"], html.js [data-seq="kicker"],
  html.js [data-seq="h1"], html.js [data-seq="lede"]{
    transition: opacity var(--t-fade) var(--ease-wipe);
  }

  html.js .seam-stage--footer .seam-hairline{
    transform: scaleX(0);
    transition: transform var(--t-half) var(--ease-mech);
  }
  html.js .seam-stage--footer.is-in .seam-hairline{ transform: scaleX(1); }
}

.crate {
  padding-top: 24px;
  padding-bottom: var(--sec-pad);
}

.sec-hairline {
  height: var(--hair);
  background: var(--ik-hair);
}
.crate .lbl { margin-top: 24px; }
.crate h2 { margin-top: 16px; }
.crate-meta { margin-top: 16px; color: var(--ik-dim); }

.crate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: var(--head-gap);
  align-items: stretch;
}

.crate-card {
  --card-pad: 32px;
  border: var(--hair) solid var(--ik-hair);
  background: var(--ik-wash);
  border-radius: 0;
  padding: var(--card-pad);
  min-width: 0;
}
.card-breaktype, .card-speaktype, .card-easel, .card-companion {
  transition: border-color var(--t-hover-out) var(--ease-wipe);
}
.card-breaktype:hover, .card-speaktype:hover, .card-easel:hover, .card-companion:hover {
  border-color: var(--ik-faint);
  transition-duration: var(--t-hover-in);
}

.card-breaktype { --acc: #D86341; --acc-field: #EED5C7; --acc-deep: #EDCDBD; }
.card-speaktype { --acc: #1D92AC; --acc-field: #CCDDDA; --acc-deep: #C0D8D7; }
.card-easel     { --acc: #6E9141; --acc-field: #DBDDC7; --acc-deep: #D3D8BD; }
.card-companion { --acc: #8D857A; --acc-field: #E1DBD1; --acc-deep: #DBD5CB; }

.card-breaktype .card-door, .card-speaktype .card-door, .card-easel .card-door,
.card-companion .card-door {
  margin-inline: calc(var(--card-pad) * -1);
  padding-inline: var(--card-pad);
  padding-top: 24px;
  background: var(--acc-field);
  transition: background-color var(--t-hover-out) var(--ease-wipe);
}
.card-breaktype:hover .card-door, .card-speaktype:hover .card-door,
.card-easel:hover .card-door, .card-companion:hover .card-door {
  background: var(--acc-deep);
  transition-duration: var(--t-hover-in);
}
.card-breaktype .card-door::after, .card-speaktype .card-door::after,
.card-easel .card-door::after, .card-companion .card-door::after {
  height: 2px;
  background: var(--acc);
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.card-catalogue { color: var(--ik-faint); }
.card-title { margin-top: 8px; color: var(--ink); }

.card-artifact { margin-top: 24px; }
.card-artifact img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card-artifact figcaption { margin-top: 8px; color: var(--ik-faint); }

.card-oneliner { margin-top: 24px; color: var(--ik-dim); }

.card-price {
  margin-top: 24px;
  display: flex;
  align-items: baseline;
  gap: 2px 12px;
  flex-wrap: wrap;
}
.card-price .price-tag {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
}
.card-price .price-note { font-weight: 400; color: var(--ik-dim); }
.card-ctas {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.crate-crosslink {
  margin-top: 64px;
  border-top: var(--hair) solid var(--ik-hair);
  padding-top: var(--block-pad);
}
.crate-crosslink a { color: var(--ink); }

@media (max-width: 1023px){
  .crate-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px){
  .crate-card { --card-pad: 24px; }
  .card-ctas { flex-direction: column; align-items: stretch; gap: 16px; }
  .card-ctas .btn { width: 100%; }
  .form-row { flex-wrap: wrap; }
  .form-row .btn { width: 100%; }
}

.install { padding-top: 24px; padding-bottom: var(--sec-pad); }
.install-inner { max-width: 880px; margin-inline: auto; }
.install-kicker { margin-top: 24px; }
.install h2 { margin-top: 16px; }
.install-intro { margin-top: 16px; }

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.install-cols { margin-top: var(--head-gap); align-items: start; }
.install-col {
  border: var(--hair) solid var(--ik-hair);
  background: var(--ik-wash);
  padding: 16px;
}
.install-col .lbl { display: block; }

.path-block {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.path-block p { margin: 0; overflow-wrap: anywhere; }
.path-block p + p { margin-top: 8px; }
.path-block .dest { margin-top: 8px; }
.path-block .dest p + p { margin-top: 8px; }
.path-block .dest + p { margin-top: 16px; }

.run-once { margin-top: 0; font-size: 13px; }
.usage-line { margin-top: 24px; font-size: 16px; max-width: 62ch; }

.limits-block { margin-top: var(--topic-gap); }
.limits-block h3 { color: var(--ink); }
.limits-block h3 + p { margin-top: 12px; }
.limits-block p { max-width: 62ch; }
.limits-block p + p { margin-top: 16px; }
.limits-block .meter { margin-top: 12px; }

.support-block { margin-top: var(--topic-gap); }
.support-block h3 { color: var(--ink); }
.support-block p { margin-top: 12px; max-width: 62ch; }

@media (max-width: 840px){
  .cols { grid-template-columns: 1fr; gap: 24px; }
}

.signal { padding-block: var(--sec-pad); }
.signal-inner { max-width: 560px; margin-inline: auto; text-align: left; }
.signal h2 { margin-top: 16px; }
.signal-promise {
  margin-top: 16px;
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  letter-spacing: -.008em;
  max-width: 46ch;
  color: var(--iv-dim);
}
.signal .capture-form { margin-top: 32px; }
.signal-links {
  margin-top: var(--topic-gap);
  color: var(--iv-faint);
  font-size: 15px;
  font-weight: 400;
}
.signal-links a {
  color: var(--ivory);
  display: block;
  width: max-content;
  padding-block: 12px;
}

.page-head { padding-top: calc(var(--nav-h) + var(--safe-top) + var(--head-gap)); }
.page-head h1 { margin-top: 16px; }
.page-head .sub-line { margin-top: 12px; max-width: 62ch; }
.page-head .lede { margin-top: 16px; }
.page-head .overline { display: block; }

@media (max-width: 600px){
  .page-head { padding-top: calc(var(--nav-h) + var(--safe-top) + 24px); }
}

.notfound-links {
  margin-top: 32px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.log-rows { margin-top: var(--head-gap); padding-bottom: var(--sec-pad); }

.log-row, [data-log-row] {
  display: grid;
  grid-template-columns: 140px 220px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: var(--row-pad);
  border-top: var(--hair) solid var(--ik-hair);
  cursor: pointer;
  transition: background-color var(--t-hover-out) var(--ease-wipe);
}
.log-row:hover, [data-log-row]:hover {
  background: var(--ik-wash);
  transition-duration: var(--t-hover-in);
}
.log-rows > :last-child { border-bottom: var(--hair) solid var(--ik-hair); }

.log-date { color: var(--ik-faint); }
.log-project { font-size: 15px; font-weight: 600; color: var(--ink); }
.log-line { font-size: 15px; font-weight: 400; color: var(--ik-dim); }
.log-link { font-size: 14px; justify-self: end; white-space: nowrap; }

@media (max-width: 1023px) and (min-width: 841px){
  .log-row, [data-log-row] {
    grid-template-columns: 120px 1fr auto;
    grid-template-areas:
      "date project link"
      "date line    link";
    row-gap: 4px;
  }
  .log-date    { grid-area: date; }
  .log-project { grid-area: project; }
  .log-line    { grid-area: line; }
  .log-link    { grid-area: link; align-self: center; }
}
@media (max-width: 840px){
  .log-row, [data-log-row] {
    display: block;
    padding-block: 24px;
  }
  .log-row > * + *, [data-log-row] > * + * { margin-top: 6px; }
  .log-link { display: inline-block; }
}

.studio-content { max-width: 760px; padding-bottom: var(--sec-pad); }

.capabilities { margin-top: var(--head-gap); display: grid; gap: 12px; }
.capabilities p { font-size: 17px; line-height: 1.6; color: var(--iv-dim); }

.process-steps {
  margin-top: 32px;
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}
.process-steps li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  color: var(--iv-dim);
}
.process-steps .cat { color: var(--iv-faint); flex: 0 0 auto; }

.first-project { margin-top: 24px; color: var(--iv-faint); }

.proof-line {
  margin-top: 48px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ivory);
  border-left: 2px solid var(--iv-hair);
  padding-left: 20px;
  max-width: 60ch;
}

.studio-cta { margin-top: 48px; }

.climb-wash {
  background:
    radial-gradient(90% 70% at 78% 22%, rgba(58,39,88,.12), transparent 65%),
    var(--ink);
}

.about-grid {
  margin-top: var(--head-gap);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  padding-bottom: var(--sec-pad);
}
.about-text { grid-column: 1 / 8; min-width: 0; }
.about-visual { grid-column: 9 / 13; align-self: start; min-width: 0; }

.about-text p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--iv-dim);
  max-width: 60ch;
}
.about-text p + p { margin-top: 16px; }

.altitude-line { margin-block: 32px; color: var(--iv-faint); }

.visual-slot {
  border: var(--hair) solid var(--iv-hair);
  aspect-ratio: 4 / 5;
  max-width: 450px;
  overflow: hidden;
}
.visual-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visual-slot + .cap { margin-top: 8px; color: var(--iv-faint); }

.founder-block { margin-top: 64px; }
.founder-name { font-size: 20px; font-weight: 600; color: var(--ivory); }
.founder-role { margin-top: 4px; color: var(--iv-faint); }
.founder-block p { margin-top: 12px; max-width: 60ch; }

@media (max-width: 1023px) and (min-width: 841px){
  .about-text { grid-column: 1 / 8; }
  .about-visual { grid-column: 8 / 13; }
}
@media (max-width: 840px){
  .about-grid { grid-template-columns: 1fr; }
  .about-text { grid-column: auto; }
  .about-visual { grid-column: auto; max-width: 420px; margin-top: 48px; }
}

.summit { background: var(--ink); }

.seam-stage--footer {
  --seam: 50%;
  --mark-h: 300px;
  height: clamp(616px, 62vh, 720px);
}

.closing-line {
  position: relative;
  z-index: 1;
  padding-top: 48px;
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--ink);
}

.summit-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 8px;
  padding: 0 var(--gutter) 24px;
  text-align: center;
  color: var(--ivory);
}

.summit-strip .matrix-line { margin-top: 12px; }

.footer-nav { color: var(--iv-faint); }
.footer-nav a { color: var(--ivory); }
.footer-nav a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-hover-out) var(--ease-wipe),
              color var(--t-hover-out) var(--ease-wipe);
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--ivory);
  text-decoration-color: currentColor;
  transition-duration: var(--t-hover-in);
}
.footer-nav a[aria-current="page"] {
  color: var(--ivory);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

.matrix-line { color: var(--iv-faint); }
.matrix-line .coord { white-space: nowrap; }

.handles-row { font-size: 15px; color: var(--iv-faint); }
.handles-row a { color: var(--ivory); }

.legal-line { font-size: 12px; color: var(--iv-faint); }

.base-bar {
  height: 16px;
  background: var(--purple);
}

@media (max-width: 840px){
  .matrix-line .matrix-a, .matrix-line .matrix-b { display: block; }
  .matrix-line .matrix-sep { display: none; }
  .seam-stage--footer { height: clamp(648px, 62vh, 720px); }
}
@media (max-width: 600px){
  .seam-stage--footer {
    --mark-h: 190px;
    height: clamp(600px, 75vh, 620px);
  }
  .closing-line { font-size: 26px; padding-top: 32px; }
  .footer-nav { white-space: nowrap; }
}

.is-hoverable {
  transition: opacity var(--t-hover-out) var(--ease-wipe),
              transform var(--t-hover-out) var(--ease-wipe),
              background-color var(--t-hover-out) var(--ease-wipe),
              color var(--t-hover-out) var(--ease-wipe),
              border-color var(--t-hover-out) var(--ease-wipe);
}
.is-hoverable:hover,
.is-hoverable:focus-visible {
  transition-duration: var(--t-hover-in);
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

.log-link,
.link-arrow,
.crate-crosslink a,
.nav-mark,
.btn,
.split-run,
.footer-nav a,
.handles-row a,
.signal-links a,
.support-block a,
.rack-row .card-oneliner a {
  position: relative;
}

.footer-nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(50% - 8px);
  width: max(100%, 44px);
  height: 46px;
  transform: translateX(-50%);
}
.handles-row a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(50% - 22px);
  width: max(100%, 44px);
  height: 44px;
  transform: translateX(-50%);
}
.handles-row a[href^="mailto:"]::before {
  bottom: auto;
  top: calc(50% - 8px);
  height: 46px;
}
.support-block a::before,
.rack-row .card-oneliner a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: 46px;
  transform: translate(-50%, -50%);
}

.log-link::before,
.link-arrow::before,
.crate-crosslink a::before,
.nav-mark::before,
.btn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.split-modes button::before,
.split-run::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

.nav nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: 44px;
  transform: translate(-50%, -50%);
}

@media (max-width: 600px){
  .btn { min-height: 44px; }
  .nav-cta .btn { min-height: 0; }
}

.mission { background: var(--ivory); padding: 24px 0 var(--sec-pad); }
.mission-inner { max-width: 880px; margin-inline: auto; }
.mission .sec-hairline { max-width: 880px; margin-inline: auto; }
.mission-inner .lbl { margin-top: 24px; }
.mission-inner h2 {
  margin-top: 16px;
  line-height: 1.02;
  text-wrap: balance;
}
.mission-inner h2 + .mission-body { margin-top: var(--head-gap); }
.mission-body {
  margin-top: 24px;
  font-size: clamp(17px, 1.9vw, 20px);
  letter-spacing: -.008em;
  line-height: 1.7;
  color: var(--ik-dim);
  max-width: 46ch;
}

@property --px { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --py { syntax: "<number>"; inherits: true; initial-value: 0; }

.obj {
  --px: 0;
  --py: 0;

  --ss: 1;
  --ssi: calc(1 / var(--ss));
  --w: var(--w0);

  --yaw-max: 6;
  --pit-max: 4;
  --rest-yaw: 26;
  --rest-pit: 2;

  --tilt-damp: var(--t-hover-out);

  position: relative;
  display: inline-block;
  padding: calc(var(--w) * .10px) calc(var(--w) * .14px) calc(var(--w) * .30px);
  margin: 0;
  vertical-align: top;
}

.door {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.obj[data-track] { --tilt-damp: var(--t-hover-in); }

.door { --gold-ring: rgb(150, 113, 50); }
.door:focus-visible { outline: 2px solid var(--gold-ring); outline-offset: 8px; }

.door-stage {
  position: relative;
  display: block;
  width: calc(var(--w) * 1px);
  height: calc(var(--w) * 4 / 3 * 1px);
  perspective: calc(var(--w) * 6.4px);
  perspective-origin: 50% 46%;

  transition: --px var(--tilt-damp) var(--ease-wipe),
              --py var(--tilt-damp) var(--ease-wipe),
              transform var(--t-hover-in) var(--ease-wipe);
}

.box {
  --w: calc(var(--w0) * var(--ss));

  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w) * 1px);
  height: calc(var(--w) * 4 / 3 * 1px);
  transform-style: preserve-3d;
  transform-origin: 0 0;
  transform:
    scale3d(var(--ssi), var(--ssi), var(--ssi))
    translate3d(50%, 50%, 0)
    rotateY(calc((var(--rest-yaw) + var(--px) * var(--yaw-max)) * 1deg))
    rotateX(calc((var(--rest-pit) - var(--py) * var(--pit-max)) * 1deg))
    translate3d(-50%, -50%, 0);
  --d: calc(var(--w) * .15 * 1px);
  --hd: calc(var(--w) * .075 * 1px);
  --hw: calc(var(--w) * .5 * 1px);
  --hh: calc(var(--w) * .6667 * 1px);
}

.f {
  position: absolute;
  box-sizing: border-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background-color: var(--ink);
}

.f-front { inset: 0; transform: translateZ(var(--hd)); overflow: hidden; }

.f-spine {
  width: var(--d);
  height: 100%;
  top: 0; left: 50%;
  margin-left: calc(var(--d) / -2);
  transform: rotateY(-90deg) translateZ(var(--hw));
}

.f-top, .f-bot {
  width: 100%;
  height: var(--d);
  left: 0; top: 50%;
  margin-top: calc(var(--d) / -2);
}
.f-top { transform: rotateX(90deg) translateZ(var(--hh)); }
.f-bot { transform: rotateX(-90deg) translateZ(var(--hh)); }

.f-front {
  background-image: linear-gradient(to bottom,
    rgba(243,238,228,.121) 0%,
    rgba(243,238,228,.104) 45%,
    rgba(243,238,228,.078) 75%,
    rgba(243,238,228,.065) 100%);
}

.glz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: lighten;

  --gz-a: calc(29% - var(--px) * 6% - var(--py) * 4%);

  --gz-hot: color-mix(in srgb, #8A8A8A calc(74% + var(--px) * 13%), #000);

  background-image: linear-gradient(128deg,
    #000 0%,
    #000 calc(var(--gz-a) - 21%),
    color-mix(in srgb, var(--gz-hot) 48%, #000) calc(var(--gz-a) - 17%),
    #000 calc(var(--gz-a) - 13%),
    #000 calc(var(--gz-a) - 11%),
    #303030 calc(var(--gz-a) - 5%),
    var(--gz-hot) calc(var(--gz-a) + 2%),
    color-mix(in srgb, var(--gz-hot) 62%, #000) calc(var(--gz-a) + 7%),
    #1e1e1e calc(var(--gz-a) + 11%),
    #000 calc(var(--gz-a) + 14%),
    #000 100%);
}

.edg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: lighten;
  --ed-top: calc(.74 - var(--py) * .16);
  --ed-side: calc(.20 + var(--px) * .10);
  background-image:
    linear-gradient(to bottom,
      rgba(255,255,255,var(--ed-top)) 0 1px,
      rgba(255,255,255,calc(var(--ed-top) * .38)) 1px 2px,
      rgba(255,255,255,calc(var(--ed-top) * .14)) 2px 3.5px,
      transparent 3.5px),
    linear-gradient(to right,
      rgba(255,255,255,var(--ed-side)) 0 1px,
      rgba(255,255,255,calc(var(--ed-side) * .45)) 1px 2px,
      rgba(255,255,255,calc(var(--ed-side) * .16)) 2px 3px,
      transparent 3px),
    linear-gradient(to top,
      rgba(255,255,255,.13) 0 1px,
      rgba(255,255,255,.05) 1px 2.5px,
      transparent 2.5px);
}

.f-spine {
  background-image:
    linear-gradient(to right, #ffffff 0%, #ededed 40%, #969696 100%),
    linear-gradient(to bottom,
      rgba(243,238,228,.16) 0%,
      rgba(243,238,228,.21) 12%,
      rgba(243,238,228,.40) 46%,
      rgba(243,238,228,.48) 60%,
      rgba(243,238,228,.55) 73%,
      rgba(243,238,228,.62) 87%,
      rgba(243,238,228,.66) 100%);
  background-blend-mode: multiply;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.glz-spine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: lighten;
  background-image: linear-gradient(to right,
    color-mix(in srgb, #6a6a6a calc(52% - var(--px) * 16%), #000) 0%,
    #000 62%);
}

.f-top {
  background-image: linear-gradient(to top,
    rgba(243,238,228,.90) 0%,
    rgba(243,238,228,.62) 34%,
    rgba(243,238,228,.30) 72%,
    rgba(243,238,228,.18) 100%);
}

.f-bot {
  background-image: linear-gradient(to bottom,
    rgba(243,238,228,.10) 0%,
    rgba(243,238,228,.03) 60%,
    rgba(243,238,228,0) 100%);
}

.door-floor {
  position: absolute;
  left: 50%;
  top: calc(var(--w) * .10px + var(--w) * 4 / 3 * 1px + var(--w) * .022px);
  width: calc(var(--w) * 1.5px);
  height: calc(var(--w) * .34px);
  margin-left: calc(var(--w) * -.75px);
  pointer-events: none;
  transform: rotate(-2.6deg);
  transform-origin: 50% 0;
  background-image:
    radial-gradient(ellipse calc(var(--w) * .30px) calc(var(--w) * .038px)
      at calc(50% + var(--px) * 3%) 0%,
      rgba(12,16,20,.34), rgba(12,16,20,.12) 56%, rgba(12,16,20,0) 100%),
    radial-gradient(ellipse calc(var(--w) * .55px) calc(var(--w) * .15px)
      at calc(57% + var(--px) * 6%) 4%,
      rgba(12,16,20,.11), rgba(12,16,20,.04) 50%, rgba(12,16,20,0) 100%);
  transition: opacity var(--t-hover-in) var(--ease-wipe);
}
.door-floor::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--w) * .38px);
  top: 0;
  width: calc(var(--w) * .80px);
  height: calc(var(--w) * .21px);
  transform: skewX(calc(var(--px) * -1.5deg + -5deg));
  background-image: radial-gradient(ellipse 62% 100% at 50% 0%,
    rgba(12,16,20,.13) 0%, rgba(12,16,20,.05) 44%, rgba(12,16,20,0) 100%);
}

.crate > .wrap,
#doors > .wrap { overflow-x: clip; }

.obj { --mark-w: 500; }

.pf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--w) * 96 / 810 * 1px) calc(var(--w) * 66 / 810 * 1px) 0;
  color: var(--ivory);
  font-weight: 600;
  text-align: left;
}
.pf-mark { width: calc(var(--w) * var(--mark-w) / 810 * 1px); height: auto; color: var(--foil); }
.pf-sp { flex: 1; }

.pf-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: max(calc(6px * var(--ss)), calc(var(--w) * 22 / 810 * 1px));
  letter-spacing: .09em;
  white-space: nowrap;
}
.pf-name { color: var(--foil); font-weight: 800; line-height: .96; }
.pf-name .ln {
  display: block;
  font-size: calc(var(--w) * var(--name-fs, 168) / 810 * 1px);
  letter-spacing: -.005em;
  white-space: nowrap;
}
.pf-rule {
  height: calc(var(--w) * 3 / 810 * 1px);
  min-height: calc(1px * var(--ss));
  background: var(--foil);
  margin: calc(var(--w) * 22 / 810 * 1px) 0;
}
.pf-meta {
  font-size: max(calc(5px * var(--ss)), calc(var(--w) * 22 / 810 * 1px));
  letter-spacing: .06em;
  margin-bottom: calc(var(--w) * 30 / 810 * 1px);
  white-space: nowrap;
}
.pf-band {
  margin: 0 calc(var(--w) * -66 / 810 * 1px);
  height: calc(var(--w) * 114 / 810 * 1px);
  min-height: calc(15px * var(--ss));
  background: var(--foil);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: calc(var(--w) * 40 / 810 * 1px);
  padding: 0 calc(var(--w) * 66 / 810 * 1px);
  font-size: max(calc(7px * var(--ss)), calc(var(--w) * 24 / 810 * 1px));
  letter-spacing: .14em;
  white-space: nowrap;
}

.f-spine { justify-content: space-between; padding-top: calc(var(--w) * .12px); }
.sp-band {
  width: 100%;
  background: var(--foil);
  color: var(--ink);
  text-align: center;
  font-size: max(calc(6px * var(--ss)), calc(var(--w) * 24 / 810 * 1px));
  letter-spacing: .06em;
  font-weight: 600;
  padding: calc(var(--w) * .016px) 0;
}
.sp-name {
  writing-mode: vertical-rl;
  color: var(--foil);
  font-size: max(calc(6px * var(--ss)), calc(var(--w) * 30 / 810 * 1px));
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}

.obj[data-tool="breaktype"] { --foil: #D86341; --name-fs: 168; }
.obj[data-tool="speaktype"] { --foil: #1D92AC; --name-fs: 168; }
.obj[data-tool="easel"]     { --foil: #6E9141; --name-fs: 208; }
.obj[data-tool="companion"] { --foil: #8D857A; --name-fs: 100; }

.obj[data-mat="press"] .glz,
.obj[data-mat="press"] .glz-spine,
.obj[data-mat="press"] .edg { display: none; }
.obj[data-mat="press"] .f { background-color: #171B20; }
.obj[data-mat="press"] .f-front {
  background-image: linear-gradient(to bottom, rgba(243,238,228,.02), rgba(243,238,228,.07));
}
.obj[data-mat="press"] .f-spine {
  background-image: linear-gradient(to right, rgba(243,238,228,.16), rgba(243,238,228,.05));
}
.obj[data-mat="press"] .pf-name,
.obj[data-mat="press"] .pf-mark { color: var(--iv-faint); }
.obj[data-mat="press"] .pf-rule { background: var(--iv-hair); }
.obj[data-mat="press"] .pf-band { background: none; color: var(--iv-faint); border-top: var(--hair) solid var(--iv-hair); }
.obj[data-mat="press"] .sp-band { background: none; color: var(--iv-faint); border-bottom: var(--hair) solid var(--iv-hair); }
.obj[data-mat="press"] .sp-name { color: var(--iv-faint); }

.obj[data-mat="dieline"] .glz,
.obj[data-mat="dieline"] .glz-spine,
.obj[data-mat="dieline"] .edg,
.obj[data-mat="dieline"] .door-floor { display: none; }
.obj[data-mat="dieline"] .f {
  background-color: var(--ivory);
  background-image: none;
  border: var(--hair) solid var(--ik-hair);
}
.obj[data-mat="dieline"] .pf,
.obj[data-mat="dieline"] .pf-name,
.obj[data-mat="dieline"] .pf-mark { color: var(--ik-faint); }
.obj[data-mat="dieline"] .pf-rule { background: var(--ik-hair); }
.obj[data-mat="dieline"] .pf-band {
  background: none; color: var(--ik-faint);
  border-top: var(--hair) dashed var(--ik-hair);
}
.obj[data-mat="dieline"] .sp-band { background: none; color: var(--ik-faint); border-bottom: var(--hair) dashed var(--ik-hair); }
.obj[data-mat="dieline"] .sp-name { color: var(--ik-faint); }

.obj { --w0: 256; }
.obj[data-size="s"] { --w0: 176; }
.obj[data-size="plate"] {
  --w0: 416;
  --rest-yaw: 0;
  --rest-pit: 0;
  padding: 0;
}
.obj[data-size="plate"] .glz { opacity: .20; }
.obj[data-size="plate"] .edg { --ed-top: .30; --ed-side: .10; }
.obj[data-size="plate"] .door-floor { display: none; }

@media (max-width: 1024px) {
  .obj, .obj[data-size="s"] { --w0: 216; }
  .obj[data-size="plate"] { --w0: 352; }
}
@media (max-width: 840px) {
  .obj, .obj[data-size="s"] { --w0: 232; }
  .obj[data-size="plate"] { --w0: 320; }
}
@media (max-width: 600px) {
  .obj, .obj[data-size="s"] { --w0: 196; }
  .obj[data-size="plate"] { --w0: 236; }
}

@media (min-resolution: 1.5dppx) { .obj { --ss: 2; } }
@media (min-resolution: 2.5dppx) { .obj { --ss: 3; } }
@media (-webkit-min-device-pixel-ratio: 1.5) { .obj { --ss: 2; } }
@media (-webkit-min-device-pixel-ratio: 2.5) { .obj { --ss: 3; } }

@media (hover: none), (pointer: coarse) {
  .door-stage { transition: none; }
  .obj { --px: 0; --py: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .obj { --px: 0; --py: 0; }
  .door-stage, .box, .glz, .edg, .door-floor { transition: none !important; }
}

.obj:active .door-stage { transform: scale(.985); transition-duration: 0s; }
.obj:active .door-floor { opacity: .74; transition-duration: 0s; }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

.obj[data-tool="breaktype"] .door-stage { view-transition-name: obj-breaktype; }
.obj[data-tool="speaktype"] .door-stage { view-transition-name: obj-speaktype; }
.obj[data-tool="easel"]     .door-stage { view-transition-name: obj-easel; }
.obj[data-tool="companion"] .door-stage { view-transition-name: obj-companion; }

.doors-row .obj[data-tool] .door-stage { view-transition-name: none; }

.doors-row .obj[data-tool="breaktype"]:focus .door-stage { view-transition-name: obj-breaktype; }
.doors-row .obj[data-tool="speaktype"]:focus .door-stage { view-transition-name: obj-speaktype; }
.doors-row .obj[data-tool="easel"]:focus .door-stage { view-transition-name: obj-easel; }
.doors-row .obj[data-tool="companion"]:focus .door-stage { view-transition-name: obj-companion; }

::view-transition-group(obj-breaktype),
::view-transition-group(obj-speaktype),
::view-transition-group(obj-easel),
::view-transition-group(obj-companion) {
  animation-duration: var(--t-wipe);
  animation-timing-function: var(--ease-mech);
}

@keyframes vt-obj-out { to { opacity: 0; } }

::view-transition-old(obj-breaktype),
::view-transition-old(obj-speaktype),
::view-transition-old(obj-easel),
::view-transition-old(obj-companion) {
  animation: vt-obj-out var(--t-fade) var(--ease-wipe) both;
  mix-blend-mode: normal;
}
::view-transition-new(obj-breaktype),
::view-transition-new(obj-speaktype),
::view-transition-new(obj-easel),
::view-transition-new(obj-companion) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes vt-obj-in { from { opacity: 0; } }

::view-transition-new(obj-breaktype):only-child,
::view-transition-new(obj-speaktype):only-child,
::view-transition-new(obj-easel):only-child,
::view-transition-new(obj-companion):only-child {
  animation: vt-obj-in var(--t-fade) var(--ease-wipe) 60ms both;
}

::view-transition-old(root) {
  animation-duration: var(--t-fade);
  animation-timing-function: var(--ease-wipe);
}
::view-transition-new(root) {
  animation-duration: var(--t-fade);
  animation-timing-function: var(--ease-wipe);
  animation-fill-mode: both;
}

.card-door {
  margin-top: 24px;
  padding-bottom: 20px;
  position: relative;
  text-align: center;
}
.card-door::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hair);
  background: var(--ik-hair);
}
.card-doorcap {
  margin-top: 12px;
  color: var(--ik-faint);
  text-align: center;
}

.crate-doors-note {
  margin-top: 12px;
  font-size: 15px;
  color: var(--ik-faint);
}