/* ═══════════════════════════════════════════════════════════
   Jeanine Cheng — personal site
   palette: warm paper, ink linework, tea green, tomato, butter
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#FBF8F2;
  --paper-2:#FFFDF9;
  --ink:#17130E;
  --ink-soft:#5E554A;
  --ink-faint:#9A9083;
  --line:#E4DCCD;
  --tea:#2F6E5E;
  --tea-soft:#DCEAE2;
  --tomato:#D0533A;
  --tomato-soft:#F7E2DB;
  --butter:#E3B94F;
  --butter-soft:#F6EBD0;
  --sky:#5B7FA6;
  --on-warm:#1A1611;

  --sketch:255px 15px 225px 15px/15px 225px 15px 255px;
  --sketch-2:15px 225px 15px 255px/225px 15px 255px 15px;
  --sketch-soft:22px 8px 26px 10px/10px 26px 8px 22px;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;

  --wrap:1020px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:350;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
/* <use> pulls symbol content into a shadow tree that document selectors can't
   reach — so the linework is set with INHERITED svg properties on the host. */
.brand-mark,.dd,.entry-doodle,.node svg,.foot-doodle{
  fill:none;stroke:currentColor;stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;
  overflow:visible;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}

a{color:inherit}
:focus-visible{outline:2px solid var(--tea);outline-offset:3px;border-radius:2px}

/* ───────── floating doodles ───────── */
.doodle-field{position:fixed;inset:0;pointer-events:none;z-index:0}
.dd{position:absolute;color:var(--ink);opacity:.14}
.dd-1{width:120px;height:120px;top:14%;right:4%;animation:drift 17s ease-in-out infinite}
.dd-2{width:150px;height:150px;bottom:12%;left:3%;animation:drift 22s ease-in-out infinite reverse}
.dd-3{width:170px;height:120px;top:62%;right:7%;animation:drift 26s ease-in-out infinite}
.dd-4{width:130px;height:110px;top:34%;left:2%;animation:drift 19s ease-in-out infinite reverse}
.dd-5{width:74px;height:74px;top:78%;left:24%;animation:drift 14s ease-in-out infinite}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  33%{transform:translate3d(8px,-14px,0) rotate(5deg)}
  66%{transform:translate3d(-10px,10px,0) rotate(-4deg)}
}

/* ───────── top bar ───────── */
.topbar{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:26px;min-height:68px;flex-wrap:wrap}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--serif);font-size:1.22rem;letter-spacing:.2px;
  text-decoration:none;white-space:nowrap;flex:0 0 auto;
}
.brand-mark{width:23px;height:23px;color:var(--tomato);flex:0 0 auto;stroke-width:11}

.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto;padding:4px 0}
.tabs::-webkit-scrollbar{display:none}
.tab{
  appearance:none;background:none;border:0;
  font:inherit;font-size:.9rem;font-weight:400;
  color:var(--ink-soft);
  padding:7px 13px;border-radius:var(--sketch);
  cursor:pointer;white-space:nowrap;position:relative;
  transition:color .18s ease,background .18s ease;
}
.tab:hover{color:var(--ink);background:var(--paper-2)}
.tab[aria-selected="true"]{
  color:var(--ink);font-weight:500;
  background:var(--tea-soft);
  box-shadow:inset 0 0 0 1.4px var(--tea);
}

/* ───────── panels ───────── */
main{position:relative;z-index:1;min-height:70vh}
main.wrap{padding-block:76px 132px}
.panel[hidden]{display:none}
.panel{animation:fadein .42s cubic-bezier(.2,.7,.3,1) both}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────── type ───────── */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.1rem,9vw,5.4rem);line-height:.94;
  letter-spacing:-.5px;margin:.1em 0 .34em;
}
.display em{font-style:italic;color:var(--tea)}
.eyebrow{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin:0;
}
.lede{
  font-family:var(--serif);font-size:clamp(1.35rem,3.1vw,1.72rem);
  line-height:1.34;margin:0 0 1.1em;max-width:22ch;
}
p{margin:0 0 1.05em;max-width:64ch;color:var(--ink-soft)}
.hand{font-family:var(--hand);font-size:1.32em;color:var(--tomato);line-height:1.2}
.dim{color:var(--ink-faint)}
.lede.wide{max-width:34ch;margin-bottom:.9em}
.entry.prose{padding:30px 34px 34px}
.entry.prose p{max-width:68ch}
.entry.prose p:last-of-type{margin-bottom:0}
.kicker{
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tea);font-weight:600;margin:0 0 .5em;
}
.section-note{margin:-.2em 0 2.6em}
h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 .2em;line-height:1.2}
h4{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .7em;font-weight:600}

/* heading letter tiles (wordle-ish) */
.tiles{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 .45em;font-weight:400}
.tiles span{
  display:grid;place-items:center;
  width:clamp(34px,6.2vw,50px);height:clamp(34px,6.2vw,50px);
  font-family:var(--serif);font-size:clamp(1.1rem,3vw,1.7rem);
  border:1.6px solid var(--ink);border-radius:var(--sketch);
  background:var(--paper-2);
  animation:flip .5s cubic-bezier(.3,1.5,.5,1) both;
}
.tiles span:nth-child(3n+1){background:var(--tea-soft);border-color:var(--tea)}
.tiles span:nth-child(4n+3){background:var(--butter-soft);border-color:var(--butter)}
.tiles span:nth-child(5n+5){border-radius:var(--sketch-2)}
@keyframes flip{
  from{transform:rotateX(-92deg) translateY(6px);opacity:0}
  to{transform:none;opacity:1}
}

/* ───────── hero ───────── */
.hero{display:grid;grid-template-columns:1.35fr .95fr;gap:52px;align-items:start;margin-bottom:64px}
.hero-text p:last-of-type{margin-bottom:1.5em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  font:inherit;font-size:.92rem;font-weight:450;
  padding:11px 22px;cursor:pointer;
  color:var(--paper-2);background:var(--ink);
  border:1.6px solid var(--ink);border-radius:var(--sketch);
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-2px) rotate(-.6deg);background:var(--tea);border-color:var(--tea)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--butter-soft);color:var(--ink);border-color:var(--ink)}
.btn.tiny{font-size:.82rem;padding:7px 15px;border-radius:var(--sketch-2)}
.btn[disabled]{opacity:.35;cursor:not-allowed;transform:none}
.btn[disabled]:hover{transform:none;background:var(--ink);border-color:var(--ink)}
.btn.ghost[disabled]:hover{background:transparent}

/* ───────── cards & entries ───────── */
.card,.entry{
  background:var(--paper-2);
  border:1.6px solid var(--ink);
  border-radius:var(--sketch);
  padding:26px 30px;
  position:relative;
}
.entry{margin-bottom:26px;border-color:var(--line);border-width:1.4px;overflow:hidden}
.entry.slim{padding:22px 26px}
.entry-head{display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap;margin-bottom:.9em}
.role{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--tea);margin:0}
.meta{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint);text-align:right;margin:0;white-space:nowrap;line-height:1.5;
}
.meta span{color:var(--ink-faint);opacity:.75}
.sub{
  font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin:1.3em 0 .6em;
}
.tiny-note{font-size:1.5em;letter-spacing:0;text-transform:none;margin-left:10px;opacity:.9;vertical-align:-2px}

.bullets{list-style:none;margin:0;padding:0}
.bullets li{
  position:relative;padding-left:22px;margin-bottom:.55em;
  color:var(--ink-soft);max-width:70ch;
}
.bullets li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:1.8px;background:var(--tomato);
  border-radius:2px;transform:rotate(-8deg);
}
.bullets b{font-weight:600;color:var(--ink)}

/* strands-style threaded highlights */
.thread mark{
  background:none;color:var(--ink);font-weight:450;
  padding:1px 2px;border-radius:6px;
  box-shadow:inset 0 -.55em 0 var(--butter-soft);
  transition:box-shadow .25s ease,color .25s ease;
  cursor:default;
}
.thread li:hover mark{box-shadow:inset 0 -1.15em 0 var(--tea-soft)}

.entry-doodle{
  position:absolute;right:-18px;bottom:-22px;
  width:122px;height:110px;color:var(--ink);opacity:.16;stroke-width:3.6;
  pointer-events:none;
}
.entry-doodle.sm{width:78px;height:78px;right:-8px;bottom:-12px;stroke-width:5}

/* ───────── photos ───────── */
.withshot{display:grid;grid-template-columns:minmax(0,1fr) 234px;gap:32px;align-items:start}
.entry-main{min-width:0}
.shot{margin:2px 0 0;transform:rotate(-1.3deg);transition:transform .25s ease}
.shot.tilt{transform:rotate(1.4deg)}
.shot:hover,.shot.tilt:hover{transform:rotate(0deg) scale(1.02)}
.shot img{
  display:block;width:100%;height:auto;
  border:1.5px solid var(--ink);
  border-radius:var(--sketch-soft);
  background:var(--paper);
}
.shot figcaption{
  margin-top:9px;text-align:center;
  font-family:var(--hand);font-size:1.18rem;line-height:1.2;color:var(--tomato);
}

/* ───────── published paper link ───────── */
.paper-link{
  display:inline-flex;align-items:center;gap:9px;
  margin:18px 0 0;padding:10px 20px;
  font-size:.9rem;font-weight:500;
  color:var(--ink);text-decoration:none;
  background:var(--tea-soft);
  border:1.6px solid var(--tea);border-radius:var(--sketch-2);
  transition:transform .16s ease,background .16s ease;
}
.paper-link:hover{transform:translateY(-2px) rotate(-.6deg);background:var(--paper-2)}
.paper-cite{margin:8px 0 0;font-size:.76rem;color:var(--ink-faint);font-style:italic}

/* ───────── chips ───────── */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.chips li{
  position:relative;overflow:hidden;
  font-size:.83rem;color:var(--ink-soft);
  padding:6px 14px;
  border:1.3px solid var(--line);border-radius:var(--sketch);
  background:var(--paper);cursor:default;
  transition:border-color .2s ease,background .2s ease,color .2s ease,transform .2s ease;
}
.chips li[data-flip]::after{
  content:attr(data-flip);
  position:absolute;inset:0;display:grid;place-items:center;
  background:var(--tea);color:var(--paper-2);
  font-size:.83rem;letter-spacing:.02em;
  transform:translateY(102%);transition:transform .26s cubic-bezier(.3,1.2,.4,1);
}
.chips li:hover{border-color:var(--tea);background:var(--tea-soft);color:var(--ink);transform:translateY(-2px) rotate(-.7deg)}
.chips li[data-flip]:hover::after{transform:none}
.chips.big li{font-size:.95rem;padding:9px 18px}
.chips.big li[data-flip]::after{font-size:.95rem}

/* ───────── stats ───────── */
.stats{
  list-style:none;margin:0;padding:34px 0 0;
  border-top:1.4px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
}
.stats li{display:flex;flex-direction:column;gap:6px}
.stats strong{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1;color:var(--ink);
}
.stats strong i{font-style:normal;font-size:.5em;color:var(--ink-faint)}
.stats span{font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.stats small{font-size:.76rem;color:var(--ink-faint)}

/* ───────── mini wordle (hero) ───────── */
.gamelet{border-radius:var(--sketch-2);padding:26px 28px 24px}
.gamelet-h{font-family:var(--serif);font-weight:400;font-size:1.34rem;line-height:1.24;margin:0 0 .9em}
.gamelet-h .hand{display:inline-block;font-size:1.22em}
.wordle{display:grid;gap:6px;margin-bottom:12px}
.wordle-row{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.wl{
  aspect-ratio:1;display:grid;place-items:center;
  font-family:var(--serif);font-size:clamp(.95rem,2.4vw,1.25rem);
  text-transform:uppercase;
  border:1.5px solid var(--line);border-radius:var(--sketch);
  background:var(--paper);color:var(--ink);
  transition:transform .3s ease;
}
.wordle-row:nth-child(even) .wl{border-radius:var(--sketch-2)}
.wl.hit{background:var(--tea);border-color:var(--tea);color:var(--paper-2)}
.wl.near{background:var(--butter);border-color:var(--butter);color:var(--on-warm)}
.wl.miss{background:var(--paper);border-color:var(--line);color:var(--ink-faint)}
.wl.pop{animation:pop .34s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{0%{transform:rotateX(-90deg)}100%{transform:none}}
.wordle-msg{font-size:.84rem;color:var(--ink-faint);margin:0 0 12px;min-height:1.4em}
.wordle-msg.win{color:var(--tea);font-weight:500}
.gamelet-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mini-input{
  font:inherit;font-size:.9rem;
  padding:8px 13px;width:118px;
  border:1.5px solid var(--line);border-radius:var(--sketch);
  background:var(--paper);color:var(--ink);
  text-transform:lowercase;
}
.mini-input:focus{border-color:var(--tea);outline:none}

/* ───────── timeline ───────── */
.timeline{list-style:none;margin:0;padding:0 0 0 46px;position:relative}
.timeline::before{
  content:"";position:absolute;left:17px;top:14px;bottom:14px;width:1.6px;
  background:repeating-linear-gradient(to bottom,var(--line) 0 7px,transparent 7px 13px);
}
.timeline>li{
  position:relative;margin-bottom:30px;padding:22px 26px;
  background:var(--paper-2);
  border:1.4px solid var(--line);border-radius:var(--sketch);
}
.timeline>li:nth-child(even){border-radius:var(--sketch-2)}
.node{
  position:absolute;left:-46px;top:20px;
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--paper);border:1.4px solid var(--line);border-radius:50%;
  color:var(--tomato);
}
.timeline>li:nth-child(even) .node{color:var(--tea)}
.node svg{width:20px;height:20px;stroke-width:11}

/* ───────── skills ───────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.skill-list{list-style:none;margin:0;padding:0}
.skill-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}
.skill-list li:last-child{border-bottom:0}
.skill-list span{font-family:var(--serif);font-size:1.12rem;min-width:88px}
.skill-list em{font-style:normal;font-size:.8rem;color:var(--ink-faint);margin-left:auto;text-align:right}
.skill-list.plain span{min-width:0}
.lvl{display:flex;gap:4px;align-items:center}

/* ───────── games (shared) ───────── */
.game{padding:28px 30px 26px}
.game-intro{font-size:.92rem;margin-bottom:1.5em}
.game-msg{font-size:.84rem;color:var(--ink-faint);margin:14px 0 0;min-height:1.4em}
.game-msg.good{color:var(--tea);font-weight:500}
.game-msg.bad{color:var(--tomato)}
.game-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

.subtabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.subtab{
  font:inherit;font-size:.85rem;padding:8px 18px;cursor:pointer;
  background:transparent;color:var(--ink-soft);
  border:1.4px solid var(--line);border-radius:var(--sketch);
  transition:all .18s ease;
}
.subtab:hover{color:var(--ink);border-color:var(--ink)}
.subtab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper-2)}

/* ───────── connections ───────── */
.conn-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.conn-solved{display:grid;gap:9px;margin-bottom:9px}
.conn-tile{
  font:inherit;font-size:.78rem;font-weight:500;line-height:1.16;
  min-height:76px;padding:8px 6px;cursor:pointer;
  display:grid;place-items:center;text-align:center;
  text-transform:uppercase;letter-spacing:.02em;
  overflow-wrap:break-word;hyphens:manual;
  background:var(--paper);color:var(--ink);
  border:1.4px solid var(--line);border-radius:var(--sketch);
  transition:transform .14s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.conn-tile:nth-child(even){border-radius:var(--sketch-2)}
.conn-tile:hover{transform:translateY(-2px);border-color:var(--ink)}
.conn-tile[aria-pressed="true"]{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.conn-tile.shake{animation:shake .38s ease}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.conn-group{
  padding:14px 16px;text-align:center;border-radius:var(--sketch);
  border:1.6px solid var(--ink);
  animation:fadein .4s ease both;
}
.conn-group b{display:block;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}
.conn-group span{font-size:.86rem;color:var(--ink)}
.g0{background:var(--butter-soft);border-color:var(--butter)}
.g1{background:var(--tea-soft);border-color:var(--tea)}
.g2{background:var(--tomato-soft);border-color:var(--tomato)}
.g3{background:#E4EAF2;border-color:var(--sky)}

/* ───────── crossword ───────── */
.xw-layout{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:start}
.xw-grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
  width:min(280px,72vw);
  border:2px solid var(--ink);border-radius:8px;overflow:hidden;
  background:var(--ink);
}
.xw-cell{
  position:relative;aspect-ratio:1;
  background:var(--paper-2);
  display:grid;place-items:center;cursor:pointer;
  font-family:var(--serif);font-size:clamp(1.1rem,4vw,1.5rem);
  text-transform:uppercase;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
  user-select:none;
}
.xw-cell.block{background:var(--ink);cursor:default}
.xw-cell .num{
  position:absolute;top:1px;left:3px;
  font-family:var(--sans);font-size:9px;font-weight:600;color:var(--ink-faint);
}
.xw-cell.inword{background:var(--butter-soft)}
.xw-cell.cursor{background:var(--butter);color:var(--on-warm)}
.xw-cell.wrong{color:var(--tomato)}
.xw-clues{display:grid;gap:24px}
.xw-clues ol{margin:0;padding-left:1.35em}
.xw-clues li{
  font-size:.87rem;color:var(--ink-soft);margin-bottom:.4em;cursor:pointer;
  padding:2px 6px;margin-left:-6px;border-radius:5px;
}
.xw-clues li:hover{background:var(--paper)}
.xw-clues li.active{background:var(--butter-soft);color:var(--ink);font-weight:450}
.xw-clues li.done{color:var(--ink-faint);text-decoration:line-through;text-decoration-color:var(--tea)}
.offscreen{position:absolute;left:-9999px;opacity:0;width:1px;height:1px}

/* ───────── word hunt ───────── */
.hunt-layout{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:start}
.hunt-grid{
  display:grid;grid-template-columns:repeat(13,1fr);gap:2px;
  width:min(442px,86vw);touch-action:none;
}
.hunt-cell{
  aspect-ratio:1;display:grid;place-items:center;
  font-family:var(--serif);font-size:clamp(.6rem,1.7vw,.92rem);
  text-transform:uppercase;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);border-radius:var(--sketch);
  cursor:pointer;user-select:none;
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.hunt-cell.sel{background:var(--butter);border-color:var(--butter);color:var(--on-warm)}
.hunt-cell.found{background:var(--tea);border-color:var(--tea);color:var(--paper-2)}
.hunt-words{list-style:none;margin:0;padding:0;columns:2;column-gap:22px}
.hunt-words li{
  font-size:.88rem;color:var(--ink-soft);padding:3px 0;
  break-inside:avoid;
}
.hunt-words li.got{color:var(--tea);text-decoration:line-through;text-decoration-thickness:1.5px}
.hunt-words li::before{content:"○ ";color:var(--ink-faint);font-size:.8em}
.hunt-words li.got::before{content:"● ";color:var(--tea)}

/* ───────── footer ───────── */
.footer{
  position:relative;z-index:1;
  border-top:1.4px solid var(--line);
  padding:34px 0 40px;background:var(--paper-2);
}
.foot-inner{display:flex;gap:34px;align-items:flex-start;flex-wrap:wrap}
.foot-doodle{width:64px;height:56px;color:var(--tomato);opacity:.7;flex:0 0 auto;stroke-width:5.4}
.foot-col{min-width:150px}
.foot-h{font-size:1.4rem;margin:0 0 .15em}
.contact{margin:0;font-size:.88rem;line-height:1.6}
.contact a,.social a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--butter);transition:box-shadow .2s ease}
.contact a:hover,.social a:hover{box-shadow:inset 0 -1.1em 0 var(--butter-soft)}
.social{list-style:none;margin:0;padding:0;font-size:.88rem;line-height:1.75}
.colophon{margin-left:auto;font-size:.76rem;color:var(--ink-faint);font-style:italic;text-align:right}

/* ───────── responsive ───────── */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px}
  .stats{grid-template-columns:1fr 1fr;gap:24px}
  .two-col{grid-template-columns:1fr}
  .withshot{grid-template-columns:1fr;gap:20px}
  .shot{max-width:300px;margin-inline:auto}
  .xw-layout,.hunt-layout{grid-template-columns:1fr;gap:26px}
  .hunt-words{columns:3}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .bar{gap:12px;padding-bottom:6px}
  .tabs{margin-left:0;width:100%;padding-bottom:6px;flex-wrap:wrap;overflow-x:visible}
  .tab{padding:6px 10px;font-size:.85rem}
  main.wrap{padding-block:44px 88px}
  .card,.entry,.timeline>li{padding:20px 18px}
  .entry-head{flex-direction:column;gap:6px}
  .meta{text-align:left}
  .stats{grid-template-columns:1fr;gap:18px;padding-top:26px}
  .timeline{padding-left:0}
  .timeline::before{display:none}
  .node{position:static;margin-bottom:10px}
  .hunt-words{columns:2}
  .colophon{margin-left:0;text-align:left}
  .conn-tile{font-size:.6rem;min-height:62px;padding:6px 3px;letter-spacing:0}
  .conn-board,.conn-solved{gap:6px}
  .conn-group span{font-size:.78rem}
  /* doodles crowd the copy on a phone — fewer, smaller, fainter */
  .dd{opacity:.085}
  .dd-4,.dd-5{display:none}
  .dd-1{width:82px;height:82px;top:9%;right:-10px}
  .dd-2{width:96px;height:96px;bottom:8%;left:-24px}
  .dd-3{width:112px;height:80px;top:70%;right:-26px}
  .entry-doodle{width:88px;height:80px;opacity:.12}
}

/* ───────── dark mode ───────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14120F;
    --paper-2:#1C1915;
    --ink:#F2EDE3;
    --ink-soft:#B6AD9F;
    --ink-faint:#7C7365;
    --line:#332E26;
    --tea:#7FBFA6;
    --tea-soft:#22332C;
    --tomato:#E8836A;
    --tomato-soft:#382520;
    --butter:#D9B45C;
    --butter-soft:#33291A;
    --sky:#8FB0D6;
  }
  :root:not([data-theme="light"]) .g3{background:#232B36;border-color:var(--sky)}
  :root:not([data-theme="light"]) .dd{opacity:.2}
  :root:not([data-theme="light"]) .entry-doodle{opacity:.22}
}
:root[data-theme="dark"]{
  --paper:#14120F;
  --paper-2:#1C1915;
  --ink:#F2EDE3;
  --ink-soft:#B6AD9F;
  --ink-faint:#7C7365;
  --line:#332E26;
  --tea:#7FBFA6;
  --tea-soft:#22332C;
  --tomato:#E8836A;
  --tomato-soft:#382520;
  --butter:#D9B45C;
  --butter-soft:#33291A;
  --sky:#8FB0D6;
}
:root[data-theme="dark"] .g3{background:#232B36;border-color:var(--sky)}
:root[data-theme="dark"] .dd{opacity:.2}
:root[data-theme="dark"] .entry-doodle{opacity:.22}

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

@media print{
  .topbar,.doodle-field,.game,.gamelet,.subtabs,.hero-cta{display:none!important}
  .withshot{grid-template-columns:1fr}
  .shot{transform:none;max-width:220px}
  .panel[hidden]{display:block!important}
  body{background:#fff}
}