/* The Arc look: the apps on a scrollable arc. Builds on studio.css for the header, footer and type; the
   rest of the home page keeps its sections and takes this look's colours. Light and dark follow the system. Motion: the arc, the tint shift and the 3D constellation only run
   when the visitor has not asked for reduced motion; otherwise the poster and a plain list stay. */

:root[data-theme="arc"] { color-scheme: dark light; --tint: #0b0c0e; --tint-a: #d84a40; --tint-b: #d84a40; --tint-mix: 0; --wash: 15%; --R: clamp(1300px, 150vw, 2200px); --w: min(80vw, 340px); --gap: 36px; }
:root[data-theme="arc"] { --tint: color-mix(in oklab, var(--tint-b) calc(var(--tint-mix) * 1%), var(--tint-a)); }
@media (prefers-color-scheme: light) {
  :root[data-theme="arc"] {
    --ground: #f7f4ee; --panel: #fffdf9; --panel-hi: #ffffff;
    --ink: #17181a; --ink-2: #45474b; --ink-3: #5f6165;
    --hair: rgba(23, 24, 26, .14); --rule: rgba(23, 24, 26, .34);
    --amber: #b3261a; --amber-hi: #8f1d13; --on-amber: #ffffff;
    --wash: 17%;
  }
}
:root[data-theme="arc"] .hero-band { display: none; }
.arc-look { display: none; }
:root[data-theme="arc"] .arc-look { display: block; }
:root[data-theme="arc"], :root[data-theme="arc"] body { background: color-mix(in oklab, var(--tint) var(--wash), var(--ground)); }
:root[data-theme="arc"] footer { background: var(--ground); }
:root[data-theme="arc"] ::selection { background: var(--tint); color: var(--ground); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hero: poster first; the canvas fades in over it when the 3D layer is ready. */
.ar-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-block: clamp(12px, 3vw, 40px) clamp(32px, 5vw, 64px); min-height: min(76svh, 680px); }
.ar-intro { gap: 18px; }
.ar-h1 { font-size: clamp(38px, 5.4vw, 74px); text-wrap: balance; }
.ar-h1 em { font-style: italic; color: color-mix(in oklab, var(--tint) 62%, var(--ink)); }
.ar-hint { min-height: 1.4em; margin: 0; }
.ar-sky { position: relative; aspect-ratio: 100 / 70; width: 100%; order: 2; }
.ar-intro { order: 1; }
.ar-poster, .ar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ar-canvas { opacity: 0; }
.ar-sky.is-3d .ar-canvas { opacity: 1; }
.ar-sky.is-3d .ar-poster { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ar-canvas, .ar-poster { transition: opacity .6s ease; }
}
.ps-guide { fill: none; stroke: var(--ink); stroke-opacity: .2; stroke-width: .16; stroke-dasharray: .6 1.3; }
.ps-dust { fill: var(--ink); opacity: .45; }
.ps-link { stroke: var(--ink); stroke-opacity: .28; stroke-width: .16; }
.ar-sky[data-hover] { cursor: pointer; }
.ar-tip { position: absolute; left: 0; top: 0; z-index: 2; padding: 5px 9px; background: var(--ink); color: var(--ground); pointer-events: none; white-space: nowrap; letter-spacing: .08em; }
@media (max-width: 880px) {
  .ar-hero { grid-template-columns: 1fr; min-height: 0; }
  .ar-sky { order: 1; }
  .ar-intro { order: 2; }
}

/* The arc. No script: a row you scroll sideways. With script: cards hang from a circle (see arc.js). */
.ar { padding-block: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.ar-head { gap: 12px; padding-bottom: 8px; }
.ar-skip { align-self: flex-start; font-size: 14px; color: var(--ink-2); min-height: 44px; display: inline-flex; align-items: center; }
.ar-read { text-align: center; padding-block: 6px 0; font-variant-numeric: tabular-nums; }
.ar-read b { color: color-mix(in oklab, var(--tint) 62%, var(--ink)); font-weight: 700; }
.ar-frame { position: relative; overflow: hidden; }
.ar-ring { display: none; position: absolute; z-index: 0; left: calc(50% - var(--R)); top: 30px; width: calc(var(--R) * 2); height: calc(var(--R) * 2); border: 1px dashed var(--rule); border-radius: 50%; pointer-events: none; }
.ar-track { position: relative; z-index: 1; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 30px calc(50% - var(--w) / 2) 24px; }
.ar-track::-webkit-scrollbar { display: none; }
.ar-track:focus-visible { outline-offset: -4px; }
.ar-list { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.ar-stop { flex: 0 0 var(--w); scroll-snap-align: center; scroll-snap-stop: always; --st: var(--tint); }
.ar-card { transform-origin: 50% 0; display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 20px; border: 1px solid var(--hair); border-top: 3px solid var(--st); background: color-mix(in oklab, var(--st) 9%, var(--panel)); }
.ar-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-variant-numeric: tabular-nums; }
.ar-swatch { width: 12px; height: 12px; border-radius: 50%; background: var(--st); flex: none; }
.ar-colour { margin-left: auto; text-align: right; }
.ar-id { display: flex; align-items: center; gap: 14px; }
.ar-icon { width: 56px; height: 56px; border-radius: 13px; flex: none; background: var(--panel-hi); }
.ar-initial { display: grid; place-items: center; font: 700 24px var(--face); color: var(--ground); background: var(--st); }
.ar-name { margin: 0; font-family: var(--serif); font-size: 26px; line-height: 1.1; font-weight: 500; text-wrap: balance; }
.ar-line { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.45; flex: 1; }
.ar-film { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin: 0; padding: 12px 14px; min-height: 64px; color: var(--ink); text-decoration: none; background: color-mix(in oklab, var(--st) 18%, var(--ground)); border: 1px solid color-mix(in oklab, var(--st) 55%, transparent); }
.ar-film .ar-play { grid-row: 1 / 3; width: 36px; height: 36px; }
.ar-play circle { fill: var(--st); }
.ar-play path { fill: var(--ground); }
.ar-card.ink-light .ar-play path { fill: #fff; }
.ar-card.ink-dark .ar-play path { fill: #0b0c0e; }
.ar-film-t { font-weight: 650; font-size: 15px; line-height: 1.2; align-self: end; }
.ar-film-s { color: var(--ink-2); font-size: 13px; line-height: 1.3; align-self: start; }
.ar-film.has-film:hover { border-color: var(--st); color: var(--ink); }
.ar-film.is-soon { border-style: dashed; background: transparent; }
.ar-film.is-soon .ar-play { opacity: .45; }
.ar-film.is-soon .ar-film-t { color: var(--ink-2); font-weight: 550; }
.ar-go { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; font-weight: 700; text-decoration: none; background: var(--st); }
.ar-card.ink-dark .ar-go { color: #0b0c0e; }
.ar-card.ink-light .ar-go { color: #fff; }
.ar-go:hover { filter: brightness(1.08); }
.ar-card.ink-dark .ar-go:hover { color: #0b0c0e; }
.ar-card.ink-light .ar-go:hover { color: #fff; }

.ar-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 6px; }
.ar-ctl[hidden] { display: none; }
/* Room for what arc.js adds later (the hint text, the buttons, the space the tilted cards hang into), reserved
   from the first paint so nothing below moves when it runs. Reduced motion has none of it. */
@media (prefers-reduced-motion: no-preference) {
  .ar-hint { min-height: 4.4em; }
  .ar-ctl[hidden] { display: flex; visibility: hidden; }
  .ar-track { padding-bottom: 96px; }
}
.ar-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); cursor: pointer; }
.ar-btn:hover { border-color: var(--tint); }
.ar-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-rail { display: flex; align-items: center; gap: 5px; }
.ar-rail i { width: 2px; height: 12px; background: var(--rule); }
.ar-rail i.now { height: 22px; width: 3px; background: color-mix(in oklab, var(--tint) 70%, var(--ink)); }
.ar-note { max-width: 70ch; margin: 18px auto 0; text-align: center; text-transform: none; letter-spacing: 0; font-family: var(--face); font-size: 14px; color: var(--ink-3); align-self: auto; }

/* With script: cards ride the circle. arc.js adds .is-arc to the frame and sets each card's transform. */
.ar-frame.is-arc .ar-ring { display: block; }
.ar-frame.is-arc .ar-stop { position: relative; }
.ar-frame.is-arc .ar-stop.is-now { z-index: 2; }
.ar-frame.is-arc .ar-card { will-change: transform; }
@media (max-width: 640px) { :root[data-theme="arc"] { --gap: 48px; } }
.ar-frame.is-arc .ar-stop.is-now .ar-card { border-color: color-mix(in oklab, var(--st) 55%, var(--hair)); border-top-color: var(--st); }

/* Reduced motion: no arc, no shifting tint, no 3D. A plain list, one colour bar per app. */
@media (prefers-reduced-motion: reduce) {
  .ar-ring, .ar-ctl, .ar-read { display: none !important; }
  .ar-track { overflow: visible; scroll-snap-type: none; padding: 16px var(--gutter); }
  .ar-list { flex-direction: column; gap: 14px; max-width: 760px; margin-inline: auto; }
  .ar-stop { flex-basis: auto; }
  .ar-card { transform: none !important; opacity: 1 !important; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; }
  .ar-meta, .ar-id, .ar-line, .ar-film { grid-column: 1; }
  .ar-go { grid-column: 2; grid-row: 1 / 5; align-self: center; }
  .ar-track:focus-visible { outline: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .ar-card { grid-template-columns: 1fr; }
  .ar-go { grid-column: 1; grid-row: auto; }
}

/* The film dialog. */
.ar-dialog { width: min(92vw, 440px); max-height: 92svh; padding: 0; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.ar-dialog::backdrop { background: rgba(5, 6, 8, .72); }
.ar-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--hair); }
.ar-dtitle { margin: 0; font: 500 22px var(--serif); }
.ar-close { min-height: 44px; padding: 0 16px; background: transparent; color: var(--ink); border: 1px solid var(--rule); font: 600 15px var(--face); cursor: pointer; }
.ar-close:hover { border-color: var(--tint); }
.ar-dialog video { display: block; width: 100%; max-height: 68svh; background: #000; }
.ar-dcap { margin: 0; padding: 12px 18px 16px; color: var(--ink-2); font-size: 14px; line-height: 1.45; }