/* THE GLASS GALLERY — the look (31 Oct 2026). His Glass brand: near-black, one font at its extremes (Jost 200 huge, small wide capitals),
   IBM Plex Mono kickers, one blue at many opacities, hairlines not boxes, a viewfinder round the picture. */

@font-face { font-family: 'Jost'; font-style: normal; font-display: swap; font-weight: 200; src: url(fonts/jost-latin-ext-200-normal.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; }
@font-face { font-family: 'Jost'; font-style: normal; font-display: swap; font-weight: 200; src: url(fonts/jost-latin-200-normal.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: 'Jost'; font-style: normal; font-display: swap; font-weight: 300; src: url(fonts/jost-latin-ext-300-normal.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; }
@font-face { font-family: 'Jost'; font-style: normal; font-display: swap; font-weight: 300; src: url(fonts/jost-latin-300-normal.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: 'Jost'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/jost-latin-ext-400-normal.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; }
@font-face { font-family: 'Jost'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/jost-latin-400-normal.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: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-ext-400-normal.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; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(fonts/ibm-plex-mono-latin-400-normal.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; }

:root {
  --bg: #020204; --text: #e8edf6; --body: #cfd6e2; --kick: #9aa6ba; --dim: #6d7688; --blue: #4fc8ff;
  --hair: rgba(143,160,190,.18); --hair2: rgba(143,160,190,.34);
  --f: 'Jost', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gap: 14px; --dockH: 78px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-snap-type: y proximity; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--body); font: 300 18px/1.65 var(--f); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
main { overflow-x: clip; }
section { position: relative; scroll-snap-align: start; }
a { color: inherit; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }

.kick { font: 400 11px/1.4 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--blue); margin: 0 0 24px; padding-left: .3em; }
.rule { height: 1px; width: min(420px, 62vw); margin: 28px auto; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .75; }

/* ── 1. THE HERO ─────────────────────────────────────────────────────────────────────────────── */
.hero { height: 100vh; height: 100svh; min-height: 520px; display: grid; place-items: center; overflow: hidden; text-align: center;
  background: radial-gradient(120% 90% at 50% 38%, #0b1322 0%, #05070d 46%, var(--bg) 78%); }
.hero::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(38% 28% at 50% 46%, rgba(79,200,255,.09), transparent 70%); animation: breathe 9s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.heroIn { position: relative; z-index: 1; padding: 0 16px; }      /* (the words sit over anything put behind them in the hero) */
.giant { margin: 0; font: 200 min(15.5vw, 250px)/.92 var(--f); letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: var(--text); }
.sub { margin: 0; font: 300 clamp(15px, 1.7vw, 21px)/1.5 var(--f); letter-spacing: .06em; color: var(--body); }
.cue { position: absolute; z-index: 1; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 8px 0 calc(8px + .34em);
  text-decoration: none; font: 400 10px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--kick); }
.cue i { display: block; width: 1px; height: 46px; background: linear-gradient(var(--blue), transparent); transform-origin: top; animation: cue 2.4s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── 2. THE STATEMENT ────────────────────────────────────────────────────────────────────────── */
.statement { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 12vh 20px; text-align: center; background: var(--bg); }
.big { margin: 0; font: 200 clamp(30px, 5.2vw, 76px)/1.14 var(--f); letter-spacing: .01em; color: var(--text); text-wrap: balance; }

/* ── 3. THE WORK: the presentations in a viewfinder ─────────────────────────────────────────── */
.work { height: 100vh; height: 100svh; min-height: 460px; display: flex; flex-direction: column; background: var(--bg); }
.frame { position: relative; flex: 1 1 auto; min-height: 0; margin: var(--gap) var(--gap) 0; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--hair); }
.screens { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; opacity: 1; transition: opacity 1.4s ease; }
.screen.incoming { opacity: 0; pointer-events: none; }
.veil { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 0 16px; text-align: center; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 1.2s ease; }
.veil.on { opacity: 1; }
.veil .kick { margin: 0; color: var(--kick); }
.veil .kick #veilTitle { color: var(--text); }
.veilBar { width: min(320px, 60vw); height: 1px; background: var(--hair); overflow: hidden; }
.veilBar i { display: block; height: 100%; background: var(--blue); transform-origin: left; transform: scaleX(.04); transition: transform .4s ease; }
.ticks i { position: absolute; z-index: 2; width: 22px; height: 22px; border: 0 solid rgba(232,237,246,.7); pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(2,2,4,.8)); }
.ticks i:nth-child(1) { top: 10px; left: 10px; border-top-width: 1px; border-left-width: 1px; }
.ticks i:nth-child(2) { top: 10px; right: 10px; border-top-width: 1px; border-right-width: 1px; }
.ticks i:nth-child(3) { bottom: 10px; left: 10px; border-bottom-width: 1px; border-left-width: 1px; }
.ticks i:nth-child(4) { bottom: 10px; right: 10px; border-bottom-width: 1px; border-right-width: 1px; }
.tag { position: absolute; z-index: 2; top: 17px; left: 42px; font: 400 10.5px/1 var(--mono); letter-spacing: .28em; color: rgba(232,237,246,.86); pointer-events: none; text-shadow: 0 0 3px rgba(2,2,4,.9), 0 1px 8px rgba(2,2,4,.7); white-space: nowrap; }
.tag::before { content: ''; position: absolute; z-index: -1; left: -70px; top: -50px; width: calc(100% + 160px); height: 120px; background: radial-gradient(closest-side, rgba(2,2,4,.55), rgba(2,2,4,0)); }      /* (a soft dark corner, so the tag reads on a pale sky) */
.tag b { font: 400 11px/1 var(--f); letter-spacing: .42em; color: var(--text); }

.dock { position: relative; flex: none; height: var(--dockH); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 var(--gap); }
.dockLine { position: absolute; left: var(--gap); right: var(--gap); top: 0; height: 1px; background: var(--hair); overflow: hidden; }
.dockLine i { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: 0; }
.dockLine.busy i { opacity: 1; animation: sweep 1.3s linear infinite; }
@keyframes sweep { to { left: 100%; } }
.nav { justify-self: start; display: inline-flex; align-items: center; gap: 14px; min-height: 48px; min-width: 48px; padding: 0 12px; background: none; border: 0; cursor: pointer;
  font: 400 12px/1 var(--f); letter-spacing: .34em; text-transform: uppercase; color: var(--text); }
.nav.next { justify-self: end; }
.nav .chev { font: 200 28px/1 var(--f); letter-spacing: 0; color: var(--blue); transition: transform .35s ease; }
.nav .word { padding: 4px 0 4px .34em; border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav:hover .word { border-color: var(--hair2); }
.nav.prev:hover .chev { transform: translateX(-4px); }
.nav.next:hover .chev { transform: translateX(4px); }
.work.single .nav { visibility: hidden; }
.now { min-width: 0; padding: 0 12px; text-align: center; }
.now h3 { margin: 0; font: 300 clamp(13px, 1.25vw, 18px)/1.25 var(--f); letter-spacing: .36em; padding-left: .36em; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now p { margin: 7px 0 0; font: 400 10px/1.2 var(--mono); letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; color: var(--kick); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.marks { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; text-align: center;
  font: 400 9.5px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.work > .marks { flex: none; min-height: 40px; padding: 0 16px max(10px, env(safe-area-inset-bottom)); }
.marks b, .marks a { color: var(--body); font-weight: 400; text-decoration: none; }
.marks a:hover { color: var(--blue); }
.marks > i { font-style: normal; color: var(--hair2); }
.marks span { display: inline-flex; align-items: center; gap: 7px; }
.marks img.mk { height: 18px; width: auto; display: block; }
.marks img.mk.wide { height: 15px; opacity: .92; }
.marks a:hover img.mk { opacity: 1; }

/* ── 4. ABOUT, AND THE FOOT ─────────────────────────────────────────────────────────────────── */
.about { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 14vh 20px 10vh; text-align: center; }
.aboutIn { max-width: 680px; }
.mid { margin: 0; font: 200 clamp(42px, 8vw, 104px)/1 var(--f); letter-spacing: .32em; padding-left: .32em; text-transform: uppercase; color: var(--text); }
.aboutText p { margin: 0 0 1.1em; font: 300 clamp(16px, 1.4vw, 19px)/1.75 var(--f); color: var(--body); }
.foot { display: grid; justify-items: center; gap: 18px; padding: 46px 20px max(40px, env(safe-area-inset-bottom)); text-align: center; border-top: 1px solid var(--hair); }
.foot #siteLink { padding: 12px 6px 10px calc(6px + .34em); font: 400 12px/1 var(--f); letter-spacing: .34em; text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--hair2); }
.foot #siteLink:hover { border-color: var(--blue); }
.footLine { margin: 0; font: 400 10px/1.5 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }

/* ── A PHONE ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --gap: 8px; --dockH: 70px; }
  .nav { gap: 0; padding: 0 8px; }
  .nav .word { display: none; }
  .nav .chev { font-size: 32px; }
  .now { padding: 0 4px; }
  .now h3 { font-size: 12px; letter-spacing: .22em; padding-left: .22em; }
  .now p { font-size: 9px; letter-spacing: .18em; padding-left: .18em; }
  .marks { gap: 2px 9px; font-size: 8.5px; letter-spacing: .14em; }
  .marks img.mk { height: 15px; } .marks img.mk.wide { height: 12px; }
  .work > .marks { min-height: 44px; padding-top: 2px; }
  .tag { display: none; }      /* (on a phone the presentation's own icons fill the top and its mode pill the bottom: the dock names the scan) */
  .ticks i { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cue i, .hero::before, .dockLine.busy i { animation: none; }
}