/* Unspoken site skin 0.2.000. Layer L2, UM-owned.
   Source of truth: the owner's Claude Design export, ~/.openclaw/workspace/reports/unspoken/design-export/
   (readme.md, tokens/*.css, components/core/UnspokenCard + Wordmark + IntensityDots + CardBack, guidelines/*).
   Tokens below are copied from tokens/colors.css, spacing.css and typography.css; the export itself is not edited.
   Deviation, for accessibility (WCAG AA 4.5:1): page labels and the card-footer wordmark use --label #8C877E instead
   of --muted #7A756C (4.33:1 on ink) and --faint #6B665D (3.33:1 on the card surface). Lighthouse checks both.
   Fonts: self-hosted OFL (licenses/OFL-*.txt, served at /fonts/), Instrument Serif italic + Jost variable, latin subsets. */
@font-face { font-family: "Jost"; src: url(/fonts/Jost-latin.235d8f8964.woff2) format("woff2"); font-weight: 100 900;
  font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/InstrumentSerif-Italic-latin.6ee678c33f.woff2) format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --ink: #0A0A0A; --surface-card: #111010; --border-card: #232120; --cream: #F2EDE4;
  --muted: #7A756C; --faint: #6B665D; --dot-off: #2B2926; --label: #8C877E;
  --accent: #FF2D6C; --accent-red: #C1121F; --on-accent: #0A0A0A;
  /* pack colours: OWNER DECISION 7 Nov 2026 17:25, supersedes the export (Us was red, After Dark was wine) */
  --pack-seen: #D9B991; --pack-us: #8E1B3C; --pack-wanted: #FF6247; --pack-desire: #FF2D6C; --pack-dark: #C1121F;
  --on-pack-seen: #0A0A0A; --on-pack-us: #F2EDE4; --on-pack-wanted: #0A0A0A; --on-pack-desire: #0A0A0A; --on-pack-dark: #F2EDE4;
  --card-w: 300px; --card-h: 420px; --card-radius: 14px; --card-pad: 32px; --card-gap: 32px;
  --dot-size: 5px; --dot-gap: 6px; --rule-w: 28px; --shadow-card: 0 24px 48px -24px rgba(0,0,0,0.9);
  --font-sans: "Jost", sans-serif; --font-display: "Instrument Serif", serif;
  --text-card-xl: 46px; --text-card-lg: 42px; --text-card-md: 38px; --text-card-sm: 34px; --text-card-xs: 30px;
  --text-label: 12px; --text-footer: 11px;
  --track-wordmark: 0.5em; --track-wordmark-lg: 0.55em; --track-footer: 0.45em; --track-label: 0.3em; --track-eyebrow: 0.18em;
  --pad: clamp(24px, 7vw, 72px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--cream); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--ink); font: 300 18px/1.7 var(--font-sans);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
main { flex: 1 0 auto; }
a { color: var(--accent); text-decoration: none; transition: opacity 200ms ease; }
a:hover { color: var(--cream); }
a:active { opacity: 0.7; }
a:focus-visible, summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--cream); color: var(--ink); padding: 8px 12px; z-index: 9; }
.skip:focus { left: 8px; }

/* wordmark: UNSPOKƎN set in type. The Ǝ is Jost's E mirrored (Jost has no U+018E). */
.wordmark, .backmark, .cardmark { font-family: var(--font-sans); text-transform: uppercase; white-space: nowrap; }
.rev { display: inline-block; transform: scaleX(-1); letter-spacing: 0; text-indent: 0; margin-right: var(--track-wordmark); }
.wordmark { color: var(--cream); font-weight: 200; font-size: 15px; letter-spacing: var(--track-wordmark);
  margin-right: calc(-1 * var(--track-wordmark)); }
.wordmark:hover { color: var(--cream); opacity: 0.85; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top) + 28px) var(--pad) 28px; }
.nav ul, .menu ul { list-style: none; margin: 0; padding: 0; }
.nav ul { display: flex; gap: 28px; }
.nav a, .menu a, .menu summary, .kicker, .btn, .foot, .meta, .soon, .spec span:first-child, .tiers span, .spots li {
  font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--track-label); font-size: var(--text-label);
  font-weight: 400; }
.nav a, .menu a { color: var(--label); }
.nav a:hover, .menu a:hover { color: var(--cream); }
.nav a[aria-current="page"], .menu a[aria-current="page"] { color: var(--cream); }
.menu { display: none; position: relative; }
.menu summary { cursor: pointer; list-style: none; color: var(--cream); padding: 12px 0 12px 12px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 100%; background: var(--surface-card); border: 1px solid var(--border-card);
  padding: 12px 24px; z-index: 5; min-width: 220px; }
.menu a { display: block; padding: 12px 0; }
@media (max-width: 860px) { .nav { display: none; } .menu { display: block; } }

/* sections: flat ink, generous space, a 28px accent hairline as the only ornament */
section { padding: clamp(56px, 10vw, 112px) var(--pad); max-width: 1180px; margin: 0 auto; width: 100%; }
.hero { padding-top: clamp(40px, 8vw, 96px); }
.kicker { color: var(--label); margin: 0 0 24px; }
h1, h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; line-height: 1.1; margin: 0 0 32px;
  color: var(--cream); text-wrap: balance; }
h1 { font-size: clamp(44px, 9vw, 88px); max-width: 14ch; }
h2 { font-size: clamp(32px, 5.5vw, 52px); }
p { margin: 0 0 20px; max-width: 34em; }
.prose p { font-size: clamp(18px, 2.1vw, 20px); }
.pink { color: var(--accent); }
.note { color: var(--label); font-size: 15px; }
.rule { display: block; width: var(--rule-w); height: 1px; background: var(--accent); margin: 0 0 40px; }
.scene { border-top: 1px solid var(--border-card); }
.close .owner p { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2;
  font-weight: 400; max-width: 22em; }

.actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.btn { display: inline-block; color: var(--accent); border: 1px solid var(--accent); padding: 16px 22px; }
.btn:hover { color: var(--accent); opacity: 0.85; }

/* UnspokenCard (components/core/UnspokenCard.jsx): 5:7, 14px radius, 32px pad, dots top-left, serif line, footer */
.card { --acc: var(--pack-desire);
  width: var(--card-w); max-width: 100%; aspect-ratio: 5 / 7; margin: 48px 0; border-radius: var(--card-radius);
  background: var(--surface-card); border: 1px solid var(--border-card); box-shadow: var(--shadow-card);
  padding: var(--card-pad); display: flex; flex-direction: column; justify-content: space-between; }
.p-seen { --acc: var(--pack-seen); --on-acc: var(--on-pack-seen); } .p-us { --acc: var(--pack-us); --on-acc: var(--on-pack-us); }
.p-wanted { --acc: var(--pack-wanted); --on-acc: var(--on-pack-wanted); }
.p-desire { --acc: var(--pack-desire); --on-acc: var(--on-pack-desire); } .p-dark { --acc: var(--pack-dark); --on-acc: var(--on-pack-dark); }
/* Fronts, owner print direction 7 Nov 2026 17:27: every front filled with its pack colour, on-colour line, dots and
   footer (cream on wine and red, ink on champagne, coral and pink). Backs: one shared velvet black (.back below). */
.card.front { background: var(--acc); border: none; }
.card.front .line, .card.front .cardmark { color: var(--on-acc); }
.card.front .cardmark { font-weight: 400; }
.card.front .dots i { background: var(--on-acc); opacity: 0.3; }
.card.front .dots.t1 i:nth-child(-n+1), .card.front .dots.t2 i:nth-child(-n+2), .card.front .dots.t3 i {
  background: var(--on-acc); opacity: 1; }
.card .line, .prose .card .line { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--cream);
  line-height: 1.15; margin: 0; text-wrap: pretty; max-width: none; }
.card .l-xl { font-size: var(--text-card-xl); } .card .l-lg { font-size: var(--text-card-lg); }
.card .l-md { font-size: var(--text-card-md); } .card .l-sm { font-size: var(--text-card-sm); }
.card .l-xs { font-size: var(--text-card-xs); }
.cardmark { color: var(--label); font-weight: 300; font-size: var(--text-footer); letter-spacing: var(--track-footer); }
.cardmark .rev { margin-right: var(--track-footer); }
/* CardBack, owner spec 7 Nov 17:08 (supersedes 17:02): plain velvet soft-touch matte black with a fine static grain.
   The UNSPOKƎN mark sits ONLY at the bottom right, ~75% of the card width, right-aligned to the card padding, as raised
   black-on-black spot UV; signature cards use gold foil in the same place. No hairline on backs. A slow light sheen
   crosses the mark on hover and scroll (his explicit exception to the 200-300ms rule); none with reduced motion. */
.back { position: relative; overflow: hidden; background: #0B0B0B url(/grain.svg); border-color: #1A1918; }
.emboss { position: absolute; right: var(--card-pad); bottom: var(--card-pad); width: 75%; display: block;
  filter: drop-shadow(0 -0.5px 0 rgba(0,0,0,0.9)) drop-shadow(0 0.75px 0 rgba(255,255,255,0.07)); }
.mark { display: block; aspect-ratio: 8500 / 700;
  -webkit-mask: url(/wordmark-mask.svg) right bottom / contain no-repeat; mask: url(/wordmark-mask.svg) right bottom / contain no-repeat;
  background: linear-gradient(105deg, #1E1D1C 0%, #222120 38%, #4A4845 50%, #222120 62%, #1E1D1C 100%);
  background-size: 320% 100%; background-position: 100% 0; transition: background-position 1.8s ease; }
.foil .mark { background: linear-gradient(105deg, #6E5326 0%, #B8914C 36%, #F4E2A8 50%, #B8914C 64%, #6E5326 100%);
  background-size: 320% 100%; background-position: 100% 0; }
.foil .emboss { filter: drop-shadow(0 0.75px 0 rgba(0,0,0,0.8)); }
.back:hover .mark { background-position: 0 0; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@supports (animation-timeline: view()) {
  .back .mark { animation: sheen linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .mark, .back .mark { animation: none; transition: none; background-position: 50% 0; }
}
.p-next { --acc: var(--faint); }
.backs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); gap: 40px var(--card-gap); margin: 8px 0 32px; }
.backs .card { margin: 0 0 16px; }

/* IntensityDots: three 5px dots, filled with the pack accent by level */
.dots { display: inline-flex; gap: var(--dot-gap); }
.dots i { width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: var(--dot-off); }
.dots.t1 i:nth-child(-n+1), .dots.t2 i:nth-child(-n+2), .dots.t3 i { background: var(--acc, var(--accent)); }

/* decks */
.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px var(--card-gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); }
.pack .card { margin: 0 0 24px; }
.packname { font-family: var(--font-sans); font-style: normal; font-weight: 200; font-size: 24px; letter-spacing: 0.35em;
  text-transform: uppercase; margin: 0 0 8px; display: flex; align-items: center; gap: 14px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); flex: none; }
.meta { color: var(--label); letter-spacing: var(--track-eyebrow); margin: 0 0 6px; }
.soon { color: var(--accent); margin: 0; }

/* lists */
.spec, .spots, .tiers { list-style: none; margin: 0 0 24px; padding: 0; max-width: 640px; }
.spec li { display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border-card); }
.spec li span:first-child { color: var(--label); padding-top: 4px; }
.spec li span:last-child { text-align: right; }
.spots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.spots li { color: var(--cream); padding: 16px 0; border-bottom: 1px solid var(--border-card); }
.tiers li { display: flex; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--border-card); }
.tiers .dots { --acc: var(--accent); width: 27px; }
.tiers span:last-child { color: var(--cream); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--label);
  padding: 40px var(--pad) calc(env(safe-area-inset-bottom) + 40px); border-top: 1px solid var(--border-card);
  letter-spacing: var(--track-eyebrow); }
.foot a { color: var(--label); text-transform: none; letter-spacing: 0.04em; }
.foot a:hover { color: var(--cream); }

/* 0.3.000 send a card + shared card page. The flip is a deliberate exception to the 200-300ms motion rule (like the
   sheen); it is instant under prefers-reduced-motion. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.btn { background: none; font-family: var(--font-sans); cursor: pointer; }
.btn.solid { background: var(--accent); color: var(--on-accent); }
.btn.solid:hover { color: var(--on-accent); }
button.btn:focus-visible, .flip:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }
.btn:disabled { opacity: 0.5; cursor: default; }
.flip { display: block; appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 40px 0 8px;
  width: var(--card-w); max-width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer;
  perspective: 1600px; -webkit-tap-highlight-color: transparent; border-radius: var(--card-radius); }
.flip-in { display: grid; transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.2, .7, .2, 1); }
.flip-in > .face { grid-area: 1 / 1; margin: 0; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-in { -webkit-transform-style: preserve-3d; }
.flip-in > .back { transform: rotateY(0deg) translateZ(1px); }
.flip-in > .front { transform: rotateY(180deg) translateZ(1px); }
.flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
/* WebKit doesn't always honour backface-visibility on these faces: swap visibility at the half-turn as well */
.flip-in > .face { transition: visibility 0s linear 250ms; }
.flip[aria-pressed="false"] .flip-in > .front, .flip[aria-pressed="true"] .flip-in > .back { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .flip-in > .face { transition: none; } }
.flip .line { display: block; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }
.share { margin-top: 24px; }
.share .rule { margin-bottom: 32px; }
.share .actions { margin-top: 16px; }
.status { min-height: 1.7em; color: var(--cream); margin: 16px 0 0; }
.mail { max-width: 420px; margin-top: 24px; }
.mail label { display: block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--track-label);
  font-size: var(--text-label); color: var(--label); margin: 20px 0 8px; }
.mail .opt { text-transform: none; letter-spacing: 0.04em; }
.mail input, .mail textarea { width: 100%; background: var(--surface-card); color: var(--cream); border: 1px solid var(--border-card);
  border-radius: 0; padding: 14px; font: 300 18px/1.5 var(--font-sans); }
.mail input:focus, .mail textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.mail textarea { resize: vertical; min-height: 96px; }
.hint { color: var(--label); font-size: 15px; margin: 8px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.reveal .said { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 4.5vw, 36px); line-height: 1.25;
  margin: 32px 0 12px; }
.small { font-size: 15px; }

/* Moments on Home (owner direction 8 Nov 2026 01:08). Image slots: flat ink until the owner's hero photos arrive. */
.moments { border-top: 1px solid var(--border-card); }
.moment { margin: 0 0 clamp(72px, 12vw, 128px); }
.moment:last-child { margin-bottom: 0; }
.moment h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 5.5vw, 48px);
  line-height: 1.1; margin: 0 0 20px; }
.slot { width: 100%; max-width: 720px; aspect-ratio: 4 / 5; max-height: 70vh; background: var(--ink);
  border: 1px solid var(--border-card); border-radius: var(--card-radius); margin: 0 0 40px; }
.moment .card { margin: 32px 0 40px; }
.moment .card.facedown { transform: rotate(-4deg); }
/* Intention (owner direction 8 Nov 2026 01:11), Home before Moments and top of Our story */
.intention { border-top: 1px solid var(--border-card); }
.intention .pull { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2;
  margin-top: 40px; max-width: 22em; }
/* Photos (0.3.003, owner 8 Nov 2026 01:43): owner-supplied concept renders. Home hero is full bleed: on a phone a 4:5
   crop that keeps the hand and the card, the headline below it on ink; from 861px the full 16:9 frame with the
   headline over its dark left. No scrim band, no faded top; the ink continues to the very bottom. */
.hero-photo { max-width: none; padding: 0; position: relative; }
.hero-media picture, .photo picture { display: block; }
/* phone: the crop fills the width and leaves room for the headline on the first screen (height from the viewport,
   not the image, so nothing shifts when it loads) */
/* 0.4.002 (owner 01:59, pixelated): the full 16:9 frame, never a crop, never wider than its source (1280 px today) */
.hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); }
.hero-text { max-width: 1180px; margin: 0 auto; padding: 28px var(--pad) 0; }
.hero-text h1 { margin-bottom: 0; }
.hero-rest { padding-top: 40px; }
@media (min-width: 861px) {
  .hero-photo { max-width: 1280px; margin: 0 auto; }
  .hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad);
    margin: 0; max-width: none; }
  .hero-text > * { max-width: 40%; }
  .hero-text h1 { font-size: clamp(48px, 6vw, 84px); max-width: 9ch; }
  .hero-text .kicker { color: var(--cream); opacity: 0.8; }
}
.photo { margin: 8px 0 48px; max-width: 720px; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--card-radius);
  background: var(--surface-card); }
.intention .photo { margin: 16px 0 40px; }
/* 0.3.004 Moments photo (owner 8 Nov 01:45): replaces the flat-ink coffee slot, 16:9 like the other photos */
.moment-photo { margin: 0 0 40px; }
/* Places to leave one (owner direction 8 Nov 01:51): Home after Moments, and /how-to-use/. Phone: a scroll-snap row that
   runs to the screen edges; desktop: a three-column grid. Tiles are 4:5 crops centred on the card in each photo. */
.places { border-top: 1px solid var(--border-card); }
.places-row { list-style: none; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 24px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 8px; scroll-padding: 0 var(--pad);
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.places-row::-webkit-scrollbar { display: none; }
.places-row:focus-visible { outline: 1px solid var(--cream); outline-offset: 4px; }
.place { flex: 0 0 78%; scroll-snap-align: start; }
.place .tile { margin: 0; max-width: none; }
.place .tile img { aspect-ratio: 16 / 9; }   /* 0.4.002: whole frame, no cover crop (a crop magnifies the pixels) */
.place figcaption { margin-top: 14px; font-size: 16px; line-height: 1.45; }
.place .pname { display: block; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 12px; color: var(--label); margin-bottom: 6px; }
@media (min-width: 861px) {
  .places-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; overflow: visible;
    margin: 32px 0 0; padding: 0; }
}
/* After Dark showcase (owner 8 Nov 01:53): /decks/ only, the one After Dark front on a public page, in the photo only */
.showcase { border-top: 1px solid var(--border-card); }
.showcase .photo { max-width: none; margin: 0 0 20px; }
/* 0.3.005 sign-up (owner 8 Nov 01:55): consent checkbox unticked by default, invalid fields outlined */
.mail .lead { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 4vw, 30px); margin: 0 0 8px; }
.mail .check { display: flex; gap: 12px; align-items: flex-start; margin: 24px 0 0; }
.mail .check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.mail .check label { margin: 0; text-transform: none; letter-spacing: 0.02em; font-size: 16px; color: var(--cream); }
.mail [aria-invalid="true"] { border-color: var(--accent); }
.mail .note a, .optin a { color: var(--cream); }
.optin { padding-top: 0; }
.prose h2 { font-size: clamp(26px, 4vw, 34px); margin: 40px 0 12px; }

/* 0.5.000 Kickstarter pop-up (modal <dialog>, top layer: no layout shift) + waitlist + account */
.wl-open, .wl-open body { overflow: hidden; }
.wl-dialog { margin: auto; padding: 0; border: 1px solid var(--border-card); background: var(--ink); color: var(--cream);
  width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.wl-dialog::backdrop { background: rgba(10, 10, 10, 0.86); }
.wl-in { position: relative; padding: 40px 28px 28px; }
.wl-in h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(30px, 7vw, 40px); line-height: 1.15; margin: 0 0 12px; }
.wl-sign { margin: 0; }
.wl-x { position: absolute; top: 4px; right: 4px; width: 48px; height: 48px; background: none; border: 0; color: var(--cream);
  font: 300 30px/1 var(--font-sans); cursor: pointer; }
.wl-x:focus-visible { outline: 1px solid var(--accent); outline-offset: -6px; }
@media (max-width: 560px) {
  /* full-bleed on phones: ink to every edge, content inside the safe areas */
  .wl-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .wl-in { padding: calc(48px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right))
    calc(32px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left)); }
  .wl-x { top: calc(4px + env(safe-area-inset-top)); right: calc(4px + env(safe-area-inset-right)); }
}
.wl-home { padding: 64px var(--pad); max-width: 760px; margin: 0 auto; }
.wl-home h2, .account h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(28px, 4vw, 36px); margin: 8px 0 12px; }
.account h2 { margin-top: 48px; }
.ac-box { min-height: 100vh; }
.ac-cards { list-style: none; padding: 0; margin: 0; }
.ac-cards li { padding: 10px 0; border-bottom: 1px solid var(--border-card); }
.ac-cards a { color: var(--cream); text-decoration: underline; text-underline-offset: 3px; }
.wl-dialog:focus, .wl-dialog:focus-visible { outline: none; }

/* ==== HOME NEXT-LEVEL (0.5.0, owner 8 Nov 2026 08:10: "super sexy, front page next level"). Home only (.hx and friends).
   Hero: full 16:9 frame at every width (0.4.002, never a crop), stacked slides, 1.6s crossfade, Ken Burns to 1.06 inside
   the frame (pixel gate: HERO_SIZES asks for 106vw). Per-slide scrim on desktop only, where the headline sits on the
   photo; on a phone the headline is on ink below the frame (no band, no faded top). Motion is off under reduced motion. */
body:has(.hx) { background: linear-gradient(rgba(10,10,10,0.6), rgba(10,10,10,0.6)), url(/grain.svg), var(--ink); }   /* velvet: grain at ~40% */
.hx { max-width: none; padding: 0; position: relative; }
.hx-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); }
.hx-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hx-slide.is-on { opacity: 1; z-index: 1; }
.hx-slide.was-on { opacity: 0; z-index: 0; }
.hx-slide img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.hx-slide[data-kb="0"] img { transform-origin: 70% 40%; } .hx-slide[data-kb="1"] img { transform-origin: 40% 60%; }
.hx-slide[data-kb="2"] img { transform-origin: 60% 70%; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.hx.live .hx-slide.is-on img, .hx.live .hx-slide.was-on img { animation: kb 8.2s linear both; }
.hx.paused .hx-slide img, .hx.paused .hx-dash i { animation-play-state: paused !important; }
/* dashes: the fill is the clock (home.js advances on animationend), 6.5 s per slide */
.hx-ctl { display: flex; align-items: center; gap: 4px; padding: 14px var(--pad) 0; position: relative; z-index: 2; }
.hx-ctl { visibility: hidden; }   /* space reserved from first paint, shown at window load: no layout shift (0.5.001 CLS fix) */
.hx.live .hx-ctl { visibility: visible; }
.hx-dash, .hx-pause { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 14px 0; margin: 0;
  cursor: pointer; width: 34px; -webkit-tap-highlight-color: transparent; }
.hx-dash i { display: block; height: 2px; background: rgba(242, 237, 228, 0.28); position: relative; overflow: hidden; }
.hx-dash i::after { content: ""; position: absolute; inset: 0; background: var(--cream); transform: scaleX(0); transform-origin: 0 50%; }
.hx-dash[aria-current="true"] i::after { animation: dash 6.5s linear forwards; }
.hx.paused .hx-dash i::after { animation-play-state: paused; }
@keyframes dash { to { transform: scaleX(1); } }
.hx-pause { width: 44px; height: 44px; padding: 0; margin-left: 10px; display: grid; place-items: center; }
.hx-pause i { width: 10px; height: 12px; border-left: 3px solid var(--cream); border-right: 3px solid var(--cream); opacity: 0.8; }
.hx-pause[aria-pressed="true"] i { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent var(--cream); }
.hx-dash:focus-visible, .hx-pause:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.hx .hero-text { padding-top: 18px; }
.hx h1 { font-size: clamp(52px, 13.5vw, 96px); line-height: 1.02; letter-spacing: -0.01em; }
.hx h1 em, .hot { font-style: italic; color: var(--accent); }
/* floating card: a small tilted card on ink with a soft pink glow; tap to turn it over */
.hx-float { display: flex; align-items: center; gap: 28px; margin: 36px 0 8px; }
.hx-card { flex: none; width: 168px; position: relative; transform: rotate(-5deg); transition: transform 600ms cubic-bezier(.2,.7,.2,1); }
.hx-card::before { content: ""; position: absolute; inset: 6% -18% -4%; background: radial-gradient(closest-side, rgba(255, 45, 108, 0.5), transparent);
  filter: blur(22px); z-index: -1; }
.hx-card .back { border: 1px solid rgba(255, 45, 108, 0.5); box-shadow: 0 30px 60px -24px rgba(255, 45, 108, 0.45), var(--shadow-card); }
.hx-card .back .mark { background-position: 50% 0; }
.hx-card:hover, .hx-card:focus-within { transform: rotate(-2deg) translateY(-4px); }
.hx-card .flip { margin: 0; width: 100%; }
.hx-card .card { --card-pad: 16px; padding: var(--card-pad); }
.hx-card .card .line { font-size: 21px !important; line-height: 1.12; }
.hx-card .card .cardmark { font-size: 7px; letter-spacing: 0.4em; }
.hx-card .emboss { right: 14px; bottom: 14px; }
.hx-cta { min-width: 0; }
.hx-cta .kicker { margin: 0 0 14px; color: var(--cream); opacity: 0.85; letter-spacing: 0.22em; }
.hx-cta .btn { padding: 15px 20px; }
@media (min-width: 861px) {
  .hx { max-width: 1672px; margin: 0 auto; }
  .hx .hero-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center;
    padding: 0 var(--pad); margin: 0; max-width: none; pointer-events: none; }
  .hx .hero-text > * { max-width: 46%; pointer-events: auto; }
  .hx h1 { font-size: clamp(56px, 6.4vw, 104px); max-width: 9ch; text-shadow: 0 2px 30px rgba(10, 10, 10, 0.45); }
  .hx .hero-text .kicker { color: var(--cream); opacity: 0.85; }
  .hx-float { margin-top: clamp(20px, 3vw, 44px); }
  .hx-card { width: clamp(120px, 11vw, 172px); }
  .hx-card .card .line { font-size: clamp(15px, 1.35vw, 21px) !important; }
  .hx-slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.62) 30%, rgba(10,10,10,0.12) 58%, transparent 72%),
      radial-gradient(120% 90% at 65% 50%, transparent 60%, rgba(10,10,10,0.35) 100%); }
  .hx-slide[data-scrim="soft"]::after { background: linear-gradient(90deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.45) 30%, transparent 60%),
      radial-gradient(120% 90% at 65% 50%, transparent 60%, rgba(10,10,10,0.3) 100%); }
  .hx-slide[data-scrim="strong"]::after { background: linear-gradient(90deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.86) 34%, rgba(10,10,10,0.4) 56%, transparent 74%); }
  .hx-ctl { position: absolute; left: var(--pad); bottom: clamp(16px, 2.4vw, 36px); padding: 0; z-index: 3; }
}
@media (max-width: 860px) { .hx-ctl { padding-top: 6px; } .hx .hero-text { padding-top: 6px; } }
@media (max-width: 380px) { .hx-card { width: 140px; } .hx-card .card .line { font-size: 18px !important; } .hx-float { gap: 20px; } }

/* marquee: two rows of short desire lines (pool only), drifting; static and wrapped under reduced motion */
.marq { overflow: hidden; border-top: 1px solid var(--border-card); border-bottom: 1px solid var(--border-card);
  padding: clamp(18px, 3vw, 28px) 0; }
.marq-in { display: flex; width: max-content; animation: marq 70s linear infinite; }
.marq.marq-rev .marq-in { animation-direction: reverse; animation-duration: 80s; }
.marq:hover .marq-in { animation-play-state: paused; }
.marq ul { display: flex; list-style: none; margin: 0; padding: 0; }
.marq li { font-family: var(--font-display); font-style: italic; font-size: clamp(26px, 4vw, 44px); line-height: 1.2;
  white-space: nowrap; padding: 0 0.5em; color: var(--cream); display: flex; align-items: center; gap: 1em; }
.marq li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; margin-left: 0.5em; }
.marq li:nth-child(3n+2) { color: var(--accent); }
@keyframes marq { to { transform: translateX(-50%); } }

/* scroll reveal (home.js marks only what starts below the first screen) */
.rv { opacity: 0; transform: translateY(28px); transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
/* subtle parallax on the Moments photos where scroll timelines exist (scale 1.06 max: pixel gate) */
.moment-photo picture { overflow: hidden; border-radius: var(--card-radius); }
@supports (animation-timeline: view()) {
  .moment-photo img { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .places .place:nth-child(3n+2) .tile { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
}
@keyframes drift { from { transform: scale(1.06) translateY(-2.5%); } to { transform: scale(1.06) translateY(2.5%); } }
@keyframes rise { from { transform: translateY(36px); } to { transform: translateY(0); } }

/* sticky phone CTA: slides up once the hero button has scrolled away; ink runs under the home indicator */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; visibility: hidden;
    padding: 12px calc(env(safe-area-inset-right) + 20px) calc(env(safe-area-inset-bottom) + 12px) calc(env(safe-area-inset-left) + 20px);
    background: rgba(10, 10, 10, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-card); transform: translateY(100%);
    transition: transform 400ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 400ms; }
  .sticky-cta.on { transform: none; visibility: visible; transition: transform 400ms cubic-bezier(.2,.7,.2,1), visibility 0s; }
  .sticky-cta .btn { display: block; text-align: center; padding: 15px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-slide, .hx-card { transition: none; }
  .hx-ctl { display: none; }
  .hx .hx-slide img, .hx-dash i, .hx-dash i::after, .moment-photo img, .places .tile { animation: none !important; }
  .marq-in { animation: none; width: auto; }
  .marq ul { flex-wrap: wrap; justify-content: center; padding: 0 var(--pad); }
  .marq ul[aria-hidden] { display: none; }
  .marq li { white-space: normal; }
  .rv { opacity: 1; transform: none; transition: none; }
  .sticky-cta { transition: none; }
}
/* ==== END HOME NEXT-LEVEL */

/* 0.6.000 Journal (owner 8 Nov 2026 08:12): index + posts. Same ink/cream system; the post's pack colour is the accent
   (swatch, hairline, pull quote rule, link underline). Links in text are underlined (never colour alone). */
.post-head { padding: clamp(40px, 8vw, 96px) var(--pad) 0; max-width: 1180px; margin: 0 auto; }
.post-head h1 { font-size: clamp(40px, 7.5vw, 76px); max-width: 16ch; margin-bottom: 24px; }
.post-head .kicker a, .feedlink a { color: var(--label); }
.post-head .kicker a:hover, .feedlink a:hover { color: var(--cream); }
.post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--label); font-size: 15px;
  letter-spacing: 0.04em; margin: 0 0 8px; }
.post-meta .swatch, .post-item .swatch { width: 8px; height: 8px; }
.post-meta .tag { color: var(--cream); text-transform: uppercase; letter-spacing: var(--track-eyebrow); font-size: 12px; }
.draft-banner { border: 1px solid var(--acc, var(--accent)); color: var(--cream); padding: 14px 18px; margin: 24px 0 0;
  font-size: 16px; max-width: 34em; }
.post-body { padding-top: 40px; }
.journal { max-width: 38em; }
.journal p { line-height: 1.75; }
.journal h2 { font-size: clamp(28px, 4.4vw, 38px); margin: 56px 0 16px; }
.journal a, .lede a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--acc, var(--accent));
  text-decoration-thickness: 1px; text-underline-offset: 3px; }
.journal a:hover { color: var(--acc, var(--accent)); }
.journal .btn { text-decoration: none; }
.journal .btn.solid { color: var(--on-accent); }
.pull { margin: 48px 0; padding: 0 0 0 24px; border-left: 1px solid var(--acc, var(--accent)); }
.pull p, .journal .pull p { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.2; color: var(--cream); margin: 0; max-width: 20em; }
.post-card { margin: 56px 0; }
.post-card .card { margin: 0; }
.post-card .actions { margin-top: 28px; }
.post-next .next { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 4.6vw, 40px); line-height: 1.2; }
.post-next .next a { color: var(--cream); }
.post-next .next a:hover { color: var(--accent); }
.lede { font-size: clamp(19px, 2.3vw, 22px); }
.journal-list { padding-top: 0; }
.posts { list-style: none; margin: 0; padding: 0; max-width: 820px; }
.post-item { padding: 40px 0; border-top: 1px solid var(--border-card); }
.post-item h2 { font-size: clamp(30px, 5vw, 44px); margin: 12px 0 14px; }
.post-item h2 a { color: var(--cream); }
.post-item h2 a:hover { color: var(--acc); }
.post-item > p:last-child { color: var(--cream); opacity: 0.86; margin: 0; }
.feedlink { margin-top: 32px; }
.journal .card.front .line { color: var(--on-acc); }   /* .prose .card .line (cream) would win otherwise */

/* ==== HOME NEXT-LEVEL: After Dark on /decks/ (owner add 8 Nov). Velvet grain, a low red glow behind the drawer photo,
   gold-leaning type, scroll reveal by CSS scroll timeline (no script on /decks/; static where unsupported or with
   reduced motion). The photo keeps its full 16:9 frame (pixel gate). */
.ad-velvet { position: relative; isolation: isolate; padding-top: clamp(72px, 12vw, 136px); padding-bottom: clamp(72px, 12vw, 136px); }
.ad-velvet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 58%, rgba(193, 18, 31, 0.30), transparent 72%),
    linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.55)), url(/grain.svg); }
.ad-velvet .kicker { color: #FF5A66; }   /* After Dark red lifted for AA on ink (6.5:1) */
.ad-velvet h2 { font-size: clamp(38px, 6.4vw, 72px); max-width: 14ch; margin-bottom: 40px; }
.ad-velvet .showcase-photo img { box-shadow: 0 40px 90px -30px rgba(193, 18, 31, 0.65), 0 0 0 1px rgba(193, 18, 31, 0.35); }
.ad-words { max-width: 36em; margin-top: 36px; }
.ad-words p:not(.meta) { font-size: clamp(18px, 2.1vw, 21px); }
.ad-words p:nth-child(2):not(.meta) { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.25; color: #F4E2A8; }
.ad-words .meta { margin-top: 28px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ad-velvet > * { animation: ad-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes ad-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
/* ==== END HOME NEXT-LEVEL (After Dark) */

/* ==== AFTER DARK 18+ (0.8.000, owner 8 Nov 2026 08:38). Adult pack colours (owner brief): After Dark red with gold
   type (pale foil gold, 4.8:1), Reply black with gold, Yes Sir oxblood with silver, Slut hot pink with black. */
:root { --pack-adark: #C1121F; --on-pack-adark: #F4E2A8; --pack-reply: #0A0A0A; --on-pack-reply: #D4AF37;
  --pack-yessir: #4A0E17; --on-pack-yessir: #D9DCE0; --pack-slut: #FF2D6C; --on-pack-slut: #0A0A0A; }
.p-adark { --acc: var(--pack-adark); --on-acc: var(--on-pack-adark); } .p-reply { --acc: var(--pack-reply); --on-acc: var(--on-pack-reply); }
.p-yessir { --acc: var(--pack-yessir); --on-acc: var(--on-pack-yessir); } .p-slut { --acc: var(--pack-slut); --on-acc: var(--on-pack-slut); }
.card.front.p-reply { border: 1px solid #2A2414; }
.btn.quiet { color: var(--cream); border-color: var(--border-card); }
.btn:disabled { opacity: 0.5; }
button.btn { background: none; font: inherit; cursor: pointer; }
.ad-draft { border: 1px solid var(--accent); color: var(--cream); padding: 12px 16px; margin: 24px 0 0; font-size: 15px; }
.ad-pack { border-top: 1px solid var(--border-card); }
.ad-pack .packname { color: var(--acc); }
.p-reply .packname, .p-yessir .packname { color: var(--on-acc); }
.ad-cards { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ad-cards .card { margin: 0; width: 100%; padding: 18px; }
.ad-cards .card .line { font-size: clamp(17px, 4.6vw, 24px); }
.ad-cards .todo .line { opacity: 0.8; font-size: 15px; }
.ad-pre { border-left: 2px solid var(--acc); padding: 4px 0 4px 18px; margin: 24px 0; max-width: 62ch; }
.ad-pre h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 26px; margin: 0 0 8px; }
.ad-cite { margin-top: 12px; text-transform: none; letter-spacing: 0.04em; }
.ad-forget { font-size: 13px; }
#ad-room h1:focus { outline: none; }
/* ==== END AFTER DARK 18+ */
/* 0.10.000 After Dark landing (indexable at launch) above the age gate */
.ad-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.ad-list li { display: flex; align-items: center; gap: 12px; }
.ad-list strong { font-weight: 400; color: var(--cream); }
.ad-gate { padding-top: 0; }
.ad-box { border: 1px solid var(--border-card); padding: clamp(20px, 5vw, 40px); max-width: 720px; }
.ad-box h2 { margin-top: 0; }
.ad-box .actions { margin-top: 24px; }
.p-power { --acc: var(--pack-yessir); } .p-hers { --acc: var(--pack-slut); }   /* neutral landing swatch names (indexable HTML) */
/* parent decision 8 Nov: the After Dark pack section inside /after-dark/ wears 0.6.002's velvet + red glow */
.ad-pack.ad-velvet .packname { color: var(--cream); font-size: clamp(38px, 6.4vw, 72px); }
.ad-pack.ad-velvet .ad-words p:nth-child(2):not(.meta) { color: #F4E2A8; }
.ad-pack.ad-velvet .showcase-photo { max-width: none; margin: 0 0 8px; }
/* 0.11.000 country picker (phone.js combobox) + mobile with its dial code; one free card locked state */
.mail .cc { position: relative; }
.mail .cc-flag { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; line-height: 1;
  pointer-events: none; }
.mail .cc .cc-in { padding-left: 48px; }
.mail .cc-list { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; max-height: 280px; overflow-y: auto;
  margin: 0; padding: 4px 0; list-style: none; background: var(--surface-card); border: 1px solid var(--accent);
  border-top: 0; overscroll-behavior: contain; }
.mail .cc-list li { padding: 12px 14px; font: 300 17px/1.35 var(--font-sans); color: var(--cream); cursor: pointer; }
.mail .cc-list li[aria-selected="true"] { background: var(--border-card); outline: 1px solid var(--accent); outline-offset: -1px; }
.mail .cc-list .cc-none { color: var(--label); cursor: default; }
.mail .tel { display: flex; align-items: stretch; }
.mail .tel .dial { flex: none; display: flex; align-items: center; padding: 0 12px; min-width: 64px; justify-content: center;
  background: var(--ink); border: 1px solid var(--border-card); border-right: 0; color: var(--label);
  font: 300 18px/1 var(--font-sans); }
.mail .tel input { flex: 1; min-width: 0; }
.locked { margin-top: 24px; }
.locked .lead { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 4vw, 30px); margin: 0 0 8px; }
.locked .lead:focus { outline: none; }
.locked .small a { color: var(--cream); }

/* ==== 0.17.000 A+ PASS (owner 8 Nov 10:48 "Go a+"). Home only. Spacing scale: 8 16 24 40 64 104 (--s1..--s6).
   Champagne-gold hairlines, the velvet card to turn over, statement band, the box concept, Kickstarter strip. */
:root { --gold: #D4AF37; --gold-soft: rgba(212, 175, 55, 0.38); --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: clamp(48px, 8vw, 64px); --s6: clamp(72px, 12vw, 104px); }
.gold-rule { display: block; width: 56px; height: 1px; background: var(--gold); margin: 0 auto var(--s4); }
.hx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.hx-down { color: var(--cream); opacity: 0.85; font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 14px 0; border-bottom: 1px solid var(--gold-soft); }
.hx-down:hover { color: var(--gold); }
/* editorial rhythm: a big first line, short paragraphs, air */
.hero-rest .owner p:first-child, .scene .owner p:first-of-type { font-family: var(--font-display); font-style: italic;
  font-size: clamp(30px, 5vw, 46px); line-height: 1.14; max-width: 20ch; margin-bottom: var(--s4); }
.hero-rest .owner p, .scene .owner p, .intention .prose p, .for-him .prose p { max-width: 34ch; }
.hero-rest .owner p + p, .intention .prose p + p { margin-top: var(--s3); }
.scene, .intention, .for-him, .box, .ks-strip, .turn { padding-top: var(--s6); padding-bottom: var(--s6); }
.scene, .intention { border-top-color: var(--gold-soft); }
@media (min-width: 861px) {
  .scene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s5); align-items: start; }
  .scene > .kicker { grid-column: 1 / -1; }
  .scene > .photo { grid-column: 2; grid-row: 2; margin: 0; }
  .scene > .owner { grid-column: 1; grid-row: 2; }
}
/* the card to turn over */
.turn { display: grid; gap: var(--s5); align-items: center; border-top: 1px solid var(--gold-soft); }
@media (min-width: 861px) { .turn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .turn-stage { order: 2; } }
.turn h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(36px, 6vw, 60px); line-height: 1.05; margin: 0 0 var(--s2); }
.turn-hint { color: var(--gold); font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; margin: 0 0 var(--s4); }
.turned .turn-hint { visibility: hidden; }
.turn-stage { perspective: 1400px; display: grid; place-items: center; padding: var(--s3) 0; }
.turn-tilt { position: relative; width: min(300px, 74vw); --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-4deg); transform-style: preserve-3d; transition: transform 500ms cubic-bezier(.2,.7,.2,1);
  touch-action: manipulation; }
.turn-tilt::before { content: ""; position: absolute; inset: 10% -14% -8%; z-index: -1; filter: blur(30px);
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.22), rgba(255, 45, 108, 0.18) 55%, transparent); }
.turn-under { position: absolute; inset: 0; border-radius: var(--card-radius); background: #0B0B0B url(/grain.svg);
  border: 1px solid #1F1D1B; transform: rotate(7deg) translate(14px, 6px); box-shadow: var(--shadow-card); }
.turn .flip { margin: 0; width: 100%; position: relative; cursor: pointer; }
.turn .card { width: 100%; max-width: none; height: auto; aspect-ratio: 300 / 420; }
.turn .back { border: 1px solid var(--gold-soft);
  box-shadow: 0 40px 70px -30px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05); }
.turn .back::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(212, 175, 55, 0.22); border-radius: calc(var(--card-radius) - 6px); pointer-events: none; }
.turn .back .mark { background-position: 50% 0; }
.turn .emboss { width: 78%; }
.turn .flip:hover .flip-in { transform: translateY(-4px) rotateY(-8deg); }
.turn .flip[aria-pressed="true"]:hover .flip-in, .turn .flip[aria-pressed="true"] .flip-in { transform: rotateY(180deg); }
.turn .flip-in { transition-duration: 800ms; }
@media (prefers-reduced-motion: reduce) {
  .turn-tilt { transform: rotate(-4deg); transition: none; }
  .turn .flip-in, .turn .flip:hover .flip-in, .turn .flip[aria-pressed="true"] .flip-in { transform: none; }
  .turn .flip-in > .front { transform: none; }
  .turn .flip-in > .face { visibility: visible !important; transition: opacity 400ms ease; }
  .turn .flip[aria-pressed="false"] .flip-in > .front, .turn .flip[aria-pressed="true"] .flip-in > .back { opacity: 0; }
}
/* statement band */
.statement { max-width: none; text-align: center; padding: var(--s6) var(--pad); border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft);
  background: radial-gradient(80% 120% at 50% 0%, rgba(142, 27, 60, 0.28), transparent 70%); }
.statement .huge { font-family: var(--font-display); font-style: italic; font-size: clamp(54px, 13vw, 168px); line-height: 0.95;
  letter-spacing: -0.015em; margin: 0 auto; max-width: 11ch; text-wrap: balance; }
.for-him h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 5vw, 48px); margin: 0 0 var(--s4); max-width: 16ch; }
.for-him .pull { font-family: var(--font-display); font-style: italic; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; color: var(--accent); margin-top: var(--s4); }
/* in the box: drawn concept, no photo */
.box { border-top: 1px solid var(--gold-soft); }
.box h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(36px, 6vw, 60px); margin: 0 0 var(--s2); }
.box-lead { max-width: 34ch; margin: 0 0 var(--s5); }
.bx { margin: 0 0 var(--s5); }
.bx-scene { position: relative; width: min(560px, 100%); aspect-ratio: 16 / 11; margin: 0 auto; }
.bx-base { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 46%; border-radius: 6px;
  background: linear-gradient(160deg, #F4E2A8 0%, #D4AF37 30%, #9C7A2A 72%, #6E5326 100%);
  box-shadow: 0 40px 60px -30px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -10px 24px rgba(60, 40, 10, 0.4); }
.bx-base::before { content: ""; position: absolute; inset: 6% 5% auto; height: 18%; border-radius: 3px; background: rgba(40, 28, 8, 0.55); }
.bx-c { position: absolute; bottom: 70%; width: 15%; aspect-ratio: 300 / 420; border-radius: 6px; background: var(--acc);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.7); }
.bx-c:nth-child(1) { left: 12%; transform: rotate(-12deg); } .bx-c:nth-child(2) { left: 27%; transform: rotate(-6deg); }
.bx-c:nth-child(3) { left: 42.5%; transform: rotate(0deg) translateY(-6%); } .bx-c:nth-child(4) { left: 58%; transform: rotate(6deg); }
.bx-c:nth-child(5) { left: 73%; transform: rotate(12deg); border: 1px solid #3A3220; }
.bx-lid { position: absolute; left: 14%; right: 2%; top: 0; height: 40%; border-radius: 6px; background: #0B0B0B url(/grain.svg);
  border: 1px solid #1F1D1B; transform: rotate(-7deg) translateY(-4%); box-shadow: 0 30px 50px -24px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.06); }
.bx-lid .emboss { right: 7%; bottom: 16%; width: 58%; }
.bx-lid .mark { background: linear-gradient(105deg, #6E5326 0%, #B8914C 36%, #F4E2A8 50%, #B8914C 64%, #6E5326 100%); background-size: 320% 100%; background-position: 50% 0; }
.bx figcaption { text-align: center; color: var(--label); font-size: var(--text-label); letter-spacing: 0.08em; margin-top: var(--s3); }
.concept { display: inline-block; border: 1px solid var(--gold-soft); color: var(--gold); padding: 2px 8px; margin-right: 8px;
  letter-spacing: var(--track-label); text-transform: uppercase; font-size: 10px; }
.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s3) var(--s2); }
.chip { display: grid; gap: var(--s1); justify-items: start; }
.chip-card { display: block; width: 100%; aspect-ratio: 300 / 420; border-radius: 8px; background: var(--acc); box-shadow: var(--shadow-card); }
.chip.p-reply .chip-card { border: 1px solid #3A3220; }
.chip-name { font-size: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--cream); }
.chips-private { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border-card); }
.chips-private .kicker { color: var(--gold); margin-bottom: var(--s3); }
.chips.quiet { grid-template-columns: repeat(auto-fill, minmax(72px, 96px)); }
.chips.quiet .chip-card { opacity: 0.55; filter: saturate(0.6); background: linear-gradient(var(--acc), var(--acc)), #0B0B0B; }
.chips.quiet .chip-name { color: var(--label); }
/* Kickstarter strip */
.ks-strip { max-width: none; text-align: center; border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft);
  background: linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.55)), radial-gradient(70% 140% at 50% 100%, rgba(255, 45, 108, 0.22), transparent 70%); }
.ks-strip .kicker { color: var(--gold); }
.ks-strip h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(40px, 7vw, 80px); margin: 0 auto var(--s2); max-width: 14ch; }
.ks-strip p { margin-left: auto; margin-right: auto; }
.ks-strip .actions { justify-content: center; margin-top: var(--s4); }
/* the sticky bar never sits on the last lines: room under the page on phones */
@media (max-width: 860px) { body:has(#sticky-cta) main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
/* ==== END 0.17.000 */
.ks-form { max-width: 560px; margin: var(--s5) auto 0; text-align: left; }
.ks-form h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(24px, 3.4vw, 30px); margin: 0 0 var(--s3); text-align: center; }
.ks-strip .ks-form .actions { justify-content: flex-start; margin-top: var(--s3); }
.turn, .box, .statement { overflow-x: clip; }
.turn { gap: var(--s4); }
.turn h2 { margin: 0; }
.turn-foot .turn-hint { margin-bottom: var(--s3); }
@media (max-width: 860px) { .turn-tilt { width: min(250px, 64vw); } .turn-foot { text-align: center; } .turn-foot .actions { justify-content: center; } }
@media (min-width: 861px) {
  .turn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--s5); row-gap: var(--s4); }
  .turn-copy { grid-column: 1; grid-row: 1; align-self: end; } .turn-foot { grid-column: 1; grid-row: 2; align-self: start; }
  .turn-stage { grid-column: 2; grid-row: 1 / span 2; order: 0; }
}
.chips-private .note { margin-top: var(--s3); }
.founder { border-top: 1px solid var(--gold-soft); }
.founder .gold-rule { margin: 0 0 var(--s4); }
.founder h2 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(32px, 5vw, 48px); margin: 0 0 var(--s4); }
.founder .prose p { max-width: 38ch; }
.founder .prose p:first-of-type { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.25; }