/* ========================================================
   SEAN JOHNSON — shared system, v2 (Oct 2026)

   The ground is quiet paper. Frutiger Aero lives in the objects
   (the Vista window header, Baggy's gadget, glossy buttons), not
   in the wallpaper, so each brand's own color is the loudest
   thing on the page. (The full-bleed blue sky was retired Oct 2026.)

   Type:
     --display  Archivo. One family; the width axis is the voice.
                Expanded (125) for statements, normal (100) for
                headings, condensed (75) for labels and figures.
     --body     Source Sans 3. Humanist, Myriad lineage: the
                Mac/Aero era reading face.
     --chrome   Segoe UI, Vista's own system face, for window
                chrome only (title bars, menus, Baggy).
   ======================================================== */

:root {
  --sky-top: #8fd0f2;
  --sky-mid: #3f97cf;
  --sky-low: #155f93;
  --aqua-deep: #0a6e9c;
  --aqua-mid: #1d8fb8;
  --aqua-bright: #4ec0e0;
  --aqua-ink: #0b5f87;
  --leaf: #6dbe45;
  --leaf-dark: #2f7a1c;
  --sun: #ffd96a;
  --coral: #ff7a59;

  --ink: #0b2538;
  --ink-soft: #3d5a6f;
  --ink-faint: #5f7a8c;
  --rule: rgba(11, 37, 56, 0.12);
  --paper: #f3f2ee;
  --paper-deep: #e9e7e1;

  --pane: #ffffff;
  --pane-border: rgba(11, 37, 56, 0.1);
  --pane-shadow: 0 1px 2px rgba(11,37,56,0.05), 0 14px 34px -22px rgba(11,37,56,0.35);

  --display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --chrome: 'Segoe UI', 'Source Sans 3', system-ui, sans-serif;
  --led: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Frutiger Aero orb recipes */
  --aero-aqua-orb: radial-gradient(ellipse 130% 120% at 50% 135%, #eaf7ff 0%, #b3e5ff 22%, #4ec0e0 55%, #1d8fb8 88%, #0a6e9c 105%);
  --aero-leaf-orb: radial-gradient(ellipse 130% 120% at 50% 135%, #f0fadf 0%, #c8ec9c 22%, #95d96b 50%, #6dbe45 78%, #3d8b27 100%);
  --aero-coral-orb: radial-gradient(ellipse 130% 120% at 50% 135%, #ffe4d8 0%, #ffbfa8 22%, #ff9b80 50%, #ff7a59 78%, #cc4528 100%);
  --aero-sun-orb: radial-gradient(ellipse 130% 120% at 50% 135%, #fff6d8 0%, #ffe48a 40%, #ffc94a 75%, #d99a1f 100%);
  --aero-glass-orb: radial-gradient(ellipse 130% 120% at 50% 135%, rgba(255,255,255,0.95) 0%, rgba(224,244,255,0.75) 35%, rgba(135,212,255,0.45) 75%, rgba(78,192,224,0.25) 100%);
  --aero-night-orb: radial-gradient(ellipse 130% 120% at 50% 135%, #3a6f8f 0%, #17435e 40%, #0b2538 80%, #050f17 100%);
  --aero-shine: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.32) 35%, rgba(255,255,255,0.06) 75%, transparent 100%);
  --aero-halo-aqua: 0 0 28px rgba(78,192,224,0.45);
  --aero-halo-leaf: 0 0 22px rgba(109,190,69,0.55);

  --ease-settle: cubic-bezier(0.2, 0.85, 0.25, 1);
  --gutter: 24px;
}
@media (max-width: 640px) { :root { --gutter: 16px; } }

@view-transition { navigation: auto; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--paper); }
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }

body {
  font-family: var(--body);
  font-size: 17px;
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 999; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 8px; font: 600 15px var(--body); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #0a6e9c; outline-offset: 3px; border-radius: 4px; }

/* ========== TYPE ROLES ========== */
.t-label { font-family: var(--display); font-weight: 600; font-stretch: 75%; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; }

/* ========== LAYOUT ========== */
.shell { position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 22px var(--gutter) 160px; }

/* ========== VISTA WINDOW HEADER ========== */
.vw-window {
  position: sticky; top: 12px; z-index: 50; margin: 0 auto 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(232,246,253,0.84) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(200%); backdrop-filter: blur(22px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 8px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), inset 0 0 0 1px rgba(78,192,224,0.22), 0 10px 28px rgba(11,37,56,0.16), 0 1px 3px rgba(11,37,56,0.12);
  font-family: var(--chrome);
}
.vw-titlebar {
  display: flex; justify-content: space-between; align-items: center; height: 30px; padding: 0 4px 0 12px; position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(165,222,245,0.7) 48%, rgba(78,192,224,0.78) 52%, rgba(29,143,184,0.72) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.5);
}
.vw-titlebar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.05)); pointer-events: none; }
.vw-titleblock { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; text-decoration: none; color: inherit; }
.vw-icon { width: 10px; height: 10px; border-radius: 50%; background: var(--aero-leaf-orb); box-shadow: inset 0 1px 1px rgba(255,255,255,0.75), inset 0 -1px 1px rgba(0,0,0,0.18), 0 0 7px rgba(109,190,69,0.75); }
.vw-title { font: 600 12.5px var(--chrome); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.75); white-space: nowrap; }
.vw-controls { display: flex; gap: 2px; position: relative; z-index: 1; }
.vw-btn {
  width: 28px; height: 22px; border-radius: 4px; border: 1px solid rgba(10,110,156,0.42);
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(185,225,245,0.65) 48%, rgba(145,208,238,0.60) 52%, rgba(110,190,228,0.55) 100%);
  font: 700 10px var(--chrome); color: rgba(10,50,80,0.9); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 1px 3px rgba(0,0,0,0.15);
}
.vw-btn.close { background: linear-gradient(180deg, rgba(255,165,140,0.92) 0%, rgba(230,72,48,0.87) 48%, rgba(205,48,26,0.82) 52%, rgba(178,26,10,0.77) 100%); border-color: rgba(155,32,16,0.52); color: #fff; }
.vw-menubar {
  display: flex; align-items: stretch; height: 40px; padding: 3px 4px; gap: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(230,245,253,0.55));
  border-top: 1px solid rgba(255,255,255,0.75); overflow-x: auto; scrollbar-width: none;
}
.vw-menubar::-webkit-scrollbar { display: none; }
.vw-menubar a {
  display: flex; align-items: center; gap: 7px; padding: 0 12px;
  font: 400 14px var(--chrome); color: var(--ink); text-decoration: none;
  border-radius: 3px; border: 1px solid transparent; transition: background .15s, border-color .15s; white-space: nowrap;
}
.vw-menubar a .mi { width: 16px; height: 16px; flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.18)); }
.mi-aqua { background: var(--aero-aqua-orb); } .mi-leaf { background: var(--aero-leaf-orb); } .mi-coral { background: var(--aero-coral-orb); }
.mi-night { background: var(--aero-night-orb); } .mi-sun { background: var(--aero-sun-orb); } .mi-glass { background: var(--aero-glass-orb); }
.vw-menubar a:hover { background: linear-gradient(180deg, rgba(255,225,140,0.5), rgba(255,200,80,0.28)); border-color: rgba(220,160,40,0.5); }
.vw-menubar a.current { background: linear-gradient(180deg, rgba(78,192,224,0.45), rgba(29,143,184,0.32)); border-color: rgba(10,110,156,0.45); color: var(--aqua-deep); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
@media (max-width: 720px) { .vw-window { margin: 0 0 28px; } .vw-menubar a { padding: 0 10px; } }
@media (max-width: 480px) { .vw-controls .vw-btn:not(.close) { display: none; } }

/* ========== PANES: the glass the content sits on ========== */
.pane {
  background: var(--pane); border: 1px solid var(--pane-border); border-radius: 12px; box-shadow: var(--pane-shadow);
  position: relative;
}
.pane > * { position: relative; }
/* a pane with its own Vista title strip */
.pane-bar { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--rule); font: 600 13px var(--chrome); color: var(--ink-soft); background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(232,246,253,0.9) 48%, rgba(214,238,250,0.9) 52%, rgba(226,243,252,0.9) 100%); }
.pane-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--aero-aqua-orb); box-shadow: 0 0 6px rgba(78,192,224,.6); flex-shrink: 0; }
.pane-bar .sp { flex: 1; }

/* ========== BUTTONS (aero orb) ========== */
.btn {
  font: 600 16px var(--body); padding: 12px 22px; border-radius: 999px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  cursor: pointer; border: none; position: relative; overflow: hidden; isolation: isolate; white-space: nowrap;
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 0.45s cubic-bezier(0.18, 0.9, 0.25, 1), transform 0.2s ease-out, box-shadow 0.3s ease-out;
}
.btn::before { content: ""; position: absolute; top: 1px; left: 5%; right: 5%; height: 48%; background: var(--aero-shine); border-radius: 999px; pointer-events: none; z-index: -1; }
.btn-primary { background: var(--aero-aqua-orb); color: #fff; text-shadow: 0 1px 1px rgba(10,37,56,0.5); border: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 5px rgba(10,110,156,0.3), 0 5px 12px -2px rgba(10,37,56,0.35), var(--aero-halo-aqua); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 9px 18px -3px rgba(10,37,56,0.4), 0 0 44px rgba(78,192,224,0.7); }
.btn-ghost { background: linear-gradient(180deg, #fff, #e8f5fc); border: 1px solid rgba(10,110,156,0.22); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 3px 8px -2px rgba(10,80,120,0.2); }
.btn-ghost::before { opacity: 0.5; }
.btn-ghost:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 7px 14px -2px rgba(10,80,120,0.28); }
.btn-leaf { background: var(--aero-leaf-orb); color: #fff; text-shadow: 0 1px 1px rgba(10,50,10,0.5); border: 1px solid rgba(255,255,255,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -3px 5px rgba(30,100,20,0.25), 0 5px 12px -2px rgba(10,60,10,0.3), var(--aero-halo-leaf); }
.btn-leaf:hover { transform: translateY(-2px); }
.btn-night { background: var(--aero-night-orb); color: #fff; border: 1px solid rgba(255,255,255,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 6px 14px -3px rgba(0,0,0,0.45); }
.btn-night::before { opacity: 0.35; }
.btn-night:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

.text-link { font-weight: 600; color: var(--aqua-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover { text-decoration-thickness: 2px; }

/* ========== SECTIONS ========== */
section { margin: 120px 0; scroll-margin-top: 120px; }
@media (max-width: 640px) { section { margin: 84px 0; } }
.sec-head { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: end; margin-bottom: 28px; }
.sec-head .no { font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.sec-head h2 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(36px, 5.4vw, 68px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; gap: 10px; } .sec-head .no { justify-self: start; } }

/* ========== INTERACTION: tilt + glare ========== */
.tilt { --tilt-x: 0deg; --tilt-y: 0deg; --gx: 50%; --gy: -200px; transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform 0.55s var(--ease-settle), box-shadow 0.3s ease-out; }
.tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle 260px at var(--gx) var(--gy), rgba(255,255,255,0.5), transparent 65%); opacity: 0; transition: opacity 0.45s ease-out; mix-blend-mode: soft-light; z-index: 6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .tilt:hover { transition: transform 0.12s ease-out, box-shadow 0.3s ease-out; } .tilt:hover::after { opacity: 1; } }

/* ========== REVEAL ========== */
.reveal.anim { transform: translateY(20px); opacity: 0; transition: opacity 0.7s ease-out, transform 0.7s var(--ease-settle); }
.reveal.anim.in { transform: none; opacity: 1; }

/* ========== STATUS LIGHTS ========== */
.status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #b9c7d1; box-shadow: inset 0 1px 1px rgba(255,255,255,.7); }
.status.live::before { background: var(--aero-leaf-orb); box-shadow: 0 0 7px rgba(109,190,69,.8); }
.status.wip::before { background: var(--aero-sun-orb); box-shadow: 0 0 7px rgba(255,200,80,.8); }

/* ========== FOOTER ========== */
footer.site-foot { margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; font: 400 14px var(--chrome); color: var(--ink-soft); }
footer.site-foot nav { display: flex; gap: 6px 18px; flex-wrap: wrap; justify-content: center; }
footer.site-foot a { color: var(--ink); text-decoration: none; padding: 6px 0; }
footer.site-foot a:hover { text-decoration: underline; }
.visit-counter {
  display: inline-block; background: radial-gradient(ellipse at 50% 30%, #1a1f1a 0%, #050805 100%); color: #58ff5a; padding: 3px 10px 4px; border-radius: 4px;
  font: 12px var(--led); margin-left: 8px; border: 1px solid #1a1a1a; letter-spacing: 0.18em; text-shadow: 0 0 4px rgba(88,255,90,0.8);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.6);
}

/* ========== LIGHTBOX ========== */
.lb { position: fixed; inset: 0; z-index: 990; display: none; background: rgba(4, 14, 22, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); align-items: center; justify-content: center; padding: 56px 16px 24px; }
.lb.open { display: flex; animation: lb-in .25s ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb figure { max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.lb img, .lb video { max-height: calc(100dvh - 140px); width: auto; max-width: 100%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); background: #111; }
.lb figcaption { color: #fff; font: 600 15px var(--body); text-align: center; }
.lb figcaption small { display: block; font-weight: 400; opacity: 0.75; margin-top: 2px; font-size: 14px; }
.lb-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 36px; border-radius: 6px; border: 1px solid rgba(155,32,16,0.52); color: #fff; font-size: 18px; cursor: pointer; background: linear-gradient(180deg, rgba(255,165,140,0.92) 0%, rgba(230,72,48,0.87) 48%, rgba(205,48,26,0.82) 52%, rgba(178,26,10,0.77) 100%); }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: var(--aero-glass-orb); color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.lb-nav.prev { left: 14px; } .lb-nav.next { right: 14px; }
@media (max-width: 640px) { .lb-nav { top: auto; bottom: 18px; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn { translate: 0 0 !important; }
  .tilt { transform: none !important; }
  .reveal.anim { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ========== TOUCH: fingers, not cursors ==========
   Every tappable thing gets at least a 44px target on touch screens.
   The visual size can stay small; the hit area grows. */
@media (pointer: coarse) {
  .vw-titlebar { height: 38px; }
  .vw-titleblock { min-height: 38px; padding-right: 12px; }
  .vw-menubar { height: 50px; padding: 3px 4px; }
  .vw-menubar a { min-height: 44px; padding: 0 14px; font-size: 15px; }
  .text-link { display: inline-block; padding: 10px 0; }
  .table .k, footer.site-foot a { display: inline-block; padding: 10px 0; }
}