/* Modern mode, v3: an editorial product-site interpretation with real depth
   and choreographed motion. Layout, scale, hierarchy and movement all change;
   retro borders, bevels, blinks, shadows and serif/glyph decorations go away.
   Flat ink + orange on paper (recorded taste), no gradients/glass/pills/Inter. */
html.modern body {
  background: #f5f2ea;
  background: linear-gradient(180deg, #f7f3ea 0%, #f4eee0 45%, #f1e8d3 100%) fixed;
  color: #141414;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px;
}

/* hero: full-bleed ink band, huge name, outline depth layer, 3D cube */
html.modern .banner {
  overflow: visible;   /* cube must float fully through rotation/bob/parallax */
  background: #141414;
  color: #f5f2ea;
  text-align: left;
  padding: clamp(48px, 9vh, 96px) 24px clamp(40px, 7vh, 80px);
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
html.modern .banner::after { content: none; }         /* kill retro sheen */
html.modern .site-name {
  display: block;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 8.5vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #f5f2ea;
  text-shadow: none;
  position: relative;
  max-width: 12ch;
  z-index: 2;
}
html.modern .site-name::after {                        /* hard offset outline layer = depth, no blur */
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  z-index: -1;
  transform: translate(0.055em, 0.055em);
  color: transparent;
  -webkit-text-stroke: 2px #ff6a00;
}
html.modern .site-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #9a948a;
  margin: 14px 0 0 0;
  position: relative;
  z-index: 2;
}
/* 3D cube, pure CSS, flat faces */
html.modern .mcube {
  position: absolute;
  right: clamp(16px, 8vw, 120px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(96px, 13vw, 150px);
  height: clamp(96px, 13vw, 150px);
  perspective: 900px;
  z-index: 1;
}
html.modern .mcube-in {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
html.modern .mcube i {
  position: absolute; inset: 0;
  border: 1px solid #141414;
  background: #ff6a00;
  backface-visibility: hidden;
}
html.modern .mcube i.f1 { transform: rotateY(0deg)   translateZ(clamp(48px, 6.5vw, 75px)); }
html.modern .mcube i.f2 { transform: rotateY(90deg)  translateZ(clamp(48px, 6.5vw, 75px)); background: #d95b00; }
html.modern .mcube i.f3 { transform: rotateY(180deg) translateZ(clamp(48px, 6.5vw, 75px)); background: #b34a00; }
html.modern .mcube i.f4 { transform: rotateY(-90deg) translateZ(clamp(48px, 6.5vw, 75px)); background: #d95b00; }
html.modern .mcube i.f5 { transform: rotateX(90deg)  translateZ(clamp(48px, 6.5vw, 75px)); background: #f5f2ea; }
html.modern .mcube i.f6 { transform: rotateX(-90deg) translateZ(clamp(48px, 6.5vw, 75px)); background: #3f2000; }
@media (prefers-reduced-motion: no-preference) {
  html.modern .mcube-in { animation: mcspin 16s linear infinite; }
}
@keyframes mcspin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}
@media (max-width: 700px) {
  html.modern .banner { padding-top: 40px; }
  html.modern .mcube {
    position: static;
    transform: none;
    margin: 8px auto 0 auto;
    animation: none;   /* mcbob animates margin-top and would stomp this layout margin */
    width: clamp(110px, 34vw, 140px);
    height: clamp(110px, 34vw, 140px);
  }
  html.modern .mcube i.f1 { transform: rotateY(0deg)   translateZ(clamp(55px, 17vw, 70px)); }
  html.modern .mcube i.f2 { transform: rotateY(90deg)  translateZ(clamp(55px, 17vw, 70px)); background: #d95b00; }
  html.modern .mcube i.f3 { transform: rotateY(180deg) translateZ(clamp(55px, 17vw, 70px)); background: #b34a00; }
  html.modern .mcube i.f4 { transform: rotateY(-90deg) translateZ(clamp(55px, 17vw, 70px)); background: #d95b00; }
  html.modern .mcube i.f5 { transform: rotateX(90deg)  translateZ(clamp(55px, 17vw, 70px)); }
  html.modern .mcube i.f6 { transform: rotateX(-90deg) translateZ(clamp(55px, 17vw, 70px)); }
}

/* nav: sticky minimal bar */
html.modern .nav {
  background: #f5f2ea;
  color: #141414;
  border-bottom: 1px solid #141414;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 13px 20px;
  position: sticky;
  top: 0;
  z-index: 50;
}
html.modern .nav a {
  color: #141414;
  text-decoration: none;
  position: relative;
  padding: 2px 0;
}
html.modern .nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: #ff6a00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.22,.9,.24,1);
}
@media (hover: hover) {
  html.modern .nav a:hover::after { transform: scaleX(1); }
}
html.modern .nav a:hover { background: none; color: #141414; }
html.modern .nav span { color: #b9b2a6; }

/* ticker */
html.modern .marquee {
  background: #f5f2ea;
  color: #141414;
  border-top: none;
  border-bottom: 1px solid #141414;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 7px 0;
}
html.modern .marquee span { line-height: 16px; }
html.modern .pxface { width: 12px; height: 12px; }

/* content: full-width editorial flow, no box */
html.modern .content {
  background: transparent;
  border: none;
  outline: none;   /* v24j (user 9:05): the retro card's white outline leaked into modern */
  box-shadow: none;
  margin: 0 auto;
  padding: clamp(40px, 7vh, 72px) 24px 56px;
  max-width: 760px;
}
html.modern h1, html.modern h2, html.modern .res-head .name {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
html.modern h1 {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #141414;
  border-bottom: none;
  margin: 0 0 14px 0;
}
html.modern h1::before { content: none; }
html.modern h1 .hstar { display: none; }
html.modern h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #141414;
  border-bottom: 1px solid #141414;
  padding-bottom: 10px;
  margin: 52px 0 18px 0;
}
html.modern h2::before { content: none; }
html.modern h2 .harrow { display: none; }
html.modern p { line-height: 1.65; }
html.modern hr { border: none; border-top: 1px solid #d8d2c4; margin: 26px 0; }
html.modern blockquote {
  border-left: 3px solid #ff6a00;
  margin-left: 0;
  padding-left: 16px;
  font-style: normal;
}

/* links */
html.modern a { color: #141414; text-decoration-color: #ff6a00; text-decoration-thickness: 2px; }
html.modern a:hover { background: none; color: #ff6a00; }

/* directory table -> hairline index list */
html.modern table.dir { border: none; width: 100%; border-collapse: collapse; }
html.modern table.dir td {
  background: transparent;
  border: none;
  border-bottom: 1px solid #141414;
  padding: 14px 4px;
  transition: transform .2s cubic-bezier(.22,.9,.24,1);
}
html.modern table.dir td.dirlink {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  width: auto;
}
html.modern table.dir td.dirlink a { text-decoration: none; }
html.modern table.dir td:nth-child(2) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #6b655c;
  text-align: right;
}
html.modern table.dir tr:hover td { background: transparent; transform: translateX(6px); }

/* badges -> squared chips */
html.modern .badge {
  background: #f5f2ea;
  color: #141414;
  border: 1px solid #141414;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  transition: background-color .15s ease, color .15s ease;
}
html.modern .badge.alt { background: #ff6a00; color: #141414; border-color: #ff6a00; }
html.modern a.badge, html.modern a.badge:link, html.modern a.badge:visited, html.modern a.badge:hover, html.modern a.badge:active { color: #141414; }
/* v24m (user 10:00): modern's wider font needs a wider pin - the label
   progression must never reflow the badge row (EST. 2026 drift) */
html.modern #drop-btn { text-align: center; white-space: nowrap; flex: none; } /* v25e */
html.modern a.badge:hover, html.modern .badge:hover {
  transform: none;
  background: #141414;
  color: #f5f2ea;
}
/* v35r (user 3:33, corrected 4:12): modern Skip Credits must STAY cream when pressed - the tap was
   turning it black via hover/sticky-hover. Pin resting colors over hover and :active for this
   button only; other badges keep the chosen hover look. */
html.modern .badge.bo-skip:hover, html.modern .badge.bo-skip:active { background: #f5f2ea; color: #141414; }
html.modern .newblink {
  animation: none;
  color: #f5f2ea;
  background: #ff6a00;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  vertical-align: 2px;
}

/* games + footer controls */
html.modern #bo-hud .ctr {
  background: #f5f2ea;
  color: #141414;
  border: 1px solid #141414;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1.5px;
}
html.modern #bo-hud .ctr b { color: #ff6a00; }
html.modern #bo-hud .bo-hint { color: #6b655c; }
html.modern #breakout { background: #141414; } /* v19: match modern playfield; bezel drawn white by game */
html.modern .footer {
  background: transparent;
  border-top: 1px solid #141414;
  border-bottom: none;
  color: #6b655c;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  padding: 22px 12px 20px;
}
html.modern .footer a { text-decoration: none; }
html.modern #drop-btn {
  background: #f5f2ea;
  color: #141414;
  border: 1px solid #141414;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 6px 12px;
  cursor: pointer;
}
html.modern #drop-btn:hover { background: #141414; color: #f5f2ea; }
html.modern #egg-chamber { background: #141414; }
html.modern .updated { font-family: ui-monospace, Menlo, monospace; font-size: 10px; letter-spacing: 1.5px; color: #6b655c; }

/* resume page */
html.modern .res-head .name {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
html.modern .res-right { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }

/* scroll reveals: slide-up wipes, never fades */
@media (prefers-reduced-motion: no-preference) {
  html.modern .m-io {
    clip-path: inset(0 0 96% 0);
    transform: translateY(16px);
    opacity: 0.001;   /* IO ignores opacity; a zero clip-path would suppress it */
    transition: clip-path .55s cubic-bezier(.22,.9,.24,1), transform .55s cubic-bezier(.22,.9,.24,1), opacity 0s;
  }
  html.modern .m-io.m-in {
    clip-path: inset(-2% 0 -2% 0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* mode-toggle wipe: ink panel sweeps, page reskins mid-wipe */
.mwipe {
  position: fixed;
  inset: 0;
  background: #141414;
  z-index: 200;
  transform: translateX(-102%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .mwipe.run {
    transition: transform .38s cubic-bezier(.7,0,.3,1);
    transform: translateX(0);
  }
  .mwipe.run.out {
    transition: transform .38s cubic-bezier(.7,0,.3,1);
    transform: translateX(102%);
  }
}
/* old flash overlay retired */
.modflash { display: none; }

/* toggle button placement in the hero (injected by modernize.js) */
#modernize-btn {
  position: absolute;
  right: 16px;
  top: 14px;
  z-index: 3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 6px 10px;
  cursor: pointer;
  background: #f5f2ea;
  color: #141414;
  border: 1px solid #141414;
}
html.modern #modernize-btn {
  background: #141414;
  color: #f5f2ea;
  border-color: #f5f2ea;
}
html.modern #modernize-btn:hover { background: #ff6a00; color: #141414; border-color: #ff6a00; }


/* retro phones: clear the MODERNIZE toggle from the giant name */
@media (max-width: 700px) {
  html:not(.modern) .banner { padding-top: 46px; }
}

/* phones: modern nav must stay one line */
@media (max-width: 700px) {
  html.modern .nav {
    font-size: 9px;
    letter-spacing: 0.2px;
    padding: 10px 6px;
    white-space: nowrap;
    overflow-x: auto;
  }
}

/* ---- v4: depth, lift, glass (user explicitly asked for raised/glassy here) ---- */
html.modern .marquee { display: none; }   /* ticker reads retro; removed in modern with user's go-ahead */

/* toggle as a clearly clickable hyperlink, not a chip */
#modernize-btn {
  background: none;
  border: none;
  padding: 3px 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 1px; /* v25b: user 10:11 - toggle still too big */
  color: #ffd9a8;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
#modernize-btn:hover { color: #fff3e2; background: none; }
html.modern #modernize-btn {
  color: #141414;
  background: #ff6a00;
  border: 1px solid #ff6a00;
  padding: 6px 10px;
  font-size: 10px; /* v25b */
  text-decoration: none;
  letter-spacing: 1px;
  box-shadow: 3px 3px 0 #f5f2ea;
}
html.modern #modernize-btn:hover { color: #141414; background: #f5f2ea; border-color: #f5f2ea; box-shadow: 3px 3px 0 #ff6a00; }

/* hero: layered lift + glass sub chip */
html.modern .site-name {
  text-shadow: 0 18px 34px rgba(0, 0, 0, .45);
}
html.modern .site-sub {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(245, 242, 234, .07);
  border: 1px solid rgba(245, 242, 234, .22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  color: #d9d3c8;
}
@media (prefers-reduced-motion: no-preference) {
  html.modern .mcube-in { animation: mcspin 16s linear infinite; }
}
/* bob only where the cube is absolutely positioned (desktop); on mobile it
   would stomp the layout margin that separates cube from the glass chip */
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
  html.modern .mcube { animation: mcbob 5.5s ease-in-out infinite; }
}
@keyframes mcbob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}
html.modern .mcube i { box-shadow: 0 24px 44px rgba(0, 0, 0, .4); }

/* interactive lift on directory rows */
@media (hover: hover) {
  html.modern table.dir tr:hover td {
    transform: translateX(6px) translateY(-2px);
  }
  html.modern table.dir tr:hover td.dirlink a { color: #ff6a00; }
}
html.modern table.dir td {
  transition: transform .22s cubic-bezier(.22,.9,.24,1), box-shadow .22s ease, background-color .22s ease;
}
@media (hover: hover) {
  html.modern table.dir tr:hover td {
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(20, 20, 20, .10);
  }
}

/* raised content cards where it counts: breakout + badges get a soft lift */
html.modern .content {
  background: transparent;
}
@media (hover: hover) {
  html.modern a.badge:hover, html.modern .badge:hover {
    box-shadow: 0 8px 18px rgba(20, 20, 20, .16);
  }
}

/* marker v4 */

/* marker v4fix */

/* marker cubefix */

/* marker cube3d-toggle */

/* marker cube-shading-contrast */

/* ---- hero v2: dominant kinetic-type hero -------------------------------
   References (approach, not assets): per-character masked rise with
   overshoot ease (Mat Voyce, Awwwards SOTD Jan 2025 case study,
   hontran.dev/blog/mat-voyce-case-study-award-winning-portfolio);
   oversized confident type + motion that invites (perfectafternoon.com
   /2025/hero-section-design). All code original; transform/opacity only. */
html.modern .banner {
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;   /* v23: pads carve from the viewport, not add to it */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html.modern .site-name {
  font-size: clamp(56px, 16vw, 190px);
  max-width: none;
  width: max-content;
  line-height: 0.9;
}
html.modern .site-name .mword { display: block; white-space: nowrap; }
html.modern .site-name .ml { display: inline-block; }
html.modern .site-name::after {
  opacity: 0;
  transition: opacity 0.6s ease 0.9s;
}
html.modern .site-name.m-letters-in::after { opacity: 1; }
/* v37 (user 3:37): the orange outline no longer just appears - once the letters
   have landed it slides out from behind them into its offset, like it was
   stuck behind the type and deploys. Opacity ramps while it is still exactly
   behind the glyphs (invisible there), so the reveal reads as pure motion.
   Reduced motion keeps the plain fade above. */
@media (prefers-reduced-motion: no-preference) {
  html.modern .site-name::after {
    transform: translate(0, 0);
    transition: opacity 0.4s ease 0.95s, transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) 1.35s;
  }
  html.modern .site-name.m-letters-in::after { transform: translate(0.055em, 0.055em); }
}
@media (prefers-reduced-motion: no-preference) {
  html.modern .site-name .mword { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  html.modern .site-name .ml { transform: translateY(115%) rotate(7deg); }
  html.modern .site-name.m-letters-in .ml {
    animation: mrise 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: var(--d, 0s);
  }
  @keyframes mrise { to { transform: translateY(0) rotate(0deg); } }
}
/* v43 (user 5:28): bfcache restore replays the letter rise on an already
   landed name (Safari restarts CSS animations) - pin the final state */
html.modern .site-name.m-letters-done .ml { animation: none; transform: none; }
html.modern .site-name.m-letters-done::after { transition: none; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.modern .site-name.m-letters-done::after { transform: translate(0.055em, 0.055em); }
}
/* wireframe ghost cube, counter-rotating, behind the type = depth */
html.modern .mcube2 {
  position: absolute;
  left: clamp(-50px, 1vw, 40px);
  top: 6%;
  width: clamp(150px, 22vw, 260px);
  height: clamp(150px, 22vw, 260px);
  perspective: 900px;
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}
html.modern .mcube2-in {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
html.modern .mcube2 i {
  position: absolute; inset: 0;
  border: 2px solid #ff6a00;
  background: transparent;
}
html.modern .mcube2 i.f1 { transform: rotateY(0deg)   translateZ(clamp(75px, 11vw, 130px)); }
html.modern .mcube2 i.f2 { transform: rotateY(90deg)  translateZ(clamp(75px, 11vw, 130px)); }
html.modern .mcube2 i.f3 { transform: rotateY(180deg) translateZ(clamp(75px, 11vw, 130px)); }
html.modern .mcube2 i.f4 { transform: rotateY(-90deg) translateZ(clamp(75px, 11vw, 130px)); }
html.modern .mcube2 i.f5 { transform: rotateX(90deg)  translateZ(clamp(75px, 11vw, 130px)); }
html.modern .mcube2 i.f6 { transform: rotateX(-90deg) translateZ(clamp(75px, 11vw, 130px)); }
@media (prefers-reduced-motion: no-preference) {
  html.modern .mcube2-in { animation: mcspin2 26s linear infinite; }
  html.modern .mcube2 { animation: mdrift 9s ease-in-out infinite alternate; }
}
@keyframes mcspin2 {
  from { transform: rotateX(14deg) rotateY(360deg); }
  to   { transform: rotateX(14deg) rotateY(0deg); }
}
@keyframes mdrift { from { transform: translateY(-12px); } to { transform: translateY(12px); } }
/* scroll cue */
html.modern .mscroll {
  position: absolute;
  /* v22 (user 6:43): down into the very bottom-left corner of the hero.
     Keep the calc pinning: the banner can exceed 100svh, and a plain bottom:N
     pushes the cue below the fold (measured -112px at 1280x800). */
  left: 20px; bottom: 16px; bottom: calc(100% - 100vh + 16px); bottom: calc(100% - 100svh + 16px);
  display: flex; align-items: center; gap: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: #9a948a;
  z-index: 2;
  pointer-events: none;
}
html.modern .mscroll i {
  width: 1px; height: 34px; background: #ff6a00; display: block;
}
@media (prefers-reduced-motion: no-preference) {
  html.modern .mscroll i { animation: mcue 1.8s ease-in-out infinite; }
}
@keyframes mcue {
  0%, 100% { transform: translateY(-5px); opacity: 0.35; }
  50%      { transform: translateY(5px);  opacity: 1; }
}
/* hero v2 mobile re-assertions (must follow the desktop block above) */
@media (max-width: 700px) {
  html.modern .banner { justify-content: center; row-gap: clamp(26px, 5.5vh, 48px); padding-top: 18px; padding-bottom: clamp(48px, 9vh, 84px); }
  html.modern .site-name { font-size: 24vw; letter-spacing: -0.045em; }
  html.modern .mcube2 {
    left: auto; right: -40px; top: auto; bottom: 90px;
    width: clamp(120px, 34vw, 150px); height: clamp(120px, 34vw, 150px);
    opacity: 0.35;
  }
  html.modern .mcube2 i.f1 { transform: rotateY(0deg)   translateZ(clamp(60px, 17vw, 75px)); }
  html.modern .mcube2 i.f2 { transform: rotateY(90deg)  translateZ(clamp(60px, 17vw, 75px)); }
  html.modern .mcube2 i.f3 { transform: rotateY(180deg) translateZ(clamp(60px, 17vw, 75px)); }
  html.modern .mcube2 i.f4 { transform: rotateY(-90deg) translateZ(clamp(60px, 17vw, 75px)); }
  html.modern .mcube2 i.f5 { transform: rotateX(90deg)  translateZ(clamp(60px, 17vw, 75px)); }
  html.modern .mcube2 i.f6 { transform: rotateX(-90deg) translateZ(clamp(60px, 17vw, 75px)); }
  html.modern .mscroll { left: 16px; transform: none; bottom: 12px; bottom: calc(100% - 100vh + 12px); bottom: calc(100% - 100svh + 12px); gap: 8px; font-size: 9px; }
  html.modern .mscroll i { height: 22px; }
}

/* v22 (user 6:43): external-link glyph on https links - modern only */
html.modern[data-page="contact"] .content a[href^="https://"]::after {
  content: " \2197\FE0E";
  font-size: .72em;
  margin-left: 2px;
}
/* v22 (user 6:43): the email address is the point of the page - let it read bigger */
html.modern[data-page="contact"] .content a[href^="mailto:"] {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 700;
}

/* marker hero-v2-dominant */

/* marker hero-v3-mobile-pass */

/* ---- v22 nav ribbon (user 6:43 + 7:00): the pentagon's flat successor -
   one bouncy strip of five slabs, same orange theme, hover lights ONE slab,
   current page sits orange, gentle buoyant float, soft floor shadow ---- */
html.modern .mribbon {
  /* v22 layout (user 6:43): name moved right, the ribbon takes the name's old
     ground - left side, vertically centered, where the prism used to sit */
  position: absolute;
  left: clamp(24px, 5vw, 84px);
  top: 50%;
  transform: translateY(-50%);
  width: min(560px, 44vw);
  display: flex;
  perspective: 800px;
  z-index: 2;
}
html.modern .mribbon a.mrf {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 1.8vh, 18px) 6px;
  background: linear-gradient(180deg, #262626 0%, #1b1b1b 55%, #141414 100%);
  border: 1px solid #ff6a00;
  border-left: none;
  color: #f5f2ea;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  position: relative;
  transform: rotateX(12deg);   /* each slab its own tilted plane: the pentagon, unrolled */
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
html.modern .mribbon a.mrf:first-child { border-left: 1px solid #ff6a00; border-radius: 10px 0 0 10px; }
html.modern .mribbon a.mrf:last-child { border-radius: 0 10px 10px 0; }
html.modern .mribbon a.mrf .mrf-in { display: flex; align-items: center; position: relative; }
/* v24 (user 7:54): the pentagon's you-are-here underline, inside the slab -
   dark bar on the orange current slab, center-out grow, overshoot contained
   so it never crosses the slab's borders */
html.modern .mribbon a.mrf.mrf-cur .mrf-in::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 100%; height: 2px; border-radius: 1px;
  transform: translateX(-50%) scaleX(1);
  background: #141414;
}
html.modern .mribbon.has-lit a.mrf.mrf-cur:not(.mrf-lit) .mrf-in::after { background: #ff6a00; }
html.modern .mribbon a.mrf .mhouse { flex: 0 0 auto; margin-right: 7px; image-rendering: pixelated; }
/* you-are-here: the orange slab */
html.modern .mribbon a.mrf.mrf-cur {
  background: linear-gradient(180deg, #ff831f 0%, #ff6a00 55%, #f25c00 100%);
  color: #141414;
  -webkit-text-stroke: 0.4px currentColor;
}
/* hover lights ONE slab; the current one stands down while another is lit */
html.modern .mribbon a.mrf.mrf-lit {
  background: linear-gradient(180deg, #ff831f 0%, #ff6a00 55%, #f25c00 100%);
  color: #141414;
  -webkit-text-stroke: 0.4px currentColor;
  transform: rotateX(12deg) translateY(-7px) scale(1.05);
  z-index: 1;
}
html.modern .mribbon.has-lit a.mrf.mrf-cur:not(.mrf-lit) {
  background: linear-gradient(180deg, #262626 0%, #1b1b1b 55%, #141414 100%);
  color: #f5f2ea;
  -webkit-text-stroke: 0;
}
/* soft floor shadow, like the prism had */
html.modern .mribbon::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: calc(100% + 20px);
  height: 12px;
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* buoyancy: each slab floats on its own phase */
  html.modern .mribbon a.mrf .mrf-in { animation: mrfloat 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
  /* entrance: slabs pop in sequence with an overshoot bounce */
  html.modern .mribbon a.mrf { animation: mrpop .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--d, 0s) * .6); }
}
@keyframes mrfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: no-preference) {
  html.modern .mribbon a.mrf.mrf-cur .mrf-in::after { animation: m24-ribbar .68s cubic-bezier(.22,.9,.24,1) 2.05s both; }   /* v33 (user 3:19): current-page bouncy line appears ~1.5s later */
}
@keyframes m24-ribbar {
  0%   { transform: translateX(-50%) scaleX(0); }
  42%  { transform: translateX(-50%) scaleX(1.12); }  /* contained overshoot: stays within the slab (user 7:54) */
  66%  { transform: translateX(-50%) scaleX(0.96); }
  100% { transform: translateX(-50%) scaleX(1); }
}
@keyframes mrpop { from { transform: rotateX(12deg) translateY(14px) scale(.86); opacity: 0; } to { transform: rotateX(12deg) translateY(0) scale(1); opacity: 1; } }
/* subpage banners: compact ribbon under the small wordmark */
html.modern .banner.msub .mribbon {
  position: static;
  transform: none;
  width: min(560px, 100%);
  margin-top: 18px;
  align-self: flex-start;
}
@media (min-width: 701px) {
  html.modern .banner.msub .mribbon { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  /* v23 (user 7:43): the ribbon stays HORIZONTAL on phones too */
  html.modern .mribbon {
    position: static; transform: none;
    width: min(420px, 94%);
    margin-top: clamp(16px, 3vh, 26px);
  }
  html.modern .mribbon a.mrf {
    padding: 10px 4px;
    font-size: 9px;
    letter-spacing: 1px;
    transform: rotateX(8deg);
  }
  html.modern .mribbon a.mrf .mhouse { margin-right: 4px; }
  html.modern .mribbon a.mrf.mrf-lit { transform: rotateX(8deg) translateY(-4px) scale(1.04); }
}
/* mleaving: the ribbon recedes with the rest (it is the zoomer in goTo) */

/* ---- interactive nav prism: five-faced pentagonal prism, one destination
   per face. Ambient JS-driven spin, drag to rotate, tap front face to go.
   Same debugged CSS-3D rules as the cube: NO clip-path/opacity/filter or any
   other grouping property on the perspective container or the preserve-3d
   element (iOS Safari flattens/freezes), and it is never in the .m-io
   scroll-reveal list. */
html.modern .mnav {
  position: absolute;
  right: clamp(16px, 8vw, 120px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(150px, 16vw, 190px);
  height: clamp(84px, 9vw, 104px);
  perspective: 1000px;
  z-index: 2;
  /* v26 (user 10:18): none, not pan-y - with pan-y an arcing rotate gesture that
     turns vertical-dominant gets reclaimed by the browser as a page scroll
     (pointercancel -> snap = the wobble, and the page runs away mid-rotate).
     Gestures starting on the small pentagon now belong to the prism; the v25
     gate still ignores vertical-dominant touches. Page scroll is unaffected
     everywhere else. Tradeoff: a vertical swipe starting ON the pentagon
     (~190x104px) does not scroll. */
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  outline-offset: 4px;
}
html.modern .mnav.grabbing { cursor: grabbing; }
html.modern .mnav-in {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
}
html.modern .mnav a.mf {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #262626 0%, #1b1b1b 55%, #141414 100%);
  /* v19: backfaces VISIBLE - user wants the inverse of the faces seen through the translucent lid.
     Side views are unaffected: every face front is an opaque gradient, the tube interior is only
     reachable through the glass cap. */
  display: flex; align-items: center; justify-content: center;
  /* no top/bottom borders: coplanar with the caps they z-fight (jagged orange
     artifacts); the cap polygon strokes draw those seams instead */
  border: 1px solid #ff6a00;
  border-top: none;
  border-bottom: none;
  color: #f5f2ea;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;             /* kill retro 1px offset shadow leaking from style.css - smears on tilted 3D planes */
}
/* v19 (user 17:21): hover lights a side face orange, nothing moves */
html.modern .mnav a.mf.mf-lit {
  background: linear-gradient(180deg, #ff831f 0%, #ff6a00 55%, #f25c00 100%);
  color: #141414;
  -webkit-text-stroke: 0.4px currentColor;
}
html.modern .mnav a.mf.front {
  background: linear-gradient(180deg, #ff831f 0%, #ff6a00 55%, #f25c00 100%);
  color: #141414;
  /* no font-weight:700 - synthetic-bold double-strike smears on the 3D plane;
     a thin stroke gives the same weight with crisp vector edges */
  -webkit-text-stroke: 0.4px currentColor;
}
/* v22 (user 6:43): while a side face is lit, the front face stands down -
   exactly ONE orange face at a time */
html.modern .mnav.has-lit a.mf.front {
  background: linear-gradient(180deg, #262626 0%, #1b1b1b 55%, #141414 100%);
  color: #f5f2ea;
  -webkit-text-stroke: 0;
}
html.modern .mnav.has-lit a.mf.front.mf-cur .mflab::after { background: #ff6a00; }
/* pentagonal-prism side faces: rotateY(i*72deg) translateZ(R), R = W*0.688 */
html.modern .mnav a.f0 { transform: rotateY(0deg)    translateZ(clamp(103px, 11vw, 131px)); }
html.modern .mnav a.f1 { transform: rotateY(72deg)   translateZ(clamp(103px, 11vw, 131px)); }
html.modern .mnav a.f2 { transform: rotateY(144deg)  translateZ(clamp(103px, 11vw, 131px)); }
html.modern .mnav a.f3 { transform: rotateY(216deg)  translateZ(clamp(103px, 11vw, 131px)); }
html.modern .mnav a.f4 { transform: rotateY(288deg)  translateZ(clamp(103px, 11vw, 131px)); }
/* soft floor shadow: 2D, outside the 3D context */
html.modern .mnav::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: calc(100% + 22px);
  height: 14px;
  background: rgba(0, 0, 0, .45);
  border-radius: 50%;
  filter: blur(6px);
  z-index: -1;
}
html.modern .mnav-hint {
  position: absolute;
  top: calc(100% + 44px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a948a;
  pointer-events: none;
}
/* zoom-to-section overlay */
html.modern .mzoom {
  position: fixed; inset: 0;
  background: #141414;
  z-index: 99;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
html.modern .mzoom span {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 9vw, 110px);
  letter-spacing: -0.02em;
  color: #f5f2ea;
  transform: scale(0.85);
  transition: transform 0.45s cubic-bezier(0.22, 0.9, 0.24, 1);
}
html.modern .mzoom.run { opacity: 1; pointer-events: auto; }
html.modern .mzoom.run span { transform: scale(1.05); }
/* prism mobile */
@media (max-width: 700px) {
  html.modern .mnav {
    position: static;
    transform: none;
    margin: 26px auto 0 auto;
    width: clamp(150px, 42vw, 185px);
    height: clamp(90px, 25vw, 110px);
  }
  html.modern .mnav a.f0 { transform: rotateY(0deg)    translateZ(clamp(103px, 28.9vw, 127px)); }
  html.modern .mnav a.f1 { transform: rotateY(72deg)   translateZ(clamp(103px, 28.9vw, 127px)); }
  html.modern .mnav a.f2 { transform: rotateY(144deg)  translateZ(clamp(103px, 28.9vw, 127px)); }
  html.modern .mnav a.f3 { transform: rotateY(216deg)  translateZ(clamp(103px, 28.9vw, 127px)); }
  html.modern .mnav a.f4 { transform: rotateY(288deg)  translateZ(clamp(103px, 28.9vw, 127px)); }
  html.modern .mnav-hint { top: calc(100% + 66px); }
}

/* prism caps: solid pentagonal lids (SVG background, leaf nodes only -
   clip-path never used inside the 3D context) */
html.modern .mnav i.mcap {
  position: absolute;
  left: 50%; top: 50%;
  pointer-events: none;   /* v28: lids are decorative - Chrome hit-tests their 3D box over the face area and would swallow face taps in both engines */
  /* width = 2 * face translateZ, height = 2.236 * face translateZ, set per regime below */
}
html.modern .mnav i.mcap svg { display: block; width: 100%; height: 100%; }
html.modern .mnav i.mcap.top { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(129px, 13.8vw, 159px)); }
html.modern .mnav i.mcap.bot { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(-159px, -13.8vw, -129px)); }
/* ribbon: replaced by the prism; stays available to keyboard/AT like a skip link */
html.modern .nav {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
html.modern .nav:focus-within {
  position: static;
  left: auto;
  width: auto; height: auto;
  overflow: visible;
}
/* real face zoom: prism scales through the viewer, page elements recede */
html.modern.mleaving .site-name,
html.modern.mleaving .site-sub,
html.modern.mleaving .mcube2,
html.modern.mleaving .mscroll,
html.modern.mleaving .mnav-hint,
html.modern.mleaving .mribbon,
html.modern.mleaving .content,
html.modern.mleaving #modernize-btn {
  opacity: 0;
  transition: opacity 0.4s ease;
}
html.modern .mflash {
  position: fixed; inset: 0;
  background: #141414;   /* v23 (user 7:44): a dark settle, not an orange wash */
  z-index: 98;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
@media (max-width: 700px) {
  html.modern .mnav i.mcap { width: clamp(618px, 173.4vw, 762px); height: clamp(765px, 214.2vw, 942px); }
  html.modern .mnav i.mcap.top { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(138px, 38.1vw, 168px)); }
  html.modern .mnav i.mcap.bot { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(-168px, -38.1vw, -138px)); }
}

/* ---- section design pass: bold indexed titles + staged item reveals ---- */
html.modern .content { counter-reset: msec; }
html.modern h2 {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4.5vw, 40px);
  letter-spacing: -0.02em;
  text-transform: none;
  border-bottom: none;
  padding-bottom: 0;
  margin: clamp(56px, 9vh, 84px) 0 22px 0;
  position: relative;
}
html.modern h2::before {
  content: counter(msec, decimal-leading-zero) " /";
  counter-increment: msec;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ff6a00;
  margin-right: 12px;
  vertical-align: 0.32em;
}
html.modern h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: #ff6a00;
  margin-top: 12px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.24, 1) 0.2s;
}
html.modern h2.m-in::after,
html.modern .m-in > h2::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  html.modern h2::after { transform: scaleX(1); transition: none; }
}

/* one-page scroll sections */
html.modern .mdir { display: none; }
html.modern .msec { display: block; }
html.modern .msec-loading { color: #9a948a; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
html.modern .msec-flash h2::after { transition: none; transform: scaleX(1); background: #141414; }
html.modern .msec-flash h2::before { color: #141414; }

/* embedded section subheads: demote, no index, no rule */
html.modern .msec-body h2 {
  counter-increment: none;
  font-size: clamp(19px, 2.8vw, 26px);
  margin: 34px 0 14px 0;
}
html.modern .msec-body h2::before { content: none; }
html.modern .msec-body h2::after { content: none; }

/* main scroll sections: display-scale titles, hero-level weight */
html.modern .msec > h2 {
  font-size: clamp(44px, 11vw, 96px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: clamp(72px, 14vh, 130px) 0 30px 0;
}
html.modern .msec > h2::before {
  display: block;
  margin: 0 0 8px 0;
  vertical-align: 0;
  /* v24j (user 8:53): proportional index - the fixed clamp rendered tiny
     next to display-scale headings on phone */
  font-size: 0.34em;
  letter-spacing: 0.14em;
}
html.modern .msec > h2::after {
  width: 72px;
  height: 6px;
  margin-top: 16px;
}
/* face zoom into in-page section: panel grows out of the front face */
html.modern .msec-zoom {
  position: fixed;
  background: #ff6a00;
  z-index: 97;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19), opacity 0.32s ease 0.48s;
}
html.modern .msec-zoom.run { transform: scale(var(--zs, 14)); opacity: 0; }

/* marker v8-braindump */

/* ---- prism: bigger on desktop, correct regular-pentagon caps ---- */
@media (min-width: 701px) {
  html.modern .mnav { width: clamp(220px, 20vw, 300px); height: clamp(120px, 11vw, 164px); }
  html.modern .mnav i.mcap { width: clamp(906px, 82.8vw, 1236px); height: clamp(1119px, 102.3vw, 1527px); }
  html.modern .mnav a.f0 { transform: rotateY(0deg)    translateZ(clamp(151px, 13.8vw, 206px)); }
  html.modern .mnav a.f1 { transform: rotateY(72deg)   translateZ(clamp(151px, 13.8vw, 206px)); }
  html.modern .mnav a.f2 { transform: rotateY(144deg)  translateZ(clamp(151px, 13.8vw, 206px)); }
  html.modern .mnav a.f3 { transform: rotateY(216deg)  translateZ(clamp(151px, 13.8vw, 206px)); }
  html.modern .mnav a.f4 { transform: rotateY(288deg)  translateZ(clamp(151px, 13.8vw, 206px)); }
  html.modern .mnav i.mcap.top { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(183px, 16.8vw, 249px)); }
  html.modern .mnav i.mcap.bot { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(-249px, -16.8vw, -183px)); }
}
@media (max-width: 700px) {
  html.modern .mnav i.mcap.top { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(138px, 38.1vw, 168px)); }
  html.modern .mnav i.mcap.bot { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(-168px, -38.1vw, -138px)); }
}
/* caps: inline regular-pentagon SVG injected by modernize.js; sized per regime above */

/* ---- retro NEW badge stays retro-only ---- */
html.modern .newblink { display: none; }

/* ---- home: revamped intro + small What's New aside ---- */
html.modern .mhome > h1 {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 7vw, 84px);
  letter-spacing: -0.02em;
  line-height: 1;
  border-bottom: none;
  margin: clamp(40px, 7vh, 72px) 0 18px 0;
}
html.modern .mhome > p {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.65;
  max-width: 56ch;
  color: #26241f;
}
@media (min-width: 701px) {
  html.modern .mhome { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 8px clamp(64px, 7vw, 96px); align-items: start; }
  html.modern .mhome > h1 { grid-column: 1 / -1; grid-row: 1; }
  html.modern .mhome > p:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  html.modern .mhome > p:nth-of-type(2) { grid-column: 1; grid-row: 3; }
  html.modern .mhome > .mwn-h { grid-column: 2; grid-row: 2; }
  html.modern .mhome > .mwn { grid-column: 2; grid-row: 3; }
}
html.modern .mhome h2.mwn-h {
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 6px 0 10px 0;
  padding-bottom: 0;
}
html.modern .mhome h2.mwn-h::before { content: none; }
html.modern .mhome h2.mwn-h::after { display: none; }
html.modern .mhome ul.mwn {
  font-size: 13px;
  line-height: 1.6;
  list-style: none;
  background: #fffdf8;              /* paper card, sharp corners: the site's editorial language */
  border: 1px solid #141414;
  border-left: 4px solid #ff6a00;   /* orange spine */
  border-radius: 0;
  padding: 10px 14px;
  box-shadow: 5px 5px 0 rgba(20, 20, 20, .10);
}
html.modern .mhome ul.mwn li { padding: 7px 0 7px 0; border-bottom: 1px dashed rgba(20, 20, 20, .18); }
html.modern .mhome ul.mwn li:last-child { border-bottom: none; }
html.modern .mhome ul.mwn li b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c25300;
}

/* ---- subpage banners: compact, their own thing, never the home hero ---- */
html.modern .banner.msub {
  min-height: 0;
  display: block;
  padding: 30px 24px 90px;
}
/* v24i (user 8:38, phonemsg-01M6FV7NTXH7YK3YFTHAZ1289Y): subpage wordmark is a
   SMALLER version of the hero's Nirvan Alwar - same heavy grotesque + orange
   offset outline, words side by side on one line, never the mono tag and
   never the stacked hero layout */
html.modern .banner.msub .site-name {
  margin-right: clamp(130px, 11vw, 158px);   /* v23: clear the fixed RETROIZE toggle; v24: widened for the window button */
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1;
  width: auto;
  max-width: none;
  white-space: nowrap;
  text-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
html.modern .banner.msub .site-name::after {
  opacity: 1;
  transition: none;
  /* v25d (user 10:13): match the hero's ~2%-of-em orange outline - 1.5px on the
     small wordmark read nearly twice as thick as the hero's 2px on its giant type */
  -webkit-text-stroke: 0.02em #ff6a00;
}
html.modern .banner.msub .site-name .mword { display: inline; }   /* if kinetic markup ever lands here: side by side */
html.modern .banner.msub .site-sub { font-size: 11px; opacity: .75; }
html.modern .msubtitle {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 9vw, 110px);
  letter-spacing: -0.02em;
  line-height: .95;
  margin-top: 18px;
}
@media (min-width: 701px) {
  /* v19: prism parked deliberately on the LEFT of the subpage header, clear of RETROIZE */
  html.modern .banner.msub {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: clamp(24px, 4vw, 64px);
  }
  html.modern .banner.msub .site-name { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  html.modern .banner.msub .site-sub { grid-column: 2; grid-row: 2; }
  html.modern .banner.msub .mnav {
    grid-column: 1; grid-row: 1 / span 2;
    position: static;
    transform: none;
    width: clamp(150px, 14vw, 190px);
    height: clamp(84px, 8vw, 104px);
    /* reserve the caps' horizontal overhang (~0.7x box each side) so text never overlaps */
    margin: 0 clamp(60px, 6vw, 100px) 0 clamp(36px, 4vw, 72px);
  }
  html.modern .banner.msub .mnav i.mcap { width: clamp(618px, 57.6vw, 786px); height: clamp(765px, 71.1vw, 972px); }
  html.modern .banner.msub .mnav a.f0 { transform: rotateY(0deg)    translateZ(clamp(103px, 9.6vw, 131px)); }
  html.modern .banner.msub .mnav a.f1 { transform: rotateY(72deg)   translateZ(clamp(103px, 9.6vw, 131px)); }
  html.modern .banner.msub .mnav a.f2 { transform: rotateY(144deg)  translateZ(clamp(103px, 9.6vw, 131px)); }
  html.modern .banner.msub .mnav a.f3 { transform: rotateY(216deg)  translateZ(clamp(103px, 9.6vw, 131px)); }
  html.modern .banner.msub .mnav a.f4 { transform: rotateY(288deg)  translateZ(clamp(103px, 9.6vw, 131px)); }
  html.modern .banner.msub .mnav i.mcap.top { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(129px, 12.3vw, 159px)); }
  html.modern .banner.msub .mnav i.mcap.bot { transform: translate(-50%, -50%) rotateX(90deg) scale3d(0.33334, 0.33334, 0.33334) translateZ(clamp(-159px, -12.3vw, -129px)); }
}

/* ---- v19 toggle: a visitor from the OTHER site, dressed for where it takes you ---- */
/* on the retro page: a sleek dark glass pill that clearly does not belong to 1999 */
#modernize-btn {
  background: #141414;
  color: #f5f2ea;
  border: 1px solid rgba(255, 106, 0, .65);
  border-radius: 999px;
  padding: 11px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(20, 20, 20, .35), 0 0 18px rgba(255, 106, 0, .35);
  transition: box-shadow .2s ease, background .2s ease;
}
#modernize-btn:hover { background: #000; color: #ffffff; box-shadow: 0 12px 32px rgba(20, 20, 20, .4), 0 0 26px rgba(255, 106, 0, .55); }
/* on the modern page: a gray 90s dialog button that clearly does not belong to 2026 */
html.modern #modernize-btn {
  /* v24 (user 7:55): literally a window to the past - the whole button IS a
     tiny 90s OS window: raised frame, blue title bar, and the orange retro
     page miniaturized inside. No Unicode symbols (user 7:54): the close box
     is drawn with CSS bars. */
  background: #c0c0c0;
  color: #000000;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  border-radius: 0;
  padding: 3px;
  font-family: Tahoma, "MS Sans Serif", Geneva, Verdana, sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: normal;
  text-decoration: none;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080, 3px 3px 0 rgba(0, 0, 0, .4);
  transition: none;
  width: 134px;
}
html.modern #modernize-btn .mwin { display: block; }
html.modern #modernize-btn .mwin-t {
  display: flex; align-items: center; justify-content: space-between;
  background: #000084;   /* v24d (user 8:13): solid dark blue, no gradient */
  color: #ffffff;
  font-weight: bold; font-size: 11px; letter-spacing: 1px;
  padding: 2px 3px 2px 6px;   /* v24d (user 8:13): vertically slimmer, same text size */
  text-align: left;
}
html.modern #modernize-btn .mwin-x {
  position: relative; flex: 0 0 auto; width: 14px; height: 12px; margin-left: 8px;
  background: #c0c0c0;
  border-top: 1px solid #ffffff; border-left: 1px solid #ffffff;
  border-right: 1px solid #404040; border-bottom: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
}
html.modern #modernize-btn .mwin-x::before,
html.modern #modernize-btn .mwin-x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 1px; background: #000000;
}
html.modern #modernize-btn .mwin-x::before { transform: translate(-50%, -50%) rotate(45deg); }
html.modern #modernize-btn .mwin-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
html.modern #modernize-btn .mwin-b {
  display: block; margin-top: 3px; background: #ffffff;
  border-top: 1px solid #808080; border-left: 1px solid #808080;
  border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  padding: 2px;
}
html.modern #modernize-btn .mwin-pg { display: block; background: #ff9100; padding: 2px 4px; }
html.modern #modernize-btn .mwin-pg i { display: block; height: 2px; background: #141414; margin: 2px 2px; }
html.modern #modernize-btn .mwin-pg i:first-child { width: 62%; margin-top: 1px; }
html.modern #modernize-btn .mwin-pg i:nth-child(2) { width: 88%; }
html.modern #modernize-btn .mwin-pg i:last-child { width: 44%; margin-bottom: 1px; }
html.modern #modernize-btn:hover .mwin-t { background: #1616a8; }
html.modern #modernize-btn:hover .mwin-pg { background: #ffa53d; }
html.modern #modernize-btn:active {
  border-top-color: #404040; border-left-color: #404040;
  border-right-color: #ffffff; border-bottom-color: #ffffff;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .35);
}
@media (max-width: 700px) {
  html.modern #modernize-btn { width: 118px; }
  html.modern #modernize-btn .mwin-t { font-size: 10px; }
  /* v24b (main 8:08): the window button overlapped the subtitle strip on phones */
  html.modern .banner.msub .site-sub { margin-right: 136px; }
}
/* v8-deploy-1457 */

/* v9 clearance pass: hero prism clipped the right viewport edge at 1280
   (visual extent is ~2.35x the element box because caps are 161.8% wide
   and perspective widens them) and the hint sat inside the bottom cap's
   footprint */
@media (min-width: 701px) {
  html.modern .banner:not(.msub) .mnav { right: clamp(90px, 16vw, 280px); }
  html.modern .banner:not(.msub) .mnav-hint { top: auto; bottom: calc(100% + 88px); }
}
/* What's New as one compact sidebar unit (wrapped in aside.mwn-side by dressHome) */
@media (min-width: 701px) {
  html.modern .mhome > .mwn-side { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
  html.modern .mhome > .mwn-side .mwn-h { margin: 0 0 10px 0; }
}
@media (max-width: 700px) {
  html.modern .mhome > .mwn-side { margin-top: 34px; }
  html.modern .mhome > .mwn-side .mwn-h { margin-bottom: 8px; }
}
/* phones: the mode toggle was oversized up top (both modes) */
/* v25e (user 10:10 "still a bit too big especially on phone"): size the ACTUAL
   v19 skins - the retro glass pill and the modern 90s window (title bar, close
   box, mini page) - not the dead pre-v19 link/chip rules. Desktop trim first,
   phone rules AFTER so they win on small screens. */
#modernize-btn { padding: 9px 16px; font-size: 11px; }
html.modern #modernize-btn { width: 122px; }
@media (max-width: 700px) {
  html:not(.modern) #modernize-btn { padding: 5px 10px; font-size: 10px; letter-spacing: 1.5px; }
  html.modern #modernize-btn { width: 96px; padding: 2px; font-size: 9px; }
  html.modern #modernize-btn .mwin-t { font-size: 9px; padding: 1px 2px 1px 5px; letter-spacing: 0.5px; }
  html.modern #modernize-btn .mwin-x { width: 12px; height: 10px; margin-left: 6px; }
  html.modern #modernize-btn .mwin-b { margin-top: 2px; padding: 1px; }
  html.modern #modernize-btn .mwin-pg { padding: 1px 3px; }
  html.modern #modernize-btn .mwin-pg i { margin: 1px 2px; }
  html.modern .banner.msub .site-sub { margin-right: 110px; }
}

/* marker v9-clearance */
/* v9-final-1510 */

/* v11-design-critique */

/* v11-cap-regimes */

/* v11-mobile-prism-size2 */

/* v11-face-enlarge */

/* v11-geometry-fixes */

/* v11-seam-fix */

/* v11-cap-centered */

/* v11-cap-supersample */

/* v11-cap-supersample-z */

/* v11-cap-supersample-centering */

/* v11-cap-height-apothem */

/* v11-cap-scale3d */

/* v11-cap-height-halfh */

/* v13-desktop-prism-clearance */

/* v13 intentional depth: prism crosses the baseline strip IN FRONT of it,
   casting a soft shadow onto the strip so the layering reads deliberate.
   Strip text is left-aligned, clear of the prism zone. */
html.modern .banner:not(.msub) .site-sub { position: relative; }
@media (min-width: 701px) {
  html.modern .banner:not(.msub) .site-sub::after {
    content: "";
    position: absolute;
    top: -7px;
    right: clamp(40px, 9vw, 170px);
    width: clamp(260px, 30vw, 430px);
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 106, 0, .17);
    filter: blur(10px);
    z-index: 1;              /* below .mnav (z-index 2): bar < shadow < prism */
    pointer-events: none;
  }
}
/* restrained depth for the below-hero Welcome area and What's New card */
html.modern .mhome > h1 { text-shadow: 0 14px 30px rgba(38, 32, 20, .16); }
html.modern .mhome > p { text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
@media (hover: hover) {
  html.modern .mhome ul.mwn { transition: transform .25s ease, box-shadow .25s ease; }
  html.modern .mhome ul.mwn:hover {
    transform: translate(-1px, -2px);
    box-shadow: 7px 8px 0 rgba(20, 20, 20, .13);
  }
}
/* v13-depth-pass */

/* narrow desktop: keep the prism clear of the display title and let the
   strip text wrap short of the prism zone */
@media (min-width: 701px) and (max-width: 1000px) {
  html.modern .banner:not(.msub) .mnav { width: clamp(110px, 16vw, 122px); right: clamp(70px, 12vw, 110px); }
  html.modern .banner:not(.msub) .site-sub { padding-right: clamp(270px, 36vw, 360px); }
}
@media (min-width: 1001px) {
  html.modern .banner:not(.msub) .site-sub { padding-right: clamp(300px, 34vw, 470px); }
}
/* v13-narrow-clearance */

/* v13-mwn-editorial-redesign */

/* subpage banners: the hint lands on the big title at narrow widths - hide it there */
@media (max-width: 900px) {
  html.modern .banner.msub .mnav-hint { display: none; }
}
/* v13-cap-opacity-hint-fix */

/* v13-cap-backface */

/* ================= v16 revamp batch ================= */
/* v19: content h1 restored on subpages - the header no longer carries a duplicate title */
/* privacy page: readable professional measure in both themes */
html.modern[data-page="privacy"] .content { max-width: 720px; }
html.modern[data-page="privacy"] .backline a, .backline a { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
html.modern[data-page="privacy"] .content h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: #c25300; border-bottom: 1px solid rgba(20, 20, 20, .3);
  padding-bottom: 8px; margin: 40px 0 14px;
}
html.modern[data-page="privacy"] .content h2 .harrow { color: #ff6a00; }
html.modern[data-page="privacy"] .content p, html.modern[data-page="privacy"] .content li { font-size: 15px; line-height: 1.65; }

/* home face: permanent identity (house glyph + orange base seam), never the orange focus fill */
html.modern .mnav a.mf .mhouse { flex: 0 0 auto; margin-right: 7px; image-rendering: pixelated; }
/* v19: base strip removed (user 17:17) - house icon + cur underline carry Home identity now */
/* you-are-here underline: grows center-out, overshoots past the label,
   elastic-rebounds to fit it (Persona-5-style snap; motion reference only) */
html.modern .mnav a.mf .mflab { position: relative; display: inline-flex; align-items: center; font-style: normal; }   /* v24: underline anchors to symbol+text together (user 7:56) */
html.modern .mnav a.mf-cur .mflab::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 100%; height: 2px; border-radius: 1px;
  transform: translateX(-50%) scaleX(1);
  background: #ff6a00;
}
html.modern .mnav a.mf-cur.front .mflab::after { background: #141414; }
@media (prefers-reduced-motion: no-preference) {
  html.modern .mnav a.mf-cur .mflab::after { animation: m16-curbar .68s cubic-bezier(.22,.9,.24,1) .55s both; }
}
@keyframes m16-curbar {
  0%   { transform: translateX(-50%) scaleX(0); }
  42%  { transform: translateX(-50%) scaleX(1.38); }  /* overshoot beyond the text */
  66%  { transform: translateX(-50%) scaleX(0.9); }   /* elastic rebound past fit */
  84%  { transform: translateX(-50%) scaleX(1.07); }
  100% { transform: translateX(-50%) scaleX(1); }
}

/* compact banners: pentagon sized and centered to sit inside the banner, no text interception */
@media (min-width: 701px) {
  html.modern .banner.msub { padding: 26px 24px 40px; }
  html.modern .banner.msub .mnav {
    width: clamp(132px, 11vw, 160px);
    height: clamp(76px, 6.8vw, 92px);
    right: clamp(48px, 8vw, 128px);
    top: 50%;
  }
  html.modern .banner.msub .mnav a.f0 { transform: rotateY(0deg)    translateZ(clamp(91px, 7.6vw, 110px)); }
  html.modern .banner.msub .mnav a.f1 { transform: rotateY(72deg)   translateZ(clamp(91px, 7.6vw, 110px)); }
  html.modern .banner.msub .mnav a.f2 { transform: rotateY(144deg)  translateZ(clamp(91px, 7.6vw, 110px)); }
  html.modern .banner.msub .mnav a.f3 { transform: rotateY(216deg)  translateZ(clamp(91px, 7.6vw, 110px)); }
  html.modern .banner.msub .mnav a.f4 { transform: rotateY(288deg)  translateZ(clamp(91px, 7.6vw, 110px)); }
}

/* entrance rise, shared */
@media (prefers-reduced-motion: no-preference) {
  html.modern[data-page="contact"] .content > *,
  html.modern[data-page="links"] .content > * { animation: m16-rise .55s cubic-bezier(.22,.9,.24,1) both; }
  html.modern[data-page="links"] .content ul.plain li:nth-child(1) { animation-delay: .10s; }
  html.modern[data-page="links"] .content ul.plain li:nth-child(2) { animation-delay: .17s; }
  html.modern[data-page="links"] .content ul.plain li:nth-child(3) { animation-delay: .24s; }
  html.modern[data-page="links"] .content ul.plain li:nth-child(4) { animation-delay: .31s; }
  html.modern[data-page="links"] .content ul.plain li { animation: m16-rise .5s cubic-bezier(.22,.9,.24,1) both; }
  html.modern[data-page="contact"] .content > p:nth-of-type(2) { animation-delay: .18s; }
  html.modern[data-page="contact"] .content ul.plain { animation-delay: .08s; }
}
@keyframes m16-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- contact: one big honest action, given presence ---- */
html.modern[data-page="contact"] .content > p:first-of-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; color: #c25300;
}
html.modern[data-page="contact"] ul.plain { list-style: none; padding: 0; margin: 6px 0 30px; }
html.modern[data-page="contact"] ul.plain li a {
  display: block; position: relative; z-index: 0; overflow: hidden;
  border: 2px solid #141414; padding: clamp(24px, 4.5vw, 38px) 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700;
  font-size: clamp(17px, 3.4vw, 36px);
  color: #141414; text-decoration: none; text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 6px 6px 0 #ff6a00;
  transition: box-shadow .18s ease, transform .18s ease;
}
html.modern[data-page="contact"] ul.plain li a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #ff6a00;
  transform: translateX(-101%); transition: transform .3s cubic-bezier(.22,.9,.24,1);
}
html.modern[data-page="contact"] ul.plain li a:hover::before,
html.modern[data-page="contact"] ul.plain li a:focus-visible::before { transform: translateX(0); }
html.modern[data-page="contact"] ul.plain li a:hover,
html.modern[data-page="contact"] ul.plain li a:focus-visible { transform: translate(-2px,-2px); box-shadow: 10px 10px 0 #141414; }
html.modern[data-page="contact"] .content > p:nth-of-type(2) {
  border-left: 3px solid #ff6a00; padding: 10px 0 10px 16px;
  font-size: 14px; line-height: 1.6; color: #3a382f; max-width: 60ch;
}
html.modern[data-page="contact"] .content > p:nth-of-type(2) a { color: #c25300; }

/* ---- links: full-width rows with sweep + arrow motion ---- */
html.modern[data-page="links"] .content { max-width: 880px; }
html.modern[data-page="links"] .content > p:first-of-type {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; color: #c25300;
}
html.modern[data-page="links"] ul.plain { list-style: none; padding: 0; margin: 14px 0 0; border-top: 2px solid #141414; }
html.modern[data-page="links"] ul.plain li {
  border-bottom: 1px solid rgba(20, 20, 20, .25);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #6b665c;
}
html.modern[data-page="links"] ul.plain li a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  position: relative; z-index: 0; overflow: hidden;
  padding: 18px 14px 6px;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 700;
  font-size: clamp(19px, 2.4vw, 27px); letter-spacing: -0.01em;
  color: #141414; text-decoration: none;
  transition: transform .18s ease;
}
html.modern[data-page="links"] ul.plain li a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: #ff6a00;
  transform: translateX(-101%); transition: transform .28s cubic-bezier(.22,.9,.24,1);
}
html.modern[data-page="links"] ul.plain li a::after {
  content: "\2197";  /* north-east arrow */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8em; flex: 0 0 auto;
  transition: transform .22s cubic-bezier(.22,.9,.24,1);
}
html.modern[data-page="links"] ul.plain li a:hover::before,
html.modern[data-page="links"] ul.plain li a:focus-visible::before { transform: translateX(0); }
html.modern[data-page="links"] ul.plain li a:hover,
html.modern[data-page="links"] ul.plain li a:focus-visible { transform: translateX(6px); }
html.modern[data-page="links"] ul.plain li a:hover::after,
html.modern[data-page="links"] ul.plain li a:focus-visible::after { transform: translate(5px,-5px); }
html.modern[data-page="links"] ul.plain li > a + * , html.modern[data-page="links"] ul.plain li { line-height: 1.5; }
html.modern[data-page="links"] ul.plain li { padding-bottom: 14px; }
html.modern[data-page="links"] ul.plain li a { padding-bottom: 0; margin-bottom: 2px; }

/* ---- resume: editorial structure, orange kickers, mono date chips ---- */
html.modern[data-page="resume"] .content { max-width: 860px; }
html.modern[data-page="resume"] .res-head .name {
  font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
html.modern[data-page="resume"] .res-head .line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .5px; margin-top: 10px;
  border-bottom: 2px solid #141414; padding-bottom: 20px;
}
html.modern[data-page="resume"] .content h2 {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: #c25300; border-bottom: 1px solid rgba(20, 20, 20, .3);
  padding-bottom: 8px; margin: 46px 0 16px;
}
html.modern[data-page="resume"] .content h2 .harrow { color: #ff6a00; }
/* v24j (user 8:53): these pages' h2 is a 12-13px mono kicker, so the generic
   0.42em section index rendered at ~5px - the "way too small" numbers in his
   screenshot. Match the kicker scale. */
html.modern[data-page="privacy"] .content h2::before,
html.modern[data-page="resume"] .content h2::before { font-size: 0.95em; letter-spacing: 1px; margin-right: 10px; vertical-align: 0; }
html.modern[data-page="resume"] .res-item-head { font-weight: 700; font-size: 16.5px; }
html.modern[data-page="resume"] .res-right {
  font-size: 11px; color: #c25300; border: 1px solid rgba(194, 83, 0, .45);
  padding: 2px 8px; white-space: nowrap;
}
html.modern[data-page="resume"] ul.plain { list-style: none; padding: 0; }
html.modern[data-page="resume"] ul.plain li {
  position: relative; padding-left: 20px; margin: 8px 0; line-height: 1.55; font-size: 15px;
}
html.modern[data-page="resume"] ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #ff6a00;
}
/* v22: coursework .small read far below body text on modern (user 6:49 screenshot);
   match the modern body size on this page only - retro keeps its small print */
html.modern[data-page="resume"] .content .small { font-size: 15px; }
/* v22: title/date/link read as one block (user 6:49): the markup carries a plain
   <br> plus a clearing <br class="cb"> before the sub line - in modern that is two
   empty lines under the date. Drop both; the sub is a block and needs neither. */
html.modern[data-page="resume"] br.cb { display: none; }
html.modern[data-page="resume"] br:has(+ br.cb) { display: none; }
html.modern[data-page="resume"] .res-item-sub.small { margin-top: 3px; }

/* mobile compact banners: title first, prism smaller and clear of it */
@media (max-width: 700px) {
  html.modern .banner.msub { padding: 22px 20px 30px; }
  html.modern .banner.msub .mnav {
    width: clamp(110px, 30vw, 132px);
    height: clamp(64px, 18vw, 78px);
    margin: 48px auto 50px;   /* top margin keeps the spinning caps clear of the title at max bounce */
  }
  html.modern .banner.msub .mnav a.f0 { transform: rotateY(0deg)    translateZ(clamp(76px, 20.6vw, 91px)); }
  html.modern .banner.msub .mnav a.f1 { transform: rotateY(72deg)   translateZ(clamp(76px, 20.6vw, 91px)); }
  html.modern .banner.msub .mnav a.f2 { transform: rotateY(144deg)  translateZ(clamp(76px, 20.6vw, 91px)); }
  html.modern .banner.msub .mnav a.f3 { transform: rotateY(216deg)  translateZ(clamp(76px, 20.6vw, 91px)); }
  html.modern .banner.msub .mnav a.f4 { transform: rotateY(288deg)  translateZ(clamp(76px, 20.6vw, 91px)); }
}

/* long professional kicker headings wrap cleanly on small screens */
@media (max-width: 700px) {
  html.modern[data-page="privacy"] .content h2,
  html.modern[data-page="resume"] .content h2 { font-size: 12px; letter-spacing: 2px; }
}

/* v17-face-material */

/* v19-home-strip-off-glass-interior */

/* v19 Linktree-style stack, modern edition: centered column of big dark cards */
html.modern .ltc { max-width: 520px; margin: 8px auto 0 auto; text-align: center; }
html.modern .ltc .lt-bio {
  margin: 0 0 18px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #9a948a;
}
html.modern .ltc a.lt-card {
  display: flex; align-items: center; gap: 16px; margin: 0 0 14px 0; padding: 14px 18px;
  background: #1b1b1b; color: #f5f2ea; text-decoration: none; text-align: left;
  border: 1px solid rgba(255, 106, 0, .4); border-radius: 14px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
html.modern .ltc a.lt-card:hover { background: #ff6a00; color: #141414; transform: translateY(-2px); }
html.modern .lt-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid rgba(255, 106, 0, .45); color: #ff6a00;
  display: flex; align-items: center; justify-content: center;
  transition: color .18s ease, border-color .18s ease;
}
html.modern .lt-ic svg { width: 21px; height: 21px; }
html.modern .lt-ic .ic-m { display: block; }
html.modern .lt-ic .ic-r { display: none; }
html.modern .ltc a.lt-card:hover .lt-ic { color: #141414; border-color: rgba(20, 20, 20, .7); }
html.modern .lt-tx { flex: 1 1 auto; text-align: center; }
html.modern .ltc a.lt-card .lt-t { display: block; font-weight: 700; font-size: 16px; }
html.modern .ltc a.lt-card .lt-s {
  display: block; margin-top: 3px; font-size: 12px; opacity: .62;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #cfc9bd; /* v19b: retro rule sets link-blue; modern must override */
  text-decoration: none; /* v22: retro adds underline; modern stays quiet */
}
html.modern .ltc a.lt-card:hover .lt-s { color: #141414; opacity: .8; }
/* v22-linktree-modern-icons */

/* v24j (user 9:07): the cream padded bezel + fuzzy shadow read pasted-on.
   The board now wears the modern dark-card language like every other widget:
   hairline orange border, no padding, no soft shadow. The wall inside the
   canvas is a character - it stays. */
html.modern #bo-wrap {
  background: #141414;
  padding: 0;
  border: 1px solid rgba(255, 106, 0, .4);
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}
html.modern #breakout { border-radius: 0; }
/* v27 (user 10:36): plain gray text below the counters, no bar */
html.modern #bo-controls {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: 1.5px; color: #9a948a;
  background: none; border: none; padding: 0; margin: 6px 0 2px;
}

/* v22-navlit-scrollcue-contact-herogap */
/* v22-ribbon-replaces-prism */
/* v23-hero-pentagon-restored-horizontal-ribbon-darkflash-retrobtn */
/* v24-ribbon-underline-windowbtn-labelgroup */
/* v24b-mobile-subtitle-clearance */
/* v24d-solidblue-slimwindow */

/* ---- v24g (user 8:25): desktop subpage banner, organized ----------------
   His screenshot: the subtitle strip stretched the whole column, the ribbon
   hugged a different left edge than the wordmark, and the RETROIZE window
   floated off-grid. Now the chip hugs its text under the wordmark, the
   ribbon centers beneath the banner, and the window button sits on the
   wordmark's own grid row, right-aligned to the shared right inset. */
@media (min-width: 701px) {
  html.modern .banner.msub { padding-bottom: 48px; }
  html.modern .banner.msub .site-sub { justify-self: start; }
  html.modern .banner.msub .mribbon { justify-self: center; align-self: auto; }
  html.modern .banner.msub #modernize-btn {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
  }
}
/* marker v24g */

/* v24i (user 8:32 note, supersedes v24h): the "it's new" indicator is a small
   orange dot, not a NEW! chip; the kicker (dot + WHAT'S NEW, W first letter)
   hugs the info box's left edge. Retro .newblink blinker untouched. */
html.modern .mhome h2.mwn-h { display: flex; align-items: center; }
html.modern .mhome h2.mwn-h .newblink {
  display: inline-block;
  order: -1;
  width: 8px;
  height: 8px;
  padding: 0;
  margin: 0 9px 0 -17px;   /* dot hangs just left of the W; the W itself sits flush with the info box's left edge (main 8:42) */
  border-radius: 50%;
  background: #ff6a00;
  font-size: 0;
  letter-spacing: 0;
  vertical-align: 0;
  flex: 0 0 auto;
}
/* marker v24i */

/* ---- v27 (user 10:38): the BREAKOUT entry badge is a brick from the wall ----
   Modern: the wall's row-4 brick - rounded, glossy, orange with the soft top
   light, ink lettering. Kept at the end so it beats the chip rules above. */
html.modern a.badge.brick, html.modern a.badge.brick:link, html.modern a.badge.brick:visited,
html.modern a.badge.brick:hover, html.modern a.badge.brick:active {
  /* v28 (user 10:59): same layered clay as the game's modern bricks */
  background: linear-gradient(rgba(255,255,255,0.30) 0, rgba(255,255,255,0) 42%),
              linear-gradient(to bottom, #ff8a3d 0, #ff6a00 45%, #d15400 100%);
  color: #141414; border: none; border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.28), inset 0 -3px 0 rgba(0,0,0,0.20);
}

/* v28-bricks */