/* ============================================================
   Sunwoo Hong — shared styles for index.html, publications.html, news.html
   ============================================================ */

:root {
  /* ---- 우드 팔레트: 색은 여기서만 바꾸면 됩니다 ---- */
  --paper:  #FFFFFF;   /* 배경 */
  --ink:    #2B2118;   /* 제목 (월넛) */
  --body:   #4B4038;   /* 본문 */
  --muted:  #7C6D5F;   /* 보조 텍스트 */
  --acorn:  #8A5A2B;   /* 링크 / 액센트 (도토리) */
  --cap:    #5C3A1E;   /* 호버 (도토리 깍지) */
  --line:   #E9E1D6;   /* 헤어라인 */
  --husk:   #F7F2EA;   /* 옅은 바탕 (배지, 호버) */
  --leaf:   #55702F;   /* Oral / Spotlight 배지 (참나무 잎) */
  --leaf-bg:#EEF2E4;
  --leaf-line:#D5DEC0;
  --line-strong:#D9CBB8; /* 카드 호버 테두리 */
  --nav-bg: rgba(255,255,255,.9);
  --on-accent:#FFFFFF;   /* 액센트 바탕 위의 글자 */
  --shadow: rgba(92,58,30,.55);
  color-scheme: light;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --maxw: 840px;
  --gutter: 24px;
}

/* ---- 어두운 테마: 상단 메뉴의 달 아이콘을 누르면 적용됩니다 ---- */
:root[data-theme="dark"] {
  --paper:  #1C1612;   /* 짙은 월넛 */
  --ink:    #F4ECE1;
  --body:   #D8CCBE;
  --muted:  #A49586;
  --acorn:  #DDA56B;
  --cap:    #F2C690;
  --line:   #3A2F27;
  --husk:   #2A211B;
  --leaf:   #B9CF93;
  --leaf-bg:#262E1F;
  --leaf-line:#3F4B32;
  --line-strong:#5A4A3D;
  --nav-bg: rgba(28,22,18,.9);
  --on-accent:#1C1612;
  --shadow: rgba(0,0,0,.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 64px; }   /* 상단 메뉴에 가리지 않도록 */

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--acorn);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
a:hover { color: var(--cap); border-bottom-color: var(--cap); }
a:focus-visible { outline: 2px solid var(--acorn); outline-offset: 2px; border-radius: 3px; }

strong { color: var(--ink); font-weight: 600; }
p { margin: 0 0 14px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* ================= NAV ================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mark { display: flex; align-items: center; border: 0; }
.mark:hover { border: 0; }
.mark img { width: 26px; height: 26px; display: block; }
.nav-links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.nav-links a { font-size: .94rem; color: var(--muted); border: 0; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cap); border: 0; }

/* 테마 전환 버튼 */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-left: -6px;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--muted);
}
.theme-toggle:hover { color: var(--cap); background: var(--husk); }
.theme-toggle:focus-visible { outline: 2px solid var(--acorn); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ================= TOP (이름 · 소개 · 사진) ================= */
.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-areas: "head side" "bio side";
  column-gap: 56px;
  align-items: start;
  padding-top: 64px; padding-bottom: 28px;
}
.top-head { grid-area: head; }
.top-bio  { grid-area: bio; }
.top-side { grid-area: side; }

h1.name, h1.page-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.3rem, 6vw, 3.1rem); line-height: 1.05;
  letter-spacing: -.6px; color: var(--ink);
  margin: 0 0 10px;
}
.role { margin: 0 0 24px; font-size: 1.08rem; color: var(--body); }
/* 한 문장 비전: 본문보다 한 단계 크게 */
.top-bio .vision { font-size: 1.24rem; line-height: 1.45; color: var(--ink); margin: 20px 0; }

.portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--husk);
}
.portrait-empty {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 3rem; color: var(--acorn);
}
.contact { margin-top: 12px; font-size: .93rem; line-height: 1.55; color: var(--muted); }
.contact p { margin: 0; }
.contact .links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 14px; }

/* the paper card a stepping stone points at */
.pub.is-pointed { border-color: var(--acorn); box-shadow: 0 14px 30px -22px var(--shadow); }

/* ================= SECTIONS ================= */
section { padding: 30px 0; }
h2 {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 1.55rem; letter-spacing: -.2px; line-height: 1.2;
  margin: 0 0 18px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
/* [full list] 링크 */
h2 a { font-family: var(--sans); font-size: .9rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.h2-note { font-family: var(--sans); font-size: .85rem; font-weight: 400; font-style: italic; letter-spacing: 0;
           color: var(--muted); opacity: .7; text-align: right; }
.h2-note[hidden] { display: none; }
.h2-title { white-space: nowrap; }
@media (max-width: 700px) { .h2-note { font-size: .78rem; } }

/* ================= NEWS ================= */
.news { margin: 0; padding: 0; list-style: none; }
.news li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px;
  padding: 7px 0;
}
.news time { color: var(--muted); font-size: .93rem; font-variant-numeric: tabular-nums; padding-top: 1px; }

/* ================= AWARDS & SERVICE (index.html) ================= */
.list-group {
  font-family: var(--sans); font-size: .9rem; font-weight: 600;
  color: var(--ink); letter-spacing: 0;
  margin: 18px 0 2px;
}
.list-group:first-of-type { margin-top: 4px; }
#awards .news time { white-space: nowrap; }
@media (max-width: 700px) {
  #awards .news li { grid-template-columns: 88px minmax(0, 1fr); }
}

/* ================= PUBLICATION CARDS (index.html) ================= */
.pub-legend { font-size: .9rem; color: var(--muted); margin: -6px 0 16px; }
.pub {
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  padding: 20px 22px; margin-bottom: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pub:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px var(--shadow);
  border-color: var(--line-strong);
}
.pub-badge {
  font-size: .78rem; font-weight: 600; color: var(--cap);
  background: var(--husk); border: 1px solid var(--line);
  padding: 0 10px; border-radius: 999px; display: inline-block; margin-bottom: 8px;
}
.pub-badge.award { color: var(--leaf); background: var(--leaf-bg); border-color: var(--leaf-line); }
.pub-title {
  font-family: var(--serif); font-weight: 600; font-size: 1.2rem;
  color: var(--ink); line-height: 1.3; margin: 0 0 6px;
}
.pub-authors { font-size: .97rem; color: var(--body); margin: 0 0 2px; }
.pub-authors .me, .plist .me { color: var(--ink); font-weight: 600; }
.pub-venue { font-size: .93rem; color: var(--muted); font-style: italic; margin: 0 0 8px; }
.pub-desc { font-size: .97rem; color: var(--body); margin: 0 0 12px; }
.pub-desc:last-child { margin-bottom: 0; }
.pub-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-links a {
  font-size: .85rem; color: var(--acorn);
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 11px;
}
.pub-links a:hover { background: var(--acorn); color: var(--on-accent); border-color: var(--acorn); }

/* ================= FULL LISTS (publications.html, news.html) ================= */
.page-head { padding-top: 56px; padding-bottom: 6px; }
.page-head p { color: var(--muted); margin: 0; }
.plist-year {
  font-family: var(--serif); font-weight: 600; color: var(--ink);
  font-size: 1.3rem; margin: 26px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.plist { margin: 0; padding: 0; list-style: none; }
.plist li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.plist li:last-child { border-bottom: 0; }
.plist .pub-title { font-size: 1.12rem; margin-bottom: 3px; }
.plist .pub-venue { margin-bottom: 6px; }
.plist .tag { font-style: normal; font-weight: 600; color: var(--leaf); }

/* ================= CLOSING THE GAP (index.html) =================
   "Close the gap", drawn: a river, two banks, three stepping stones.
   Under the drawing, each stone is the question it started from. */
:root { --stone-1: #EADBC0; --stone-2: #DAD6CE; --stone-3: #E2E8D2; --water: #8FAAB0; }
:root[data-theme="dark"] { --stone-1: #54422E; --stone-2: #4A4640; --stone-3: #3C4531; --water: #7C999F; }
.gap-lead { margin: 0 0 6px; }
.gap-map { margin: 0; }
.gap-map svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; overflow: visible; }
.gm-pool   { fill: var(--water); fill-opacity: .13; stroke: none; }
.gm-bank   { fill: var(--husk); stroke: var(--cap); stroke-width: 1.7; stroke-linejoin: round; }
.gm-strata { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.gm-crack  { fill: none; stroke: var(--muted); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.gm-hatch  { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-linecap: round; }
.gm-pebble { fill: var(--paper); stroke: var(--muted); stroke-width: .9; opacity: .8; }
.gm-grass, .gm-moss { fill: none; stroke: var(--leaf); stroke-width: 1.4; stroke-linecap: round; }
.gm-water  { fill: none; stroke: var(--water); stroke-width: 1.5; stroke-linecap: round; }
.gm-deep   { stroke-width: 1.2; opacity: .7; }
.gm-ripple { fill: none; stroke: var(--water); stroke-width: 1.1; stroke-linecap: round; opacity: .9; }
.gm-glint  { fill: none; stroke: var(--water); stroke-width: 1; stroke-linecap: round; opacity: .55; }
.gm-route  { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 6; }
.gm-arrow  { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gm-stone  { transition: transform .2s ease; }
.gm-rock   { stroke: var(--cap); stroke-width: 1.8; stroke-linejoin: round; }
.gm-rock-1 { fill: var(--stone-1); }
.gm-rock-2 { fill: var(--stone-2); }
.gm-rock-3 { fill: var(--stone-3); fill-opacity: .55; stroke-dasharray: 6 5; }
.gm-facet  { fill: none; stroke: var(--cap); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.gm-stone-next .gm-facet { stroke-dasharray: 3 5; opacity: .35; }
.gm-shade  { fill: none; stroke: var(--cap); stroke-width: 1; stroke-linecap: round; opacity: .4; }
.gm-speck  { fill: none; stroke: var(--cap); stroke-width: 1.8; stroke-linecap: round; opacity: .45; }
.gm-stone.is-lit { transform: translateY(-4px); }
.gm-stone.is-lit .gm-rock { stroke: var(--acorn); stroke-width: 2.2; }
.gm-side   { font-family: var(--serif); font-style: italic; font-size: 14px; fill: var(--body); }
.gm-axis   { font-family: var(--sans); font-weight: 600; font-size: 14px; fill: var(--ink); }

.gm-paper  { font-family: var(--sans); font-size: 12px; fill: var(--muted); }
.gap-map a .gm-paper { fill: var(--acorn); cursor: pointer; }
.gap-map a:hover .gm-paper, .gap-map a:focus-visible .gm-paper { fill: var(--cap); text-decoration: underline; }
.gap-map a { outline: none; }
.gm-stone, .gm-label { cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.gm-stone.is-open { transform: translateY(-4px); }
.gm-stone.is-open .gm-rock { stroke: var(--acorn); stroke-width: 2.2; }
/* 그림 아래 한 자리에 안내 문구와 세 설명을 겹쳐 두고, 고른 것만 보이게 합니다 (높이가 변하지 않습니다) */
.gap-notes { display: grid; justify-items: center; align-items: start; margin-top: 18px; text-align: center; }
.gap-notes > * { grid-area: 1 / 1; max-width: 560px; margin: 0;
                 opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; }
.gap-hint { color: var(--muted); font-size: .92rem; font-style: italic; align-self: center; }
.gap-notes:not(.has-active) .gap-hint,
.gap-note.is-lit, .gap-note.is-open { opacity: 1; visibility: visible; }
/* 마우스가 올라간 돌이 눌러서 고정한 돌보다 우선합니다 */
.gap-notes:has(.is-lit) .gap-note.is-open:not(.is-lit) { opacity: 0; visibility: hidden; }
.gs-q { font-family: var(--serif); font-style: italic; font-size: 1.18rem; line-height: 1.3; color: var(--ink); margin: 0 0 7px; }
.gs-a { font-size: .95rem; line-height: 1.55; margin: 0; }
.gs-tags { display: none; font-size: .84rem; color: var(--muted); margin: 9px 0 0; }
.gap-invite { margin: 26px 0 0; }
@media (max-width: 700px) {
  /* 작은 화면: 이름표를 키우고 가운데 이름표는 한 줄 내립니다. 논문 이름은 그림에서 숨기고 설명 안에 넣습니다. */
  .gap-map svg { overflow: visible; }
  .gm-axis  { font-size: 23px; }
  .gm-axis-mid { transform: translateY(26px); }
  .gm-side  { font-size: 17.5px; }
  .gm-paper { display: none; }
  .gap-notes { margin-top: 26px; }
  .gs-tags { display: block; }
}

/* ================= FOOTER ================= */
footer {
  border-top: 1px solid var(--line); margin-top: 28px;
  padding: 22px 0 44px; color: var(--muted); font-size: .88rem;
}
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "side" "bio";
    padding-top: 40px;
  }
  .role { margin-bottom: 20px; }
  .top-side { margin-bottom: 22px; }
  .portrait { max-width: 220px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: .88rem; }
  .news li { grid-template-columns: 78px minmax(0, 1fr); column-gap: 12px; }
  .page-head { padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pub, a, .gm-stone, .gap-notes > * { transition: none; }
  .pub:hover { transform: none; }
}


/* ================= ACORN & SQUIRREL =================
   A small opt-in visitor. Nothing animates until the acorn is pressed.
   The overlay never receives pointer events or changes the page layout.
   ================================================== */
.acorn-toggle {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 30px; width: 30px; height: 30px;
  padding: 0; margin-left: -6px;
  border: 0; border-radius: 50%; background: none;
  color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background-color .15s ease;
}
.acorn-toggle[hidden], .squirrel-stage[hidden], .squirrel-transfer[hidden] {
  display: none !important;
}
.acorn-toggle:hover { color: var(--cap); background: var(--husk); }
.acorn-toggle:focus-visible {
  outline: 2px solid var(--acorn); outline-offset: 2px;
}
.acorn-toggle svg {
  position: absolute; width: 21px; height: 21px; display: block;
  overflow: visible; pointer-events: none;
}
.acorn-toggle .acorn-icon { opacity: 1; }
.acorn-toggle .acorn-empty { opacity: 0; }
.acorn-toggle[data-acorn="away"] .acorn-icon { opacity: 0; }
.acorn-toggle[data-acorn="away"] .acorn-empty { opacity: .48; }
.acorn-toggle[data-acorn="away"]:hover .acorn-empty,
.acorn-toggle[data-acorn="away"]:focus-visible .acorn-empty { opacity: .9; }
.acorn-toggle.is-busy { cursor: progress; }
.acorn-toggle.just-returned .acorn-icon { animation: acorn-home .42s ease-out; }
@keyframes acorn-home {
  0% { transform: scale(.84); }
  48% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.squirrel-status {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.squirrel-stage, .sq-hang {
  /* Sunwoo's squirrel, as a coloured-pencil sketch: a dark-brown outline with a
     faint second pass, warm colour laid a touch off the line, a sage belly and a
     colour-pencil grain. Same colours in both themes, like a sticker on the page. */
  --sq-ink: #3B2B1F;
  --sq-paper: #FFFFFF;
  --sq-wash: #B98250;
  --sq-wash-o: .82;
  --sq-belly: #D9D8B6;
  --sq-blush: #9E4B26;
  --sq-blush-o: .2;
  --sq-tex: #6B4428;
  --sq-tex-o: .22;
  --sq-nut: #E2B57E;
  --sq-nut-cap: #7A4C28;
  --sq-scarf: var(--leaf);
}
.squirrel-stage {
  position: fixed; inset: 0; z-index: 70;
  overflow: hidden; contain: layout style paint;
  pointer-events: none !important;
  user-select: none; -webkit-user-select: none;
  color: var(--acorn);
}
:root[data-theme="dark"] .squirrel-stage,
:root[data-theme="dark"] .sq-hang {
  --sq-ink: #2A1D13;
  --sq-paper: #F4ECE1;
  --sq-wash: #C08A55;
  --sq-wash-o: .88;
  --sq-belly: #D4D3AF;
  --sq-blush-o: .22;
  --sq-tex: #5C3A1E;
  --sq-tex-o: .22;
}
.squirrel-stage * { pointer-events: none !important; }
/* Only the squirrel itself and its hint slip take clicks; the rest of the
   overlay lets every click through to the page. */
.squirrel-stage > .squirrel-actor,
.squirrel-stage .sq-bubble,
.squirrel-stage .sq-fortune-slip,
.squirrel-stage .sq-fortune-slip * { pointer-events: auto !important; }
.squirrel-actor {
  position: absolute; top: 0; left: 0;
  width: 88px; height: 71.5px;
  display: block; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 58%;
  will-change: transform;
}
.squirrel-actor:focus { outline: none; }
.squirrel-actor:focus-visible { outline: 2px dashed var(--acorn); outline-offset: 2px; border-radius: 40%; }
.squirrel-actor.is-presenting:focus-visible { outline: none; }
.squirrel-facing { display: block; width: 100%; height: 100%; }
/* "click me!": a comic speech bubble beside the squirrel's head. It sits on the side
   the squirrel faces, so it never leaves the top of the screen, and is not mirrored. */
.sq-bubble {
  position: absolute; top: -2px; left: calc(100% - 6px);
  padding: 4px 10px 5px; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 14px; line-height: 1.2;
  color: var(--sq-ink); background: var(--sq-paper);
  border: 1.6px solid var(--sq-ink); border-radius: 14px 14px 14px 4px;
  box-shadow: 2px 2px 0 rgba(59, 43, 31, .18);
  opacity: 0; visibility: hidden; transform: scale(.4) rotate(-8deg); transform-origin: 0 100%;
  transition: opacity .16s ease, transform .22s cubic-bezier(.3, 1.6, .5, 1), visibility .16s;
}
/* the little tail pointing back at the squirrel */
.sq-bubble::after {
  content: ""; position: absolute; left: -6px; bottom: 3px; width: 9px; height: 9px;
  background: var(--sq-paper);
  border-left: 1.6px solid var(--sq-ink); border-bottom: 1.6px solid var(--sq-ink);
  transform: skewX(-28deg) rotate(18deg); border-bottom-left-radius: 2px;
}
.squirrel-actor.faces-left .sq-bubble {
  left: auto; right: calc(100% - 6px); border-radius: 14px 14px 4px 14px; transform-origin: 100% 100%;
  transform: scale(.4) rotate(8deg);
}
.squirrel-actor.faces-left .sq-bubble::after {
  left: auto; right: -6px; border-left: 0; border-right: 1.6px solid var(--sq-ink);
  transform: skewX(28deg) rotate(-18deg); border-bottom-left-radius: 0; border-bottom-right-radius: 2px;
}
.squirrel-actor.is-calling .sq-bubble { opacity: 1; visibility: visible; transform: rotate(-4deg); }
.squirrel-actor.is-calling.faces-left .sq-bubble { transform: rotate(4deg); }
.squirrel-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* Drawing layers */
.squirrel-art .sq-paper { fill: var(--sq-paper); }
.squirrel-art .sq-wash { fill: var(--sq-wash); opacity: var(--sq-wash-o); transform: translate(1px, .8px); }
/* traced ink lines, plus a faint second pass a hair off, like a pencil going over a line twice */
.squirrel-art .sq-ink { fill: var(--sq-ink); }
.squirrel-art .sq-ink-ghost { opacity: .28; transform: translate(.8px, -.6px); }
.squirrel-art .sq-belly { fill: var(--sq-belly); }
.squirrel-art .sq-blush { fill: var(--sq-blush); opacity: var(--sq-blush-o); }
.squirrel-art .sq-shade { fill: var(--sq-ink); opacity: .2; }
.squirrel-art .sq-scarf-wash { fill: var(--sq-scarf); opacity: .5; }
.squirrel-art .sq-line, .squirrel-art .sq-fine, .squirrel-art .sq-mark,
.squirrel-art .sq-hatch, .squirrel-art .sq-texture, .squirrel-art .sq-ghost,
.squirrel-art .sq-whisker, .squirrel-art .sq-ground {
  fill: none; stroke: var(--sq-ink);
  stroke-linecap: round; stroke-linejoin: round;
}
.squirrel-art .sq-line { stroke-width: 1.25; }
.squirrel-art .sq-thin { stroke-width: 1.05; }
.squirrel-art .sq-fine { stroke-width: .9; }
.squirrel-art .sq-mark { stroke-width: 1.35; }
.squirrel-art .sq-faint { opacity: .4; }
.squirrel-art .sq-texture { stroke: var(--sq-tex); stroke-width: .55; opacity: var(--sq-tex-o); }
.squirrel-art .sq-hatch { stroke-width: .6; opacity: .22; }
.squirrel-art .sq-ghost { stroke-width: .8; opacity: .18; }
.squirrel-art .sq-whisker { stroke-width: .5; opacity: .4; }
.squirrel-art .sq-ground { stroke-width: .9; opacity: .25; }
.squirrel-art .sq-ink-fill { fill: var(--sq-ink); }
.squirrel-art .sq-glint { fill: #FFFFFF; }
.sq-nut-body { fill: var(--sq-nut); stroke: none; }
.sq-nut-cap { fill: var(--sq-nut-cap); stroke: none; }
.squirrel-art .sq-held-icon { color: var(--sq-ink); }

/* Rig: pivots for each moving part */
.sq-tail { transform-origin: 59px 82px; }
.sq-head { transform-origin: 77px 45px; }
.sq-hind-near { transform-origin: 75px 96.5px; }
.sq-hind-far { transform-origin: 89.6px 87.6px; }
.sq-arm { transform-origin: 91px 52px; }
.sq-eye { transform-origin: 84px 36px; }
.sq-scarf-end { transform-origin: 68px 48px; }

/* Poses. It sits with both front paws up at its chest; it hops on its hind feet
   when it runs; reaching, one paw goes up to the button; carrying, the acorn sits
   between its paws. */
.sq-reach, .sq-carried-acorn, .sq-scarf, .sq-exclaim, .sq-zzz, .sq-yawn { opacity: 0; }
.squirrel-actor.is-winter .sq-scarf { opacity: 1; }
.squirrel-actor.is-carrying .sq-carried-acorn { opacity: 1; }
.squirrel-actor.is-reaching .sq-reach { opacity: 1; }
.squirrel-actor.is-reaching .sq-arm { opacity: 0; }
.squirrel-actor.is-reaching .sq-head { transform: rotate(-20deg); }
.squirrel-actor.is-peeking .sq-ground { opacity: 0; }

.squirrel-actor.is-running .sq-hind-near,
.squirrel-actor.is-running .sq-front-far { animation: squirrel-stride .24s ease-in-out infinite; }
.squirrel-actor.is-running .sq-front-near,
.squirrel-actor.is-running .sq-hind-far { animation: squirrel-stride .24s ease-in-out -.12s infinite; }
.squirrel-actor.is-running .sq-tail { animation: squirrel-tail .46s ease-in-out infinite; }
.squirrel-actor.is-running .sq-scarf-end { animation: squirrel-tail .3s ease-in-out infinite; }
.squirrel-actor.is-sniffing .sq-head { animation: squirrel-sniff .38s ease-in-out infinite; }
.squirrel-actor.is-sniffing .sq-tail { animation: squirrel-tail .76s ease-in-out infinite; }
.squirrel-actor.is-sniffing .sq-eye { animation: squirrel-blink .75s ease-in-out; }

/* Easter egg poses: startled, hurrying, yawning */
.squirrel-actor.is-startled .sq-exclaim { opacity: 1; animation: squirrel-pop .28s ease-out; transform-origin: 103px 2px; }
.squirrel-actor.is-startled .squirrel-art { animation: squirrel-jolt .3s ease-out; }
.squirrel-actor.is-hurrying.is-running .sq-hind-near,
.squirrel-actor.is-hurrying.is-running .sq-front-far { animation-duration: .14s; }
.squirrel-actor.is-hurrying.is-running .sq-front-near,
.squirrel-actor.is-hurrying.is-running .sq-hind-far { animation-duration: .14s; animation-delay: -.07s; }
.squirrel-actor.is-yawning .sq-head { transform: rotate(-7deg); }
.squirrel-actor.is-yawning .sq-eye { transform: scaleY(.25); }
.squirrel-actor.is-yawning .sq-mouth { opacity: 0; }
.squirrel-actor.is-yawning .sq-yawn { opacity: 1; }
.squirrel-actor.is-yawning .sq-zzz { opacity: 1; animation: squirrel-zzz .95s ease-out both; }

/* Hovered: it stops and looks up, the cue that it can be clicked. */
.squirrel-actor.is-frozen * { animation-play-state: paused !important; }
.squirrel-actor.is-noticing .sq-head { transform: rotate(-9deg); transition: transform .15s ease-out; }
/* Presenting a hint: sitting up, both paws around the acorn. */
.squirrel-actor.is-presenting .sq-reach,
.squirrel-actor.is-presenting .sq-carried-acorn { opacity: 0 !important; }
.squirrel-actor.is-presenting .sq-arm { opacity: 1 !important; }
.squirrel-actor.is-presenting .sq-hind-near,
.squirrel-actor.is-presenting .sq-hind-far,
.squirrel-actor.is-presenting .sq-tail { animation: none !important; transform: none; }
.squirrel-actor.is-presenting .sq-head { animation: none !important; transform: rotate(-8deg); }

@keyframes squirrel-stride {
  0%, 100% { transform: rotate(-23deg); }
  50% { transform: rotate(25deg); }
}
@keyframes squirrel-tail {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(7deg); }
}
@keyframes squirrel-sniff {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-8deg) translateY(-1px); }
}
@keyframes squirrel-blink {
  0%, 40%, 60%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.12); }
}
@keyframes squirrel-pop {
  0% { transform: scale(.4); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes squirrel-jolt {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
}
@keyframes squirrel-zzz {
  0% { transform: translate(0, 4px); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(3px, -6px); opacity: .85; }
}
.squirrel-transfer {
  position: absolute; top: 0; left: 0;
  width: 19px; height: 19px;
  will-change: transform;
}
.squirrel-transfer svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* The acorn fortune: the cap pops off and a paper slip unrolls with a hint. */
.sq-fortune-nut {
  position: absolute; width: 30px; height: 30px;
  color: var(--sq-ink);
  transform: scale(.4); opacity: 0;
  transition: transform .18s ease-in, opacity .15s ease-in;
}
.sq-fortune-nut.is-open {
  transform: scale(1); opacity: 1;
  transition: transform .26s cubic-bezier(.3, 1.5, .5, 1), opacity .12s ease-out;
}
.sq-fortune-nut svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sq-fortune-nut .nut-cap { transform-origin: 50% 40%; transition: transform .2s ease-in; }
.sq-fortune-nut.is-open .nut-cap {
  transform: translate(var(--cap-x, 10px), -13px) rotate(var(--cap-r, 42deg));
  transition: transform .32s cubic-bezier(.3, 1.6, .5, 1) .16s;
}
.sq-fortune-slip {
  position: absolute; left: 0; top: 0; box-sizing: border-box;
  width: min(260px, calc(100vw - 24px));
  padding: 12px 15px 10px;
  background: var(--paper); color: var(--body);
  border: 1px solid var(--line-strong); border-radius: 3px;
  box-shadow: 0 12px 26px -18px var(--shadow);
  font: 15px/1.45 var(--serif);
  transform: rotate(-1.4deg);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .22s ease-in;
}
.sq-fortune-slip[data-side="below"] { clip-path: inset(0 0 100% 0); transform: rotate(1.2deg); }
.sq-fortune-slip.is-open {
  clip-path: inset(0 0 0 0);
  transition: clip-path .46s cubic-bezier(.2, .8, .2, 1) .34s;
}
.sq-fortune-text { margin: 0 0 4px; color: var(--ink); }
.sq-fortune-note { margin: 0 0 6px; font: italic 13px/1.4 var(--serif); color: var(--muted); }
.sq-fortune-check {
  display: inline-block; width: 14px; height: 14px; margin: 0 5px 0 0; vertical-align: -1px;
  fill: none; stroke: var(--leaf); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.sq-fortune-foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0 -9px -6px; }
.sq-fortune-count { margin: 0 auto; font: 12px/1.3 var(--sans); color: var(--muted); }
.sq-fortune-turn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sq-fortune-turn[hidden] { display: inline-flex !important; visibility: hidden; }
.sq-fortune-turn:hover { color: var(--cap); background: var(--husk); }
.sq-fortune-turn:focus-visible { outline: 2px solid var(--acorn); outline-offset: 1px; }
.sq-fortune-turn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sq-fortune-slip kbd {
  display: inline-block; min-width: 1.4em; text-align: center;
  font: 600 12px/1.5 var(--sans); color: var(--ink);
  background: var(--husk); border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; margin: 0 1px; vertical-align: 1px;
}

/* First-visit nudge: the squirrel hangs upside down from under the menu, right
   below the acorn, and the acorn wobbles. Shown once per browser. */
.sq-hang { position: fixed; z-index: 49; overflow: hidden; pointer-events: none; }
.sq-hang-body {
  position: absolute; inset: 0; transform-origin: 50% 0;
  animation: sq-hang 2.9s cubic-bezier(.3, .7, .3, 1) both;
}
.sq-hang-body svg { display: block; width: 100%; height: 100%; overflow: visible; transform: scaleY(-1); }
.sq-hang .sq-eye { animation: squirrel-blink .5s ease-in-out 1.35s; }
/* only the head peeks out: the tail and the ground stay out of the picture */
.sq-hang .sq-tail, .sq-hang .sq-ground { display: none; }
@keyframes sq-hang {
  0% { transform: translateY(-100%); }
  17% { transform: translateY(-46%) rotate(0); }
  29% { transform: translateY(-50%) rotate(5deg); }
  45% { transform: translateY(-48%) rotate(-4deg); }
  60% { transform: translateY(-49%) rotate(2deg); }
  80% { transform: translateY(-49%) rotate(0); }
  100% { transform: translateY(-100%); }
}
.acorn-toggle.is-nudged .acorn-icon { animation: acorn-nudge .85s ease-in-out; transform-origin: 50% 80%; }
@keyframes acorn-nudge {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(-15deg); }
  42% { transform: rotate(12deg); }
  64% { transform: rotate(-7deg); }
  82% { transform: rotate(3deg); }
}

/* The oak's reward: the proverb on a little slip, once, when it is fully grown. */
.oak-proverb {
  position: fixed; z-index: 60; pointer-events: none;
  padding: 7px 13px; white-space: nowrap;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 3px;
  box-shadow: 0 10px 22px -16px var(--shadow);
  font: italic 15px/1.35 var(--serif);
  transform: rotate(-1.2deg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .22s ease-in;
}
.oak-proverb.is-open { clip-path: inset(0 0 0 0); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1); }

/* The acorn shower */
.sq-falling { position: absolute; left: 0; top: 0; color: var(--sq-ink); will-change: transform; }
.sq-falling svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform .22s ease-in, opacity .22s ease-in; }
.sq-falling.is-gathered svg { transform: translateY(-10px) scale(.2); opacity: 0; }

/* Easter egg: the heading, denoised. Masks are drawn as pencil hatching. */
.sq-tok { transition: color .6s ease; }
.sq-tok.is-masked {
  color: transparent;
  background: repeating-linear-gradient(-55deg, var(--muted) 0 1px, transparent 1px 4px)
    center 62% / 74% .58em no-repeat;
}
.sq-tok.is-fresh { color: var(--acorn); transition: none; }

/* Easter egg: an oak that grows in the menu, next to About, after round trips. */
.oak {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 20px; width: 20px; height: 20px;
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.oak:focus-visible { outline: 2px solid var(--acorn); outline-offset: 2px; border-radius: 3px; }
.oak svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 88%; }
.oak:hover { color: var(--cap); }
.oak .oak-leaf { fill: var(--leaf); fill-opacity: .28; stroke: var(--leaf); }
.oak .oak-ground { opacity: .5; }
.oak.is-growing svg { animation: oak-grow 1.2s cubic-bezier(.2, .8, .25, 1) both; }
.oak.is-wiggling svg { animation: oak-wiggle .5s ease-in-out; }
.oak.is-wilting svg { animation: oak-wilt .9s ease-in forwards; }
@keyframes oak-wilt {
  0% { transform: rotate(0) scale(1); opacity: 1; }
  40% { transform: rotate(-14deg) scale(.9, .8); opacity: .8; }
  100% { transform: rotate(-20deg) scale(.2, 0); opacity: 0; }
}
@keyframes oak-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  60% { transform: rotate(6deg); }
}
@keyframes oak-grow {
  0% { transform: scale(.15, 0); opacity: 0; }
  55% { transform: scale(1.04, 1.08) rotate(-3deg); opacity: 1; }
  80% { transform: scale(1) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Keep the additional control on one row, including 320px-wide phones. */
.nav-links { flex-shrink: 0; }
.theme-toggle { flex-shrink: 0; }
@media (max-width: 420px) {
  .nav-inner { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: .84rem; }
  .mark img { width: 22px; height: 22px; }
  .acorn-toggle, .theme-toggle { width: 28px; flex-basis: 28px; margin-left: 0; }
}
/* The smallest phones, once an oak has grown in the menu: a little tighter. */
@media (max-width: 360px) {
  .nav-inner { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .nav-links { gap: 6px; }
  .nav-links a { font-size: .8rem; }
  .oak { flex-basis: 16px; width: 16px; height: 18px; }
  .acorn-toggle, .theme-toggle { width: 26px; flex-basis: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .acorn-toggle, .squirrel-stage * { transition: none !important; animation: none !important; }
  .acorn-toggle.just-returned .acorn-icon { animation: none; }
  .sq-tok, .oak svg, .sq-fortune-nut, .sq-fortune-nut .nut-cap, .sq-fortune-slip, .sq-falling svg, .oak-proverb {
    transition: none !important; animation: none !important;
  }
}