@font-face {
font-family: 'Anton';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/anton-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Barlow Condensed';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(/assets/fonts/barlow-condensed-italic-900.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/caveat-normal-500.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/caveat-normal-500.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/inter-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/inter-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/assets/fonts/inter-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/inter-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(/assets/fonts/inter-tight-italic-800.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(/assets/fonts/inter-tight-italic-800.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/assets/fonts/inter-tight-normal-700.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/fonts/inter-tight-normal-700.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter Tight';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(/assets/fonts/inter-tight-normal-700.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/assets/fonts/jetbrains-mono-normal-400.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--cream: #FBF4E8;
--paper: #FFFDF8;
--sky: #9CC3F5;
--peri: #8D9CF2;
--mint: #CBE4B4;
--clay: #D98B5B;
--butter: #FFE7A3;
--pink: #F6B8C4;
--ink: #26283A;
--ink-2: #4A4E66;
--muted: #6B6F85;
--line: #EADFCB;
--line-2: #E2E5F0;
--red: #E8645A;
--font-head: "Fredoka", "Nunito", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 32px;
--shadow-1: 0 1px 2px rgba(38, 40, 58, .06), 0 4px 14px rgba(38, 40, 58, .06);
--shadow-2: 0 2px 4px rgba(38, 40, 58, .06), 0 14px 40px rgba(38, 40, 58, .12);
--shadow-toy: 0 4px 0 rgba(38, 40, 58, .12);
--spring: cubic-bezier(.34, 1.56, .64, 1);
--ease: cubic-bezier(.22, .8, .24, 1);
--gutter: clamp(16px, 4vw, 40px);
color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
margin: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
html.mode-xp body { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 .8em; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78em; }
:focus-visible { outline: 3px solid var(--peri); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.small { font-size: .88rem; color: var(--muted); }
.eyebrow {
font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--muted); margin: 0 0 .6em;
}
.mono {
display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
background: var(--ink); color: var(--butter); font-family: var(--font-head); font-weight: 600; font-size: 15px;
box-shadow: var(--shadow-toy); flex: none;
}
.btn {
display: inline-flex; align-items: center; gap: .5em; padding: .78em 1.2em; min-height: 46px;
border-radius: 999px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.1;
box-shadow: 0 3px 0 var(--ink); transition: transform .18s var(--spring), box-shadow .18s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 #0e0f18; }
.btn-ink:hover { box-shadow: 0 5px 0 #0e0f18; }
.btn-ghost { border-color: transparent; box-shadow: none; background: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost:hover { box-shadow: none; }
.btn[disabled] { opacity: .6; pointer-events: none; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2em; }
.pill-btn {
display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px;
border: 1.5px solid rgba(38, 40, 58, .14); background: rgba(255, 253, 248, .85); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); font-weight: 600; font-size: .88rem; text-decoration: none; color: var(--ink);
transition: transform .18s var(--spring), background .2s, border-color .2s;
}
.pill-btn:hover { transform: translateY(-1px); border-color: rgba(38, 40, 58, .3); }
.pill-btn svg { width: 18px; height: 18px; }
.pill-btn.icon-only { width: 40px; padding: 0; justify-content: center; }
.pill-accent { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.text-link { background: none; border: 0; padding: 0; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }
.text-link svg { width: 15px; height: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 1em 0; }
.chips li {
padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line);
font-size: .86rem; font-weight: 500;
}
.chips.small li { font-size: .78rem; padding: 4px 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: .8em 0 0; }
.tags li { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); }
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 1.2em 0; }
.results li {
background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-md); padding: 14px 16px; box-shadow: 0 3px 0 var(--ink);
}
.results strong { display: block; font-family: var(--font-head); font-size: 1.7rem; line-height: 1; margin-bottom: 6px; }
.results span { font-size: .86rem; color: var(--ink-2); line-height: 1.35; display: block; }
.checklist { list-style: none; padding: 0; margin: 1em 0; display: grid; gap: 8px; }
.checklist li { padding-left: 30px; position: relative; }
.checklist li::before {
content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 7px; background: var(--mint);
box-shadow: inset 0 0 0 2px var(--ink);
}
.checklist li::after { content: ""; position: absolute; left: 6px; top: .45em; width: 8px; height: 5px; border: 2.5px solid var(--ink); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.looking { background: var(--butter); border-radius: var(--r-md); padding: 16px 18px; margin: 1em 0; }
.looking h4 { font-size: 1.05rem; margin-bottom: .35em; }
.looking p { margin: 0; }
.ph {
margin: 0; position: relative; background: var(--paper); padding: 10px 10px 30px; border-radius: 6px;
box-shadow: var(--shadow-1); transform: rotate(var(--tilt, 0deg)); transition: transform .3s var(--spring);
}
.ph:hover { transform: rotate(0) scale(1.02); }
.ph-inner {
aspect-ratio: 4 / 3; border-radius: 4px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
background: repeating-linear-gradient(-45deg, #F3ECDF 0 10px, #EFE6D6 10px 20px); color: var(--muted); font-size: .82rem; padding: 10px;
}
.ph-inner code { font-size: .68rem; color: var(--muted); opacity: .8; word-break: break-all; }
.ph-icon svg { width: 26px; height: 26px; opacity: .6; }
.ph-tape { position: absolute; top: -9px; left: 50%; width: 70px; height: 20px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 231, 163, .85); }
.ph.has-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.simple { min-height: 100vh; }
html.mode-xp .simple { visibility: hidden; height: 100vh; overflow: hidden; }
.s-nav {
position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px var(--gutter);
background: rgba(251, 244, 232, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(38, 40, 58, .06);
}
.s-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; }
.s-links { display: none; gap: 4px; margin-left: auto; }
.s-links a { text-decoration: none; font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 999px; transition: background .2s; }
.s-links a:hover { background: rgba(38, 40, 58, .06); }
.s-actions { display: flex; gap: 8px; margin-left: auto; }
@media (min-width: 960px) {
.s-links { display: flex; }
.s-actions { margin-left: 8px; }
}
@media (max-width: 520px) {
.s-brand span:last-child { display: none; }
.pill-btn span { font-size: .82rem; }
}
.s-hero {
display: grid; gap: 28px; align-items: center; padding: clamp(28px, 6vw, 72px) var(--gutter) clamp(32px, 6vw, 64px);
max-width: 1200px; margin: 0 auto;
}
.s-hero h1 { font-size: clamp(2.3rem, 7.5vw, 4.6rem); margin-bottom: .35em; }
.lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--ink-2); max-width: 46ch; }
@media (min-width: 860px) { .s-hero { grid-template-columns: 1.35fr 1fr; } }
.s-hero-art {
position: relative; border: 0; background: var(--sky); border-radius: var(--r-xl); aspect-ratio: 1 / 1.05; max-height: min(520px, 70vh); width: 100%;
display: grid; place-items: end center; overflow: hidden; padding: 0; isolation: isolate;
box-shadow: inset 0 0 0 2px rgba(38, 40, 58, .9), 0 6px 0 var(--ink); transition: transform .3s var(--spring);
}
.s-hero-art:hover { transform: translateY(-3px) rotate(-.6deg); }
.s-hero-art svg { position: absolute; left: 50%; bottom: -1%; transform: translateX(-50%); height: 84%; width: auto; max-width: none; z-index: 2; }
.blob { position: absolute; border-radius: 50%; z-index: 0; }
.b1 { width: 70%; height: 46%; background: #fff; opacity: .75; top: 12%; left: -14%; filter: blur(2px); border-radius: 40% 60% 50% 50%; animation: floaty 9s ease-in-out infinite; }
.b2 { width: 50%; height: 30%; background: #fff; opacity: .6; top: 6%; right: -10%; animation: floaty 11s ease-in-out infinite reverse; }
.b3 { width: 120%; height: 30%; background: var(--mint); bottom: -14%; left: -10%; border-radius: 50%; }
.hero-bubble {
position: absolute; top: 16px; left: 16px; z-index: 3; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
padding: 8px 14px; font-weight: 600; font-size: .88rem; box-shadow: 0 3px 0 var(--ink);
}
@keyframes floaty { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6%, 4%); } }
.s-section { max-width: 1200px; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--gutter) 0; }
.s-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.s-head h2 { font-size: clamp(1.8rem, 4.6vw, 2.8rem); }
.s-head p { color: var(--muted); margin: 0; }
.pgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pgrid { grid-template-columns: repeat(4, 1fr); } .pgrid li:has(.is-big) { grid-column: span 2; } }
.pcard {
width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-lg);
background: var(--c); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: transform .25s var(--spring), box-shadow .25s var(--ease);
min-height: 220px;
}
.pcard:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 8px 0 var(--ink); }
.pcard:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }
.pcard-top { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 600; }
.pcard-top svg { width: 22px; height: 22px; transition: transform .25s var(--spring); }
.pcard:hover .pcard-top svg { transform: translateX(4px); }
.pcard-period { background: rgba(255, 255, 255, .65); padding: 3px 10px; border-radius: 999px; }
.pcard-title { font-family: var(--font-head); font-weight: 600; font-size: 1.55rem; line-height: 1.1; margin-top: 8px; }
.pcard.is-big .pcard-title { font-size: 2rem; }
.pcard-role { font-weight: 600; font-size: .9rem; }
.pcard-sum { font-size: .9rem; color: var(--ink-2); flex: 1; }
.pcard-metric { font-size: .82rem; background: rgba(255, 255, 255, .7); padding: 8px 12px; border-radius: 12px; }
.pcard-metric strong { font-family: var(--font-head); font-size: 1.05rem; }
.s-about-grid { display: grid; gap: 24px; font-size: 1.05rem; }
@media (min-width: 860px) { .s-about-grid { grid-template-columns: 1.3fr 1fr; gap: 48px; } }
.sgrid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.scard { background: var(--paper); border-radius: var(--r-lg); padding: 20px; border: 1.5px solid var(--line); }
.scard:nth-child(6n + 1) { background: #EEF4FE; }
.scard:nth-child(6n + 2) { background: #FFF6DA; }
.scard:nth-child(6n + 3) { background: #EEF6E7; }
.scard:nth-child(6n + 4) { background: #FDEEF1; }
.scard:nth-child(6n + 5) { background: #F0EEFD; }
.scard:nth-child(6n + 6) { background: #FFF0E4; }
.scard h3 { font-size: 1.3rem; margin-bottom: .3em; }
.scard p { color: var(--ink-2); font-size: .94rem; margin: 0; }
.scard .chips { margin-bottom: 0; }
.press-list { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink); }
.press-list li {
display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 16px 4px; border-bottom: 1.5px solid var(--line);
}
.press-outlet { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); grid-column: 1; }
.press-title { font-family: var(--font-head); font-size: 1.2rem; grid-column: 1; }
.press-date { color: var(--muted); font-size: .88rem; grid-column: 2; grid-row: 1; text-align: right; }
.press-todo { font-size: .78rem; color: var(--muted); border: 1.5px dashed var(--line); padding: 2px 8px; border-radius: 999px; grid-column: 2; grid-row: 2; }
.press-list .text-link { grid-column: 2; grid-row: 2; justify-self: end; }
.s-contact { padding-bottom: 40px; }
.s-contact-grid {
display: grid; gap: 28px; background: var(--peri); color: var(--ink); border-radius: var(--r-xl); padding: clamp(22px, 5vw, 48px);
border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
}
@media (min-width: 860px) { .s-contact-grid { grid-template-columns: 1fr 1fr; } }
.s-contact h2 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: .3em; }
.contact-links { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 8px; }
.contact-links a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.contact-links a:hover { text-decoration: underline; }
.cv-inline { display: flex; flex-wrap: wrap; gap: 10px; }
.cform { display: grid; gap: 12px; background: var(--paper); border-radius: var(--r-lg); padding: 20px; border: 2px solid var(--ink); }
.cform label { display: grid; gap: 4px; font-weight: 600; font-size: .88rem; }
.cform input, .cform textarea {
font: inherit; font-weight: 400; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
transition: border-color .2s, box-shadow .2s;
}
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--peri); box-shadow: 0 0 0 4px rgba(141, 156, 242, .25); }
.cform textarea { resize: vertical; min-height: 120px; }
.cform .btn { justify-self: start; }
.cform-status { margin: 0; font-size: .9rem; min-height: 1.4em; }
.cform-status.is-ok { color: #2E7D4F; font-weight: 600; }
.cform-status.is-ko { color: #B4372D; }
.s-foot {
max-width: 1200px; margin: 0 auto; padding: 28px var(--gutter) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
color: var(--muted); font-size: .88rem;
}
.s-foot-links { display: flex; gap: 16px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.panel { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.panel[hidden] { display: none; }
.panel-backdrop { position: absolute; inset: 0; background: rgba(38, 40, 58, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s var(--ease); }
.panel.is-in .panel-backdrop { opacity: 1; }
.panel.is-out .panel-backdrop { opacity: 0; }
.panel-sheet {
position: relative; width: min(880px, 100%); max-height: min(88vh, 900px); overflow: auto; overscroll-behavior: contain;
background: var(--paper); border-radius: var(--r-xl); border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink), 0 30px 80px rgba(38, 40, 58, .25);
transform: translateY(30px) scale(.94); opacity: 0; transition: transform .5s var(--spring), opacity .25s var(--ease);
-webkit-user-select: text; user-select: text;
}
.panel.is-in .panel-sheet { transform: none; opacity: 1; }
.panel.is-out .panel-sheet { transform: translateY(16px) scale(.97); opacity: 0; transition-duration: .22s; }
.panel-close {
position: sticky; top: 12px; float: right; margin: 12px 12px -56px 0; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
border: 2px solid var(--ink); background: var(--paper); display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink);
transition: transform .2s var(--spring);
}
.panel-close:hover { transform: rotate(90deg) scale(1.05); }
.sheet-pad { padding: clamp(22px, 4vw, 44px); }
.sheet-title { font-size: clamp(1.8rem, 4.4vw, 2.6rem); margin-bottom: .4em; padding-right: 48px; }
html.has-panel body { overflow: hidden; }
@media (max-width: 640px) {
.panel { padding: 0; place-items: end stretch; }
.panel-sheet { width: 100%; max-height: 92vh; border-radius: 26px 26px 0 0; border-bottom: 0; transform: translateY(100%); }
.panel.is-out .panel-sheet { transform: translateY(100%); }
}
.case-head { background: var(--c); margin: calc(-1 * clamp(22px, 4vw, 44px)) calc(-1 * clamp(22px, 4vw, 44px)) 0; padding: clamp(22px, 4vw, 44px); padding-right: 72px; border-bottom: 2px solid var(--ink); }
.os-win .case-head, .case.in-win .case-head { margin: 0; }
.case-kicker { font-weight: 600; font-size: .86rem; margin-bottom: .5em; }
.case-title { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: .3em; }
.case-sum { font-size: 1.05rem; max-width: 56ch; margin: 0; }
.case-cols { display: grid; gap: 16px; margin: 8px 0 20px; }
@media (min-width: 720px) { .case-cols { grid-template-columns: 1fr 1.4fr; } }
.note { background: #FFFBEF; border-radius: 14px; padding: 18px 20px; border: 1.5px solid var(--line); position: relative; }
.note h4 { font-size: 1.1rem; margin-bottom: .5em; }
.note p { margin: 0; }
.note-lined { background: repeating-linear-gradient(180deg, #FFFDF8 0 27px, #E8EEF9 27px 28px); padding-top: 18px; }
.note ul { margin: 0; padding-left: 1.1em; }
.note li { margin-bottom: .45em; line-height: 1.55; }
.case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin: 22px 0 6px; padding-top: 8px; }
.case-actions { margin-top: 20px; }
.panel-sheet.is-os { width: min(1080px, 100%); height: min(720px, 88vh); max-height: none; overflow: hidden; display: flex; flex-direction: column; padding: 0; }
.is-os .panel-body { flex: 1; display: flex; min-height: 0; }
.is-os .panel-close { position: absolute; top: 4px; right: 4px; margin: 0; width: 34px; height: 34px; box-shadow: none; border-width: 1.5px; }
.os { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.os-bar {
display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 56px 0 16px; background: rgba(255, 253, 248, .92);
border-bottom: 1.5px solid var(--line-2); font-size: .86rem; font-weight: 600; flex: none;
}
.os-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 1rem; }
.os-dot { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--sky), var(--pink), var(--butter), var(--mint), var(--sky)); }
.os-menu { color: var(--muted); font-weight: 500; }
.os-spacer { flex: 1; }
.os-desk {
position: relative; flex: 1; min-height: 0; overflow: hidden;
background: radial-gradient(60% 70% at 85% 20%, rgba(246, 184, 196, .8), rgba(246, 184, 196, 0) 70%),
radial-gradient(70% 70% at 15% 90%, rgba(203, 228, 180, .9), rgba(203, 228, 180, 0) 70%),
linear-gradient(160deg, #B9C4F6, #9CC3F5);
}
.os-icons { position: absolute; inset: 14px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 100px); grid-auto-columns: 100px; gap: 4px; align-content: start; justify-content: start; }
.os-icon {
display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 4px; border-radius: 14px;
font-size: .78rem; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.2; transition: background .2s, transform .2s var(--spring);
}
.os-icon svg { width: 56px; height: 46px; filter: drop-shadow(0 3px 0 rgba(38, 40, 58, .15)); transition: transform .25s var(--spring); }
.os-icon:hover { background: rgba(255, 255, 255, .35); }
.os-icon:hover svg { transform: translateY(-3px) scale(1.06); }
.os-icon span { background: rgba(255, 253, 248, .75); padding: 2px 6px; border-radius: 6px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.os-hint { position: absolute; right: 16px; bottom: 12px; margin: 0; font-size: .78rem; color: rgba(38, 40, 58, .6); font-weight: 600; }
.os-windows { position: absolute; inset: 0; pointer-events: none; }
.os-win {
position: absolute; width: min(720px, 86%); height: min(560px, 86%); display: flex; flex-direction: column; pointer-events: auto;
background: var(--paper); border-radius: 16px; border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 24px 60px rgba(38, 40, 58, .25);
animation: winIn .45s var(--spring); overflow: hidden;
}
.os-win.is-drag { box-shadow: 0 8px 0 var(--ink), 0 34px 70px rgba(38, 40, 58, .3); }
.os-win.is-closing { animation: winOut .18s var(--ease) forwards; }
@keyframes winIn { from { transform: scale(.7) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes winOut { to { transform: scale(.85); opacity: 0; } }
.os-win-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1.5px solid var(--line-2); cursor: grab; flex: none; background: #F7F8FC; }
.os-win.is-drag .os-win-bar { cursor: grabbing; }
.os-close, .os-min, .os-max { width: 14px; height: 14px; border-radius: 50%; border: 0; padding: 0; flex: none; }
.os-close { background: #FF6B5A; cursor: pointer; }
.os-close:hover { box-shadow: 0 0 0 3px rgba(255, 107, 90, .3); }
.os-min { background: #FFC85A; }
.os-max { background: #5CCB78; }
.os-win-title { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; font-weight: 600; font-size: .86rem; padding-right: 40px; }
.os-win-title svg { width: 20px; height: 16px; }
.os-win-body { flex: 1; overflow: auto; padding: 0 22px 22px; -webkit-user-select: text; user-select: text; }
.os-win-body .case-head { margin: 0 -22px 0; padding: 24px 22px; }
@media (max-width: 720px) {
.panel-sheet.is-os { height: 92vh; }
.os-icons { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, 86px); grid-auto-rows: 96px; }
.os-win { left: 6px !important; top: 6px !important; right: 6px; bottom: 6px; width: auto; height: auto; }
.os-hint { display: none; }
}
.panel-sheet.is-phone { width: min(400px, 100%); background: transparent; border: 0; box-shadow: none; overflow: visible; }
.is-phone .panel-close { position: absolute; top: -8px; right: -8px; margin: 0; }
.phone {
height: min(740px, 86vh); display: flex; flex-direction: column; background: #fff; border-radius: 46px; border: 10px solid var(--ink);
box-shadow: 0 0 0 2px #3A3D55, 0 30px 80px rgba(38, 40, 58, .35); overflow: hidden; position: relative;
}
.phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 104px; height: 28px; background: var(--ink); border-radius: 20px; z-index: 3; }
.phone-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 46px 16px 12px; background: rgba(247, 247, 250, .95); border-bottom: 1px solid #ECEDF2; text-align: center; }
.phone-head small { display: block; font-size: .72rem; color: var(--muted); }
.phone-head strong { font-size: .95rem; }
.phone-avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--sky), var(--peri)); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; }
.phone-thread { flex: 1; overflow-y: auto; padding: 16px 12px 8px; display: flex; flex-direction: column; gap: 4px; -webkit-user-select: text; user-select: text; }
.bubble {
max-width: 78%; padding: 9px 14px; border-radius: 20px; font-size: .93rem; line-height: 1.38; word-wrap: break-word;
animation: bubbleIn .35s var(--spring); position: relative;
}
@keyframes bubbleIn { from { transform: scale(.6) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.from-him { align-self: flex-start; background: #E9E9EB; color: #111; border-bottom-left-radius: 6px; transform-origin: 0 100%; }
.from-me { align-self: flex-end; background: #2F7BF6; color: #fff; border-bottom-right-radius: 6px; transform-origin: 100% 100%; }
.from-him a { color: #1C5FD1; font-weight: 600; }
.bubble.is-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bubble.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9A9AA0; animation: dots 1.1s infinite; }
.bubble.is-typing i:nth-child(2) { animation-delay: .15s; }
.bubble.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.bubble-status { align-self: flex-end; font-size: .7rem; color: var(--muted); margin: 0 6px 6px; font-weight: 600; }
.phone-chips { display: flex; gap: 6px; padding: 6px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.phone-chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #F2F3F7; font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.chip svg { width: 15px; height: 15px; }
.chip:hover { background: #E6E8F0; }
.phone-captcha:empty { display: none; }
.phone-captcha { padding: 0 10px; }
.phone-input { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px 18px; border-top: 1px solid #ECEDF2; flex: none; }
.phone-input textarea {
flex: 1; resize: none; overflow-y: hidden; font: inherit; font-size: .95rem; line-height: 1.35; padding: 9px 14px; border-radius: 20px; border: 1.5px solid #DADCE3;
max-height: 110px; background: #fff; color: var(--ink);
}
.phone-input textarea:focus { outline: none; border-color: #2F7BF6; }
.phone-send { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #2F7BF6; color: #fff; display: grid; place-items: center; flex: none; transition: transform .2s var(--spring); }
.phone-send:hover { transform: scale(1.08); }
.phone-send svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
.panel-sheet.is-phone { width: 100%; }
.phone { border-radius: 26px 26px 0 0; border-width: 0; height: 92vh; box-shadow: none; }
.phone-notch { display: none; }
.phone-head { padding-top: 18px; }
.is-phone .panel-close { top: 10px; right: 10px; }
}
.panel-sheet.is-news { width: min(940px, 100%); background: #FFFDF4; transform-origin: 50% 0; }
.panel.is-in .panel-sheet.is-news { animation: unfold .7s var(--spring); }
@keyframes unfold { from { transform: perspective(1200px) rotateX(-70deg) scaleY(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.np { padding: clamp(20px, 4vw, 44px); font-family: Georgia, "Times New Roman", serif; color: #1E1F2A; }
.np-head { text-align: center; border-bottom: 4px double #1E1F2A; padding-bottom: 12px; margin-bottom: 20px; }
.np-edition { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-family: var(--font-body); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid #1E1F2A; padding-bottom: 8px; margin: 0 50px 10px 0; }
.np-name { font-family: "Fredoka", serif; font-weight: 600; font-size: clamp(2.2rem, 8vw, 4.4rem); letter-spacing: -.02em; line-height: 1; }
.np-tag { font-style: italic; margin: 8px 0 0; color: #4A4B57; }
.np-lead { display: grid; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid #1E1F2A; margin-bottom: 20px; }
@media (min-width: 720px) { .np-lead { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.np-lead h3 { font-family: Georgia, serif; font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.1; margin: 6px 0 12px; }
.np-outlet { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--clay); margin: 0; }
.np-cols { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.np-item { padding: 0 18px 18px; border-left: 1px solid #CFC8B5; }
.np-item:first-child { border-left: 0; padding-left: 0; }
.np-item h4 { font-family: Georgia, serif; font-size: 1.2rem; line-height: 1.2; margin: 6px 0 8px; }
.np-item p { font-size: .94rem; }
.np-item.is-placeholder { opacity: .5; }
.np-link { font-family: var(--font-body); font-weight: 700; font-size: .84rem; color: #1E1F2A; text-decoration: underline; text-underline-offset: 3px; }
.np-link.is-todo { text-decoration: none; border: 1.5px dashed #CFC8B5; padding: 2px 8px; border-radius: 999px; color: #8A8576; font-weight: 600; font-size: .74rem; }
.np-photo .ph { --tilt: -1.5deg !important; }
@media (max-width: 640px) { .np-item { border-left: 0; padding: 14px 0; border-top: 1px solid #CFC8B5; } }
.knife-stage { display: grid; place-items: center; margin: 4px 0 6px; }
.knife-svg { width: min(560px, 100%); overflow: visible; }
.k-tool { cursor: pointer; transform-box: view-box; transition: transform .7s var(--spring); }
.k-tool:hover { transform: rotate(calc(var(--open) * .06)); }
.k-tool.is-open { transform: rotate(var(--open)); }
.knife-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 16px; }
.k-tab { border: 2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: .88rem; transition: background .2s, transform .2s var(--spring); }
.k-tab:hover { transform: translateY(-2px); }
.k-tab[aria-selected="true"] { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--ink); }
.knife-card { background: #FFF6F4; border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 20px 22px; max-width: 640px; margin: 0 auto; }
.knife-card h3 { font-size: 1.5rem; margin-bottom: .3em; }
.knife-card .chips { margin-bottom: 0; }
.knife-card.is-pop { animation: cardPop .45s var(--spring); }
@keyframes cardPop { from { transform: scale(.94) translateY(6px); opacity: .3; } to { transform: none; opacity: 1; } }
.knife-sheet header { text-align: center; }
.knife-sheet .sheet-title { padding-right: 0; }
.helmet-hero { display: grid; gap: 20px; align-items: center; }
@media (min-width: 720px) { .helmet-hero { grid-template-columns: 240px 1fr; } }
.helmet-art { width: 100%; max-width: 260px; animation: helmetBob 3.6s ease-in-out infinite; }
@keyframes helmetBob { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-6px); } }
.about-sheet { display: grid; gap: 24px; }
@media (min-width: 760px) { .about-sheet { grid-template-columns: 260px 1fr; } .about-photos { grid-column: 1 / -1; } }
.about-fig {
position: relative; background: var(--sky); border-radius: var(--r-xl); border: 2px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
display: grid; place-items: end center; padding-top: 24px; overflow: hidden; cursor: pointer; align-self: start;
background-image: radial-gradient(60% 40% at 30% 20%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)), linear-gradient(180deg, var(--sky), #CFE0FA);
}
.about-fig svg { width: 78%; margin-bottom: -4px; }
.about-badge { position: absolute; top: 14px; right: 14px; font-size: 1.6rem; animation: wiggleBadge 2.4s ease-in-out infinite; }
@keyframes wiggleBadge { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(18deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(0); } }
.about-photos h4 { font-size: 1.2rem; }
.synth { background: #2D3046; border-radius: 22px; padding: 16px; border: 2px solid var(--ink); box-shadow: 0 6px 0 var(--ink); margin: 18px 0 12px; }
.synth-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.synth-led { width: 12px; height: 12px; border-radius: 50%; background: #5A5E7A; }
.synth-led.is-on { animation: led .5s ease-out; }
@keyframes led { 0% { background: #7FD1C0; box-shadow: 0 0 12px #7FD1C0; } 100% { background: #5A5E7A; box-shadow: none; } }
.synth-screen { min-width: 90px; padding: 6px 12px; border-radius: 8px; background: #7FD1C0; color: #173B35; font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: .9rem; }
.synth-knob { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE7A3, #E8C979); margin-left: auto; box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.synth-knob + .synth-knob { margin-left: 0; background: radial-gradient(circle at 35% 35%, #F6B8C4, #D98EA0); }
.synth-knob + .synth-knob + .synth-knob { background: radial-gradient(circle at 35% 35%, #9CC3F5, #6E9BDB); }
.synth-keys { position: relative; display: grid; grid-template-columns: repeat(15, 1fr); height: clamp(130px, 22vw, 190px); touch-action: none; }
.kw {
border: 0; background: linear-gradient(180deg, #fff, #F1EFE8); border-radius: 0 0 10px 10px; margin: 0 1.5px; box-shadow: inset 0 -6px 0 #DAD6CA;
transition: transform .08s, box-shadow .08s; padding: 0;
}
.kw.is-down { transform: translateY(2px); box-shadow: inset 0 -2px 0 #DAD6CA; background: var(--butter); }
.kb {
position: absolute; top: 0; width: calc(100% / 15 * .62); height: 60%; left: calc(100% / 15 * (var(--i) + 1) - 100% / 15 * .31);
border: 0; border-radius: 0 0 7px 7px; background: linear-gradient(180deg, #3A3D55, #1F2133); box-shadow: inset 0 -5px 0 #111; padding: 0; z-index: 2;
transition: transform .08s;
}
.kb.is-down { transform: translateY(2px); background: var(--peri); box-shadow: inset 0 -2px 0 #111; }
.poster-sheet { display: grid; gap: 24px; align-items: center; }
@media (min-width: 720px) { .poster-sheet { grid-template-columns: 300px 1fr; } }
.poster-frame { position: relative; aspect-ratio: 70 / 95; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-2); transform: rotate(-1.5deg); background: var(--butter); }
.poster-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.poster-fallback { position: absolute; inset: 0; padding: 18px; display: block; }
.pf-top, .pf-bottom { position: absolute; left: 18px; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.pf-top { top: 16px; font-size: 1.2rem; }
.pf-bottom { bottom: 40px; font-size: 1.8rem; }
.pf-c1 { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--peri); right: 8%; top: 18%; }
.pf-c2 { position: absolute; width: 44%; aspect-ratio: 1; border-radius: 50%; background: var(--clay); left: 10%; top: 48%; }
.pf-todo { position: absolute; left: 18px; bottom: 14px; right: 18px; font-size: .7rem; color: var(--ink-2); }
.cv-sheet { display: grid; gap: 28px; align-items: center; }
@media (min-width: 720px) { .cv-sheet { grid-template-columns: 240px 1fr; } }
.cv-paper {
aspect-ratio: 210 / 297; background: #fff; border-radius: 6px; box-shadow: var(--shadow-2); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px;
transform: rotate(-2deg); transition: transform .4s var(--spring); border: 1px solid var(--line-2);
}
.cv-paper:hover { transform: rotate(0) scale(1.02); }
.cv-name { font-family: var(--font-head); font-weight: 600; font-size: 1.15rem; }
.cv-role { font-size: .62rem; color: var(--peri); font-weight: 700; margin-bottom: 8px; }
.cv-line { height: 6px; border-radius: 3px; background: #E6E8F0; }
.cv-h { height: 8px; width: 40%; border-radius: 3px; background: var(--peri); margin-top: 10px; }
.w90 { width: 90%; } .w85 { width: 85%; } .w80 { width: 80%; } .w75 { width: 75%; } .w70 { width: 70%; } .w60 { width: 60%; } .w50 { width: 50%; }
.legal-sheet dl { display: grid; gap: 4px 20px; margin: 0; }
.legal-sheet dt { font-weight: 700; margin-top: 12px; }
.legal-sheet dd { margin: 0; color: var(--ink-2); }
@media (min-width: 640px) { .legal-sheet dl { grid-template-columns: 180px 1fr; } .legal-sheet dt { margin-top: 0; } }
.about-photo { padding: 0; place-items: stretch; background: #E9EDF7; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; display: block; }
.about-photo { max-height: 420px; }
@media (max-width: 760px) { .about-photo { width: 200px; justify-self: center; border-radius: 22px; } }
:root {
--cream: #EEECE7;
--paper: #F7F6F2;
--ink: #111111;
--ink-2: #3A3A3A;
--muted: #77746E;
--line: #DCD9D2;
--line-2: #E6E4DE;
--red: #E5322B;
--accent: #E5322B;
--sky: #DCD9D2;
--peri: #111111;
--mint: #E6E4DE;
--butter: #EEECE7;
--pink: #E6E4DE;
--clay: #E5322B;
--font-head: "Inter Tight", "Inter", system-ui, sans-serif;
--font-display: "Inter Tight", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
--shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .06);
--shadow-2: 0 2px 6px rgba(0, 0, 0, .06), 0 24px 60px rgba(0, 0, 0, .12);
--r-lg: 16px;
--r-xl: 20px;
}
body { background: var(--cream); color: var(--ink); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.035em; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); }
.eyebrow, .p-kicker, .case-kicker, .np-outlet, .press-outlet, .lb-k {
font-family: var(--font-mono) !important; font-weight: 500 !important; font-size: .72rem !important;
letter-spacing: .08em !important; text-transform: uppercase; color: var(--muted) !important;
}
.mono { background: var(--ink); color: #fff; box-shadow: none; border-radius: 8px; font-family: var(--font-head); font-weight: 800; }
.btn {
border: 1px solid var(--ink); box-shadow: none !important; background: transparent; color: var(--ink); border-radius: 999px;
font-weight: 600; min-height: 44px; padding: .7em 1.2em;
}
.btn:hover { transform: none; background: var(--ink); color: #fff; }
.btn:active { transform: scale(.98); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--red); border-color: var(--red); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: transparent; color: var(--red); }
.pill-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: none; }
.pill-btn:hover { transform: none; border-color: var(--ink); }
.pill-accent { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips li { background: transparent; border: 1px solid var(--line); font-size: .8rem; border-radius: 999px; }
.tags li { background: rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .08); font-family: var(--font-mono); font-weight: 500; font-size: .7rem; }
.text-link:hover { color: var(--red); }
.results li { background: var(--paper); border: 1px solid var(--line); box-shadow: none; border-radius: 12px; }
.results strong { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.04em; font-size: 2rem; }
.results li:first-child strong { color: var(--red); }
.checklist li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); border-radius: 50%; }
.checklist li::after { border-color: var(--red); }
.looking { background: transparent; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 4px; }
.ph { box-shadow: var(--shadow-1); border-radius: 2px; }
.ph-inner { background: repeating-linear-gradient(-45deg, #E9E7E1 0 10px, #E3E1DA 10px 20px); }
.ph-tape { background: rgba(229, 50, 43, .85); height: 14px; width: 54px; }
.simple { background-color: var(--cream); background-image: linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 28px 28px; }
.s-nav { background: rgba(238, 236, 231, .86); border-bottom: 1px solid var(--line); }
.s-brand { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; }
.s-hero h1 { font-size: clamp(2.6rem, 8.5vw, 6.2rem); line-height: .95; letter-spacing: -0.055em; font-weight: 800; }
.s-hero-art {
background: #1A1A1A; box-shadow: none; border-radius: 4px; aspect-ratio: 4 / 5; max-height: min(560px, 72vh); overflow: hidden;
}
.s-hero-art:hover { transform: none; }
.s-hero-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1); transition: filter .6s var(--ease), transform .8s var(--ease); }
.s-hero-art:hover img { transform: scale(1.02); }
.s-hero-art .hero-tag {
position: absolute; left: 14px; bottom: 14px; z-index: 3; background: var(--red); color: #fff; font-family: var(--font-mono); font-size: .72rem;
letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border-radius: 2px;
}
.hero-bubble { background: #fff; border: 0; box-shadow: none; border-radius: 999px; font-weight: 600; top: 14px; left: 14px; }
.s-head h2 { font-size: clamp(2rem, 5.5vw, 3.6rem); letter-spacing: -0.05em; font-weight: 800; }
.s-head { border-bottom: 1px solid var(--ink); padding-bottom: 14px; }
.pcard {
background: var(--paper); border: 1px solid var(--line); box-shadow: none; border-radius: 6px; min-height: 240px;
transition: border-color .25s, transform .35s var(--ease);
}
.pcard:hover { transform: translateY(-3px); box-shadow: none; border-color: var(--ink); }
.pcard:active { box-shadow: none; }
.pcard-period { background: transparent; border: 1px solid var(--line); font-family: var(--font-mono); font-weight: 500; font-size: .7rem; }
.pcard-title { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.045em; }
.pcard-metric { background: transparent; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0 0; }
.pcard-metric strong { color: var(--red); }
.pgrid li:first-child .pcard { background: var(--ink); color: #fff; border-color: var(--ink); }
.pgrid li:first-child .pcard-sum, .pgrid li:first-child .pcard-role { color: rgba(255, 255, 255, .78); }
.pgrid li:first-child .pcard-period { border-color: rgba(255, 255, 255, .25); }
.pgrid li:first-child .pcard-metric { border-color: rgba(255, 255, 255, .2); }
.scard, .scard:nth-child(n) { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; }
.scard h3 { font-weight: 800; letter-spacing: -0.035em; }
.scard h3::before { content: counter(skill, decimal-leading-zero) " "; counter-increment: skill; font-family: var(--font-mono); font-size: .7rem; color: var(--red); vertical-align: top; letter-spacing: 0; }
.sgrid { counter-reset: skill; }
.press-list { border-top: 1px solid var(--ink); }
.press-title { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.03em; }
.s-contact-grid { background: var(--ink); color: #fff; border: 0; box-shadow: none; border-radius: 6px; }
.s-contact-grid .lead { color: rgba(255, 255, 255, .72); }
.s-contact-grid .btn { border-color: rgba(255, 255, 255, .5); color: #fff; }
.s-contact-grid .btn-ink { background: var(--red); border-color: var(--red); }
.cform { border: 0; border-radius: 6px; color: var(--ink); }
.cform .btn { border-color: var(--ink); color: #fff; }
.cform input:focus, .cform textarea:focus { border-color: var(--ink); box-shadow: none; }
.panel-backdrop { background: rgba(10, 10, 10, .45) !important; }
.panel-sheet { border: 0 !important; border-radius: 10px !important; background: var(--paper); box-shadow: 0 40px 120px rgba(0, 0, 0, .35) !important; }
.panel-close { border: 1px solid var(--line) !important; background: var(--paper) !important; box-shadow: none !important; }
.panel-close:hover { transform: none; background: var(--ink) !important; color: #fff; }
.case-head { background: var(--ink) !important; color: #fff; border-bottom: 0 !important; }
.case-head .case-kicker { color: rgba(255, 255, 255, .6) !important; }
.case-head .case-sum { color: rgba(255, 255, 255, .82); }
.case-head .tags li { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.case-title { font-weight: 800; letter-spacing: -0.05em; }
.case-title::after { content: "."; color: var(--red); }
.note, .note-lined { background: var(--paper) !important; border: 1px solid var(--line) !important; border-radius: 6px; }
.note h4 { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sheet-title { font-weight: 800; letter-spacing: -0.05em; }
.os-desk { background: #1C1C1C !important; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) !important; background-size: 32px 32px !important; }
.os-bar { background: #F7F6F2; }
.os-dot { background: var(--red); }
.os-icon { color: #fff; }
.os-icon span { background: transparent; color: #fff; }
.os-icon:hover { background: rgba(255, 255, 255, .08); }
.os-hint { color: rgba(255, 255, 255, .45); }
.os-win { border: 0 !important; border-radius: 10px; }
.os-win-bar { background: #F1F0EC; }
.os-close { background: var(--red); }
.os-min, .os-max { background: #CFCCC5; }
.knife-card { background: var(--paper); border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 6px; }
.k-tab { border: 1px solid var(--line) !important; background: transparent; }
.k-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink) !important; box-shadow: none; }
.synth { background: #161616; border: 0; box-shadow: var(--shadow-2); border-radius: 10px; }
.synth-screen { background: var(--red); color: #fff; }
.kw.is-down { background: #E8E6E1; }
.kb.is-down { background: var(--red); }
.cv-role { color: var(--red); }
.cv-h { background: var(--ink); }
.poster-frame { background: var(--ink); }
.pf-c1 { background: var(--red); }
.pf-c2 { background: #fff; }
.pf-top, .pf-bottom { color: #fff; font-weight: 800; letter-spacing: -0.04em; }
.pf-todo { color: rgba(255, 255, 255, .6); }
.about-fig, .about-photo { background: #1A1A1A; border: 0 !important; box-shadow: none !important; border-radius: 4px; }
.about-photo img { filter: saturate(1.1); }
.np { color: var(--ink); }
.np-outlet { color: var(--red) !important; }
.bubble.from-me { background: var(--ink); }
.phone-send { background: var(--ink); }
.phone-avatar { background: var(--ink); }
.chip { background: transparent; border: 1px solid var(--line); }
body.proto, body.proto.is-night { background: #ECEAE5; }
body.proto.is-night { background: #121212; }
.p-brand { box-shadow: none; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-head); letter-spacing: -0.02em; }
.p-mono { background: var(--ink); color: #fff; }
.p-pill { background: var(--paper); border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
.p-pill:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.p-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.p-dark:hover { background: var(--red); border-color: var(--red); }
.p-kicker { color: var(--muted) !important; }
.p-title { color: var(--ink); font-weight: 800; letter-spacing: -0.055em; font-size: clamp(2rem, 4.6vw, 3.8rem); line-height: .95; }
.is-night .p-title, .is-night .p-kicker { color: #fff !important; }
.p-label {
background: var(--paper); border: 1px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; height: 30px; padding: 0 12px 0 10px; border-radius: 4px;
}
.p-label i { width: 6px; height: 6px; border-radius: 0; background: var(--ink); box-shadow: none; }
.p-label.is-main i { background: var(--red); box-shadow: none; }
.p-label:hover, .p-label.is-hot { background: var(--ink); color: #fff; border-color: var(--ink); }
.p-label:hover i, .p-label.is-hot i { background: var(--red); }
.p-hint { background: var(--ink); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; border-radius: 4px; height: 32px; }
.p-dock { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, .12); border-radius: 10px; }
.p-dock button { border-radius: 6px; font-weight: 500; }
.p-dock button:hover { background: var(--ink); color: #fff; }
.p-dock .p-dock-zoom { background: var(--red); }
.p-dock .p-dock-zoom:hover { background: var(--ink); }
.p-loader span { border-color: rgba(0, 0, 0, .12); border-top-color: var(--red); }
.red-dot { color: var(--red); }
.v2 {
--paper: #EFEBE3;
--paper-2: #FBF9F4;
--news: #F3EEE1;
--ink: #111111;
--ink-2: #2A2825;
--muted: #5A554D;
--line: #D6D0C4;
--red: #E5322B;
--red-ink: #B42318;
--sky: #9DB8FF;
--navy: #0B1F4D;
--cobalt: #2F5BFF;
--yellow: #FFD400;
--orange: #FF6B1A;
--purple: #7B3FE4;
--pink: #FF4FA3;
--teal: #14B8A6;
--rust: #B5441C;
--cream: #F1E6D8;
--plum: #4D3238;
--bordeaux: #6E2235;
--butter: #FFF8CA;
--tape: rgba(240, 232, 205, .86);
--display: "Anton", "Impact", sans-serif;
--hand: "Caveat", "Comic Sans MS", cursive;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--tight: "Inter Tight", "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
--ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
--pad: clamp(16px, 4vw, 48px);
--wrap: 1320px;
--ease: cubic-bezier(.2, .7, .2, 1);
--spring: cubic-bezier(.34, 1.45, .64, 1);
margin: 0;
background-color: var(--paper);
background-image:
radial-gradient(40% 30% at 85% 8%, rgba(47, 91, 255, .16), transparent 70%),
radial-gradient(35% 30% at 6% 30%, rgba(47, 91, 255, .12), transparent 70%),
linear-gradient(rgba(17, 17, 17, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(17, 17, 17, .045) 1px, transparent 1px);
background-size: auto, auto, 26px 26px, 26px 26px;
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
}
html:has(body.v2) { overflow-x: clip; }
.v2::after {
content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .12; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.v2 :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
:where(.v2) a { color: inherit; }
.v-red { color: var(--red); }
.v-mono { font: 500 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.v-hand { font-family: var(--hand); font-weight: 700; line-height: 1; }
.scribble { display: inline-block; width: 70px; height: 36px; vertical-align: middle; }
.v-skip { position: fixed; left: 12px; top: -60px; z-index: 120; background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 600; text-decoration: none; }
.v-skip:focus { top: 12px; }
.v-hide-sm { display: none; }
@media (min-width: 760px) { .v-hide-sm { display: inline; } }
.v-wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
.v-tape {
position: absolute; width: 112px; height: 30px; background: var(--tape); z-index: 4; pointer-events: none;
clip-path: polygon(0 12%, 4% 0, 8% 14%, 12% 0, 16% 12%, 84% 8%, 88% 0, 92% 12%, 96% 2%, 100% 14%, 100% 86%, 96% 100%, 92% 88%, 88% 100%, 84% 90%, 16% 94%, 12% 100%, 8% 86%, 4% 100%, 0 88%);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.v-pill {
position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80;
display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .9);
backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 30px rgba(0, 0, 0, .16); max-width: calc(100vw - 16px);
}
.v-pill a, .v-pill button {
display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 11px; border: 0; border-radius: 999px;
background: none; color: var(--muted); font: 500 .82rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s;
}
.v-pill a:hover, .v-pill button:hover { color: var(--ink); background: rgba(0, 0, 0, .05); }
.v-pill a.is-active { background: var(--ink); color: var(--sky); }
.v-pill .v-pill-me { width: 40px; padding: 0; background: var(--red); color: #fff; font: 800 .78rem/1 var(--tight); }
.v-pill .v-pill-lang { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; }
@media (max-width: 400px) { .v-pill .v-pill-me { display: none; } .v-pill a, .v-pill button { padding: 0 9px; font-size: .78rem; } }
@media (min-width: 760px) { .v-pill { top: 16px; bottom: auto; } .v-pill a, .v-pill button { padding: 0 15px; font-size: .88rem; } }
.v-hero { position: relative; padding: 18px var(--pad) 56px; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); }
.v-hero-meta { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.v-name { margin: 0; font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .8; }
.v-name-1, .v-name-2 { display: block; font-size: clamp(5.2rem, 27vw, 24rem); white-space: nowrap; }
.v-name-1 { margin-top: clamp(28px, 7vw, 64px); color: var(--ink); position: relative; z-index: 1; }
.v-l, .v-l2 { display: inline-block; animation: vDrop .7s var(--spring) both; animation-delay: calc(var(--i) * 45ms); }
.v-l:nth-child(2) { color: var(--red); }
.v-l2 { animation-name: vRise; animation-delay: calc(260ms + var(--i) * 40ms); }
@keyframes vDrop { from { transform: translateY(-110%) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vRise { from { transform: translateY(80%) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.v-band {
display: block; position: relative; z-index: 1; margin: 6px calc(-1 * var(--pad)) 0; padding: clamp(14px, 2.4vw, 28px) var(--pad) clamp(18px, 3vw, 34px);
background: var(--ink); transform: rotate(-2.2deg); animation: vTear .8s var(--ease) .15s both;
}
@keyframes vTear { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.v-name-2 { color: transparent; -webkit-text-stroke: clamp(1.5px, .3vw, 3px) var(--sky); }
.hx-photo { position: relative; z-index: 3; width: min(76vw, 330px); margin: 34px auto 0; }
.v-cut { position: relative; margin: 0; filter: drop-shadow(0 0 30px rgba(47, 91, 255, .35)) drop-shadow(0 16px 24px rgba(0, 0, 0, .22)); }
.hx-photo .v-cut { transform: rotate(3deg); animation: vSlap .8s var(--spring) .35s both; }
@keyframes vSlap { from { opacity: 0; transform: rotate(-14deg) scale(1.35); } to { opacity: 1; transform: rotate(3deg); } }
.v-cut-photo { display: block; position: relative; clip-path: var(--clip); background: #fff; padding: 9px; }
.v-cut-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; filter: saturate(1.15) contrast(1.05); }
.v-cut-photo::after { content: ""; position: absolute; inset: 9px; pointer-events: none; background: linear-gradient(160deg, rgba(47, 91, 255, .12), transparent 45%, rgba(229, 50, 43, .1)); mix-blend-mode: soft-light; }
.v-cut-red { position: absolute; inset: 0; clip-path: var(--clip); background: var(--cobalt); transform: translate(12px, 10px) rotate(1.5deg); }
.v-hero .v-tape-1 { top: -12px; left: 18%; transform: rotate(-8deg); }
.hx-chip {
position: absolute; z-index: 5; display: grid; gap: 5px; max-width: 68%; padding: 8px 11px 9px; border-radius: 12px; text-decoration: none;
box-shadow: 0 10px 24px rgba(0, 0, 0, .22); animation: vPop .6s var(--spring) both; animation-delay: calc(.7s + var(--n) * .1s);
transition: transform .3s var(--spring), box-shadow .3s;
}
.hx-chip:hover { transform: translateY(-4px) rotate(0) scale(1.05); box-shadow: 0 16px 30px rgba(0, 0, 0, .28); }
.hx-chip img { display: block; height: 16px; width: auto; max-width: 118px; object-fit: contain; object-position: left; }
.hx-chip span { font: 700 .66rem/1.2 var(--tight); }
.hx-reyers { top: 6%; right: -7%; background: #4D3238; color: #FFF8CA; rotate: 3deg; }
.hx-race { top: 30%; right: -9%; background: #fff; color: #001D4A; rotate: -3deg; }
.hx-nyc { top: 56%; right: -8%; background: #1F1E1D; color: #fff; rotate: 4deg; }
.hx-fest { top: 50%; left: -7%; background: #fff; color: #C8102E; rotate: -4deg; }
.hx-fest img { height: 22px; }
.hx-music { bottom: 2%; left: -5%; background: #F1E6D8; color: #2A1710; rotate: -2deg; }
.hx-copy { position: relative; z-index: 4; margin-top: 30px; }
.hx-tag { margin: 0; max-width: 24ch; font: 800 clamp(1.7rem, 4.6vw, 2.7rem)/1.1 var(--tight); letter-spacing: -0.035em; }
.hx-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.hx-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--ink); color: var(--ink); font: 700 .95rem/1 var(--sans); text-decoration: none; transition: transform .25s var(--spring), box-shadow .2s, background .2s; }
.hx-btn svg { width: 18px; height: 18px; }
.hx-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .18); }
.hx-btn-main { background: var(--red); border-color: var(--red); color: #fff; }
.hx-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font: 600 .92rem/1 var(--sans); text-underline-offset: 4px; }
.hx-proof { margin: 18px 0 0; max-width: 52ch; font: 500 .74rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.hx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.v-status { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 12px; background: var(--paper-2); border: 1.5px solid var(--ink); font: 500 .72rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.v-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; animation: vPulse 2s infinite; }
@keyframes vPulse { 0% { box-shadow: 0 0 0 0 rgba(229, 50, 43, .55); } 70% { box-shadow: 0 0 0 9px rgba(229, 50, 43, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 50, 43, 0); } }
@keyframes vPop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.hx-bill-btn { min-height: 44px; padding: 0 14px; border: 1.5px dashed var(--ink); border-radius: 999px; background: none; font: 600 .76rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; color: var(--ink); }
.hx-bill-btn:hover, .hx-bill-btn[aria-expanded="true"] { background: var(--ink); color: #fff; }
.hx-bill { margin-top: 12px; max-width: 460px; padding: 16px 18px; background: #fff; border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.hx-bill[hidden] { display: none; }
.hx-bill dl { margin: 0 0 12px; display: grid; gap: 8px; }
.hx-bill dl div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; }
.hx-bill dt { font: 500 .66rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hx-bill dd { margin: 0; font: 600 .95rem/1.3 var(--sans); overflow-wrap: anywhere; }
.hx-copy-btn { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--cobalt); color: #fff; font: 700 .8rem/1 var(--sans); cursor: pointer; }
@media (min-width: 960px) {
.v-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 3vw; padding-bottom: 80px; }
.v-hero-meta { grid-column: 1 / -1; }
.v-name { grid-column: 1; grid-row: 2; }
.v-name-1, .v-name-2 { font-size: min(13.2vw, 19rem); }
.v-band { margin-right: -9vw; }
.hx-photo { grid-column: 2; grid-row: 2 / span 2; width: min(100%, 400px); margin: 40px 14px 0 auto; }
.hx-copy { grid-column: 1; grid-row: 3; margin-top: 34px; }
.hx-chip { padding: 10px 14px 11px; }
.hx-chip img { height: 20px; max-width: 150px; }
.hx-chip span { font-size: .76rem; }
.hx-fest img { height: 28px; }
}
.v-manifesto { padding: clamp(64px, 9vw, 130px) var(--pad); max-width: var(--wrap); margin: 0 auto; }
.mf-eyebrow { max-width: 46ch; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.mf-big { margin: 14px 0 22px; font: 400 clamp(3.8rem, 14vw, 12rem)/.86 var(--display); text-transform: uppercase; }
.mf-hl { color: var(--red); text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: .09em; text-underline-offset: .08em; }
.mf-body { margin: 0; max-width: 34ch; font: 600 clamp(1.25rem, 2.6vw, 1.9rem)/1.3 var(--tight); letter-spacing: -0.02em; }
.mf-stats { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 22px 0 0; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
@media (min-width: 900px) { .mf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mf-stats strong { display: block; font: 400 clamp(2.4rem, 5vw, 3.8rem)/1 var(--display); color: var(--cobalt); }
.mf-stats span { display: block; margin-top: 6px; font-size: .9rem; line-height: 1.35; color: var(--muted); max-width: 22ch; }
.v-sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.v-big { margin: 0; font: 400 clamp(3.4rem, 13vw, 10.5rem)/.84 var(--display); text-transform: uppercase; }
.v-sec-head .v-hand { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 .4em; }
.v-worknote { display: inline-flex; align-items: flex-start; gap: 8px; flex-basis: 100%; margin: 10px 0 0 6px; transform: rotate(-1.5deg); }
.v-worknote .scribble { width: 44px; height: 38px; flex: none; margin-top: -6px; }
.v-work { padding-top: clamp(40px, 6vw, 80px); overflow-x: clip; }
.u { position: relative; padding: clamp(80px, 11vw, 150px) var(--pad) clamp(70px, 9vw, 120px); color: var(--u-fg); background: var(--u-bg); }
.u + .u { margin-top: 0; }
.u-decor { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.u-decor > * { transition: opacity .8s var(--ease), scale .9s var(--spring); }
.u:not(.is-on) .u-decor > * { opacity: 0; scale: .85; }
.u-inner { position: relative; z-index: 3; max-width: var(--wrap); margin: 0 auto; display: grid; gap: 40px; }
@media (min-width: 1000px) { .u-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; } }
.u-kicker { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 .74rem/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--u-accent); }
.u-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--u-accent); color: var(--u-bg); font-weight: 700; }
.u-title { margin: 14px 0 18px; font: 400 clamp(3.2rem, 8vw, 7rem)/.88 var(--display); text-transform: uppercase; color: var(--u-title, var(--u-fg)); }
.u-lead { margin: 0 0 12px; font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.4 var(--tight); letter-spacing: -0.015em; max-width: 46ch; }
.u-text { margin: 0 0 12px; opacity: .85; max-width: 52ch; }
.u-metrics { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1.5px dashed color-mix(in srgb, var(--u-fg) 30%, transparent); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.u-metrics strong { display: block; font: 400 clamp(1.7rem, 3.2vw, 2.5rem)/1 var(--display); color: var(--u-accent); }
.u-metrics span { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.3; opacity: .85; }
.u-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.u-btn {
display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--u-accent); color: var(--u-bg);
font: 700 .92rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .25s var(--spring), box-shadow .2s;
}
.u-btn svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.u-btn:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 0 rgba(0, 0, 0, .18); }
.u-btn:hover svg { transform: translateX(3px); }
.u-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--u-fg); font: 600 .92rem/1 var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.u-link svg { width: 16px; height: 16px; }
.u-annot2 { margin: 22px 0 0; font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--u-accent); transform: rotate(-3deg); }
.u-demo { position: relative; padding-top: 44px; }
.u-annot { position: absolute; top: 0; left: 6px; margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); color: var(--u-accent); transform: rotate(-4deg); z-index: 2; }
.u-demo-tag { position: absolute; top: 14px; right: 0; font: 500 .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 4px; background: color-mix(in srgb, var(--u-fg) 12%, transparent); color: var(--u-fg); }
.u-ui {
position: relative; padding: 20px; border-radius: 24px; background: #fff; color: #111; font-family: var(--ios); max-width: 520px; margin: 0 auto;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 4px rgba(0, 0, 0, .06), 0 30px 70px rgba(0, 0, 0, .28);
transition: transform .4s var(--ease); transform-style: preserve-3d; overflow: hidden;
}
.u-race { --sv: #FD6500; --sv-navy: #001D4A; --u-bg: #020817; --u-fg: #F8FAFC; --u-accent: var(--sv); --u-title: #fff;
background-image: radial-gradient(60% 50% at 85% 20%, rgba(253, 101, 0, .18), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(0, 29, 74, .9), transparent 70%); }
.d-bib {
position: absolute; top: -70px; right: clamp(10px, 6vw, 90px); width: clamp(150px, 18vw, 230px); padding: 14px 14px 12px; background: #fff; color: #111; border-radius: 8px;
text-align: center; rotate: 8deg; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); display: grid; gap: 2px;
}
.d-bib b { font: italic 900 clamp(3.8rem, 7vw, 6rem)/.9 "Barlow Condensed", var(--display); color: var(--sv-navy, #001D4A); }
.d-bib small { font: 600 .56rem/1.2 var(--mono); letter-spacing: .12em; color: #6B6B70; }
.d-pin { position: absolute; top: 8px; left: 10px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #ddd 30%, #999 32%, #ddd 60%); }
.d-pin.r { left: auto; right: 10px; }
.d-checker { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: conic-gradient(#fff 25%, #111 0 50%, #fff 0 75%, #111 0) 0 0 / 18px 18px; opacity: .9; }
.u-wrapped { position: relative; z-index: 3; max-width: var(--wrap); margin: clamp(48px, 7vw, 80px) auto 0; }
.wr-title { margin: 0 0 14px; font: italic 900 clamp(2rem, 4vw, 3.2rem)/1 "Barlow Condensed", var(--display); text-transform: uppercase; color: #fff; }
.u-wrapped ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .u-wrapped ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.u-wrapped li { position: relative; padding: 20px 18px 18px; border-radius: 20px; overflow: hidden; color: #001D4A; transform: rotate(calc((var(--i) - 1.5) * 1.2deg)); }
.u-wrapped li:nth-child(1) { background: #FD6500; color: #fff; }
.u-wrapped li:nth-child(2) { background: #FFFFFF; }
.u-wrapped li:nth-child(3) { background: #FFB27A; }
.u-wrapped li:nth-child(4) { background: #1E3A8A; color: #fff; }
.u-wrapped strong { font: italic 900 clamp(2.4rem, 5vw, 4rem)/1 "Barlow Condensed", var(--display); font-variant-numeric: tabular-nums; }
.wr-plus { font: italic 900 2rem/1 "Barlow Condensed", var(--display); color: currentColor; opacity: .7; }
.wr-label { display: block; margin-top: 6px; font-weight: 600; font-size: .9rem; }
.r-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.r-logo { font: 800 1.05rem/1 var(--tight); letter-spacing: -0.02em; color: var(--navy); }
.r-logo em { font-style: normal; color: #7A8F2A; }
.r-album { font: 600 .78rem/1 var(--mono); padding: 7px 10px; border-radius: 999px; background: #E8EEFF; color: var(--navy); }
.r-album.is-pop { animation: vPop .4s var(--spring); }
.r-form label { display: block; font-size: .8rem; color: #6B6B70; margin-bottom: 6px; }
.r-row { display: flex; gap: 8px; align-items: stretch; }
.r-chip { display: grid; place-items: center; width: 40px; border-radius: 12px; background: var(--navy); color: var(--sky); font: 700 1.1rem/1 var(--mono); }
.r-row input { width: 90px; min-height: 44px; border: 1.5px solid #E2E2E6; border-radius: 12px; padding: 0 10px; font: 700 1.2rem/1 var(--mono); text-align: center; color: #111; background: #F7F7F8; }
.r-row input:focus { outline: none; border-color: var(--navy); background: #fff; }
.r-hint { margin: 6px 0 0; font: 400 .74rem/1.3 var(--mono); color: #8B8B90; }
.r-status { min-height: 1.5em; margin: 10px 0; font-size: .88rem; color: #333; }
.r-status strong { color: var(--navy); background: var(--sky); padding: 0 6px; border-radius: 4px; }
.r-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.r-ph { position: relative; margin: 0; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: linear-gradient(var(--sky) 0 45%, var(--ground) 45%); transition: opacity .3s, scale .35s var(--spring), box-shadow .3s; }
.r-ph::before { content: ""; position: absolute; left: -10%; right: -10%; top: 38%; height: 18%; background: radial-gradient(60% 100% at 30% 100%, rgba(0, 0, 0, .18), transparent 70%), radial-gradient(50% 100% at 80% 100%, rgba(0, 0, 0, .14), transparent 70%); }
.r-runner { position: absolute; left: 50%; bottom: 8%; width: 46%; height: 72%; translate: -50% 0; }
.r-head { position: absolute; left: 50%; top: 0; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #E8B98F; translate: -50% 0; }
.r-body { position: absolute; left: 12%; right: 12%; top: 26%; height: 42%; border-radius: 10px 10px 4px 4px; background: var(--jersey); display: grid; place-items: center; }
.r-body b { background: #fff; color: #111; font: 700 .58rem/1 var(--mono); padding: 3px 3px; border-radius: 2px; }
.r-legs { position: absolute; left: 24%; right: 24%; bottom: 0; height: 32%; background: linear-gradient(90deg, #222 0 42%, transparent 42% 58%, #222 58%); }
.r-box { position: absolute; left: 22%; right: 22%; top: 40%; height: 26%; border: 2px solid var(--sky); border-radius: 4px; opacity: 0; scale: 1.4; transition: opacity .2s, scale .3s var(--spring); }
.r-box em { position: absolute; left: -2px; bottom: 100%; padding: 2px 4px; background: var(--sky); color: var(--navy); font: 700 .5rem/1 var(--mono); font-style: normal; white-space: nowrap; border-radius: 2px 2px 0 0; }
.r-ph.is-detect .r-box { opacity: 1; scale: 1; }
.r-ph.is-miss { opacity: .3; scale: .94; }
.r-ph.is-miss .r-box { border-color: #bbb; }
.r-ph.is-miss .r-box em { background: #bbb; color: #333; }
.r-ph.is-hit { box-shadow: 0 0 0 3px var(--sky), 0 10px 20px rgba(0, 0, 0, .25); scale: 1.04; z-index: 2; }
.r-laser { position: absolute; left: -4px; right: -4px; top: 0; height: 3px; background: var(--sky); box-shadow: 0 0 12px 3px rgba(198, 244, 50, .8); opacity: 0; pointer-events: none; }
.r-grid.is-scanning .r-laser { animation: vLaser 1.1s ease-in-out 1; }
@keyframes vLaser { 0% { top: 0; opacity: 1; } 100% { top: 100%; opacity: 1; } }
.u-nyc { --fl: #E81D2E; --u-bg: #1F1E1D; --u-fg: #fff; --u-accent: var(--fl); --u-title: #fff;
background-image: linear-gradient(115deg, transparent 62%, rgba(232, 29, 46, .14) 62% 64%, transparent 64%); }
.u-nyc .u-num { color: #fff; }
.u-nyc .u-btn { color: #fff; }
.u-nyc .u-title { font: italic 800 clamp(3.4rem, 8.6vw, 7.4rem)/.88 var(--tight); letter-spacing: -.045em; }
.u-nyc .u-title::before { content: ""; display: inline-block; width: .9em; height: .62em; margin-right: .14em; vertical-align: .06em; background: conic-gradient(#fff 25%, #1F1E1D 0 50%, #fff 0 75%, #1F1E1D 0) 0 0 / .21em .21em; transform: skewX(-14deg); border: 2px solid #fff; }
.d-nyc { position: absolute; right: -2vw; top: -110px; font: italic 800 clamp(9rem, 24vw, 22rem)/1 var(--tight); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .28); }
.n-row { display: grid; gap: 6px; margin-bottom: 10px; }
.n-lab { font: 600 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #6B6B70; }
.n-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.n-chips button { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #E2E2E6; background: #fff; font: 600 .8rem/1 var(--ios); color: #111; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--spring); }
.n-chips button:hover { transform: translateY(-1px); }
.n-chips button[aria-checked="true"] { background: #111; color: var(--yellow); border-color: #111; }
.n-stage { position: relative; height: 210px; margin: 8px 0 12px; border-radius: 16px; background: #1F1E1D; overflow: hidden; }
.n-map { position: absolute; right: 6px; top: 8px; width: 62%; height: 86%; }
.n-ping { opacity: 0; transform-box: fill-box; transform-origin: center; }
.n-city.is-ping .n-ping { animation: vPing 1.4s ease-out 2; }
@keyframes vPing { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(6); } }
.n-dest { position: absolute; right: 12px; bottom: 8px; margin: 0; font: 700 .7rem/1 var(--mono); color: #fff; }
.n-box { --tx: 80%; --ty: 40%; position: absolute; left: 18px; bottom: 22px; width: 104px; height: 78px; }
.n-body { position: absolute; inset: 14px 0 0; background: linear-gradient(#D7A46E, #C08A52); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(90, 55, 20, .3), 0 8px 14px rgba(0, 0, 0, .15); }
.n-flap { position: absolute; top: 14px; width: 50%; height: 16px; background: #E0B27C; transform-origin: bottom; transition: transform .35s var(--spring); box-shadow: inset 0 0 0 1px rgba(90, 55, 20, .25); }
.n-flap-l { left: 0; transform: rotateX(0) rotate(-35deg); transform-origin: left bottom; }
.n-flap-r { right: 0; transform: rotate(35deg); transform-origin: right bottom; }
.n-bottle { position: absolute; left: 38px; top: -70px; width: 26px; height: 56px; border-radius: 6px 6px 4px 4px; background: linear-gradient(90deg, #1E1E1E, #3A3A3A); opacity: 0; transition: top .45s var(--spring), opacity .2s; }
.n-bottle i { position: absolute; left: 4px; right: 4px; top: 18px; height: 16px; background: var(--red); border-radius: 2px; }
.n-tape { position: absolute; left: 44%; top: 12px; width: 12%; height: 0; background: rgba(240, 225, 190, .95); transition: height .35s var(--ease); }
.n-label { position: absolute; left: 10px; right: 10px; top: 34px; padding: 4px 5px; background: #fff; border-radius: 2px; display: grid; gap: 1px; opacity: 0; translate: 0 6px; transition: opacity .25s, translate .3s var(--spring); }
.n-label b { font: 700 .5rem/1.1 var(--mono); color: #111; }
.n-label i { font: 400 .44rem/1 var(--mono); color: #666; font-style: normal; }
.n-label s { height: 6px; background: repeating-linear-gradient(90deg, #111 0 1px, transparent 1px 3px); }
.n-stamp { position: absolute; right: -14px; top: 2px; padding: 3px 6px; border: 2px solid var(--red); color: var(--red); font: 400 .8rem/1 var(--display); text-transform: uppercase; rotate: -14deg; opacity: 0; scale: 2; transition: opacity .2s, scale .3s var(--spring); }
.n-box.s-drop .n-bottle { top: 14px; opacity: 1; }
.n-box.s-close .n-bottle { opacity: 0; }
.n-box.s-close .n-flap-l { transform: rotate(0); }
.n-box.s-close .n-flap-r { transform: rotate(0); }
.n-box.s-tape .n-tape { height: 64px; }
.n-box.s-label .n-label { opacity: 1; translate: 0 0; }
.n-box.s-stamp .n-stamp { opacity: 1; scale: 1; }
.n-box.s-ship { transition: left .6s cubic-bezier(.5, 0, .3, 1), bottom .6s cubic-bezier(.5, 0, .3, 1), scale .6s, opacity .6s .3s; left: calc(38% + var(--tx) * .6 - 52px); bottom: calc(100% - var(--ty) * .86 - 40px); scale: .2; opacity: 0; }
.n-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.n-count { margin: 0; font-size: .82rem; color: #555; }
.n-count b { font: 400 2rem/1 var(--display); color: #111; }
.n-count small { color: var(--red); font: 400 1.2rem/1 var(--display); }
.n-count.is-pop b { display: inline-block; animation: vPop .4s var(--spring); }
.u-music { --u-bg: var(--cream); --u-fg: #2A1710; --u-accent: var(--rust); --u-title: var(--rust); }
.u-music .u-title { text-transform: none; font-family: var(--tight); font-weight: 900; letter-spacing: -0.06em; filter: url(#rough); }
.d-vinyl { position: absolute; left: -140px; top: -120px; width: clamp(260px, 30vw, 420px); aspect-ratio: 1; border-radius: 50%;
background: radial-gradient(circle, var(--rust) 0 17%, #1A0E09 17.5% 19%, #111 19.5%), repeating-radial-gradient(circle, #1B1B1B 0 2px, #0C0C0C 2px 4px); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.d-vinyl span { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 20%, rgba(255, 255, 255, .08) 25%, transparent 30% 70%, rgba(255, 255, 255, .06) 75%, transparent 80%); }
.d-mib { position: absolute; right: -2vw; bottom: -60px; font: 900 clamp(5rem, 14vw, 12rem)/1 var(--tight); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2px rgba(181, 68, 28, .35); white-space: nowrap; }
.u-ui[data-w="music"] { background: #1C100B; color: var(--cream); padding: 0; }
.m-stage { --x: 50%; --y: 50%; position: relative; padding: 22px 18px; min-height: 230px; cursor: crosshair; touch-action: none; }
.m-jobs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; justify-content: center; align-content: center; min-height: 190px; }
.m-jobs li { font: 800 clamp(1.05rem, 2.4vw, 1.5rem)/1.1 var(--tight); letter-spacing: -0.02em; color: #F1E6D8; transition: color .3s, text-shadow .3s; }
.m-jobs li:nth-child(odd) { font-family: var(--hand); font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.m-jobs li.is-lit { color: #FFB38A; text-shadow: 0 0 18px rgba(255, 140, 80, .6); }
.m-dark { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 110px at var(--x) var(--y), rgba(28, 16, 11, 0) 0, rgba(28, 16, 11, .25) 55%, rgba(14, 7, 4, .96) 100%); }
.m-spot-hint { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font: 500 .66rem/1 var(--mono); letter-spacing: .06em; color: rgba(241, 230, 216, .55); pointer-events: none; }
.m-player { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 16px 18px 18px; background: #2A1710; }
.m-deck { position: relative; width: 120px; height: 100px; }
.m-vinyl { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle, var(--rust) 0 26%, #111 27%), repeating-radial-gradient(circle, #1E1E1E 0 1.5px, #0B0B0B 1.5px 3px); }
.m-vinyl img { width: 46%; height: 46%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #111; }
.is-playing .m-vinyl { animation: vSpin 1.8s linear infinite; }
@keyframes vSpin { to { rotate: 360deg; } }
.m-arm { position: absolute; right: 2px; top: 4px; width: 6px; height: 70px; background: #C9BBA8; border-radius: 3px; transform-origin: top center; rotate: 18deg; transition: rotate .6s var(--spring); }
.m-arm::after { content: ""; position: absolute; bottom: -4px; left: -4px; width: 14px; height: 10px; background: #8C7B66; border-radius: 3px; }
.is-playing .m-arm { rotate: 38deg; }
.m-ep { margin: 0 0 8px; font: 600 .86rem/1.2 var(--ios); color: var(--cream); }
.m-eq { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 10px; }
.m-eq i { flex: 1; height: 20%; background: var(--rust); border-radius: 2px; }
.is-playing .m-eq i { animation: vEq .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -70ms); }
@keyframes vEq { from { height: 15%; } to { height: 100%; } }
.m-play { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--rust); color: #fff; font: 700 .86rem/1 var(--ios); cursor: pointer; }
.m-play .i-pause, .is-playing .m-play .i-play { display: none; }
.is-playing .m-play .i-pause { display: inline; }
.u-reyers { --u-bg: var(--plum); --u-fg: var(--butter); --u-accent: var(--butter); --u-title: var(--butter); }
.u-reyers .u-title { font-family: var(--hand); font-weight: 700; text-transform: none; font-size: clamp(3.6rem, 9vw, 7.5rem); }
.d-89 { position: absolute; right: 3vw; top: -150px; font: 400 clamp(10rem, 26vw, 24rem)/.8 var(--display); color: transparent; -webkit-text-stroke: 3px rgba(255, 248, 202, .35); writing-mode: vertical-rl; }
.d-tower { position: absolute; left: 14px; top: 80px; bottom: 80px; width: 2px; background: rgba(255, 248, 202, .3); }
.d-tower span { position: absolute; left: 8px; font: 500 .6rem/1 var(--mono); color: rgba(255, 248, 202, .6); }
.d-tower span:first-child { top: 0; }
.d-tower span:last-child { bottom: 0; }
.u-ui[data-w="reyers"] { background: #FFF8EC; color: #2B1A1E; }
.u-fest { --hbd: #C8102E; --u-bg: linear-gradient(135deg, #B80C25, #DC2B2B); --u-fg: #fff; --u-accent: #fff; --u-title: #fff; }
.u-fest .u-num { color: var(--hbd); }
.u-fest .u-btn { color: var(--hbd); }
.u-fest .u-title { font: 900 clamp(3.4rem, 8.4vw, 7.2rem)/.9 var(--tight); letter-spacing: -.04em; text-transform: none; }
.f-compare { --pos: 50%; position: relative; height: 240px; border-radius: 16px; overflow: hidden; margin-bottom: 16px; user-select: none; }
.f-side { position: absolute; inset: 0; padding: 14px; }
.f-before { background: #E9EBEF; }
.f-after { background: #FDE7EA; clip-path: inset(0 0 0 var(--pos)); }
.f-tag { position: absolute; top: 10px; margin: 0; padding: 4px 8px; border-radius: 999px; font: 700 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; z-index: 2; }
.f-before .f-tag { left: 10px; background: #fff; color: #555; }
.f-after .f-tag { right: 10px; background: var(--hbd, #C8102E); color: #fff; }
.f-post { margin-top: 30px; padding: 12px; background: #fff; border-radius: 12px; font-size: .74rem; line-height: 1.35; color: #444; }
.f-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.f-post-head small { display: block; color: #999; font-size: .62rem; }
.f-av { width: 26px; height: 26px; border-radius: 50%; background: #1877F2; }
.f-lines { display: grid; gap: 5px; margin-top: 8px; }
.f-lines i { height: 6px; border-radius: 3px; background: #E3E5EA; }
.f-lines i:nth-child(2) { width: 80%; }
.f-lines i:nth-child(3) { width: 55%; }
.f-post-ig { padding: 0; overflow: hidden; margin-left: 46%; margin-top: 24px; }
.f-pic { position: relative; aspect-ratio: 4 / 5; max-height: 150px; background: var(--hbd, #C8102E); overflow: hidden; }
.f-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.f-heart { position: absolute; right: 8px; bottom: 6px; color: #fff; font-size: 1.2rem; animation: vBeat 1.4s ease-in-out infinite; }
@keyframes vBeat { 50% { scale: 1.25; } }
.f-post-ig p { margin: 0; padding: 8px 10px; }
.f-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: #fff; translate: -50% 0; box-shadow: 0 0 10px rgba(0, 0, 0, .3); pointer-events: none; }
.f-handle i { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 38px; height: 38px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; color: var(--hbd, #C8102E); font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.f-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.f-ig-head { display: flex; align-items: center; gap: 12px; }
.f-ig-av { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--hbd, #C8102E); color: #fff; font: 800 .7rem/1 var(--tight); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #D4D4D8; transition: box-shadow .4s; }
.is-done .f-ig-av { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hbd, #C8102E); }
.f-ig-head p { margin: 0; }
.f-ig-handle { font: 700 .92rem/1.2 var(--ios); }
.f-ig-state { font-size: .8rem; color: #6B6B70; }
.f-ig-grid { list-style: none; margin: 12px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 10px; overflow: hidden; max-width: 330px; }
.f-ig-grid li { aspect-ratio: 4 / 5; background: #F1F1F3; position: relative; overflow: hidden; }
.f-ig-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.f-ig-days { flex: 1; min-width: 130px; display: grid; gap: 6px; }
.f-ig-bar { height: 6px; border-radius: 3px; background: #EEE; overflow: hidden; }
.f-ig-bar i { display: block; height: 100%; background: var(--hbd, #C8102E); transform: scaleX(0); transform-origin: left; transition: transform .17s linear; }
.f-ig-day { font: 500 .72rem/1 var(--mono); color: #6B6B70; }
.f-ig { position: relative; }
.u-stage { --u-bg: #6E0E12; --u-fg: #FFF1E6; --u-accent: #FFC9B8; --u-title: #FFF1E6; }
.d-curtain { position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px); background: repeating-linear-gradient(90deg, #4A0709 0 14px, #8E1419 14px 30px, #5C0A0D 30px 44px); box-shadow: inset -10px 0 20px rgba(0, 0, 0, .4); }
.d-curtain.l { left: 0; }
.d-curtain.r { right: 0; transform: scaleX(-1); }
.d-cone { position: absolute; left: 50%; top: -60px; width: 70vw; height: 120%; translate: -50% 0; background: conic-gradient(from 160deg at 50% 0%, transparent 0 8deg, rgba(255, 240, 200, .14) 14deg 26deg, transparent 32deg); }
.u-ui[data-w="stage"] { background: #0D0D0D; color: #fff; }
.s-screen { position: relative; min-height: 220px; display: grid; place-items: center; padding: 30px 18px; border-radius: 14px; background: #0D0D0D; text-align: center; overflow: hidden; isolation: isolate; }
.s-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .8)); }
.s-rec { position: absolute; top: 12px; left: 14px; display: inline-flex; align-items: center; gap: 6px; font: 700 .66rem/1 var(--mono); color: #FF5A5A; }
.s-rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; animation: vPulse 1.4s infinite; }
.s-line { margin: 0; font: 700 clamp(1.2rem, 2.6vw, 1.7rem)/1.3 var(--tight); letter-spacing: -0.02em; max-width: 26ch; min-height: 3.9em; }
.s-count { position: absolute; bottom: 10px; right: 14px; font: 500 .66rem/1 var(--mono); color: #888; }
.is-flash .s-screen { animation: vFlash .5s ease-out; }
@keyframes vFlash { from { box-shadow: inset 0 0 0 200px rgba(255, 240, 200, .12); } }
.s-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.s-stats { margin: 0; font-size: .8rem; color: #BBB; }
.s-stats b { font: 400 1.3rem/1 var(--display); color: #fff; }
.w-btn { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #111; color: #fff; font: 700 .9rem/1 var(--ios); cursor: pointer; white-space: nowrap; transition: transform .2s var(--spring), background .2s; }
.w-btn:hover { transform: translateY(-2px); }
.w-btn:active { transform: scale(.96); }
.w-btn:disabled { opacity: .5; cursor: progress; transform: none; }
.w-btn-lime { background: #FD6500; color: #fff; }
.w-btn-fl { background: #E81D2E; color: #fff; font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.w-btn-hbd { background: #C8102E; color: #fff; }
.w-btn-red { background: #C81E1E; color: #fff; }
.w-confetti { position: absolute; top: 40%; width: 9px; height: 14px; background: var(--c); border-radius: 2px; pointer-events: none; z-index: 10; animation: vConf 1.3s cubic-bezier(.2, .6, .3, 1) forwards; }
@keyframes vConf { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
.u-race .d-bib { box-shadow: 0 18px 40px rgba(0, 0, 0, .5), inset 0 -6px 0 #FD6500; }
.u-race .r-logo { font: italic 900 1.25rem/1 "Barlow Condensed", var(--display); letter-spacing: 0; color: #001D4A; }
.u-race .r-logo em { color: #FD6500; }
.u-race .r-album { background: #FFF0E6; color: #B44700; }
.u-race .r-chip { background: #001D4A; color: #FD6500; }
.u-race .r-row input:focus { border-color: #FD6500; }
.u-race .r-status strong { background: #FD6500; color: #fff; }
.u-race .r-box { border-color: #FD6500; }
.u-race .r-box em { background: #FD6500; color: #fff; }
.u-race .r-ph.is-hit { box-shadow: 0 0 0 3px #FD6500, 0 10px 20px rgba(0, 0, 0, .25); }
.u-race .r-laser { background: #FD6500; box-shadow: 0 0 12px 3px rgba(253, 101, 0, .7); }
@media (min-width: 1000px) { .u-sub { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 48px; } }
.u-title-logo img { display: block; width: min(100%, 440px); height: auto; }
.u-music .u-title-logo { filter: none; }
.u-nyc .u-title-logo::before { display: none; }
.u-nyc .u-title-logo img { width: min(100%, 520px); }
.n-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: #F1F1F2; }
.n-tabs button { flex: 1; min-height: 40px; border: 0; border-radius: 9px; background: none; font: 700 .82rem/1 var(--ios); color: #555; cursor: pointer; }
.n-tabs button[aria-selected="true"] { background: #1F1E1D; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.n-chips button[aria-checked="true"] { background: #1F1E1D; color: #fff; border-color: #1F1E1D; }
.n-count b { color: #1F1E1D; }
.n-count small { color: #E81D2E; }
.n-stamp { border-color: #E81D2E; color: #E81D2E; }
.n-bottle i { background: #7BC043; }
.mm { position: relative; overflow: hidden; border-radius: 16px; background: #1F1E1D; touch-action: pan-y; }
.mm-track { display: flex; transition: transform .45s var(--ease); }
.mm-slide { position: relative; flex: 0 0 100%; aspect-ratio: 3 / 4; max-height: 340px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: #fff; user-select: none;
background: radial-gradient(70% 60% at 100% 0%, rgba(232, 29, 46, .35), transparent 70%), #1F1E1D; }
.mm-slide p { margin: 0; font: italic 800 clamp(1.15rem, 2.4vw, 1.5rem)/1.2 var(--tight); letter-spacing: -.02em; }
.mm-slide.is-q p { font-size: clamp(1.6rem, 3.6vw, 2.2rem); text-transform: uppercase; line-height: 1; }
.mm-slide.is-cta { background: #E81D2E; align-items: flex-start; }
.mm-tag { position: absolute; top: 14px; left: 20px; font: 700 .62rem/1 var(--mono); letter-spacing: .14em; color: #E81D2E; }
.mm-slide.is-cta .mm-tag { color: #fff; }
.mm-n { font: italic 900 3rem/1 var(--tight); color: #E81D2E; }
.mm-save { color: #fff; }
.mm-logo { position: absolute; right: 18px; bottom: 14px; font: italic 900 .72rem/1 var(--tight); letter-spacing: .04em; opacity: .8; }
.mm-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px; background: #111; }
.mm-nav button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #111; font-weight: 800; cursor: pointer; }
.mm-nav button:disabled { opacity: .35; cursor: default; }
.mm-dots { display: flex; gap: 6px; }
.mm-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .2s, transform .2s; }
.mm-dots i.is-on { background: #E81D2E; transform: scale(1.3); }
.mm-note { margin: 10px 2px 0; font-size: .76rem; color: #6B6B70; }
.d-vinyl img { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; translate: -50% -50%; border-radius: 50%; object-fit: cover; }
.d-bxl { position: absolute; left: 34%; bottom: -70px; width: clamp(140px, 16vw, 220px); height: auto; opacity: .5; rotate: -6deg; }
.u-ui[data-w="reyers"] { background: #FFF8EC; color: #2B1A1E; }
.u-fest { background: var(--u-bg); }
.f-ig-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: .7; transition: opacity .3s, scale .4s var(--spring); }
.f-ig-grid li.is-on img { opacity: 1; scale: 1; }
.f-ig-av svg { width: 100%; height: 100%; }
.f-heart { color: #fff; }
.u-answer { margin: 0 0 18px; font: 800 clamp(1.5rem, 3.2vw, 2.5rem)/1.12 var(--tight); letter-spacing: -0.03em; max-width: 26ch; color: var(--u-title, var(--u-fg)); }
.u-learned { margin: 26px 0 0; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--u-fg) 8%, transparent); font: 500 1rem/1.45 var(--sans); max-width: 60ch; }
.u-learned .v-mono { display: block; margin-bottom: 6px; color: var(--u-accent); }
.u-inner.mib, .u-inner.fl, .u-inner.ry, .u-inner.hbd { display: block; }
.u-race { --u-bg-solid: #020817; }
.u-race .u-answer { font: italic 900 clamp(2.2rem, 4.6vw, 3.8rem)/.95 "Barlow Condensed", var(--display); text-transform: uppercase; letter-spacing: 0; max-width: 18ch; }
.sv-logo { margin: 18px 0 14px; }
.sv-logo img { width: clamp(200px, 26vw, 300px); }
.sv-h { margin: 0 0 18px; font: italic 900 clamp(3rem, 7.4vw, 6.4rem)/.86 "Barlow Condensed", var(--display); text-transform: uppercase; color: #fff; }
.sv-h span { display: block; }
.sv-h span + span { color: #FD6500; }
.sv-foot { position: relative; z-index: 3; max-width: var(--wrap); margin: 28px auto 0; }
.u-music { --u-bg-solid: #F1E6D8; }
.mib-mast { text-align: center; padding-bottom: 22px; border-bottom: 4px double var(--rust); }
.mib-logo { margin: 0 auto 14px; }
.mib-logo img { width: min(760px, 92%); margin: 0 auto; }
.mib-mast .u-kicker { justify-content: center; }
.mib-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 36px; align-items: start; }
@media (min-width: 760px) { .mib-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .mib-demo { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .mib-grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.1fr) minmax(0, 1fr); } .mib-demo { grid-column: auto; } }
.mib-cover { margin: 0; transform: rotate(-2deg); }
.mib-cover img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 30px 60px rgba(42, 23, 16, .35); }
.mib-cover figcaption { margin-top: 12px; font: 500 .72rem/1.4 var(--mono); color: var(--rust); }
.mib-article .u-answer { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -0.01em; color: #2A1710; }
.mib-spotify { color: #1A7F37; }
.u-nyc { --u-bg-solid: #1F1E1D; }
.fl-ticker { position: absolute; left: 0; right: 0; top: 0; z-index: 4; overflow: hidden; background: #E81D2E; color: #fff; white-space: nowrap; }
.fl-ticker div { display: inline-flex; gap: 18px; padding: 10px 0; font: italic 800 .78rem/1 var(--tight); letter-spacing: .08em; animation: vMarquee 40s linear infinite; }
.fl-ticker i { font-style: normal; opacity: .7; }
@keyframes vMarquee { to { transform: translateX(-50%); } }
.fl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.fl-logo { margin: 0; }
.fl-logo img { width: clamp(220px, 32vw, 380px); }
.fl-hero { position: relative; margin: clamp(28px, 5vw, 56px) 0; }
.fl-banner { margin: 0; font: italic 900 clamp(3.4rem, 11vw, 9.4rem)/.86 var(--tight); letter-spacing: -0.045em; text-transform: uppercase; }
.fl-banner span { display: block; }
.fl-banner span + span { color: #E81D2E; }
.fl-stamp { position: absolute; right: 0; top: 50%; display: grid; gap: 4px; justify-items: center; padding: 14px 18px; border: 3px double rgba(255, 255, 255, .7); border-radius: 50%; aspect-ratio: 1; place-content: center; font: 600 .7rem/1.2 var(--mono); letter-spacing: .12em; color: rgba(255, 255, 255, .8); transform: translateY(-50%) rotate(-14deg); }
.fl-stamp b { font: 800 1.1rem/1 var(--tight); letter-spacing: .1em; }
@media (max-width: 759px) { .fl-stamp { position: static; width: 150px; margin-top: 18px; transform: rotate(-8deg); } }
.fl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1000px) { .fl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.u-reyers { --u-bg-solid: #4D3238; }
.ry-head { text-align: center; }
.ry-head .u-kicker { justify-content: center; }
.ry-logo { margin: 18px auto 10px; }
.ry-logo img { width: clamp(220px, 30vw, 360px); margin: 0 auto; }
.ry-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; margin-top: clamp(28px, 5vw, 56px); }
@media (min-width: 960px) { .ry-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.ry-hoodie { position: relative; width: min(460px, 86vw); aspect-ratio: 200 / 210; margin: 0 auto; animation: vFloat 6s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .4)); }
.ry-hoodie svg { width: 100%; height: 100%; display: block; }
.ry-hoodie img { position: absolute; left: 25%; top: 22%; width: 50%; height: auto; }
@keyframes vFloat { 50% { transform: translateY(-12px) rotate(1deg); } }
.ry-demo { padding-top: 0; margin-top: clamp(36px, 5vw, 56px); }
.ry-demo .u-ui { max-width: none; background: #FFF8EC; color: #2B1A1E; }
.u-inner.ry > .u-learned { margin-inline: auto; text-align: center; }
.y-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.y-title { margin: 0; font: 700 clamp(1.6rem, 3vw, 2.2rem)/1 var(--hand); color: var(--bordeaux); }
.y-mark { width: 64px; height: auto; opacity: .85; }
.y-road { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: step; }
@media (min-width: 900px) { .y-road { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; } }
.y-step { position: relative; }
@media (min-width: 900px) { .y-step::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; background: #E6D5C9; } .y-step.is-lit::before { background: var(--bordeaux); transition: background .3s; } }
.y-step button { position: relative; width: 100%; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 14px; background: none; text-align: left; cursor: pointer; color: inherit; }
@media (min-width: 900px) { .y-step button { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.y-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 3px dashed #CDB8AA; font: 800 .9rem/1 var(--tight); color: #9A8A8E; transition: background .3s, border-color .3s, color .3s, transform .3s var(--spring); }
.y-step.is-done.is-lit .y-dot, .y-step.is-done .y-dot { background: var(--bordeaux); border: 3px solid var(--bordeaux); color: #FFF8CA; }
.y-step.is-now .y-dot { background: #E5322B; border: 3px solid #E5322B; color: #fff; animation: vPulse 1.8s infinite; }
.y-h { font: 700 .95rem/1.2 var(--tight); }
.y-st { font: 500 .62rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #9A8A8E; }
.y-step.is-now .y-st { color: #E5322B; }
.y-step.is-open button { background: #F3E6DA; }
.y-step.is-open .y-dot { transform: scale(1.1); }
.y-detail { min-height: 60px; margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: #F3E6DA; font-size: .95rem; color: #4D3238; }
.y-detail b { display: block; margin-bottom: 4px; font: 700 1.4rem/1 var(--hand); color: var(--bordeaux); }
.u-fest { --u-bg-solid: #C8102E; }
.hbd-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hbd-report { margin-top: clamp(28px, 4vw, 44px); }
.hbd-report .u-ui { max-width: none; border-radius: 6px; padding: clamp(18px, 3vw, 32px); font-family: var(--sans); box-shadow: 0 30px 70px rgba(0, 0, 0, .3); }
.hr-title { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid #1A1A1A; font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hr-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1000px) { .hr-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hr-kpis li { display: grid; gap: 6px; padding: 4px 0 4px 14px; border-left: 4px solid #C8102E; }
.hr-label { font: 600 .82rem/1.25 var(--sans); color: #444; }
.hr-vals { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; color: #999; }
.hr-vals s { font: 600 1rem/1 var(--tight); }
.hr-vals strong { font: 900 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--tight); letter-spacing: -0.03em; color: #C8102E; font-variant-numeric: tabular-nums; }
.hr-note { font-size: .74rem; color: #777; }
.hr-chart { margin: 26px 0 0; }
.hr-chart figcaption { margin-bottom: 12px; font: 600 .74rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #444; }
.hr-chart ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: clamp(10px, 3vw, 28px); height: 190px; border-bottom: 2px solid #1A1A1A; }
.hr-chart li { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.hr-chart i { width: 100%; max-width: 90px; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(#DC2B2B, #A30B21); transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--ease); }
.hr-chart li:nth-child(3) i { background: linear-gradient(#1A1A1A, #444); }
.is-run .hr-chart i { transform: scaleY(1); }
.hr-chart li:nth-child(2) i { transition-delay: .15s; }
.hr-chart li:nth-child(3) i { transition-delay: .3s; }
.hr-chart li:nth-child(4) i { transition-delay: .45s; }
.hr-chart b { font: 800 .95rem/1 var(--tight); color: #1A1A1A; }
.hr-chart li span { order: 3; margin-bottom: -26px; font: 500 .66rem/1 var(--mono); color: #666; }
.hr-chart-note { margin: 34px 0 0; font-size: .78rem; color: #666; }
.u-stage { --u-bg-solid: #6E0E12; }
.st-photo { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.st-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .45; }
.st-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60, 6, 9, .92) 0%, rgba(60, 6, 9, .55) 55%, rgba(60, 6, 9, .85) 100%); }
.v-others { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(48px, 6vw, 80px); }
.v-others-title { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 22px; transform: rotate(-2deg); }
.v-tickets { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 760px) { .v-tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.v-tickets li { transform: rotate(var(--r)); }
.v-ticket {
--notch: 106px;
display: grid; grid-template-columns: 1fr var(--notch); width: 100%; min-height: 128px; padding: 0; border: 0; text-align: left; cursor: pointer;
background: var(--paper-2); color: var(--ink); box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
-webkit-mask: radial-gradient(circle at calc(100% - var(--notch)) 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--notch)) 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle at calc(100% - var(--notch)) 0, transparent 11px, #000 11.5px) top / 100% 51% no-repeat, radial-gradient(circle at calc(100% - var(--notch)) 100%, transparent 11px, #000 11.5px) bottom / 100% 51% no-repeat;
transition: transform .3s var(--spring);
}
.v-ticket:hover { transform: translateY(-4px) rotate(calc(var(--r) * -1)); }
.v-ticket-main { display: flex; flex-direction: column; gap: 4px; padding: 18px 18px; }
.v-ticket-title { font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/.95 var(--display); text-transform: uppercase; }
.v-ticket-role { font-size: .85rem; color: var(--muted); }
.v-ticket-stub { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px; border-left: 2px dashed var(--line); background: var(--tc); color: var(--ink); }
.v-ticket-stub strong { font: 400 1.8rem/1 var(--display); }
.v-ticket-stub span { font-size: .72rem; line-height: 1.25; }
.v-about { padding: clamp(64px, 9vw, 130px) var(--pad); max-width: var(--wrap); margin: 0 auto; overflow-x: clip; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 960px) { .ab-grid { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: 64px; } }
.ab-card { position: relative; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--ink), 8px 8px 0 var(--cobalt); }
.ab-card-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--navy); color: #fff; }
.ab-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--red); font: 800 .9rem/1 var(--tight); }
.ab-name { margin: 0; font: 800 1.15rem/1.1 var(--tight); letter-spacing: -0.02em; }
.ab-card-head .v-mono { color: var(--sky); margin-top: 3px; }
.ab-stamp { margin-left: auto; padding: 5px 10px; border: 2px solid #FF6B61; border-radius: 6px; color: #FF8A82; font: 400 1.05rem/1 var(--display); text-transform: uppercase; rotate: -6deg; }
.ab-card dl { margin: 0; padding: 8px 20px 14px; }
.ab-card dl div { display: grid; grid-template-columns: 120px 1fr; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ab-card dl div:last-child { border-bottom: 0; }
.ab-card dd { margin: 0; font: 700 1.02rem/1.3 var(--tight); }
.ab-copy p { margin: 0 0 14px; max-width: 60ch; color: var(--muted); font-size: 1.04rem; }
.ab-copy .ab-lead { color: var(--ink); font: 800 clamp(1.5rem, 3.2vw, 2.4rem)/1.15 var(--tight); letter-spacing: -0.03em; max-width: 26ch; margin-bottom: 20px; }
.ab-looking { margin-top: 22px !important; padding: 18px 20px; border-radius: 14px; background: var(--navy); color: #fff !important; }
.ab-looking b { display: block; margin-bottom: 6px; font: 600 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sky); }
.ab-tools { margin-top: clamp(48px, 7vw, 88px); }
.v-col-title { margin: 0 0 18px; padding-top: 12px; border-top: 2px solid var(--ink); font: 500 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.v-tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 18px 10px; }
.v-tools li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: .76rem; line-height: 1.2; color: var(--muted); }
.v-tool { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: var(--c); box-shadow: 0 8px 18px rgba(0, 0, 0, .16); transition: transform .3s var(--spring); }
.v-tool i { display: block; width: 54%; height: 54%; background: #fff; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.v-tool.is-dark i { background: #111; }
.v-tool b { font: 800 1.05rem/1 var(--tight); letter-spacing: -0.02em; color: #fff; }
.v-tools li:hover .v-tool { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.ab-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 800px) { .ab-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.v-timeline { list-style: none; margin: 0 0 18px; padding: 0; }
.v-timeline li { display: grid; grid-template-columns: 74px 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1.5px dashed var(--line); }
.v-timeline .v-mono { grid-row: span 2; padding-top: 3px; color: var(--red-ink); }
.v-timeline strong { font: 700 1rem/1.25 var(--tight); }
.v-timeline span:last-child { font-size: .88rem; color: var(--muted); }
.mtb { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px 16px; margin-top: clamp(40px, 6vw, 64px); padding: 14px 16px; border-radius: 16px; background: var(--navy); color: #fff; }
.mtb-photo { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.mtb-title { margin: 0; font: 800 1.15rem/1.1 var(--tight); letter-spacing: -0.02em; }
.mtb-res, .mtb-sp { margin: 4px 0 0; font-size: .8rem; line-height: 1.4; color: #C9D6FF; }
.mtb-sp { color: #9DB8FF; }
.mtb-btn { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--sky); color: var(--navy); font: 700 .84rem/1 var(--sans); text-decoration: none; }
.mtb-btn svg { width: 16px; height: 16px; }
@media (min-width: 760px) { .mtb { grid-template-columns: 76px minmax(0, 1fr) auto; } .mtb-btn { grid-column: auto; } }
.v-desk { padding: clamp(48px, 7vw, 100px) var(--pad); max-width: var(--wrap); margin: 0 auto; overflow-x: clip; }
.v-board { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 34px clamp(16px, 3vw, 34px); }
.v-polaroid { position: relative; width: min(250px, 44vw); margin: 0; padding: 10px 10px 64px; background: var(--pc, #fff); transform: rotate(var(--r)); box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 34px rgba(0, 0, 0, .16); transition: transform .35s var(--spring); }
.v-polaroid:hover { transform: rotate(0) scale(1.03); z-index: 2; }
.v-polaroid .v-tape { top: -13px; left: 50%; margin-left: -48px; width: 96px; transform: rotate(-3deg); }
.v-polaroid img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 5); object-fit: contain; filter: saturate(1.1); }
.v-polaroid figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; text-align: center; font-size: 1.2rem; line-height: 1.1; color: var(--ink-2); }
@media (min-width: 900px) { .v-polaroid { width: clamp(220px, 21vw, 280px); } }
.v-quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: clamp(40px, 6vw, 72px); }
@media (min-width: 820px) { .v-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.v-quote { margin: 0; padding: 22px 22px 18px; background: #FFFDF7; transform: rotate(var(--r)); box-shadow: 0 14px 30px rgba(0, 0, 0, .14); }
.v-quote p { margin: 0 0 10px; font: 700 clamp(1.5rem, 2.4vw, 1.9rem)/1.08 var(--hand); color: var(--red); }
.v-quote.q1 { background: var(--cobalt); }
.v-quote.q1 p { color: #fff; }
.v-quote.q1 cite { color: #C7D2FF; }
.v-quote.q2 { background: var(--sky); }
.v-quote.q2 p { color: var(--navy); }
.v-quote cite { font-style: normal; }
.v-press { padding: clamp(48px, 7vw, 100px) var(--pad) clamp(80px, 10vw, 140px); max-width: var(--wrap); margin: 0 auto; overflow-x: clip; }
.v-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.v-clips li { transform: rotate(var(--r)); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .14)); }
.v-clip { padding: 26px 22px 24px; background: var(--news); font-family: Georgia, "Times New Roman", serif; }
.v-clips li:nth-child(2) .v-clip { background: #FFF3B0; }
.v-clips li:nth-child(4) .v-clip { background: #E1E9FF; }
.v-clip-outlet { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 3px double var(--ink); font: 700 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red-ink); }
.v-clip h3 { margin: 0 0 10px; font: 700 1.45rem/1.12 Georgia, serif; }
.v-clip p { margin: 0 0 12px; font-size: .95rem; color: #3D3A35; }
.v-contact { position: relative; background: #0E0E10; color: #F6F2EA; padding: clamp(90px, 12vw, 160px) var(--pad) 110px; overflow-x: clip; }
.v-contact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 50% at 15% 20%, rgba(229, 50, 43, .25), transparent 70%), radial-gradient(40% 50% at 90% 70%, rgba(47, 91, 255, .25), transparent 70%); pointer-events: none; }
.v-contact-inner { position: relative; max-width: var(--wrap); margin: 0 auto; display: grid; gap: 48px; align-items: start; }
@media (min-width: 960px) { .v-contact-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; } }
.v-contact-title { color: #F6F2EA; }
.v-contact-note { font-size: clamp(1.8rem, 3vw, 2.4rem) !important; margin: 18px 0 0; transform: rotate(-2deg); color: var(--sky); }
.v-contact-sub { margin: 14px 0 0; max-width: 48ch; color: #C9C4BA; font-size: 1.05rem; }
.v-mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.v-mail { font: 800 clamp(1.3rem, 3.2vw, 2.3rem)/1.1 var(--tight); letter-spacing: -0.03em; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.v-mail:hover { color: var(--sky); }
.v-copy { min-height: 44px; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; color: #fff; font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.v-copy:hover { background: var(--sky); color: var(--navy); border-color: var(--sky); }
.v-contact-links { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.v-contact-links a { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid rgba(255, 255, 255, .16); text-decoration: none; font-weight: 500; transition: padding .2s var(--ease), color .2s; }
.v-contact-links a:hover { padding-left: 6px; color: var(--sky); }
.v-contact-links svg { width: 18px; height: 18px; }
.v-contact :focus-visible { outline-color: #fff; }
.v-phone { position: relative; display: flex; flex-direction: column; height: 480px; max-width: 400px; width: 100%; justify-self: center; border-radius: 30px; background: #fff; color: #111; font-family: var(--ios); overflow: hidden; box-shadow: 0 0 0 8px #1D1D1F, 0 30px 80px rgba(0, 0, 0, .5); transform: rotate(2deg); }
.v-phone-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; background: #F6F6F8; border-bottom: 1px solid #EBEBEE; text-align: center; }
.v-phone-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--red), var(--orange)); color: #fff; font: 800 .9rem/1 var(--tight); }
.v-phone-head strong { display: block; font-size: .92rem; }
.v-phone-head small { display: block; font-size: .7rem; color: #8E8E93; }
.v-thread { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.v-b { max-width: 80%; padding: 8px 13px; border-radius: 19px; font-size: .92rem; line-height: 1.35; overflow-wrap: anywhere; animation: vBubble .3s var(--spring); }
@keyframes vBubble { from { transform: scale(.7) translateY(8px); opacity: 0; } }
.v-b.him { align-self: flex-start; background: #E9E9EB; border-bottom-left-radius: 6px; }
.v-b.me { align-self: flex-end; background: #0A84FF; color: #fff; border-bottom-right-radius: 6px; }
.v-b a { color: #0A60D6; font-weight: 600; }
.v-b.is-typing { display: inline-flex; gap: 4px; padding: 11px 13px; }
.v-b.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9A9AA0; animation: vDots 1s infinite; }
.v-b.is-typing i:nth-child(2) { animation-delay: .15s; }
.v-b.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes vDots { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .5; } }
.v-b-status { align-self: flex-end; font-size: .68rem; color: #8E8E93; margin: 0 6px 4px; font-weight: 600; }
.v-compose { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid #EBEBEE; }
.v-compose textarea { flex: 1; resize: none; min-height: 40px; max-height: 100px; padding: 9px 14px; border: 1px solid #D8D8DD; border-radius: 20px; font: 400 .95rem/1.35 var(--ios); color: #111; background: #fff; }
.v-compose textarea:focus { outline: none; border-color: #0A84FF; }
.v-compose button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #0A84FF; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.v-compose button svg { width: 18px; height: 18px; }
.v-foot { position: relative; max-width: var(--wrap); margin: clamp(64px, 9vw, 120px) auto 0; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .16); display: grid; gap: 10px; }
.v-sign { margin: 0; font: 700 clamp(3.5rem, 9vw, 6rem)/1 var(--hand); color: var(--red); transform: rotate(-4deg); transform-origin: left; }
.v-foot .v-mono { color: #A9A49B; }
.v-foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.v-foot-links a, .v-foot-links button { min-height: 44px; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: #F6F2EA; font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.v-foot-links a:hover, .v-foot-links button:hover { color: var(--sky); }
#app.is-ready [data-r] { opacity: 0; transform: translateY(30px) rotate(var(--r, 0deg)); transition: opacity .7s var(--ease) var(--d, 0ms), transform .9s var(--spring) var(--d, 0ms); }
#app.is-ready [data-r].in { opacity: 1; transform: rotate(var(--r, 0deg)); }
@media (prefers-reduced-motion: reduce) {
.v2 *, .v2 *::before, .v2 *::after { animation: none !important; transition: none !important; }
#app.is-ready [data-r] { opacity: 1; transform: rotate(var(--r, 0deg)); }
.u:not(.is-on) .u-decor > * { opacity: 1; scale: 1; }
}
@media (max-width: 1099px) { .d-vinyl { display: none; } }
.hbd-logo { flex: none; width: clamp(90px, 12vw, 150px); height: auto; padding: 8px; border-radius: 50%; background: #fff; box-shadow: 0 18px 30px rgba(0, 0, 0, .25); animation: vSpin 60s linear infinite; }
.ry-tagline { margin: 4px 0 0; font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--hand); color: var(--butter); }
.fl-articles { position: relative; padding-top: 40px; }
.fl-articles .u-annot { top: 0; }
.fl-articles-title { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px solid #E81D2E; font: italic 900 clamp(1.1rem, 2vw, 1.4rem)/1 var(--tight); text-transform: uppercase; }
.fl-articles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fl-articles a { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; color: #1F1E1D; text-decoration: none; overflow: hidden; transition: transform .3s var(--spring), box-shadow .3s; box-shadow: 0 16px 36px rgba(0, 0, 0, .35); }
@media (min-width: 560px) { .fl-articles a { grid-template-columns: 44% minmax(0, 1fr); } }
.fl-articles a:hover { transform: translateY(-4px) rotate(-.4deg); }
.fl-articles img { width: 100%; height: 100%; min-height: 160px; object-fit: cover; display: block; }
.fl-art-body { display: grid; align-content: center; gap: 8px; padding: 16px 18px; }
.fl-art-body strong { font: 800 1.1rem/1.25 var(--tight); }
.fl-art-body span { font-size: .88rem; line-height: 1.45; color: #555; }
.fl-art-body em { font: italic 800 .78rem/1 var(--tight); font-style: italic; text-transform: uppercase; color: #E81D2E; }
.u-demo { padding-top: 62px; }
.u-annot { top: 0; left: 6px; display: inline-flex; align-items: flex-start; gap: 4px; }
.u-annot .scribble.sc-down { width: 34px; height: 44px; margin-top: 8px; flex: none; }
.fl-articles { padding-top: 62px; }
.u-stage { overflow: hidden; }
.d-cone { top: 0; height: 100%; }
.st-quote { margin: 0; padding: 0; border: 0; }
.st-q1 { margin: 0 0 10px; font: italic 500 clamp(1rem, 1.8vw, 1.3rem)/1.4 Georgia, serif; color: #FFD9C9; max-width: 30ch; }
.st-q2 { margin: 0; font: 400 clamp(3rem, 8vw, 6.4rem)/.92 var(--display); text-transform: uppercase; color: #fff; }
.hx-reyers img { height: 40px; max-width: 150px; }
@media (min-width: 960px) { .hx-reyers img { height: 54px; max-width: 200px; } .hx-reyers span { font-size: .82rem; } }
.hx-reyers { padding-top: 10px; }
.hx-dialog { border: 0; padding: 0; border-radius: 20px; width: min(480px, calc(100vw - 32px)); background: #fff; color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.hx-dialog::backdrop { background: rgba(10, 16, 40, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hx-dlg-body { position: relative; padding: 28px 26px 24px; }
.hx-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #F1F1F3; color: var(--ink); font-size: 1rem; cursor: pointer; }
.hx-x:hover { background: var(--ink); color: #fff; }
.hx-dialog h2 { margin: 0 44px 6px 0; font: 800 1.5rem/1.1 var(--tight); letter-spacing: -0.02em; }
.hx-dlg-intro { margin: 0 0 18px; color: var(--muted); font-size: .95rem; }
.hx-dialog dl { margin: 0 0 20px; display: grid; gap: 4px; }
.hx-dialog dl div { display: grid; grid-template-columns: 124px 1fr; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hx-dialog dt { font: 500 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hx-dialog dd { margin: 0; font: 700 1rem/1.3 var(--sans); overflow-wrap: anywhere; }
.sv-collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sv-ph { margin: 0; overflow: hidden; border-radius: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); background: #0B1530; }
.sv-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-ph0 { grid-column: 1 / -1; aspect-ratio: 3 / 2; transform: rotate(-1.2deg); }
.sv-ph1 { aspect-ratio: 1; transform: rotate(1.2deg); }
.sv-ph2 { aspect-ratio: 1; transform: rotate(-1deg); }
.sv-ph2 img { object-position: 50% 20%; }
.sv-mail { position: relative; z-index: 3; max-width: var(--wrap); margin: 26px auto 0; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 22px; border-radius: 16px; background: #0B1530; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (min-width: 760px) { .sv-mail { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .sv-mail-tag { grid-column: 1 / -1; } }
.sv-mail-tag { margin: 0; font: 600 .75rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #FFB27A; }
.sv-mail-num { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.sv-mail-num strong { font: italic 900 2.6rem/1 "Barlow Condensed", var(--display); color: #fff; }
.sv-mail-num span { font-size: .95rem; color: #CBD5E1; max-width: 18ch; line-height: 1.25; }
.sv-mail-text { margin: 0; font-size: .95rem; line-height: 1.5; color: #CBD5E1; max-width: 60ch; }
.ab-seek { margin-top: clamp(40px, 6vw, 72px); padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: var(--navy); color: #fff; display: grid; gap: 16px; box-shadow: 8px 8px 0 var(--cobalt); }
.ab-seek-title { margin: 0; font: 400 clamp(2.8rem, 8vw, 6rem)/.9 var(--display); text-transform: uppercase; color: var(--sky); }
.ab-seek-targets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ab-seek-targets li { padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--navy); font: 800 clamp(1rem, 2vw, 1.3rem)/1 var(--tight); }
.ab-seek-text { margin: 0; max-width: 44ch; font-size: 1.12rem; line-height: 1.5; color: #E2EAFF; }
.ab-seek .hx-btn-main { justify-self: start; }
.v-mono, .v-hero-meta, .v-status, .hx-proof, .u-kicker, .u-num, .v-pill .v-pill-lang, .hr-title, .hr-note, .m-spot-hint, .hx-bill-btn, .sv-mail-tag { font-size: max(.78rem, 12.5px); }
.hr-note, .y-st, .m-spot-hint, .mf-eyebrow { font-size: max(.78rem, 12.5px); }
.y-st { color: #6F5F63; }
.y-step.is-now .y-st { color: #C42A22; }
.m-spot-hint { color: rgba(241, 230, 216, .8); }
.u-metrics span, .c-note, .r-hint, .y-detail, .fl-art-body span, .u-demo-tag { font-size: max(.82rem, 13px); }
.v-pill .v-pill-me { background: #C8231C; }
.hx-btn-main { background: #C8231C; border-color: #C8231C; }
.mib-spotify, .cs-mib .cs-btn { color: #145C28; }
.u-wrapped li:nth-child(1) { color: #001D4A; }
.u-nyc .u-kicker { color: #FF7A85; }
.v-phone-head small { color: #5B5B61; font-size: max(.78rem, 12.5px); }
.v-ticket-stub span, .v-ticket-role { font-size: max(.8rem, 12.5px); }
.v-ticket-stub span { color: #1A1A1A; }
.v-col-title, .v-copy, .v-foot-links a, .v-foot-links button, .v-clip-outlet { font-size: max(.78rem, 12.5px); }
.v-phone-av { background: linear-gradient(140deg, #B5201A, #E5322B); }
.hx-chip span { font-size: max(.75rem, 12px); }
.hx-photo { align-self: start; }
.mf-big { line-height: 1; }
.mf-big span { display: block; }
.mf-hl { text-decoration: none; }
.v-big { line-height: .98; }
.u-title { line-height: 1; }
.u-race .u-answer { line-height: 1.04; }
.st-q2 { line-height: 1.06; font-size: clamp(2.6rem, 6.6vw, 5.4rem); }
.v-contact-title { line-height: 1; }
@media (max-width: 999px) { .d-bib { display: none; } }
.v-status { position: relative; overflow: hidden; }
.v-status::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(47, 91, 255, .3) 50%, transparent 70%); transform: translateX(-120%); animation: vShine 3.8s ease-in-out infinite; }
@keyframes vShine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.hx-top-right { display: inline-flex; align-items: center; gap: 10px; }
.hx-social { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -14px 0; color: var(--ink); transition: color .2s, transform .25s var(--spring); }
.hx-social svg { width: 22px; height: 22px; }
.hx-social:hover { color: var(--red); transform: translateY(-2px) scale(1.1); }
.hx-top-right .hx-social:last-child { margin-right: -10px; }
@media (min-width: 960px) { .v-contact-inner { grid-template-columns: minmax(0, 1fr); } }
.v-contact-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); column-gap: 28px; }
.v-contact-note { display: inline-flex; align-items: flex-start; gap: 6px; }
.v-contact-note .scribble { width: 34px; height: 44px; flex: none; }
.panel-sheet.is-case { width: min(980px, 100%); padding: 0; }
.panel-sheet.is-case:has(.cs-sv) { background: #020817 !important; color: #F8FAFC; }
.panel-sheet.is-case:has(.cs-mib) { background: #F1E6D8 !important; color: #2A1710; }
.panel-sheet.is-case:has(.cs-fl) { background: #1F1E1D !important; color: #fff; }
.panel-sheet.is-case:has(.cs-hbd) { background: #fff !important; color: #1A1A1A; }
.panel-sheet.is-case:has(.cs-ry) { background: #4D3238 !important; color: #FFF8CA; }
.cs { --cs-accent: #E5322B; font-family: var(--sans, Inter, system-ui, sans-serif); line-height: 1.55; }
.cs h4, .cs-page .cs h3 { margin: 32px 0 12px; font: 600 .74rem/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--cs-accent); }
.cs p { margin: 0 0 12px; }
.cs-body { padding: 8px clamp(20px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.cs-kicker { font: 500 .72rem/1.4 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cs-a { margin: 0 0 14px; font: 800 clamp(1.6rem, 3.6vw, 2.6rem)/1.1 var(--tight, sans-serif); letter-spacing: -0.03em; max-width: 24ch; }
.cs-lead { font-size: 1.12rem; line-height: 1.5; max-width: 62ch; }
.cs-results { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.cs-results strong { display: block; font: 900 clamp(1.6rem, 3vw, 2.2rem)/1 var(--tight, sans-serif); letter-spacing: -0.03em; color: var(--cs-accent); }
.cs-results span { display: block; margin-top: 6px; font-size: .88rem; opacity: .85; }
.cs-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-skills li { padding: 8px 13px; border-radius: 999px; border: 1.5px solid currentColor; font: 600 .82rem/1 var(--tight, sans-serif); }
.cs-skills li::before { content: "✓ "; color: var(--cs-accent); }
.cs-learned { margin-top: 28px !important; padding: 18px 20px; border-radius: 14px; background: color-mix(in srgb, currentColor 8%, transparent); font-size: 1.04rem; }
.cs-learned span { display: block; margin-bottom: 6px; font: 600 .7rem/1 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--cs-accent); }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 26px; }
.cs-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--cs-accent); color: #fff !important; font: 700 .92rem/1 var(--sans, sans-serif); text-decoration: none; }
.cs-btn svg, .cs-link svg { width: 16px; height: 16px; }
.cs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: inherit; text-underline-offset: 4px; }
.cs-sv { --cs-accent: #FD6500; }
.cs-sv-top { padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px) 24px; background: radial-gradient(70% 80% at 90% 0%, rgba(253, 101, 0, .22), transparent 70%), linear-gradient(#001D4A, #020817); }
.cs-sv-logo { width: 190px; height: auto; margin-bottom: 18px; }
.cs-sv .cs-a { font: italic 900 clamp(2.2rem, 5vw, 3.6rem)/.92 "Barlow Condensed", var(--display, sans-serif); text-transform: uppercase; letter-spacing: 0; max-width: 20ch; }
.cs-sv .cs-lead { color: #CBD5E1; }
.cs-sv-stats { list-style: none; margin: 0; padding: 18px clamp(20px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: #FD6500; color: #fff; }
.cs-sv-stats strong { display: block; font: italic 900 clamp(1.8rem, 4vw, 2.8rem)/1 "Barlow Condensed", var(--display, sans-serif); }
.cs-sv-stats span { font-size: .82rem; }
@media (max-width: 560px) { .cs-sv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-sv-problem { margin-top: 26px; padding: 18px 20px; border-radius: 14px; background: #0B1530; box-shadow: inset 3px 0 0 #FD6500; }
.cs-sv-problem h4 { margin-top: 0; }
.cs-sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .cs-sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-sv-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 16px; border-radius: 14px; background: #0B1530; }
.cs-sv-steps b { font: italic 900 1.4rem/1 "Barlow Condensed", sans-serif; color: #FD6500; }
.cs-sv-steps span { font-size: .94rem; color: #E2E8F0; }
.cs-sv-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 26px; }
.cs-sv-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; }
@media (max-width: 560px) { .cs-sv-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-mib { --cs-accent: #B5441C; }
.cs-mib-mast { padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 48px) 20px; text-align: center; border-bottom: 4px double #B5441C; margin: 0 clamp(20px, 4vw, 48px); padding-inline: 0; }
.cs-mib-mast img { width: min(520px, 90%); height: auto; margin: 6px auto 0; display: block; }
.cs-mib .cs-a { font: 700 clamp(1.7rem, 3.8vw, 2.7rem)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -0.01em; max-width: 26ch; }
.cs-mib .cs-lead { font: italic 400 1.18rem/1.5 Georgia, serif; }
.cs-mib-cover { float: right; width: min(260px, 42%); margin: 6px 0 16px 24px; transform: rotate(2deg); }
.cs-mib-cover img { width: 100%; height: auto; display: block; border-radius: 3px; box-shadow: 0 20px 40px rgba(42, 23, 16, .3); }
.cs-mib-cover figcaption { margin-top: 8px; font: 500 .68rem/1.4 var(--mono, monospace); color: #B5441C; }
.cs-mib-text p { font: 400 1.04rem/1.7 Georgia, "Times New Roman", serif; }
.cs-mib-drop::first-letter { float: left; margin: 6px 10px 0 0; font: 900 4em/.8 var(--tight, sans-serif); color: #B5441C; }
.cs-mib-pull { clear: both; margin: 26px 0; padding: 18px 0; border-top: 1.5px solid #B5441C; border-bottom: 1.5px solid #B5441C; font: italic 400 clamp(1.4rem, 3vw, 2rem)/1.25 Georgia, serif; text-align: center; color: #B5441C; }
.cs-mib .cs-results strong { font-family: Georgia, serif; }
.cs-mib .cs-btn { background: #1DB954; color: #fff !important; }
@media (max-width: 560px) { .cs-mib-cover { float: none; width: 70%; margin: 10px auto 20px; } }
.cs-fl { --cs-accent: #E81D2E; }
.cs-fl-top { padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 48px) 28px; border-bottom: 6px solid #E81D2E; background: linear-gradient(115deg, #1F1E1D 62%, #2A2827 62%); }
.cs-fl-logo { width: min(320px, 70%); height: auto; }
.cs-fl-banner { margin: 22px 0 0 !important; font: italic 900 clamp(2.6rem, 8vw, 5.4rem)/.88 var(--tight, sans-serif); letter-spacing: -0.045em; text-transform: uppercase; }
.cs-fl-banner span { display: block; }
.cs-fl-banner span + span { color: #E81D2E; }
.cs-fl .cs-a { text-transform: uppercase; font-style: italic; }
.cs-fl-specs { width: 100%; margin: 18px 0 0; border-collapse: collapse; }
.cs-fl-specs th, .cs-fl-specs td { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .2); text-align: left; vertical-align: top; }
.cs-fl-specs th { width: 34%; font: 600 .7rem/1.2 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #FF6B78; }
.cs-fl-specs td { font: 700 1rem/1.3 var(--tight, sans-serif); }
.cs-fl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cs-fl-checks li { position: relative; padding: 12px 14px 12px 46px; background: #2A2827; }
.cs-fl-checks li::before { content: "✓"; position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; background: #E81D2E; color: #fff; font-weight: 800; transform: skewX(-10deg); }
.cs-fl-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-fl-articles a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; color: #1F1E1D; font: 700 .98rem/1.3 var(--tight, sans-serif); text-decoration: none; }
.cs-fl-articles svg { width: 16px; height: 16px; flex: none; color: #E81D2E; }
.cs-hbd { --cs-accent: #C8102E; }
.cs-hbd-top { padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 48px) 28px; background: linear-gradient(135deg, #B80C25, #DC2B2B); color: #fff; }
.cs-hbd-title { margin: 6px 0 0; font: 900 clamp(2.2rem, 6vw, 3.8rem)/.95 var(--tight, sans-serif); letter-spacing: -0.04em; }
.cs-hbd-top .cs-a { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.cs-hbd-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cs-hbd-table th, .cs-hbd-table td { padding: 12px 10px; border: 1px solid #E3E3E3; text-align: left; vertical-align: top; }
.cs-hbd-table thead th { background: #F4F4F4; font: 600 .74rem/1.2 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; }
.cs-hbd-table tbody th small { display: block; margin-top: 4px; font-weight: 400; font-size: .76rem; color: #777; }
.cs-hbd-table td { white-space: nowrap; color: #888; }
.cs-hbd-table td strong { font: 900 1.4rem/1 var(--tight, sans-serif); color: #C8102E; }
.cs-hbd-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.cs-hbd-list li::marker { color: #C8102E; font-weight: 800; }
@media (max-width: 560px) { .cs-hbd-table td { white-space: normal; } }
.cs-ry { --cs-accent: #FFF8CA; }
.cs-ry-top { padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) 10px; text-align: center; }
.cs-ry-logo { display: block; width: min(280px, 60%); height: auto; margin: 0 auto; }
.cs-ry .cs-a { margin-inline: auto; font-family: var(--hand, cursive); font-weight: 700; font-size: clamp(1.9rem, 4.4vw, 2.8rem); letter-spacing: 0; }
.cs-ry-grid { display: grid; gap: 24px; align-items: center; margin-top: 10px; }
@media (min-width: 720px) { .cs-ry-grid { grid-template-columns: 260px 1fr; } }
.cs-ry-hoodie { position: relative; width: 240px; aspect-ratio: 200 / 210; margin: 0 auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); }
.cs-ry-hoodie svg { width: 100%; height: 100%; display: block; }
.cs-ry-hoodie img { position: absolute; left: 25%; top: 22%; width: 50%; height: auto; }
.cs-ry-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.cs-ry-road { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cs-ry-road li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 248, 202, .08); border-left: 4px solid rgba(255, 248, 202, .25); }
.cs-ry-road li.is-done { border-left-color: #FFF8CA; }
.cs-ry-road li.is-now { border-left-color: #E5322B; background: rgba(229, 50, 43, .16); }
.cs-ry-road b { font: 700 1rem/1.2 var(--tight, sans-serif); }
.cs-ry-road em { font: 500 .66rem/1.4 var(--mono, monospace); font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.cs-ry-road span { grid-column: 1 / -1; font-size: .9rem; opacity: .85; }
.cs-ry .cs-btn { background: #FFF8CA; color: #4D3238 !important; }
.cs-ry .cs-results strong { color: #FFF8CA; }
.cs-story { margin-top: 18px; max-width: 66ch; }
.cs-story p { font-size: 1.02rem; }
.cs-sv-how { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .cs-sv-how { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cs-sv-how li { display: grid; gap: 6px; padding: 16px; border-radius: 14px; background: #0B1530; }
.cs-sv-how strong { font: italic 900 1.4rem/1 "Barlow Condensed", sans-serif; text-transform: uppercase; color: #FD6500; }
.cs-sv-how span { font-size: .92rem; color: #CBD5E1; }
.cs-sv-photos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cs-widget { max-width: 520px; margin: 0 auto; padding: 20px; border-radius: 24px; background: #fff; color: #111; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 50px rgba(0, 0, 0, .12); font-family: var(--ios, system-ui); --hbd: #C8102E; }
@media (max-width: 560px) { .cs-sv-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-story p, .cs-mib-text p { margin: 0 0 14px; }
.cs-ry-tagline { margin: 8px 0 0 !important; font: 700 clamp(1.3rem, 3vw, 1.8rem)/1.15 var(--hand, cursive); color: #FFF8CA; }
.cs-hbd-top { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); }
.cs-hbd-logo { flex: none; width: clamp(72px, 12vw, 110px); height: auto; padding: 6px; border-radius: 50%; background: #fff; }
@media (max-width: 560px) { .cs-hbd-top { flex-direction: column; align-items: flex-start; } }
.cs-mib-end { clear: both; }
.cs-mib-note { margin: 10px 0 0 !important; font: italic 400 .95rem/1.4 Georgia, serif; color: #B5441C; }
.panel-sheet.is-case:has(.cs-cc) { background: #F4F1EA !important; color: #1A1A1A; }
.cs-cc { --cs-accent: #1A1A1A; }
.cs-cc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(20px, 4vw, 40px); align-items: start; }
@media (min-width: 760px) { .cs-cc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; } }
.cs-cc-poster { margin: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); background: #fff; }
.cs-cc-poster img { display: block; width: 100%; height: auto; }
.cs-cc-text .cs-a { font-size: clamp(1.3rem, 2.6vw, 1.8rem); max-width: none; }
.cs-cc-text p { margin: 0 0 14px; }
.cs-page { min-height: 100vh; padding: 76px 0 0; background: var(--paper); color: var(--ink); }
body:has(.cs-page .cs-sv) { background: #020817; }
body:has(.cs-page .cs-mib) { background: #F1E6D8; }
body:has(.cs-page .cs-fl) { background: #1F1E1D; }
body:has(.cs-page .cs-hbd) { background: #fff; }
body:has(.cs-page .cs-ry) { background: #4D3238; }
body:has(.cs-page .cs-cc) { background: #F4F1EA; }
.cs-page:has(.cs-sv) { background: #020817; color: #F8FAFC; }
.cs-page:has(.cs-mib) { background: #F1E6D8; color: #2A1710; }
.cs-page:has(.cs-fl) { background: #1F1E1D; color: #fff; }
.cs-page:has(.cs-hbd) { background: #fff; color: #1A1A1A; }
.cs-page:has(.cs-ry) { background: #4D3238; color: #FFF8CA; }
.cs-page:has(.cs-cc) { background: #F4F1EA; color: #1A1A1A; }
.cs-page a { text-underline-offset: 3px; }
.cs-holder { max-width: 980px; margin: 0 auto; }
.cs-back-wrap { max-width: 980px; margin: 0 auto; padding: 8px clamp(20px, 4vw, 48px) 0; }
.cs-back { display: inline-flex; align-items: center; min-height: 44px; font: 600 .86rem/1 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: inherit; opacity: .85; text-decoration: none; }
.cs-back:hover { opacity: 1; text-decoration: underline; }
.cs-more, .cs-foot { max-width: 980px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.cs-more { padding-top: 12px; }
.cs-more p { margin: 0 0 10px; }
.cs-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid currentColor; color: inherit; font: 600 .86rem/1 var(--tight, sans-serif); text-decoration: none; }
.cs-more a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.cs-foot { padding-top: 40px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); font-size: .92rem; }
.cs-foot p { margin: 0 0 8px; }
.cs-foot a, .cs-legal { color: inherit; }
.cs-legal { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
@media (min-width: 760px) { .cs-page { padding-top: 92px; } .cs-foot { padding-bottom: 56px; } }