/* Optical glass, not a drawn monitor frame. The document stays flat. */
/* Oversized haze must not enlarge the mobile layout viewport (390 -> 429px)
 * and change scroll thresholds as it arrives. Clip without a scroll container
 * on body, so the section stages still stick to the document viewport. */
html, body { overflow-x: clip; }
/* Updating the travel offset must not invalidate every glyph's inherited
 * custom properties. Only the copy layer and its backing scrim consume it. */
@property --passage-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}
@font-face {
  font-family: 'Sysfont';
  src: url('../brand/sysfont/sysfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.plate > [data-typewriter] {
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.55;
  letter-spacing: 0.025em;
  padding-top: clamp(24px, 3.5vh, 38px);
  padding-bottom: clamp(24px, 3.5vh, 38px);
  min-height: 112px;
}
.plate > .surface-source {
  color: transparent !important;
  text-shadow: none !important;
  min-height: max(112px, var(--surface-reserve, 0px));
  max-width: none;
  margin-inline: calc(var(--gut) * -1);
  background: var(--band-bg);
}
.surface-source::before, .surface-source::after { visibility: hidden; }
/* V2 has one welcome renderer. This is unconditional so reversing through
 * the entry threshold cannot reveal the old CSS-driven caption for one frame. */
#run-caption { display: none !important; }
.crt-glass {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100vw;
  height: 100dvh;
  z-index: 64;
  pointer-events: none;
  overflow: clip;
  opacity: var(--glass-presence, 0);
  background:
    radial-gradient(ellipse at 50% 50%, transparent 68%, rgb(0 5 4 / 16%) 100%);
}
.crt-glass::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 33% -20%, rgb(225 241 218 / 14%), transparent 59%),
    linear-gradient(118deg, transparent 15%, rgb(227 240 220 / 4%) 28%, transparent 43%);
  transform: translate3d(var(--glass-light-x, 0px), var(--glass-light-y, 0px), 0);
  transition: transform 650ms cubic-bezier(.2,.7,.2,1);
}
/* Stationary scanlines on the glass, not a flashing/rolling interference band. */
.crt-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgb(205 238 218 / 1.5%) 0, transparent 1.2px,
    rgb(0 0 0 / 2.5%) 2.3px, rgb(0 0 0 / 7.5%) 3.1px, transparent 4px);
}
.crt-room-reflection {
  position: absolute;
  top: -11vh;
  right: 5vw;
  width: clamp(230px, 36vw, 660px);
  height: 55vh;
  background: #dcebdd;
  opacity: .038;
  -webkit-mask: url('../brand/window-reflection.svg') center / 100% 100% no-repeat;
  mask: url('../brand/window-reflection.svg') center / 100% 100% no-repeat;
  transform: translate3d(var(--glass-light-x, 0px), var(--glass-light-y, 0px), 0) rotate(-12deg) skewX(-9deg);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
/* One continuous optical shoulder, with its outer edge beyond the viewport.
 * The blurred rounded mask has no internal rectangular filter boundaries or
 * overlapping corner seams. Only the perimeter is visible; the centre is clear.
 * Reflections are localized light sources, never a white outline on black. */
.crt-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --shoulder-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='soft' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='18'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='-18' y='-20' width='1036' height='1040' rx='150' ry='145' fill='none' stroke='white' stroke-width='72' filter='url(%23soft)'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--shoulder-mask);
  mask-image: var(--shoulder-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background:
    radial-gradient(ellipse at 12% 0%, rgb(216 232 205 / 17%), transparent 42%),
    radial-gradient(ellipse at 100% 68%, rgb(182 210 193 / 7%), transparent 34%),
    radial-gradient(ellipse at 50% 45%, transparent 48%, rgb(0 5 3 / 40%) 100%);
}
.surface-type {
  --phosphor: #8eea91;
  --phosphor-strike: #aff0b1;
  /* A luminous core, short horizontal phosphor spread, then a diffuse halo.
   * The dim glass-depth shadow is secondary to emitted green light. */
  --phosphor-emission:
    0 0 .035em rgb(199 255 203 / 75%),
    -.045em 0 .06em rgb(105 244 124 / 65%),
    .06em 0 .085em rgb(105 244 124 / 65%),
    0 0 .16em rgb(92 234 113 / 65%),
    0 0 .4em rgb(79 220 102 / 32%),
    0 0 .75em rgb(79 220 102 / 12%);
  position: fixed;
  z-index: 70;
  top: clamp(28px, 4.2vh, 46px);
  left: 5vw;
  width: 90vw;
  min-height: 44px;
  pointer-events: none;
  color: var(--phosphor);
  font-family: 'Sysfont', Geneva, sans-serif;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0.015em;
  isolation: isolate;
}
.surface-type[hidden], .surface-type [hidden] { display: none !important; }
.surface-type::before {
  --passage-y: inherit;
  content: '';
  position: absolute;
  inset: -46px -5.6% -72px;
  z-index: -1;
  opacity: 0;
  background: linear-gradient(rgb(2 7 5 / 18%), rgb(2 7 5 / 10%) 52%, transparent);
  transform: translateY(var(--passage-y, 0px));
  transition: opacity 250ms ease;
}
body.surface-reading .surface-type::before { opacity: 1; }
.surface-type button, .surface-type a { pointer-events: auto; font: inherit; color: inherit; }
.surface-type button { border: 0; background: none; cursor: pointer; }
.surface-type :is(button, a):focus-visible { outline: 2px solid #b2efc4; outline-offset: 3px; }
.surface-window {
  margin-top: 0;
  margin-inline: -20px;
  padding-inline: 20px;
  overflow: clip;
  -webkit-mask-image: linear-gradient(transparent, #000 4px);
  mask-image: linear-gradient(transparent, #000 4px);
}
.surface-copy {
  /* Set directly on this layer; the wrapper must not inherit this per-frame
   * property through every descendant. */
  position: relative;
  /* A narrow prompt gutter leaves the first line beside the >.
   * No nested scroll area: wheel/touch must always move the document. */
  overflow: visible;
  padding: 0 4px 42px 1.5em;
  text-align: left;
  transform: translate3d(0, var(--passage-y, 0px), 0);
  will-change: transform;
  /* One small optical blur on the text plane, not a filter per character or
   * on the page. It softens the bitmap edges even when the browser is zoomed. */
  filter: blur(.018em);
  /* Soft phosphor troughs are rasterized with the lettering. The separate
   * full-screen scanlines stay on the glass; no per-frame mask repaint. */
  -webkit-mask-image: linear-gradient(#000 0%, rgb(0 0 0 / 96%) 30%, rgb(0 0 0 / 83%) 64%, rgb(0 0 0 / 96%) 90%, #000 100%);
  mask-image: linear-gradient(#000 0%, rgb(0 0 0 / 96%) 30%, rgb(0 0 0 / 83%) 64%, rgb(0 0 0 / 96%) 90%, #000 100%);
  -webkit-mask-size: 100% 4px;
  mask-size: 100% 4px;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}
.surface-copy:empty { display: none; }
.surface-word { display: inline-block; white-space: pre; }
.surface-glyph {
  display: inline-block;
  position: relative;
  transform-origin: center;
  text-shadow: var(--phosphor-emission);
}
.surface-label { filter: blur(.018em); }
.surface-copy .surface-glyph {
  text-shadow:
    var(--phosphor-emission),
    var(--cast-x, 1px) var(--cast-y, 3.5px) .18em rgb(0 0 0 / 18%);
}
.surface-glyph.is-unprinted { visibility: hidden; }
.surface-copy .is-struck { animation: surface-strike 280ms ease-out both; }
.surface-type #nav {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  font: inherit;
  transition: none;
}
body .surface-type #nav-cursor { width: 44px; height: 44px; padding: 12px; opacity: 1; color: var(--phosphor); }
.surface-caret {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0.52em;
  height: 1.05em;
  background: var(--phosphor);
  filter: blur(.025em);
  box-shadow:
    0 0 .06em rgb(187 255 194 / 75%),
    .045em 0 .12em rgb(105 244 124 / 65%),
    0 0 .25em rgb(92 234 113 / 55%),
    0 0 .6em rgb(79 220 102 / 25%);
  animation: surface-caret 1.3s steps(1, end) infinite;
}
.surface-prompt { display: block; line-height: 1.5; text-shadow: var(--phosphor-emission); transform-origin: center; transition: transform 180ms ease; }
#nav-cursor[aria-expanded="true"] .surface-prompt { transform: rotate(90deg); }
.surface-type #nav { top: -12px; left: -12px; }
.surface-type.menu-open .surface-copy { visibility: hidden; }
.surface-type.menu-open::before {
  position: fixed; inset: 0; opacity: 1; transform: none;
  background: radial-gradient(ellipse at 12% 20%, rgb(2 9 5 / 88%), rgb(2 9 5 / 50%) 38%, transparent 80%);
}
.surface-type #nav-menu {
  position: absolute;
  top: 42px;
  /* Let the curved first glyph and its glow extend left without being cut by
   * the menu's scrollport; compensate so the lettering keeps its origin. */
  left: -2px;
  width: min(614px, calc(90vw + 14px));
  min-width: 0;
  max-height: min(68vh, 520px);
  overflow: auto;
  padding: 8px 18px 24px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform-origin: top;
  animation: terminal-unroll 180ms ease-out;
}
.surface-type #nav-menu a, .surface-read-all {
  color: inherit;
  display: block;
  padding: 9px 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  text-transform: none;
  white-space: normal;
  text-align: left;
}
.surface-read-all { border-top: 1px solid rgb(160 214 180 / 18%) !important; width: 100%; margin-top: 10px; }
/* Highlight the phosphor, not a rectangular link box on the curved glass. */
.surface-type #nav-menu :is(a, button):is(:hover, :focus-visible) {
  background: none;
  outline: none;
  box-shadow: none;
  color: #c5ffd0;
}
.surface-type #nav-menu a:is(:hover, :focus-visible) .surface-glyph,
.surface-type #nav-menu button:is(:hover, :focus-visible) {
  text-shadow: var(--phosphor-emission), 0 0 .25em #a5ffc0, 0 0 .65em rgb(113 255 154 / 70%);
}
/* Keyboard focus has a shape cue as well as brightness; each glyph carries
 * its own underline so the indicator follows the same lens curvature. */
.surface-type #nav-menu a:focus-visible .surface-glyph,
.surface-type #nav-menu button:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}
@keyframes surface-caret { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0.1; } }
@keyframes surface-strike { from { color: var(--phosphor-strike); } to { color: var(--phosphor); } }
@media (max-width: 600px) {
  .surface-type { top: 42px; font-size: 18px; line-height: 1.5; }
  .crt-room-reflection { opacity: .025; }
}
@media (max-height: 500px) {
  .surface-type { top: 14px; }
  .surface-copy { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .surface-caret, .surface-copy .is-struck, .surface-type #nav-menu { animation: none; }
  .surface-prompt { transition: none; }
  .surface-glyph, .crt-glass::before { transform: none !important; }
  .surface-type::before, .crt-glass::before, .crt-room-reflection { transition: none; }
  .surface-copy { -webkit-mask-image: none; mask-image: none; }
}
@media (forced-colors: active) {
  .surface-type #nav-menu :is(a, button):focus-visible { outline: 2px solid Highlight; }
  .crt-glass { display: none; }
  .surface-type { background: Canvas; color: CanvasText; }
  .surface-glyph { color: CanvasText; text-shadow: none; }
  .surface-copy, .surface-label, .surface-caret { filter: none; }
  .surface-copy { -webkit-mask-image: none; mask-image: none; }
  .surface-caret { background: CanvasText; box-shadow: none; }
}

@keyframes terminal-unroll { from { opacity: .2; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Browser-native travel owns one hold on desktop AND touch screens. */
.native-type .type-scroller { height: auto; }
.native-type :is(.type-scroller,.hat-scroller,.surface-track)::after { content: ''; display: block; height: var(--print-hold, 0px); }
.native-type :is(.type-stage,.hat-stage,.surface-track > .plate) { position: sticky; top: 0; }
.surface-track { position: relative; flex: none; }
/* One final pin, shared by the sign-off, title, team and footer. The reserved
 * typing distance is absorbed above the cards, not added a second time after
 * a short header wrapper. At document end the title still has its text strip. */
.page-tail > .team-head { margin-inline: 0; flex: none; }
/* Preserve the existing row on laptops; give the three portraits proportionate
 * room on large displays instead of keeping a fixed 900px island. */
.page-tail .team-grid { max-width: clamp(900px, 62vw, 1880px); }
/* A tall display can allow a 600px portrait, but each grid column is much
 * narrower. Constrain the frame before its square aspect ratio is resolved;
 * do not let neighboring cards clip oversized images into narrow slices. */
.page-tail .team-card { min-width: 0; }
.page-tail .team-art { max-width: 100%; }
.native-type .page-tail {
  position: relative;
  padding-top: var(--sec-pad);
  min-height: calc(100svh + var(--sec-pad) + var(--print-hold, 0px));
}
.native-type .page-tail > .team-head { position: sticky; top: 0; z-index: 45; }
.native-type .page-tail .team-head .sec-title { animation: none; transform: none; opacity: 1; }
.native-type .page-tail #team { padding-top: 0; scroll-margin-top: var(--tail-header-height, 0px); }
.native-type .page-tail .team-hold { min-height: var(--print-hold, 0px); }
.native-type .page-tail .team-art { width: min(600px, 60vw, calc(45svh - 110px), var(--tail-art-max, 600px)); }
@media (max-width: 600px) and (max-height: 600px) {
  .native-type .page-tail .sec-footer { padding-block: 10px; }
  .native-type .page-tail .coin { height: 40px; }
  .native-type .page-tail .credits { margin-top: 8px; }
  .native-type .page-tail .footer-links { margin-top: 8px; gap: 6px 12px; }
  .native-type .page-tail .footer-links a { font-size: 11px; min-height: 32px; display: inline-flex; align-items: center; }
}
/* Sample only the rim, not a full-viewport blur with its centre discarded. */
.crt-refraction { position: absolute; -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); }
.crt-refraction.top { inset: 0 0 auto; height: 6vh; }
.crt-refraction.bottom { inset: auto 0 0; height: 6vh; }
.crt-refraction.left { inset: 6vh auto 6vh 0; width: 5vw; }
.crt-refraction.right { inset: 6vh 0 6vh auto; width: 5vw; }
.band-mosaic { background-repeat: repeat; background-size: calc(clamp(54px, 6vw, 88px) * 12) calc(clamp(54px, 6vw, 88px) * 8); }