/* The Reserve by MLA, info site.
   Five design directions (data-v) in light and dark (data-theme), all driven by the tokens below. The base rules are
   Atelier, the app's own look; each other direction overrides tokens and, where its shape differs, a few rules. */

/* ---------- fonts (self-hosted, OFL; a face downloads only when a direction uses it) ---------- */
@font-face { font-family: "Bodoni Moda"; src: url(/fonts/bodoni-moda.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/fonts/bodoni-moda-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url(/fonts/mrs-saint-delafield.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poiret One"; src: url(/fonts/poiret-one.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url(/fonts/jost.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/fonts/fraunces-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------- tokens: Atelier (default) ---------- */
:root {
  --ground: #f5f3f0; --surface: #fbfaf8; --sunk: #ece8e2;
  --ink: #1a1816; --ink-2: #524d47; --ink-3: #655f58;
  --line: rgba(26, 24, 22, .14); --line-strong: rgba(26, 24, 22, .34);
  --accent: #7a6448; --btn: #141312; --btn-ink: #f5f3f0;
  --feature: #141312; --feature-ink: #f5f3f0; --feature-ink-2: #cfc8be;
  --veil: rgba(245, 243, 240, .88); --focus: #3b5ba9; --danger: #8e2f24; --ph-a: rgba(26, 24, 22, .07);

  --f-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-script: "Mrs Saint Delafield", "Snell Roundhand", cursive;
  --script-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); --script-style: normal; --script-weight: 400;

  --mark-size: clamp(3.4rem, 1.6rem + 7.4vw, 7rem); --mark-weight: 400; --mark-case: uppercase; --mark-track: .12em;
  --mark-lead: .98; --mark-stretch: 100%; --mark-style: normal; --by-size: .3em; --bar-size: 1.05rem; --bar-track: .14em;
  --h-weight: 400; --h-track: 0; --h-lead: 1.08; --h-case: none; --h-stretch: 100%; --h-style: normal;
  --title-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.4rem); --title-style: italic; --title-weight: 400;
  --page-title-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
  --btn-case: uppercase; --btn-track: .16em; --btn-size: .8125rem; --btn-weight: 500;
  --r-btn: 0; --r-card: 0; --r-chip: 0; --r-input: 0; --r-arch: 0; --shadow: none;
  /* form-control borders need 3:1 (WCAG 1.4.11); derived per theme so every direction and mode gets it */
  --field-line: color-mix(in srgb, var(--ink) 56%, var(--ground));
  --ease: cubic-bezier(.22, 1, .36, 1);
  --silk:
    radial-gradient(90% 70% at 85% 0%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, .7) 40%, transparent 50%),
    linear-gradient(128deg, transparent 52%, rgba(60, 48, 36, .07) 62%, transparent 74%),
    linear-gradient(106deg, transparent 64%, rgba(255, 255, 255, .55) 74%, transparent 84%),
    linear-gradient(100deg, #ebe6df 0%, #f7f4ef 34%, #e3dcd2 58%, #f4f0ea 80%, #e8e1d7 100%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #151413; --surface: #1d1b19; --sunk: #100f0e;
  --ink: #f1ede7; --ink-2: #c7c0b6; --ink-3: #a59d92;
  --line: rgba(241, 237, 231, .14); --line-strong: rgba(241, 237, 231, .36);
  --accent: #c9ad86; --btn: #f1ede7; --btn-ink: #151413;
  --feature: #efe9e0; --feature-ink: #151413; --feature-ink-2: #4f4942;
  --veil: rgba(21, 20, 19, .88); --focus: #93b2ff; --danger: #f0a196; --ph-a: rgba(241, 237, 231, .07);
  --silk:
    radial-gradient(90% 70% at 85% 0%, rgba(201, 173, 134, .14), transparent 60%),
    linear-gradient(118deg, transparent 28%, rgba(241, 237, 231, .07) 40%, transparent 50%),
    linear-gradient(128deg, transparent 52%, rgba(0, 0, 0, .4) 62%, transparent 74%),
    linear-gradient(106deg, transparent 64%, rgba(241, 237, 231, .05) 74%, transparent 84%),
    linear-gradient(100deg, #1a1816 0%, #24211e 34%, #141312 58%, #211e1b 80%, #171513 100%);
  color-scheme: dark;
}
/* ---------- tokens: Deco (Miami Beach art deco) ---------- */
:root[data-v="deco"] {
  --ground: #f4ede6; --surface: #fbf8f4; --sunk: #e4efe9;
  --ink: #173a3a; --ink-2: #375755; --ink-3: #4b6967;
  --line: rgba(23, 58, 58, .18); --line-strong: rgba(23, 58, 58, .42);
  --accent: #8a6326; --btn: #1d5450; --btn-ink: #fbf8f4;
  --feature: #1d5450; --feature-ink: #fbf8f4; --feature-ink-2: #cfe3dd;
  --veil: rgba(244, 237, 230, .9); --focus: #2f55c9; --danger: #9b2c22; --ph-a: rgba(23, 58, 58, .07);
  --deco-ray: rgba(236, 170, 156, .16); --deco-1: #f5d8cd; --deco-2: #f3e3bd; --deco-3: #d3e9e0; --deco-line: #b8954f;
  --f-display: "Poiret One", "Josefin Sans", "Futura", sans-serif;
  --f-body: "Jost", "Futura", "Century Gothic", sans-serif;
  --mark-size: clamp(2.9rem, 1.4rem + 6.4vw, 6rem); --mark-track: .2em; --mark-lead: 1.08; --by-size: .26em;
  --bar-track: .2em;
  --h-track: .01em; --h-lead: 1.12;
  --title-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem); --title-style: normal;
  --btn-track: .22em; --btn-weight: 500;
  --r-btn: 999px; --r-card: 6px; --r-chip: 999px; --r-input: 6px; --r-arch: 999px 999px 6px 6px;
}
:root[data-v="deco"][data-theme="dark"] {
  --ground: #0f2b2d; --surface: #143638; --sunk: #0b2325;
  --ink: #f4ede6; --ink-2: #cddad6; --ink-3: #a9bfba;
  --line: rgba(217, 181, 106, .26); --line-strong: rgba(217, 181, 106, .55);
  --accent: #d9b56a; --btn: #d9b56a; --btn-ink: #0f2b2d;
  --feature: #d9b56a; --feature-ink: #0f2b2d; --feature-ink-2: #3a4636;
  --veil: rgba(15, 43, 45, .9); --focus: #9db7ff; --danger: #f2a497; --ph-a: rgba(217, 181, 106, .08);
  --deco-ray: rgba(217, 181, 106, .1); --deco-1: #163c3e; --deco-2: #1a4547; --deco-3: #1f5052; --deco-line: #d9b56a;
}

/* ---------- tokens: Lookbook (fashion editorial) ---------- */
:root[data-v="lookbook"] {
  --ground: #ffffff; --surface: #f6f3f0; --sunk: #ece3da;
  --ink: #000000; --ink-2: #2b2b2b; --ink-3: #575757;
  --line: rgba(0, 0, 0, .16); --line-strong: rgba(0, 0, 0, .8);
  --accent: #000000; --btn: #000000; --btn-ink: #ffffff;
  --feature: #d9c4b1; --feature-ink: #000000; --feature-ink-2: #3a2f27;
  --veil: rgba(255, 255, 255, .92); --focus: #2346d4; --danger: #a3271b; --ph-a: rgba(0, 0, 0, .07);
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mark-size: clamp(4.6rem, 1rem + 17vw, 14rem); --mark-weight: 800; --mark-track: -.005em; --mark-lead: .84;
  --mark-stretch: 62%; --by-size: .15em; --bar-size: 1.15rem; --bar-track: .02em;
  --h-weight: 800; --h-stretch: 68%; --h-case: uppercase; --h-lead: .94; --h-track: 0;
  --title-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); --title-style: normal; --title-weight: 600;
  --page-title-size: clamp(3.4rem, 1.5rem + 8vw, 8rem);
  --btn-track: .08em; --btn-weight: 700; --btn-size: .8125rem;
}
:root[data-v="lookbook"][data-theme="dark"] {
  --ground: #000000; --surface: #141414; --sunk: #241f1b;
  --ink: #ffffff; --ink-2: #d9d9d9; --ink-3: #a6a6a6;
  --line: rgba(255, 255, 255, .18); --line-strong: rgba(255, 255, 255, .8);
  --accent: #ffffff; --btn: #ffffff; --btn-ink: #000000;
  --feature: #d9c4b1; --feature-ink: #000000; --feature-ink-2: #3a2f27;
  --veil: rgba(0, 0, 0, .9); --focus: #9db7ff; --danger: #ff9d90; --ph-a: rgba(255, 255, 255, .08);
}

/* ---------- tokens: Vanity (dressing room) ---------- */
:root[data-v="vanity"] {
  --ground: #f7ebe6; --surface: #fdf6f2; --sunk: #f1dfd8;
  --ink: #3b2421; --ink-2: #634541; --ink-3: #7a5a54;
  --line: rgba(59, 36, 33, .16); --line-strong: rgba(59, 36, 33, .36);
  --accent: #a0504a; --btn: #3b2421; --btn-ink: #fdf6f2;
  --feature: #3b2421; --feature-ink: #fdf6f2; --feature-ink-2: #e8d2cb;
  --veil: rgba(247, 235, 230, .9); --focus: #3552c4; --danger: #9b2a22; --ph-a: rgba(59, 36, 33, .07);
  --bulb: #fff6e0; --bulb-glow: rgba(255, 196, 120, .5); --bulb-wash: rgba(255, 214, 160, .45);
  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Figtree", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Fraunces", Georgia, serif; --script-style: italic; --script-weight: 300;
  --script-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  --mark-size: clamp(3.3rem, 1.6rem + 6.6vw, 6.6rem); --mark-weight: 300; --mark-case: none; --mark-track: -.015em;
  --mark-lead: 1; --mark-style: italic; --by-size: .26em; --bar-track: 0;
  --h-weight: 400; --h-lead: 1.1; --h-track: -.01em;
  --title-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem); --title-style: normal; --title-weight: 500;
  --btn-case: none; --btn-track: .01em; --btn-size: .9375rem; --btn-weight: 600;
  --r-btn: 999px; --r-card: 28px; --r-chip: 999px; --r-input: 14px; --r-arch: 28px;
  --shadow: 0 22px 44px -28px rgba(122, 62, 46, .45);
}
:root[data-v="vanity"][data-theme="dark"] {
  --ground: #251719; --surface: #311f22; --sunk: #1c1113;
  --ink: #f7e6df; --ink-2: #dcc1b9; --ink-3: #bd9e96;
  --line: rgba(247, 230, 223, .14); --line-strong: rgba(247, 230, 223, .36);
  --accent: #f2b8a5; --btn: #f2b8a5; --btn-ink: #251719;
  --feature: #f2b8a5; --feature-ink: #251719; --feature-ink-2: #5a3832;
  --veil: rgba(37, 23, 25, .9); --focus: #a6bcff; --danger: #ffa898; --ph-a: rgba(247, 230, 223, .07);
  --bulb: #ffe9bd; --bulb-glow: rgba(255, 184, 96, .45); --bulb-wash: rgba(255, 170, 90, .12);
  --shadow: 0 22px 50px -24px rgba(0, 0, 0, .7);
}

/* ---------- tokens: Gallery (white cube) ---------- */
:root[data-v="gallery"] {
  --ground: #ffffff; --surface: #f5f5f3; --sunk: #efefec;
  --ink: #141414; --ink-2: #4a4a48; --ink-3: #636360;
  --line: rgba(20, 20, 20, .12); --line-strong: rgba(20, 20, 20, .34);
  --accent: #141414; --btn: #141414; --btn-ink: #ffffff;
  --feature: #141414; --feature-ink: #ffffff; --feature-ink-2: #bdbdba;
  --veil: rgba(255, 255, 255, .92); --focus: #2346d4; --danger: #a3271b; --ph-a: rgba(20, 20, 20, .05);
  --f-display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mark-size: 1.25rem; --mark-weight: 600; --mark-case: none; --mark-track: -.01em; --mark-lead: 1.2;
  --by-size: 1em; --bar-size: 1.05rem; --bar-track: -.01em;
  --h-weight: 300; --h-track: -.025em; --h-lead: 1.05;
  --title-size: clamp(2.7rem, 1.2rem + 5.6vw, 5.6rem); --title-style: normal; --title-weight: 300;
  --page-title-size: clamp(2.7rem, 1.2rem + 5.6vw, 5.6rem);
  --btn-case: none; --btn-track: 0; --btn-size: .9375rem; --btn-weight: 500;
}
:root[data-v="gallery"][data-theme="dark"] {
  --ground: #1a1a19; --surface: #232322; --sunk: #121211;
  --ink: #ececea; --ink-2: #b0b0ad; --ink-3: #94948f;
  --line: rgba(236, 236, 234, .12); --line-strong: rgba(236, 236, 234, .36);
  --accent: #ececea; --btn: #ececea; --btn-ink: #1a1a19;
  --feature: #ececea; --feature-ink: #1a1a19; --feature-ink-2: #4a4a48;
  --veil: rgba(26, 26, 25, .9); --focus: #9db7ff; --danger: #ffa194; --ph-a: rgba(236, 236, 234, .06);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  margin: 0; font-family: var(--f-display); font-weight: var(--h-weight); letter-spacing: var(--h-track);
  line-height: var(--h-lead); text-transform: var(--h-case); font-stretch: var(--h-stretch); font-style: var(--h-style);
  text-wrap: balance;
}
h2 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.4rem); }
h3 { font-size: 1.375rem; }
p { margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--btn); color: var(--btn-ink); }
.skip:focus { top: 1rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- variant switches ---------- */
html:not([data-tiers="3"]) .tiers-3 { display: none !important; }
html[data-tiers="3"] .tiers-2 { display: none !important; }
html:not([data-stage="live"]) .stage-live { display: none !important; }
html[data-stage="live"] .stage-pre { display: none !important; }
html[data-demo="0"] .demo-tag, html[data-demo="0"] .demo-only, html[data-demo="0"] .demo { display: none !important; }
html[data-theme="dark"] .icon--moon, html:not([data-theme="dark"]) .icon--sun { display: none; }
html:not(.js) .demo, html:not(.js) .top__theme { display: none; }

/* demo labels: deliberately outside every direction's design, like a sticky note on a print */
.demo-tag, .demo-note {
  display: inline-block; margin-top: .75rem; padding: .25rem .5rem; border-radius: 4px;
  font: 500 .75rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0; text-transform: none;
  font-style: normal; color: #3d3200; background: #fde68a;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .95rem 1.7rem;
  border: 1px solid var(--btn); border-radius: var(--r-btn); background: var(--btn); color: var(--btn-ink);
  font: var(--btn-weight) var(--btn-size)/1.1 var(--f-body); letter-spacing: var(--btn-track); text-transform: var(--btn-case);
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); text-decoration: none; }
.btn--sm { min-height: 44px; padding: .65rem 1.1rem; font-size: .75rem; }
.btn--block { width: 100%; }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--veil); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .top { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.top__bar { display: flex; align-items: center; gap: .75rem; min-height: 4rem; }
.top__brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; text-decoration: none; }
.top__nav { display: none; }
.top__nav ul { display: flex; gap: 1.75rem; }
.top__nav a, .top__menu a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); }
.top__nav a:hover, .top__menu a:hover { color: var(--ink); text-decoration: underline; }
.top__theme {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent;
  border-radius: 999px; background: none; color: var(--ink); cursor: pointer;
}
.top__theme:hover { border-color: var(--line-strong); }
.top__cta { display: none; }
.top__menu { position: relative; }
.top__menu summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; color: var(--ink); }
.top__menu summary::-webkit-details-marker { display: none; }
.top__menu nav { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 13rem; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35); }
.top__menu li a { display: block; padding: .75rem .9rem; }
.top__menu li:last-child a { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .top__cta { display: inline-flex; } }
@media (min-width: 1000px) { .top__nav { display: block; } .top__menu { display: none; } }

/* wordmark (placeholder until her logo arrives) */
.mark { margin: 0; font-family: var(--f-display); font-weight: var(--mark-weight); text-transform: var(--mark-case); letter-spacing: var(--mark-track); font-stretch: var(--mark-stretch); font-style: var(--mark-style); line-height: var(--mark-lead); }
.mark--bar, .mark--foot { display: inline-flex; align-items: baseline; gap: .45em; font-size: var(--bar-size); letter-spacing: var(--bar-track); white-space: nowrap; }
.mark--bar .mark__by, .mark--foot .mark__by { font-size: .72em; font-style: italic; text-transform: none; letter-spacing: .02em; color: var(--ink-2); }
.mark--foot { font-size: calc(var(--bar-size) * 1.35); }
.mark--hero { font-size: var(--mark-size); }
.mark__line { display: block; overflow: hidden; padding-bottom: .04em; }
.mark__in { display: inline-block; }
.mark--hero .mark__line:last-child { font-size: var(--by-size); line-height: 1.5; }
.mark--hero .mark__by { display: inline-flex; align-items: center; gap: .7em; margin-top: .6em; font-size: 1em; font-style: italic; text-transform: none; letter-spacing: .03em; color: var(--ink-2); }
.mark--hero .mark__by::before, .mark--hero .mark__by::after { content: ""; width: 3.2em; height: 1px; background: currentColor; opacity: .55; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7.5rem); }
.hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hero__inner { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-areas: "mark" "copy" "script" "picture"; }
.hero__mark { grid-area: mark; }
.hero__copy { grid-area: copy; max-width: 36rem; }
.hero__script { grid-area: script; display: none; }
.hero__picture { grid-area: picture; display: none; margin: 0; }
.hero__title { font-size: var(--title-size); font-style: var(--title-style); font-weight: var(--title-weight); text-transform: none; font-stretch: 100%; letter-spacing: 0; line-height: 1.15; }
.hero__lede { margin-top: 1rem; color: var(--ink-2); font-size: 1.125rem; max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 1.75rem; }
.hero__status { margin-top: 1.5rem; font-size: .9375rem; color: var(--ink-2); }
.apps { display: flex; flex-wrap: wrap; gap: .5rem; }
.app { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .95rem .45rem .7rem; border: 1px solid var(--field-line); border-radius: var(--r-chip); font-size: .8125rem; line-height: 1.25; color: var(--ink-2); }
.app > span { display: grid; }
.app__store { font-weight: 600; color: var(--ink); }
.ph { position: relative; }
.ph__label {
  position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; padding: 1rem;
  background: repeating-linear-gradient(135deg, var(--ph-a) 0 1px, transparent 1px 14px), var(--sunk);
  color: var(--ink-2); font-size: .875rem; letter-spacing: .02em; text-align: center;
}
.ph__caption { display: none; margin-top: .9rem; font-size: .8125rem; color: var(--ink-3); }

/* Atelier hero: the app's ivory silk (a token per theme; the live WebGL silk in js/silk.js draws over it), stacked wordmark, script line */
:root:is(:not([data-v]), [data-v="atelier"]) .art--silk { display: block; background: var(--silk); }
.art--silk canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero__script { font-family: var(--f-script); font-size: var(--script-size); font-style: var(--script-style); font-weight: var(--script-weight); line-height: 1.05; color: var(--ink); }
:root:not([data-v]) .hero__script, :root[data-v="atelier"] .hero__script { display: block; justify-self: end; transform: rotate(-5deg); max-width: 9em; text-align: left; }
@media (min-width: 900px) {
  :root:not([data-v]) .hero__inner, :root[data-v="atelier"] .hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "mark script" "copy script"; align-items: end; min-height: min(70svh, 40rem);
  }
  :root:not([data-v]) .hero__script, :root[data-v="atelier"] .hero__script { align-self: center; }
}

/* Deco hero: symmetrical, centred, a sunrise fan behind */
:root[data-v="deco"] .art--deco { display: block; top: auto; bottom: 0; height: min(78%, 36rem); }
.deco-fan path { fill: var(--deco-ray); }
.deco-band { fill: var(--deco-1); }
.deco-band--2 { fill: var(--deco-2); }
.deco-band--3 { fill: var(--deco-3); }
.deco-line { fill: none; stroke: var(--deco-line); stroke-width: 1.5; }
:root[data-v="deco"] .hero { padding-bottom: clamp(9rem, 22vw, 15rem); }
/* Deco and Vanity: a centred hero, "The Reserve" on one line (Gallery too) */
:root:is([data-v="deco"], [data-v="vanity"]) .hero__inner { justify-items: center; text-align: center; }
:root:is([data-v="deco"], [data-v="vanity"]) .hero__copy { display: grid; justify-items: center; }
:root:is([data-v="deco"], [data-v="vanity"]) .hero__actions { justify-content: center; }
:root:is([data-v="deco"], [data-v="vanity"], [data-v="gallery"]) .mark--hero .mark__line { display: inline-block; }
:root:is([data-v="deco"], [data-v="vanity"]) .mark--hero .mark__line:nth-child(3) { display: block; }
:root[data-v="deco"] .mark--hero .mark__by::before, :root[data-v="deco"] .mark--hero .mark__by::after { width: .55em; height: .55em; background: none; border: 1px solid currentColor; transform: rotate(45deg); opacity: .8; }

/* Lookbook hero: oversized condensed wordmark, a tall picture frame with crop marks */
:root[data-v="lookbook"] .mark--hero .mark__by { font-weight: 500; font-stretch: 100%; letter-spacing: .02em; font-style: normal; margin-top: .6em; }
:root[data-v="lookbook"] .mark--hero .mark__by::before { width: 2.5em; opacity: 1; }
:root[data-v="lookbook"] .mark--hero .mark__by::after { display: none; }
:root[data-v="lookbook"] .ph__label { background: var(--sunk); }
:root[data-v="lookbook"] .ph__label::before {
  content: ""; position: absolute; inset: -12px; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 22px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 0 / 1px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 0 / 22px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 0 / 1px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 22px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 0 100% / 1px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 100% 100% / 22px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 100% / 1px 22px no-repeat;
}
:root[data-v="lookbook"] .hero__picture { display: block; margin: 12px; align-self: start; }
@media (min-width: 900px) {
  :root[data-v="lookbook"] .hero__inner { grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); grid-template-areas: "mark picture" "copy picture"; column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
}

/* Vanity hero: a mirror framed in warm bulbs */
:root[data-v="vanity"] .art--bulbs {
  display: block; inset: clamp(.75rem, 2.5vw, 2rem); width: auto; height: auto;
  border: 1px solid var(--line-strong); border-radius: clamp(28px, 6vw, 80px);
  background: radial-gradient(80% 55% at 50% 0%, var(--bulb-wash), transparent 70%), var(--surface);
}
.bulbs { position: absolute; }
.bulbs--top { top: -9px; left: 10%; right: 10%; height: 18px; background: radial-gradient(circle, var(--bulb) 0 5px, var(--bulb-glow) 6px, transparent 13px) center / 64px 18px repeat-x; }
.bulbs--left, .bulbs--right { top: 14%; bottom: 14%; width: 18px; background: radial-gradient(circle, var(--bulb) 0 5px, var(--bulb-glow) 6px, transparent 13px) center / 18px 64px repeat-y; }
.bulbs--left { left: -9px; }
.bulbs--right { right: -9px; }
:root[data-v="vanity"] .hero { padding-block: clamp(3rem, 7vw, 5.5rem); }
:root[data-v="vanity"] .hero__inner { grid-template-areas: "script" "mark" "copy" "picture"; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 5vw, 4rem); }
:root[data-v="vanity"] .hero__script { display: block; color: var(--accent); }
:root[data-v="vanity"] .mark--hero .mark__line:last-child { font-size: .16em; }
:root[data-v="vanity"] .mark--hero .mark__by { font-style: normal; font-family: var(--f-body); letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
:root[data-v="vanity"] .mark--hero .mark__by::before, :root[data-v="vanity"] .mark--hero .mark__by::after { width: 1.6em; }

/* Gallery hero: a small name on the wall, a big quiet line, one square frame and its label */
:root[data-v="gallery"] .hero__picture { display: block; }
:root[data-v="gallery"] .ph__label { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--line); }
:root[data-v="gallery"] .ph__caption { display: block; }
:root[data-v="gallery"] .mark--hero .mark__by { margin: 0; font-style: normal; font-size: 1em; color: var(--ink-3); letter-spacing: -.01em; }
:root[data-v="gallery"] .mark--hero .mark__by::before, :root[data-v="gallery"] .mark--hero .mark__by::after { display: none; }
:root[data-v="gallery"] .hero__title { line-height: 1.02; letter-spacing: -.03em; }
:root[data-v="gallery"] .hero__copy { max-width: 44rem; }
@media (min-width: 900px) {
  :root[data-v="gallery"] .hero__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "mark mark" "copy picture"; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(2.5rem, 6vw, 5rem); align-items: end; }
}

/* page heroes (For artists, legal) */
.page-head { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-head__inner > * { max-width: 46rem; }
.page-head__kicker { margin-bottom: 1rem; font-size: .9375rem; color: var(--ink-2); }
.page-head__title { font-size: var(--page-title-size); }
.page-head__lede { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.125rem; }
.page-head__actions { margin-top: 1.75rem; }

/* ---------- sections ---------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section__head { max-width: 42rem; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.section__head p { margin-top: 1rem; color: var(--ink-2); max-width: 36rem; }
.section__note { margin-top: 2.5rem; font-size: .9375rem; color: var(--ink-2); }

.crafts__list { display: grid; gap: 2rem 1.75rem; }
.craft { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.craft__icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin-bottom: 1rem; }
.craft h3 { margin-bottom: .5rem; }
.craft p { color: var(--ink-2); }
@media (min-width: 600px) { .crafts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .crafts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.levels { background: var(--surface); }
.levels__list { display: grid; gap: 1rem; }
.level { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.6rem, 3.5vw, 2.6rem); background: var(--ground); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.level__name { font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); }
.level p { color: var(--ink-2); }
.level .level__how { margin-top: auto; padding-top: 1rem; font-size: .9375rem; color: var(--ink); border-top: 1px solid var(--line); }
.level--signature { background: var(--feature); border-color: var(--feature); color: var(--feature-ink); }
.level--signature p { color: var(--feature-ink-2); }
.level--signature .level__how { color: var(--feature-ink); border-color: color-mix(in srgb, var(--feature-ink) 22%, transparent); }
@media (min-width: 760px) { .levels__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

.steps__list { counter-reset: step; display: grid; gap: 2.25rem 2rem; }
.step { counter-increment: step; }
.step::before { content: counter(step); display: block; margin-bottom: .9rem; font-family: var(--f-display); font-size: 2.6rem; line-height: 1; color: var(--accent); font-weight: var(--h-weight); font-stretch: var(--h-stretch); }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--ink-2); }
@media (min-width: 600px) { .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.trust { padding-block: 2.25rem; border-block: 1px solid var(--line); }
.trust__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem 2.75rem; font-size: .9375rem; color: var(--ink-2); }
.trust__list li { display: inline-flex; align-items: center; gap: .65rem; }
.trust__list li::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: none; }
.trust .demo-tag { display: table; margin-inline: auto; }

.join { background: var(--sunk); }
.join__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.join__intro > p { margin-top: 1rem; color: var(--ink-2); max-width: 32rem; }
.cities { margin-top: 2.25rem; border-top: 1px solid var(--line-strong); }
.city { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong); }
.city__name { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.city__state { font-size: .9375rem; color: var(--ink-2); text-align: right; }
.city--first .city__state { color: var(--ink); font-weight: 600; }
.join__panel { padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
@media (min-width: 900px) { .join__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

/* ---------- forms ---------- */
.form__title { margin-bottom: 1.5rem; font-size: 1.5rem; }
.field { display: grid; gap: .45rem; min-width: 0; margin: 0 0 1.15rem; padding: 0; border: 0; }
.field label, .field legend { padding: 0; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.field legend { margin-bottom: .45rem; }
.opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--field-line); border-radius: var(--r-input);
  background: var(--ground); color: var(--ink); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field__err { font-size: .875rem; font-weight: 500; color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.05rem; border: 1px solid var(--field-line); border-radius: var(--r-chip); background: var(--ground); font-size: .9375rem; font-weight: 500; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
fieldset[data-invalid] .chip { border-color: var(--danger); }
.needs-hair { display: none; }
form:has(input[name="craft"][value="Hair"]:checked) .needs-hair { display: grid; }
.form__fine { margin-top: .9rem; font-size: .875rem; color: var(--ink-2); }
.form-done__title { margin-bottom: .75rem; font-size: 1.75rem; }
.form-done__title:focus { outline: none; }
.form-done p { color: var(--ink-2); }
.form-done .link-btn { margin-top: 1rem; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 2rem; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 44px; padding: 1.2rem 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.25rem; text-transform: none; font-stretch: 100%; letter-spacing: 0; line-height: 1.3; }
:root[data-v="lookbook"] .faq summary h3 { font-weight: 700; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 1.4rem; max-width: 40rem; color: var(--ink-2); }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } }

/* ---------- For artists ---------- */
.offer__list { display: grid; gap: 2rem 2.5rem; }
.offer__item { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.offer__item h3 { margin-bottom: .5rem; }
.offer__item p { color: var(--ink-2); }
@media (min-width: 760px) { .offer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit { background: var(--surface); }
.fit__grid { display: grid; gap: 2rem; }
.fit__list { display: grid; gap: .9rem; align-content: start; }
.fit__list li { display: flex; gap: .8rem; align-items: baseline; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.fit__list li::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: translateY(-.15em) rotate(45deg); flex: none; }
@media (min-width: 900px) { .fit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fit__grid .section__head { margin-bottom: 0; } }

/* ---------- legal stubs and 404 ---------- */
.legal__inner { max-width: 42rem; }
.legal h1 { margin-bottom: 1.25rem; font-size: var(--page-title-size); }
.legal p { max-width: 31rem; color: var(--ink-2); }
.legal p + p { margin-top: 2rem; }
.wip { display: inline-block; margin-bottom: 1.25rem; padding: .3rem .75rem; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: .875rem; color: var(--ink); }

/* ---------- footer ---------- */
.foot { padding-block: 3.5rem 2.5rem; border-top: 1px solid var(--line); }
.foot__grid { display: grid; gap: 2rem; }
.foot__line { margin-top: .75rem; color: var(--ink-2); }
.foot__nav ul { display: grid; gap: .5rem; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-2); text-decoration: none; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__small { font-size: .875rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 1.5rem; }
@media (min-width: 760px) {
  .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .foot__nav ul { grid-template-columns: repeat(2, max-content); column-gap: 2.5rem; }
  .foot__small { grid-column: 1 / -1; }
}

/* ---------- direction details beyond tokens ---------- */
:root[data-v="deco"] .section__head { margin-inline: auto; text-align: center; }
:root[data-v="deco"] .section__head p { margin-inline: auto; }
:root[data-v="deco"] .craft { padding: 2rem 1.5rem 1.75rem; border: 1px solid var(--line); border-radius: var(--r-arch); background: var(--surface); text-align: center; }
:root[data-v="deco"] .level { border-radius: 50% 50% 6px 6px / 6.5rem 6.5rem 6px 6px; text-align: center; padding-top: clamp(3rem, 5vw, 4rem); }
:root[data-v="deco"] .step { text-align: center; }
:root[data-v="deco"] .section__note { text-align: center; }
:root[data-v="lookbook"] .step::before { content: counter(step, decimal-leading-zero); font-size: 3.4rem; font-weight: 800; font-stretch: 62%; }
:root[data-v="lookbook"] .craft { border-top-width: 3px; border-top-color: var(--ink); }
:root[data-v="lookbook"] .craft__icon { display: none; }
:root[data-v="lookbook"] .craft h3 { font-size: 2.2rem; }
:root[data-v="lookbook"] .level { border-color: var(--line-strong); }
:root[data-v="vanity"] .craft { padding: 1.75rem; border: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow); }
:root[data-v="vanity"] .step::before { font-style: italic; font-weight: 300; }
:root[data-v="gallery"] .craft__icon, :root[data-v="gallery"] .trust__list li::before, :root[data-v="gallery"] .fit__list li::before { display: none; }
:root[data-v="gallery"] .craft { border-top-color: var(--line); }
:root[data-v="gallery"] .step::before { font-size: .9375rem; font-weight: 500; color: var(--ink-3); margin-bottom: 1.25rem; }
:root[data-v="gallery"] .level { box-shadow: none; }

/* ---------- demo switcher (neutral chrome, the same in every direction) ---------- */
.demo { --d-bg: #fff; --d-ink: #1f1f1f; --d-muted: #555; --d-line: rgba(0, 0, 0, .2);
  position: fixed; right: 1rem; bottom: 1rem; z-index: 60; font: 400 .875rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--d-ink); }
:root[data-theme="dark"] .demo { --d-bg: #262626; --d-ink: #f2f2f2; --d-muted: #bdbdbd; --d-line: rgba(255, 255, 255, .25); }
.demo__toggle { min-height: 44px; padding: .65rem 1.1rem; border: 0; border-radius: 999px; background: var(--d-ink); color: var(--d-bg); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); }
.demo__panel { position: absolute; right: 0; bottom: calc(100% + .6rem); width: min(21rem, calc(100vw - 2rem)); max-height: min(78vh, 38rem); overflow: auto; padding: 1rem 1rem .75rem; border-radius: 14px; background: var(--d-bg); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); }
.demo__title { font-weight: 700; font-size: 1rem; }
.demo__hint { margin: .2rem 0 .9rem; color: var(--d-muted); font-size: .8125rem; }
.demo__hint code { font-size: .8125rem; }
.demo__group { margin: 0 0 .85rem; padding: 0; border: 0; }
.demo__group legend { padding: 0; margin-bottom: .3rem; font-weight: 600; }
.demo__group label { position: relative; display: inline-flex; align-items: center; min-height: 36px; margin: .25rem .3rem 0 0; padding: .3rem .7rem; border: 1px solid var(--d-line); border-radius: 999px; cursor: pointer; }
.demo__group input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.demo__group label:has(input:checked) { background: var(--d-ink); border-color: var(--d-ink); color: var(--d-bg); }
.demo__group label:has(input:focus-visible) { outline: 2px solid #2f55c9; outline-offset: 2px; }
.demo__foot { display: flex; gap: .5rem; padding-top: .5rem; border-top: 1px solid var(--d-line); }
.demo__btn { min-height: 40px; padding: .4rem .8rem; border: 1px solid var(--d-line); border-radius: 999px; background: var(--d-bg); color: var(--d-ink); font: inherit; cursor: pointer; }

/* ---------- motion (one moment at a time, chosen in the switcher) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  :root[data-motion="hero"] .hero__art { animation: settle 1.6s var(--ease) both; }
  :root[data-motion="hero"] .mark--hero .mark__in { animation: rise 1s var(--ease) both; }
  :root[data-motion="hero"] .mark--hero .mark__line:nth-child(2) .mark__in { animation-delay: .12s; }
  :root[data-motion="hero"] .mark--hero .mark__line:nth-child(3) .mark__in { animation-delay: .28s; }
  :root[data-motion="hero"] .hero__script, :root[data-motion="hero"] .hero__picture { animation: drift 1.2s .35s var(--ease) both; }
  :root[data-motion="city"].js .cities .city { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  :root[data-motion="city"].js .cities.is-in .city { opacity: 1; transform: none; }
  :root[data-motion="city"].js .cities.is-in .city:nth-child(2) { transition-delay: .7s; }
  :root[data-motion="city"].js .cities.is-in .city:nth-child(3) { transition-delay: 1s; }
  :root[data-motion="city"].js .city--first::before {
    content: ""; position: absolute; inset: 0 -1rem; z-index: -1; opacity: 0; transform: scaleX(.6);
    background: radial-gradient(60% 120% at 0% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
    transition: opacity 1.2s .2s var(--ease), transform 1.2s .2s var(--ease); transform-origin: left center;
  }
  :root[data-motion="city"].js .cities.is-in .city--first::before { opacity: 1; transform: none; }
  :root[data-motion="city"].js .cities { position: relative; isolation: isolate; }
}
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes drift { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: .4; transform: scale(1.07); } to { opacity: 1; transform: none; } }

@media print { .demo, .top__menu, .top__theme { display: none !important; } }