/* Quarter Cut Studio: the one stylesheet of the site.
   The colours are the brand palette of the channel (quarter-cut-channel/brand/palette.json), which AI Campus uses too
   (techy-idle-game/src/style.css): about 70% dark blues, 20% indigo and violet, 10% bright accents.
   Teal is data and signals, amber is light and money, coral is emphasis and used sparingly, cloud is text. */

@font-face { font-family: 'Nunito Sans'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(../fonts/nunito-sans-latin.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: 'Nunito Sans'; font-style: normal; font-display: swap; font-weight: 200 1000;
  src: url(../fonts/nunito-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* palette.json, core */
  --abyss: #060B21; --ink: #0B1127; --navy: #0F183F; --deep: #152054; --indigo: #2C3384;
  --violet: #6842E7; --violet-shade: #4235BD; --violet-light: #8869E3; --pale: #D7C4F6;
  --teal: #24D2C5; --amber: #FEAF50; --coral: #F95E6D; --cloud: #EEE7F8;
  --sky-top: #0E1A4B; --sky-glow: #2A25A3;
  /* roles */
  --bg: var(--abyss);
  --surface: var(--navy);
  --surface-2: var(--deep);
  --line: #222B58;
  --text: var(--cloud);
  --muted: #B3ACD3;
  --link: #A996FF;
  --radius: 1.1rem;
  --radius-sm: .75rem;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --font: 'Avenir Next', 'Nunito Sans', 'Avenir', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --glow-teal: 0 0 .9rem rgb(36 210 197 / .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 500 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
main { flex: 1; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--cloud); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: .35rem; }
::selection { background: var(--violet); color: #fff; }
h1, h2, h3, h4 { margin: 0 0 .6rem; line-height: 1.12; letter-spacing: -.015em; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.1rem); font-weight: 900; letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 900; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 44rem; }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--muted); }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; padding: .6rem 1rem; border-radius: .6rem; background: var(--cloud); color: var(--ink); font-weight: 800; }
.skip:focus { left: .5rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The small label over a heading, as the game's panels and coach set theirs. */
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; color: var(--violet-light); font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 1.6rem; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow.teal { color: var(--teal); }
.eyebrow.amber { color: var(--amber); }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 50; background: rgb(6 11 33 / .78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgb(44 51 132 / .45); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--cloud); text-decoration: none; }
.brand:hover { color: var(--cloud); }
.brand svg { width: 2.25rem; height: 2.25rem; flex: none; }
.brand b { font-size: 1.2rem; font-weight: 900; letter-spacing: -.01em; line-height: 1; }
.brand small { display: block; margin-top: .2rem; font-size: .66rem; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a { padding: .5rem .85rem; border-radius: .7rem; color: var(--muted); font-weight: 700; font-size: .98rem; text-decoration: none; }
.nav a:hover { color: var(--cloud); background: rgb(44 51 132 / .35); }
.nav a[aria-current='page'], .nav a.here { color: var(--cloud); background: var(--surface-2); }
.nav .btn { margin-left: .4rem; }
.menu { display: none; }
@media (max-width: 760px) {
  .menu { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: .8rem; background: var(--surface-2); color: var(--cloud); cursor: pointer; }
  .menu svg { width: 1.3rem; height: 1.3rem; }
  .nav { position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: .25rem; padding: .75rem var(--gutter) 1.25rem; background: rgb(6 11 33 / .97); border-bottom: 1px solid var(--line); display: none; }
  .nav.open { display: flex; }
  .nav a { padding: .8rem 1rem; font-size: 1.05rem; }
  .nav .btn { margin: .4rem 0 0; }
  .no-js .nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; padding: 0; background: none; border: 0; }
  .no-js .menu { display: none; }
}

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.9rem; padding: .7rem 1.25rem; border: 0; border-radius: .9rem; background: var(--violet); color: #fff; font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; box-shadow: 0 .5rem 1.5rem -.6rem rgb(104 66 231 / .8); }
.btn:hover { background: #7652F0; color: #fff; transform: translateY(-1px); }
.btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.btn.ghost { background: rgb(21 32 84 / .85); color: var(--cloud); box-shadow: inset 0 0 0 1px var(--indigo); }
.btn.ghost:hover { background: var(--indigo); }
.btn.yt { background: #E5283A; box-shadow: 0 .5rem 1.5rem -.6rem rgb(229 40 58 / .7); }
.btn.yt:hover { background: #F0394B; }
.btn.small { min-height: 2.4rem; padding: .45rem .95rem; font-size: .92rem; border-radius: .75rem; }
.btn[aria-disabled='true'] { background: rgb(21 32 84 / .6); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: default; transform: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; text-decoration: none; color: var(--teal); }
.more::after { content: '→'; transition: transform .15s; }
.more:hover { color: var(--cloud); }
.more:hover::after { transform: translateX(3px); }

/* ---------------------------------------------------------------- the night sky and the cut */
/* Stars, as the channel art and the game's backdrop scatter them. */
.stars { position: absolute; inset: 0; pointer-events: none; opacity: .85;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #9fe 50%, transparent 51%), radial-gradient(1px 1px at 26% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 38% 12%, #cfc6ff 50%, transparent 51%), radial-gradient(1px 1px at 52% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 64% 9%, #7ff 50%, transparent 51%), radial-gradient(1px 1px at 72% 36%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 84% 20%, #ffd9a0 50%, transparent 51%), radial-gradient(1px 1px at 93% 44%, #cfc6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 58%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 46% 62%, #9fe 50%, transparent 51%);
}

/* The hero: words in the night sky of the descent, above the town and its ground line. */
.hero { position: relative; }
.hero .wrap { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem) 0; min-height: calc(var(--ground) - 4.25rem + 2rem); }
.hero .copy { max-width: 37rem; }
.hero h1 .accent { color: transparent; background: linear-gradient(90deg, var(--teal), #8BE9E0 60%, var(--amber)); -webkit-background-clip: text; background-clip: text; }

/* ---------------------------------------------------------------- the descent
   The town at night and, under its ground line, what runs beneath it (src/descent.mjs): seven layers fixed behind the
   page. site.js moves each up at its own speed as the page scrolls, so the page goes down through the ground and what
   is further back moves less. The size is set here, so that without the script the town still stands behind the hero:
   the scene covers the screen (2400 by 1080 of its pixels at the least) and is centred on its middle, or a little to
   the right of it on a narrow screen, where the town is. */
:root { --scene-w: max(100vw, 222.2222vh); --scene-s: calc(var(--scene-w) / 2400); --ground: calc(var(--scene-w) * 760 / 2400); --focus: .5; }
@media (max-width: 900px) { :root { --focus: .5792; } }
.descent { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--abyss); }
.descent .layer { position: absolute; top: 0; left: calc(50vw - var(--scene-w) * var(--focus)); width: var(--scene-w); will-change: transform; }
.descent .layer img { width: 100%; height: auto; max-width: none; }
.descent .depths { height: 0; left: 0; width: 100vw; }
.descent .depths span { position: absolute; top: calc(var(--scene-w) * var(--y) / 2400); right: max(1.25rem, calc((100vw - var(--wrap)) / 2 - 6rem)); display: flex; align-items: center; gap: .5rem; transform: translateY(-50%); color: rgb(215 196 246 / .8); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 3px rgb(6 11 33 / .95); }
.descent .depths span::after { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--teal); box-shadow: var(--glow-teal); }
@media (max-width: 1099px) { .descent .depths { display: none; } }
/* On a page with the descent the sections let it show through; what is read sits on its own cards or is lifted off it. */
.deep { background: var(--abyss); }
.deep .section.tint { background: none; }
.deep main :is(.section-head, .hero .copy) { text-shadow: 0 1px 2px rgb(6 11 33 / .9), 0 0 1.5rem rgb(6 11 33 / .85); }
.deep main .accent { text-shadow: none; filter: drop-shadow(0 1px 2px rgb(6 11 33 / .9)); }
.deep main .section-head > div { --plate: min(1.25rem, calc(var(--gutter) - .25rem)); margin: -1rem calc(-1 * var(--plate)); padding: 1rem var(--plate); border-radius: var(--radius); background: rgb(6 11 33 / .5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.deep .foot { background: rgb(11 17 39 / .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 900px) {
  .hero .wrap { min-height: 0; padding-bottom: calc(var(--ground) * .55); }
}

/* The ground line: a thin lit edge with a teal signal running along it. Used between sections. */
.cut { position: relative; height: 1px; margin: 0; border: 0; background: linear-gradient(90deg, transparent, var(--indigo) 12%, var(--violet-shade) 50%, var(--indigo) 88%, transparent); overflow: visible; }
.cut::after { content: ''; position: absolute; left: 0; top: -1px; width: 18%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--teal), transparent); box-shadow: var(--glow-teal); animation: signal 7s linear infinite; }
@keyframes signal { from { transform: translateX(-20%); } to { transform: translateX(560%); } }

/* ---------------------------------------------------------------- sections */
.section { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section.tint { background: linear-gradient(180deg, var(--ink), var(--abyss)); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.section-head > div { max-width: 42rem; }
.section-head p:last-child { margin-bottom: 0; }

/* Cards */
.card { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
a.card { color: inherit; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
a.card:hover { transform: translateY(-3px); border-color: var(--indigo); box-shadow: 0 1.5rem 3rem -1.5rem rgb(104 66 231 / .55); }

/* The two things the studio makes, side by side. */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }
.work { display: flex; flex-direction: column; }
.work .pic { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.work .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.work:hover .pic img { transform: scale(1.035); }
.work .pic .tag { position: absolute; left: 1rem; top: 1rem; }
.work .body { display: flex; flex-direction: column; gap: .4rem; flex: 1; padding: 1.5rem 1.6rem 1.7rem; }
.work .body h3 { font-size: 1.55rem; font-weight: 900; margin: 0; }
.work .body p { color: var(--muted); margin: 0 0 .6rem; }
.work .body .more { margin-top: auto; }
.work .logo { height: 2.6rem; width: auto; margin: -.2rem 0 .1rem -.3rem; }
.tag { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 99rem; background: rgb(6 11 33 / .78); backdrop-filter: blur(6px); color: var(--cloud); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tag i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--teal); box-shadow: var(--glow-teal); }
.tag.amber i { background: var(--amber); box-shadow: 0 0 .7rem rgb(254 175 80 / .7); }

/* Numbers: the same small facts that the game and the channel are built on. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1px; overflow: hidden; border-radius: var(--radius); background: var(--line); border: 1px solid var(--line); }
.facts div { padding: 1.3rem 1.4rem; background: var(--surface); }
.facts b { display: block; font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 900; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.facts span { color: var(--muted); font-size: .92rem; font-weight: 600; }
@media (max-width: 600px) { .facts div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.facts .teal { color: var(--teal); } .facts .amber { color: var(--amber); } .facts .violet { color: var(--violet-light); } .facts .coral { color: var(--coral); }

/* Principles: three short claims, each with a coloured quarter, like the arcs in the mark. */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (max-width: 860px) { .trio { grid-template-columns: 1fr; } }
.point { padding: 1.6rem 1.6rem 1.4rem; }
.point .q { width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; }
.point h3 { margin-bottom: .45rem; }
.point p { color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- numbered steps: the story of a video, how to subscribe */
.steps { counter-reset: step; display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; position: relative; padding: 1.1rem 1.3rem 1.1rem 4.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.steps li::before { content: counter(step); position: absolute; left: 1.2rem; top: 1rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-2); color: var(--teal); font-weight: 900; box-shadow: inset 0 0 0 1px var(--indigo); }
.steps b { display: block; margin-bottom: .2rem; color: var(--cloud); font-size: 1.05rem; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }
.steps.compact { gap: .5rem; margin-top: 1.2rem; }
.steps.compact li { padding: .2rem 0 .2rem 3rem; background: none; border: 0; }
.steps.compact li::before { left: 0; top: .15rem; }
.edition .more { display: inline-flex; margin-top: 1rem; }

/* The kinds of system the channel covers. */
.topics { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem, 1.5vw, 1rem); }
@media (max-width: 960px) { .topics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .topics { grid-template-columns: repeat(2, 1fr); } }
.topic { padding: 0 0 1rem; text-align: center; background: #10193F; }
.topic img { width: 100%; aspect-ratio: 300 / 260; object-fit: cover; }
.topic b { display: block; font-size: 1rem; font-weight: 800; }
.topic span { display: block; padding-inline: .6rem; color: var(--muted); font-size: .82rem; line-height: 1.35; }

/* A band that asks for one thing: subscribe, or write to us. */
.band { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 3.5rem); border-radius: calc(var(--radius) * 1.4); background: radial-gradient(120% 140% at 100% 0%, rgb(104 66 231 / .55), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgb(36 210 197 / .16), transparent 60%), var(--navy); border: 1px solid var(--indigo); }
.band .wrapper { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; }
.band h2 { margin: 0 0 .4rem; }
.band p { margin: 0; color: var(--muted); max-width: 36rem; }
.band .mark { position: absolute; right: -3rem; bottom: -4rem; width: 16rem; opacity: .12; pointer-events: none; }

/* ---------------------------------------------------------------- AI Campus */
.game-hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(60% 80% at 72% 50%, #1A2468 0%, transparent 70%), linear-gradient(180deg, #0E1A4C 0%, #111C5B 70%, #0B1442 100%); }
.game-hero .wrap { position: relative; display: flex; align-items: center; min-height: clamp(34rem, 46vw, 44rem); padding-block: clamp(3rem, 6vw, 5rem); }
.game-hero .copy { position: relative; z-index: 1; max-width: 32rem; }
.game-hero .logo { width: min(100%, 26rem); height: auto; margin: 0 0 1rem -1.4rem; }
/* The campus floats to the right of the words, its edges fading into the same blue night it is drawn on. */
.game-hero .key { position: absolute; z-index: 0; top: 50%; right: -11%; width: min(78%, 74rem); transform: translateY(-50%); pointer-events: none; }
.game-hero .key img { width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse closest-side, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 60%, transparent 100%); }
@media (max-width: 900px) {
  .game-hero .wrap { flex-direction: column-reverse; align-items: stretch; min-height: 0; padding-top: 0; }
  .game-hero .key { position: relative; top: auto; right: auto; width: 135%; max-width: none; margin: -2rem -17.5% -3rem; transform: none; }
  .game-hero .logo { margin-left: -1rem; }
}
.stores { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.store { display: inline-flex; align-items: center; gap: .7rem; min-height: 3.4rem; padding: .55rem 1.1rem .55rem .9rem; border-radius: .9rem; background: rgb(11 17 39 / .88); border: 1px solid var(--indigo); color: var(--cloud); text-decoration: none; line-height: 1.15; transition: border-color .15s, background .15s; }
.store svg { width: 1.6rem; height: 1.6rem; flex: none; }
.store small { display: block; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.store b { display: block; font-size: 1.02rem; font-weight: 800; }
a.store:hover { border-color: var(--violet-light); background: var(--deep); color: var(--cloud); }
.store.soon { border-style: dashed; border-color: var(--line); }
.store.soon small { color: var(--amber); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 1.25rem); }
@media (max-width: 960px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }
.feature { padding: 1.5rem 1.5rem 1.3rem; }
.feature .icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: .8rem; background: var(--surface-2); color: var(--violet-light); box-shadow: inset 0 0 0 1px var(--indigo); }
.feature .icon svg { width: 1.4rem; height: 1.4rem; }
.feature h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.feature ul { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.feature li { position: relative; padding-left: 1.05rem; margin: .4rem 0; }
.feature li::before { content: ''; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--teal); }
.feature:nth-child(3n+2) li::before { background: var(--amber); }
.feature:nth-child(3n) li::before { background: var(--violet-light); }

.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.6rem, 1.5vw, 1rem); }
.gallery a { grid-column: span 2; display: block; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--ink); }
.gallery a:nth-child(-n+2) { grid-column: span 3; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s; }
.gallery a:hover img { transform: scale(1.03); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery a, .gallery a:nth-child(-n+2) { grid-column: span 1; } .gallery a:first-child { grid-column: span 2; } }
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1600px); max-height: 92vh; }
.lightbox::backdrop { background: rgb(6 11 33 / .9); backdrop-filter: blur(4px); }
.lightbox img { max-height: 86vh; width: auto; margin: 0 auto; border-radius: var(--radius-sm); }
.lightbox p { margin: .7rem 0 0; text-align: center; color: var(--muted); }
.lightbox button { position: fixed; top: 1rem; right: 1rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--deep); color: var(--cloud); font-size: 1.5rem; line-height: 1; cursor: pointer; }

.editions { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (max-width: 760px) { .editions { grid-template-columns: 1fr; } }
.edition { padding: 1.7rem; }
.edition h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.35rem; }
.edition h3 svg { width: 1.5rem; height: 1.5rem; color: var(--violet-light); }
.edition ul { margin: .8rem 0 0; padding-left: 1.1rem; color: var(--muted); }
.edition li { margin: .35rem 0; }
.edition li::marker { color: var(--teal); }

.press { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.press a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--cloud); text-decoration: none; font-weight: 700; }
.press a:hover { border-color: var(--indigo); background: var(--deep); }
.press span { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- plain pages: support, legal */
.page-head { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem) clamp(2rem, 4vw, 3rem); background: linear-gradient(180deg, var(--sky-top), var(--abyss)); }
.page-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.page-head .crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; font-size: .9rem; font-weight: 700; color: var(--muted); }
.page-head .crumbs a { color: var(--muted); text-decoration: none; }
.page-head .crumbs a:hover { color: var(--cloud); }
.prose { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.prose > :first-child { margin-top: 0; }
.prose h1 { display: none; }
.prose h2 { font-size: 1.45rem; font-weight: 900; margin: 2.75rem 0 .75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.prose h3 { font-size: 1.1rem; margin: 1.8rem 0 .4rem; }
.prose p, .prose ul, .prose ol { margin: .8rem 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .45rem 0; }
.prose li::marker { color: var(--violet-light); }
.prose strong { color: #fff; font-weight: 800; }
.prose .lead { font-size: 1rem; color: var(--amber); font-weight: 700; }
.prose code { font: .88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); padding: .12em .35em; border-radius: .3em; overflow-wrap: anywhere; }
.prose .table { overflow-x: auto; margin: 1.2rem 0; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.prose table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { background: var(--surface-2); font-weight: 800; }
.prose a { overflow-wrap: anywhere; }
mark.owner { background: rgb(254 175 80 / .2); color: var(--amber); padding: .05em .35em; border-radius: .3em; box-shadow: inset 0 0 0 1px rgb(254 175 80 / .5); }
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: .4rem .8rem; border-radius: .6rem; background: var(--surface-2); color: var(--cloud); font-size: .9rem; font-weight: 700; text-decoration: none; }
.toc a:hover { background: var(--indigo); }
.mail { display: inline-flex; align-items: center; gap: .65rem; padding: .9rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--indigo); color: var(--cloud); font-size: clamp(1.05rem, 2.5vw, 1.3rem); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.mail svg { width: 1.4rem; height: 1.4rem; color: var(--teal); flex: none; }
.mail:hover { background: var(--deep); color: #fff; }
.notes { display: grid; gap: .9rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.notes li { margin: 0; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.notes li strong { display: block; margin-bottom: .2rem; color: var(--cloud); }

/* ---------------------------------------------------------------- footer */
.foot { position: relative; margin-top: auto; padding-block: 3.5rem 2.5rem; background: var(--ink); border-top: 1px solid var(--line); color: var(--muted); font-size: .95rem; }
.foot .cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
@media (max-width: 860px) { .foot .cols { grid-template-columns: 1fr 1fr; } .foot .about { grid-column: 1 / -1; } }
.foot .about p { max-width: 22rem; margin-top: 1rem; }
.foot h4 { margin: 0 0 .8rem; color: var(--cloud); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.foot ul { margin: 0; padding: 0; list-style: none; }
.foot li { margin: .45rem 0; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--cloud); }
.foot .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .85rem; }

/* 404 */
.lost { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.lost svg { width: 9rem; height: 9rem; margin: 0 auto 2rem; }
.lost .actions { justify-content: center; }

/* Things that move only for those who have not asked for less motion. */
.rise { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.rise.d1 { animation-delay: .08s; } .rise.d2 { animation-delay: .16s; } .rise.d3 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- the descent pages on a wide screen
   One column on the left for what is read, the right half left to the scene. What sits side by side elsewhere is
   stacked here, or laid out across the column, and the sections stand further apart so the scene shows between them. */
@media (min-width: 1100px) {
  .deep main .wrap { width: min(40rem, 46vw); margin-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); margin-right: auto; }
  .deep main .section { padding-block: clamp(5rem, 9vw, 9rem); }
  .deep main .section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .deep main .section-head .lead { font-size: 1.08rem; }
  /* what we make: two compact cards, the picture beside the words */
  .deep .duo { grid-template-columns: 1fr; gap: 1rem; }
  .deep .work { display: grid; grid-template-columns: 40% 1fr; }
  .deep .work .pic { aspect-ratio: auto; height: 100%; min-height: 12rem; }
  .deep .work .body { padding: 1.2rem 1.3rem 1.3rem; }
  .deep .work .body h3 { font-size: 1.3rem; }
  .deep .work .body p { font-size: .94rem; }
  .deep .work .logo { height: 2.1rem; }
  /* how we work: a slim list */
  .deep .trio { grid-template-columns: 1fr; gap: .75rem; }
  .deep .point { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: 1rem; padding: 1.1rem 1.3rem; }
  .deep .point .q { grid-row: span 2; width: 2.2rem; height: 2.2rem; margin: .1rem 0 0; }
  .deep .point h3 { margin-bottom: .25rem; font-size: 1.08rem; }
  .deep .point p { font-size: .94rem; }
  .deep .editions { grid-template-columns: 1fr; gap: 1rem; }
  .deep .topics { grid-template-columns: repeat(3, 1fr); }
  .deep .facts { grid-template-columns: repeat(2, 1fr); }
  /* the bands ask for one thing, under their words */
  .deep .band .wrapper { flex-direction: column; align-items: flex-start; }
}