/* =========================================================
   Field Office v0.2
   Palette pulled directly from reference source code:
   NS  = northside.dk (2014) combined.css
   HF  = humanfinny.neocities.org style.css + index.html
   ========================================================= */
:root {
  /* purples */
  --purple: #662EAA;       /* NS primary (189 uses) */
  --purple-deep: #4E2382;  /* NS dark */
  --scampi: #676299;       /* HF "Scampi" */
  --lilac: #C2A4E6;        /* NS light purple */
  --chatelle: #B3B1CC;     /* HF "Chatelle" */
  /* neutrals */
  --paper: #F9F4F5;        /* HF page background */
  --ink: #3F3F3F;          /* HF charcoal */
  --grey: #7C7C7C;         /* HF rules + captions */
  --line: #CACACA;         /* HF light grey */
  /* aero accents */
  --mint: #CCFFD1;         /* NS mint */
  --spindle: #BFD4F1;      /* HF "Spindle" */
  --iceberg: #D8EDF5;      /* HF "Iceberg" */
  --lake: #6191C0;         /* HF link blue */
  --lake-deep: #3F6A95;    /* HF link blue, dark */
  --charm: #DA6A97;        /* HF "Charm" */
  --corn: #F9E586;         /* HF "Sweet Corn" */
  --chartreuse: #C3CA42;   /* added v0.6 */
  --orchid: #CE9DFF;       /* added v0.6 */
  /* game only */
  --bloom: #B8C035;        /* HF chartreuse */
  --bloom-mid: #A2AA34;
  --bloom-deep: #6B7207;

  --display: "Archivo", "Arial Black", sans-serif;
  --body: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
  --tech: "Michroma", "Michroma Fallback", "Eurostile", sans-serif;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --lcd: "VT323", ui-monospace, monospace;

  --rail: 0px;
  --chamfer: 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.62 var(--body);
  overflow-x: hidden;
}
a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--purple-deep); }
.pixel { font-family: var(--pixel); font-size: 11px; letter-spacing: .06em; text-transform: lowercase; }
kbd { font: 11px var(--pixel); border: 1px solid var(--ink); padding: 1px 5px; background: #fff; }
:focus-visible { outline: 2px dashed var(--purple); outline-offset: 3px; }

/* ---------- contour background ---------- */
.contours { position: fixed; inset: 0; z-index: -1; opacity: .38; pointer-events: none; }
.contours svg { width: 100%; height: 100%; }

/* ---------- left rail ---------- */
.rail {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail); z-index: 30;
  background: var(--ink);
  background-image: linear-gradient(90deg, rgba(255,255,255,.08), transparent 60%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 18px; padding-bottom: 22px;
}
.rail-text {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 12px var(--tech); letter-spacing: .3em; color: var(--paper); opacity: .85;
}
.lights { display: flex; flex-direction: column; gap: 8px; }
.lights i {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, var(--c, var(--lilac)) 45%);
  box-shadow: 0 0 6px var(--c, var(--lilac));
  animation: pulse 3s ease-in-out infinite;
}
.lights i:nth-child(1) { --c: var(--orchid); }
.lights i:nth-child(2) { --c: var(--mint); animation-delay: 1s; }
.lights i:nth-child(3) { --c: var(--chartreuse); animation-delay: 2s; }
@keyframes pulse { 50% { opacity: .45; } }

.shell { margin-left: var(--rail); }

/* ---------- top bar + tabs ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; padding: 0 18px;
  background: linear-gradient(180deg, #7a45bd 0%, var(--purple) 55%, var(--purple-deep) 100%);
  color: var(--paper);
}
.mark { display: flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; font: 15px var(--tech); letter-spacing: .04em; }
.mark:hover { color: var(--paper); }
.mark-glyph {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--paper); font: 700 italic 13px var(--display);
}
.mark-glyph sup { font-size: 9px; }
.topbar-meta { color: var(--mint); }

.tabs {
  display: flex; gap: 2px; overflow-x: auto; padding: 0 14px;
  background: var(--ink); scrollbar-width: none;
}
.tabs a {
  flex: 0 0 auto; font: 11px var(--pixel); color: var(--ink); text-decoration: none;
  padding: 4px 16px 3px; margin-top: 3px;
  background: linear-gradient(180deg, #fff 0%, #e8e6ee 48%, var(--line) 52%, #ddd 100%);
  border-radius: 3px 3px 0 0;
}
.tabs a:hover { background: linear-gradient(180deg, #fff 0%, var(--iceberg) 48%, var(--spindle) 52%, var(--iceberg) 100%); }
.tabs a.is-active { background: linear-gradient(180deg, #f6edff 0%, var(--orchid) 52%, #b98af0 100%); }

.strip {
  overflow: hidden; white-space: nowrap;
  background: var(--chartreuse); color: var(--ink); border-bottom: 1px solid #8f9530;
}
.strip-track { display: inline-flex; gap: 64px; padding: 7px 0 6px; animation: tick 42s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(60vw); } to { transform: translateX(-100%); } }

main { max-width: 1140px; margin: 0 auto; padding: 0 32px 40px; }

/* ---------- buttons (aero gloss + chamfer) ---------- */
.btn {
  --bg1: #fff; --bg2: var(--iceberg); --fg: var(--ink);
  position: relative; display: inline-block; cursor: pointer;
  font: 12px var(--tech); letter-spacing: .06em; text-decoration: none; color: var(--fg);
  padding: 12px 20px; border: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0 48%, transparent 52%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
  box-shadow: inset 0 0 0 1.5px var(--ink);
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.06) saturate(1.1); transform: translateY(-1px); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn-primary { --bg1: #8a5ccc; --bg2: var(--purple-deep); --fg: #fff; box-shadow: inset 0 0 0 1.5px var(--purple-deep); }
.btn-primary { background: linear-gradient(180deg, rgba(255,255,255,.28) 0 48%, transparent 52%), linear-gradient(180deg, var(--bg1), var(--bg2)); }
.btn-sm { padding: 6px 12px; font-size: 10px; --chamfer: 6px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- dot-matrix field (HF banner motif) ---------- */
.dotfield {
  position: absolute; pointer-events: none;
  background: radial-gradient(circle, var(--spindle) 0 3.4px, transparent 3.9px) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 40%, transparent 72%),
                      radial-gradient(ellipse 30% 45% at 10% 80%, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse 60% 70% at 70% 40%, #000 40%, transparent 72%),
                      radial-gradient(ellipse 30% 45% at 10% 80%, #000 30%, transparent 70%);
}

/* ---------- hero ---------- */
.hero {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
  padding: 44px 0 30px;
}
.hello { position: relative; height: 118px; margin-bottom: 4px; }
.hello .dotfield { inset: -10px -20px 10px -30px; }
.hello-word {
  position: absolute; left: 0; bottom: 6px;
  font: 200 clamp(62px, 9vw, 104px)/1 var(--display); font-stretch: 125%;
  color: var(--lake); letter-spacing: .06em;
}
.hello-word sup { font-size: .5em; vertical-align: .55em; color: var(--purple); margin-left: .05em; }
.barcode-row { display: flex; align-items: flex-end; gap: 14px; border-bottom: 1px solid var(--grey); padding-bottom: 6px; margin-bottom: 26px; }
.barcode { display: block; height: 38px; width: 190px; }
.barcode svg { width: 100%; height: 100%; display: block; }
.barcode.small { height: 22px; width: 104px; }
.path { color: var(--grey); }

.name {
  margin: 0; font: 850 clamp(52px, 7.6vw, 96px)/.9 var(--display); font-stretch: 118%;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--purple);
}
.phd {
  display: inline-block; vertical-align: top; margin: .3em 0 0 .35em;
  font: 12px var(--tech); letter-spacing: .12em; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 3px 7px;
}
.role { font: 13px var(--tech); letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 14px; color: var(--scampi); }
.lede { font-size: 1.12rem; max-width: 46ch; margin: 0 0 26px; }

/* ---------- calling card ---------- */
.card-stage { position: relative; display: grid; place-items: center; min-height: 520px; perspective: 1100px; }
.radar { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.radar i {
  position: absolute; border-radius: 50%; border: 1.5px solid var(--spindle);
  width: calc(var(--s) * 1px); height: calc(var(--s) * 1px);
  animation: ping 6s ease-out infinite;
}
.radar i:nth-child(1) { --s: 220; }
.radar i:nth-child(2) { --s: 340; border-width: 10px; opacity: .6; }
.radar i:nth-child(3) { --s: 460; }
.radar i:nth-child(4) { --s: 560; border-style: dotted; border-color: var(--chatelle); animation-delay: 3s; }
@keyframes ping { 0% { transform: scale(.94); opacity: .9; } 70% { opacity: .5; } 100% { transform: scale(1.04); opacity: .9; } }

.card {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; width: 300px; height: 470px; cursor: pointer; outline-offset: 8px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s ease-out;
  transform-style: preserve-3d;
}
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  box-shadow: 0 30px 50px -20px rgba(78,35,130,.45);
  display: flex; flex-direction: column;
}
.card-back { transform: rotateY(180deg); background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%); color: var(--paper); padding: 0 22px 20px; }
.card-top { display: flex; justify-content: space-between; padding: 12px 22px 10px; border-bottom: 1px solid var(--line); }
.card-back .card-top { margin: 0 -22px; border-color: rgba(255,255,255,.25); }
.card-photo { position: relative; margin: 14px 22px 0; height: 250px; overflow: hidden; background: var(--scampi); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; filter: grayscale(1) contrast(1.08); mix-blend-mode: luminosity; transition: filter .6s, mix-blend-mode .6s; }
.card-photo::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(249,244,245,.08) 0 1px, transparent 1px 3px);
}
.card:hover .card-photo img, .card:focus-visible .card-photo img { filter: none; mix-blend-mode: normal; }
.card-id { padding: 16px 22px 0; }
.card-name { font: 17px var(--tech); letter-spacing: .1em; margin: 0; color: var(--purple); }
.card-title { font: 11px var(--pixel); margin: 6px 0 0; color: var(--grey); letter-spacing: .06em; }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 22px 18px; }
.mosaic { display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; }
.mosaic i { width: 12px; height: 12px; background: var(--c, var(--spindle)); transition: background .6s; }

.back-big { font: 800 40px/.95 var(--display); font-stretch: 118%; text-transform: uppercase; margin: 26px 0 22px; color: var(--mint); }
.back-list { list-style: none; margin: 0; padding: 0; }
.back-list li { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px dotted rgba(255,255,255,.35); font-size: 15px; }
.back-list .pixel { color: var(--lilac); padding-top: 3px; }
.back-list a { color: var(--paper); }
.back-note { margin-top: auto; color: var(--chatelle); line-height: 1.7; }

.holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.85), transparent 45%),
    linear-gradient(115deg, transparent 20%, var(--lilac) 35%, var(--mint) 45%, var(--spindle) 55%, var(--charm) 65%, transparent 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx) var(--my);
}
.card:hover .holo, .card:focus-visible .holo { opacity: .75; }
.card-hint { margin: 16px 0 0; color: var(--grey); text-align: center; position: relative; }

/* ---------- section headers ---------- */
.section { padding-top: 76px; }
.sec-head {
  position: relative; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  border-top: 2px dotted var(--ink); padding-top: 14px; margin-bottom: 26px;
}
.sec-label {
  position: absolute; top: -12px; left: 0; background: var(--paper); padding: 0 10px 0 0; color: var(--purple);
}
.sec-head h2 {
  margin: 8px 0 0; font: 800 clamp(34px, 4.6vw, 54px)/1 var(--display); font-stretch: 122%;
  text-transform: uppercase; letter-spacing: -.01em;
}
.asterisks { margin-left: auto; font: 200 54px/0.6 var(--display); color: var(--line); letter-spacing: .08em; }
.sec-intro { font-size: 1.1rem; max-width: 60ch; margin: -6px 0 26px; }

/* ---------- frosted panels ---------- */
.panel {
  position: relative;
  background: rgba(249, 244, 245, .62);
  border: 2px dotted var(--ink);
  padding: 22px 24px;
}
.panel-label {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 4px 12px 3px 10px; color: var(--paper); background: var(--scampi);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }

/* ---------- research folders ---------- */
.folder-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.folder-tabs button {
  font: 11px var(--tech); letter-spacing: .05em; color: var(--ink); cursor: pointer;
  padding: 11px 18px 9px; border: 0; position: relative; top: 2px;
  background: linear-gradient(180deg, #fff, var(--line));
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.folder-tabs button:hover { background: linear-gradient(180deg, #fff, var(--spindle)); }
.folder-tabs button[aria-selected="true"] { background: var(--purple); color: #fff; }
.folder { border: 2px solid var(--purple); border-top-width: 6px; padding: 30px 34px; min-height: 300px; }
.case h3 { font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--display); font-stretch: 108%; margin: 6px 0 14px; max-width: 32ch; color: var(--purple-deep); }
.case p { max-width: 70ch; }
.case-meta { display: flex; align-items: center; gap: 12px; color: var(--grey); margin: 0; }
.chip { color: var(--ink); background: var(--chartreuse); padding: 2px 8px; border: 1px solid #8f9530; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.tags li { font: 12px var(--body); padding: 3px 12px; border-radius: 99px; background: rgba(206,157,255,.2); border: 1px solid var(--orchid); }

/* ---------- channels ---------- */
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.channel h3 { font: 700 24px/1.1 var(--display); font-stretch: 112%; margin: 4px 0 10px; }
.channel p { margin: 0 0 10px; }
.todo { font: 12px var(--pixel); color: var(--charm); border: 1px dashed var(--charm); display: inline-block; padding: 4px 8px; }

/* ---------- profile ---------- */
.profile { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; align-items: start; }
.prose p { margin: 0 0 12px; }
.hint { color: var(--grey); }
.redact { background: var(--ink); color: transparent; padding: 0 3px; cursor: help; transition: background .25s, color .25s; }
.redact:hover, .redact:focus { background: var(--chartreuse); color: var(--ink); outline: none; }
.quiz { background: rgba(195, 202, 66, .13); }

/* ---------- cv ---------- */
.cv { display: grid; grid-template-columns: 1fr 1.8fr; gap: 28px; align-items: start; }
.cv-card { overflow: hidden; }
.cv-card .dotfield { inset: 0; }
.cv-big { position: relative; font: 800 44px/1 var(--display); font-stretch: 122%; text-transform: uppercase; color: var(--purple); margin: 8px 0 10px; }
.cv-card p, .cv-card .btn { position: relative; }
.pubs { list-style: none; margin: 0; padding: 0; }
.pubs li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.pubs b { color: var(--purple-deep); }
.yr { background: var(--ink); color: var(--paper); text-align: center; padding: 3px 0 2px; height: fit-content; }

/* ---------- game ---------- */
.play { display: grid; grid-template-columns: minmax(0, 540px) 1fr; gap: 32px; align-items: start; }
.game { border: 2px solid var(--ink); background: var(--ink); }
.game-bar { display: flex; align-items: center; gap: 16px; padding: 8px 12px; color: var(--paper); }
.game-bar b { color: var(--mint); font-weight: 400; }
.meter { flex: 1; height: 12px; background: var(--paper); position: relative; overflow: hidden; }
.meter span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--bloom); transition: width .2s; }
.meter::after { content: ""; position: absolute; left: 70%; top: 0; bottom: 0; border-left: 2px solid var(--charm); }
.lake-wrap { position: relative; padding: 14px; background: linear-gradient(180deg, var(--lake), var(--lake-deep)); overflow: hidden; }
.lake { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.cell {
  aspect-ratio: 1; border: 0; border-radius: 6px; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.85) 0 9%, transparent 10%), linear-gradient(180deg, var(--iceberg), var(--spindle));
  transition: transform .12s;
}
.cell.bloom {
  background:
    radial-gradient(circle at 30% 35%, #d4da6a 0 14%, transparent 15%),
    radial-gradient(circle at 68% 60%, var(--bloom-deep) 0 15%, transparent 16%),
    radial-gradient(circle at 40% 74%, var(--bloom-mid) 0 11%, transparent 12%),
    var(--bloom);
  animation: wob 1.4s ease-in-out infinite;
}
.cell.guard { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.9) 0 9%, transparent 10%), linear-gradient(180deg, #fff, var(--lilac)); }
.cell.zap { transform: scale(.8); }
.cell:focus-visible { outline: 3px solid var(--corn); outline-offset: 1px; }
@keyframes wob { 50% { transform: scale(1.06) rotate(3deg); } }

.lake.clean .cell { animation: sparkle .9s ease-out both; animation-delay: calc(var(--d) * 45ms); }
@keyframes sparkle {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); background: radial-gradient(circle, #fff 0 30%, var(--mint) 70%); }
  100% { transform: scale(1); }
}
.fish { position: absolute; width: 56px; top: 42%; left: -70px; fill: var(--purple); opacity: 0; pointer-events: none; }
.fish.swim { animation: swim 3.2s ease-in-out .6s both; }
@keyframes swim {
  0% { opacity: 1; transform: translateX(0) scaleX(-1) translateY(0); }
  50% { transform: translateX(290px) scaleX(-1) translateY(-18px); }
  100% { opacity: 1; transform: translateX(640px) scaleX(-1) translateY(6px); }
}

.game-overlay {
  position: absolute; inset: 14px; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px;
  background: rgba(249, 244, 245, .95); padding: 24px;
}
.game-overlay[hidden] { display: none; }
.overlay-title { font: 800 34px/1 var(--display); font-stretch: 122%; text-transform: uppercase; color: var(--purple); margin: 0 0 4px; }
.game-overlay p { margin: 0 auto 10px; max-width: 36ch; }
.stamp {
  font: 16px var(--tech); letter-spacing: .14em; text-transform: uppercase; color: var(--charm);
  border: 3px double var(--charm); padding: 6px 12px; transform: rotate(-8deg); margin-bottom: 8px;
  animation: stamp .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
.stamp[hidden] { display: none; }
@keyframes stamp { from { transform: rotate(-8deg) scale(2.4); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.game-notes ul { padding-left: 18px; margin: 0; }
.game-notes li { margin-bottom: 8px; }

/* aero bubbles on win */
.bubbles { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.bubble {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 10%, transparent 22%),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(194,164,230,.7) 70%, rgba(204,255,209,.8) 85%, rgba(191,212,241,.9) 100%);
  animation: rise var(--t) cubic-bezier(.3,.1,.5,1) var(--delay) forwards;
}
@keyframes rise {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--drift), -120vh) scale(1); opacity: .9; }
}

/* ---------- contact ---------- */
.contact { overflow: hidden; padding: 34px 36px; }
.contact .dotfield.wide { inset: 0; }
.contact > *:not(.dotfield) { position: relative; }
.contact-big { font: 850 clamp(40px, 6vw, 72px)/.95 var(--display); font-stretch: 122%; text-transform: uppercase; color: var(--purple); margin: 6px 0 12px; }

/* ---------- footer ---------- */
.footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  max-width: 1140px; margin: 90px auto 0; padding: 16px 32px 30px; color: var(--grey);
  border-top: 2px solid var(--grey);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --rail: 0px; }
  body { font-size: 16px; }
  .rail { display: none; }
  main { padding: 0 16px 32px; }
  .footer { padding: 16px; }
  .hero, .profile, .cv, .play, .channels { grid-template-columns: 1fr; }
  .hero { padding-top: 24px; gap: 28px; }
  .card-stage { min-height: 500px; overflow: hidden; }
  .radar i:nth-child(4) { display: none; }
  .folder { padding: 22px 18px; }
  .folder-tabs button { padding: 9px 12px 7px; font-size: 10px; }
  .asterisks { display: none; }
  .panel { padding: 20px 18px; }
}
@media (max-width: 400px) {
  .card { width: 272px; height: 440px; }
  .card-photo { height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .strip { white-space: normal; }
  .strip-track { flex-wrap: wrap; gap: 4px 24px; padding: 7px 16px; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- chamfered corners keep their outline ---------- */
/* clip-path trims the border at the cut corners; these draw the diagonal back in. */
.btn::before, .btn::after, .card-face::before, .card-face::after {
  content: ""; position: absolute; width: var(--cut); height: var(--cut); pointer-events: none; z-index: 2;
}
.btn { --cut: var(--chamfer); --edge: var(--ink); }
.btn-primary { --edge: var(--purple-deep); }
.card-face { --cut: 18px; --edge: var(--ink); }
.btn::before, .card-face::before {
  top: 0; left: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--edge) calc(50% - .5px), var(--edge) calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
.btn::after, .card-face::after {
  bottom: 0; right: 0;
  background: linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--edge) calc(50% - 1.5px), var(--edge) calc(50% + .5px), transparent calc(50% + .5px));
}

/* ---------- v0.3: section numbers with asterisk ---------- */
.sec-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; letter-spacing: .1em; }
.ast { width: 15px; height: 15px; color: var(--orchid); flex: none; }
.sec-label.inline { position: static; margin: 0 0 8px; padding: 0; background: none; }
.barcode-row { position: relative; z-index: 1; }

/* ---------- v0.3: card front path + back profile ---------- */
.card-top { justify-content: flex-start; }
.card-title { text-transform: lowercase; }
.card-back { padding-bottom: 14px; }
.profile-table { margin: 14px 0 0; font-size: 13.5px; line-height: 1.3; }
.profile-table > div {
  display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dotted rgba(255,255,255,.3);
}
.profile-table dt { color: var(--lilac); }
.profile-table dd { margin: 0; color: var(--paper); }
.profile-table dd.tbd { color: var(--mint); font-family: var(--pixel); font-size: 11px; opacity: .8; }

/* ---------- v0.3: pop quiz ---------- */
.quiz .panel-label sup { font-size: .8em; color: var(--corn); }
.quiz-count { color: var(--grey); margin: 0 0 6px; display: flex; justify-content: space-between; }
.quiz-q { font: 700 19px/1.3 var(--display); font-stretch: 105%; margin: 0 0 14px; color: var(--purple-deep); }
.quiz-opts { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; }
.quiz-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  font: 15px/1.3 var(--body); color: var(--ink); padding: 8px 12px;
  background: linear-gradient(180deg, #fff 0 48%, var(--paper) 52%);
  border: 1px solid var(--chatelle); border-radius: 4px;
}
.quiz-opt::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--scampi); background: radial-gradient(circle at 35% 30%, #fff, var(--iceberg));
}
.quiz-opt:hover:not(:disabled) { border-color: var(--purple); background: linear-gradient(180deg, #fff 0 48%, #f1e5ff 52%); }
.quiz-opt:disabled { cursor: default; }
.quiz-opt.right { border-color: #3a8a4a; background: var(--mint); }
.quiz-opt.right::before { background: #3a8a4a; border-color: #3a8a4a; }
.quiz-opt.wrong { border-color: var(--charm); background: #fbe3ec; }
.quiz-opt.wrong::before { background: var(--charm); border-color: var(--charm); }
.quiz-why { font-size: 14.5px; margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--purple); background: rgba(255,255,255,.6); }
.quiz-foot { display: flex; justify-content: flex-end; }
.quiz-result { text-align: center; padding: 6px 0 4px; }
.quiz-rank { font: 850 28px/1 var(--display); font-stretch: 120%; text-transform: uppercase; color: var(--purple); margin: 10px 0 6px; }
.quiz-result .stamp { display: inline-block; font-size: 13px; }
.quiz-result p { margin: 0 0 12px; }

/* ---------- v0.4: profile sheet scrolls inside the card (humanfinny-style panel scroll) ---------- */
.profile-table {
  flex: 1; min-height: 0; overflow-y: auto; margin: 10px -10px 0 0; padding-right: 10px;
  font-size: 13px; scrollbar-width: thin; scrollbar-color: var(--lilac) rgba(255,255,255,.1);
}
.profile-table::-webkit-scrollbar { width: 8px; }
.profile-table::-webkit-scrollbar-track { background: rgba(255,255,255,.1); }
.profile-table::-webkit-scrollbar-thumb { background: var(--lilac); border: 1px solid var(--purple-deep); }
.profile-table > div { grid-template-columns: 84px 1fr; padding: 5px 0; }
.profile-table dd i { font-style: italic; color: var(--mint); }
.cats-row { align-items: center !important; }
.cats-row dd { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cat-chip { display: inline-flex; align-items: center; gap: 5px; }
.cat-chip img { width: 20px; height: auto; image-rendering: pixelated; }

/* ---------- v0.4: course list ---------- */
.courses { list-style: none; margin: 4px 0 0; padding: 0; font-size: 14.5px; }
.courses li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; padding: 4px 0; border-top: 1px dotted var(--line); }
.courses .pixel { color: var(--purple); padding-top: 2px; }
.courses em { color: var(--grey); font-style: normal; }

/* ---------- v0.4: cats (Toca + Sophie) ---------- */
.cat { position: relative; background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; }
.cat img { width: 50px; height: 62px; image-rendering: pixelated; }
.cat::after {
  content: attr(data-say); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) scale(.8);
  white-space: nowrap; font: 11px/1.2 var(--pixel); letter-spacing: .04em; color: var(--ink);
  background: #fff; border: 1.5px solid var(--ink); border-radius: 10px; padding: 6px 9px;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.cat.talking::after { opacity: 1; transform: translateX(-50%) scale(1); }
.cat.hop img { animation: hop .45s ease-out; }
@keyframes hop { 40% { transform: translateY(-10px); } }


.footer { position: relative; }
.cat-walk { position: absolute; left: 32px; right: 32px; top: -62px; height: 62px; pointer-events: none; }
.cat-stroll { position: absolute; left: 0; pointer-events: auto; animation: stroll 60s linear infinite; }
.cat-stroll img { animation: face 60s linear infinite; }
.cat-walk:hover .cat-stroll, .cat-walk:hover .cat-stroll img,
.cat-stroll.talking, .cat-stroll.talking img { animation-play-state: paused; }
@keyframes stroll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--walk, 300px)); } }
@keyframes face { 0%, 49.9% { transform: scaleX(-1); } 50%, 100% { transform: scaleX(1); } }


@media (max-width: 900px) { .cat-walk { left: 16px; right: 16px; } }

/* ---------- v0.5: About on its own, Toca lounging on the panel edge ---------- */
.profile { grid-template-columns: 1fr; }
.profile .prose { padding-bottom: 34px; }
.profile .prose p { max-width: 74ch; }
.cat-lounge { position: absolute; right: 22px; bottom: -3px; z-index: 2; }

/* ---------- v0.5: personality test under the game ---------- */
.play + .quiz { margin-top: 30px; }
.quiz-intro { max-width: 62ch; }
.quiz-title { font: 850 clamp(28px, 4vw, 40px)/1 var(--display); font-stretch: 120%; text-transform: uppercase; color: var(--purple); margin: 4px 0 10px; }
.quiz-fine { font: 11px var(--pixel); color: var(--grey); margin: 0 0 14px; }
.quiz-opt.picked { border-color: var(--purple); background: var(--orchid); }
.quiz-opt.picked::before { background: var(--purple); border-color: var(--purple); }
.quiz-result { text-align: left; max-width: 70ch; }
.quiz-result .quiz-rank { margin: 12px 0 10px; }
.quiz-science { font-size: 14.5px; padding: 8px 12px; border-left: 3px solid var(--purple); background: rgba(255,255,255,.6); }
.quiz-science b { font: 11px var(--pixel); color: var(--purple); display: block; margin-bottom: 2px; }
.quiz-meter { display: grid; gap: 5px; margin: 14px 0 16px; }
.quiz-meter div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; font: 11px var(--pixel); }
.quiz-meter i { display: block; height: 9px; background: var(--orchid); }
.quiz-meter .top i { background: var(--purple); }
@media (min-width: 901px) { .quiz .quiz-opts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quiz-meter div { grid-template-columns: 120px 1fr; } }
.quiz-result .stamp { font-size: 12px; margin: 14px 0 6px 4px; transform-origin: left center; }

/* =========================================================
   v0.7: slide-phone contact form, pixel-art plastic
   (stepped corners, flat shading bands, grain, hard outline)
   ========================================================= */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: center; }
.contact .btn-row { margin-top: 6px; }

/* outline + hard pixel shadow trace the stepped silhouette of slab and deck together */
.phone {
  --plum: #2b1d3a; --body: var(--orchid); --hi: #e7cfff; --lo: #a274dc; --lo2: #8b5cc9;
  position: relative; width: min(330px, 100%); margin: 0 auto;
  filter: drop-shadow(3px 0 0 var(--plum)) drop-shadow(-3px 0 0 var(--plum)) drop-shadow(0 3px 0 var(--plum)) drop-shadow(0 -3px 0 var(--plum))
          drop-shadow(10px 10px 0 rgba(43, 29, 58, .22));
}

.phone-slab {
  position: relative; z-index: 2; padding: 18px 18px 12px; overflow: hidden;
  clip-path: polygon(0px 40px, 0px 36px, 0px 32px, 0px 28px, 0px 24px, 4px 24px, 4px 20px, 4px 16px, 8px 16px, 8px 12px, 12px 12px, 12px 8px, 16px 8px, 16px 4px, 24px 4px, 24px 0px, 40px 0px, calc(100% - 40px) 0px, calc(100% - 24px) 0px, calc(100% - 24px) 4px, calc(100% - 16px) 4px, calc(100% - 16px) 8px, calc(100% - 12px) 8px, calc(100% - 12px) 12px, calc(100% - 8px) 12px, calc(100% - 8px) 16px, calc(100% - 4px) 16px, calc(100% - 4px) 20px, calc(100% - 4px) 24px, 100% 24px, 100% 28px, 100% 32px, 100% 36px, 100% 40px, 100% calc(100% - 16px), 100% calc(100% - 12px), 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, calc(100% - 16px) 100%, 16px 100%, 4px 100%, 4px calc(100% - 4px), 4px calc(100% - 8px), 0px calc(100% - 8px), 0px calc(100% - 12px), 0px calc(100% - 16px));
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0 6px, transparent 6px),
    linear-gradient(90deg, var(--hi) 0 6px, transparent 6px),
    url("assets/noise-plum.png"),
    var(--body);
}
.phone-vines { position: absolute; top: 4px; left: 4px; right: 4px; width: calc(100% - 8px); height: auto; color: #9a5fe0; opacity: .55; pointer-events: none; }
.phone-ear { position: relative; display: flex; justify-content: center; gap: 12px; margin: 4px auto 6px; }
.phone-ear i { width: 12px; height: 10px; background: var(--plum); border-radius: 2px; box-shadow: inset 0 -2px 0 #000; }
.phone-brand {
  position: relative; margin: 0 0 12px; text-align: center;
  font: 850 18px/1 var(--display); font-stretch: 125%; letter-spacing: .14em;
  color: #9a63db; text-shadow: 0 2px 0 var(--hi), 0 -1px 0 var(--lo2);
}

/* LCD: chunky dark bezel, flat grey-green glass, scanlines */
.lcd {
  position: relative; overflow: hidden; margin: 0;
  padding: 8px 12px 6px;
  clip-path: polygon(0px 8px, 0px 4px, 0px 0px, 8px 0px, calc(100% - 8px) 0px, 100% 0px, 100% 4px, 100% 8px, 100% calc(100% - 8px), 100% calc(100% - 4px), 100% 100%, calc(100% - 8px) 100%, 8px 100%, 0px 100%, 0px calc(100% - 4px), 0px calc(100% - 8px));
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    #d6d8c6;
  border: 9px solid var(--plum); background-clip: padding-box;
  font: 21px/1.05 var(--lcd); color: #1f1f1f;
}
.lcd-status { display: flex; justify-content: space-between; align-items: center; font-size: 20px; margin-bottom: 4px; }
.lcd-icons { display: flex; align-items: center; gap: 8px; }
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.sig b { width: 3px; background: #1f1f1f; }
.sig b:nth-child(1) { height: 4px; } .sig b:nth-child(2) { height: 6px; } .sig b:nth-child(3) { height: 9px; } .sig b:nth-child(4) { height: 12px; }
.batt { position: relative; width: 24px; height: 11px; border: 2px solid #1f1f1f; }
.batt::after { content: ""; position: absolute; right: -5px; top: 2px; width: 3px; height: 4px; background: #1f1f1f; }
.batt b { position: absolute; inset: 1px auto 1px 1px; width: 40%; background: #1f1f1f; }

.lcd-tab {
  display: inline-block; padding: 1px 26px 1px 8px; margin-bottom: 2px;
  background: var(--chartreuse); color: #2a2d07;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
}
.lcd-row, .lcd-msg { display: grid; grid-template-columns: 58px 1fr; align-items: baseline; border-bottom: 2px solid #a9ae3c; padding: 3px 0 1px; }
.lcd-label { color: #5d6206; }
.lcd-fixed { color: #1f1f1f; }
.lcd input, .lcd textarea {
  width: 100%; min-width: 0; border: 0; padding: 0; margin: 0; background: transparent;
  font: inherit; color: #1f1f1f; caret-color: var(--purple); resize: none;
}
.lcd input::placeholder, .lcd textarea::placeholder { color: #8f927c; }
.lcd input:focus, .lcd textarea:focus { outline: none; background: rgba(195,202,66,.3); }
.lcd textarea {
  line-height: 22px; height: 88px;
  background-image: repeating-linear-gradient(180deg, transparent 0 20px, rgba(169,174,60,.75) 20px 22px);
}
.lcd-msg { border-bottom: 0; }
.lcd-error { min-height: 20px; margin: 2px 0 0; font-size: 18px; color: #a0245e; }
.lcd-soft { display: flex; justify-content: space-between; }
.lcd-soft button {
  font: 26px/1 var(--lcd); color: #1f1f1f; cursor: pointer; background: none; border: 0; padding: 2px 4px;
}
.lcd-soft button:hover, .lcd-soft button:focus-visible { background: #1f1f1f; color: #d6d8c6; outline: none; }

.lcd-sent { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; background: #d6d8c6; }
.lcd-sent[hidden] { display: none; }
.lcd-sent p { margin: 0; }
.lcd-envelope { font-size: 54px; line-height: 1; color: var(--purple); animation: fly .6s steps(2) infinite alternate; }
@keyframes fly { to { transform: translate(4px, -4px); } }
.lcd-bar { width: 170px; height: 14px; border: 2px solid #1f1f1f; padding: 2px; margin: 4px auto 0 !important; }
.lcd-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #1f1f1f 0 8px, transparent 8px 10px); transition: width 1.4s steps(12); }
.lcd-sent.go .lcd-bar i { width: 100%; }

/* hardware buttons under the screen */
.phone-nav { display: grid; grid-template-columns: 1fr 1.15fr 1.3fr 1.15fr 1fr; gap: 6px; align-items: center; margin-top: 12px; }
.pk {
  position: relative; height: 40px; padding: 0; cursor: pointer; border: 0; color: var(--plum);
  clip-path: polygon(0px 8px, 0px 4px, 0px 0px, 8px 0px, calc(100% - 8px) 0px, 100% 0px, 100% 4px, 100% 8px, 100% calc(100% - 8px), 100% calc(100% - 4px), 100% 100%, calc(100% - 8px) 100%, 8px 100%, 0px 100%, 0px calc(100% - 4px), 0px calc(100% - 8px));
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0 4px, transparent 4px), linear-gradient(0deg, #b9b2c4 0 5px, transparent 5px), #e9e6ee;
  box-shadow: inset 0 0 0 2px var(--plum);
}
.pk:active { transform: translateY(2px); }
.pk svg { width: 30px; height: 30px; fill: currentColor; }
.pk-call { color: #5f8f2a; }
.pk-end { color: #c0304f; }
.pk-end svg { transform: rotate(135deg); }
.pk-call svg { transform: rotate(-45deg) translateY(-1px); }
.pk-soft i { display: block; width: 18px; height: 4px; margin: 0 auto; background: var(--plum); }
.pk-dpad { height: 48px; background: linear-gradient(180deg, rgba(255,255,255,.5) 0 4px, transparent 4px), linear-gradient(0deg, var(--lo2) 0 5px, transparent 5px), var(--lo); }
.pk-dpad span { display: block; width: 26px; height: 18px; margin: 0 auto; background: #e9e6ee; box-shadow: 0 0 0 2px var(--plum), inset 0 -3px 0 #b9b2c4; border-radius: 3px; }
.pk:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--chartreuse); }

/* slide grip */
.phone-grip {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 8px; padding: 6px 0 2px; cursor: pointer; background: none; border: 0;
  font: 11px var(--pixel); letter-spacing: .08em; text-transform: lowercase; color: #4e2382;
}
.grip-lines { width: 34px; height: 8px; border-top: 2px solid rgba(78,35,130,.55); border-bottom: 2px solid rgba(78,35,130,.55); }

/* keyboard deck */
.phone-deck-wrap {
  position: relative; z-index: 1; height: 0; margin-top: -6px; overflow: hidden;
  transition: height .45s steps(6, end);
}
.phone.open .phone-deck-wrap { height: var(--deck-h, 214px); }
.phone-deck {
  padding: 18px 12px 22px;
  clip-path: polygon(0px 0px, 100% 0px, 100% calc(100% - 32px), 100% calc(100% - 28px), 100% calc(100% - 24px), 100% calc(100% - 20px), calc(100% - 4px) calc(100% - 20px), calc(100% - 4px) calc(100% - 16px), calc(100% - 4px) calc(100% - 12px), calc(100% - 8px) calc(100% - 12px), calc(100% - 8px) calc(100% - 8px), calc(100% - 12px) calc(100% - 8px), calc(100% - 12px) calc(100% - 4px), calc(100% - 16px) calc(100% - 4px), calc(100% - 16px) 100%, calc(100% - 32px) 100%, 32px 100%, 16px 100%, 16px calc(100% - 4px), 12px calc(100% - 4px), 12px calc(100% - 8px), 8px calc(100% - 8px), 8px calc(100% - 12px), 4px calc(100% - 12px), 4px calc(100% - 16px), 4px calc(100% - 20px), 0px calc(100% - 20px), 0px calc(100% - 24px), 0px calc(100% - 28px), 0px calc(100% - 32px));
  background:
    linear-gradient(90deg, #d8b8ff 0 6px, transparent 6px),
    url("assets/noise-plum.png"),
    var(--lo);
}
.key-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 5px; }
.key {
  position: relative; flex: 1 1 0; min-width: 0; height: 36px; padding: 10px 0 0; cursor: pointer;
  font: 19px/1 var(--lcd); color: var(--plum); text-transform: uppercase;
  border: 2px solid var(--plum); border-radius: 5px;
  background: linear-gradient(180deg, #fff 0 3px, transparent 3px), linear-gradient(0deg, #c7a6f3 0 4px, transparent 4px), #efe2ff;
}
.key b {
  position: absolute; top: 2px; right: 2px; width: 13px; height: 11px;
  font: 11px/11px var(--lcd); text-align: center; color: #fff; background: #7c4fc4; border-radius: 2px;
}
.key b + span { position: relative; left: -3px; }
.key:active, .key.pressed { transform: translateY(2px); }
.key.wide { flex-grow: 1.5; font-size: 15px; padding-top: 0; }
.key.space { flex-grow: 4; font-size: 17px; padding-top: 0; text-transform: none; }
.key.send { flex-grow: 1.7; padding-top: 0; text-transform: none; background: linear-gradient(180deg, rgba(255,255,255,.6) 0 3px, transparent 3px), linear-gradient(0deg, #8f9530 0 4px, transparent 4px), var(--chartreuse); }
.key.on { background: linear-gradient(0deg, #8f9530 0 4px, transparent 4px), var(--chartreuse); }
.phone-deck.nummode .key b { background: var(--chartreuse); color: var(--plum); }
.key:focus-visible { outline: 2px solid var(--chartreuse); outline-offset: 1px; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) {
  .phone-slab { padding: 16px 12px 10px; }
  .key { font-size: 16px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) { .phone-deck-wrap { transition: none; } }

/* ---------- v0.8: readability over dot fields ---------- */
.cv-card .dotfield, .contact .dotfield.wide { opacity: .45; }
.cv-card p, .contact p:not(.contact-big):not(.sec-label) { font-weight: 500; text-shadow: 0 0 2px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper); }

/* =========================================================
   v0.9
   ========================================================= */

/* ---------- hero: barcode with cut-out labels, PhD on the baseline ---------- */
.barcode-block { position: relative; display: block; width: min(330px, 100%); height: 58px; margin: 0 0 26px; border-bottom: 1px solid var(--grey); }
.barcode-block .barcode { width: 100%; height: 100%; }
.bc-cut {
  position: absolute; bottom: 0; padding: 3px 7px 1px; line-height: 1;
  background: var(--paper); color: var(--grey); border: 1px solid var(--grey); border-bottom: 0;
}
.bc-num { left: 10px; }
.bc-path { left: 62px; }
.phd { vertical-align: baseline; position: relative; top: -5px; margin: 0 0 0 .35em; }

/* ---------- card: tiles that shimmer, then clear to reveal "click to flip" ---------- */
.card-foot { align-items: center; }
.tile-reveal { position: relative; width: 132px; height: 30px; }
.tile-msg {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--purple); font-size: 10px; letter-spacing: .08em; border: 1px dashed var(--orchid);
}
.tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; }
.tiles i { background: var(--c); transition: opacity .28s, transform .28s, background-color .3s; }
.tiles i.off { opacity: 0; transform: scale(.3); }
.card-hint { display: none; }

/* ---------- research: tan folders, collaborator flair ---------- */
.panel.folder { background: rgba(195, 202, 66, .13); }
.flair {
  display: inline-flex; align-items: center; gap: 8px; margin: -4px 0 16px; padding: 5px 12px;
  font-size: 13.5px; border: 1px dashed var(--purple); border-radius: 99px; background: rgba(206, 157, 255, .22);
}
.flair::before { content: "\2726"; color: var(--purple); }
.flair a { font-weight: 600; }

/* ---------- publications left, CV card right ---------- */
.cv { grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); }
.cv-card .btn-row { margin-top: 6px; }

/* ---------- Expertise: MiniDisc carousel ring ---------- */
.flow { position: relative; }
.flow-stage {
  position: relative; height: 520px; perspective: 1500px; perspective-origin: 50% 30%; outline: none; touch-action: pan-y;
}
.flow-stage:focus-visible { outline: 2px dashed var(--purple); outline-offset: 6px; }
.flow-stage::before {
  content: ""; position: absolute; left: 50%; top: 392px; width: 560px; height: 46px; margin-left: -280px;
  background: radial-gradient(ellipse, rgba(43, 29, 58, .2), transparent 70%); pointer-events: none;
}
.ring {
  position: absolute; left: 50%; top: 140px; width: 0; height: 0; transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.album {
  --w: 240px;
  position: absolute; left: calc(var(--w) / -2); top: 0; width: var(--w); height: var(--w); cursor: pointer;
  transform: rotateY(var(--ry)) translateZ(var(--radius, 300px));
  transform-style: preserve-3d;
}
.album-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.15, .5, 1); }
.album.flipped .album-inner { transform: rotateY(180deg); }
.album-face { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.album:not(.is-active) .album-front { backface-visibility: visible; -webkit-backface-visibility: visible; }
.album:not(.is-active) .album-back { visibility: hidden; }

/* MiniDisc shell: translucent plastic, rainbow disc, scuffs, stars, paper label */
.album-front {
  inset: 0; overflow: hidden; border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .5) 0 10%, transparent 10.5% 58%, rgba(255, 255, 255, .2) 58.5% 62%, transparent 62.5%),
    url("assets/noise-white.png"),
    linear-gradient(160deg, var(--a2) 0%, color-mix(in srgb, var(--a2) 62%, var(--a1)) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), inset 0 -12px 20px rgba(0, 0, 0, .18);
}
.album-front::after {
  content: ""; position: absolute; inset: 0; background: #2b1d3a; pointer-events: none;
  opacity: calc(1 - var(--shade, 1)); transition: opacity .6s;
}
.md-shell { position: absolute; inset: 9px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.md-disc {
  position: absolute; left: 13%; top: 5%; width: 74%; aspect-ratio: 1; border-radius: 50%; opacity: .92;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, .14) 0 1px, transparent 1px 3px),
    conic-gradient(from 30deg, #ffb6ef, #fff3a0, #a6ffd9, #9fc9ff, #d7a8ff, #ffb6ef, #fff3a0, #a6ffd9, #9fc9ff, #d7a8ff, #ffb6ef),
    var(--a2);
  background-blend-mode: normal, overlay, normal;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), inset 0 0 0 7px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .15);
}
.md-hub {
  position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background:
    radial-gradient(circle, #2b2433 0 22%, #c9c4d2 23% 30%, #8d869a 31% 34%, #e9e6ef 35% 62%, #a39cb0 63% 66%, rgba(255, 255, 255, .25) 67%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .12);
}
.md-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.md-stars .s0 { fill: #fff; }
.md-stars .s1 { fill: none; stroke: #fff; stroke-width: 1.4; }
.md-stars .s2 { fill: var(--a3); stroke: rgba(0, 0, 0, .15); stroke-width: .4; }
.md-insert { position: absolute; left: 14px; top: 12px; font-size: 7px; color: rgba(255, 255, 255, .9); letter-spacing: .08em; }
.md-label {
  position: absolute; left: 7%; right: 7%; bottom: 7%; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center;
  padding: 7px 9px 6px; transform: rotate(-1.5deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(97, 145, 192, .25) 13px 14px),
    #f7f4ea;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.md-num { grid-row: span 2; font: 850 24px/1 var(--display); color: #fff; background: var(--a1); padding: 4px 6px 3px; }
.md-title { font: 850 17px/1 var(--display); text-transform: uppercase; color: var(--a1); letter-spacing: -.01em; white-space: nowrap; }
.md-sub { font-size: 7px; color: var(--grey); margin-top: 3px; }
.md-print {
  position: absolute; right: 4px; top: 36%; writing-mode: vertical-rl; font-size: 7px; letter-spacing: .1em; color: rgba(255, 255, 255, .8);
}
.md-scuff {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background:
    linear-gradient(118deg, transparent 0 40%, rgba(255, 255, 255, .5) 40.2% 40.5%, transparent 40.7%),
    linear-gradient(64deg, transparent 0 71%, rgba(255, 255, 255, .45) 71.1% 71.3%, transparent 71.5%),
    linear-gradient(152deg, transparent 0 22%, rgba(255, 255, 255, .35) 22.1% 22.25%, transparent 22.4%),
    repeating-linear-gradient(100deg, transparent 0 9px, rgba(255, 255, 255, .05) 9px 10px);
}

/* back: liner notes, larger than the disc so the text breathes */
.album-back {
  left: 50%; top: 50%; width: 340px; height: 470px; margin: -235px 0 0 -170px;
  transform: rotateY(180deg); padding: 18px 20px; overflow-y: auto;
  background: linear-gradient(180deg, #fff, var(--paper)); color: var(--ink);
  border: 2px solid var(--a1); border-radius: 6px; box-shadow: 0 20px 34px -14px rgba(43, 29, 58, .5);
  font-size: 14px; line-height: 1.5;
}
.album-back .album-track { color: var(--a1); margin: 0 0 6px; font-size: 10px; }
.album-back h3 { font: 850 24px/1 var(--display); font-stretch: 118%; text-transform: uppercase; color: var(--a1); margin: 0 0 10px; }
.album-back p { margin: 0 0 10px; }
.album-back .album-src { font: 11.5px/1.5 var(--body); color: var(--grey); }
.album-back .album-src a { color: var(--grey); }

.flow-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 4px; }
.flow-dots { display: flex; gap: 8px; }
.flow-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--purple); background: transparent; padding: 0; cursor: pointer; }
.flow-dot.on { background: var(--purple); }

@media (max-width: 640px) {
  .flow-stage { height: 500px; }
  .ring { top: 120px; }
  .album { --w: 180px; }
  .album-back { width: min(300px, 84vw); height: 440px; margin: -220px 0 0 calc(min(300px, 84vw) / -2); }
  .md-title { font-size: 13px; }
  .md-num { font-size: 19px; }
  .flow-stage::before { top: 330px; width: 380px; margin-left: -190px; }
}

/* ---------- About me: MS Paint window ---------- */
.paint { border: 2px solid var(--purple-deep); background: #ece9f1; box-shadow: 10px 10px 0 rgba(43, 29, 58, .18); }
.paint-title {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; color: #fff;
  font: 600 14px var(--body);
  background: linear-gradient(180deg, #8a5ccc 0%, var(--purple) 45%, var(--purple-deep) 100%);
}
.paint-icon { width: 16px; height: 16px; border-radius: 3px; background: conic-gradient(var(--chartreuse) 0 25%, var(--orchid) 0 50%, var(--spindle) 0 75%, var(--charm) 0); }
.paint-btns { margin-left: auto; display: flex; gap: 3px; }
.paint-btns i {
  width: 22px; height: 20px; display: grid; place-items: center; font: 700 12px/1 var(--body); font-style: normal; color: var(--ink);
  background: linear-gradient(180deg, #fff, #ddd6e8); border: 1px solid var(--purple-deep); border-radius: 3px;
}
.paint-btns i:last-child { background: linear-gradient(180deg, #f3a0bf, var(--charm)); color: #fff; }
.paint-menu { display: flex; gap: 18px; padding: 4px 12px; border-bottom: 1px solid #c9c2d6; }
.paint-body { display: grid; grid-template-columns: 52px 1fr; }
.paint-tools { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 3px; padding: 8px 6px; border-right: 1px solid #c9c2d6; }
.paint-tools i {
  display: grid; place-items: center; height: 20px; font-style: normal; font-size: 13px; color: var(--purple-deep);
  background: linear-gradient(180deg, #fff, #e3dcee); border: 1px solid #b9aed0;
}
.paint-canvas {
  --blob: var(--orchid);
  position: relative; height: 680px; margin: 10px; overflow: hidden;
  background: #fff; border: 1px solid #b9aed0; box-shadow: inset 1px 1px 0 #8f86a3;
}
.who {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 1; white-space: nowrap;
  font: 850 clamp(40px, 6vw, 72px)/1 var(--display); font-stretch: 122%; text-transform: lowercase; color: var(--purple);
}
.who span { display: inline-block; padding: 0 .12em; background: var(--chartreuse); color: var(--ink); text-transform: uppercase; transform: rotate(-3deg); }
.me-blob {
  position: absolute; left: 50%; bottom: 40px; width: 300px; height: 520px; transform: translateX(-50%);
  border-radius: 46% 54% 48% 52% / 40% 42% 58% 60%;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .55), transparent 45%), var(--blob);
  transition: background-color .3s;
}
.me { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2; }
.me img { display: block; height: 560px; width: auto; filter: drop-shadow(0 8px 10px rgba(43, 29, 58, .25)); }
.cat-feet { position: absolute; left: calc(50% + 60px); bottom: 14px; z-index: 3; }

.doodle { position: absolute; z-index: 1; fill: var(--chartreuse); }
.doodle.d1 { width: 34px; left: 30%; top: 22%; }
.doodle.d2 { width: 22px; right: 30%; top: 30%; fill: var(--orchid); }
.doodle.d3 { width: 30px; right: 33%; bottom: 40%; fill: var(--charm); }
.doodle.d4 { width: 26px; left: 33%; bottom: 30%; fill: var(--spindle); }

.bubble-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bub {
  position: absolute; left: var(--x); top: var(--y); max-width: 200px; pointer-events: auto;
  transform: rotate(var(--r, 0deg)); cursor: grab; user-select: none; touch-action: none;
  font: 600 14px/1.3 var(--body); color: var(--ink);
  transition: box-shadow .2s, transform .2s;
}
.bub.dragging { cursor: grabbing; transform: rotate(0deg) scale(1.05); transition: none; }
.bub.speech {
  padding: 10px 14px; background: #fff; border: 2px solid var(--purple); border-radius: 18px;
  box-shadow: 3px 3px 0 var(--orchid);
}
.bub.speech::after {
  content: ""; position: absolute; right: 22px; bottom: -11px; width: 16px; height: 16px;
  background: #fff; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: skewX(-30deg) rotate(30deg);
}
.bub.speech.right::after { right: auto; left: 22px; transform: skewX(30deg) rotate(60deg); }
.bub.thought {
  padding: 12px 16px; background: #f4ecff; border: 2px solid var(--purple); border-radius: 50% / 45%;
  text-align: center; box-shadow: 3px 3px 0 var(--chartreuse);
}
.bub.thought::before, .bub.thought::after {
  content: ""; position: absolute; background: #f4ecff; border: 2px solid var(--purple); border-radius: 50%;
}
.bub.thought::before { width: 14px; height: 14px; right: 24px; bottom: -16px; }
.bub.thought::after { width: 8px; height: 8px; right: 14px; bottom: -26px; }
.bub.thought.right::before { right: auto; left: 24px; }
.bub.thought.right::after { right: auto; left: 14px; }
.bub.sticker {
  padding: 9px 14px; border-radius: 6px; color: var(--ink);
  border: 2px dashed rgba(255, 255, 255, .9); outline: 2px solid var(--purple-deep);
  box-shadow: 4px 4px 0 rgba(43, 29, 58, .25);
}
.bub.star { background: var(--chartreuse); }
.bub.leaf { background: var(--mint); }
.bub.tea { background: var(--corn); }
.bub.alert { width: 210px; background: #ece9f1; border: 2px solid var(--purple-deep); box-shadow: 4px 4px 0 rgba(43, 29, 58, .25); }
.alert-bar { display: flex; justify-content: space-between; padding: 3px 6px; color: #fff; font: 600 12px var(--body); background: linear-gradient(180deg, #8a5ccc, var(--purple-deep)); }
.alert-bar i { font-style: normal; }
.alert-body { display: flex; align-items: center; gap: 10px; padding: 10px 10px 6px; }
.alert-body b {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  color: var(--ink); background: var(--corn); border: 2px solid var(--ink); font: 800 15px var(--body);
}
.alert-ok {
  display: block; width: 70px; margin: 0 auto 8px; padding: 3px 0; text-align: center; cursor: pointer;
  font: 600 12px var(--body); background: linear-gradient(180deg, #fff, #ddd6e8); border: 1px solid var(--purple-deep); border-radius: 3px;
}
.bub.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: rotate(var(--r)) translateX(-5px); } 40%, 80% { transform: rotate(var(--r)) translateX(5px); } }

.paint-palette { display: flex; align-items: center; gap: 10px; padding: 0 10px 8px 72px; }
.swatch-now { width: 30px; height: 30px; background: var(--c, var(--orchid)); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.swatches { display: grid; grid-template-columns: repeat(10, 22px); gap: 3px; }
.swatch { width: 22px; height: 22px; padding: 0; cursor: pointer; background: var(--c); border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px #fff; }
.swatch:hover { transform: translateY(-2px); }
.paint-status { display: flex; justify-content: space-between; padding: 4px 12px; border-top: 1px solid #c9c2d6; color: var(--grey); }

@media (max-width: 760px) {
  .paint-body { grid-template-columns: 1fr; }
  .paint-tools { display: none; }
  .paint-canvas { height: auto; padding: 80px 10px 16px; }
  .me-blob { top: 110px; bottom: auto; width: 220px; height: 400px; }
  .me { position: relative; left: auto; bottom: auto; transform: none; display: block; text-align: center; }
  .me img { height: 420px; margin: 0 auto; }
  .cat-feet { left: calc(50% + 50px); bottom: auto; top: 450px; }
  .doodle { display: none; }
  .bubble-layer { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 12px; margin-top: 24px; }
  .bub { position: relative; left: auto; top: auto; cursor: default; }
  .paint-palette { padding-left: 10px; flex-wrap: wrap; }
  .swatches { grid-template-columns: repeat(5, 26px); }
  .swatch { width: 26px; height: 26px; }
}

/* ---------- scroll reveal + progress ---------- */
.reveal {
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s), transform .9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
.scroll-progress { position: fixed; top: 0; left: var(--rail); right: 0; height: 3px; z-index: 45; pointer-events: none; }
.scroll-progress i { display: block; height: 100%; background: var(--chartreuse); transform-origin: left; transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}


@media (max-width: 900px) { .cv { grid-template-columns: 1fr; } }

/* =========================================================
   v0.10
   ========================================================= */
/* barcode labels: no border */
.bc-cut { border: 0; padding: 3px 8px 2px; }

/* card tiles: gapless so the message stays hidden until revealed */
.tiles { gap: 0; }
.tiles i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.tile-msg { opacity: 0; transition: opacity .35s; border: 0; }
.tile-reveal.revealed .tile-msg { opacity: 1; }

/* research tabs: tan, selected stays purple */
.folder-tabs button { background: #EEECD4; }
.folder-tabs button:hover { background: #E3E0BC; }
.folder-tabs button[aria-selected="true"] { background: var(--purple); color: #fff; }

/* section headers: asterisks drawn as glyphs, centered on the title */
.sec-head { align-items: center; }
.asterisks { display: flex; gap: 6px; margin-left: auto; font: 0/0 a; padding-top: 8px; }
.asterisks svg { width: 26px; height: 26px; color: var(--line); }

/* ---------- Paint: SVG speech + thought bubbles ---------- */
.bub.speech, .bub.thought {
  padding: 14px 20px; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center; max-width: 210px;
}
.bub.speech::after, .bub.thought::before, .bub.thought::after { content: none; }
.bub > span { position: relative; }
.bub-shape { position: absolute; left: 0; top: 0; overflow: visible; z-index: -1; pointer-events: none; }
.bub-shape .sh { fill: var(--orchid); }
.bub-shape .st { fill: #fff; stroke: var(--purple); stroke-width: 5; stroke-linejoin: round; }
.bub-shape .fi { fill: #fff; }
.bub-shape .tr { fill: #fff; stroke: var(--purple); stroke-width: 2.2; }
.bub.thought .bub-shape .sh { fill: var(--chartreuse); }
.bub.thought .bub-shape .st, .bub.thought .bub-shape .fi, .bub.thought .bub-shape .tr { fill: #f4ecff; }

.bub.nametag {
  width: 150px; padding: 0; overflow: hidden; text-align: center; border-radius: 10px;
  background: #fff; border: 2px solid var(--purple-deep); box-shadow: 4px 4px 0 rgba(43, 29, 58, .25);
}
.nt-top { display: block; padding: 4px 0 3px; background: var(--purple); color: #fff; font: 800 15px/1 var(--display); font-stretch: 120%; text-transform: uppercase; letter-spacing: .04em; }
.nt-name { display: block; padding: 10px 6px 12px; font: 850 24px/1 var(--display); font-stretch: 110%; color: var(--ink); border-bottom: 8px solid var(--purple); }

/* working tools */
.paint-tools button {
  display: grid; place-items: center; height: 26px; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, #fff, #e3dcee); border: 1px solid #b9aed0; color: var(--purple-deep);
}
.paint-tools button svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.paint-tools button:hover { background: linear-gradient(180deg, #fff, var(--iceberg)); }
.paint-tools button.on { background: #d9cdee; border-color: var(--purple-deep); box-shadow: inset 1px 1px 0 #9a8bb8; }
.paint-draw { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.paint-canvas.drawing .paint-draw { pointer-events: auto; cursor: crosshair; touch-action: none; }
.paint-canvas .me { z-index: 2; }
.bubble-layer { z-index: 4; }
.cat-feet { left: var(--x); top: var(--y); bottom: auto; z-index: 6; touch-action: none; cursor: grab; }
.swatch.on { outline: 2px solid var(--ink); outline-offset: 1px; }

@media (max-width: 760px) {
  .paint-tools { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid #c9c2d6; }
  .paint-tools button { width: 34px; height: 30px; }
  .cat-feet { left: calc(50% + 50px) !important; top: 450px !important; }
  .bub.nametag { order: -1; }
}

/* scroll reveal: a bigger, slower rise so it reads as content arriving */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- v0.11: barcode as a slim, full-width divider under "hello" ---------- */
.barcode-block { width: 100%; height: 30px; margin: 4px 0 28px; }
.bc-cut { font-size: 10px; padding: 2px 7px 1px; }

/* =========================================================
   v0.12
   ========================================================= */
/* section dividers: asterisk only */
.sec-label { gap: 0; }
.sec-label .ast { width: 18px; height: 18px; }

/* long disc titles (Communication) shrink to fit the label */
.md-title.long { font-size: 13px; letter-spacing: -.02em; }
@media (max-width: 640px) { .md-title.long { font-size: 9.5px; } }

/* warning.exe: a real pop-up, centered over the photo */
.paint-canvas > .bub.alert { position: absolute; left: var(--x); top: var(--y); z-index: 8; width: 230px; }
.paint-canvas > .bub.alert[hidden] { display: none; }
.bub.alert.pop { animation: alert-pop .22s cubic-bezier(.2, 1.5, .4, 1) both; }
.bub.alert.bye { animation: alert-pop .18s ease-in reverse both; }
@keyframes alert-pop { from { opacity: 0; transform: rotate(var(--r)) scale(.6); } to { opacity: 1; transform: rotate(var(--r)) scale(1); } }
.alert-x { cursor: pointer; padding: 0 3px; }
.alert-ok { font-family: var(--body); color: var(--ink); }
@media (max-width: 760px) {
  .paint-canvas > .bub.alert { left: 50%; top: 240px; margin-left: -115px; }
}

/* phone: the screen half slides up over the keypad; nothing else moves */
.phone { --p: 0; z-index: 5; }
.phone-slab { transform: translateY(calc(var(--p) * var(--travel, 190px) * -1)); will-change: transform; }
.phone-deck-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; height: auto; margin: 0; overflow: visible; transition: none;
}
.phone.open .phone-deck-wrap { height: auto; }
@media (max-width: 900px) {
  .phone { margin-top: calc(var(--p) * var(--travel, 190px)); }
}

/* ---------- v0.13: no sidebar; one live dot beside "channel open" ---------- */
.rail { display: none; }
.topbar-meta { display: inline-flex; align-items: center; gap: 9px; }
.live-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 16%, var(--chartreuse) 48%);
  box-shadow: 0 0 6px 1px var(--chartreuse);
  animation: live-blink 1.8s ease-in-out infinite;
}
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* =========================================================
   v0.14: smoother scrolling and no layout jumps
   ========================================================= */
/* panels: solid enough to read over the contour lines without a live blur */
.panel { background: rgba(249, 244, 245, .9); }
.panel.folder { background: linear-gradient(rgba(195, 202, 66, .13), rgba(195, 202, 66, .13)), rgba(249, 244, 245, .92); }

/* the contour map gets its own layer and a fixed height, so it neither repaints on scroll
   nor rescales when a phone's address bar hides or shows */
.contours { inset: 0 0 auto 0; height: 100vh; height: 100lvh; will-change: transform; contain: strict; }

/* reserve space for things the script fills in, so nothing below gets pushed down */
.lake { aspect-ratio: 1; }
.swatches { min-height: 22px; }
.barcode svg { contain: strict; }
@media (max-width: 760px) { .swatches { min-height: 55px; } }

/* keep heavy pieces on their own layers so scrolling only moves them */
.ring, .album-inner { will-change: transform; }
.phone { transform: translateZ(0); }
.live-dot { box-shadow: 0 0 6px 1px var(--chartreuse); will-change: opacity; }
.cat-stroll { will-change: transform; }

/* =========================================================
   v0.15: phone pass
   ========================================================= */
/* no sideways scroll, no auto-enlarged text, no double-tap zoom */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; overflow-x: clip; }
body { overflow-x: clip; touch-action: manipulation; }
.flow { overflow-x: clip; }            /* side discs peek past the edge; clip them here */
.cell, .key, .pk, .btn { touch-action: manipulation; }
.strip { font-size: 11px; letter-spacing: .06em; }

/* draggables: page can still scroll under a finger until a press-and-hold starts a drag */
.bub, .cat-feet { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.cat-feet.dragging { cursor: grabbing; }

@media (max-width: 900px) {
  .hello .dotfield { inset: -10px 0 10px -16px; }
  /* top bar: name and "channel open" stay on one line */
  .topbar { padding: 0 12px; gap: 8px; }
  .mark { font-size: 13px; gap: 8px; white-space: nowrap; }
  .mark-glyph { width: 28px; height: 28px; flex: none; }
  .topbar-meta { font-size: 9px; letter-spacing: .02em; gap: 6px; white-space: nowrap; }
}
@media (max-width: 350px) { .clock-label { display: none; } }

/* Paint on phones: one screen tall, bubbles around the photo, press-and-hold to move */
@media (max-width: 760px) {
  .paint-menu { display: none; }
  .paint-canvas {
    height: clamp(400px, calc(100vh - 250px), 540px); height: clamp(400px, calc(100svh - 250px), 540px);
    padding: 0; margin: 8px;
  }
  .who { top: 10px; font-size: 34px; }
  .me-blob { top: auto; bottom: 22px; width: 44%; height: 56%; }
  .paint-canvas .me { position: absolute; left: 50%; bottom: 10px; height: 58%; transform: translateX(-50%); display: block; }
  .paint-canvas .me img { height: 100%; width: auto; margin: 0; }
  .bubble-layer { position: absolute; inset: 0; display: block; margin: 0; }
  .bub { position: absolute; left: var(--mx, var(--x)); top: var(--my, var(--y)); font-size: 10.5px; line-height: 1.2; cursor: grab; }
  .bub.speech, .bub.thought { padding: 7px 9px; max-width: 90px; }
  .bub.sticker { padding: 5px 8px; max-width: 100px; white-space: normal; }
  .bub.m-hide { display: none; }
  .bub.nametag { width: 92px; order: 0; border-radius: 7px; }
  .nt-top { font-size: 10px; padding: 3px 0 2px; }
  .nt-name { font-size: 15px; padding: 5px 4px 6px; border-bottom-width: 5px; }
  .bub-shape .st { stroke-width: 4; }
  .paint-canvas > .bub.alert { left: var(--mx, calc(50% - 105px)); top: var(--my, 36%); margin-left: 0; width: 210px; font-size: 13px; }
  .cat-feet { left: var(--mx, var(--x)) !important; top: var(--my, var(--y)) !important; }
  .cat-feet img { width: 40px; height: 50px; }
  .paint-palette { flex-wrap: nowrap; padding: 0 10px 8px; gap: 8px; }
  .swatch-now { width: 26px; height: 26px; flex: none; }
  .swatches { grid-template-columns: repeat(10, minmax(0, 22px)); min-height: 22px; }
  .swatch { width: auto; height: 22px; }
  .paint-status { font-size: 9px; }
}

@media (max-width: 640px) { .album-back { font-size: 13px; padding: 16px 18px; } }

/* =========================================================
   v0.16
   ========================================================= */
/* top bar: the name's letters sit low in their line box; lift them to match the clock */
.mark-name { position: relative; top: -2px; }

/* hero: barcode removed; about a third of the old gap between "hello" and the name */
.hello { margin-bottom: 22px; }

/* dragging: own layer while moving, no filter, no easing lag */
.bub { transition: none; }
.bub.dragging, .cat-feet.dragging { will-change: transform; }
.bub-shape { overflow: hidden; }

@media (max-width: 900px) {
  .tabs { padding-left: 0; }
  .tabs a:first-child { border-top-left-radius: 0; }

  /* tighter gap under the card */
  .card-stage { min-height: 0; padding: 4px 0 8px; }
  .hero { padding-bottom: 8px; }
  #research { padding-top: 46px; }

  /* "Publications & CV" on one line with its asterisks */
  #pubs .sec-head { flex-wrap: nowrap; gap: 10px; }
  #pubs .sec-head h2 { font-size: 21px; font-stretch: 108%; white-space: nowrap; }
  #pubs .asterisks svg { width: 17px; height: 17px; }
  #pubs .asterisks { gap: 4px; }

  /* research folders: smaller type, and never taller than the screen */
  .folder { padding: 16px 15px; max-height: calc(var(--vh0, 100vh) * .86); overflow-y: auto; min-height: 0;
            scrollbar-width: thin; scrollbar-color: var(--orchid) transparent; }
  .case h3 { font-size: 17px; line-height: 1.2; margin: 6px 0 9px; }
  .case p { font-size: 13px; line-height: 1.46; margin: 0 0 8px; }
  .case-meta { font-size: 9px; gap: 8px; }
  .chip { padding: 1px 6px; }
  .flair { font-size: 11px; padding: 3px 9px; gap: 6px; margin: -2px 0 10px; line-height: 1.3; }
  .tags { gap: 5px; margin-top: 10px; }
  .tags li { font-size: 10.5px; padding: 2px 8px; }
}

/* Paint on phones: the whole window is 90% of the screen, fixed; the cutout is 75% of the canvas */
@media (max-width: 760px) {
  .paint { height: calc(var(--vh0, 100vh) * .9); display: flex; flex-direction: column; }
  .paint-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .paint-canvas { flex: 1; min-height: 0; height: auto; margin: 8px; padding: 0; }
  .who { top: 8px; font-size: 30px; }
  .paint-canvas .me { height: 75%; bottom: 6px; }
  .me-blob { bottom: 16px; width: 62%; height: 70%; }
}

/* =========================================================
   v0.17: folder contents
   ========================================================= */
/* status sticker clearly smaller than the title; title a touch larger */
.chip { font-size: 10px; padding: 2px 7px 1px; }
.case h3 { font-size: clamp(23px, 2.7vw, 32px); }

@media (max-width: 900px) {
  /* natural height, no inner scrolling */
  .folder { max-height: none; overflow: visible; padding: 22px 16px 18px; }
  .case { display: flex; flex-direction: column; align-items: flex-start; }
  .case > p:not(.flair):not(.case-meta) { align-self: stretch; }

  /* breathing room around the sticker and title */
  .case-meta { margin: 0 0 14px; }
  .chip { font-size: 8px; padding: 2px 6px 1px; }
  .case h3 { font-size: 18px; margin: 0 0 16px; }

  /* tags, then the collaborator note last; both smaller */
  .tags { order: 2; gap: 4px; margin-top: 6px; }
  .tags li { font-size: 9.5px; padding: 1px 7px; }
  .flair {
    order: 3; display: block; margin: 12px 0 0; padding: 5px 11px 6px;
    font-size: 10px; line-height: 1.4; border-radius: 12px;
  }
  .flair::before { margin-right: 5px; }
  .flair a { display: block; }
}
.case[hidden] { display: none !important; }
.case-meta { margin-bottom: 10px; }
@media (max-width: 900px) {
  .folder { padding-top: 26px; }
  .case-meta { margin: 0 0 16px; }
  .case h3 { margin: 0 0 18px; }
}
@media (max-width: 900px) {
  .case .flair { font-size: 10px; line-height: 1.4; margin: 14px 0 0; padding: 5px 11px 6px; }
  .case .flair a { font-size: 10px; }
}

/* =========================================================
   v0.18
   ========================================================= */
/* status sticker sits midway between the folder's top edge and the title */
.folder { padding-top: 20px; }
.case-meta { margin: 0 0 14px; }
.case h3 { margin-top: 0; }

/* cat speech bubbles: anchored to a side when the cat is near an edge */
.cat.say-left::after { left: 0; transform: scale(.8); transform-origin: left bottom; }
.cat.say-left.talking::after { transform: scale(1); }
.cat.say-right::after { left: auto; right: 0; transform: scale(.8); transform-origin: right bottom; }
.cat.say-right.talking::after { transform: scale(1); }
/* touch screens keep :hover "stuck" after a tap, which froze Sophie's walk; only pause on real hover */
@media (hover: none) {
  .cat-walk:hover .cat-stroll, .cat-walk:hover .cat-stroll img { animation-play-state: running; }
  .cat-walk .cat-stroll.talking, .cat-walk .cat-stroll.talking img { animation-play-state: paused; }
}

@media (max-width: 900px) {
  .folder { padding-top: 16px; }
  .case-meta { margin: 0 0 16px; }
  /* short collaborator note stays on one line */
  .case .flair.short { white-space: nowrap; }
  .case .flair.short a { display: inline; }
}
@media (max-width: 760px) {
  /* stickers: one centered line, hugging the text */
  .bub.sticker { max-width: none; white-space: nowrap; text-align: center; padding: 5px 9px; }
}
.case .case-meta { margin: 0 0 20px; line-height: 1; }
@media (max-width: 900px) { .case .case-meta { margin: 0 0 16px; } }

/* card foot: barcode and "click to flip" tiles centered with a clear gap, within the photo's width */
.card-foot { justify-content: center; gap: 20px; }
.card-foot .barcode.small { width: 88px; flex: none; }
.tile-reveal { width: 116px; flex: none; }

/* PhD box: its bottom edge sits exactly on the name's baseline at every size.
   (An inline-block with overflow hidden uses its bottom edge as its baseline.) */
.phd { vertical-align: baseline; overflow: hidden; position: static; top: auto; margin: 0 0 0 .35em; }

/* phone decal: flowing vines with spiral tips and five-petal flowers */
.phone-vines { top: 2px; left: 2px; right: 2px; width: calc(100% - 4px); color: #9457e0; opacity: .6; }