/* VULOIR 1.3 — product-first. One palette, three surfaces, no runtime dependencies. */
:root {
  color-scheme: dark;
  --dark-bg: #1b1f25; --dark-studios: #1b1f25;
  --dark-surface: #222831; --dark-card: #2c333d;
  --dark-text: #f4f1e9; --dark-muted: #c1c7d0; --dark-faint: #b5beca;
  --dark-line: #46505d; --dark-control-line: #8795a7;
  --green: #c7f36b; --coral: #ff805c; --app-accent: #ffb080;
  --green-hover: #d8ff8e; --coral-hover: #ff9577;
  --button-ink: #1b1f25; --cover-ink: #f4f1e9; --cover-label-bg: #20262b;
  --media-art-center: #49342f; --media-art-edge: #282a31; --media-art-line: #f0aa84;
  --bg: var(--dark-bg); --surface: var(--dark-surface); --surface-raised: var(--dark-card);
  --text: var(--dark-text); --muted: var(--dark-muted); --faint: var(--dark-faint);
  --line: var(--dark-line); --control-line: var(--dark-control-line);
  --green-ink: var(--green); --coral-ink: var(--coral); --accent: var(--green);
  --focus: var(--green); --title-secondary: #cbd4cb; --brand-ink: var(--green);
  --draft-bg: #34372d; --draft-ink: #dce2cc; --draft-line: #65725a;
  --radius: 8px; --radius-large: 12px; --radius-small: 4px;
  --max-width: 1248px; --gutter: 64px;
  --font: Arial, Helvetica, system-ui, sans-serif;
  --duration: 180ms; --ease: cubic-bezier(.2,.8,.2,1);
  --section-space: 80px; --card-padding: 28px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
body[data-theme="media"], .media-section { --accent: var(--coral); --focus: var(--coral); }
::selection { background: var(--green); color: var(--button-ink); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; border-radius: var(--radius-small); }
main:focus { outline: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.045em; font-weight: 500; overflow-wrap: anywhere; }
h1 { font-size: clamp(42px,5vw,72px); }
h2 { font-size: clamp(30px,3.2vw,44px); }
h3 { font-size: 30px; }
p { color: var(--muted); }
ul { margin: 0; }
.shell { width: min(calc(100% - var(--gutter) * 2), var(--max-width)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 110; padding: 12px 20px; background: var(--green); color: var(--button-ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.arrow { width: 20px; height: 20px; flex: none; vertical-align: middle; transition: transform var(--duration) var(--ease); }
a:is(:hover,:focus-visible) > .arrow { transform: translate(2px,-2px); }
.dot { display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; }
.dot.green { background: var(--green); }
.dot.coral { background: var(--coral); }
.green-text { color: var(--green-ink); }
.coral-text { color: var(--coral-ink); }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .13em; line-height: 1.65; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 20px; min-height: 52px; max-width: 100%; border: 1px solid transparent; border-radius: var(--radius-small); font-size: 14px; font-weight: 600; line-height: 1.5; transition: background var(--duration),border-color var(--duration),transform var(--duration); }
.button-primary { background: var(--green); color: var(--button-ink); }
.button-primary:is(:hover,:focus-visible) { background: var(--green-hover); transform: translateY(-2px); }
.button-coral { background: var(--coral); color: var(--button-ink); }
.button-coral:is(:hover,:focus-visible) { background: var(--coral-hover); }
.button-ghost { background: transparent; border-color: var(--control-line); }
.button-ghost:is(:hover,:focus-visible) { background: var(--surface-raised); border-color: var(--text); }
.text-link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: 14px; line-height: 1.5; }
.text-link:is(:hover,:focus-visible) { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
/* Global chrome: compact, opaque, keyboard-first. */
.preview-banner { padding: 5px 20px; min-height: 29px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 10px; line-height: 1.8; }
.preview-banner span:first-child { margin-right: 10px; letter-spacing: .1em; font-weight: 700; }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; gap: 28px; align-items: center; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 23px; font-weight: 750; letter-spacing: .055em; line-height: 1; flex: none; }
.brand-mark { width: 28px; height: 31px; color: var(--brand-ink); }
.brand-period { color: var(--brand-ink); }
.main-nav { display: flex; align-items: center; gap: 3px; margin-inline: auto; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; border-radius: var(--radius-small); font-size: 13px; color: var(--muted); }
.main-nav a:is(:hover,:focus-visible) { color: var(--text); background: var(--surface); }
.main-nav a[aria-current] { background: var(--surface-raised); color: var(--text); }
.header-contact { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; font-size: 13px; }
.header-contact .arrow { width: 17px; height: 17px; }
.menu-button { display: none; width: 44px; height: 44px; background: transparent; padding: 12px; border: 1px solid var(--control-line); border-radius: var(--radius-small); }
.menu-button span { display: block; background: var(--text); height: 1px; margin-block: 6px; }
.mobile-menu { width: calc(100% - 28px); max-width: 520px; max-height: 90dvh; border: 1px solid var(--control-line); border-radius: var(--radius); padding: 26px; background: var(--surface); color: var(--text); }
.mobile-menu::backdrop { background: #0d1219c9; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .12em; }
.menu-close { width: 44px; height: 44px; border: 1px solid var(--control-line); border-radius: var(--radius-small); font-size: 30px; line-height: 1; background: transparent; flex: none; }
.mobile-menu nav { display: flex; flex-direction: column; padding-block: 22px; }
.mobile-menu nav a { border-bottom: 1px solid var(--line); padding-block: 12px; font-size: 28px; letter-spacing: -.03em; }
.mobile-menu nav a[aria-current] { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; }
.mobile-menu p { font-size: 13px; }
.menu-open { overflow: hidden; }
/* Compact editorial hero: the V is a signature, not the entire first screen. */
.hero { position: relative; display: grid; grid-template-columns: minmax(0,2.18fr) minmax(0,1fr); gap: 12px; align-items: center; padding-block: 60px 42px; }
.hero-copy { min-width: 0; position: relative; z-index: 1; }
.hero-eyebrow { margin-bottom: 24px; font-size: 11px; }
.hero h1 { font-size: clamp(44px,4.92vw,71px); line-height: 1.06; letter-spacing: -.06em; }
.hero h1 > span { display: block; color: var(--title-secondary); }
.hero-description { max-width: 520px; font-size: 16px; line-height: 1.8; margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-visual { position: relative; align-self: stretch; display: grid; align-content: center; justify-items: center; }
.hero-sculpture { display: block; width: 100%; height: auto; max-height: 345px; }
.hero-art-caption { display: block; text-align: center; margin-top: -4px; font-size: 9px; letter-spacing: .12em; color: var(--muted); }
.project-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.project-shortcut { display: flex; min-width: 0; align-items: center; gap: 16px; padding: 20px 24px; border-radius: var(--radius-small); transition: background var(--duration); }
.project-shortcut + .project-shortcut { border-left: 1px solid var(--line); }
.project-shortcut:is(:hover,:focus-visible) { background: var(--surface-raised); }
.shortcut-art { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border: 1px solid var(--line); border-radius: 10px; font-size: 24px; font-weight: 750; letter-spacing: -.055em; background: var(--bg); }
.shortcut-art.green { color: var(--green); }
.shortcut-art.coral { color: var(--app-accent); }
.orbit-symbol { position: relative; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; }
.orbit-symbol::before { content: ''; position: absolute; inset: 5px -7px; border: 1px solid currentColor; border-radius: 50%; transform: rotate(-35deg); }
.shortcut-copy { min-width: 0; }
.shortcut-copy strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 600; }
.shortcut-copy > span { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }
.project-shortcut > .arrow { width: 16px; height: 16px; margin-left: auto; color: var(--muted); }
/* Product showcase. Presentation order comes from content, not product names. */
.section { padding-block: var(--section-space) 0; }
.section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 26px; }
.section-heading .eyebrow { margin-bottom: 16px; }
.section-heading h2 { font-size: clamp(30px,3vw,42px); }
.section-no { font-size: 11px; color: var(--faint); margin-right: 6px; }
.section-intro { margin-top: -12px; margin-bottom: 28px; font-size: 15px; }
.section-heading > a { flex: none; }
.project-grid, .channel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.project-card { min-width: 0; }
.project-card-link { display: flex; flex-direction: column; height: 100%; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-large); transition: border-color var(--duration),transform var(--duration); }
.project-card-link:is(:hover,:focus-visible) { border-color: var(--green); transform: translateY(-3px); }
.project-card-app .project-card-link:is(:hover,:focus-visible) { border-color: var(--app-accent); }
.project-cover { position: relative; aspect-ratio: 1.8; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; border-radius: 11px 11px 0 0; }
.cover-svg, .cover-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-cover > .cover-svg, .project-cover > img { transition: transform 450ms var(--ease); }
.project-card-link:is(:hover,:focus-visible) .project-cover > .cover-svg, .project-card-link:is(:hover,:focus-visible) .project-cover > img { transform: scale(1.025); }
.cover-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; position: absolute; inset: 18px 20px auto; color: var(--cover-ink); font-size: 9px; letter-spacing: .12em; line-height: 1.6; }
.cover-top > span { background: var(--cover-label-bg); padding: 3px 7px; border-radius: 3px; max-width: 100%; overflow-wrap: anywhere; }
.project-art-title { position: absolute; top: 50%; left: 20px; right: 20px; transform: translateY(-50%); text-align: center; font-size: clamp(34px,4vw,58px); font-weight: 750; letter-spacing: -.05em; line-height: 1; color: var(--cover-ink); }
.art-sidera { color: var(--app-accent); letter-spacing: .035em; font-size: clamp(34px,4.5vw,64px); font-weight: 600; }
.art-football { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.football-letter { display: grid; place-items: center; width: clamp(80px,8.2vw,118px); height: clamp(80px,8.2vw,118px); background: var(--green); color: #18261a; border-radius: 50%; font-size: clamp(54px,5.5vw,79px); font-weight: 850; letter-spacing: -.1em; padding-right: 6px; }
.art-wordmark { font-size: 25px; line-height: 1.1; font-weight: 700; }
.concept-caption { position: absolute; bottom: 15px; left: 18px; max-width: calc(100% - 36px); padding: 3px 7px; border-radius: 3px; background: var(--cover-label-bg); color: var(--cover-ink); font-size: 9px; line-height: 1.65; letter-spacing: .025em; }
.project-meta { padding: var(--card-padding); display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 24px; min-width: 0; }
.project-meta-copy { min-width: 0; }
.project-meta .eyebrow { font-size: 10px; }
.project-meta h3 { font-size: 32px; margin-top: 9px; letter-spacing: -.04em; }
.project-description { font-size: 15px; line-height: 1.7; margin-top: 10px; }
.app-highlights { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; padding: 0; }
.app-highlights li { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-small); padding: 4px 8px; line-height: 1.6; max-width: 100%; overflow-wrap: anywhere; }
.project-meta-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); padding-top: 18px; }
.status-badge { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 5px 8px; font-size: 10px; line-height: 1.55; color: var(--green); border: 1px solid var(--control-line); border-radius: var(--radius-small); max-width: 100%; }
.status-badge.draft { background: var(--draft-bg); color: var(--draft-ink); border-color: var(--draft-line); }
.project-card-cta { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--green); }
.project-card-cta .arrow { width: 16px; height: 16px; }
.app-card-cta { color: var(--app-accent); }
.project-card-link:is(:hover,:focus-visible) .project-card-cta { text-decoration: underline; text-underline-offset: 5px; }
.project-card-wide { grid-column: 1 / -1; }
.project-card-wide .project-card-link { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
.project-card-wide .project-cover { aspect-ratio: auto; min-height: 276px; border-radius: 11px 0 0 11px; border-bottom: 0; border-right: 1px solid var(--line); }
.project-card-wide .project-cover > svg, .project-card-wide .project-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.project-card-wide .project-meta { padding: 30px 36px; gap: 26px; justify-content: center; }
.empty-studios { display: flex; align-items: center; gap: 30px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.empty-brand { color: var(--green); width: 72px; flex: none; }
.empty-studios > div:not(.empty-brand) { min-width: 0; }
.empty-studios h3, .empty-studios h2 { font-size: 28px; margin-top: 12px; }
.empty-studios p:not(.eyebrow) { font-size: 15px; margin-top: 12px; max-width: 530px; }
.empty-studios > .text-link { margin-left: auto; flex: none; }
/* Media stays in the same palette. No empty screen-sized illustration. */
.media-section { padding-bottom: 0; }
.media-empty { display: flex; align-items: center; gap: 30px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.media-empty-icon { width: 100px; height: 108px; border-radius: var(--radius); flex: none; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--coral); background: #352d2c; border: 1px solid #65504a; }
.media-empty-icon > svg { width: 40px; height: 40px; }
.media-wave { display: flex; align-items: center; gap: 3px; height: 18px; }
.media-wave i { width: 2px; height: 7px; background: var(--coral); }
.media-wave i:nth-child(3n) { height: 18px; }
.media-wave i:nth-child(3n+1) { height: 12px; }
.media-empty-copy { min-width: 0; flex: 1; }
.media-empty h3, .media-empty h2 { font-size: clamp(26px,2.35vw,34px); margin-top: 12px; }
.media-empty p:not(.eyebrow) { font-size: 15px; max-width: 535px; margin-top: 14px; }
.media-empty > .button { flex: none; }
.coming-line { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.6; color: var(--muted); margin-top: 20px; }
.channel-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface-raised); overflow: hidden; }
.channel-cover { position: relative; aspect-ratio: 1.9; overflow: hidden; border-bottom: 1px solid var(--line); }
.channel-info { padding: var(--card-padding); }
.channel-logo { margin-bottom: 18px; border-radius: 9px; }
.channel-info h3 { font-size: 28px; margin-top: 12px; }
.channel-info > p:not(.eyebrow) { margin-block: 16px; font-size: 15px; }
.channel-info .text-link { color: var(--coral); }
.brand-note { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) auto; align-items: center; gap: 40px; border-top: 1px solid var(--line); margin-top: 72px; padding-block: 36px 62px; }
.brand-note h2 { font-size: 28px; margin-top: 12px; }
.brand-note > p { font-size: 14px; }
/* Inner pages share the same spacing and component system. */
.page-hero { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding-block: 70px 48px; }
.page-hero-main { min-width: 0; }
.page-hero .eyebrow { margin-bottom: 24px; }
.page-hero h1 { font-size: clamp(42px,4.8vw,68px); line-height: 1.08; }
.page-hero h1 span { color: var(--title-secondary); }
.lead { max-width: 620px; margin-top: 22px; font-size: 17px; line-height: 1.8; }
.page-hero-symbol { width: 110px; flex: none; color: var(--green); }
.studios-symbol { transform: rotate(-8deg); }
.subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.subsection-heading h2 { font-size: 26px; }
.small-note { color: var(--muted); font-size: 11px; }
.project-list-section, .media-list-section { border-top: 1px solid var(--line); padding-top: 34px; }
.studios-note { display: flex; align-items: center; gap: 10px; padding-block: 32px 64px; }
.studios-note p { font-size: 13px; }
.media-page-sign { width: 100px; height: 100px; flex: none; border-radius: 24px; color: var(--coral); border: 1px solid #65504a; background: #352d2c; display: grid; place-items: center; }
.media-page-sign > svg { width: 56px; height: 56px; }
.media-crosslink { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 36px 70px; }
.media-crosslink p { font-size: 14px; }
.about-mark { width: 115px; flex: none; color: var(--green); }
.about-intro { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; padding-block: 32px 48px; border-top: 1px solid var(--line); }
.about-intro h2 { font-size: 30px; }
.about-intro p { font-size: 16px; }
.about-intro p + p { margin-top: 16px; }
.about-divisions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.about-divisions > a { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); min-width: 0; transition: border-color var(--duration); }
.about-divisions > a:is(:hover,:focus-visible) { border-color: var(--green); }
.about-divisions > a:last-child:is(:hover,:focus-visible) { border-color: var(--coral); }
.about-divisions h2 { font-size: 36px; margin-top: 22px; }
.about-divisions p { font-size: 15px; margin-top: 16px; }
.about-divisions .text-link { margin-top: 22px; }
.contact-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 48px 68px; }
.contact-band h2 { font-size: 30px; margin-top: 10px; }
.contact-panel { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 40px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-large); background: var(--surface); }
.contact-illustration { width: 115px; height: 115px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--green); }
.contact-illustration .arrow { width: 50px; height: 50px; }
.contact-panel h2 { font-size: 32px; margin-top: 14px; }
.contact-panel p:not(.eyebrow) { font-size: 15px; margin-top: 14px; max-width: 580px; }
.contact-panel .text-link { margin-top: 16px; }
.email-link { display: flex; gap: 16px; align-items: center; font-size: clamp(20px,2.6vw,36px); color: var(--green); overflow-wrap: anywhere; margin-top: 20px; }
.social-links { display: flex; flex-wrap: wrap; gap: 20px; }
.contact-footnote { display: flex; gap: 10px; align-items: center; padding-block: 28px 66px; }
.contact-footnote p { font-size: 13px; }
/* Product detail: identification and illustration visible together. */
.detail-hero { padding-top: 28px; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; font-size: 13px; color: var(--muted); }
.back-link:is(:hover,:focus-visible) { color: var(--green); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: 44px; align-items: center; margin-top: 24px; }
.detail-title { min-width: 0; }
.detail-title h1 { font-size: clamp(40px,4.6vw,66px); margin-top: 18px; }
.detail-title .lead { font-size: 21px; line-height: 1.5; margin-top: 20px; }
.detail-labels { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.platform-label { font-size: 12px; color: var(--muted); }
.detail-cover { position: relative; aspect-ratio: 1.55; border: 1px solid var(--line); border-radius: var(--radius-large); overflow: hidden; }
.detail-cover .football-letter { width: 116px; height: 116px; font-size: 78px; }
.detail-cover .project-art-title { font-size: 48px; }
.detail-body { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 64px; align-items: start; margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line); }
.detail-about h2 { font-size: 34px; margin-block: 14px 22px; }
.detail-about > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; }
.detail-about h3 { font-size: 24px; margin-block: 28px 16px; }
.features-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
.features-list li { border-left: 2px solid var(--app-accent); padding: 8px 14px; background: var(--surface); }
.draft-note { border: 1px solid var(--draft-line); border-radius: var(--radius); padding: 18px 20px; background: var(--draft-bg); margin-top: 28px; }
.draft-note strong { color: var(--draft-ink); font-size: 13px; font-weight: 600; }
.draft-note p { color: var(--draft-ink); font-size: 12px; line-height: 1.8; margin-top: 7px; }
.project-facts { padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.project-facts dl { margin: 16px 0 0; }
.project-facts dl > div { padding-block: 15px; border-top: 1px solid var(--line); }
.project-facts dt { font-size: 10px; color: var(--muted); letter-spacing: .1em; }
.project-facts dd { margin: 6px 0 0; font-size: 16px; overflow-wrap: anywhere; }
.project-facts .button { width: 100%; margin-top: 18px; }
.project-facts .text-link { display: flex; margin-top: 10px; }
.detail-end { padding-block: 28px 60px; }
.detail-app .detail-title .eyebrow { color: var(--app-accent); }
.screenshot-gallery { display: flex; flex-wrap: wrap; align-items: start; gap: 20px; margin-top: 24px; }
.screenshot-gallery figure { width: min(100%,260px); }
.screenshot-gallery img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.not-found { padding-block: 60px 80px; }
.error-number { display: block; font-size: clamp(100px,16vw,210px); line-height: 1.15; letter-spacing: -.065em; }
.error-number span { color: var(--green); }
.not-found h1 { font-size: 38px; }
.not-found p:not(.eyebrow) { margin-block: 16px 24px; }
/* A quiet footer, rather than a second oversized hero. */
.site-footer { background: #15181d; border-top: 1px solid var(--line); padding-top: 38px; }
.footer-top { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 28px; align-items: start; padding-bottom: 26px; }
.footer-identity > p { font-size: 12px; margin-top: 8px; }
.footer-top > p { font-size: 13px; padding-top: 7px; }
.footer-top nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; justify-self: end; }
.footer-top nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); font-size: 13px; }
.footer-top a:is(:hover,:focus-visible) { color: var(--green); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); min-height: 68px; padding-block: 12px; color: var(--faint); font-size: 11px; }
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: 24px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; }
.footer-bottom a:is(:hover,:focus-visible) { color: var(--green); }
.footer-bottom .arrow { width: 14px; height: 14px; }
@media (max-width: 1100px) {
 :root { --gutter: 40px; --section-space: 64px; --card-padding: 24px; }
 .header-inner { gap: 18px; }
 .main-nav a { padding-inline: 12px; }
 .hero { grid-template-columns: minmax(0,2.25fr) minmax(0,1fr); padding-top: 46px; }
 .hero h1 { font-size: clamp(44px,4.9vw,56px); }
 .hero-art-caption { font-size: 8px; }
 .hero-description { font-size: 15px; }
 .project-shortcut { padding: 18px 16px; gap: 12px; }
 .shortcut-copy strong { font-size: 15px; }
 .shortcut-copy > span { font-size: 11px; }
 .project-shortcut > .arrow { display: none; }
 .media-empty { flex-wrap: wrap; gap: 24px; }
 .media-empty > .button { margin-left: 124px; }
 .brand-note { grid-template-columns: 1fr 1.4fr; gap: 24px; }
 .brand-note > .text-link { grid-column: 2; }
 .detail-body { gap: 36px; }
 .detail-hero-grid { gap: 30px; }
 .project-card-wide .project-meta { padding: 26px; }
}
@media (min-width: 768px) and (max-width: 900px) {
 .header-contact { display: none; }
 .main-nav { margin-right: 0; }
 .hero { grid-template-columns: 1fr; padding-right: 140px; }
 .hero-visual { width: 142px; position: absolute; right: 0; top: 45px; }
 .hero-art-caption { display: none; }
 .hero h1 { font-size: 48px; }
 .shortcut-art { width: 37px; height: 37px; font-size: 21px; }
 .project-shortcut { padding-inline: 12px; }
 .project-meta h3 { font-size: 27px; }
 .media-empty > .button { margin-left: 124px; }
}
@media (max-width: 767px) {
 :root { --gutter: 22px; --section-space: 48px; --card-padding: 22px; }
 .preview-banner { font-size: 9px; line-height: 1.6; padding: 5px 12px; }
 .preview-banner > span { display: block; }
 .preview-banner span:first-child { margin-right: 0; }
 .header-inner { min-height: 70px; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
 .brand { font-size: 22px; }
 .header-contact { display: none; }
 .main-nav { width: 100%; flex-wrap: wrap; gap: 0; padding-bottom: 10px; }
 .main-nav a { font-size: 12px; padding-inline: 10px; }
 .js .main-nav { display: none; }
 .js .menu-button { display: block; }
 .hero { display: block; padding: 28px 0 28px; }
 .hero-eyebrow { max-width: calc(100% - 62px); margin-bottom: 28px; min-height: 24px; font-size: 9px; gap: 8px; }
 .hero h1 { font-size: clamp(39px,7.9vw,57px); line-height: 1.08; letter-spacing: -.055em; }
 .hero-description { font-size: 14px; line-height: 1.8; margin-top: 20px; max-width: 470px; }
 .hero-actions { gap: 10px; margin-top: 22px; }
 .hero-actions .button { flex: 1; padding: 13px 12px; font-size: 12px; gap: 10px; }
 .hero-actions .arrow { width: 17px; height: 17px; }
 .hero-visual { width: 64px; position: absolute; top: 0; right: 0; pointer-events: none; }
 .hero-art-caption { display: none; }
 .hero-sculpture { width: 64px; }
 .project-strip { grid-template-columns: 1fr; }
 .project-shortcut { gap: 13px; padding: 13px 16px; }
 .project-shortcut + .project-shortcut { border-left: 0; border-top: 1px solid var(--line); }
 .shortcut-art { width: 37px; height: 37px; border-radius: 8px; font-size: 21px; }
 .shortcut-copy strong { font-size: 14px; line-height: 1.4; }
 .shortcut-copy > span { font-size: 11px; }
 .project-shortcut > .arrow { display: block; }
 .orbit-symbol { width: 19px; height: 19px; }
 .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
 .section-heading .eyebrow { margin-bottom: 14px; font-size: 10px; }
 .section-heading h2 { font-size: 30px; }
 .section-heading > .text-link { min-height: 32px; font-size: 13px; }
 .section-intro { font-size: 13px; margin-top: -8px; margin-bottom: 22px; }
 .project-grid, .channel-grid { grid-template-columns: 1fr; gap: 20px; }
 .project-card-wide { grid-column: auto; }
 .project-card-wide .project-card-link { display: flex; }
 .project-card-wide .project-cover { aspect-ratio: 1.65; min-height: 0; border-radius: 11px 11px 0 0; border-right: 0; border-bottom: 1px solid var(--line); }
 .project-card-wide .project-meta { padding: var(--card-padding); }
 .project-cover { aspect-ratio: 1.65; }
 .cover-top { inset: 12px 12px auto; font-size: 8px; }
 .project-art-title { font-size: 38px; }
 .art-sidera { font-size: 40px; }
 .art-football { gap: 8px; }
 .football-letter { width: 78px; height: 78px; font-size: 53px; }
 .art-wordmark { font-size: 20px; }
 .concept-caption { left: 12px; bottom: 10px; max-width: calc(100% - 24px); font-size: 8px; padding: 3px 5px; }
 .project-meta { gap: 20px; }
 .project-meta h3 { font-size: 28px; }
 .project-meta .eyebrow { font-size: 9px; }
 .project-description { font-size: 14px; }
 .project-meta-bottom { gap: 13px; }
 .project-card-cta { font-size: 12px; gap: 9px; }
 .status-badge { font-size: 9px; }
 .app-highlights { margin-top: 15px; }
 .app-highlights li { font-size: 10px; }
 .media-empty { padding: 24px; gap: 20px; display: grid; grid-template-columns: 1fr; }
 .media-empty-icon { width: 68px; height: 68px; gap: 0; border-radius: 8px; }
 .media-empty-icon > svg { width: 32px; height: 32px; }
 .media-wave { height: 15px; }
 .media-wave i { transform: scaleY(.75); }
 .media-empty h3, .media-empty h2 { font-size: 27px; margin-top: 10px; }
 .media-empty p:not(.eyebrow) { font-size: 14px; margin-top: 12px; }
 .media-empty > .button { margin-left: 0; justify-self: start; font-size: 13px; }
 .channel-info h3 { font-size: 25px; }
 .channel-info > p:not(.eyebrow) { font-size: 14px; }
 .brand-note { grid-template-columns: 1fr; margin-top: 40px; padding-block: 28px 42px; gap: 20px; }
 .brand-note > .text-link { grid-column: 1; }
 .brand-note h2 { font-size: 28px; }
 .brand-note > p { font-size: 14px; }
 .page-hero { padding-block: 36px 34px; gap: 16px; }
 .page-hero h1 { font-size: 42px; }
 .page-hero .eyebrow { font-size: 10px; margin-bottom: 20px; }
 .lead { font-size: 15px; margin-top: 20px; }
 .desktop-break { display: none; }
 .page-hero-symbol, .about-mark, .media-page-sign { display: none; }
 .subsection-heading { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 22px; }
 .subsection-heading h2 { font-size: 24px; }
 .small-note { font-size: 10px; }
 .project-list-section, .media-list-section { padding-top: 26px; }
 .studios-note { align-items: flex-start; padding-block: 26px 40px; }
 .studios-note .dot { margin-top: 8px; }
 .studios-note p { font-size: 12px; }
 .empty-studios { flex-wrap: wrap; padding: 26px; gap: 22px; }
 .empty-brand { width: 54px; }
 .empty-studios h2,.empty-studios h3 { font-size: 27px; }
 .empty-studios p:not(.eyebrow) { font-size: 14px; }
 .empty-studios > .text-link { margin-left: 0; flex: initial; }
 .media-crosslink { padding-block: 26px 42px; gap: 10px; align-items: flex-start; flex-direction: column; }
 .about-intro { grid-template-columns: 1fr; gap: 22px; padding-block: 28px; }
 .about-intro h2 { font-size: 27px; }
 .about-intro p { font-size: 15px; }
 .about-divisions { grid-template-columns: 1fr; gap: 18px; }
 .about-divisions > a { padding: 26px; }
 .about-divisions h2 { font-size: 33px; }
 .contact-band { flex-direction: column; align-items: flex-start; padding-block: 32px 44px; }
 .contact-band h2 { font-size: 28px; }
 .contact-panel { grid-template-columns: 1fr; padding: 26px; gap: 24px; }
 .contact-illustration { width: 64px; height: 64px; }
 .contact-illustration .arrow { width: 30px; height: 30px; }
 .contact-panel h2 { font-size: 28px; }
 .contact-panel p:not(.eyebrow) { font-size: 14px; }
 .contact-footnote { padding-block: 24px 42px; }
 .detail-hero { padding-top: 18px; }
 .detail-hero-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 20px; }
 .detail-title h1 { font-size: 43px; margin-top: 16px; }
 .detail-title .eyebrow { font-size: 10px; }
 .detail-title .lead { font-size: 19px; margin-top: 18px; }
 .detail-labels { margin-top: 18px; }
 .detail-cover { aspect-ratio: 1.45; }
 .detail-cover .project-art-title { font-size: 37px; }
 .detail-cover .football-letter { width: 82px; height: 82px; font-size: 57px; }
 .detail-body { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; padding-top: 28px; }
 .detail-about h2 { font-size: 29px; }
 .detail-about > p:not(.eyebrow) { font-size: 15px; }
 .features-list { grid-template-columns: 1fr; gap: 10px; }
 .project-facts { padding: 24px; }
 .detail-end { padding-block: 22px 38px; }
 .site-footer { padding-top: 28px; }
 .footer-top { grid-template-columns: 1fr; gap: 20px; padding-bottom: 22px; }
 .footer-top > p { display: none; }
 .footer-top nav { justify-self: start; gap: 0 35px; }
 .footer-bottom { align-items: flex-start; flex-direction: column; gap: 0; padding-block: 16px; font-size: 10px; }
 .footer-bottom > div { gap: 15px; }
 .footer-top nav a { min-height: 44px; }
 .not-found { padding-block: 35px 55px; }
 .not-found h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
 *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
@media print {
 body { background: white; color: black; }
 p { color: #333; }
 .site-header,.site-footer,.preview-banner,.mobile-menu,.hero-visual { display: none; }
 .shell { width: 100%; }
 .hero { display: block; }
 a { text-decoration: underline; }
}