/* Flat theme — loaded after every other sheet (Base.astro), so it only re-skins.
   A near-white page, no shadows, no glass, no boxes around cards. What separates things is
   space and one flat pastel tile per category (--tile, set by tileStyle() in address.ts).
   The home keeps the clay village video as its one picture. */

:root {
  --f-page: #fbfaf7;
  --f-chip: #f1efe9;
  --f-ink: #1d1c1a;
  --f-ink-2: #55534e;
  --f-ink-3: #6e6b65;
  --f-line: #e8e5de;
  --f-accent: #2f5fd0;
  --tile-1: #efe9dd; /* sand */
  --tile-2: #dde8d5; /* sage */
  --tile-3: #d9e5ee; /* sky */
  --tile-4: #f2ddd3; /* clay */
  --tile-5: #e7e0f3; /* lilac */
  --tile-6: #f3e7c6; /* butter */

  /* the shared tokens, re-pointed */
  --c-text: var(--f-ink); --c-text-subtle: var(--f-ink-2); --c-text-subtlest: var(--f-ink-3);
  --c-link: var(--f-accent); --c-link-pressed: #244bb0;
  --c-surface: var(--f-page); --c-surface-sunken: var(--f-chip); --c-surface-raised: #fff;
  --c-surface-overlay: #fff; --c-surface-hover: var(--f-chip);
  --c-border: var(--f-line); --c-border-bold: #b9b5ad;
  --c-selected: #e6ecfb; --c-selected-text: #244bb0;
  --c-code-bg: var(--f-chip);
  --s-blue: var(--f-accent); --s-blue-bg: #e6ecfb;
  --s-row: var(--f-chip); --s-line: var(--f-line);
  --s-text: var(--f-ink); --s-sub: var(--f-ink-2); --s-faint: var(--f-ink-3);
  --color-white: #fff;
  --color-primary: var(--f-ink);
  --gradient-underline: var(--f-ink);
  --h-topbar: 76px;
  --w-page: 1236px; /* the centred pages' column (main is 1300 with 32px sides): the pill bar and the footer card line up with it */
}

body { background: var(--f-page); color: var(--f-ink); }
::selection { background: #dfe7fb; }

/* ── top bar: the same floating pill, flat ── */
.topbar {
  top: 12px; height: 56px; margin: 12px auto 8px; width: min(var(--w-page), calc(100% - 32px));
  padding: 0 10px 0 18px; border: 1px solid var(--f-line); border-radius: 999px;
  background: #fff; box-shadow: none;
}
.topbar .logo { align-items: center; }
.topbar .logo-img { width: auto; height: 40px; margin: -4px 0; filter: none; }
.topbar .logo-text { margin-bottom: 0; }
.topbar .logo-sub { font-size: .62rem; color: var(--f-ink-3); }
.topbar .logo-main { font-size: 1.05rem; }
.topbar .nav { gap: 4px; margin-left: var(--s-4); }
.topbar .nav > a, .topbar .nav > .topbar-dd > a {
  height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--f-ink-2);
}
.topbar .nav a::before { display: none; }
.topbar .nav > a:hover, .topbar .nav > .topbar-dd > a:hover { color: var(--f-ink); background: var(--f-chip); }
.topbar .nav > a.active, .topbar .nav > .topbar-dd > a.active { background: var(--f-ink); color: #fff; }
.topbar-search { height: 36px; border: 0; border-radius: 999px; background: var(--f-chip); }
.topbar-search:hover { background: #ebe8e1; }
.topbar-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--f-accent); }
.topbar-dd-menu, .search-drop { background: #fff; border: 1px solid var(--f-line); border-radius: 14px; box-shadow: none; }
.topbar-dd-menu a:hover { color: var(--f-ink); }
/* visitors: no chip — the week's line in the logo blue, today's and the total count stacked beside it.
   Its room is kept while the counter loads, so the search field doesn't jump when the numbers arrive. */
.topbar-visitors { gap: 9px; height: 36px; padding: 0 6px 0 4px; margin-right: 2px; background: none; border-radius: 0; }
@media (min-width: 1280px) { .topbar-visitors[hidden] { display: inline-flex; visibility: hidden; opacity: 0; } }
.topbar-visitors:not([hidden]) { opacity: 1; transition: opacity .3s ease; }
.topbar-visitors .visitor-sparkline { width: 56px; height: 22px; }
.topbar-visitors .sparkline-line { stroke: #4a76de; stroke-width: 1.6; }
.topbar-visitors .sparkline-area { fill: #4a76de; opacity: .1; }
.topbar-visitors .sparkline-dot { fill: #4a76de; }
.topbar-visitors .v-today, .topbar-visitors .v-total { display: flex; align-items: baseline; gap: 3px; min-width: 52px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.topbar-visitors .v-today b { font-size: 13px; font-weight: 700; color: var(--f-ink); }
.topbar-visitors .v-today i { font-size: 10.5px; font-weight: 500; color: var(--f-ink-3); }
.topbar-visitors .v-total { padding: 0; border: 0; font-size: 11px; font-weight: 600; color: var(--f-ink-3); }
.topbar-visitors .v-total::after { content: "전체"; font-size: 10.5px; font-weight: 500; }
.topbar-visitors .v-nums { display: flex; flex-direction: column; justify-content: center; gap: 1px; }

/* ── home: the village under the bar, fading into the page ── */
.hero { margin-top: calc(-1 * var(--h-topbar)); height: 100svh; min-height: 640px; max-height: 1100px; background: var(--f-page); }
.hero::after { display: none; }
.hero-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.hero-scene video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-pause {
  position: absolute; z-index: 2; top: calc(var(--h-topbar) + 12px); right: max(16px, calc((100% - var(--w-page)) / 2));
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .85); color: var(--f-ink-2); cursor: pointer;
}
.hero-pause:hover { background: #fff; color: var(--f-ink); }
.hero-pause svg { width: 16px; height: 16px; fill: currentColor; }
.hero-pause .i-play, .hero-pause.paused .i-pause { display: none; }
.hero-pause.paused .i-play { display: block; }
.hero-inner { color: var(--f-ink); padding-top: calc(var(--h-topbar) + 4vh); }
.hero-head { margin: 0; padding: 7vh 0 0; text-align: center; }
.hero-eyebrow { color: var(--f-ink-2); letter-spacing: .24em; }
.hero-title { font-size: clamp(40px, 4.6vw, 68px); font-weight: 600; letter-spacing: -.04em; color: var(--f-ink); text-shadow: none; }
.hero-sub { color: var(--f-ink-2); }
.hero-byline { padding: 8px 10px 8px 8px; background: #fff; border: 1px solid var(--f-line); box-shadow: none; backdrop-filter: none; }
.byline-avatar { box-shadow: none; }
.byline-who b { color: var(--f-ink); }
.byline-who span { color: var(--f-ink-2); }
.byline-sep { background: var(--f-line); }
.byline-btn { background: transparent; border: 0; color: var(--f-ink); box-shadow: none; }
.byline-btn:hover { background: var(--f-chip); }
.byline-btn.primary { background: var(--f-ink); color: #fff; }
.byline-btn.primary:hover { background: #3a3935; }
.byline-social a { color: var(--f-ink-2); background: transparent; }
.byline-social a:hover { background: var(--f-chip); color: var(--f-ink); }

.strip { background: transparent; color: var(--f-ink); }
.strip::before, .strip::after { display: none; }
.strip-inner { border-top: 1px solid var(--f-line); }
.strip-stat { border-right-color: var(--f-line); }
.strip-stat b, .strip-stat > div b { color: var(--f-ink); font-weight: 600; }
.strip-stat i, .strip-stat > div i { color: var(--f-ink-3); }
#category-pie path { stroke: var(--f-page); }
.strip-mini { background: #fff !important; color: var(--f-ink); border-color: var(--f-line) !important; box-shadow: none !important; }

/* ── series: flat category tiles ── */
.home-series-card, .home-series-card:hover { background: var(--tile, var(--f-chip)); border: 0; border-radius: 16px; box-shadow: none; }
.series-count, .series-count em { color: var(--f-ink-2); }
.series-share { background: rgba(0, 0, 0, .07); }
.series-icon { mix-blend-mode: multiply; }

/* ── tags: loose chips, no box around them ── */
.home-tags-cloud { background: transparent; border: 0; padding: 0; }
.cloud-tag, .home-tag, .meta-tag { background: var(--f-chip) !important; border-color: transparent !important; color: var(--f-ink-2) !important; }
.meta-tag.note-tag, .home-tag.note-tag { background: var(--f-ink) !important; color: #fff !important; }
.posts-header h2 svg { color: var(--f-ink-2); }

/* ── cards: no box; the category tile frames the picture ── */
.home-card, .home-card:hover { background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; overflow: visible; }
/* the picture fills its rounded box edge to edge; the category tile only shows when there is no picture */
.home-card-thumb { padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--tile, var(--f-chip));
  outline: 1px solid rgba(29, 28, 26, .13); outline-offset: -1px; transition: outline-color .15s ease; }
@media (hover: hover) { .home-card:hover .home-card-thumb { outline-color: rgba(29, 28, 26, .22); } }
.home-card-thumb img { border-radius: 0; transition: transform .3s cubic-bezier(.2, 0, 0, 1); }
.home-card-placeholder { background: transparent; }
.home-card-body { padding: 14px 2px 4px; }
.home-card-breadcrumb { color: var(--f-ink-3); }
@media (prefers-reduced-motion: reduce) { .home-card-thumb img { transition: none; } }

/* ── covers: a flat tile, dark text ── */
.page-cover, .page-cover[data-theme] { background: var(--tile-1); box-shadow: none; }
.page-cover .stars, .page-cover .firefly, .page-cover .haze { display: none; }
.page-cover .sky-object::before { display: none; }
.page-cover .sky-object img { filter: none; mix-blend-mode: multiply; }
.page-cover .sky-object.is-moon::after { background: var(--tile-6); box-shadow: none; }
.page-cover .breadcrumb, .page-cover .breadcrumb-sep { color: var(--f-ink-2); }
.page-cover .breadcrumb a:hover { color: var(--f-ink); }
.page-cover .page-title { color: var(--f-ink); text-shadow: none; }
.page-cover .page-meta, .page-cover .page-meta > span, .page-cover .page-meta .post-date,
.page-cover .page-meta .post-reading-time, .page-cover .page-meta .post-views { color: var(--f-ink-2); }
.page-cover .page-meta .separator { color: var(--f-ink-3); }
.page-cover .page-author { color: var(--f-ink); }

/* the category's clay picture on the right, its backdrop carried across the whole cover (coverArt() in address.ts) */
.page-cover.has-art { background: var(--art-bg); min-height: 248px; padding-right: min(36%, 330px); }
.page-cover.has-art::after {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: min(42%, 380px);
  background: var(--art) 50% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.page-cover.has-art .sky-object { display: none; }
.page-cover.has-art .breadcrumb { right: min(36%, 330px); }
.page-cover.has-art .page-meta, .page-cover.has-art .page-meta > span, .page-cover.has-art .page-meta .post-date,
.page-cover.has-art .page-meta .post-reading-time, .page-cover.has-art .page-meta .post-views,
.page-cover.has-art .breadcrumb, .page-cover.has-art .breadcrumb-sep { color: rgba(29, 28, 26, .72); }

/* covers that wrote their own white text: portfolio, hobby, 404 */
.pf-name, .pf-bio strong, .hobby-sky-inner h1 { color: var(--f-ink); }
.pf-eyebrow, .hobby-eyebrow { color: var(--f-ink-2); }
.pf-role, .pf-bio, .hobby-sub, .hobby-sky-inner { color: var(--f-ink-2); }
.pf-links a { background: #fff; border: 1px solid var(--f-line); color: var(--f-ink); }
.pf-links a:hover { background: var(--f-chip); }
.pf-links a:first-child { background: var(--f-ink); border-color: var(--f-ink); color: #fff; }
.hobby-sky { border-radius: 0; }
.hobby-switch { background: var(--f-chip); }
.nf-code { color: var(--f-ink) !important; text-shadow: none !important; }
/* the -.05em tracking also trails the last digit, which pushed the ink 4px right of centre; pull the box back half of it */
.nf-code { margin-left: -.05em; }
.nf-actions a.nf-primary { background: var(--f-ink); border-color: var(--f-ink); color: #fff; }
.nf-actions a.nf-primary:hover { background: #3a3935; border-color: #3a3935; }

/* ── reading ── */
.content pre, .content .shiki { background: #1f2124 !important; }


@media (max-width: 760px) {
  .topbar { width: calc(100% - 16px); padding-left: 10px; }
  .page-cover.has-art { padding-right: 38%; min-height: 220px; }
  .page-cover.has-art::after { width: 46%; }
  .page-cover.has-art .breadcrumb { right: 38%; }
  .hero { min-height: 560px; height: 88svh; }
}
.page-cover .sky-object.is-moon { display: none; }

/* the ring and the series bars: each category's tile, inked darker; tile 0 is everything else */
:root {
  --tile-ink-0: #d6d2ca;
  --tile-ink-1: #b9a27a; --tile-ink-2: #7f9c6c; --tile-ink-3: #6f97b4;
  --tile-ink-4: #c58b74; --tile-ink-5: #9a86c4; --tile-ink-6: #c9a64a;
}
#category-pie path { stroke: var(--f-page); }

/* tag chips are links: no underline, the chip darkens instead */
a.meta-tag, a.meta-tag:hover { text-decoration: none !important; }
a.meta-tag:hover { background: #e6e2da !important; color: var(--f-ink) !important; }

/* Korean titles break between words, never inside one */
.page-title, .hero-title, .home-card-title, .series-name { word-break: keep-all; overflow-wrap: anywhere; }

/* ── reading: a touch larger and looser, quieter tables, rounded media ── */
.content { font-size: 16px; line-height: 1.8; color: #2a2926; letter-spacing: -.003em; }
.content > * + * { margin-top: 18px; }
.content h2 { font-size: 26px; line-height: 1.34; font-weight: 700; letter-spacing: -.022em; margin-top: 64px; }
.content h3 { font-size: 20px; line-height: 1.42; font-weight: 700; letter-spacing: -.015em; margin-top: 44px; }
.content h4 { font-size: 17px; line-height: 1.5; margin-top: 32px; }
.content h2 + *, .content h3 + *, .content h4 + * { margin-top: 12px; }
.content :is(h2, h3, h4) + :is(h2, h3, h4) { margin-top: 24px; }
.content ul, .content ol { line-height: 1.8; }
.content li { line-height: 1.8; }
.content li + li { margin-top: 4px; }
.content li::marker { color: var(--f-ink-3); }
.content code { background: var(--f-chip); border-radius: 6px; padding: .12em .38em; }
.content pre, .content pre[class*="language-"] { border-radius: 12px; }
/* a code block only ever scrolls sideways: the hidden copy button (42px) stuck 2px out of a one-line block (48px),
   so it scrolled vertically and caught the wheel while you read down the page */
.content pre, .content pre[class*="language-"] { overflow-y: hidden; }
.code-copy-btn { top: 9px; right: 9px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; }
.code-copy-btn svg { width: 15px; height: 15px; }
/* tables are as wide as their content (up to the column), not always stretched to it, and sit in the middle */
.content table { width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
.content img { border-radius: 10px; }
.content table img { border-radius: 4px; }
.content table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--f-line); border-radius: 12px; overflow: hidden; font-size: 14.5px; line-height: 1.45; }
.content th, .content td { border: 0; border-bottom: 1px solid var(--f-line); padding: 6px 13px; }
.content tr:last-child > td, .content tr:last-child > th { border-bottom: 0; }
.content th { background: var(--f-chip); color: var(--f-ink); font-weight: 600; }
.content td { background: #fff; }
.content td + td, .content th + th, .content td + th, .content th + td { border-left: 1px solid var(--f-line); }
.content blockquote { border-left: 3px solid var(--f-ink); background: transparent; color: var(--f-ink-2); padding: 2px 0 2px 18px; }
.content hr { border: 0; border-top: 1px solid var(--f-line); margin: 48px 0; }

/* series tiles carry their category's clay picture on the right, like the covers */
.home-series-card.has-art { background: var(--art-bg); min-height: 92px; padding-right: 40%; isolation: isolate; }
.home-series-card.has-art::after {
  content: ''; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 52%;
  background: var(--art) 50% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%);
  transition: transform .4s cubic-bezier(.2, 0, 0, 1);
}
.home-series-card.has-art .series-icon { display: none; }
.home-series-card.has-art .series-share { background: rgba(0, 0, 0, .1); }
.home-series-card.has-art .series-count, .home-series-card.has-art .series-count em { color: rgba(29, 28, 26, .72); }
@media (hover: hover) { .home-series-card.has-art:hover::after { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .home-series-card.has-art::after { transition: none; } }
.home-series-card.has-art .series-name { white-space: normal; text-overflow: clip; overflow: visible; line-height: 1.3; }
/* a cover with no picture (All Posts) is no box at all: the title sits on the page */
.page-cover.list-cover:not(.has-art) { min-height: 0; background: transparent; padding: 28px 0 8px; border-radius: 0; }
.page-cover.list-cover:not(.has-art) .breadcrumb { position: static; margin-bottom: 10px; }
.page-cover.list-cover:not(.has-art) .page-title { font-size: 40px; letter-spacing: -.03em; }
.page-cover.list-cover:not(.has-art) .sky-object { display: none; }

/* the five readings stay on one row down to phone width (they wrapped 3 + 2 at 800px) */
@media (min-width: 561px) and (max-width: 1100px) {
  .strip-inner { grid-template-columns: repeat(5, 1fr); row-gap: 0; }
  .strip-stat:nth-child(n) { border-left: 1px solid var(--f-line); }
  .strip-stat:first-child { border-left: 0; }
  .strip-today { grid-column: auto; }
  .strip-stat b, .strip-stat > div b { font-size: 26px; }
  .strip-stat.has-ring { gap: 8px; }
  #category-pie { width: 34px; height: 34px; }
}
.strip-stat b, .strip-stat > div b, .strip-stat i { text-shadow: none !important; filter: none !important; }

/* the pinned readings: a small pill under the bar, the same flat white as the bar itself */
.strip-mini {
  left: 50%; right: auto; top: calc(var(--h-topbar) + 4px); border-radius: 999px;
  background: #fff !important; border: 1px solid var(--f-line) !important; backdrop-filter: none;
  transform: translate(-50%, -8px); color: var(--f-ink);
}
.strip-mini.on { transform: translate(-50%, 0); }
.strip-mini-inner { height: 40px; padding: 0 22px; gap: 22px; max-width: none; }
.strip-mini-inner b { color: var(--f-ink); font-weight: 700; }
.strip-mini-inner i { color: var(--f-ink-3); }

/* About, Contact, Privacy: the title sits on the content's left edge, big and tight, like the other page heads */
.static-page { padding-top: 48px; }
.static-title { text-align: left; font-size: 40px; letter-spacing: -.03em; color: var(--f-ink); margin-bottom: 8px; }
.static-date { text-align: left; color: var(--f-ink-3); }
.static-section { border-bottom-color: var(--f-line); }

/* ── end of a post: flat prev/next tiles, section heads like the home's, roomier related cards ── */
.post-navigation { margin: 64px 0 8px; padding-top: 32px; border-top: 1px solid var(--f-line); }
.nav-prev a, .nav-next a { border: 0; background: var(--f-chip); padding: 18px 20px; transition: background .15s ease; }
.nav-prev a:hover, .nav-next a:hover { background: #e9e6df; border: 0; box-shadow: none; transform: none; }
.nav-label { color: var(--f-ink-3); }
.nav-title { color: var(--f-ink); font-size: 15px; }
.nav-prev a:hover .nav-title, .nav-next a:hover .nav-title { color: var(--f-ink); }
.related-posts-section, .similar-posts-section { margin-top: 56px; }
.related-posts-section h2, .similar-posts-section h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--f-ink); margin-bottom: 18px; }
:is(.related-posts-section, .similar-posts-section) .home-cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }

/* phones: the picture moves to the cover's top-right corner and the title takes the full width under it */
@media (max-width: 560px) {
  .page-cover.has-art { padding-right: var(--s-5, 20px); padding-top: 150px; min-height: 0; }
  .page-cover.has-art::after { width: 62%; bottom: auto; height: 150px; background-size: cover; background-position: 50% 58%;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
  .page-cover.has-art .breadcrumb { right: 50%; white-space: normal; }
  .page-cover.has-art .page-title { font-size: 26px; }
}

/* ── the web editor on the flat theme ── */
/* publish: the same ink pill as the active nav item, not a saturated blue block */
.ed-btn.primary, .pm-btn.primary { background: var(--f-ink) !important; border-color: var(--f-ink) !important; color: #fff !important; border-radius: 999px; }
.ed-btn.primary:hover, .pm-btn.primary:hover { background: #3a3935 !important; border-color: #3a3935 !important; }
/* cover buttons and the title field were drawn for the dark night sky; on a light cover they go ink-on-white */
.page-cover .cover-btn { background: rgba(255, 255, 255, .78); border-color: rgba(29, 28, 26, .1); color: var(--f-ink); backdrop-filter: none; }
.page-cover .cover-btn:hover { background: #fff; }
.page-cover .cover-btn.danger:hover { color: #c0392b; }
.page-cover .page-title-input { color: var(--f-ink); border-bottom-color: rgba(29, 28, 26, .18); }
.page-cover .page-title-input::placeholder { color: rgba(29, 28, 26, .4); }
.page-cover .page-title-input:focus { border-bottom-color: rgba(29, 28, 26, .5); }
body.editing .page-cover .page-emoji.empty { color: rgba(29, 28, 26, .45); }
body.editing .page-cover .page-emoji:hover { background: rgba(29, 28, 26, .06); }

/* list sort: the chosen order in ink, like every other selected pill */
.list-sort a.active { color: var(--f-ink); box-shadow: none; font-weight: 700; }

/* portfolio, hobby and 404 heads: no band of colour either — the page tone runs through, a hairline closes the head */
.page-cover:is(.pf-sky, .hobby-sky, .nf-sky), .page-cover:is(.pf-sky, .hobby-sky, .nf-sky)[data-theme] { background: transparent; }
.page-cover:is(.pf-sky, .hobby-sky) { border-bottom: 1px solid var(--f-line); }
.page-cover:is(.pf-sky, .hobby-sky, .nf-sky) .sky-object { display: none; }
.pf-rail { background: rgba(251, 250, 247, .94) !important; }

/* contents tree: the open page is marked like a Notion sidebar — a warm chip and ink, not a blue wash */
.tree { background: var(--f-page); }
.tree-row:hover { background: rgba(29, 28, 26, .04); }
.tree-row:active { background: rgba(29, 28, 26, .07); }
.tree-row:has(.current) { background: var(--f-chip); color: var(--f-ink); }
.tree-row:has(.current) .tree-toggle, .tree-row:has(.current) svg.tree-icon, .tree-row:hover svg.tree-icon { color: var(--f-ink); }
/* .content p { margin: 0 } outranked the block rhythm, so a paragraph after a paragraph, table or image sat flush */
.content > * + p { margin-top: 18px; }
.content > :is(h2, h3, h4) + p { margin-top: 12px; }

/* ── hover: the same warm chip that every other hover on the site uses, laid behind the whole card ── */
.home-card { position: relative; isolation: isolate; }
.home-card::before {
  content: ''; position: absolute; z-index: -1; inset: -10px -10px -6px; border-radius: 22px;
  background: var(--f-chip); opacity: 0; transition: opacity .18s ease;
}
@media (hover: hover) { .home-card:hover::before { opacity: 1; } }
.home-card:focus-visible { outline: none; }
.home-card:focus-visible::before { opacity: 1; box-shadow: 0 0 0 2px var(--f-accent); }
.home-card:hover .home-card-title { text-decoration: none; }

/* contents tree: only as tall as it needs, so at the page end it doesn't get shoved up under the top bar */
@media (min-width: 1024px) {
  .tree { height: auto; max-height: calc(100vh - var(--h-topbar) - 16px); align-self: flex-start; }
}

/* back to top: a round button like the pause button and the pills */
.back-to-top { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--f-line); color: var(--f-ink-2); box-shadow: none; }
.back-to-top:hover { background: var(--f-chip); color: var(--f-ink); border-color: var(--f-line); }
.home-card:hover, .home-card:hover .home-card-thumb { box-shadow: none !important; transform: none !important; }

/* pages with the contents tree: a page-tone band behind the floating bar, so the tree and the article
   slide under it instead of showing around the pill (the home keeps its video under the bar) */
body:has(.tree)::before {
  content: ''; position: fixed; z-index: 49; top: 0; left: 0; right: 0; height: calc(var(--h-topbar) + 4px);
  background: linear-gradient(var(--f-page) 82%, rgba(251, 250, 247, 0)); pointer-events: none;
}

/* ── motion: it says where you went and what changed; everything stops under reduced motion ── */
/* moving between pages: the page cross-fades and rises a little while the pill bar stays put */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
/* the bar never crossfades (the active pill showed twice); barGlide starts the new page's bar at the old width */
::view-transition-group(topbar) { animation: none; }
::view-transition-old(topbar) { animation: none; opacity: 0; }
::view-transition-new(topbar) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
/* the old page is gone before the new one rises in: overlapping the two left a ghost of the old page */
::view-transition-old(root) { animation: vt-out .12s ease-in both; }
::view-transition-new(root) { animation: vt-in .28s cubic-bezier(.2, .8, .2, 1) .1s both; }
/* the contents tree stays put across pages: no crossfade of two scroll positions, it simply becomes the new one */
@media (min-width: 1024px) { .tree { view-transition-name: tree; } }
::view-transition-old(tree) { animation: none; opacity: 0; }
::view-transition-new(tree) { animation: none; }
::view-transition-new(tree):only-child { animation: vt-fade-in .3s ease both; }
::view-transition-group(tree) { animation: none; }
@keyframes vt-fade-in { from { opacity: 0; } }

/* a cover arrives: the clay picture settles in, then breathes slowly */
@keyframes art-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes art-breathe { 50% { transform: translateY(-5px); } }
.page-cover.has-art::after { animation: art-in .7s cubic-bezier(.2, .8, .2, 1) both, art-breathe 7s ease-in-out .7s infinite; }
@keyframes head-in { from { opacity: 0; transform: translateY(8px); } }
.page-cover .page-title, .page-cover .page-meta, .page-cover .breadcrumb { animation: head-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.page-cover .page-meta { animation-delay: .08s; }

/* cards: the chip fades in, the picture lifts a hair */
.home-card-thumb { transition: transform .25s cubic-bezier(.2, .8, .2, 1), outline-color .15s ease; }
@media (hover: hover) { .home-card:hover .home-card-thumb { transform: translateY(-3px) !important; } }
/* series tiles lift a little and their picture leans in */
.home-series-card.has-art { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .home-series-card.has-art:hover { transform: translateY(-3px); } }

/* pills and buttons give under the finger */
.topbar .nav > a, .byline-btn, .list-sort a, .meta-tag, .nav-prev a, .nav-next a, .back-to-top { transition: background .15s ease, color .15s ease, transform .12s ease; }
.topbar .nav > a:active, .byline-btn:active, .list-sort a:active, a.meta-tag:active, .nav-prev a:active, .nav-next a:active { transform: scale(.96); }

/* the contents tree: the open page's chip slides in rather than snapping */
.tree-row { transition: background .15s ease; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .page-cover.has-art::after, .page-cover .page-title, .page-cover .page-meta, .page-cover .breadcrumb { animation: none; }
  .home-card-thumb, .home-series-card.has-art { transition: none; }
  .home-card:hover .home-card-thumb, .home-series-card.has-art:hover { transform: none !important; }
}

/* ── top bar width follows each page's content: centred on the page column where the content is centred (home, portfolio),
   the full layout where the page is the three-column shell. The pill keeps round ends at any width. ── */
@media (min-width: 761px) { body:has(.tree) .topbar { width: calc(100% - 32px); } }
.topbar { transition: width .7s cubic-bezier(.22, 1, .36, 1); contain: layout style; }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }

/* ════════ detail pass (design/audit-2.md) ════════ */

/* ── one warm grey family underneath too: the older sheets' grey scale, tree and surface tokens re-pointed ── */
:root {
  --f-faint: #a29e96;   /* markers, dots and scrollbars only, never text */
  --f-chip-2: #e8e5de;  /* a chip under the pointer, or pressed */
  --color-gray-50: var(--f-page); --color-gray-100: var(--f-chip); --color-gray-200: var(--f-line);
  --color-gray-300: #e1ddd5; --color-gray-400: #d6d2ca; --color-gray-500: #b9b5ad;
  --color-gray-600: var(--f-ink-3); --color-gray-700: var(--f-ink-2); --color-gray-800: var(--f-ink-2); --color-gray-900: var(--f-ink);
  --color-bg-secondary: var(--f-chip); --color-border: #dcd8d0;
}
.tree { --t-bg: var(--f-page); --t-faint: var(--f-faint); --t-blue: var(--f-ink); --t-blue-bg: var(--f-chip); }
.tree-list::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb { background: #e1ddd5; border-color: var(--f-page); }
.tree-list:hover::-webkit-scrollbar-thumb { background: #cfcac1; }

/* ── the list's no-results view and an empty category: centred, quiet, a chip to clear ── */
.list-empty:not([hidden]), .empty-message {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 8px 0 0; padding: 56px 16px 48px;
  border: 0; border-radius: 0; background: transparent; text-align: center; font-style: normal; color: var(--f-ink-2); font-size: 14.5px;
}
.list-empty svg { width: 28px; height: 28px; margin-bottom: 6px; color: var(--f-faint); }
.list-empty p { margin: 0; }
.list-empty b { color: var(--f-ink); font-weight: 700; }
.list-empty a {
  display: inline-flex; align-items: center; height: 36px; margin-top: 10px; padding: 0 16px; border-radius: 999px;
  background: var(--f-chip); color: var(--f-ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, transform .12s ease;
}
.list-empty a:hover { background: var(--f-chip-2); }
.list-empty a:active { transform: scale(.96); }

/* ── tag cloud: chips never shrink inside their row (that clipped "Federated Lear"), and hover darkens the chip ── */
/* card tags are written by card-tags.js after load; the row keeps its height meanwhile so the cards below don't shift */
.home-card-tags:not([data-tags=""]) { min-height: 22px; }
.cloud-tag { flex: none; transition: opacity .32s ease, transform .32s cubic-bezier(.2, .8, .2, 1), width .34s cubic-bezier(.2, .8, .2, 1), background .15s ease, color .15s ease; }
/* a word swaps by sinking out and rising back in (the shared press rule above used to wipe these transitions, so swaps snapped) */
.cloud-tag.out { opacity: 0; transform: translateY(5px) scale(.96); }
.cloud-tag:hover { background: #e6e2da !important; color: var(--f-ink) !important; }

/* ── keyboard focus on a light cover: ink, not the white ring drawn for the night sky ── */
.page-cover :focus-visible, .list-cover :focus-visible { outline-color: var(--f-ink); }

/* ── the contents tree has no border: at 1023px and under it sat off-screen and its edge and shadow
   showed as a grey sliver down the left; on wide screens the line stopped where a short tree ended ── */
.tree { border-right: 0; box-shadow: none; }
/* the collapsed tree's button: a pill that says what it opens, like the top bar's own pills */
.tree-close { display: none; }
body.tree-collapsed .tree-expand, .tree-expand {
  gap: 7px; width: auto; height: 36px; padding: 0 14px 0 11px; border: 1px solid var(--f-line); border-radius: 999px;
  background: #fff; box-shadow: none; color: var(--f-ink); font: 600 13.5px/1 inherit; letter-spacing: -.01em;
}
.tree-expand i, .tree-expand svg { width: 16px; height: 16px; color: var(--f-ink-2); }
.tree-expand:hover { background: var(--f-chip); color: var(--f-ink); }
.tree-expand:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }

/* phones and tablets: the tree is a bottom sheet — full width, rows a thumb can hit, every branch shows its chevron */
@media (max-width: 1023px) {
  .tree-expand { top: auto; bottom: 16px; left: 16px; height: 44px; padding: 0 16px 0 13px; font-size: 14px; }
  body.tree-open .tree-expand { opacity: 0; pointer-events: none; }
  .tree {
    top: auto; bottom: 0; left: 0; right: 0; width: 100% !important; height: min(80dvh, 720px); max-height: none;
    padding: 22px 12px calc(12px + env(safe-area-inset-bottom)); border: 0; border-radius: 22px 22px 0 0; background: #fff;
    box-shadow: 0 -8px 40px rgba(29, 28, 26, .14); transform: translateY(104%);
    transition: transform .36s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .36s; visibility: hidden;
  }
  body.tree-open .tree { transform: none; visibility: visible; transition: transform .36s cubic-bezier(.22, 1, .36, 1), visibility 0s; }
  .tree::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #dcd8cf; }
  .tree-backdrop { display: block !important; position: fixed; inset: 0; z-index: 44; background: rgba(29, 28, 26, .32); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  body.tree-open .tree-backdrop { opacity: 1; pointer-events: auto; }
  body.tree-open { overflow: hidden; }
  .tree-head { font-size: 15px; }
  .tree-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; border: 0; border-radius: 50%; background: var(--f-chip); color: var(--f-ink); }
  .tree-close svg { width: 18px; height: 18px; }
  .tree-filter { height: 44px; }
  .tree-row { height: 44px; font-size: 15px; border-radius: 10px; }
  .tree-toggle { width: 36px; height: 36px; }
  .tree-toggle svg { opacity: 1 !important; width: 17px; height: 17px; }
  .tree-toggle::before { opacity: 0 !important; }
  .tree-splitter { display: none; }
}

/* ── where you are: ink and the warm chip everywhere (the tree already reads this way); blue is left for links and focus ── */
.pager-num.on { background: var(--f-ink); color: #fff; }
.pager-nav:hover, .pager-num:not(.on):hover { background: var(--f-chip); color: var(--f-ink); }
.pager-count, .pager-gap { color: var(--f-ink-3); }
.toc-rail { color: var(--f-ink-2); }
.toc a { color: var(--f-ink-2); }
.toc ul ul a, .toc a.passed { color: var(--f-ink-3); }
.toc a:hover { background: var(--f-chip); color: var(--f-ink); }
.toc a.active, .toc ul ul a.active { color: var(--f-ink); font-weight: 700; }
.toc > div > ul::before { background: var(--f-line); }
.toc > div > ul > li > a::before { box-shadow: inset 0 0 0 2px #d6d2ca; }
.toc > div > ul > li > a.passed::before { background: #cfcac1; box-shadow: inset 0 0 0 2px #cfcac1; }
.toc > div > ul > li > a.active::before { background: var(--f-ink); box-shadow: inset 0 0 0 2px var(--f-ink), 0 0 0 3px var(--f-chip); }
.toc-pct, .toc-pct.on { color: var(--f-ink-3); }
.toc-top { color: var(--f-ink-3); }
.toc-top:hover { background: var(--f-chip); color: var(--f-ink); }
.topbar .nav .hobby-menu { box-shadow: none; }
.topbar .nav .hobby-menu a { color: var(--f-ink); }
.topbar .nav .hobby-menu a:hover { background: var(--f-chip); }
.topbar .nav .hobby-menu svg { background: var(--f-chip); color: var(--f-ink-2); }
.topbar .nav .hobby-menu small { color: var(--f-ink-3); }
.topbar .nav .hobby-menu a.on, .topbar .nav .hobby-menu a.on svg { color: var(--f-ink); }
.topbar .nav .hobby-menu a.on svg { background: var(--f-chip-2); }
.topbar-menu .topbar-dd-menu a.on { background: var(--f-chip); color: var(--f-ink); font-weight: 600; }
.home-card:hover .home-card-title { color: var(--f-ink); }
.home-card-breadcrumb { color: var(--f-ink-3); }
.home-card-breadcrumb:hover { color: var(--f-ink); }
.breadcrumb a:hover { color: var(--f-ink); text-underline-offset: 3px; }
.posts-header h2, .cat-block .posts-header h2 { color: var(--f-ink); }
.posts-header h2 svg { color: var(--f-ink-3); }
.posts-header .view-all, .cat-block .posts-header .view-all { color: var(--f-ink-3); }
.posts-header .view-all:hover, .cat-block .posts-header .view-all:hover { color: var(--f-ink); }
.cat-sub-head { color: var(--f-ink-2); }
.cat-sub-head:hover { background: var(--f-chip); color: var(--f-ink); }
.cat-sub-head svg, .cat-block .posts-header h2 em { color: var(--f-ink-3); }
.series-name { color: var(--f-ink); }
/* today's change was a pale green meant for the old night strip: on the page it vanished and made a second accent */
.strip-today b em.up, .strip-today b em.down { color: var(--f-ink-3); }

/* ── the list's own search field: a chip like the bar's search and the tree's filter, not a bordered box ── */
.list-search { border: 0; background: var(--f-chip); border-radius: 999px; color: var(--f-ink-3); transition: background .15s ease, box-shadow .15s ease; }
.list-search:hover { background: #ebe8e1; }
.list-search:focus-within { background: #fff; box-shadow: 0 0 0 2px var(--f-accent); }

/* ── portfolio: the CV in the warm greys, the rail marked like the tree, the paper kinds in the category inks ── */
.pf-rail a { color: var(--f-ink-3); }
.pf-rail a:hover { background: var(--f-chip); color: var(--f-ink); }
.pf-rail a.on { background: var(--f-chip); color: var(--f-ink); }
.portfolio .section h2 { color: var(--f-ink); border-bottom-color: var(--f-ink); }
.doc-main h3, .doc-sub strong, .doc-meta b, .doc-body h4, .doc-dl dt { color: var(--f-ink); }
.doc-sub, .doc-desc, .doc-body ul, .doc-dl-text ul, .project-category-title { color: var(--f-ink-2); }
.doc-meta, .doc-date, .doc-kind, .doc-dl dt small { color: var(--f-ink-3); }
.doc-body li::marker, .doc-dl-text li::marker { color: var(--f-faint); }
.doc-row, .doc-dl dt, .doc-dl dd { border-bottom-color: var(--f-line); }
.doc-logo, .doc-thumb { border-color: var(--f-line); }
.doc-dl dd span { background: var(--f-chip); color: var(--f-ink-2); }
.doc-link { color: var(--f-accent); }
.doc-link:hover { color: #244bb0; }
.doc-kind .k-journal { background: var(--f-accent); }
.doc-kind .k-conf { background: var(--tile-ink-2); }
.doc-kind .k-domestic { background: var(--tile-ink-6); }
.doc-kind em { background: var(--f-chip); color: var(--f-ink); }
@media (max-width: 960px) {
  /* the folded rail runs edge to edge, without blur; a page-tone band (a solid offset, nothing you see as a shadow)
     covers the gap up to the floating bar so the CV no longer shows through between them */
  .pf-rail {
    backdrop-filter: none; border-bottom-color: var(--f-line);
    justify-self: start; box-sizing: border-box; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: 0;
    padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%);
    background: var(--f-page) !important; box-shadow: 0 -50px 0 30px var(--f-page);
  }
}

/* ── About, Contact, Privacy: warm chips instead of cool grey boxes, links that look like links ── */
.static-section h2 { color: var(--f-ink); }
.static-section p, .static-section ul { color: var(--f-ink-2); }
.static-section p a { color: var(--f-accent); text-decoration: underline; text-decoration-color: rgba(47, 95, 208, .35); text-underline-offset: 3px; }
/* a list made of links (the topics) stays ink with a faint underline, or the page turns blue */
.static-section li a { color: inherit; text-decoration: underline; text-decoration-color: #d6d2ca; text-underline-offset: 3px; }
.static-section p a:hover, .static-section li a:hover { text-decoration-color: currentColor; }
.static-section li a:hover { color: var(--f-ink); }
.profile-card, .contact-item { background: var(--f-chip); border-radius: 14px; }
.profile-info h3 { color: var(--f-ink); }
.profile-info p { color: var(--f-ink-2); }
.contact-item svg { color: var(--f-ink-2); }
.contact-item a { color: var(--f-ink); font-weight: 500; }
.contact-item a:hover { color: var(--f-accent); }
.topic-list li strong { color: var(--f-ink); }

/* ── tag pages: the path sits on the same left edge as the title ── */
.tag-page-eyebrow { text-align: left; color: var(--f-ink-3); }
.tag-page-eyebrow a { text-decoration: none; }
.tag-page-eyebrow a:hover { color: var(--f-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── 404: the number closer to its sentence, the second button a chip ── */
.page-cover.nf-sky { padding: clamp(40px, 7vw, 88px) 32px 0; }
.nf { padding-top: 28px; }
.nf h1 { color: var(--f-ink); }
.nf-path { color: var(--f-ink-2); }
.nf-path code { background: var(--f-chip); color: var(--f-ink-2); }
.nf-actions a { border: 0; background: var(--f-chip); color: var(--f-ink); border-radius: 999px; transition: background .15s ease, transform .12s ease; }
.nf-actions a:hover { background: var(--f-chip-2); }
.nf-actions a:active { transform: scale(.96); }

/* ── hobby: a flat switch, album covers framed like the post cards, warm greys ── */
.hobby-switch { border-radius: 999px; }
.hobby-switch a { color: var(--f-ink-3); border-radius: 999px; }
.hobby-switch a:hover { color: var(--f-ink); }
.hobby-switch a.on { background: #fff; color: var(--f-ink); box-shadow: none; }
.album-cover { border: 0; background: var(--f-chip); outline: 1px solid rgba(0, 0, 0, .06); outline-offset: -1px; }
.album b { color: var(--f-ink); }
.album time { color: var(--f-ink-3); }
.hobby-empty { color: var(--f-ink-3); }
.hobby-empty svg { color: var(--f-faint); }
.hobby-empty b { color: var(--f-ink); }

/* ── a parent category's subcategory tiles: flat warm chips like the rest, not white gradient boxes with a ghost
   picture, a wine-red hover border and a shadow; set apart from the cards above by the list's usual 40px ── */
.top-categories { margin-top: 40px; gap: 12px; }
.top-category-card { background: var(--f-chip); border: 0; border-radius: 16px; transition: background .15s ease, transform .12s ease; }
.top-category-card:hover { background: var(--f-chip-2); border: 0; box-shadow: none; }
.top-category-card:active { transform: scale(.98); }
.top-category-bg-img { display: none; }
.top-category-icon { mix-blend-mode: multiply; }
.top-category-name { display: block; line-height: 1.35; color: var(--f-ink); text-wrap: balance; }
.top-category-count { margin-left: 4px; color: var(--f-ink-3); font-variant-numeric: tabular-nums; }
.top-category-desc { color: var(--f-ink-2); }

/* ── labels: two kinds, each drawn one way. Eyebrows and readings (SUNHONG'S, PORTFOLIO, HOBBY, POSTS…) are small tracked
   capitals; panel heads (Contents, 목차) are plain sentence-case words, since one of them is Korean and caps say nothing there ── */
.hero-eyebrow, .pf-eyebrow, .hobby-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--f-ink-2); }
.strip-stat i, .strip-stat > div i, .strip-mini-inner i { font-size: 10.5px; font-weight: 600; letter-spacing: .14em; color: var(--f-ink-3); }
.tree-head, .toc-head span:first-child { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--f-ink-2); }
.nav-label { color: var(--f-ink-3); letter-spacing: .02em; }
.strip-today i { letter-spacing: 0; }

/* ── one column edge: the strip's hairline spans the content, not the content plus its 32px sides; under 900px the
   centred pages keep 16px sides like the bar, and the static pages add none of their own on a phone ── */
.strip-inner { border-top: 0; background: linear-gradient(var(--f-line), var(--f-line)) 50% 0 / calc(100% - 2 * var(--obs-gutter)) 1px no-repeat; }
@media (max-width: 900px) { main:not(:has(.shell)) { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 760px) { .static-page { padding-left: 0; padding-right: 0; } }

/* ── numbers line up: dates, counts and views in tabular figures ── */
.page-meta, .list-count, .static-date, .tree-count, .series-count, .strip-mini-inner b, .home-card-footer, .doc-date, .hobby-sub { font-variant-numeric: tabular-nums; }

/* ── line breaks: headings balance, paragraphs avoid a lone last word ── */
.static-title, .static-section h2, .posts-header h2, .nf h1, .content h2, .content h3, .content h4, .portfolio .section h2, .hobby-sky-inner h1 { text-wrap: balance; }
.content p, .content li, .home-card-summary, .static-section p, .pf-bio, .doc-desc, .nf-path, .hero-sub { text-wrap: pretty; }
.home-card-title { word-break: keep-all; }

/* ── section heads: the View All link centred on its heading (baseline put it 4px under the icon line) ── */
.posts-header, .cat-block .posts-header { align-items: center; }

/* ── the contents tree's filter and rows start on the pill bar's left edge (16px), not 12 and 8 ── */
@media (min-width: 1024px) {
  .tree-filter { margin-left: 16px; margin-right: 16px; }
  .tree-list { padding-left: 16px; padding-right: 12px; }
}

/* ── skip link: hidden until Tab reaches it, then an ink pill over the bar ── */
.skip-link {
  position: fixed; z-index: 70; top: 12px; left: 16px; padding: 10px 16px; border-radius: 999px;
  background: var(--f-ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(calc(-100% - 16px)); transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.skip-link:focus-visible { transform: none; outline-offset: 3px; }
#main:focus, #content:focus { outline: none; }

/* ── pressed: every pill and chip gives a little under the finger, the same .96 as the nav ── */
.pager-num, .pager-nav, .cat-sub-head, .pf-rail a, .hobby-switch a, .pf-links a, .tree-expand, .topbar-btn, .byline-social a, .toc-top { transition: background .15s ease, color .15s ease, transform .12s ease; }
.pager-num:active, .pager-nav:active, .cat-sub-head:active, .pf-rail a:active, .hobby-switch a:active, .pf-links a:active, a.cloud-tag:active,
.tree-expand:active, .topbar-btn:active, .byline-social a:active, .toc-top:active { transform: scale(.96); }
.toc a:active { background: var(--f-chip-2); }

/* ── reduced motion: anchor and back-to-top jumps go straight there ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link, .list-empty a, .nf-actions a { transition: none; }
}

/* ── touch: anything you tap is at least 40px tall; chips stay chips but grow to 32 ── */
@media (pointer: coarse) {
  .topbar-btn { width: 40px; height: 40px; }
  .topbar-search { height: 40px; }
  .byline-btn { height: 40px; }
  .byline-social a, .hero-pause { width: 40px; height: 40px; }
  .pager-num, .pager-nav, .cat-sub-head, .nf-actions a, .pf-links a { min-height: 40px; }
  .pager-num, .pager-nav { min-width: 40px; }
  .list-sort { height: 44px; padding: 3px; }
  .list-sort a { height: 38px; }
  .pf-rail a, .hobby-switch a { display: inline-flex; align-items: center; min-height: 40px; }
  .posts-header .view-all { min-height: 40px; }
  .meta-tag, .cloud-tag { height: 32px; }
  .tag-row { min-height: 32px; }
  .topbar-dd-menu a { height: 44px; }
}


/* ── post extras: heading links, code language, series position, share ── */
#post-body :is(h2, h3, h4) { position: relative; scroll-margin-top: calc(var(--h-topbar) + 16px); }
#post-body .heading-anchor { margin-left: .35em; padding: 0 .15em; border-radius: 6px; color: var(--f-ink-3); font-weight: 500; text-decoration: none; opacity: 0; transition: opacity .15s ease, color .15s ease, background .15s ease; }
#post-body :is(h2, h3, h4):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
#post-body .heading-anchor:hover { color: var(--f-ink); background: var(--f-chip); }
@media (hover: none) { .heading-anchor { opacity: .45; } }
/* the language sits in the corner and gives way to the copy button on hover */
.content pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 14px; right: 16px; font: 500 11.5px/1 var(--font-sans, inherit);
  letter-spacing: .02em; color: rgba(255, 255, 255, .42); pointer-events: none; transition: opacity .15s ease;
}
.content pre[data-lang] { position: relative; }
.content pre[data-lang]:hover::before { opacity: 0; }
.post-series { margin-left: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--f-ink); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.post-share { display: flex; justify-content: flex-end; margin: 48px 0 -24px; }
.post-share button { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px 0 12px; border: 1px solid var(--f-line); border-radius: 999px;
  background: #fff; color: var(--f-ink); font: 600 13.5px/1 inherit; cursor: pointer; transition: background .15s ease, transform .12s ease; }
.post-share button:hover { background: var(--f-chip); }
.post-share button:active { transform: scale(.96); }
.post-share svg { width: 15px; height: 15px; color: var(--f-ink-2); }
.copy-toast { position: fixed; left: 50%; bottom: 28px; z-index: 90; padding: 11px 18px; border-radius: 999px; background: var(--f-ink); color: #fff;
  font: 600 14px/1 inherit; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 6px 20px rgba(29, 28, 26, .18); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1); }
.copy-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) { .post-series { margin-left: 0; } }
@media (max-width: 760px) { .content table { width: fit-content; } }
/* phones: the mark and name on the left, search and menu as icon buttons on the right (the layout toss.tech,
   GitHub and most blogs use); the search icon opens a field across the whole bar */
.search-close { display: none; }
@media (max-width: 760px) {
  .topbar { gap: 2px; padding: 0 8px 0 14px; }
  .topbar .logo { order: 0; margin-right: auto; gap: 7px; }
  .topbar .logo-img { height: 30px; margin: 0; }
  .topbar .logo-text { display: flex; margin: 0; }
  .topbar .logo-sub { display: block; font-size: .56rem; margin-bottom: 2px; }
  .topbar .logo-main { font-size: 1.05rem; }
  .topbar-search { order: 2; flex: none; min-width: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; background: transparent; cursor: pointer; }
  .topbar-search:hover { background: var(--f-chip); }
  .topbar-search input { display: none; }
  .topbar-search > svg { margin: 0; width: 20px; height: 20px; }
  .topbar-dd.topbar-menu { order: 3; }
  .topbar-btn { width: 40px; height: 40px; }
  .topbar.searching .topbar-search { position: absolute; inset: 8px 8px 8px 10px; z-index: 3; width: auto; height: auto; justify-content: flex-start;
    gap: 8px; padding: 0 4px 0 14px; border-radius: 999px; background: var(--f-chip); cursor: auto; }
  .topbar.searching .topbar-search input { display: block; flex: 1; min-width: 0; }
  .topbar.searching .search-close { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: #fff; color: var(--f-ink); cursor: pointer; }
  .search-close svg { width: 17px; height: 17px; }
}