/* Smalti site. Dark tokens are copied from Sources/Smalti/Theme.swift. */

:root {
  color-scheme: dark;
  /* App tokens (Theme.swift) */
  --canvas: #15171b;
  --panel: #1a1d22;
  --panel-hi: #20242a;
  --line: #2a2e36;
  --fg: #dcdfe5;
  --mut: #868d9b;
  --dim: #5b6170;
  --accent: #6fb7a8;
  --warn: #d9a54a;
  --live: #6bc77d;
  --dot: #2c313a;
  --term: #121418;

  /* Site roles */
  --bg: var(--canvas);
  --surface: var(--panel);
  --surface-hi: var(--panel-hi);
  --border: var(--line);
  --text: var(--fg);
  --text-2: var(--mut);
  --link: var(--accent);
  --btn-bg: var(--accent);
  --btn-fg: #0e1715;
  --grid-dot: var(--dot);
  --code-bg: var(--term);
  --warn-text: var(--warn);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1120px;
  --radius: 9px;
}

/* Light mode: a warm off-white. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f6f5f1;
    --surface: #ffffff;
    --surface-hi: #efede8;
    --border: #dcd9d1;
    --text: #1a1d22;
    --text-2: #50565f;
    --link: #2a7466;
    --btn-bg: #2a7466;
    --btn-fg: #ffffff;
    --grid-dot: #d8d5cd;
    --code-bg: #efede8;
    --warn-text: #8a6114;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-hi: #efede8;
  --border: #dcd9d1;
  --text: #1a1d22;
  --text-2: #50565f;
  --link: #2a7466;
  --btn-bg: #2a7466;
  --btn-fg: #ffffff;
  --grid-dot: #d8d5cd;
  --code-bg: #efede8;
  --warn-text: #8a6114;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.08rem; }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--mono); font-size: 0.9em; }
:not(pre) > code {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface);
  text-align: center;
  white-space: nowrap;
}
pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.55;
  margin: 0 0 1.2em;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: 6px;
}
.skip:focus { top: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-weight: 650; font-size: 1.05rem; margin-right: auto; }
/* Logo variants (site.config.json "logo", or ?logo= to preview). */
[data-logo="grid"] { --logo-mark32: url("../logo/grid/brand/mark-32.svg"); --logo-lockup: url("../logo/grid/brand/lockup.svg"); --logo-wordmark: url("../logo/grid/brand/wordmark.svg"); --logo-detail: url("../logo/grid/brand/mark-detail.svg"); }
/* Brand marks are single-colour SVGs used as masks, so they take the text colour in both themes.
   Lockup: the mark is 1.42x the cap height; 28px tall gives a cap height of about 20px. */
.lockup, .wordmark, .mark-detail {
  display: inline-block; background-color: currentColor;
  -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat;
}
.lockup { --src: var(--logo-lockup); height: 28px; aspect-ratio: 9744.3 / 2115.8; }
.wordmark { --src: var(--logo-wordmark); height: 18px; aspect-ratio: 6883.5 / 1515; color: var(--text-2); }
.mark-detail { --src: var(--logo-detail); width: 128px; aspect-ratio: 1; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--text-2); text-decoration: none; padding: 6px 9px; border-radius: 6px; font-size: 0.94rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: var(--surface-hi); }
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.theme-toggle:hover { color: var(--text); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .sun { display: block; }
  :root:not([data-theme="dark"]) .theme-toggle .moon { display: none; }
}
@media (max-width: 560px) {
  .nav .hide-sm { display: none; }
  .brand span { font-size: 1rem; }
}

/* Buttons and tags */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 8px;
  font-weight: 600; font-size: 0.97rem; text-decoration: none;
  border: 1px solid var(--border); color: var(--text); background: var(--surface);
}
.btn:hover { background: var(--surface-hi); text-decoration: none; }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
.btn.primary:hover { filter: brightness(1.06); background: var(--btn-bg); }
.tag {
  display: inline-block;
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.04em;
  padding: 4px 6px 3px;
  border-radius: 4px;
  color: var(--link);
  border: 1px solid color-mix(in srgb, var(--link) 45%, transparent);
  vertical-align: middle;
}
.tag.dim { color: var(--text-2); border-color: var(--border); }
.status-table td:first-child { font-weight: 600; color: var(--text); }
.status-table td:last-child { white-space: nowrap; }
.doc h2 .tag, .page h2 .tag { margin-left: 6px; vertical-align: 3px; }
.tag.warn { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn-text) 45%, transparent); }

/* Hero: copy on the left, the icon stage on the right. On desktop the hero is 250vh tall and
   its inner block is sticky, so the first 150vh of scrolling drives the tile assembly. */
.hero { position: relative; }
.hero-sticky { position: relative; overflow: hidden; }
.hero-scroll .hero { height: calc(100vh + 150vh); }
.hero-scroll .hero-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1s ease; pointer-events: none;
}
.hero-live .hero-canvas { opacity: 1; }
.hero-live .hero-poster { opacity: 0; }
.hero-grid {
  position: relative; width: 100%;
  display: grid; align-items: center; gap: clamp(24px, 4vw, 72px);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  padding-top: 58px; padding-bottom: 24px;
}
.hero-copy { position: relative; z-index: 1; max-width: 560px; }
/* On touch screens the name resolves once the tablet has seated (site.js removes the class). */
.hero-copy h1 { transition: opacity 0.6s ease, transform 0.6s ease, letter-spacing 0.9s ease; }
.hero-await-title .hero-copy h1 { opacity: 0; transform: translateY(6px); letter-spacing: 0.04em; }
.hero-copy h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin-bottom: 0.3em; }
/* .hero-visual is the tablet's footprint in the layout (--t wide). The poster and the 3D view
   share one 2:1 frame (.hero-stage), rendered from the same camera, in which the tablet is
   31.3% of the width and centred at 52.75% of the height. The frame overflows the layout. */
.hero-play .hero-visual { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-visual { --t: min(40vw, 62vh, 700px); justify-self: center; width: var(--t); height: calc(var(--t) * 0.72); position: relative; }
.hero-stage {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--t) / 0.3133); aspect-ratio: 2 / 1;
  transform: translate(-50%, -52.75%);
  pointer-events: none;
}
/* Scroll hint (desktop scroll mode): appears once the tiles have burst apart, leaves on the first scroll. */
.hero-hint { display: none; }
.hero-scroll .hero-hint {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  position: absolute; left: 50%; bottom: calc(59px + 24px); transform: translateX(-50%); /* above the fold under the 59px header */
  font-size: 0.82rem; letter-spacing: 0.04em; color: var(--text-2);
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.hero-scroll.hero-live .hero-hint { opacity: 0.85; transition-delay: 2s; }
.hero-scroll.hero-live.hero-scrolled .hero-hint { opacity: 0; transition-delay: 0s; }
.hero-hint svg { animation: hero-hint-bob 1.8s ease-in-out infinite; }
@keyframes hero-hint-bob { 50% { transform: translateY(4px); } }
.hero-poster, .hero-poster img { display: block; width: 100%; height: 100%; transition: opacity 1s ease; }
@media (max-width: 899px), (pointer: coarse) {
  .hero-grid { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 56px; gap: 8px; }
  .hero-visual { --t: min(78vw, 440px); order: -1; margin: 12px 0 28px; }
}
.lede { font-size: clamp(1.02rem, 1.6vw, 1.14rem); color: var(--text-2); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 12px; }
.fine { font-size: 0.88rem; color: var(--text-2); }
.app-visual { margin-top: 8px; }

/* Sections */
section { padding: clamp(48px, 8vw, 88px) 0; }
section + section { border-top: 1px solid var(--border); }
.section-intro { color: var(--text-2); max-width: 640px; margin-bottom: 32px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-bar {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  background: var(--surface-hi);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden;
}
.card-body { padding: 16px 16px 6px; }
.card-body p { color: var(--text-2); font-size: 0.97rem; }

/* Name section */
.split { display: grid; gap: clamp(32px, 6vw, 80px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.split p { color: var(--text-2); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 28px 0 40px; color: var(--text-2); font-size: 0.9rem; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 12px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--text-2); }

/* Features with screenshots */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 56px) 0; }
.feature + .feature { border-top: 1px solid var(--border); }
.feature:nth-child(odd of .feature) .feature-text { order: 2; }
.feature-text h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
.feature-text p { color: var(--text-2); }
.feature-text .fine { line-height: 1.7; }
.feature-media { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 28px); min-width: 0; }
/* A desktop shot with a phone overlapping its lower right corner. */
.feature-media.pair { position: relative; display: block; padding: 0 12% 36px 0; }
.feature-media.pair > .device:not(.phone) { width: 100%; max-width: none; }
.feature-media.pair > .device.phone { position: absolute; right: 0; bottom: 0; width: 30%; max-width: 210px; padding: 6px; border-radius: 32px; }
.feature-media.pair > .device.phone .screen { border-radius: 27px; }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(odd of .feature) .feature-text { order: 0; }
  .feature-media.pair { padding: 0 8% 28px 0; }
}

/* Device frames, drawn in CSS around real screenshots */
.device { margin: 0; position: relative; background: #0c0d10; box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06) inset; }
.device .screen { overflow: hidden; background: #15171b; }
.device img { display: block; width: 100%; height: auto; }
.device.mac, .device.windows { width: min(100%, 640px); border-radius: 12px; padding: 0 0 0; }
.device.mac .bar, .device.windows .bar { height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 11px; background: #1e2024; border-radius: 12px 12px 0 0; }
.device.mac .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.device.mac .bar i:nth-child(2) { background: #febc2e; }
.device.mac .bar i:nth-child(3) { background: #28c840; }
.device.windows .bar { justify-content: flex-end; gap: 18px; border-radius: 8px 8px 0 0; background: #202020; }
.device.windows { border-radius: 8px; }
.device.windows .bar b { width: 10px; height: 10px; border: 1px solid #9a9a9a; border-width: 0 0 1px; }
.device.windows .bar b:nth-child(2) { border-width: 1px; }
.device.windows .bar b:nth-child(3) { border: 0; background: linear-gradient(45deg, transparent 45%, #9a9a9a 45%, #9a9a9a 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #9a9a9a 45%, #9a9a9a 55%, transparent 55%); }
.device.mac .screen { border-radius: 12px; }
.device.mac { border-radius: 12px; box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1); }
.device.windows .screen { border-radius: 0 0 8px 8px; }
.device.phone { width: min(44vw, 260px); padding: 9px; border-radius: 46px; background: #1b1c20; box-shadow: 0 24px 60px -28px rgb(0 0 0 / 0.7), 0 0 0 1.5px #3a3c42 inset; }
.device.phone .screen { border-radius: 38px; }
.device.tablet { width: min(80vw, 520px); padding: 14px; border-radius: 28px; background: #1b1c20; }
.device.tablet .screen { border-radius: 16px; }
.device.placeholder .screen {
  display: grid; place-items: center; text-align: center; padding: 20px;
  border: 1px dashed var(--border); background: var(--surface); color: var(--text-2); font-size: 0.92rem;
}
.device.placeholder { background: transparent; box-shadow: none; padding: 0; }
.device.placeholder.mac, .device.placeholder.windows { width: 100%; max-width: 640px; }
.device.placeholder.mac .screen, .device.placeholder.windows .screen { aspect-ratio: 16 / 10; border-radius: 12px; width: 100%; }
.device.placeholder.phone .screen { aspect-ratio: 1206 / 2622; border-radius: 38px; }
.device.placeholder.tablet .screen { aspect-ratio: 4 / 3; border-radius: 16px; }
.device.placeholder p { margin: 0; line-height: 1.7; }

.device.web { width: min(100%, 640px); border-radius: 10px; }
.device.web .bar { height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #1e2024; border-radius: 10px 10px 0 0; }
.device.web .bar i { width: 8px; height: 8px; border-radius: 50%; background: #3a3d44; }
.device.web .bar span { flex: 0 1 40%; height: 12px; margin: 0 auto; border-radius: 6px; background: #2a2c31; }
.device.web .screen { border-radius: 0 0 10px 10px; }
.device.placeholder.web .screen { aspect-ratio: 16 / 10; border-radius: 10px; width: 100%; }
.device.placeholder.web { width: 100%; max-width: 640px; }

/* Platforms list (landing) */
.platform-table { border-top: 1px solid var(--border); margin-bottom: 28px; }
.platform-table .row {
  display: grid; grid-template-columns: 180px 130px minmax(0, 1fr); gap: 8px 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.platform-table .platform-table .tag { justify-self: start; }
.platform-table p { margin: 0; color: var(--text-2); }
@media (max-width: 680px) { .platform-table .row { grid-template-columns: auto 1fr; } .platform-table p { grid-column: 1 / -1; } }

/* Plain content pages (download, changelog, legal) */
.page { padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(56px, 8vw, 96px); }
.page > .wrap { max-width: 800px; }
.page h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); }
.page h2 { font-size: 1.4rem; margin-top: 2em; }
.page h3 { margin-top: 1.6em; }
.page p, .page li { color: var(--text-2); }
.page strong, .doc strong { color: var(--text); }
.draft {
  border: 1px dashed var(--warn-text); color: var(--text); border-radius: 8px;
  padding: 12px 14px; margin: 0 0 28px; font-size: 0.95rem;
}
.release { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 28px; }
.release h2 { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 0.6em; }
.release time { font: 500 0.85rem var(--mono); color: var(--text-2); }

/* Docs */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-top: 48px; padding-bottom: 80px; }
.docs-nav { position: sticky; top: 82px; align-self: start; font-size: 0.93rem; }
.docs-nav summary { font: 600 0.72rem/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-2); margin-bottom: 12px; cursor: default; list-style: none; }
.docs-nav summary::-webkit-details-marker { display: none; }
.docs-nav ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.docs-nav a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; color: var(--text-2); text-decoration: none; border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--text); }
.docs-nav a[aria-current="page"] { color: var(--text); border-left-color: var(--link); font-weight: 550; }
.doc { max-width: 720px; min-width: 0; }
.doc-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: 4px; }
.doc-head .mark-detail { color: var(--link); opacity: 0.9; }
@media (max-width: 820px) { .doc-head .mark-detail { display: none; } }
.doc h1 { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.doc h2 { margin-top: 2.1em; font-size: 1.4rem; }
.doc h3 { margin-top: 1.6em; }
.doc p, .doc li, .doc td { color: var(--text-2); }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin-bottom: 0.4em; }
.doc .lede { margin-bottom: 1.4em; }
.note {
  border: 1px solid var(--border); border-left: 3px solid var(--link);
  background: var(--surface); border-radius: 6px; padding: 12px 14px; margin: 0 0 1.2em; font-size: 0.95rem;
}
.note p { color: var(--text); }
.note p:last-child { margin: 0; }
.status-note { border-left-color: var(--warn-text); }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px 14px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 600; color: var(--text-2); font-size: 0.85rem; }
td:first-child { white-space: nowrap; }
dl.faq dt { font-weight: 600; margin-top: 1.4em; }
dl.faq dd { margin: 0.3em 0 0; color: var(--text-2); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--border); }
.pager a { display: block; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); }
.pager a:hover { background: var(--surface); }
.pager small { display: block; color: var(--text-2); font-size: 0.78rem; }
.pager .next { text-align: right; grid-column: 2; }
@media (max-width: 820px) {
  .docs { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .docs-nav { position: static; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
  .docs-nav summary { margin: 0; cursor: pointer; list-style: revert; }
  .docs-nav details[open] summary { margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Figures in docs */
.doc-figure { margin: 8px 0 36px; }
.doc-figure figcaption { margin-top: 12px; font-size: 0.88rem; color: var(--text-2); }

/* Logo preview switcher (only with ?logo=) */
.logo-preview {
  position: fixed; right: 12px; bottom: 12px; z-index: 60; display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  font: 500 0.82rem var(--sans); color: var(--text-2); box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
}
.logo-preview a { color: var(--text); text-decoration: none; padding: 2px 8px; border-radius: 5px; }
.logo-preview a[aria-current] { background: var(--surface-hi); color: var(--link); }

/* Narrow phones: the mark alone in the header, so the nav and theme switch fit at 320 px. */
@media (max-width: 420px) {
  .lockup { --src: var(--logo-mark32); height: 26px; aspect-ratio: 1; }
  .nav a { padding: 6px 7px; }
  .site-header .wrap { gap: 8px; }
}

/* Site art, used sparingly */
.tile-row { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.tile-row img { display: block; width: auto; height: 44px; filter: drop-shadow(0 8px 14px rgb(0 0 0 / 0.35)); }
.tile-row picture:nth-child(1) img { transform: rotate(-9deg); }
.tile-row picture:nth-child(2) img { height: 40px; transform: rotate(6deg); }
.tile-row picture:nth-child(3) img { height: 36px; transform: rotate(-3deg); }
.wide-art img { width: 100%; height: auto; border-radius: 12px; margin-top: 28px; }

/* The mark: the assembly film, loaded only when scrolled to */
.name-film { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.name-film p { color: var(--text-2); }
.film { margin: 0; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 12px; background: #0b0b0d; }
@media (max-width: 860px) { .name-film { grid-template-columns: 1fr; } }