/* =====================================================================
   FLORENT//OS  v22.0  — PIXEL EDITION
   palette: BLACK · WHITE · YELLOW · BLUE   ·   fonts: pixel + display only
   Florent Emmanuel Cucchi — Digital Communication Design
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=Space+Mono:wght@400;700&family=VT323&display=swap');
/* header display font: Silkscreen — a true even-grid pixel font (loaded via the @import above) */

:root {
  /* STRICT MONOCHROME — only black, white and greys. never any colour. */
  --bg:      #000000;   /* pure black — primary surface */
  --panel:   #000000;   /* window surface (Blackbit style: black) */
  --panel-2: #0d0d0d;   /* faintly raised surface */
  --ink:     #ffffff;   /* pure white — text, borders, icons */
  --yellow:  #ffd400;   /* ACCENT — yellow (on black/white base) */
  --blue:    #9a9a9a;   /* secondary accent → mid grey */
  --blue-lt: #c8c8c8;   /* light secondary → light grey */
  --stone:   #d8d8d8;   /* light grey */
  --dim:     #8a8a8a;   /* dim / muted text */
  --line:    rgba(255,255,255,0.30);

  --px:    'Press Start 2P', monospace;   /* MAJOR + secondary titles (pixel) */
  --head1: 'Silkscreen', 'Press Start 2P', monospace;  /* header font (even-grid pixel) */
  --head2: 'Silkscreen', 'Press Start 2P', monospace;  /* same font — kept as an alias so paired-title markup stays valid */
  --mono:  'Space Mono', ui-monospace, monospace;  /* base text + minor titles (monospace) */
  --term:  var(--mono);                   /* base body text → monospace */
  --label: var(--mono);                   /* minor titles / captions → monospace */
  --vt:    'VT323', monospace;            /* terminal app only (keeps the CRT feel) */

  --bar: 54px;
  --shadow: 7px 7px 0 #fff;   /* hard white drop-shadow (Blackbit) */

  /* golden-ratio (φ = 1.618) spacing + type scales — each step ×1.618 */
  --phi: 1.618;
  --sp-1: 8px;    /* base */
  --sp-2: 13px;   /* 8 ·φ  */
  --sp-3: 21px;   /* ·φ    */
  --sp-4: 34px;   /* ·φ    */
  --sp-5: 55px;   /* ·φ    */
  --sp-6: 89px;   /* ·φ    */
  /* TYPE SCALE — Space Mono (body) + Silkscreen (headers). ~1.25 modular ratio. */
  --fs-meta: 11px;   /* micro labels / meta            */
  --fs-cap:  13px;   /* captions / small UI            */
  --fs-body: 16px;   /* base body copy                 */
  --fs-lead: 19px;   /* lead paragraph / large body    */
  --fs-h3:   21px;   /* sub-headers · categories       */
  --fs-h2:   27px;   /* section / window titles         */
  --fs-h1:   34px;   /* project titles                  */
  --fs-disp: 44px;   /* hero display name               */
  /* legacy aliases (kept so existing rules stay valid) */
  --fs-0: var(--fs-meta);
  --fs-1: var(--fs-cap);
  --fs-2: var(--fs-h3);
  --fs-3: var(--fs-h1);
  --fs-4: var(--fs-disp);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--term);
  font-size: var(--fs-body);
  line-height: 1.45;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none; user-select: none;
  -webkit-font-smoothing: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }
::selection { background: var(--yellow); color: #000; }
img, svg { display: block; }
.px-ico { image-rendering: pixelated; shape-rendering: crispEdges; fill: currentColor; }
.icon .glyph { color: var(--ink); }
.icon.danger .glyph { color: var(--yellow); }
.dock button { color: var(--ink); }
.dock button:hover { color: #000; }
.avatar { color: var(--yellow); }
svg.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* small caps pixel label helper */
.k-px { font-family: var(--px); text-transform: uppercase; line-height: 1.6; }
.k-lbl { font-family: var(--label); text-transform: uppercase; letter-spacing: .03em; }

/* header display font (Silkscreen) — used across ALL headers of the site. head1/head2 are
   both Silkscreen now; the paired f1/f2 markup is kept intact (casing forced below). */
.f1 { font-family: var(--head1); text-transform: lowercase; }
.f2 { font-family: var(--head2); text-transform: none; }
.disp, .who h2, .sub-h, .win .title, .boot-name, .proj .head h2, .secret .big,
.rd-role, .soft-cat, .road .sub-h, .menubar .logo, .tile .info h4 {
  font-family: var(--head1); text-transform: lowercase;
}
/* the second font of a paired phrase keeps its casing (Stopwatch may be uppercase) */
.disp .f2, .boot-name .f2, .sub-h .f2, .win .title .f2, .menubar .logo b { font-family: var(--head2); text-transform: none; }

/* ============ CRT / GRAIN ============ */
.crt { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.crt::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.16) 2px 4px);
  opacity: .28;
}
.crt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 130% at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%);
}
.grain {
  position: fixed; inset: -50%; z-index: 8999; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainshift .5s steps(2) infinite;
}
@keyframes grainshift { 50%{ transform: translate(-3%,2%);} }
@keyframes flicker { 0%,100%{opacity:1} 96%{opacity:1} 97%{opacity:.86} 98%{opacity:1} }
.screen { animation: flicker 7s infinite; }

/* ============ DITHER (ordered B&W halftone — the signature texture) ============ */
/* faint ordered-dither grain over the WHOLE site */
.dither-screen {
  position: fixed; inset: 0; z-index: 8996; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23808080'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000000'/%3E%3C/svg%3E");
  background-size: 2px 2px; image-rendering: pixelated;
  mix-blend-mode: overlay; opacity: .20;
}
/* real CRT/LCD monitor texture overlay (lofi-monitor.jpg) — subtle, keeps text legible */
.monitor-tex {
  position: fixed; inset: 0; z-index: 8997; pointer-events: none;
  background: url("../assets/lofi-monitor.jpg") center / cover no-repeat;
  mix-blend-mode: soft-light; opacity: .22;
}

/* reusable local dither texture — stronger, intensifies on hover */
.dither { position: relative; }
.dither::after, .avatar::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23808080'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 4px 4px; image-rendering: pixelated;
  mix-blend-mode: overlay; opacity:.45; transition: opacity .18s steps(3);
}
.dither:hover::after,
.mock:hover .scr::after { opacity:.85; }

/* "tech" dithered materialisation — content resolves out of noise */
@keyframes ditherIn {
  0%   { opacity:0; filter: contrast(2.6) brightness(.35); }
  35%  { opacity:1; filter: contrast(2.6) brightness(1.9); }
  70%  { filter: contrast(1.7) brightness(1.2); }
  100% { opacity:1; filter: none; }
}
.dither-in { animation: ditherIn .5s steps(5) both; }
/* images resolve out of dither each time their window opens */
.win.open .avatar { animation: ditherIn .55s steps(5) both; }
.win.open .mock   { animation: ditherIn .6s steps(6) both; }

/* ===== PIXEL-MOSAIC REVEAL (loader → home, and on project-canvas hover) ===== */
/* a grid of black blocks laid over the target that clear in random order → content "pixels in" */
.px-reveal-ov { position:absolute; inset:0; z-index:30; display:flex; flex-wrap:wrap; pointer-events:none; overflow:hidden; }
.px-reveal-ov span { display:block; background:#000; box-shadow: inset 0 0 0 1px #000; transition: opacity .14s steps(2); }
.px-reveal-ov.full { position:fixed; z-index:9700; }   /* full-screen variant for the loader→home transition */

/* ============ CURSOR (clean pixel arrow, no box) ============ */
.cur { position: fixed; top:0; left:0; z-index: 9600; pointer-events: none; width: 24px; height: auto; will-change: left, top; }
.cur .arrow {
  width: 100%; height: auto; color: var(--ink);
  transform-origin: 14% 8%;            /* pivot at the tip */
  filter:
    drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000)
    drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000)
    drop-shadow(2px 3px 0 rgba(0,0,0,0.5));
  transition: color .1s, transform .07s steps(2);
}
body.cur-down .cur .arrow { transform: scale(0.82); }
/* hover state: the arrow MORPHS into a spinning pixel sparkle (a new cursor form) */
.cur .ptr {
  position:absolute; left:-4px; top:-3px; width:24px; height:24px; color: var(--yellow); display:none;
  image-rendering: pixelated; transform-origin: 50% 50%;
  filter: drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(2px 3px 0 rgba(0,0,0,.5));
}
body.is-pointer .cur .arrow { display:none; }
body.is-pointer .cur .ptr { display:block; animation: ptrSpin .8s steps(8) infinite; }
body.cur-down .cur .ptr { transform: scale(.78); }
@keyframes ptrSpin { 0%{ transform: rotate(0deg) scale(1);} 50%{ transform: rotate(180deg) scale(1.3);} 100%{ transform: rotate(360deg) scale(1);} }
/* pixel sparks that burst from the cursor on click */
.pix-spark { position:fixed; z-index:9590; width:11px; height:11px; background:var(--yellow); pointer-events:none; image-rendering:pixelated; box-shadow:0 0 0 2px #000; animation: pixSpark .42s steps(5) forwards; }
@keyframes pixSpark { 0%{ transform: translate(0,0) scale(1); opacity:1; } 100%{ transform: translate(var(--dx,0), var(--dy,0)) scale(0); opacity:0; } }
@media (hover: none){ body{cursor:auto} .cur{display:none} }

/* ============ BOOT — aino-style pixel + dither loader ============ */
.boot {
  position: fixed; inset: 0; z-index: 9800; background: #000; color: #fff;
  font-family: var(--mono); overflow: hidden;
  display:flex; align-items:center; justify-content:center;
}
/* animated ordered-dither field behind the loader */
.boot-dither {
  position:absolute; inset:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23000'/%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 4px 4px; image-rendering: pixelated;
  opacity:.10; animation: bootDither .4s steps(2) infinite;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, #000 35%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 50%, #000 35%, transparent 78%);
}
@keyframes bootDither { 50%{ background-position: 2px 2px; } }
/* pixel skeleton UI preview — same element positions as the real home, but pixellated */
.boot-skeleton { position:absolute; inset:0; z-index:1; opacity:.055; pointer-events:none;
  animation: skShimmer 2.2s steps(6) infinite; image-rendering: pixelated; }
@keyframes skShimmer { 0%,100%{ opacity:.035; } 50%{ opacity:.075; } }
/* pixellated fill for the solid blocks — pixels "loop" like the reveal (dither flows + flickers) */
.boot-skeleton .sk-frame, .boot-skeleton .sk-plaque, .boot-skeleton .sk-bar-w,
.boot-skeleton .sk-dock span, .boot-skeleton .sk-arrow, .boot-skeleton .sk-logo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='6' height='6' fill='%23202020'/%3E%3Crect width='2' height='2' fill='%23666'/%3E%3Crect x='3' y='3' width='2' height='2' fill='%23666'/%3E%3C/svg%3E");
  background-size: 6px 6px; image-rendering: pixelated;
  animation: skPixLoop 1s steps(6) infinite;
}
/* pixel-reveal-inspired loop: the dither materialises, flows, then dissolves — endlessly */
@keyframes skPixLoop {
  0%   { background-position: 0 0;   filter: brightness(.4) contrast(2); }
  35%  { background-position: 0 6px; filter: brightness(1.4) contrast(1); }
  70%  { background-position: 0 12px; filter: brightness(.7) contrast(1.6); }
  100% { background-position: 0 18px; filter: brightness(.4) contrast(2); }
}
/* navbar (top) */
.boot-skeleton .sk-nav { position:absolute; top:0; left:0; right:0; height: var(--bar); display:flex; align-items:center; gap: var(--sp-2); padding: 0 clamp(14px,2vw,22px); }
.boot-skeleton .sk-logo { width:42px; height:42px; border:3px solid #fff; flex:none; }
.boot-skeleton .sk-bar-w { height:15px; border:2px solid #fff; }
.boot-skeleton .sk-name { width: clamp(90px,12vw,150px); }
.boot-skeleton .sk-lang { width: 90px; } .boot-skeleton .sk-badge { width: 110px; }
.boot-skeleton .sk-spacer { flex:1; }
/* nav arrows (vertical centre, screen edges) */
.boot-skeleton .sk-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:68px; border:3px solid #fff; }
.boot-skeleton .sk-arrow.sk-left { left:18px; } .boot-skeleton .sk-arrow.sk-right { right:18px; }
/* the framed paintings + plaques (centred, like the corridor at FRAME_CY 0.5) */
.boot-skeleton .sk-frames { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap: clamp(26px,5vw,70px); }
.boot-skeleton .sk-col { display:flex; flex-direction:column; align-items:center; gap: var(--sp-2); }
.boot-skeleton .sk-frame { width: clamp(150px,16vw,250px); height: clamp(130px,14vw,200px); border:3px solid #fff; box-shadow: 6px 6px 0 #fff; }
.boot-skeleton .sk-frame.tall { height: clamp(150px,17vw,230px); }
.boot-skeleton .sk-plaque { width: 80%; height: 30px; border:2px solid #fff; }
/* dock (bottom centre) */
.boot-skeleton .sk-dock { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap: var(--sp-2); padding: var(--sp-2); border:3px solid #fff; }
.boot-skeleton .sk-dock span { width:54px; height:54px; border:3px solid #fff; }
@media (max-width:760px){
  .boot-skeleton .sk-frames .sk-col:not(:nth-child(2)){ display:none; }   /* mobile shows 1 frame, like the home */
  .boot-skeleton .sk-dock span { width:42px; height:42px; }
  .boot-skeleton .sk-lang, .boot-skeleton .sk-badge { display:none; }
}
.boot-inner { position:relative; z-index:2; width: min(86vw, 560px); text-align:center; }
.boot-top { font-family: var(--mono); font-size: 13px; letter-spacing:.18em; color:#9a9a9a; margin-bottom: 18px; }
.boot-name { font-family: var(--px); font-size: clamp(13px,2.3vw,19px); letter-spacing:.07em; color:#fff; margin: 20px 0 16px; }
/* the big pixel percentage */
.boot-pct { font-family: var(--px); font-size: clamp(46px,13vw,104px); line-height:1; color:#fff;
  text-shadow: 4px 4px 0 #2a2a2a; display:flex; align-items:flex-start; justify-content:center; gap:6px; }
.boot-pct i { font-style:normal; font-size: .34em; margin-top:.55em; color:#9a9a9a; }
.boot .bar { margin: 26px auto 16px; width: 100%; height: 14px; border: 3px solid #fff; padding: 2px; }
.boot .bar i { display:block; height:100%; width:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23fff'/%3E%3Crect x='3' width='1' height='4' fill='%23000'/%3E%3Crect y='3' width='4' height='1' fill='%23000'/%3E%3C/svg%3E");
  background-size:4px 4px; image-rendering:pixelated; transition: width .12s steps(3); }
.boot .log { white-space: pre-wrap; font-size: 12px; line-height:1.7; color:#9a9a9a; min-height: 1.5em; text-align:center; max-width: 100%; overflow:hidden; }
.boot .log .ok { color: #fff; } .boot .log .hl { color: #d8d8d8; } .boot .log .dim { color:#6a6a6a; }
.boot .ready { margin-top: 22px; font-family: var(--px); font-size: clamp(13px,2.6vw,20px); color: #fff; line-height: 1.5; opacity:0; }
.boot .ready.show { opacity: 1; animation: bootBlink 1.1s steps(2) infinite; }
@keyframes bootBlink { 50%{ opacity:.35; } }
.boot .ready small { display:block; font-family: var(--mono); font-size: 12px; color:#9a9a9a; margin-top: 12px; letter-spacing: .04em; }
.boot .tagline { margin-top: 14px; font-family: var(--mono); font-size: 12px; color:#6a6a6a; }
.boot.off { animation: crtoff .45s forwards; pointer-events:none; }
@keyframes crtoff { 0%{transform:scale(1);opacity:1} 45%{transform:scaleY(.02);filter:brightness(3)} 100%{transform:scaleY(.002) scaleX(.3);opacity:0} }
.boot .blink { animation: blink 1s steps(2) infinite; } @keyframes blink { 50%{opacity:0} }

/* ============ DESKTOP ============ */
.desktop { position: fixed; inset: 0; overflow: hidden; opacity: 0; }
/* home becomes visible instantly; the pixel-mosaic overlay (JS) does the reveal transition */
.desktop.on { opacity: 1; }
/* home background = the real pixel-art gallery image */
.wallpaper {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: #000000 url("../assets/sfondo-finale-effectapp.png") left center / auto 100% repeat-x;
  image-rendering: pixelated; filter: grayscale(1) contrast(1.08);
}
.wallpaper::after {          /* soft vignette to seat the UI */
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background: radial-gradient(150% 120% at 50% 46%, transparent 70%, rgba(0,0,0,0.42));
}

/* ---- horizontal gallery corridor ---- */
#corridor { position:absolute; inset:0; z-index:5; overflow:hidden; }
/* one frame centred exactly on its bay (translate -50% → pixel-perfect on the bay centre) */
.corr-frame { position:absolute; z-index:5; transform: translate(-50%,-50%); display:inline-block; line-height:0; will-change:left; }
.corr-frame .glyph.frame { display:block; }
/* museum wall plaque under the painting */
.corr-frame .lbl {
  position:absolute; top: calc(100% + 14px); left:50%; transform: translateX(-50%);
  white-space:nowrap; text-align:center; line-height:1.4;
  background: #ffffff; border: 2px solid #000000; box-shadow: 2px 3px 0 rgba(0,0,0,0.5);
  padding: 8px 17px; font-family: var(--label); font-size: 14px; color: #000000;
}
/* name = same font + size as the EXPERIENCE role (Space Mono 18px), uppercase */
.corr-frame .lbl b { display:block; font-family: var(--label); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size: 18px; line-height:1.3; }
.corr-frame .lbl small { display:block; font-size: 12px; font-weight:700; color: #161616; margin-top: 6px; }
@media (max-width: 760px){
  .corr-frame .lbl { padding: 8px 14px; }
  .corr-frame .lbl b { font-size: 15px; }
  .corr-frame .lbl small { font-size: 11px; }
}
.corr-frame:hover .glyph.frame { transform: translateY(-7px); }
.corr-frame:active .glyph.frame { transform: translateY(-2px); }
.corr-frame.dim { opacity: .32; }
.corr-frame.dim:hover { opacity: .85; }

/* nav arrows */
.nav-arrow { position:absolute; top:50%; transform: translateY(-50%); z-index:560; width:58px; height:78px; background:#000; border:3px solid var(--ink); box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; }
.nav-arrow svg { width:36px; height:36px; fill: var(--ink); }
.nav-arrow.left { left:18px; } .nav-arrow.right { right:18px; }
.nav-arrow:hover { background: var(--yellow); }
.nav-arrow:hover svg { fill:#000; }
.nav-arrow:active { transform: translateY(-50%) translate(2px,2px); box-shadow: 3px 3px 0 #000; }
/* mobile: drop the arrows to the bottom, flanking the bottom tabbar (just above the dock) */
@media (max-width: 760px){
  .nav-arrow { top:auto; bottom:122px; transform:none; width:46px; height:62px; z-index:40; }
  .nav-arrow svg{ width:28px; height:28px; }
  .nav-arrow.left{left:8px;} .nav-arrow.right{right:8px;}
  .nav-arrow:active { transform: translate(2px,2px); box-shadow: 3px 3px 0 #000; }
}
@media (max-width: 640px){ .nav-arrow { bottom:104px; } }
@media (hover:none){ .nav-arrow{ opacity:.92; } }
/* top brick wall */
.g-brick {
  position:absolute; left:0; right:0; top:0; height: 210px; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='48' shape-rendering='crispEdges'%3E%3Crect width='80' height='48' fill='%233a2014'/%3E%3Crect x='1' y='1' width='37' height='21' fill='%236e3d28'/%3E%3Crect x='41' y='1' width='37' height='21' fill='%23643621'/%3E%3Crect x='-18' y='25' width='37' height='21' fill='%23693a25'/%3E%3Crect x='21' y='25' width='37' height='21' fill='%236e3d28'/%3E%3Crect x='61' y='25' width='37' height='21' fill='%23643621'/%3E%3Crect x='1' y='1' width='37' height='2' fill='%23824a32'/%3E%3Crect x='41' y='1' width='37' height='2' fill='%23824a32'/%3E%3Crect x='21' y='25' width='37' height='2' fill='%23824a32'/%3E%3Crect x='61' y='25' width='37' height='2' fill='%23824a32'/%3E%3C/svg%3E");
  background-size: 80px 48px;
}
/* decorative dentil cornice at the very top */
.g-cornice {
  position:absolute; left:0; right:0; top:0; height: 20px; z-index:2;
  background:
    repeating-linear-gradient(90deg, #c6c6c6 0 8px, #6a6a6a 8px 16px),
    linear-gradient(#c6c6c6, #6a6a6a);
  border-bottom: 3px solid #000000; box-shadow: inset 0 3px 0 #ededed;
}
/* stone arcade band (pointed arches + columns) */
.g-arcade {
  position:absolute; left:0; right:0; top: 56px; height: 150px; z-index:1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='75' shape-rendering='crispEdges'%3E%3Cpath d='M8 75 Q8 16 60 8 Q112 16 112 75' fill='none' stroke='%23b09866' stroke-width='12'/%3E%3Cpath d='M8 75 Q8 16 60 8 Q112 16 112 75' fill='none' stroke='%23d8cba6' stroke-width='8'/%3E%3Cpath d='M8 75 Q8 16 60 8 Q112 16 112 75' fill='none' stroke='%23ece0c2' stroke-width='2'/%3E%3Crect x='106' y='18' width='16' height='6' fill='%23d8cba6'/%3E%3Crect x='108' y='22' width='12' height='53' fill='%23d2c4a0'/%3E%3Crect x='108' y='22' width='3' height='53' fill='%23ece0c2'/%3E%3Crect x='118' y='22' width='2' height='53' fill='%23a8946c'/%3E%3C/svg%3E");
  background-size: 240px 150px; background-repeat: repeat-x;
}
/* lower light-stone wall (where the frames hang) */
.g-stone {
  position:absolute; left:0; right:0; top: 198px; bottom: 0; z-index:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='44' shape-rendering='crispEdges'%3E%3Crect width='84' height='44' fill='%23a8946c'/%3E%3Crect x='1' y='1' width='39' height='19' fill='%23cabf9c'/%3E%3Crect x='43' y='1' width='39' height='19' fill='%23c2b691'/%3E%3Crect x='-20' y='23' width='39' height='19' fill='%23c6ba96'/%3E%3Crect x='23' y='23' width='39' height='19' fill='%23cdc29f'/%3E%3Crect x='65' y='23' width='39' height='19' fill='%23c2b691'/%3E%3Crect x='1' y='1' width='39' height='2' fill='%23ddd2af'/%3E%3Crect x='43' y='1' width='39' height='2' fill='%23ddd2af'/%3E%3Crect x='23' y='23' width='39' height='2' fill='%23ddd2af'/%3E%3Crect x='65' y='23' width='39' height='2' fill='%23ddd2af'/%3E%3C/svg%3E");
  background-size: 84px 44px;
  box-shadow: inset 0 5px 0 #333333;
}
/* candle sconces on the stone wall */
.g-sconce { position:absolute; top: 250px; width: 14px; height: 30px; z-index:2; transform: translateX(-50%); }
.g-sconce::before { content:""; position:absolute; bottom:0; left:0; width:14px; height:18px; background:#bdbdbd; border:2px solid #000000; }   /* bracket + candle */
.g-sconce::after  { content:""; position:absolute; top:-10px; left:3px; width:8px; height:12px; background: radial-gradient(circle at 50% 60%, #ffffff, #cccccc 60%, transparent 72%); }   /* flame glow */
/* marble statue + wooden pedestal */
.g-statue { position:absolute; left:50%; bottom: 17%; transform: translateX(-50%); width: 86px; z-index:1; image-rendering: pixelated; }
.g-statue svg { width: 100%; height: auto; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.g-pedestal { width: 60px; height: 34px; margin: -2px auto 0; background: linear-gradient(#222222, #161616); border: 3px solid #000000; box-shadow: inset 4px 0 0 #2a2a2a, inset -4px 0 0 #000000; }
/* wood plank floor */
.g-floor {
  position:absolute; left:0; right:0; bottom:0; height:17%; z-index:1;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.32) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 16px),
    linear-gradient(#2a2a2a, #1a1a1a);
  border-top: 4px solid #000000;
}

/* ============ MENU BAR ============ */
.menubar {
  position:absolute; top:0; left:0; right:0; height: var(--bar); z-index: 500;
  display:flex; align-items:center; gap: 18px; padding: 0 18px;
  background:#000; border-bottom: none;
  font-family: var(--label); font-size: 13px; letter-spacing: .02em;
}
.menubar .logo { font-family: var(--px); font-size: 15px; color: var(--ink); display:flex; align-items:center; gap:11px; }
.menubar .logo .logo-av { width:42px; height:42px; image-rendering: pixelated; border: 3px solid var(--ink); background:#fff; object-fit:cover; flex:none; padding:0; }
.menubar .logo b { color: var(--yellow); }
@keyframes pulse { 50%{ background: var(--blue);} }
.menubar .spacer { margin-left:auto; }
.menubar .stat { color:#9a9a9a; display:flex; align-items:center; gap:8px; }
.menubar .stat b { color: var(--ink); }
.menubar .lang { color: var(--ink); min-width: 184px; display:inline-flex; align-items:center; gap:8px; justify-content:flex-end; }
.menubar .lang .flag { width: 20px; height: 13px; image-rendering: pixelated; border: 1px solid rgba(0,0,0,0.5); flex:none; }
.menubar .clock { color: var(--ink); min-width: 100px; text-align:right; }
.menubar .openwork { color: var(--yellow); display:flex; align-items:center; gap:9px; border:2px solid var(--yellow); padding: 7px 12px; }
.menubar .openwork .led { width:11px; height:11px; background: var(--yellow); animation: pulse 1.2s steps(2) infinite; }
@media (max-width: 820px){ .menubar .hideS{ display:none; } }
@media (max-width: 600px){
  .menubar { gap: 10px; padding: 0 12px; height: 46px; font-size: 11px; }
  .menubar .logo { font-size: 12px; gap: 7px; }
  .menubar .logo .dot { width: 11px; height: 11px; }
  .menubar .lang { min-width: 0; gap: 6px; }
  .menubar .lang .lang-txt { display: none; }     /* keep just the flag — text is too long for the bar */
  .menubar .lang .flag { width: 22px; height: 15px; }
  .menubar .clock { min-width: 0; font-size: 12px; }
}

/* ============ DESKTOP ICONS (draggable) ============ */
.icon {
  position:absolute; z-index: 40; width: 124px; padding: 6px 4px;
  display:flex; flex-direction:column; align-items:center; gap:10px; border: 2px solid transparent;
}
.icon:hover { background:none; border-color: transparent; }
.icon.dragging { z-index: 90; }
.icon.dragging .glyph svg { transform: translateY(-4px) rotate(-3deg); }
/* big borderless pixel-art glyph with a black pixel outline */
.icon .glyph { width: 96px; height: 96px; background:none; border:none; box-shadow:none; display:flex; align-items:center; justify-content:center; }
.icon .glyph svg {
  width: 90px; height: 90px;
  filter:
    drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)
    drop-shadow(3px 4px 0 rgba(0,0,0,0.55));
  transition: transform .12s steps(2), filter .12s steps(2);
}
/* hover: icon lifts and drops a hard yellow pixel shadow */
.icon:hover .glyph svg {
  transform: translateY(-4px);
  filter:
    drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)
    drop-shadow(8px 10px 0 var(--yellow));
}
.icon:active .glyph svg { transform: translateY(0); }
.icon .lbl { font-family: var(--label); font-size: 11px; color: var(--ink); text-align:center; line-height:1.5; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.icon .lbl small { display:block; color: var(--yellow); font-size: 9px; text-shadow: 1px 1px 0 #000; }
.icon.selected { border-color: transparent; background: none; }
/* role filter (hire.flo) highlight / dim */
.icon { transition: opacity .35s ease; }
.icon.dim { opacity: .24; }
.icon.match .glyph.frame { outline: 3px solid var(--yellow); outline-offset: 4px; }

/* project frame — pixel gilt/bronze/wood with the reference's "particular details":
   corner blocks · a 3D pixel bevel (light top-left, dark bottom-right) · a bright inner liner.
   colour set per-frame via --col/--col2/--mat; moulding flavour via data-fstyle. */
/* uniform frame — same look as the dock buttons + nav arrows (white border · black · hard white shadow) */
.glyph.frame {
  position: relative; box-sizing: border-box; image-rendering: pixelated; padding: 10px;
  background: #000;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
.frame-mat { display:block; width:100%; height:100%; box-sizing: border-box; padding: 0; background:#000; border:none; }
.frame-art { display:block; position:relative; overflow:hidden; width:100%; height:100%; background:#4a4a4a; background-image: linear-gradient(135deg,#2a2a2a 0%,#6a6a6a 60%,#3a3a3a 100%); }

/* ============ WINDOWS ============ */
.win {
  position:absolute; z-index: 100; min-width: 280px; max-width: 95vw; max-height: 68vh;
  background: #000000;                                  /* Blackbit: pure black window */
  border: 3px solid #ffffff;                            /* crisp white frame */
  /* stacked-paper shadow (the layered cards behind the Blackbit window) */
  box-shadow: 6px 6px 0 #000, 8px 8px 0 #fff, 14px 14px 0 #000, 16px 16px 0 #fff;
  display:none; flex-direction:column;
}
.win.open { display:flex; animation: poweron .4s steps(5) both; transform-origin: 50% 42%; }
@keyframes poweron {
  0%   { opacity:0; transform: scaleY(0.04) scaleX(0.6); filter: brightness(3); }
  45%  { opacity:1; transform: scaleY(0.08) scaleX(1.02); filter: brightness(2.2); }
  72%  { transform: scaleY(1.05) scaleX(1); filter: brightness(1.4); }
  100% { opacity:1; transform: none; filter: none; }
}
/* close = the same animation in reverse (CRT power-off) */
.win.open.closing { animation: poweroff .32s steps(5) both; pointer-events:none; }
@keyframes poweroff {
  0%   { opacity:1; transform: none; filter: none; }
  35%  { transform: scaleY(1.05) scaleX(1); filter: brightness(1.5); }
  70%  { opacity:1; transform: scaleY(0.08) scaleX(1.02); filter: brightness(2.2); }
  100% { opacity:0; transform: scaleY(0.04) scaleX(0.55); filter: brightness(3); }
}
.win.min { display:none; }
/* signature motion: content reveals as you scroll the window body */
.reveal-up { opacity:0; transform: translateY(26px); transition: opacity .5s ease, transform .55s cubic-bezier(.2,1,.3,1); }
.reveal-up.in { opacity:1; transform:none; }
.win.focused { box-shadow: 6px 6px 0 #000, 8px 8px 0 #fff, 14px 14px 0 #000, 16px 16px 0 #fff, 0 0 0 1px #fff; }
.win .titlebar {
  height: 62px; display:flex; align-items:center; gap:12px; padding: 0 16px;
  background: #000000;                                  /* Blackbit: black title band, white hairline under */
  color:#ffffff; border-bottom: 3px solid #ffffff; flex:none;
}
.win.focused .titlebar { border-bottom-width: 4px; }
.win .lights { display:flex; gap:7px; align-items:center; }
.win .lights b { width:17px; height:17px; border: 2px solid currentColor; display:flex; align-items:center; justify-content:center; font-family: var(--px); font-size:7px; color: inherit; background:transparent; }
/* only the CLOSE square remains */
.win .lights .m, .win .lights .z { display:none; }
/* close button = big + obvious */
.win .lights .c { width:40px; height:40px; border-width:4px; font-size:16px; cursor:none; }
.win .lights .c::after { content:"X"; }
.win .lights .c:hover { background: #fff; }
.win .lights .c:hover::after { color:#000; }
.win .title { font-family: var(--px); font-size: 18px; color: inherit; display:flex; gap:7px; align-items:baseline; letter-spacing:.01em; flex:none; white-space:nowrap; }
.win .title .f2 { font-size: .82em; }
/* project info shown right next to the name in the title bar: type · year · tags */
.win .titlebar .tb-info { display:flex; align-items:center; gap:10px; min-width:0; overflow:hidden; margin-left:8px; padding-left:14px; border-left:2px solid rgba(255,255,255,.35); font-family: var(--label); }
.win .titlebar .tb-info .tb-type { font-size:11px; letter-spacing:.06em; color:#fff; white-space:nowrap; text-transform:uppercase; }
.win .titlebar .tb-info .tb-year { font-size:11px; color:#b9b9b9; white-space:nowrap; }
.win .titlebar .tb-info .tb-tags { display:flex; gap:6px; min-width:0; overflow:hidden; }
.win .titlebar .tb-info .tb-tag { font-size:10px; color:#000; background:#fff; padding:2px 7px; white-space:nowrap; letter-spacing:.03em; }
@media (max-width: 900px){ .win .titlebar .tb-info .tb-tags { display:none; } }
@media (max-width: 560px){ .win .titlebar .tb-info .tb-type { display:none; } }
.win .body { overflow:auto; flex:1; position:relative; }
.win .body::-webkit-scrollbar { width: 14px; }
.win .body::-webkit-scrollbar-track { background: #000000; border-left: 2px solid #fff; }
.win .body::-webkit-scrollbar-thumb { background: #ffffff; border: 3px solid #000000; }
.pad { padding: 34px 38px; }   /* match the project app cards */

/* app windows fill the entire viewport — EVERY size (desktop + mobile) */
.win {
  position: fixed; inset: 0;
  left: 0 !important; top: 0 !important;
  width: 100vw !important; max-width: 100vw; min-width: 0;
  height: 100vh !important; height: 100dvh !important; max-height: 100vh; max-height: 100dvh;
  border: none !important; box-shadow: none !important;
}
.win.focused { z-index: 950 !important; box-shadow: none !important; }
@media (max-width: 760px){ .win .titlebar { height: 60px; } }
/* cap + centre the readable content inside the (now very wide) windows */
.win .body.pad, .win .body.proj, .win .body.hire { padding-inline: max(34px, calc((100% - 1000px) / 2)); }
.whoami-body .who-panes { display:flex; justify-content:center; }
.whoami-body .who-pane { width:100%; max-width: 920px; }

/* display heading */
.disp { font-family: var(--px); line-height: 1.45; text-transform: uppercase; color: var(--ink); }
.disp .y { color: var(--yellow); } .disp .b { color: var(--blue-lt); }

/* ---- whoami ---- */
/* ---- WHO I AM tabbed window (ME / SKILLS / EXPERIENCE) ---- */
.whoami-body { display:flex; padding:0 !important; }
.who-nav { flex:none; width:120px; background:#000000; border-right: 3px solid var(--ink); display:flex; flex-direction:column; }
.who-tab { font-family: var(--label); font-size: 12px; letter-spacing:.04em; padding: 15px 11px; color:#9a9a9a; border-bottom: 2px solid var(--line); text-align:left; transition: background .15s, color .15s; }
.who-tab:hover { color: var(--ink); }
.who-tab.on { background: var(--yellow); color:#000; }
.who-panes { flex:1; overflow:auto; min-width:0; }
.who-pane { display:none; padding: 28px 30px; }
.who-pane.on { display:block; }
.who-pane.exp { font-family: var(--term); }
/* mobile: tabs become a horizontal strip on top → full width for the text */
@media (max-width: 760px){
  .whoami-body { flex-direction: column; }
  .who-nav { width:100%; flex-direction:row; overflow-x:auto; border-right:none; border-bottom: 3px solid var(--ink); }
  .who-tab { flex:1 0 auto; text-align:center; padding: 12px 10px; border-bottom:none; border-right: 2px solid var(--line); white-space:nowrap; }
  .who-pane { padding: 20px 18px; }
}
/* languages list — flag · language · proficiency */
.lang-list { display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.lang-item { display:flex; align-items:center; gap:14px; font-family: var(--term); color: var(--ink);
  border: 2px solid var(--line); border-left: 5px solid var(--yellow); background: var(--panel-2); padding: 12px 16px; }
.lang-item .flag { width: 30px; height: 20px; image-rendering: pixelated; border: 2px solid #000; flex:none; }
.lang-item .lang-nm { font-family: var(--label); font-size: 13px; letter-spacing:.02em; }
.lang-item .lang-lv { margin-left:auto; font-size: 18px; color: var(--blue-lt); }

/* services / price list */
/* SERVICES — interactive "build your project" cards */
.svc-build { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.svc-card { position:relative; text-align:left; display:flex; flex-direction:column; gap:6px;
  padding: 16px 16px 14px; padding-right: 50px; border: 3px solid var(--ink); background:#000; color: var(--ink);
  transition: transform .12s steps(2), background .15s, box-shadow .12s steps(2); cursor:none; }
.svc-card:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--ink); }
.svc-card .sc-check { position:absolute; top:14px; right:14px; width:26px; height:26px; border:3px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family: var(--px); font-size:11px; }
.svc-card .sc-n { font-family: var(--label); font-size: 14px; letter-spacing:.02em; line-height:1.3; }
.svc-card .sc-d { font-family: var(--mono); font-size: 12px; color:#9a9a9a; line-height:1.35; }
.svc-card .sc-p { margin-top: 2px; font-family: var(--px); font-size: 12px; color: var(--yellow); white-space:nowrap; }
.svc-card .sc-p small { font-family: var(--mono); font-size: 13px; color:#9a9a9a; }
/* selected state → yellow */
.svc-card.on { background: var(--yellow); color:#000; border-color: var(--yellow); }
.svc-card.on .sc-check { background:#000; border-color:#000; font-size:0; }
.svc-card.on .sc-check::before { content:"✓"; font-family: var(--px); font-size:11px; color: var(--yellow); }
.svc-card.on .sc-d { color:#1a1a1a; }
.svc-card.on .sc-p { color:#000; } .svc-card.on .sc-p small { color:#333; }
/* running summary */
.svc-summary { margin-top: 20px; border-top: 3px solid var(--line); padding-top: 16px; min-height: 60px; }
.svc-summary .ss-empty { font-family: var(--mono); font-size: 13px; color:#8a8a8a; }
.svc-summary .ss-row { display:flex; justify-content:space-between; align-items:baseline; font-family: var(--label); font-size: 14px; gap:12px; }
.svc-summary .ss-total { font-family: var(--px); font-size: 17px; color: var(--yellow); }
.svc-summary .ss-cta { display:inline-block; margin-top: 14px; font-family: var(--px); font-size: 11px; color:#000; background: var(--yellow); border:3px solid var(--yellow); padding: 11px 16px; box-shadow: 4px 4px 0 #fff; }
.svc-summary .ss-cta:hover { background:#000; color: var(--yellow); }

/* ME: image on TOP, text BELOW (enlarged avatar) */
.who { display:flex; flex-direction:column; gap: 26px; }
.avatar { width:300px; height:330px; align-self:center; border: 3px solid var(--ink); background: var(--ink); position:relative; display:flex; align-items:center; justify-content:center; box-shadow: 7px 7px 0 #fff; overflow:hidden; }
.avatar svg { width: 92%; height: auto; }
.avatar .scan { position:absolute; left:0; right:0; height:24%; background: rgba(255,255,255,0.18); animation: scanmove 3s steps(10) infinite; z-index:2; }
@media (max-width: 600px){ .avatar{ width:240px; height:264px; } }
@keyframes scanmove { from{top:-26%} to{top:100%} }
.who h2 { font-family: var(--px); font-size: clamp(17px,2.6vw,28px); line-height:1.5; margin-bottom:12px; text-align:center; }
.who .role { font-family: var(--label); font-size: 12px; color:#000; background: var(--yellow); display:inline-block; padding: 4px 8px; margin-bottom:16px; }
.who p { font-size: var(--fs-body); line-height: 1.55; color: var(--ink); margin-bottom:14px; max-width: 64ch; }
.who p .k { color: #fff; font-weight:700; } .who p .b { color: var(--blue-lt); }
.kv { font-family: var(--term); font-size: 15px; color:#9a9a9a; display:grid; grid-template-columns:auto 1fr; gap:3px 16px; margin-top:14px; border-top: 2px dashed var(--line); padding-top:12px; }
.kv b { color: var(--ink); }
.kv span::before { content:"> "; color: var(--blue-lt); }

/* ---- terminal ---- */
.term { font-family: var(--vt); font-size: 20px; background:#000; min-height: 320px; }
.term .out { padding: 12px 14px; white-space: pre-wrap; line-height: 1.35; }
.term .out .c-y{color:var(--yellow)} .term .out .c-b{color:var(--blue-lt)} .term .out .c-w{color:var(--ink)} .term .out .c-dim{color:#888888}
.term .line { display:flex; gap:8px; padding: 0 14px 16px; align-items:center; }
.term .prompt { color: var(--yellow); white-space:nowrap; }
.term .inp { flex:1; background:none; border:none; outline:none; color:var(--ink); font:inherit; caret-color: var(--yellow); }

/* ---- projects + experience tiles ---- */
.grid2 { display:grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.tile { border: 3px solid var(--ink); background:#000; box-shadow: 4px 4px 0 var(--blue); }
.tile .vis { aspect-ratio: 16/9; position:relative; display:flex; align-items:center; justify-content:center; image-rendering: pixelated; }
.tile .vis .tg { font-family: var(--px); font-size: clamp(10px,1.6vw,15px); color:#000; text-align:center; padding:8px; line-height:1.5; position:relative; z-index:2; }
.tile .info { padding: 10px 12px; border-top: 3px solid var(--ink); background: var(--panel); }
.tile .info h4 { font-family: var(--label); font-size: 13px; color: var(--ink); display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.tile .info h4 .yr { font-family: var(--term); font-size: 14px; color: var(--yellow); }
.tile .info .meta { font-family: var(--term); font-size: 14px; color: var(--blue-lt); margin-top:2px; }
.tile .info a.link { font-family: var(--term); font-size: 14px; color: var(--yellow); display:inline-block; margin-top:4px; }
.tile:hover { box-shadow: 4px 4px 0 var(--yellow); }
@media (max-width:600px){ .grid2{ grid-template-columns:1fr; } }

/* ---- PROJECT CASE-STUDY WINDOW ---- */
.body.proj { padding: 34px 38px 38px; }       /* more inner padding */
.proj { font-family: var(--term); }
.proj .head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; border-bottom: 3px solid var(--ink); padding-bottom: 18px; margin-bottom: 22px; }
.proj .head h2 { font-family: var(--px); font-size: clamp(15px,2.3vw,24px); line-height:1.5; color: var(--ink); }
.proj .head .badge { font-family: var(--label); font-size: 11px; color:#000; background: var(--yellow); padding: 6px 9px; white-space:nowrap; }
.proj .head .meta { font-family: var(--label); font-size: 11px; color: var(--blue-lt); margin-top: 8px; }

/* vertical, full-width mockups — scroll down to view */
.mocks { display:flex; flex-direction:column; gap: 18px; margin-bottom: 26px; }
.mock { width: 100%; border: 3px solid var(--ink); background:#000; image-rendering: pixelated; box-shadow: 5px 5px 0 #000; }
.mock .bar { height: 24px; background: var(--ink); display:flex; align-items:center; gap:6px; padding: 0 9px; }
.mock .bar i { width: 9px; height: 9px; background:#000; display:block; }
.mock .bar .url { margin-left: 8px; font-family: var(--label); font-size: 10px; color:#000; }
.mock .scr { aspect-ratio: 16/9; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.mock .scr .t { font-family: var(--px); font-size: clamp(14px,2vw,22px); text-align:center; padding: 14px; line-height:1.5; position:relative; z-index:2; }
.mock .scr.k { background:#000000; } .mock .scr.k .t { color: var(--ink); }
.mock .scr.b { background: var(--blue); } .mock .scr.b .t { color: var(--ink); }
.mock .scr.y { background: var(--yellow); } .mock .scr.y .t { color: #000; }
.mock .scr.w { background: var(--ink); } .mock .scr.w .t { color: #000; }
.mock .scr::after { content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; image-rendering:pixelated; background-size:4px 4px; transition:opacity .18s steps(3); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23808080'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); }

/* before / after drag-to-reveal */
.ba-lab { font-family: var(--label); font-size: 11px; color: var(--yellow); margin-bottom: 10px; }
.ba { position:relative; width:100%; aspect-ratio: 16/9; border: 3px solid var(--ink); overflow:hidden; box-shadow: 5px 5px 0 #000; margin-bottom: 26px; --p: 50%; touch-action: none; }
.ba .lay { position:absolute; inset:0; }
.ba .lay .scr { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; }
.ba .lay .scr .t { font-family: var(--px); font-size: clamp(11px,1.6vw,17px); text-align:center; line-height:1.6; z-index:2; }
.ba .before { clip-path: inset(0 calc(100% - var(--p)) 0 0); z-index:2; }
.ba .before .scr { background: #0d0d0d; }
.ba .before .scr .t { color: #888888; }
.ba .before .scr::after, .ba .after .scr::after { content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay; image-rendering:pixelated; background-size:4px 4px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23808080'/%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='1' width='1' height='1' fill='%23000000'/%3E%3Crect x='1' y='2' width='1' height='1' fill='%23000000'/%3E%3Crect x='3' y='3' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); }
.ba .after .scr.k { background:#000000; } .ba .after .scr.k .t { color: var(--ink); }
.ba .after .scr.b { background: var(--blue); } .ba .after .scr.b .t { color: var(--ink); }
.ba .after .scr.y { background: var(--yellow); } .ba .after .scr.y .t { color:#000; }
.ba .handle { position:absolute; top:0; bottom:0; left: var(--p); width:4px; background: var(--yellow); z-index:4; transform: translateX(-50%); }
.ba .handle::after { content:"< >"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family: var(--label); font-size:10px; color:#000; background: var(--yellow); border:2px solid #000; padding:4px 6px; white-space:nowrap; }
.ba .tag { position:absolute; bottom:8px; font-family: var(--label); font-size:10px; padding:3px 6px; z-index:3; }
.ba .tag.l { left:8px; background:#000; color: var(--ink); }
.ba .tag.r { right:8px; background: var(--yellow); color:#000; }

/* surf mini-game */
/* mini-games fill the whole window viewport and never scroll */
.surf-body { padding:0 !important; background:#000; overflow:hidden; height:100%; display:flex; flex-direction:column; }
.surf-body canvas { display:block; width:100%; height:auto; max-height:100%; flex:1; min-height:0; object-fit:contain; image-rendering: pixelated; }
.surf-foot { font-family: var(--term); font-size: 13px; color:#888888; padding: 8px 12px; border-top: 3px solid var(--ink); display:flex; justify-content:space-between; align-items:center; flex:none; }
.surf-foot a { color: var(--yellow); }
/* VOLLEY / canvas games — true viewport canvas */
.game-body { padding:0 !important; background:#000; position:relative; overflow:hidden; height:100%; }
.game-cv { position:absolute; inset:0; width:100%; height:100%; display:block; }
.game-ctrl { position:absolute; left:0; right:0; bottom:0; display:none; gap:10px; justify-content:center; padding: 12px; z-index:3; }
.gc-btn { font-family: var(--label); font-size: 20px; min-width:66px; height:62px; border:3px solid #fff; background:rgba(0,0,0,.65); color:#fff; cursor:none; touch-action:none; -webkit-user-select:none; user-select:none; }
.gc-btn:active { background: var(--yellow); color:#000; }
.gc-wide { flex:1; max-width:230px; font-size:12px; letter-spacing:.04em; }
@media (hover:none), (max-width:760px){ .game-ctrl { display:flex; } }

/* detail field rows */
.fields { display:flex; flex-direction:column; }
.field-row { display:grid; grid-template-columns: 178px 1fr; gap: 18px; padding: 16px 0; border-top: 2px dashed var(--line); }
.field-row .lab { font-family: var(--label); font-size: 11px; color: var(--yellow); line-height: 1.5; }
.field-row .val { font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.field-row .val .b { color: var(--blue-lt); }
.field-row a.golink { display:inline-flex; gap:8px; align-items:center; font-family: var(--term); font-size: 20px; font-weight: 700; color:#000; background: var(--yellow); padding: 13px 24px; letter-spacing: .01em; }
.field-row a.golink:hover { background: var(--blue); color: var(--ink); }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:4px; } .body.proj{ padding: 24px; } }

/* WORKED WITH — linked collaborators */
.team-list { list-style:none; display:grid; gap: 8px; }
.team-list li { line-height: 1.5; }
.team-list a { display:inline-flex; align-items:center; gap: 8px; flex-wrap:wrap; color: var(--ink); border-bottom: 2px solid transparent; }
.team-list a .b { color: var(--blue-lt); }
.team-list a:hover { color: var(--yellow); }
.team-list a:hover .b { color: var(--yellow); }
.team-list a .tl-in { font-family: var(--label); font-size: 10px; font-weight:700; color:#000; background: var(--blue-lt); padding: 1px 5px; letter-spacing:.04em; }
.team-list a:hover .tl-in { background: var(--yellow); }
/* collaborator with no profile link — same look, no interaction */
.team-list .tl-plain { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; color: var(--ink); }
.team-list .tl-plain .b { color: var(--blue-lt); }

/* full-bleed media inside a case study — images span the ENTIRE viewport width */
.body.proj { overflow-x: hidden; }                       /* stop 100vw children from adding a horizontal scrollbar */
.proj .proj-full { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; margin: 6px 0 30px; }
.proj-gallery { display: block; }
.proj-gallery > .pg-shot, .proj-gallery > .pg-reels, .proj-gallery > .pg-row, .proj-gallery > .pg-vrow, .proj-gallery > .pg-ph { margin: 0; border-top: 3px solid var(--ink); line-height: 0; }
.proj-gallery > :last-child { border-bottom: 3px solid var(--ink); }
.proj-gallery .pg-shot { background: #e9e6df; }
.proj-gallery .pg-shot img { display: block; width: 100%; height: auto; }
/* white-background image (e.g. the site mockup shown last) */
.proj-gallery .pg-shot.pg-white { background: #ffffff; }
/* a smaller image still sitting on a full-width background, centred */
.proj-gallery .pg-shot.pg-sm { display: flex; justify-content: center; padding: 26px 12px; }
.proj-gallery .pg-shot.pg-sm img { width: auto; max-width: min(100%, 720px); height: auto; }
/* a pair of auto-playing videos side by side */
.pg-vrow { display: flex; gap: 3px; background: var(--ink); }
.pg-vrow .pg-video { flex: 1 1 0; min-width: 0; margin: 0; }
.proj-gallery .pg-video { background: #000; }
.proj-gallery .pg-video video { display: block; width: 100%; height: auto; }
/* hero video (Offshore / Earth Day) — native controls, centred on black, bounded height */
.proj-gallery .pg-hero { background: #000; display: flex; align-items: center; justify-content: center; }
.proj-gallery .pg-hero video { display: block; width: auto; height: auto; max-width: 100%; max-height: 82vh; }
/* grey placeholder image (B-wave) */
.proj-gallery .pg-ph { width: 100%; background: #3a3a3a; display: flex; align-items: center; justify-content: center; }
.proj-gallery .pg-ph::after { content: "// placeholder image"; line-height: 1; font-family: var(--label); font-size: 12px; letter-spacing: .06em; color: #7c7c7c; }
/* the 4 vertical reels — a full-bleed row of portrait videos */
.pg-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; background: var(--ink); }
.pg-reels .pg-reel { background: #000; line-height: 0; overflow: hidden; }
.pg-reels .pg-reel video { display: block; width: 100%; aspect-ratio: 9/16; object-fit: cover; }
@media (max-width: 760px){ .pg-reels { grid-template-columns: repeat(2, 1fr); } }
/* a row of images side by side (the phone mockups) — ALL the same height, packed together
   and centred on one uniform background, so it reads as a homogeneous strip (no big gaps). */
.pg-row { display: flex; align-items: center; justify-content: center; gap: 4px; background: #e9e6df; padding: 20px 12px; }
.pg-row .pg-cell { margin: 0; background: #e9e6df; line-height: 0; display: flex; }
.pg-row .pg-cell img { display: block; height: clamp(150px, 22vw, 320px); width: auto; max-width: 100%; }
/* a row on a black background (e.g. Rondine) */
.pg-row.pg-row-dark, .pg-row.pg-row-dark .pg-cell { background: #000; }

/* before / after comparison with real images (drag to reveal) */
.proj-gallery .pg-ba { background: #e9e6df; }
.proj-gallery .pg-ba.pg-ba-white, .proj-gallery .pg-ba.pg-ba-white .ba .lay { background: #ffffff; }
.proj-gallery .pg-ba .ba { margin: 0; border: none; box-shadow: none; aspect-ratio: auto; width: 100%; height: clamp(320px, 46vw, 620px); }
.proj-gallery .pg-ba .ba .lay { display: flex; align-items: center; justify-content: center; padding: 28px; background: #e9e6df; }
.proj-gallery .pg-ba .ba .lay img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* multiple project links */
.golinks { display: flex; flex-wrap: wrap; gap: 10px; }

/* experience as a vertical roadmap / timeline */
/* EXPERIENCE — scroll-driven roadmap: sticky [rail | card], tall spacer drives the scroll */
.road2 { position:relative; }
.road2-view { position:sticky; top:0; display:flex; gap: var(--sp-4); align-items:stretch;
  height: calc(100dvh - 200px); min-height: 360px; padding-top: var(--sp-2); }
/* left: the little animated roadmap */
.road2-rail { position:relative; flex:0 0 116px; display:flex; flex-direction:column; justify-content:space-between; padding: var(--sp-2) 0; }
.road2-rail .rl-line { position:absolute; left: 13px; top: var(--sp-3); bottom: var(--sp-3); width:3px; background: var(--line); }
.road2-rail .rl-fill { position:absolute; left: 13px; top: var(--sp-3); width:3px; height:0; background: var(--yellow); transition: height .12s steps(3); }
.rl-node { position:relative; z-index:1; display:flex; align-items:center; gap:10px; text-align:left; cursor:none; color:#8a8a8a; transition: color .15s; }
.rl-node .rl-dot { width:17px; height:17px; flex:none; background:#000; border:3px solid #6a6a6a; transition: background .15s, border-color .15s, transform .12s steps(2); }
.rl-node .rl-yr { font-family: var(--mono); font-size: var(--fs-1); letter-spacing:.02em; }
.rl-node:hover { color: var(--ink); } .rl-node:hover .rl-dot { border-color: var(--ink); }
.rl-node.on { color: var(--ink); }
.rl-node.on .rl-dot { background: var(--yellow); border-color: var(--ink); transform: scale(1.18); }
/* right: the job card (re-revealed with the pixel mosaic on scroll) */
.road2-stage { position:relative; overflow:hidden; flex:1; min-width:0; align-self:start;
  border: 3px solid var(--ink); border-left: 10px solid var(--yellow); background: var(--panel-2); padding: var(--sp-4); }
.rd-top { display:flex; justify-content:space-between; align-items:baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap:wrap; }
.rd-kind { font-family: var(--label); font-size: var(--fs-1); letter-spacing:.1em; color:#000; background: var(--yellow); padding: 4px 8px; }
.rd-yr { font-family: var(--mono); font-size: var(--fs-1); color:#c8c8c8; }
.rd-role { font-family: var(--label); font-size: var(--fs-2); line-height:1.3; color: var(--ink); margin-bottom: var(--sp-1); }
.rd-org { font-family: var(--mono); font-size: var(--fs-1); color: var(--blue-lt); margin-bottom: var(--sp-3); }
.rd-org .rd-place { color:#8a8a8a; }
.rd-desc { font-family: var(--mono); font-size: var(--fs-body); line-height:1.6; color:#cfcfcf; max-width: 60ch; }
@media (max-width: 640px){
  .road2-view { gap: var(--sp-2); height: calc(100dvh - 170px); }
  .road2-rail { flex-basis: 78px; }
  .road2-rail .rl-node .rl-yr { font-size: 11px; }
  .road2-stage { padding: var(--sp-3); }
}

/* ---- skills: software icons (no percentages) ---- */
/* software grouped by purpose (logical + readable) */
.soft-groups { display:flex; flex-direction:column; gap: var(--sp-5); }
.soft-cat { font-family: var(--label); font-size: var(--fs-1); letter-spacing:.04em; color: var(--ink);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--line); display:flex; align-items:center; gap: var(--sp-2); }
.soft-cat .sc-i { font-family: var(--px); font-size: 10px; color: var(--yellow); }
.soft-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-4) var(--sp-2); }
.soft { display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; transition: transform .12s steps(2); }
.soft .ico { width: 64px; height: 64px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 #fff; display:flex; align-items:center; justify-content:center; font-family: var(--px); font-size: 15px; transition: box-shadow .12s steps(2), background .15s, color .15s; }
.soft .ico.b { background: #000; color: var(--blue-lt); }
.soft .ico.y { background: #000; color: var(--yellow); }
.soft .ico.k { background: #000; color: var(--ink); }
.soft .ico.w { background: var(--ink); color: #000; }
.soft .nm { font-family: var(--label); font-size: 12px; color: var(--ink); line-height:1.35; }
.soft .desc { font-family: var(--mono); font-size: var(--fs-cap); color:#9a9a9a; line-height:1.3; max-width: 13ch; }
.soft:hover { transform: translateY(-3px); }
.soft:hover .ico { box-shadow: 4px 4px 0 var(--yellow); background: var(--yellow); color:#000; }
.sub-h { font-family: var(--px); font-size: 11px; color: var(--yellow); margin: 22px 0 14px; }
.sub-h.first { margin-top: 4px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-family: var(--label); font-size: 11px; padding: 7px 11px; border: 2px solid var(--ink); color: var(--ink); }
.chip.y { border-color: var(--yellow); color: var(--yellow); }
.chip.b { border-color: var(--blue-lt); color: var(--blue-lt); }

/* ---- contact ---- */
.cform .f { margin-bottom: 14px; }
.cform label { display:block; font-family: var(--label); font-size: 11px; color: var(--yellow); margin-bottom: 6px; }
.cform input, .cform textarea {
  width:100%; background:#000; border: 3px solid var(--ink); color: var(--ink);
  font-family: var(--term); font-size: 15px; padding: 9px 11px; outline:none; resize:none;
}
.cform input:focus, .cform textarea:focus { border-color: var(--yellow); }
.cform .send { margin-top: 4px; font-family: var(--px); font-size: 11px; padding: 13px 18px; border: 3px solid var(--ink); background: var(--yellow); color:#000; box-shadow: var(--shadow); }
.cform .send:active { transform: translate(3px,3px); box-shadow: 3px 3px 0 #000; }
.cform .send:hover { background: var(--blue); color: var(--ink); }
.contact-links { margin-top: 18px; display:flex; flex-direction:column; gap:10px; font-family: var(--term); font-size: 15px; }
.contact-links a { display:flex; gap:10px; align-items:center; width:max-content; }
.contact-links a .ar { color: var(--yellow); }
.contact-links a:hover { color: var(--yellow); }
.csuccess { font-family: var(--term); font-size: 14px; color: var(--yellow); margin-top:12px; display:none; }
.csuccess.show { display:block; }

/* ---- secret ---- */
.secret { text-align:center; padding: 26px; }
.secret .big { font-family: var(--px); font-size: clamp(20px,5vw,40px); color: var(--yellow); line-height:1.5; }
.secret p { font-family: var(--term); font-size: 15px; color:#c6c6c6; margin-top:16px; line-height:1.35; }
/* pixel icons in the bottom-tabbar style */
.secret-icons { display:flex; gap:12px; justify-content:center; margin: 20px 0 4px; }
.secret-icons span { width:56px; height:56px; border:3px solid var(--ink); background:#000; display:flex; align-items:center; justify-content:center; transition: transform .12s steps(2); }
.secret-icons span:hover { background: var(--yellow); transform: translateY(-4px); }
.secret-icons svg { width:32px; height:32px; fill: var(--ink); }
.secret-icons span:hover svg { fill:#000; }
.kbd { font-family: var(--label); font-size: 12px; border: 2px solid var(--yellow); padding: 1px 6px; color: var(--yellow); }

/* ---- HIRE.FLO ---- */
.dock-hire { background: var(--yellow) !important; }
.dock-hire:hover { background: var(--ink) !important; }
.body.hire { padding: 30px 34px 34px; }
.hire-pitch { font-family: var(--term); font-size: 14px; line-height: 1.35; color: var(--ink); min-height: 96px; margin-bottom: 22px; }
.hire-pitch .c { color: var(--yellow); } .hire-pitch .b { color: var(--blue-lt); }
.hire-pitch .caret { color: var(--yellow); animation: blink 1s steps(2) infinite; }
.role-row { display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 22px; }
.role-row button { font-family: var(--label); font-size: 11px; padding: 9px 12px; border: 2px solid var(--ink); color: var(--ink); transition: transform .12s steps(2), background .15s, color .15s; }
.role-row button:hover { transform: translateY(-2px); }
.role-row button.on { background: var(--yellow); color:#000; border-color: var(--yellow); }
.hire-cta { display:flex; flex-wrap:wrap; gap:12px; margin-bottom: 22px; }
.cta-btn { font-family: var(--px); font-size: 11px; padding: 14px 16px; border: 3px solid var(--ink); background: var(--yellow); color:#000; box-shadow: 5px 5px 0 #000; transition: transform .1s steps(2), box-shadow .1s steps(2), background .15s; }
.cta-btn:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #000; }
.cta-btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 #000; }
.cta-btn.alt { background:#000; color: var(--ink); }
.cta-btn.alt:hover { background: var(--blue); }
.hire-facts { display:grid; grid-template-columns: 1fr 1fr; gap:6px 18px; font-family: var(--term); font-size: 14px; color:#9a9a9a; border-top: 2px dashed var(--line); padding-top: 16px; }
@media (max-width:540px){ .hire-facts{ grid-template-columns:1fr; } }

/* ---- project outcome chips (impact) ---- */
.outcomes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 22px; }
.outcome { font-family: var(--label); font-size: 11px; padding: 7px 10px; border: 2px solid var(--yellow); color: var(--yellow); }
.outcome.b { border-color: var(--blue-lt); color: var(--blue-lt); }

/* ---- desktop icons pop in on boot (signature motion) ---- */
.desktop.on .icon { animation: iconpop .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes iconpop { 0% { opacity:0; transform: scale(0.2) translateY(20px); } 100% { opacity:1; transform: none; } }

/* ---- texture / grain identity (the "realistic" feel) ---- */
.grain {
  position: fixed; inset: -20%; z-index: 8999; pointer-events: none; opacity: .2;
  background-image: url("../assets/film.jpg"); background-size: 700px;
  animation: grainshift .5s steps(3) infinite; mix-blend-mode: overlay;
}
/* per-panel grain so windows feel printed, not flat */
.win::after {
  content:""; position:absolute; inset:0; z-index: 50; pointer-events:none; opacity:.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- extra micro-motion ---- */
.chip { transition: transform .12s steps(2), border-color .15s, color .15s; }
.chip:hover { transform: translateY(-2px); border-color: var(--yellow); color: var(--yellow); }
.contact-links a, .field-row a.golink, .tile { transition: transform .14s steps(2); }
.menubar .openwork { transition: transform .14s steps(2); }
.menubar .openwork:hover { transform: translateY(-1px); }
.spec, .svc-row { transition: transform .14s steps(2), background .2s; }

/* ---- PAPER TEXTURE layer (multiply → textures the light surfaces) ---- */
.paper-tex {
  position: fixed; inset: 0; z-index: 8998; pointer-events: none;
  mix-blend-mode: multiply; opacity: .6;
  background-image: url("../assets/paper.jpg"); background-size: 800px;
}

/* ---- PAINT.APP ---- */
.paint-body { padding:0 !important; background:#000000; overflow:hidden; height:100%; display:flex; flex-direction:column; }
.paint-body canvas { display:block; width:100%; flex:1; min-height:0; aspect-ratio: 36/24; object-fit:contain; image-rendering: pixelated; background: var(--ink); }
.paint-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-top: 3px solid var(--ink); flex:none; }
.swatches { display:flex; gap:7px; }
.swatch { width:28px; height:28px; border:3px solid var(--ink); }
.swatch.on { box-shadow: 0 0 0 2px var(--yellow), 0 0 0 5px #000; }
.paint-actions { display:flex; gap:8px; }
.paint-actions button { font-family: var(--label); font-size:11px; padding:9px 11px; border:2px solid var(--ink); color: var(--ink); }
.paint-actions button:hover { background: var(--yellow); color:#000; }

/* ---- DESKTOP HERO (home identity) ---- */
.desk-hero { position:absolute; right: 50px; bottom: 156px; z-index: 30; max-width: 380px; text-align:right; }
.dh-eyebrow { font-family: var(--label); font-size:11px; color: var(--blue-lt); margin-bottom: 14px; letter-spacing:.06em; }
.dh-title { font-family: var(--px); font-size: clamp(22px,3vw,40px); line-height: 1.4; color: var(--ink); text-shadow: 3px 3px 0 #000; }
.dh-title em { color: var(--yellow); font-style: normal; }
.dh-sub { font-family: var(--term); font-size: 15px; color:#9a9a9a; margin: 18px 0 20px; line-height: 1.3; }
.dh-cta { font-family: var(--px); font-size: 13px; padding: 15px 20px; border: 3px solid var(--ink); background: var(--yellow); color:#000; box-shadow: 5px 5px 0 #000; transition: transform .1s steps(2), box-shadow .1s steps(2), background .15s, color .15s; }
.dh-cta:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #000; background: var(--blue); color: var(--ink); }
.dh-cta:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 #000; }
@media (max-width: 900px){ .desk-hero{ display:none; } }

/* ---- category colour-coding on icon labels (intentional colour use) ---- */
.icon .lbl small { color: var(--yellow); }
.icon[data-cat="ui"] .lbl small { color: var(--blue-lt); }
.icon[data-cat="brand"] .lbl small { color: var(--yellow); }
.icon[data-cat="illus"] .lbl small { color: var(--ink); }

/* ---- "try the terminal" speech bubble (above the terminal dock button) ---- */
.term-bubble {
  position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%);
  font-family: var(--label); font-size: 11px; color: #000; background: var(--yellow);
  border: 3px solid #000; padding: 8px 12px; white-space: nowrap; box-shadow: 4px 4px 0 #000;
  animation: bubblebob 1.6s ease-in-out infinite; z-index: 4;
}
.term-bubble::after { content:""; position:absolute; top:100%; left:50%; transform:translate(-50%,-3px); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:10px solid var(--yellow); }
.term-bubble::before { content:""; position:absolute; top:100%; left:50%; transform:translate(-50%,0); width:0; height:0; border-left:11px solid transparent; border-right:11px solid transparent; border-top:13px solid #000; }
@keyframes bubblebob { 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(-5px);} }
body.term-seen .term-bubble { display: none; }

/* ---- GALLERIA ---- */
.gallery .gal-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.gallery .gal-item { margin:0; border: 3px solid var(--ink); box-shadow: 5px 5px 0 #000; background:#000; line-height:0; }
.gallery .gal-item img, .gallery .gal-item video { display:block; width:100%; height:auto; }
.gal-ph { aspect-ratio: 4/3; border: 3px solid var(--ink); box-shadow: 5px 5px 0 #000; background-image: linear-gradient(135deg,#3c3c3c 0%, #5a5a5a 60%, #444 100%); image-rendering: pixelated; }
@media (max-width:560px){ .gallery .gal-grid { grid-template-columns: 1fr; } }

/* ---- SOFT SKILLS bulleted list ---- */
.soft-list { list-style: none; margin-top: 8px; display:grid; gap: 14px; }
.soft-list li { position:relative; padding: 2px 0 2px 22px; border-left: 3px solid var(--yellow); padding-left: 16px; }
.soft-list li::before { content:""; position:absolute; left:-3px; top:4px; width: 9px; height: 9px; background: var(--yellow); }
.soft-list li b { display:block; font-family: var(--label); font-size: 14px; color: var(--ink); margin-bottom: 4px; letter-spacing:.02em; }
.soft-list li span { display:block; font-family: var(--mono); font-size: 13px; color:#b3b3b3; line-height:1.4; max-width: 60ch; }

/* ============ DOCK ============ */
.dock {
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); z-index: 600;
  display:flex; gap: 11px; padding: 11px; background:#000; border: 3px solid var(--ink); box-shadow: var(--shadow);
}
.dock button {
  width: 66px; height: 66px; border: 3px solid var(--ink); background: #000; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.dock button svg { width: 40px; height: 40px; }
.dock button.dock-hire { color:#000; }   /* gold default → black icon */
.dock button:hover { background: var(--yellow); transform: translateY(-6px); }
.dock button:active { transform: translate(2px,2px); }
.dock button[data-running]::after { content:""; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:8px; height:4px; background: var(--yellow); }
.dock button .tip { position:absolute; top: calc(100% + 12px); left:50%; transform:translateX(-50%); font-family: var(--label); font-size:11px; background:#000; border:2px solid var(--ink); padding:3px 7px; white-space:nowrap; opacity:0; color: var(--ink); }
.dock button:hover .tip { opacity:1; }
@media (max-width:640px){ .dock{ gap:8px; padding:8px; } .dock button{ width:46px; height:46px;} .dock button svg{width:27px;height:27px;} }

/* ============ PET (the logo, follows cursor + blinks) ============ */
.pet { position:absolute; z-index: 55; width: 104px; height: 104px; pointer-events:none; transition: top .5s steps(5), left .5s steps(5); }
.pet .petface { width:100%; height:100%; }
.pet .petface svg { width:100%; height:100%; image-rendering: pixelated; filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.4)); }
.pet .eye { transition: none; }
.pet.blink .eye { fill: #ededed; }       /* eyes close → skin */
.pet .say { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:8px; font-family: var(--label); font-size:11px; background:#000; border:2px solid var(--yellow); color: var(--yellow); padding:5px 9px; white-space:nowrap; opacity:0; }
.pet .say.show { opacity:1; }

/* ============ NOTIFICATIONS ============ */
/* toast notifications — bottom-right (desktop), white box / black text, X + 7s countdown */
/* toast notifications — TOP-RIGHT on desktop/laptop/tablet · black box, white bold text */
.notes { position:absolute; top: calc(var(--bar) + var(--sp-2)); right: var(--sp-3); bottom:auto; z-index: 9650; display:flex; flex-direction:column; gap: var(--sp-2); width: min(340px, 86vw); }
.note { position:relative; overflow:hidden; background:#000; color:#fff; border: 3px solid #fff; padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + 6px); padding-right: 34px;
  font-family: var(--mono); font-weight:700; font-size: var(--fs-1); transform: translateX(120%); animation: noteIn .3s steps(4) forwards; box-shadow: var(--shadow); }
.note.pin { border-left: 10px solid var(--yellow); }
.note.out { animation: noteOut .25s steps(4) forwards; }
@keyframes noteIn { to{ transform: translateX(0);} }
@keyframes noteOut { to{ transform: translateX(120%); opacity:0;} }
.note .nt { font-family: var(--label); font-size: var(--fs-0); letter-spacing:.06em; text-transform:uppercase; color:#fff; display:flex; justify-content:space-between; gap:10px; margin-bottom: var(--sp-1); }
.note .nt span { color:#9a9a9a; }
.note .nb { color:#fff; font-weight:700; line-height:1.4; }
.note .note-x { position:absolute; top:6px; right:6px; width:22px; height:22px; border:2px solid #fff; background:#000; color:#fff; font-family: var(--px); font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:none; }
.note .note-x:hover { background:#fff; color:#000; }
.note .note-bar { position:absolute; left:0; right:0; bottom:0; height:5px; background: rgba(255,255,255,.18); }
.note .note-bar i { display:block; height:100%; width:100%; background:#fff; }
/* mobile (phones): centred at the top */
@media (max-width:760px){ .notes { top: calc(var(--bar) + 10px); left:50%; right:auto; transform:translateX(-50%); width: min(340px, 92vw); } }

/* ============ SCREENSAVER ============ */
.saver { position:fixed; inset:0; z-index: 800; background:#000; display:none; }
.saver.on { display:block; }
.saver .dvd { position:absolute; line-height:0; }
.saver .dvd .saver-logo { display:block; width:104px; height:104px; image-rendering:pixelated; border:3px solid #fff; background:#fff; }
.saver .hint { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-family: var(--term); font-size: 14px; color:#888888; }

/* hint strip */
.hint-strip { position:absolute; bottom: 128px; left:50%; transform:translateX(-50%); z-index:300; font-family: var(--term); font-size: 14px; color:#888888; text-align:center; pointer-events:none; }
.hint-strip .kbd { color: var(--yellow); }

/* ============================================================
   HEADER FONT — Silkscreen, applied site-wide.
   ============================================================ */
.f1, .f2,
.disp, .who h2, .sub-h, .win .title, .proj .head h2, .secret .big,
.rd-role, .soft-cat, .road .sub-h, .menubar .logo, .menubar .logo b, .tile .info h4,
.boot-name, .boot-name .f2, .disp .f2, .sub-h .f2, .win .title .f2 {
  font-family: var(--head2) !important;
  text-transform: none !important;
}

/* unify the weight: the FLO / DESIGN logo and the top-left window title are FULLY bold */
.menubar .logo, .menubar .logo b, .win .title, .win .title .f1, .win .title .f2 { font-weight: 700 !important; }

/* Silkscreen renders small per em → bump every header up the φ scale */
.menubar .logo      { font-size: 23px !important; }
.win .title         { font-size: clamp(21px, 2.3vw, 27px) !important; }
.sub-h              { font-size: clamp(18px, 2vw, 23px) !important; margin: 26px 0 16px !important; }
.sub-h.first        { margin-top: 4px !important; }
.disp, .who h2      { font-size: clamp(28px, 3.8vw, 46px) !important; line-height: 1.4 !important; }
.boot-name          { font-size: clamp(21px, 3.2vw, 33px) !important; }
.proj .head h2      { font-size: clamp(23px, 3vw, 38px) !important; }
.rd-role            { font-size: clamp(23px, 2.7vw, 31px) !important; }
.soft-cat           { font-size: clamp(18px, 1.9vw, 22px) !important; }
.tile .info h4      { font-size: 18px !important; }
.secret .big        { font-size: clamp(30px, 5.5vw, 54px) !important; }

/* ============================================================
   FULL-PAGE PROJECT STAGE (replaces the gothic gallery corridor)
   ============================================================ */
.wallpaper, #corridor { display: none !important; }
.proj-stage { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
/* cover videos are drawn straight into the pixel canvas (see js/os.js) — no DOM video layer */

/* sound toggle lives in the dock now (replaces do_not_open) — swap the speaker icon on mute */
.dock-vol .vic.off { display: none; }
.dock-vol.muted .vic.on { display: none; }
.dock-vol.muted .vic.off { display: block; }
.dock-vol.muted { color: var(--yellow); }
/* white contour framing the whole home — same crisp white border as the bottom tabbar/dock,
   sat flush against the viewport edge and above the menubar/dock so the whole rectangle shows. */
.home-frame { position: absolute; inset: 0; z-index: 650; pointer-events: none; border: 3px solid var(--ink); }
@media (max-width: 640px){ .home-frame { border-width: 2px; } }