/* ============================================================
   JacobOS: refined retro design system
   Monochrome. Desktop metaphor kept, craft rebuilt:
   8px spacing scale, layered depth, one easing curve.
   ============================================================ */

:root{
  /* Ink */
  --ink:      #0d0d0f;
  --ink-2:    #45454c;
  --ink-3:    #74747d;

  /* Surfaces */
  --surface:   #ffffff;
  --surface-2: #f7f7f8;
  --surface-3: #eeeef0;
  --desk:      #e8e8ec;
  --bezel:     #16161a;

  /* Lines */
  --line:      #e2e2e6;
  --line-2:    #c9c9d0;
  --edge:      #0d0d0f;

  /* Spacing (8px scale) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* Depth */
  --sh-1: 0 1px 2px rgba(13,13,15,.06), 0 2px 6px rgba(13,13,15,.05);
  --sh-2: 0 2px 4px rgba(13,13,15,.06), 0 10px 24px rgba(13,13,15,.10);
  --sh-3: 0 6px 14px rgba(13,13,15,.10), 0 28px 64px rgba(13,13,15,.20);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* Type */
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 320ms;

  --bar-h: 60px;
  --icon-size: 76px;
  --gap: 14px;              /* equal surround on all four sides */
  --bezel-pad: 7px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body.retro{
  margin:0;
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Room behind the monitor rather than flat black */
  background:
    radial-gradient(1000px 700px at 50% -10%, #26262c 0%, rgba(38,38,44,0) 70%),
    radial-gradient(800px 600px at 100% 110%, #1c1c22 0%, rgba(28,28,34,0) 65%),
    #0a0a0c;
}
.hidden{ display:none !important; }

/* Read by search engines and screen readers, not shown on screen.
   Describes the same content the desktop holds, so it is not cloaking. */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

img, svg, video{ max-width:100%; }
::selection{ background:var(--ink); color:#fff; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---------- Frame ----------
   Fixed inset so the surround is identical on all four sides. */
.frame.ultra-thin-bezel{
  position:fixed;
  inset:var(--gap);
  background:linear-gradient(160deg, #23232a 0%, var(--bezel) 42%, #101014 100%);
  border-radius:var(--r-xl);
  padding:7px;
  overflow:hidden;
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    0 24px 60px rgba(0,0,0,.55),
    0 60px 140px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.6);
}
/* soft glare across the bezel, like light hitting a screen */
.frame.ultra-thin-bezel::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:80;
  border-radius:var(--r-xl);
  background:linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 26%, rgba(255,255,255,0) 46%);
  mix-blend-mode:screen;
}

/* ---------- System bar ---------- */
.system-bar{
  position:absolute; top:var(--bezel-pad); left:var(--bezel-pad); right:var(--bezel-pad);
  height:var(--bar-h); z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:0 var(--s4);
  background:rgba(247,247,248,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-2);
  border-top-left-radius:var(--r-lg);
  border-top-right-radius:var(--r-lg);
}
.sys-left,.sys-right{ display:flex; align-items:center; gap:var(--s3); min-width:0; }

.brand{
  font-size:20px; font-weight:400; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.brand em{ font-style:normal; }
.brand strong{ font-weight:700; }

.email{
  font-size:13px; color:var(--ink-2); text-decoration:none;
  padding:6px var(--s2); border-radius:var(--r-sm);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.email:hover{ background:var(--surface-3); color:var(--ink); }

.clock{
  font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;
  color:var(--ink-2); white-space:nowrap;
}

.lang-switch{ display:flex; align-items:center; gap:2px; font-size:13px; }
.lang-switch span{ color:var(--line-2); }
.lang-switch .lang{
  font-weight:500; color:var(--ink-3); text-decoration:none;
  padding:4px var(--s2); border-radius:var(--r-sm);
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang-switch .lang:hover{ color:var(--ink); background:var(--surface-3); }
.lang-switch .current{ color:var(--ink); background:var(--surface-3); font-weight:600; }

.sys-btn{
  display:grid; place-items:center;
  min-width:32px; height:32px; padding:0 var(--s2);
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink);
  font-family:var(--font); font-size:14px; cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sys-btn:hover{ background:var(--surface-2); border-color:var(--ink-3); }
.sys-btn:active{ transform:translateY(1px); }
#sound-toggle{ font-weight:600; }
#sound-toggle.muted{ color:var(--ink-3); text-decoration:line-through; }

/* ---------- Desktop ---------- */
.desktop{
  position:absolute;
  top:calc(var(--bezel-pad) + var(--bar-h)); left:var(--bezel-pad);
  right:var(--bezel-pad); bottom:var(--bezel-pad);
  overflow:hidden;
  border-bottom-left-radius:var(--r-lg);
  border-bottom-right-radius:var(--r-lg);
}
/* Layered wallpaper: light source, dot grid, grain, vignette */
.wallpaper{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 620px at 12% -6%, #ffffff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(760px 560px at 92% 104%, #dcdce4 0%, rgba(220,220,228,0) 60%),
    linear-gradient(165deg, #f2f2f5 0%, var(--desk) 55%, #dedee5 100%);
}
.wallpaper::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(13,13,15,.13) 1px, transparent 1.4px);
  background-size:24px 24px;
  mask-image:radial-gradient(120% 110% at 30% 0%, #000 35%, rgba(0,0,0,.35) 100%);
  -webkit-mask-image:radial-gradient(120% 110% at 30% 0%, #000 35%, rgba(0,0,0,.35) 100%);
  opacity:.55;
}
/* fine grain + vignette give the surface some tooth */
.wallpaper::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(13,13,15,.16) 100%);
  background-size:160px 160px, 100% 100%;
  opacity:.5;
  mix-blend-mode:multiply;
}

/* ---------- Drawing layer ---------- */
.draw-layer{
  position:absolute; left:0; top:0; z-index:1;
  touch-action:none; cursor:crosshair;
}
.draw-layer.is-off{ pointer-events:none; cursor:default; }

.drawbar{
  position:absolute; left:var(--s4); bottom:var(--s4); z-index:12;
  display:flex; align-items:center; gap:2px; padding:4px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  box-shadow:0 1px 2px rgba(13,13,15,.10), 0 8px 20px rgba(13,13,15,.12), inset 0 1px 0 rgba(255,255,255,.9);
}
.drawbar-sep{ width:1px; height:20px; background:var(--line-2); }
.drawbar-btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:7px var(--s3); border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--ink-2);
  font-family:var(--font); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.drawbar-ico{ display:grid; place-items:center; width:17px; height:17px; }
.drawbar-ico svg{ width:17px; height:17px; }
.drawbar-btn:hover{ background:var(--surface-3); color:var(--ink); }
.drawbar-btn:active{ transform:translateY(1px); }
.drawbar-btn.is-on{ background:var(--ink); color:#fff; }
.drawbar-btn.is-on:hover{ background:#000; color:#fff; }
.drawbar-btn.is-empty{ opacity:.42; }
.drawbar-btn.is-empty:hover{ background:transparent; color:var(--ink-2); }

/* ---------- Desktop icons ---------- */
.icons{
  position:absolute; left:var(--s4); top:var(--s4);
  display:grid; gap:var(--s2);
  list-style:none; margin:0; padding:0; z-index:10;
}
/* Free-positioned icons span the whole desktop, so the list itself must not
   swallow clicks meant for the drawing layer underneath it. */
.icons--free{ position:absolute; inset:0; display:block; pointer-events:none; }
.icons--free .desktop-icon{ position:absolute; pointer-events:auto; }

.desktop-icon{
  width:108px; padding:var(--s2) var(--s1) var(--s2);
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  border-radius:var(--r-md); cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:none;
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.icon-art{
  display:grid; place-items:center;
  width:var(--icon-size); height:var(--icon-size);
  border-radius:var(--r-md);
  background:linear-gradient(160deg, #ffffff 0%, #fafafb 50%, #f0f0f3 100%);
  border:1px solid var(--line-2);
  box-shadow:
    0 1px 2px rgba(13,13,15,.10),
    0 6px 14px rgba(13,13,15,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
  color:var(--ink);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.icon-art .ico{ width:56%; height:56%; }
.desktop-icon span:last-child{
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  text-align:center; line-height:1.3;
  padding:2px 6px; border-radius:var(--r-sm);
}
.desktop-icon:hover .icon-art{ transform:translateY(-2px); box-shadow:var(--sh-2), var(--sh-inset); }
.desktop-icon:hover span:last-child{ color:var(--ink); }
.desktop-icon:focus-visible{ outline:none; }
.desktop-icon:focus-visible .icon-art{ outline:2px solid var(--ink); outline-offset:3px; }
.desktop-icon.is-dragging{ z-index:50; }
.desktop-icon.is-dragging .icon-art{ transform:scale(1.04); box-shadow:var(--sh-3); }

/* ---------- Windows ---------- */
.window, .pwin{
  position:absolute; top:50%; left:50%;
  transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)));
  width:min(1080px, 88%); height:min(760px, 86%);
  background:var(--surface);
  border:1px solid rgba(13,13,15,.55);
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; overflow:hidden;
  z-index:30;
  /* contact shadow, mid shadow, wide ambient, plus a top highlight */
  box-shadow:
    0 1px 2px rgba(13,13,15,.16),
    0 10px 22px rgba(13,13,15,.13),
    0 34px 70px rgba(13,13,15,.22),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
  animation:win-in var(--t) var(--ease) both;
}
/* The window you are working in sits higher than the ones behind it */
.window.is-active, .pwin.is-active, .swin.is-active, .jobwin.is-active{
  border-color:rgba(13,13,15,.7);
  box-shadow:
    0 2px 4px rgba(13,13,15,.18),
    0 16px 34px rgba(13,13,15,.16),
    0 48px 100px rgba(13,13,15,.30),
    inset 0 1px 0 rgba(255,255,255,.9);
}
@keyframes win-in{
  from{ opacity:0; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px) + 10px)) scale(.985); }
  to  { opacity:1; }
}
.window.is-positioned, .pwin.is-positioned{
  transform:none; margin:0; animation:none;
}
.window.is-dragging, .pwin.is-dragging{
  box-shadow:0 10px 24px rgba(13,13,15,.14), 0 40px 90px rgba(13,13,15,.28);
  transition:none;
}

/* A folder is a small window; a project needs the room */
.win--folder{ width:min(760px, 78%); height:min(560px, 74%); }
.win--project{ width:min(1080px, 88%); height:min(780px, 88%); }

.titlebar{
  position:relative; flex:none;
  height:52px; display:flex; align-items:center; gap:var(--s3);
  padding:0 var(--s4);
  background:linear-gradient(180deg, #fdfdfe 0%, var(--surface-2) 45%, var(--surface-3) 100%);
  border-bottom:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 0 rgba(255,255,255,.6);
  user-select:none;
}
/* faint pinstripe, a nod to the old titlebars without the noise */
.titlebar::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(13,13,15,.05) 0 1px, transparent 1px 4px);
  opacity:.6;
}
.titlebar--drag{ cursor:grab; touch-action:none; }
.window.is-dragging .titlebar--drag,
.pwin.is-dragging .titlebar--drag{ cursor:grabbing; }

.title{
  position:relative; margin:0;
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--ink);
}
.titlebar-meta{
  position:relative; margin-left:auto;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
.btn-x{
  position:relative; flex:none;
  width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  background:var(--surface); color:var(--ink-2);
  font-size:16px; line-height:1; text-decoration:none; cursor:pointer; padding:0;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-x:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-x:active{ transform:scale(.94); }

.content{
  flex:1; min-height:0; overflow:auto;
  background:var(--surface);
  padding:var(--s5);
  overscroll-behavior:contain;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:10px var(--s4);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink);
  font-size:13.5px; font-weight:600; text-decoration:none; cursor:pointer;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:hover{ background:var(--surface-2); border-color:var(--ink-3); transform:translateY(-1px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); box-shadow:var(--sh-1); }
.btn--primary{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--primary:hover{ background:#000; color:#fff; border-color:#000; }

/* ---------- Projects folder ---------- */
.folder-content{ background:var(--surface); padding:var(--s5); }
.folder-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
}
.folder-icon{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s2);
  border:1px solid transparent; border-radius:var(--r-lg);
  cursor:pointer; user-select:none; text-align:center;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.folder-icon .icon-art{ width:84px; height:84px; }
.folder-icon-name{ font-size:13.5px; font-weight:600; color:var(--ink-2); line-height:1.35; }
.folder-icon:hover{ background:var(--surface-2); border-color:var(--line); transform:translateY(-2px); }
.folder-icon:hover .icon-art{ transform:translateY(-2px); box-shadow:var(--sh-2), var(--sh-inset); }
.folder-icon:hover .folder-icon-name{ color:var(--ink); }
.folder-icon:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ---------- Project window ---------- */
/* Tab bar under the titlebar, switches project in place */
.pwtabs{
  flex:none; display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s4);
  background:linear-gradient(180deg, var(--surface-2), #eeeef1);
  border-bottom:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  overflow-x:auto; scrollbar-width:thin;
}
.pwtab{
  flex:0 0 auto; padding:8px var(--s4);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:linear-gradient(180deg, #fff, var(--surface-2));
  color:var(--ink-2); font-family:var(--font);
  font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
  box-shadow:0 1px 2px rgba(13,13,15,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.pwtab:hover{ color:var(--ink); border-color:var(--ink-3); transform:translateY(-1px); box-shadow:var(--sh-2); }
.pwtab.current{
  background:linear-gradient(180deg, #2a2a31, var(--ink));
  color:#fff; border-color:var(--ink); cursor:default;
  box-shadow:0 2px 6px rgba(13,13,15,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.pwtab.current:hover{ transform:none; }

.pw-content{ display:flex; flex-direction:column; gap:var(--s5); }
.pw-text{ max-width:70ch; }
.pw-text p{ margin:0 0 var(--s3); color:var(--ink-2); font-size:15.5px; }
.pw-text p:first-child{
  font-size:18px; line-height:1.5; color:var(--ink); letter-spacing:-.01em;
}
.pw-media{ min-width:0; }
.pw-actions{
  display:flex; flex-wrap:wrap; gap:var(--s3); margin:0;
  padding-top:var(--s2); border-top:1px solid var(--line);
}

/* ---------- Media: videos ---------- */
.m-videos{ display:grid; gap:var(--s4); }
.m-videos video{
  width:100%; display:block; background:#000;
  border:1px solid var(--edge); border-radius:var(--r-md);
  box-shadow:var(--sh-2);
}

/* ---------- Media: single image ---------- */
.m-single img{
  width:100%; display:block; height:auto;
  border:1px solid var(--edge); border-radius:var(--r-md);
  box-shadow:var(--sh-2);
}

/* ---------- Media: website cards ---------- */
.psites{ display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.psite{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--edge); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.psite-shot{ display:block; overflow:hidden; }
.psite img{
  display:block; width:100%; height:260px;
  object-fit:cover; object-position:top center;
  transition:transform var(--t-slow) var(--ease);
}
.psite-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4);
  border-top:1px solid var(--line-2); background:var(--surface);
}
.psite-name{ font-weight:600; font-size:14.5px; }
.psite-go{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.psite:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
.psite:hover img{ transform:scale(1.03); }
.psite:hover .psite-go{ color:var(--ink); }

/* ---------- Media: masonry gallery ---------- */
.pgallery{ columns:280px; column-gap:var(--s4); }
.pgallery-item{
  position:relative; display:block; width:100%; margin:0 0 var(--s4); padding:0;
  border:1px solid var(--edge); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface-3); cursor:zoom-in; break-inside:avoid;
  box-shadow:var(--sh-1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pgallery-item img{ display:block; width:100%; height:auto; }
.pgallery-zoom{
  position:absolute; right:var(--s3); bottom:var(--s3);
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:var(--sh-1);
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.pgallery-zoom svg{ width:17px; height:17px; }
.pgallery-item:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
.pgallery-item:hover .pgallery-zoom{ opacity:1; transform:translateY(0); }
.pgallery-item:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------- Lightbox ---------- */
body.lightbox-open{ overflow:hidden; }
.plightbox{
  position:fixed; inset:0; z-index:9600; display:none;
  background:rgba(10,10,12,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s3); padding:var(--s5);
}
.plightbox.open{ display:grid; animation:fade-in var(--t) var(--ease) both; }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }
.plightbox-stage{
  margin:0; grid-column:2; display:flex; align-items:center; justify-content:center;
  max-height:calc(100vh - 120px); cursor:zoom-out;
}
.plightbox-stage img{
  max-width:100%; max-height:calc(100vh - 120px);
  display:block; border-radius:var(--r-md);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:pop-in var(--t-slow) var(--ease) both;
}
@keyframes pop-in{ from{ opacity:0; transform:scale(.98) } to{ opacity:1; transform:none } }
.plightbox-nav,.plightbox-close{
  border:1px solid rgba(255,255,255,.25); border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); color:#fff; cursor:pointer; padding:0;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.plightbox-nav{ width:52px; height:52px; font-size:26px; line-height:1; }
.plightbox-nav:hover,.plightbox-close:hover{ background:rgba(255,255,255,.22); }
.plightbox-nav:active,.plightbox-close:active{ transform:scale(.94); }
.plightbox-nav.prev{ grid-column:1; }
.plightbox-nav.next{ grid-column:3; }
.plightbox-close{
  position:absolute; top:var(--s4); right:var(--s4);
  width:44px; height:44px; font-size:22px; line-height:1;
}
.plightbox-count{
  position:absolute; left:50%; bottom:var(--s4); transform:translateX(-50%);
  margin:0; padding:6px var(--s3);
  border-radius:var(--r-pill); background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.2); color:#fff;
  font-family:var(--mono); font-size:12px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* ---------- Socials ---------- */
.socials-content{ padding:var(--s5); }
.socials-grid{
  display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  margin:0; padding:0; list-style:none;
}
.socials-grid .social-link{
  display:flex; flex-direction:column; align-items:center; gap:var(--s3);
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-lg);
  text-decoration:none; color:var(--ink-2); background:var(--surface);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
.socials-grid img{ width:44px; height:44px; filter:grayscale(100%) contrast(115%); }
.socials-grid span{ font-size:13.5px; font-weight:600; }
.socials-grid .social-link:hover{
  transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--line-2); color:var(--ink);
}

/* ---------- Cards shared by About / Work ---------- */
.about95,.work95{ padding:var(--s5); background:var(--surface-2); }
.about95-card,.work95-card{
  position:relative; margin:0 auto; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
}
.about95-card{ max-width:640px; padding:var(--s6) var(--s5) var(--s5); text-align:center; }
.about95-logo img{ height:64px; image-rendering:pixelated; filter:grayscale(100%) contrast(110%); }
.about95-title{ margin:var(--s3) 0 var(--s1); font-size:30px; letter-spacing:-.02em; }
.about95-version{ margin:0 0 var(--s5); color:var(--ink-3); font-family:var(--mono); font-size:13px; }

.about95-mem{ margin:0 0 var(--s5); text-align:left; }
.about95-mem-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:13px; font-weight:600; margin-bottom:var(--s2);
}
.about95-mem-free{ color:var(--ink-3); font-family:var(--mono); font-weight:400; }
.about95-meter{
  position:relative; height:14px; border-radius:var(--r-pill);
  background:var(--surface-3); border:1px solid var(--line-2); overflow:hidden;
}
.about95-fill{ height:100%; background:var(--ink); border-radius:var(--r-pill); }
.about95-meter .t{ position:absolute; top:0; bottom:0; width:1px; background:var(--line-2); }
.about95-meter .t1{ left:33.33%; } .about95-meter .t2{ left:66.66%; }
.about95-meter-labels{
  display:flex; justify-content:space-between; margin-top:var(--s2);
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}

.about95-specs{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
  margin:0 0 var(--s5); text-align:left;
}
.about95-specs > div{ display:grid; gap:2px; }
.about95-specs dt{
  font-family:var(--mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-3);
}
.about95-specs dd{ margin:0; font-size:14px; color:var(--ink); }

.about95-cta{ margin:0 0 var(--s4); }
.about95-btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:12px var(--s5); border-radius:var(--r-pill);
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  font-weight:600; font-size:14px; text-decoration:none;
  box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.about95-btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }
.about95-fine{ margin:0; font-size:12px; color:var(--ink-3); line-height:1.6; }

/* ---------- Work timeline ---------- */
.work95-card{ max-width:820px; padding:var(--s6) var(--s5) var(--s5); }
.work95-head{ text-align:center; margin-bottom:var(--s5); }
.work95-title{ margin:0; font-size:24px; font-family:var(--mono); font-weight:600; letter-spacing:-.02em; }
.work95-sub{ margin:var(--s1) 0 0; color:var(--ink-3); font-size:13.5px; }

.work95-timeline{ list-style:none; margin:0; padding:0 0 0 var(--s6); position:relative; }
.work95-timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px;
  width:2px; background:var(--line-2); border-radius:2px;
}
.job{ position:relative; margin:0 0 var(--s4); }
.job:last-child{ margin-bottom:0; }
.job-pin{
  position:absolute; left:calc(-1 * var(--s6) + 1px); top:20px;
  width:14px; height:14px; border-radius:50%;
  background:var(--surface); border:2px solid var(--ink);
}
.job-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s4);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.job-card:hover{ border-color:var(--line-2); box-shadow:var(--sh-1); transform:translateY(-1px); }
.job-top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; }
.job-title{ margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
.job-dates{ font-family:var(--mono); font-size:12px; color:var(--ink-3); white-space:nowrap; }
.job-meta{ margin:var(--s1) 0 var(--s3); font-size:13px; color:var(--ink-3); }
.job-tags{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.pill{
  display:inline-block; padding:4px var(--s3);
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-pill); font-size:11.5px; font-weight:600; color:var(--ink-2);
}
.job-more{
  margin-top:var(--s3); padding:8px var(--s3);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink);
  font-family:var(--font); font-size:12.5px; font-weight:600; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.job-more:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Job popup ---------- */
.jobwin{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.98);
  width:min(560px,94vw); max-height:80vh;
  background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); z-index:9300;
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.jobwin.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
/* once dragged, position is driven by left/top instead of the centring transform */
.jobwin.is-positioned{ transform:none; }
.jobwin-body{ padding:var(--s5); overflow:auto; }
.jobwin-dates{ margin:0 0 var(--s3); font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.jobwin-body p{ margin:0 0 var(--s3); color:var(--ink-2); }
.jobwin-body p:last-child{ margin:0; }

/* ---------- Boot screen ---------- */
.boot95-overlay{
  position:fixed; inset:0; z-index:9999; background:#0a0a0c;
  display:grid; place-items:center;
}
.boot95-overlay::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.16) 50%, rgba(0,0,0,0) 50%);
  background-size:100% 4px; opacity:.3;
}
.boot95-card{
  width:min(560px,92vw); padding:var(--s6) var(--s5) var(--s5);
  background:var(--surface); border-radius:var(--r-xl);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.boot95-head{ text-align:center; }
.boot95-logo{ height:52px; image-rendering:pixelated; filter:grayscale(100%); }
.boot95-title{ margin:var(--s3) 0 2px; font-size:26px; letter-spacing:-.02em; }
.boot95-version{ margin:0 0 var(--s5); font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }
.boot95-bios{
  margin:0 0 var(--s4); height:132px; overflow:hidden;
  background:#0c0c0e; color:#b6ffb6; border-radius:var(--r-md);
  padding:var(--s4); font-family:var(--mono); font-size:13px; line-height:1.5;
  white-space:pre-wrap; text-shadow:0 0 8px rgba(0,255,120,.28);
}
.boot95-meter{
  position:relative; height:6px; border-radius:var(--r-pill);
  background:var(--surface-3); overflow:hidden;
}
.boot95-fill{ height:100%; background:var(--ink); transition:width 180ms linear; }
.boot95-meter .t{ display:none; }
.boot95-foot{ display:flex; justify-content:center; margin-top:var(--s4); }
.boot95-foot .hint{ font-size:12px; color:var(--ink-3); }
@keyframes boot95-out{ to{ opacity:0 } }
.boot95-hide{ animation:boot95-out 380ms var(--ease) forwards; }

/* ---------- Other websites popup ---------- */
.other-sites-popup{
  position:fixed; right:var(--s6); bottom:var(--s6); z-index:9000;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.other-sites-popup.show{ opacity:1; transform:none; pointer-events:auto; }
.other-sites-card{
  position:relative; width:288px; padding:var(--s5);
  background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
}
.other-sites-close{
  position:absolute; top:var(--s3); right:var(--s3);
  width:26px; height:26px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; background:var(--surface);
  color:var(--ink-2); font-size:15px; cursor:pointer; padding:0;
}
.other-sites-close:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.other-sites-title{ margin:0 var(--s6) var(--s4) 0; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.other-sites-links{ display:grid; gap:var(--s2); }
.other-sites-btn{
  display:block; text-align:center; padding:12px var(--s4);
  border-radius:var(--r-pill); background:var(--ink); color:#fff;
  border:1px solid var(--ink); font-weight:600; font-size:14px; text-decoration:none;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.other-sites-btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }

/* the reopen button: large and legible, not a tiny arrow */
.other-sites-toggle{
  position:fixed; right:var(--s6); bottom:var(--s6); z-index:8999;
  display:inline-flex; align-items:center; gap:var(--s2);
  height:52px; padding:0 var(--s5) 0 var(--s4);
  border:1px solid var(--edge); border-radius:var(--r-pill);
  background:var(--ink); color:#fff; cursor:pointer;
  font-family:var(--font); font-size:14.5px; font-weight:600;
  box-shadow:var(--sh-3);
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.other-sites-toggle .ost-icon{ display:grid; place-items:center; width:22px; height:22px; }
.other-sites-toggle .ost-icon svg{ width:22px; height:22px; }
.other-sites-toggle:hover{ transform:translateY(-2px); background:#000; }
.other-sites-toggle.toggle-hidden{ opacity:0; pointer-events:none; transform:translateY(12px); }

/* ---------- Featured project card ---------- */
.featured{
  position:fixed; right:var(--s6); top:50%; z-index:8800;
  width:352px; max-width:calc(100vw - var(--s6) * 2);
  transform:translateY(-50%) translateX(20px);
  opacity:0; pointer-events:none;
  transition:opacity 560ms var(--ease), transform 560ms var(--ease);
}
.featured.show{ opacity:1; transform:translateY(-50%); pointer-events:auto; }

.featured-card{
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid rgba(13,13,15,.55);
  border-radius:var(--r-lg);
  box-shadow:
    0 2px 4px rgba(13,13,15,.18),
    0 16px 34px rgba(13,13,15,.16),
    0 48px 100px rgba(13,13,15,.30),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.featured-close{
  position:absolute; top:var(--s3); right:var(--s3); z-index:2;
  width:28px; height:28px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.35); border-radius:50%;
  background:rgba(10,10,12,.55); color:#fff;
  font-size:16px; line-height:1; cursor:pointer; padding:0;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.featured-close:hover{ background:rgba(10,10,12,.85); }
.featured-close:active{ transform:scale(.94); }

.featured-media{ display:block; background:#000; line-height:0; }
.featured-media video{
  width:100%; height:198px; object-fit:cover; display:block;
  border-bottom:1px solid var(--line-2);
}
.featured-body{ padding:var(--s4) var(--s5) var(--s5); }
.featured-kicker{
  margin:0 0 var(--s2);
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase; color:var(--ink-3);
}
.featured-text{ margin:0 0 var(--s4); font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.featured-go{ width:100%; justify-content:center; }

/* ---------- Secret menu ---------- */
.secret-arrow{ transition:transform var(--t) var(--ease); }
.secret-arrow.open{ transform:rotate(180deg); }
.secret-panel{
  position:fixed; top:calc(6px + var(--bar-h) + var(--s2)); right:var(--s4); z-index:9500;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.secret-panel.open{ opacity:1; transform:none; pointer-events:auto; }
.secret-card{
  width:252px; padding:var(--s4);
  background:var(--surface); border:1px solid var(--edge);
  border-radius:var(--r-lg); box-shadow:var(--sh-3);
}
.secret-title{ margin:0; font-family:var(--mono); font-size:13.5px; font-weight:600; }
.secret-sub{ margin:2px 0 var(--s3); font-size:12px; color:var(--ink-3); }
.secret-item{
  display:block; width:100%; text-align:left; margin-bottom:var(--s2);
  padding:10px var(--s3); border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); color:var(--ink);
  font-family:var(--mono); font-size:12.5px; font-weight:500; cursor:pointer;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.secret-item:last-child{ margin-bottom:0; }
.secret-item:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Snake ---------- */
.swin{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.98);
  width:min(480px,94vw); background:var(--surface);
  border:1px solid var(--edge); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  z-index:9400; display:flex; flex-direction:column; overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.swin.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.swin.is-positioned{ transform:none; }
.swin-body{ padding:var(--s4); display:grid; gap:var(--s3); }
.snake-hud{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:13px; }
#snake-canvas{
  width:100%; height:auto; display:block; background:#0c0c0e;
  border-radius:var(--r-md); image-rendering:pixelated;
}
.snake-hint{ margin:0; text-align:center; font-size:12px; color:var(--ink-3); }

/* ---------- CRT mode ---------- */
body.crt::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99990;
  background:linear-gradient(to bottom, rgba(0,0,0,.16) 50%, rgba(0,0,0,0) 50%);
  background-size:100% 4px; mix-blend-mode:multiply;
}

/* ---------- Self destruct ---------- */
@keyframes site-shake{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-7px,4px) } 40%{ transform:translate(6px,-5px) }
  60%{ transform:translate(-5px,-4px) } 80%{ transform:translate(7px,5px) }
}
body.shake .frame{ animation:site-shake .45s linear infinite; }
.boom-overlay{ position:fixed; inset:0; z-index:10000; background:#0a0a0c; display:grid; place-items:center; }
.boom-card{
  width:min(440px,90vw); text-align:center; padding:var(--s6) var(--s5) var(--s5);
  background:var(--surface); border-radius:var(--r-xl); box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.boom-card img{ height:56px; filter:grayscale(100%); image-rendering:pixelated; }
.boom-card h2{ margin:var(--s3) 0 var(--s1); font-size:22px; letter-spacing:-.02em; }
.boom-card p{ margin:0 0 var(--s5); color:var(--ink-2); }

/* ---------- Dedicated project pages ---------- */
.pwin{ width:min(1200px, 92%); height:min(860px, 90%); }
.ptabs{
  flex:none; display:flex; align-items:center; gap:var(--s2);
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-2); background:var(--surface-2);
  overflow-x:auto; scrollbar-width:thin;
}
.ptab{
  flex:0 0 auto; padding:8px var(--s4);
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink-2);
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.ptab:hover{ color:var(--ink); border-color:var(--ink-3); }
.ptab.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.ptab-home{ margin-right:var(--s2); }

.pcontent{
  flex:1; min-height:0; overflow:auto; background:var(--surface);
  padding:var(--s6); display:grid; gap:var(--s6);
  grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  align-items:start;
}
.pcontent--single{ grid-template-columns:1fr; }
.pcontent--single .ptext{ max-width:70ch; margin:0 auto; }
.pmedia{ min-width:0; }
.ptext h1{ margin:0 0 var(--s4); font-size:30px; letter-spacing:-.02em; }
.ptext p{ margin:0 0 var(--s4); color:var(--ink-2); }
.pvisit-wrap{ margin-top:var(--s5); }
.pvisit{
  display:inline-flex; padding:12px var(--s5); border-radius:var(--r-pill);
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  font-weight:600; font-size:14px; text-decoration:none;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.pvisit:hover{ transform:translateY(-1px); box-shadow:var(--sh-2); }

/* Photo-led pages read better with the text on top and the grid full width */
.pcontent--gallery{ grid-template-columns:1fr; }
.pcontent--gallery .ptext{ order:-1; max-width:70ch; }

/* ============================================================
   Dragging state (kept last so it wins over each panel's own
   centring transform and open/close easing)
   ============================================================ */
.window.is-positioned, .pwin.is-positioned,
.swin.is-positioned,  .jobwin.is-positioned{
  transform:none; margin:0; animation:none;
}
.window.is-dragging, .pwin.is-dragging,
.swin.is-dragging,  .jobwin.is-dragging{
  transition:none;
  box-shadow:
    0 2px 6px rgba(13,13,15,.20),
    0 20px 44px rgba(13,13,15,.20),
    0 60px 120px rgba(13,13,15,.34),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .pcontent{ grid-template-columns:1fr; padding:var(--s5); gap:var(--s5); }
}

@media (max-width:700px){
  :root{ --bar-h:52px; --icon-size:58px; }

  .frame.ultra-thin-bezel{ inset:0; border-radius:0; padding:0; box-shadow:none; }
  .frame.ultra-thin-bezel::after{ display:none; }
  .system-bar{ top:0; left:0; right:0; padding:0 var(--s3); border-radius:0; gap:var(--s2); }
  .desktop{ top:var(--bar-h); left:0; right:0; bottom:0; border-radius:0; }

  .pwtabs{ padding:var(--s2) var(--s3); gap:var(--s2); }
  .pwtab{ padding:7px var(--s3); font-size:12.5px; }

  .brand{ font-size:16px; }
  .email{ display:none; }
  .sys-right{ gap:var(--s2); }
  .clock{ font-size:12px; }

  .drawbar{ left:var(--s3); bottom:var(--s3); }
  .drawbar-btn{ padding:7px var(--s2); font-size:12px; }

  .icons{ left:var(--s3); top:var(--s3); }
  /* Narrow screens always use the tidy grid, ignoring any dragged positions */
  .icons--free{ inset:auto; left:var(--s3); top:var(--s3); display:grid; }
  .icons--free .desktop-icon{ position:static; }
  .desktop-icon{ width:84px; }
  .desktop-icon span:last-child{ font-size:11.5px; }

  /* Windows go full bleed and stop being draggable */
  .window,.pwin{
    top:var(--s2); left:var(--s2); right:var(--s2); bottom:var(--s2);
    width:auto; height:auto; transform:none !important;
    border-radius:var(--r-md); box-shadow:var(--sh-2);
    animation:none;
  }
  .titlebar{ height:48px; padding:0 var(--s3); }
  .titlebar--drag{ cursor:default; }
  .titlebar-meta{ display:none; }
  .content{ padding:var(--s4); }

  .folder-content{ padding:var(--s4); }
  .folder-grid{ grid-template-columns:repeat(auto-fill, minmax(112px,1fr)); gap:var(--s3); }
  .folder-icon{ padding:var(--s3) var(--s1); }
  .folder-icon .icon-art{ width:64px; height:64px; }
  .folder-icon-name{ font-size:12px; }

  .pw-content{ gap:var(--s4); }
  .pw-text p:first-child{ font-size:16px; }
  .pgallery{ columns:1; }
  .psites{ grid-template-columns:1fr; }
  .psite img{ height:200px; }

  .about95,.work95{ padding:var(--s3); }
  .about95-card{ padding:var(--s5) var(--s4); }
  .about95-specs{ grid-template-columns:1fr; gap:var(--s3); }
  .work95-card{ padding:var(--s5) var(--s4) var(--s4); }
  .work95-timeline{ padding-left:var(--s5); }
  .job-pin{ left:calc(-1 * var(--s5) + 2px); }

  .ptabs{ padding:var(--s2) var(--s3); }
  .ptab{ padding:7px var(--s3); font-size:12.5px; }
  .pcontent{ padding:var(--s4); }
  .ptext h1{ font-size:24px; }

  /* Lightbox: arrows under the photo so the image gets full width */
  .plightbox{ grid-template-columns:1fr; padding:var(--s3) var(--s3) 92px; gap:0; }
  .plightbox-stage{ grid-column:1; max-height:calc(100dvh - 150px); }
  .plightbox-stage img{ max-height:calc(100dvh - 150px); }
  .plightbox-nav{ position:absolute; bottom:var(--s3); width:52px; height:52px; }
  .plightbox-nav.prev{ left:calc(50% - 104px); }
  .plightbox-nav.next{ left:calc(50% + 52px); }
  .plightbox-count{ bottom:76px; }
  .plightbox-close{ top:var(--s2); right:var(--s2); width:40px; height:40px; }

  /* On a phone the card sits along the bottom instead of the right edge */
  .featured{
    right:var(--s3); left:var(--s3); top:auto; bottom:var(--s3);
    width:auto; max-width:none; transform:translateY(20px);
  }
  .featured.show{ transform:none; }
  .featured-media video{ height:150px; }
  .featured-body{ padding:var(--s3) var(--s4) var(--s4); }
  /* keep the floating button from landing on top of it */
  body.featured-open .other-sites-toggle{ opacity:0; pointer-events:none; }

  .other-sites-popup{ right:var(--s3); left:var(--s3); bottom:var(--s3); }
  .other-sites-card{ width:auto; }
  .other-sites-toggle{ right:var(--s3); bottom:var(--s3); height:48px; }
  .secret-panel{ top:calc(var(--bar-h) + var(--s2)); right:var(--s3); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}