/* ============================================================================
   Showcase layout: homepage (index.html) and archive (archive.html).
   Tokens come from css/tokens.css, base, nav and skip link from
   portfolio/case-study.css, the background from css/background.css.
   Layout rules for the Now section are documented in docs (Now record model).
   ========================================================================== */

[hidden] { display: none !important; }
.wrap { width: min(var(--max), calc(100% - 80px)); margin: 0 auto; }
main a { text-decoration: none; }

.mono-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate); transition: color .25s;
}
.mono-link:hover { color: var(--cobalt); }
.mono-link svg { width: 13px; height: 13px; }

.sec { padding-top: 120px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.sec-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: .9; color: var(--frost); margin: 0; }
.eyebrow { font-family: var(--font-mono); font-size: .9rem; letter-spacing: .42em; text-transform: uppercase; color: var(--cobalt); margin: 0; }

/* ---- Hero: the mark as a monument, the name beside it -----------------------
   One screen tall, no scroll track: the next section starts right after it.
   The stage fills the hero; the 3D module frames the mark huge and off centre
   (composition "hero", or "portrait" on upright screens) and the stills are cropped
   with the same anchor (object-position below = the composition's ox, oy). */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.stage {
  position: absolute; inset: 0;
  /* melt into the page at the bottom edge */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
}
.stage picture, .stage img, .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage img { object-fit: cover; object-position: 90% 40%; }
/* a calm, darker ground behind the name */
.stage-shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 75% at 18% 72%, rgba(1, 6, 18, .8), rgba(1, 6, 18, 0) 70%); }
/* the mark lights its surroundings: a soft cobalt bloom while the glint runs over the metal
   (timed with the 3D module: intro 2.6 s, glint peak at 40%) */
.stage-glint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 34% 46% at 70% 42%, rgba(59, 123, 255, .34), rgba(59, 123, 255, 0) 70%); }
.stage-glint.is-on { animation: glint 2.6s ease-out 1 both; }
@keyframes glint { 0% { opacity: 0; } 40% { opacity: 1; } 85%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stage-glint.is-on { animation: none; } }
/* touch: vertical swipes scroll the page, sideways drags turn the mark */
.stage #live { touch-action: pan-y; cursor: grab; outline: none; }
.stage #live:active { cursor: grabbing; }
.stage #live:focus-visible { box-shadow: inset 0 0 0 2px var(--cobalt); }

.hero-text {
  position: absolute; z-index: 2; left: max(16px, 5vw); bottom: clamp(36px, 9vh, 104px);
  display: flex; flex-direction: column; gap: 22px; max-width: min(46vw, 760px); pointer-events: none;
}
.hero-text a, .hero-text button { pointer-events: auto; }
.hero-text .eyebrow { font-size: .8rem; letter-spacing: .34em; color: var(--frost); }   /* cobalt disappears on the blue glass */
/* homepage: a clear nav over the hero (see the script); its ground returns on scroll */
.nav-header { transition: background-color .3s, border-color .3s; }
.nav-header.is-top { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
/* The name as the second figure of the composition: two lines, very large, one colour. */
.hero-name { font-family: var(--font-serif); font-weight: 600; font-size: clamp(3.4rem, 9vw, 9.5rem); line-height: .82; letter-spacing: -.01em; color: var(--frost); margin: 0; }
/* a soft dark halo keeps the type clear where the silver passes close behind it */
.hero-name, .hero-line, .hero-text .eyebrow, .hero-text .mono-link { text-shadow: 0 1px 14px rgba(1, 6, 18, .35); }   /* light: the ground behind is calm now */
.hero-name span { display: block; }
.hero-line { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.15rem, 1.6vw, 1.55rem); line-height: 1.3; color: var(--slate); margin: 0; max-width: 30ch; }
.hero-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.hero-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: -10px; }
.hero-controls .mono-link { font-size: .64rem; opacity: .85; }
.hero-controls .mono-link { background: none; border: 0; cursor: pointer; padding: 0; }

/* Full stage: the same hero, full screen, text away, the mark centred for presenting. */
/* full screen shows only the hero, so it brings the page's room with it: the diagonal light and
   the glass (the still frame, half strength like .env) over the ground */
.hero:fullscreen, .hero.is-full { width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 42% 38% at 50% 48%, rgba(59, 123, 255, .26), rgba(59, 123, 255, 0) 72%),   /* the mark lights the room */
    linear-gradient(118deg, rgba(59, 123, 255, 0) 30%, rgba(59, 123, 255, .14) 56%, rgba(59, 123, 255, 0) 82%),
    linear-gradient(rgba(1, 6, 18, .42), rgba(1, 6, 18, .42)),
    url("../images/env-glass.webp") center / cover no-repeat,
    var(--bg); }
.hero.is-full { position: fixed; inset: 0; z-index: 2000; }
/* full stage keeps only the controls (Exit must stay reachable, also on iPhone where it is the only way out) */
.hero:fullscreen .hero-text > :not(.hero-controls), .hero.is-full .hero-text > :not(.hero-controls) { display: none; }
.hero:fullscreen .hero-controls, .hero.is-full .hero-controls { margin-top: 0; }
.hero:fullscreen .stage, .hero.is-full .stage { -webkit-mask-image: none; mask-image: none; }
/* full stage: a faint, steady backlight behind the mark, independent of the mist, so the mark's
   outline holds even when the mist around it is at its darkest */
.stage-back { position: absolute; inset: 0; pointer-events: none; display: none;
  background: radial-gradient(circle 44vmin at 50% 50%, rgba(140, 170, 255, .16) 0, rgba(70, 115, 255, .11) 55%, rgba(59, 123, 255, 0) 100%); }
.hero:fullscreen .stage-back, .hero.is-full .stage-back { display: block; }
/* Explore the mark: the mark turns both ways under a finger (the page does not scroll here) */
.hero:fullscreen #live, .hero.is-full #live { touch-action: none; }
.explore-hint { position: absolute; z-index: 2; left: 50%; bottom: clamp(88px, 14vh, 140px); transform: translateX(-50%); margin: 0; pointer-events: none;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--frost); white-space: nowrap;
  text-shadow: 0 1px 12px rgba(1, 6, 18, .8); animation: hint-in .6s ease-out both; }
@keyframes hint-in { from { opacity: 0; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .explore-hint { animation: none; opacity: .9; } }

@media (max-aspect-ratio: 1/1) {
  .stage img { object-position: 75% 20%; }
  .hero-text { left: 16px; right: 16px; bottom: 92px; max-width: none; gap: 14px; }
  .hero-name { font-size: clamp(3rem, 15vw, 5.4rem); }
  .hero-line { font-size: 1.1rem; }
  .hero-text { bottom: 32px; }
  .stage-glint { background: radial-gradient(ellipse 60% 30% at 60% 26%, rgba(59, 123, 255, .34), rgba(59, 123, 255, 0) 70%); }
  .stage-shade { background: linear-gradient(to top, rgba(1, 6, 18, .85) 0, rgba(1, 6, 18, .6) 38%, rgba(1, 6, 18, 0) 60%); }
}

.pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--frost); background: rgba(var(--cobalt-rgb), .06); border: 1px solid rgba(var(--cobalt-rgb), .4); border-radius: 999px;
  cursor: pointer; transition: color .25s, border-color .25s, background-color .25s;
}
.pill:hover { color: var(--cobalt); border-color: var(--cobalt); }
.pill[aria-pressed="true"] { color: var(--bg-deep); background: var(--frost); border-color: var(--frost); }
.pill[disabled] { opacity: .6; cursor: progress; }
.pill svg { width: 14px; height: 14px; }
.pill-group { display: inline-flex; gap: 6px; }
.pill-group .pill { padding: 0 12px; }

/* ---- Now: first item wide, the rest in pairs, a leftover wide, sound last -- */
.ni-date, .ni-kind { font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase; }
.ni-kind { letter-spacing: .2em; color: var(--cobalt); }
.ni-date { letter-spacing: .16em; color: var(--slate); }
.now-rows { display: flex; flex-direction: column; gap: 80px; }
.now-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.ni { color: var(--ink); margin: 0; }
.ni--wide { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }
.ni--wide-rev { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
.ni--wide-rev .ni-media { order: 2; }
.ni--half { display: flex; flex-direction: column; gap: 24px; }
.ni-media { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ni-frame { position: relative; aspect-ratio: 16 / 9; background: var(--media); border: 1px solid var(--border); overflow: hidden; }
.ni-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ni-strip3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.ni-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ni-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ni-title { font-family: var(--font-serif); font-weight: 600; line-height: 1.02; color: var(--frost); margin: 0; text-wrap: balance; }
.ni--wide .ni-title, .ni--wide-rev .ni-title { font-size: clamp(2rem, 3.2vw, 3rem); }
.ni--half .ni-title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
.ni-text { font-size: 1rem; line-height: 1.7; color: var(--slate); max-width: 52ch; margin: 0; }
.ni-role { display: flex; gap: 10px; align-items: baseline; margin: 0; }
.ni-role dt { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); }
.ni-role dd { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; color: var(--ink); }
.ni-action {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 22px;
  border: 1px solid rgba(var(--cobalt-rgb), .45); border-radius: 999px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--frost);
  transition: border-color .25s, color .25s;
}
.ni-actions { display: flex; flex-wrap: wrap; gap: 10px; }
button.ni-action { background: transparent; cursor: pointer; }
.ni-action:hover { border-color: var(--cobalt); color: var(--cobalt); }
.ni-action svg { width: 14px; height: 14px; }
/* Placeholder slot for material still to come (preview only, never shipped empty). */
.slot {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px;
  border: 1px dashed rgba(199, 208, 230, .28); color: var(--slate); text-align: center;
  background: repeating-radial-gradient(circle at 70% 40%, transparent 0 21px, var(--tex-1, hsla(200, 80%, 74%, .045)) 21px 22px), var(--media);
}
.slot-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
/* Sound: a slim strip, play button only, never autoplay. */
.ni--sound { display: flex; align-items: center; gap: 28px; padding: 24px 28px; border: 1px solid var(--border); background: var(--bg-deep); }
.ni-play {
  width: 64px; height: 64px; flex: none; border-radius: 999px; border: 1px solid var(--cobalt); background: transparent; color: var(--frost);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .25s, color .25s;
}
.ni-play:hover { background: var(--cobalt); color: var(--bg-deep); }
.ni-play[disabled] { border-color: var(--border); color: var(--slate); background: transparent; cursor: default; }
.ni-play svg { width: 22px; height: 22px; margin-left: 3px; }
.ni-sound-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ni--sound .ni-title { font-size: 1.7rem; }
.ni-sound-spacer { flex: 1 1 auto; height: 1px; background: var(--border); min-width: 60px; }
.ni-credits { font-size: .85rem; color: var(--slate); border-bottom: 1px solid rgba(199, 208, 230, .25); white-space: nowrap; transition: color .25s, border-color .25s; }
.ni-credits:hover { color: var(--cobalt); border-color: var(--cobalt); }

/* ---- About (with What I create) ------------------------------------------ */
.split { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; }
.about-body { display: flex; flex-direction: column; min-width: 0; }
.about-lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.2; color: var(--frost); margin: 0; max-width: 28ch; text-wrap: balance; }
.about-label { font-family: var(--font-mono); font-size: .65rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--cobalt); margin: 56px 0 16px; }
.do-list { margin: 0; border-top: 1px solid var(--border); }
.do-item { display: grid; grid-template-columns: 4fr 7fr; gap: 32px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--border); }
.do-name { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.1; color: var(--frost); }
.do-line { font-size: 1rem; line-height: 1.6; color: var(--slate); margin: 0; }
.about-more { font-size: .9rem; line-height: 1.6; color: var(--slate); margin: 28px 0 0; }
.about-more a { color: var(--slate); border-bottom: 1px solid rgba(199, 208, 230, .25); transition: color .25s, border-color .25s; }
.about-more a:hover { color: var(--cobalt); border-color: var(--cobalt); }

/* ---- Contact: the close of the page ---------------------------------------
   The glass and the one diagonal light of the hero come back, quieter, so the page ends where
   it began instead of trailing off. Same still image as the subpages (images/env-glass.webp). */
.contact { position: relative; isolation: isolate; overflow: hidden; margin-top: 120px; padding: 168px 0 144px; }
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background:
    /* a calm dark area behind the words, as behind the name in the hero */
    radial-gradient(ellipse 70% 80% at 18% 62%, rgba(1, 6, 18, .78) 0, rgba(1, 6, 18, .45) 45%, rgba(1, 6, 18, 0) 75%),
    linear-gradient(118deg, rgba(59, 123, 255, 0) 30%, rgba(59, 123, 255, .12) 56%, rgba(59, 123, 255, 0) 82%),
    url("../images/env-glass.webp") center 70% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 40%, #000 100%);
}
.contact-in { display: flex; flex-direction: column; gap: 24px; }
.contact-label { font-family: var(--font-mono); font-size: .65rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--cobalt); margin: 0; }
.contact-line { font-family: var(--font-serif); font-weight: 600; font-size: clamp(3rem, 8vw, 7.5rem); line-height: .9; color: var(--frost); margin: 0; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 16px 0 0; }
.contact-mail {
  font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 2.6vw, 2.2rem); color: var(--frost);
  border-bottom: 1px solid rgba(var(--cobalt-rgb), .6); padding-bottom: 4px; transition: color .25s, border-color .25s;
  overflow-wrap: anywhere;
}
.contact-mail:hover, .contact-mail:focus-visible { color: var(--cobalt); border-color: var(--cobalt); }
.contact-copy {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(199, 208, 230, .3); border-radius: 999px; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); transition: color .2s, border-color .2s;
}
.contact-copy:hover, .contact-copy:focus-visible { color: var(--cobalt); border-color: var(--cobalt); }
.contact-copy[data-state="ok"] { color: var(--cobalt); border-color: var(--cobalt); }

/* ---- Footer: calm, a way to write ----------------------------------------- */
.foot { border-top: 1px solid var(--border); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 24px 0 36px; }
.foot-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .8rem; color: var(--slate); transition: color .25s; }
.foot-brand:hover { color: var(--frost); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 24px; }

/* anchors land below the fixed nav; the nav glides, unless motion is reduced */
section[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---- Archive -------------------------------------------------------------- */
.arc-main-wrap { padding: 150px 0 120px; }
.arc-intro { font-size: 1.1rem; line-height: 1.7; color: var(--slate); max-width: 56ch; margin: 0; }
.arc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.arc-row { display: grid; grid-template-columns: 90px 168px minmax(0, 1fr) 220px 44px; gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--border); color: inherit; }
.arc-year { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; color: var(--slate); }
.arc-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--media); border: 1px solid var(--border); overflow: hidden; }
.arc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arc-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.arc-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.55rem; line-height: 1.1; color: var(--frost); transition: color .25s; }
.arc-line { font-size: .92rem; line-height: 1.55; color: var(--slate); }
.arc-client { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.arc-arrow { color: var(--slate); display: flex; justify-content: flex-end; transition: color .25s; }
.arc-arrow svg { width: 20px; height: 20px; }
a.arc-row:hover .arc-title, a.arc-row:hover .arc-arrow { color: var(--cobalt); }

/* ---- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .now-pair { gap: 32px; }
  .ni--wide, .ni--wide-rev { grid-template-columns: 1fr; gap: 24px; }
  .ni--wide-rev .ni-media { order: 0; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .arc-row { grid-template-columns: 70px 140px minmax(0, 1fr) 44px; }
  .arc-client { display: none; }
  .sec { padding-top: 88px; }
}
/* ---- Phone ---------------------------------------------------------------- */
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .sec { padding-top: 64px; }
  .sec-head { margin-bottom: 28px; }
  .now-rows { gap: 56px; }
  .now-pair { grid-template-columns: 1fr; gap: 56px; }
  .ni--wide, .ni--wide-rev, .ni--half { gap: 18px; }
  .ni--wide .ni-title, .ni--wide-rev .ni-title, .ni--half .ni-title { font-size: 1.85rem; }
  .ni--sound { flex-wrap: wrap; gap: 16px; padding: 18px; }
  .ni-play { width: 56px; height: 56px; }
  .ni-sound-spacer { display: none; }
  .do-item { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .about-label { margin-top: 40px; }
  .contact { margin-top: 72px; padding: 112px 0 96px; }
  .contact::before { background-position: 0 0, 0 0, 70% 70%; }
  .arc-main-wrap { padding: 110px 0 80px; }
  .arc-row { grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 14px; padding: 14px 0; }
  .arc-year { grid-column: 2; grid-row: 1; font-size: .66rem; }
  .arc-thumb { grid-column: 1; grid-row: 1 / span 2; }
  .arc-text { grid-column: 2; grid-row: 2; }
  .arc-title { font-size: 1.2rem; }
  .arc-line { display: none; }
  .arc-arrow { grid-column: 3; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .mono-link, .pill, .ni-action, .ni-play, .contact-mail, .contact-copy, .about-more a, .foot-brand, .arc-title, .arc-arrow { transition: none; }
}

/* ---- Site viewer: scrollable screenshots in device frames (js/site-viewer.js) ----
   Frame look adapted from Näkijä's device shells; colours kept neutral and dark. */
.sv { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(0, 3, 8, .94); color: var(--ink); font-family: var(--font-sans); }
.sv::backdrop { background: rgba(0, 3, 8, .7); }
.sv[open] { display: grid; grid-template-rows: auto 1fr auto; }
.sv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px max(16px, 3vw); border-bottom: 1px solid var(--border); }
.sv-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; color: var(--frost); margin: 0 auto 0 0; }
.sv-devices { display: inline-flex; gap: 6px; }
.sv-stage { display: grid; place-items: center; min-height: 0; padding: 24px 16px 40px; overflow: hidden; }
.sv-note { margin: 0; padding: 0 16px 16px; text-align: center; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; color: var(--slate); }
.sv-device { position: relative; background: #1b1b1f; border: 3px solid #3c3c44; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.sv-screen {
  aspect-ratio: var(--sv-ratio); overflow-y: auto; overscroll-behavior: contain; background: #fff;
  scrollbar-width: thin; outline: none;
}
.sv-screen:focus-visible { box-shadow: 0 0 0 2px var(--cobalt); }
.sv-screen img { display: block; width: 100%; height: auto; }
/* Laptop: thin bezel, notch, keyboard base. Height fits the dialog. */
.sv-device--laptop { padding: 16px 16px 0; border-bottom: 0; border-radius: 14px 14px 0 0; width: min(1100px, 92vw, calc((100dvh - 240px) * 1440 / 900 + 32px)); }
.sv-device--laptop::before { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 60px; height: 11px; background: #1b1b1f; border-radius: 0 0 6px 6px; z-index: 2; }
.sv-device--laptop::after { content: ''; position: absolute; bottom: -16px; left: -24px; right: -24px; height: 16px; background: linear-gradient(180deg, #6c6c74, #4c4c54); border: 1px solid #3c3c44; border-top: 0; border-radius: 0 0 16px 16px; }
/* Tablet: even bezel, rounded. */
.sv-device--tablet { padding: 20px; border-radius: 30px; width: min(560px, 90vw, calc((100dvh - 230px) * 834 / 1194 + 46px)); }
.sv-device--tablet .sv-screen { border-radius: 10px; }
/* Phone: tall bezel, dynamic island, home bar. */
.sv-device--phone { padding: 44px 12px 54px; border-radius: 46px; width: min(360px, 88vw, calc((100dvh - 230px - 98px) * 390 / 844 + 30px)); }
.sv-device--phone::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 68px; height: 18px; background: #000; border: 1px solid #1a1a22; border-radius: 12px; }
.sv-device--phone::after { content: ''; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: #666; border-radius: 2px; }
.sv-device--phone .sv-screen { border-radius: 8px; }
@media (max-width: 640px) {
  .sv-title { font-size: 1.2rem; flex-basis: 100%; }
  .sv-stage { padding: 16px 8px 24px; }
}


/* Now records still holding placeholders: only visible with ?draft (see index.html) */
html:not(.drafts) [data-draft] { display: none !important; }
.drafts [data-draft] { outline: 1px dashed var(--ember); outline-offset: 12px; }