/* Full-bleed cinematic sections, pure black, uppercase headlines, ghost buttons. */
:root {
  --bg: #000;
  --ink: #f5f5f5;
  --muted: #a3a3a3;
  --rule: rgba(255,255,255,.18);
  --red: #e2482d;
  --blue: #2c4bd6;
  --ochre: #c89b3c;
  --head: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --body: "Barlow", -apple-system, "Segoe UI", sans-serif;
  --read: "Newsreader", Georgia, serif;
  --gutter: clamp(20px, 4vw, 56px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--ink); color: #000; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  background: linear-gradient(#000c, #0000);
}
.wordmark { font-family: var(--head); font-weight: 600; font-size: 1rem; letter-spacing: .38em; text-transform: uppercase; text-decoration: none; }
.site-nav { display: flex; gap: 30px; }
.site-nav a { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; opacity: .9; }
.site-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 640px) { .site-nav { gap: 16px; } .site-nav .opt { display: none; } .wordmark { letter-spacing: .26em; font-size: .9rem; } }

/* ---------- Full-screen panels ---------- */
.panel {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding: 120px var(--gutter) clamp(64px, 12vh, 120px); overflow: hidden; isolation: isolate;
}
.panel .art { position: absolute; inset: 0; z-index: -2; animation: drift 38s ease-in-out infinite alternate; }
.panel::after { /* legibility scrim, like text over footage */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #000e 0%, #0008 45%, #0000 75%), linear-gradient(0deg, #000 0%, #0000 35%);
}
@keyframes drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }
@media (prefers-reduced-motion: reduce) { .panel .art { animation: none; } html { scroll-behavior: auto; } }

.copy { max-width: 36rem; }
.eyebrow { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.panel h1, .panel h2 {
  font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1; margin: 0 0 18px;
}
.panel p.lead { font-size: 1.1rem; margin: 0 0 30px; color: #e6e6e6; }

.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--head); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 16px 26px; border: 1px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer; transition: background .2s, color .2s;
}
.btn:hover { background: var(--ink); color: #000; }
.btn svg { width: 16px; height: 16px; transition: transform .2s; }
.btn:hover svg { transform: translateX(3px); }

/* ---------- Art: SVG compositions sit right; on mobile they shift up behind the scrim ---------- */
.panel svg.art { width: 100%; height: 100%; }
@media (max-width: 760px) {
  .panel svg.art .comp-right { transform: translate(-560px, -80px); }
}

/* ---------- Portrait panel ---------- */
.panel-portrait { background: #000; }
.portrait { position: absolute; inset: 0 0 0 auto; width: min(58%, 54rem); z-index: -2; }
.portrait-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 35%);
          mask: linear-gradient(90deg, transparent 0%, #000 35%);
}
@media (max-width: 760px) {
  .portrait { width: 100%; height: 70%; }
  .portrait img { -webkit-mask: linear-gradient(0deg, transparent 0%, #000 45%); mask: linear-gradient(0deg, transparent 0%, #000 45%); }
}

/* ---------- Row lists (writing, career) ---------- */
.list-section { padding: 96px var(--gutter); }
.list-section h2 { font-family: var(--head); font-weight: 700; font-size: 1.15rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.rows li { border-bottom: 1px solid var(--rule); }
.rows a, .rows .row {
  display: grid; grid-template-columns: 9rem 1fr auto; gap: 24px; align-items: center;
  padding: 24px 0; text-decoration: none;
}
.rows .when { font-size: .85rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.rows .what { font-size: 1.2rem; font-weight: 500; }
.rows .what small { display: block; font-size: .92rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.rows svg { width: 18px; height: 18px; transition: transform .2s; }
.rows a:hover svg { transform: translateX(4px); }
.rows a:hover .what { text-decoration: underline; text-underline-offset: 5px; }
.rows .row { grid-template-columns: 9rem 1fr; }
@media (max-width: 640px) {
  .rows a { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .rows a .when { grid-column: 1 / -1; }
  .rows .row { grid-template-columns: 1fr; gap: 2px; }
}
.list-more { display: flex; justify-content: flex-end; margin-top: 18px; }
.list-more a { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.list-more a:hover { color: var(--ink); }

/* ---------- Subscribe ---------- */
/* Dark stage: a dim spotlight and drifting haze; the snake lives in the dark around it */
.subscribe-section {
  position: relative; isolation: isolate; overflow: hidden; padding: 240px var(--gutter); min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  text-align: center; border-top: 1px solid var(--rule);
  background: radial-gradient(ellipse 60% 70% at 50% 45%, #15161a 0%, #070708 55%, #000 100%);
}
.subscribe-section .snake { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.subscribe-section::before { /* slow haze */
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 30% 20% at 30% 60%, rgba(120,125,140,.10), transparent 70%),
    radial-gradient(ellipse 25% 18% at 70% 40%, rgba(110,100,140,.08), transparent 70%);
  filter: blur(30px); animation: haze 26s ease-in-out infinite alternate;
}
.subscribe-section::after { /* grain + edge vignette, so the snake fades into black at the sides */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 80% at 50% 50%, transparent 55%, #000 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
@keyframes haze { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(4%, -3%, 0); } }
@media (prefers-reduced-motion: reduce) { .subscribe-section::before { animation: none; } }
.subscribe-section h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1; margin: 0 0 14px; }
.subscribe-section p { color: var(--muted); margin: 0 auto 32px; max-width: 30rem; }
.subscribe-section .subscribe input { background: rgba(10,10,10,.8); }
.subscribe-section .subscribe { width: 100%; }
.subscribe-section h2, .subscribe-section p { text-shadow: 0 2px 24px #000, 0 0 8px #000; }
.subscribe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: 34rem; margin: 0 auto; }
.subscribe input {
  flex: 1 1 16rem; font: inherit; padding: 15px 18px; border: 1px solid var(--rule); border-radius: 4px;
  background: #0a0a0a; color: var(--ink);
}
.subscribe input:focus { outline: none; border-color: var(--ink); }
.form-note { font-size: .85rem; color: var(--muted); min-height: 1.4em; margin-top: 16px !important; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 30px;
  padding: 40px var(--gutter) 56px; font-family: var(--head); font-weight: 600; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Article ---------- */
.panel.article-hero { min-height: 78svh; }
.article-body { max-width: 38rem; margin: 0 auto; padding: 72px 20px 110px; font-family: var(--read); font-size: 1.22rem; line-height: 1.72; color: #e8e8e8; }
.article-body p { margin: 0 0 1.25em; }
.article-body h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.4rem; margin: 2.2em 0 .5em; }
.article-body blockquote { margin: 1.8em 0; padding-left: 22px; border-left: 2px solid var(--ink); font-size: 1.45rem; line-height: 1.4; color: var(--ink); }
.byline { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.placeholder { font-family: var(--body); font-size: .95rem; border: 1px dashed var(--rule); padding: 20px; color: var(--muted); border-radius: 4px; }

.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- Bio ---------- */
.bio { padding: 120px var(--gutter) 100px; border-top: 1px solid var(--rule); }
.bio-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.bio-lead { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; margin: 0; }
.bio-body { font-family: var(--read); font-size: 1.2rem; line-height: 1.7; color: #dcdcdc; }
.bio-body p { margin: 0 0 1.1em; }
.bio-body a { text-decoration-color: var(--red); text-underline-offset: 4px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 72px 0 0; background: var(--rule); border: 1px solid var(--rule); }
.stats div { background: #000; padding: 28px 26px; }
.stats dt { font-family: var(--head); font-weight: 700; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.stats div:nth-child(1) dt { color: var(--red); } .stats div:nth-child(2) dt { color: var(--ochre); } .stats div:nth-child(3) dt { color: #6f86ff; }
.stats dd { margin: 10px 0 0; font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .bio-grid { grid-template-columns: 1fr; gap: 28px; } .stats { grid-template-columns: 1fr; } }

/* ---------- Career: the retrospective ---------- */
.cv { --foundations: #3d56d6; --invest: #c89b3c; --growth: #d0613a; --scale: #e2482d;
  padding: 110px var(--gutter) 120px; border-top: 1px solid var(--rule); }
.cv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.cv-head h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; margin: 0; }
.cv-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-weight: 600; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, border-color .2s, background .2s;
}
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.on { color: #000; background: var(--ink); border-color: var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.foundations { background: var(--foundations); } .dot.invest { background: var(--invest); }
.dot.growth { background: var(--growth); } .dot.scale { background: var(--scale); }

.cv-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); gap: 48px; align-items: start; }
.cv-axis, .cv-row { display: grid; grid-template-columns: 13rem 1fr; gap: 20px; align-items: center; }
.cv-ticks { position: relative; height: 22px; font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .06em; color: var(--muted); }
.cv-ticks span, .cv-ticks b { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.cv-ticks b.now { color: var(--red); font-weight: 700; }
.cv-gridwrap { position: relative; }
.cv-grid { position: absolute; top: 0; bottom: 0; left: calc(13rem + 20px); right: 0; pointer-events: none; }
.cv-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.cv-grid b.now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--red); opacity: .6; }
.cv-rows { list-style: none; margin: 0; padding: 0; position: relative; }
.cv-row {
  width: 100%; padding: 12px 0; border: 0; border-top: 1px solid var(--rule); background: none; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; transition: opacity .25s, background .2s;
}
.cv-rows li:last-child .cv-row { border-bottom: 1px solid var(--rule); }
.cv-row:hover { background: rgba(255,255,255,.03); }
.cv-name { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; line-height: 1.15; }
.cv-name small { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.cv-track { position: relative; height: 22px; }
.cv-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; filter: url(#rough); transition: top .25s, bottom .25s, filter .25s; }
.cv-row[data-era="foundations"] .cv-bar { background: var(--foundations); }
.cv-row[data-era="invest"] .cv-bar { background: var(--invest); }
.cv-row[data-era="growth"] .cv-bar { background: var(--growth); }
.cv-row[data-era="scale"] .cv-bar { background: var(--scale); }
.cv-row[aria-pressed="true"] { background: rgba(255,255,255,.05); }
.cv-row[aria-pressed="true"] .cv-name { color: var(--ink); }
.cv-row[aria-pressed="true"] .cv-bar { top: -1px; bottom: -1px; box-shadow: 0 0 0 1px var(--ink); }
.cv-row.dim { opacity: .18; }
.cv-hint { font-size: .85rem; color: var(--muted); margin: 16px 0 0; }

/* the wall label */
.cv-label { position: sticky; top: 90px; background: #0b0b0c; border: 1px solid var(--rule); padding: 22px 24px 24px; }
.cv-plate { position: relative; aspect-ratio: 16 / 10; background: #121212; overflow: hidden; margin-bottom: 20px; }
.cv-plate i { position: absolute; filter: url(#rough); transition: all .5s cubic-bezier(.2,.7,.2,1); }
.cv-room { font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cv-co { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin: 0 0 8px; }
.cv-role { font-weight: 500; margin: 0; }
.cv-when { font-family: var(--head); font-weight: 600; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 6px 0 16px; }
.cv-desc { font-family: var(--read); font-size: 1.12rem; line-height: 1.55; color: #dcdcdc; margin: 0 0 20px; min-height: 5em; }
.cv-nav { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); padding-top: 14px; }
.cv-nav button { background: none; border: 0; color: var(--muted); font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 4px 0; }
.cv-nav button:hover:not(:disabled) { color: var(--ink); }
.cv-nav button:disabled { opacity: .3; cursor: default; }
.cv-label.swap .cv-co, .cv-label.swap .cv-desc, .cv-label.swap .cv-role, .cv-label.swap .cv-when { animation: cvIn .4s ease both; }
@keyframes cvIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .cv-body { grid-template-columns: 1fr; }
  .cv-label { position: static; order: -1; }
}
@media (max-width: 640px) {
  .cv-axis, .cv-row { grid-template-columns: 7.5rem 1fr; gap: 12px; }
  .cv-grid { left: calc(7.5rem + 12px); }
  .cv-name { font-size: .82rem; } .cv-name small { font-size: .72rem; }
  .cv-ticks span:nth-child(even) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cv-plate i, .cv-bar, .cv-row { transition: none; } .cv-label.swap * { animation: none !important; } }
/* era plates: a tiny painting per chapter */
.cv-label.era-markets .plate i:nth-child(1) { background: var(--blue); inset: 20% 45% 20% 12%; }
.cv-label.era-markets .plate i:nth-child(2) { background: var(--ink); inset: 44% 12% 44% 58%; }
.cv-label.era-strategy .plate i:nth-child(1) { background: #5a3f8f; width: 38%; aspect-ratio: 1; border-radius: 50%; left: 16%; top: 16%; }
.cv-label.era-strategy .plate i:nth-child(2) { background: var(--ink); height: 6%; left: 50%; right: 10%; top: 60%; }
.cv-label.era-invest .plate i:nth-child(1) { background: var(--ochre); inset: 14% 14% 42% 14%; }
.cv-label.era-invest .plate i:nth-child(2) { background: var(--red); inset: 64% 14% 14% 50%; }
.cv-label.era-growth .plate i:nth-child(1) { background: #c9502f; inset: 18% 54% 18% 10%; transform: rotate(-6deg); }
.cv-label.era-growth .plate i:nth-child(2) { background: var(--ink); width: 26%; aspect-ratio: 1; border-radius: 50%; right: 14%; top: 24%; }
.cv-label.era-ai .plate i:nth-child(1) { background: var(--red); width: 46%; aspect-ratio: 1; border-radius: 50%; left: 27%; top: 6%; }
.cv-label.era-ai .plate i:nth-child(2) { background: var(--blue); inset: 76% 8% 10% 8%; }



/* ---------- Musto Ventures page ---------- */
.mv-thesis, .mv-section { padding: 120px var(--gutter); border-top: 1px solid var(--rule); }
.mv-big { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 5.2vw, 4.6rem); line-height: 1; max-width: 22ch; margin: 0 0 56px; }
.mv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 72rem; font-family: var(--read); font-size: 1.22rem; line-height: 1.7; color: #dcdcdc; }
.mv-cols p { margin: 0; }
.mv-focus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 8px; }
.mv-focus article { background: #000; padding: 28px 26px 32px; }
.mv-focus h3 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; margin: 22px 0 10px; }
.mv-focus p { margin: 0; color: #bdbdbd; }
.mv-plate { position: relative; aspect-ratio: 16 / 10; background: #0d0d0d; overflow: hidden; }
.mv-plate i { position: absolute; filter: url(#rough); }
.p-a i:nth-child(1) { background: var(--blue); left: 12%; top: 22%; width: 22%; aspect-ratio: 1; }
.p-a i:nth-child(2) { background: var(--ink); left: 39%; top: 22%; width: 22%; aspect-ratio: 1; }
.p-a i:nth-child(3) { background: var(--red); left: 66%; top: 22%; width: 22%; aspect-ratio: 1; }
.p-b i:nth-child(1) { background: var(--ochre); inset: 18% 40% 18% 12%; transform: rotate(-4deg); }
.p-b i:nth-child(2) { background: var(--ink); inset: 40% 12% 40% 64%; }
.p-c i:nth-child(1) { background: var(--red); width: 44%; aspect-ratio: 1; border-radius: 50%; left: 28%; top: 8%; }
.p-c i:nth-child(2) { background: var(--ink); height: 5%; left: 10%; right: 10%; bottom: 14%; }
.mv-purpose { font-family: var(--read); font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.35; max-width: 46rem; margin: 0 0 56px; }
.mv-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.mv-pillars li { border-top: 2px solid var(--ink); padding-top: 18px; }
.mv-pillars span { font-family: var(--head); font-weight: 700; color: var(--red); font-size: .9rem; }
.mv-pillars h3 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; margin: 6px 0 10px; }
.mv-pillars p { margin: 0; color: #bdbdbd; }
.mv-cta { padding: 140px var(--gutter); text-align: center; border-top: 1px solid var(--rule); }
.mv-cta h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; margin: 0 auto 14px; max-width: 20ch; }
.mv-cta p { color: var(--muted); margin: 0 0 32px; }
@media (max-width: 900px) { .mv-cols, .mv-focus { grid-template-columns: 1fr; } .mv-pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mv-pillars { grid-template-columns: 1fr; } }

/* discreet skull in the wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 12px; }
.skull { width: 17px; height: 17px; flex: none; opacity: .38; transition: opacity .4s, transform .4s; }
.skull .bone { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.skull .socket { fill: currentColor; opacity: .85; transition: fill .4s, filter .4s; }
.wordmark:hover .skull { opacity: 1; transform: rotate(-6deg); }
.wordmark:hover .skull .socket { fill: #c9a85a; filter: drop-shadow(0 0 3px rgba(201,168,90,.8)); }
@media (prefers-reduced-motion: reduce) { .skull, .skull .socket { transition: none; } .wordmark:hover .skull { transform: none; } }
.wordmark span { white-space: nowrap; }
@media (max-width: 640px) { .wordmark { gap: 8px; letter-spacing: .2em; } .skull { width: 15px; height: 15px; } }
.bio-body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .site-header { gap: 12px; }
  .wordmark { letter-spacing: .14em; font-size: .82rem; }
  .site-nav { gap: 12px; }
  .site-nav a { font-size: .7rem; letter-spacing: .05em; }
}
@media (max-width: 380px) { .site-nav a[href$="#subscribe"] { display: none; } }
/* acquisitions on the career chart */
.cv-exitmark { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); background: #000; border: 2px solid var(--ink); z-index: 1; }
.cv-exitkey { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid var(--ink); margin: 0 10px 0 2px; vertical-align: 0; }
.cv-exit { display: flex; align-items: center; gap: 10px; margin: -6px 0 20px; padding: 10px 12px; border: 1px solid var(--rule); font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cv-exit::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); border: 2px solid var(--ink); flex: none; }
.cv-exit[hidden] { display: none; }
.cv-co a { color: inherit; text-decoration: none; } .cv-co a:hover { text-decoration: underline; text-underline-offset: 5px; }
.mv-advisory { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 36px; align-items: center; padding: 26px; border: 1px solid var(--rule); background: #050505; text-decoration: none; color: var(--ink); transition: border-color .25s, background .25s; }
.mv-advisory:hover { border-color: var(--ink); background: #0b0b0c; }
.mv-advisory h3 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin: 6px 0 14px; }
.mv-advisory h3 span { font-size: .6em; vertical-align: .3em; color: var(--muted); }
.mv-advisory p { margin: 0; color: #cfcfcf; max-width: 44rem; }
.mv-adv-tag { font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ochre) !important; }
@media (max-width: 760px) { .mv-advisory { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- About page ---------- */
.ab-hero h1 { max-width: none; white-space: nowrap; font-size: clamp(2.2rem, 5vw, 4.4rem); }
@media (max-width: 420px) { .ab-hero h1 { white-space: normal; } }
.ab-sec { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 48px; padding: 110px var(--gutter); border-top: 1px solid var(--rule); }
.ab-rail { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 96px; align-self: start; }
.ab-num { font-family: var(--head); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--red); }
.ab-lbl { font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ab-body { max-width: 44rem; font-family: var(--read); font-size: 1.22rem; line-height: 1.7; color: #dcdcdc; }
.ab-body p { margin: 0 0 1.15em; }
.ab-body a { text-decoration-color: var(--red); text-underline-offset: 4px; }
.ab-lead { font-family: var(--head) !important; font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--ink); margin-bottom: .9em !important; }
.ab-quote { margin: 1.6em 0; padding: 24px 0 0; border-top: 2px solid var(--red); font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; color: var(--ink); }
.ab-small { font-size: .95rem; color: var(--muted); }

.ab-nums { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ab-nums div { padding: 34px var(--gutter) 30px; border-left: 1px solid var(--rule); }
.ab-nums div:first-child { border-left: 0; }
.ab-nums b { display: block; font-family: var(--head); font-weight: 700; font-size: clamp(3rem, 6vw, 5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ab-nums div:nth-child(1) b { color: var(--red); } .ab-nums div:nth-child(2) b { color: var(--ochre); }
.ab-nums div:nth-child(3) b { color: #6f86ff; } .ab-nums div:nth-child(5) b { color: #5fa56f; }
.ab-nums span { display: block; margin-top: 10px; font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }

.ab-off { grid-template-rows: auto auto auto; }
.ab-off .ab-cards, .ab-off .ab-note { grid-column: 1 / -1; }
.ab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 22px; margin-top: 8px; }
.ab-card { background: #0b0b0c; border: 1px solid var(--rule); padding: 0 0 26px; transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s; }
.ab-card:hover { transform: translateY(-6px); border-color: var(--muted); }
.ab-card:hover .ab-art { transform: scale(1.04); }
.ab-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ab-card { overflow: hidden; }
.ab-tag { margin: 22px 24px 6px; font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); }
.ab-card h3 { margin: 0 24px 10px; font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.ab-card p:not(.ab-tag) { margin: 0 24px; color: #c9c9c9; font-size: .98rem; line-height: 1.55; }
.ab-note { margin: 24px 0 0; font-size: .85rem; color: var(--muted); }

.cv-rail { position: static; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 28px; }

@media (max-width: 1000px) { .ab-nums { grid-template-columns: repeat(3, 1fr); } .ab-nums div:nth-child(4) { border-left: 0; } .ab-nums div:nth-child(n+4) { border-top: 1px solid var(--rule); } }
@media (max-width: 760px) {
  .ab-sec { grid-template-columns: 1fr; gap: 20px; padding: 80px var(--gutter); }
  .ab-rail { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .ab-nums { grid-template-columns: 1fr 1fr; }
  .ab-nums div { border-left: 0 !important; border-top: 1px solid var(--rule); }
}
@media (prefers-reduced-motion: reduce) { .ab-card, .ab-art { transition: none; } }
.ab-off .ab-rail { position: static; }
.ab-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ab-card { grid-column: span 2; }
.ab-card:nth-child(4), .ab-card:nth-child(5) { grid-column: span 3; }
.ab-card:nth-child(4) .ab-art, .ab-card:nth-child(5) .ab-art { aspect-ratio: 16 / 9; }
@media (max-width: 1000px) { .ab-cards { grid-template-columns: 1fr 1fr; } .ab-card, .ab-card:nth-child(4) { grid-column: span 1; } .ab-card:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ab-cards { grid-template-columns: 1fr; } .ab-card:nth-child(5) { grid-column: auto; } }

/* two buttons side by side in panels */
.copy .btn + .btn { margin-left: 10px; }
@media (max-width: 480px) { .copy .btn + .btn { margin: 10px 0 0; } }

/* ---------- Career story ---------- */
.cs { --g: var(--red); --t: #6f86ff; }
.cs-hero { padding: 150px var(--gutter) 40px; }
.cs-hero h1 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: .95; margin: 0 0 20px; }
.cs-hero .lead { max-width: 40rem; font-size: 1.15rem; color: #d8d8d8; margin: 0; }
.cs-stage { padding: 30px var(--gutter) 110px; }

.cs-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
.cs-dot { font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .06em; min-width: 52px; padding: 9px 10px; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; border-radius: 3px; transition: all .25s; }
.cs-dot.milestone { min-width: 38px; color: var(--t); }
.cs-dot:hover { color: var(--ink); border-color: var(--muted); }
.cs-dot.done { color: #c8c8c8; border-color: #3a3a3a; background: #0d0d0e; }
.cs-dot.on { color: #000; background: var(--ink); border-color: var(--ink); }

.cs-grid-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.cs-card { background: #0b0b0c; border: 1px solid var(--rule); padding: 34px 34px 30px; min-height: 30rem; position: relative; overflow: hidden; }
.cs-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--g), var(--t)); }
.cs-card[data-kind="milestone"]::before { background: var(--t); }
.cs-card.in > * { animation: csIn .5s cubic-bezier(.2,.7,.2,1) both; }
.cs-card.in > *:nth-child(2) { animation-delay: .05s; } .cs-card.in > *:nth-child(3) { animation-delay: .1s; }
.cs-card.in > *:nth-child(4) { animation-delay: .15s; } .cs-card.in > *:nth-child(5) { animation-delay: .2s; } .cs-card.in > *:nth-child(n+6) { animation-delay: .25s; }
@keyframes csIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cs-kicker { font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin: 0 0 14px; }
.cs-card[data-kind="milestone"] .cs-kicker { color: var(--t); }
.cs-co { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin: 0; }
.cs-co a { color: inherit; text-decoration: none; } .cs-co a:hover { text-decoration: underline; text-underline-offset: 6px; }
.cs-role { font-weight: 500; margin: 8px 0 22px; color: var(--ink); }
.cs-role span { color: var(--muted); font-weight: 400; }
.cs-head { font-family: var(--read); font-weight: 400; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.25; margin: 0 0 14px; }
.cs-card[data-kind="intro"] .cs-head, .cs-card[data-kind="finale"] .cs-head { font-family: var(--head); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: .98; margin-top: 6px; }
.cs-body { font-family: var(--read); font-size: 1.12rem; line-height: 1.65; color: #d6d6d6; margin: 0 0 20px; max-width: 40rem; }
.cs-badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 9px 12px; border: 1px solid var(--rule); font-family: var(--head); font-weight: 600; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.cs-badge::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); border: 2px solid var(--ink); }
.cs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; border-top: 1px solid var(--rule); padding-top: 18px; }
.cs-cols h3 { font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 10px; }
.cs-cols h3.g { color: var(--g); } .cs-cols h3.t { color: var(--t); }
.cs-cols ul { list-style: none; margin: 0; padding: 0; }
.cs-cols li { position: relative; padding-left: 16px; margin-bottom: 8px; font-size: .95rem; color: #d0d0d0; line-height: 1.4; }
.cs-cols div:first-child li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--g); }
.cs-cols div:last-child li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--t); }
.cs-essays { font-size: .9rem; color: var(--muted); margin: 18px 0 0; }
.cs-essays a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--red); }
.cs-final-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cs-final-cta .btn + .btn { margin: 0; }

.cs-side { position: sticky; top: 96px; }
.cs-side-title { font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.cs-braid { width: 100%; height: auto; display: block; background: #070708; border: 1px solid var(--rule); }
.cs-yr { fill: var(--muted); font-family: var(--head); font-size: 13px; font-weight: 600; }
.cs-grid { stroke: #1a1a1c; stroke-width: 1; }
.cs-thread-lbl { font-family: var(--head); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cs-thread-lbl.g { fill: var(--g); } .cs-thread-lbl.t { fill: var(--t); }
.cs-track { fill: none; stroke: #1c1c20; stroke-width: 3; }
.cs-line { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.3,.7,.2,1); }
.cs-line.g { stroke: var(--g); } .cs-line.t { stroke: var(--t); }
.cs-node { cursor: pointer; }
.cs-node circle, .cs-node rect { fill: #070708; stroke: #333; stroke-width: 2; transition: all .4s; }
.cs-node .cs-link { stroke: #2a2a2e; stroke-width: 1.5; stroke-dasharray: 3 3; transition: stroke .4s; }
.cs-node.lit circle.g { fill: var(--g); stroke: var(--g); } .cs-node.lit circle.t, .cs-node.lit rect.t { fill: var(--t); stroke: var(--t); }
.cs-node.lit .cs-link { stroke: #777; }
.cs-node.cur circle, .cs-node.cur rect { stroke: #fff; stroke-width: 3; }
.cs-node:hover circle, .cs-node:hover rect { stroke: #fff; }
.cs-now { stroke: #fff; stroke-width: 1; stroke-dasharray: 2 4; opacity: .6; transition: x1 .9s, x2 .9s, opacity .3s; }

.cs-counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: 0; }
.cs-counters div { background: #000; padding: 16px 16px 14px; }
.cs-counters b { display: block; font-family: var(--head); font-weight: 700; font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cs-counters span { display: block; margin-top: 6px; font-family: var(--head); font-weight: 600; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cs-stack { margin-top: 18px; }
.cs-stack > p { font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin: 14px 0 8px; }
.cs-stack > p.g { color: var(--g); } .cs-stack > p.t { color: var(--t); }
.cs-stack-g, .cs-stack-t { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.chip-s { font-family: var(--head); font-weight: 600; font-size: .74rem; letter-spacing: .04em; padding: 6px 10px; border-radius: 999px; border: 1px solid; }
.chip-s.g { border-color: rgba(226,72,45,.5); color: #f0b3a6; } .chip-s.t { border-color: rgba(111,134,255,.5); color: #c3ccff; }
.chip-s.new { animation: chipIn .6s cubic-bezier(.2,.9,.3,1.3) both; }
.chip-s.g.new { background: var(--g); color: #000; border-color: var(--g); } .chip-s.t.new { background: var(--t); color: #000; border-color: var(--t); }
@keyframes chipIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.cs-empty { font-size: .85rem; color: #555; }

.cs-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 26px; border-top: 1px solid var(--rule); padding-top: 18px; }
.cs-controls button { font-family: var(--head); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; padding: 14px 22px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 4px; transition: background .2s, color .2s; }
.cs-controls button:hover:not(:disabled) { background: var(--ink); color: #000; }
.cs-controls button:disabled { opacity: .25; cursor: default; }
.cs-controls .cs-play { border-color: var(--rule); color: var(--muted); }
.cs-hint { font-size: .82rem; color: var(--muted); margin: 12px 0 0; text-align: center; }

@media (max-width: 1000px) {
  .cs-grid-main { grid-template-columns: 1fr; }
  .cs-side { position: static; }
  .cs-card { min-height: 0; }
}
@media (max-width: 560px) {
  .cs-card { padding: 26px 22px; }
  .cs-cols { grid-template-columns: 1fr; }
  .cs-dot { min-width: 44px; padding: 8px 6px; font-size: .7rem; }
  .cs-controls button { padding: 12px 14px; font-size: .75rem; }
  .cs-counters b { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { .cs-line, .cs-now, .cs-node * { transition: none; } .cs-card.in > *, .chip-s.new { animation: none; } }

/* bridge from the professional bio to the personal cards */
.ab-bridge { position: relative; padding: 120px var(--gutter) 90px; border-top: 1px solid var(--rule); text-align: center; overflow: hidden; }
.ab-stroke { display: block; width: min(100%, 64rem); height: 90px; margin: 0 auto 36px; opacity: .95; }
.ab-bridge-big { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 6vw, 5rem); line-height: .95; margin: 8px auto 22px; max-width: 16ch; }
.ab-bridge-copy { font-family: var(--read); font-size: 1.25rem; line-height: 1.6; color: #d6d6d6; max-width: 40rem; margin: 0 auto; }
.ab-cards-intro { font-family: var(--read); font-style: italic; font-size: 1.3rem; color: #d6d6d6; margin: 6px 0 0; }
.ab-off { padding-top: 90px; }
.site-header { background: linear-gradient(#000 0%, #000 55%, #0000 100%); }

/* ---------- Merch ---------- */
.mx-hero { padding: 150px var(--gutter) 56px; }
.mx-hero h1 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(3rem, 9vw, 7.5rem); line-height: .9; margin: 0 0 22px; }
.mx-hero .lead { max-width: 38rem; font-size: 1.15rem; color: #d8d8d8; margin: 0; }
.mx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: #000; padding: 0 var(--gutter) 40px; }
.mx-item { display: flex; flex-direction: column; background: #000; padding-bottom: 46px; }
.mx-shot { aspect-ratio: 15 / 16; background: #ebebea; overflow: hidden; }
.mx-shot img, .mx-shot svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.mx-item:hover .mx-shot img, .mx-item:hover .mx-shot svg { transform: scale(1.035); }
.mx-info { display: grid; grid-template-columns: 3rem 1fr; column-gap: 12px; padding: 22px 4px 0; }
.mx-no { grid-row: span 3; font-family: var(--head); font-weight: 700; color: var(--muted); margin: 4px 0 0; }
.mx-info h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.6rem; line-height: 1; margin: 0 0 10px; }
.mx-desc { margin: 0 0 12px; color: #cfcfcf; max-width: 34rem; }
.mx-meta { margin: 0; font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mx-meta::after { content: " · Coming soon"; color: var(--red); }
.mx-notify { min-height: 70svh !important; }
@media (max-width: 760px) { .mx-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .mx-shot img, .mx-shot svg { transition: none; } }

/* merch: single featured piece */
.mx-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 10px var(--gutter) 110px; }
.mx-feature .mx-info { display: block; padding: 0; }
.mx-feature .mx-no { margin: 0 0 10px; }
.mx-feature h2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 4rem); line-height: .95; margin: 0 0 18px; }
.mx-feature .mx-desc { font-size: 1.1rem; margin-bottom: 26px; }
.mx-specs { display: grid; gap: 0; margin: 0 0 30px; border-top: 1px solid var(--rule); }
.mx-specs div { display: grid; grid-template-columns: 6rem 1fr; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.mx-specs dt { font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.mx-specs dd { margin: 0; }
@media (max-width: 860px) { .mx-feature { grid-template-columns: 1fr; gap: 28px; } }
.mx-pre { display: inline-block; margin-left: 10px; padding: 3px 9px; border: 1px solid var(--red); border-radius: 999px; color: var(--red); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; vertical-align: 2px; }
.mx-preline { margin: -10px 0 26px; padding-left: 14px; border-left: 2px solid var(--red); color: var(--ink); font-size: .98rem; }
.mx-shot-photo { background: #d8d8d8; display: flex; align-items: center; justify-content: center; }
.mx-shot-photo img { object-fit: contain; max-width: 560px; }
.mx-shot-photo { aspect-ratio: 513 / 490; }
.mx-shot-photo img { object-fit: cover; max-width: none; }
.mx-fig { margin: 0; }
.mx-fig figcaption { margin-top: 10px; font-size: .78rem; color: var(--muted); }
.mx-shot-square { aspect-ratio: 1 / 1; }

/* merch: order form */
.mx-order { margin: 4px 0 0; }
.mx-price { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; }
.mx-price b { font-family: var(--head); font-weight: 700; font-size: 2.2rem; line-height: 1; }
.mx-price span { font-family: var(--head); font-weight: 600; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mx-sizes { border: 0; margin: 0 0 10px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mx-sizes legend { font-family: var(--head); font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding: 0; }
.mx-sizes label { position: relative; }
.mx-sizes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.mx-sizes span { display: grid; place-items: center; min-width: 64px; height: 50px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 4px; font-family: var(--head); font-weight: 700; letter-spacing: .06em; transition: border-color .2s, background .2s, color .2s; }
.mx-sizes label:hover span { border-color: var(--muted); }
.mx-sizes input:checked + span { background: var(--ink); color: #000; border-color: var(--ink); }
.mx-sizes input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.mx-fit { font-size: .85rem; color: var(--muted); margin: 0 0 20px; max-width: 30rem; }
.mx-buy { width: 100%; max-width: 30rem; justify-content: center; padding: 18px 26px; background: var(--ink); color: #000; font-size: .9rem; }
.mx-buy:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #000; }
.mx-buy:disabled { background: transparent; color: var(--muted); border-color: var(--rule); cursor: not-allowed; }
.mx-order-note { font-size: .82rem; color: var(--muted); margin: 12px 0 8px; max-width: 30rem; }
.mx-alt { font-size: .85rem; color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--red); }
.mx-shot-tall { aspect-ratio: 4 / 5; background: #fff; }
.mx-shot-white { aspect-ratio: 1 / 1; background: #fff; }
.mx-shot-white img { object-fit: contain; }
.mx-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.mx-thumb { width: 84px; height: 84px; padding: 0; border: 1px solid var(--rule); background: #fff; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.mx-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mx-thumb:hover { opacity: .9; }
.mx-thumb.on { opacity: 1; border-color: var(--ink); }