/* odd duck — the zine layer (2026-10-02)
   Every page with the site chrome links this: the four homes, Work (list + product pages) and Blog (index, posts,
   topics). It comes after styles.css and after a page's own sheet (work.css / blog.css); the homes add home.css on top.
   Legal pages and 404 keep styles.css alone.

   What lives here: the palette and type tokens, the scrollbar, selection, the footer — the parts every page shares —
   and the sub-page restyles, in the home's language: Anton caps headings, yolk badges with ink borders,
   hard shadows (no blur), sticker cards with small tilts, black tags for labels. Markup is untouched, so all four
   locales follow.

   Palette ........ yolk #F5C03A · ink #111 · cream #F4EFE3 · sticker white #FFFDF7 · orange #F18D0C
                    beak #E89A1B / #C77F0E · sky #78ACE0
   Type ........... Anton (display) · Black Han Sans (Korean display) · Shantell Sans 800 (hand caps)
                    Jua (Korean hand) · JetBrains Mono (labels) · Pretendard (body)
                    Anton has no hangul / kana / hanzi: headings fall through to the locale's display face. */

:root {
  --cv-yolk: #F5C03A;
  --cv-ink: #111111;
  --cv-cream: #F4EFE3;
  --cv-white: #FFFDF7;
  --cv-orange: #F18D0C;
  --cv-beak: #E89A1B;
  --cv-beak-deep: #C77F0E;
  --cv-sky: #78ACE0;
  --cv-soft: #2A2A26;

  --cv-display: "Anton", Impact, "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", sans-serif-condensed, sans-serif;   /* condensed fallbacks keep the swap small */
  --cv-sub: "Black Han Sans", "Pretendard", sans-serif;      /* the locale's display face */
  --cv-hand: "Shantell Sans", "Jua", "Pretendard", cursive;   /* Latin hand caps */
  --cv-hand-loc: "Jua", "Pretendard", sans-serif;            /* hand lettering in the page's own script */
  --cv-hand-ko: "Jua", "Pretendard", sans-serif;             /* Korean fragments on every locale */
  --cv-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cv-body: "Pretendard", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cv-pad: clamp(16px, 2.8vw, 40px);
  --zn-head: "Anton", var(--cv-sub);
  --zn-shadow: 6px 6px 0 var(--cv-ink);
}
/* other locales: a display face that covers the script (each page loads only its own).
   ja — Dela Gothic One. zh — the homes load a 14-glyph "Noto Sans SC" 900 for the cover line only (see /zh's head);
   everywhere else zh display text falls through to PingFang / YaHei. */
html[lang="ja"] { --cv-sub: "Dela Gothic One", var(--ja); --cv-hand-loc: "Dela Gothic One", var(--ja); --cv-body: var(--ja); }
html[lang="zh-Hans"] {
  /* keep the subset "Noto Sans SC" out of the regular text stack, or Android / Linux would set body glyphs black */
  --zh: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "Pretendard", system-ui, sans-serif;
  --cv-sub: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --cv-hand-loc: var(--cv-sub); --cv-body: var(--zh);
}
html[lang="en"] { --cv-sub: var(--cv-hand); }

/* ---------- scrollbar: an ink-bordered yolk thumb on a cream track ----------
   Chromium / Safari take the ::-webkit-scrollbar parts; setting scrollbar-color there would switch those off,
   so the standard property goes only to browsers without them (Firefox: no borders, so an ink thumb). */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--cv-ink) var(--cv-cream); }
}
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--cv-cream); }
html::-webkit-scrollbar-track { border-left: 3px solid var(--cv-ink); }
::-webkit-scrollbar-thumb { background: var(--cv-yolk); border: 3px solid var(--cv-ink); }
::-webkit-scrollbar-thumb:hover { background: var(--cv-orange); }
::-webkit-scrollbar-thumb:active { background: var(--cv-beak-deep); }
::-webkit-scrollbar-corner { background: var(--cv-cream); }
::selection { background: var(--cv-yolk); color: var(--cv-ink); }

/* ---------- footer: the black back cover ---------- */
.footer { background: var(--cv-ink); color: var(--cv-cream); }
.footer-top .lockup img {
  filter: none; width: 150px; box-sizing: content-box;
  background: var(--cv-cream); border: 3px solid var(--cv-cream); padding: 6px 11px 7px;
  box-shadow: 4px 4px 0 var(--cv-yolk); rotate: -2deg;
}
.footer-top .lockup .tagline {
  font-family: var(--cv-hand); font-style: normal; font-weight: 800; font-size: 17px; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase; font-variation-settings: "INFM" 100, "BNCE" 50;
  color: var(--cv-yolk); margin-top: 10px;
}
.footer-top .col h4 {
  display: inline-block; font-family: var(--cv-hand); font-weight: 800; font-size: 12px; letter-spacing: .06em;
  opacity: 1; color: var(--cv-ink); background: var(--cv-yolk); padding: 5px 9px 4px; rotate: -2deg;
}
.footer-top .col a, .footer-top .col p { color: var(--cv-cream); opacity: .88; }
.footer-top .col a:hover { color: var(--cv-yolk); opacity: 1; }
.footer-bottom .lockup-mini, .footer-mini .lockup-mini { font-family: var(--cv-mono); font-style: normal; font-size: 12px; letter-spacing: .02em; }
.footer .hand-sig { font-family: var(--cv-hand); font-weight: 700; font-style: normal; font-size: 16px; color: var(--cv-yolk); font-variation-settings: "INFM" 100, "BNCE" 50; }
.footer-mini nav a:hover { color: var(--cv-yolk); }

/* ==========================================================
   SHARED PIECES — buttons, eyebrows, notes (home + sub-pages)
   ========================================================== */
.btn {
  border-radius: 0; border: 3px solid var(--cv-ink); background: var(--cv-ink); color: var(--cv-cream);
  font-family: var(--cv-hand); font-weight: 800; font-size: 14px; letter-spacing: .05em;
  font-variation-settings: "INFM" 100, "BNCE" 40;
  box-shadow: 5px 5px 0 var(--cv-orange); transition: translate .15s ease, box-shadow .15s ease;
}
.btn:hover { background: var(--cv-ink); transform: none; translate: -2px -2px; box-shadow: 7px 7px 0 var(--cv-orange); }
.btn:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--cv-orange); }
.btn .blink, .btn:hover .blink { background: var(--cv-yolk); }

/* section labels → tilted black tags */
.work-hero .eyebrow, .blog-hero .eyebrow, .post-head .eyebrow, .tldr .eyebrow, .app-head .eyebrow {
  display: inline-block; font-family: var(--cv-hand); font-weight: 800; font-size: 12.5px; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.2; color: var(--cv-yolk); background: var(--cv-ink);
  padding: 7px 12px 6px; rotate: -2deg; opacity: 1; width: fit-content;
}
/* the count notes → white stickers */
.count-note, .handnote.count-note {
  font-family: var(--cv-hand); font-weight: 800; font-size: 16px; color: var(--cv-ink);
  background: var(--cv-white); border: 3px solid var(--cv-ink); padding: 7px 13px 6px;
  box-shadow: 4px 4px 0 var(--cv-ink); rotate: 2.5deg; transform: none;
}
/* the status line (nerd.js fills [data-nerd-strip]) — home cover, Work, Blog: one look, no box, at the bottom-right
   edge of its yolk band. The places are set per page (home.css / below). */
.cv-pill, .status-strip {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 4px 8px; width: auto; max-width: calc(100% - 2 * var(--cv-pad));
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--cv-mono); font-weight: 500; font-size: 11px; line-height: 1.2; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap; color: var(--cv-ink);
}
.status-strip:empty { display: none; }
.cv-pill .sep, .status-strip .sep { opacity: .5; }
.cv-pill [data-nerd="clock"], .status-strip [data-nerd="clock"] { color: var(--cv-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.ascii-duck { color: var(--cv-beak-deep); }

/* ==========================================================
   SUB-PAGE NAV — a yolk masthead with the egg logo on a cream plate (same as the home's)
   ========================================================== */
.page-nav {
  background: var(--cv-yolk); border-bottom: 3px solid var(--cv-ink);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px var(--cv-pad); gap: 14px;
}
.page-nav .mark {
  min-height: 0; padding: 6px 12px 7px; background: var(--cv-cream); border: 3px solid var(--cv-ink);
  rotate: -2deg; transition: rotate .15s ease;
}
.page-nav .mark:hover { rotate: 1deg; }
.page-nav .mark::before { content: ""; display: block; width: 112px; height: 22px; background: url("/assets/duck-logo.png") 0 50% / contain no-repeat; }
.page-nav .mark img { display: none; }
.page-nav .mark span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page-nav .back {
  font-family: var(--cv-hand); font-weight: 800; font-size: 13px; letter-spacing: .05em;
  font-variation-settings: "INFM" 100, "BNCE" 45; color: var(--cv-ink); transition: rotate .15s ease;
}
.page-nav .back:hover { color: var(--cv-ink); rotate: -3deg; }
.page-nav .lang-switch > summary {
  min-height: 40px; padding: 0 13px; gap: 7px; opacity: 1;
  font-family: var(--cv-hand); font-weight: 800; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  font-variation-settings: "INFM" 100, "BNCE" 30;
  color: var(--cv-cream); background: var(--cv-ink); rotate: -2deg; transition: translate .15s ease;
}
.page-nav .lang-switch > summary:hover, .page-nav .lang-switch[open] > summary { translate: 0 -2px; }
.page-nav .lang-switch[open] .globe { color: var(--cv-yolk); }
.lang-menu { border: 3px solid var(--cv-ink); box-shadow: 5px 5px 0 var(--cv-ink); background: var(--cv-cream); }
.lang-menu a:hover { background: var(--cv-yolk); }
.lang-menu a[aria-current="page"]::after { color: var(--cv-beak-deep); }

/* ==========================================================
   SUB-PAGE HEROES — Work / Blog / topics: a yolk band like the home cover
   ========================================================== */
.work-hero, .blog-hero { background: var(--cv-yolk); border-bottom: 3px solid var(--cv-ink); padding-bottom: 44px; }
.work-hero h1, .blog-hero h1, .topic-hero h1, .topic-hero:lang(en) h1 {
  font-family: var(--zn-head); font-style: normal; font-weight: 400; text-transform: uppercase;
  font-size: clamp(58px, 10.4vw, 156px); line-height: .9; letter-spacing: 0; margin-top: 24px;
}
.work-hero h1 .ko, .blog-hero h1 .ko, .work-hero h1 .sub, .blog-hero h1 .sub {
  font-family: var(--cv-sub); font-weight: 400; font-size: .3em; line-height: 1.08; letter-spacing: -.005em;
  text-transform: none; margin-top: 18px;
}
html[lang="en"] .work-hero h1 .sub, html[lang="en"] .blog-hero h1 .sub { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-variation-settings: "INFM" 100, "BNCE" 45; }
html[lang="zh-Hans"] .work-hero h1 :is(.ko, .sub), html[lang="zh-Hans"] .blog-hero h1 :is(.ko, .sub) { font-weight: 700; }
.work-hero .lede, .blog-hero .lede { color: var(--cv-ink); font-size: 16px; margin-top: 24px; }
.work-hero .count-note, .blog-hero .count-note { margin-top: 22px; }
.work-hero .container, .blog-hero .container { position: relative; }
.work-hero .status-strip, .blog-hero .status-strip { position: absolute; right: 0; bottom: -31px; max-width: 100%; }

/* tabs → sticker buttons; the pressed one goes black */
.work-tabs, .topic-nav { padding-top: 34px; }
.work-tabs .container, .topic-nav .container, .blog-hero + .topic-nav .container { border-bottom: 0; gap: 12px 12px; padding: 0; }
.work-tabs button, .topic-nav a {
  opacity: 1; margin: 0; min-height: 0; padding: 8px 14px 7px; align-items: center;
  color: var(--cv-ink); background: var(--cv-white); border: 3px solid var(--cv-ink);
  box-shadow: 3px 3px 0 var(--cv-ink);
  font-family: var(--cv-hand); font-weight: 800; font-size: 15px; letter-spacing: .02em;
  font-variation-settings: "INFM" 100, "BNCE" 40;
  transition: translate .12s ease, box-shadow .12s ease;
}
.work-tabs button:hover, .topic-nav a:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--cv-ink); }
.work-tabs button[aria-pressed="true"], .topic-nav a[aria-current="page"] {
  color: var(--cv-yolk); background: var(--cv-ink); border-bottom-color: var(--cv-ink); box-shadow: 3px 3px 0 var(--cv-orange);
}
.work-tabs button .n, .topic-nav a .n { font-family: var(--cv-mono); color: inherit; opacity: .75; }
.work-tabs button[aria-pressed="true"] .n, .topic-nav a[aria-current="page"] .n { color: inherit; opacity: 1; }
.work-tabs button:focus-visible, .topic-nav a:focus-visible { outline: 3px solid var(--cv-orange); outline-offset: 3px; }

/* group / year heads → Anton caps on a heavy rule */
.group-head, .year-head { border-bottom: 3px solid var(--cv-ink); padding-bottom: 10px; align-items: flex-end; }
.group-head h2, .year-head h2 {
  font-family: var(--zn-head); font-weight: 400; text-transform: uppercase; letter-spacing: 0;
  font-size: clamp(36px, 4.6vw, 64px); line-height: .95;
}
.group-head .n, .year-head .n { font-family: var(--cv-mono); font-style: normal; font-size: 13px; opacity: 1; }

/* ==========================================================
   WORK — the list as a sheet of sticker cards
   ========================================================== */
.work-group .work-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 26px; margin-top: 30px; border-top: 0; }
.work-group .work-row {
  background: var(--cv-white); border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow);
  padding: 22px 24px 20px; rotate: -.6deg;
}
.work-group .work-row:nth-child(4n+2) { rotate: .5deg; }
.work-group .work-row:nth-child(4n+3) { rotate: .4deg; }
.work-group .work-row:nth-child(4n) { rotate: -.4deg; }
.work-group .work-row .t .ko { font-family: var(--zn-head); font-weight: 400; letter-spacing: 0; line-height: 1.12; font-size: clamp(26px, 2.6vw, 36px); }
html[lang="zh-Hans"] .work-group .work-row .t .ko { font-weight: 700; }
.work-group .work-row .t .en { margin-top: 8px; opacity: .7; }
.work-group .work-row .t .d { color: var(--cv-soft); font-size: 15px; }
.work-group .work-row .badge, .work-group .work-row .badge.soon {
  margin-left: 12px; padding: 3px 8px 2px; border-radius: 0; vertical-align: .35em;
  font-family: var(--cv-hand); font-weight: 800; font-size: 11px; letter-spacing: .04em; opacity: 1;
  color: var(--cv-ink); background: var(--cv-yolk); border: 2px solid var(--cv-ink); box-shadow: 2px 2px 0 var(--cv-ink); rotate: -4deg;
}
.work-group .work-row .badge.soon { background: var(--cv-white); }
.work-group .work-row .stores { gap: 10px 12px; margin-top: 16px; }
.work-group .work-row .stores a {
  min-height: 0; padding: 7px 11px 6px; text-decoration: none;
  font-family: var(--cv-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--cv-cream); background: var(--cv-ink); box-shadow: 3px 3px 0 var(--cv-orange);
  transition: translate .12s ease, box-shadow .12s ease;
}
.work-group .work-row .stores a:hover { background: var(--cv-ink); translate: -1px -1px; box-shadow: 4px 4px 0 var(--cv-orange); }
/* "자세히 보기" → a yolk sticker button; the whole card is the link (work.css .more::after covers it), so the card lifts */
.work-group .work-row .more {
  min-height: 0; margin-top: 18px; padding: 7px 13px 6px; border: 2px solid var(--cv-ink);
  font-family: var(--cv-hand); font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: none;
  font-variation-settings: "INFM" 100, "BNCE" 40;
  color: var(--cv-ink); background: var(--cv-yolk); box-shadow: 3px 3px 0 var(--cv-ink);
  transition: background .15s ease, color .15s ease;
}
.work-group .work-row:has(.more) { transition: translate .18s ease, box-shadow .18s ease; }
.work-group .work-row:has(.more):hover { background: var(--cv-white); translate: -2px -2px; box-shadow: 9px 9px 0 var(--cv-ink); }
.work-group .work-row:has(.more):hover .more { color: var(--cv-yolk); background: var(--cv-ink); border-color: var(--cv-ink); }
.work-group .work-row .more:focus-visible { outline: 3px solid var(--cv-orange); outline-offset: 3px; }

/* the marquee between the groups → the home's black ticker */
.marquee { background: var(--cv-ink); color: var(--cv-cream); border-block: 3px solid var(--cv-ink); padding: 18px 0; }
.marquee-track .word, .marquee-track .word.sans {
  font-family: var(--cv-hand); font-style: normal; font-weight: 800; font-size: 28px; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase; font-variation-settings: "INFM" 100, "BNCE" 55;
}
.marquee-track .word.ko { font-family: var(--cv-hand-ko); font-weight: 400; font-size: 31px; letter-spacing: 0; text-transform: none; }
.marquee-track .hand-word { font-family: var(--cv-hand); font-style: normal; font-weight: 800; color: var(--cv-yolk); font-size: 30px; }
.marquee-track .dot { color: var(--cv-yolk); }

/* ==========================================================
   BLOG — index, topics, posts
   ========================================================== */
.blog-list .post-list { display: grid; gap: 18px; margin-top: 28px; }
.post-row {
  background: var(--cv-white); border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow);
  padding: 20px 24px; rotate: -.25deg; transition: translate .18s ease, box-shadow .18s ease;
}
.post-row:nth-child(even) { rotate: .2deg; }
.post-row:hover { background: var(--cv-white); color: inherit; padding-left: 24px; translate: -3px -3px; box-shadow: 9px 9px 0 var(--cv-ink); }
.post-row:focus-visible { outline: 3px solid var(--cv-orange); outline-offset: 4px; }
.post-row .d { opacity: .8; }
.post-row .t { font-family: var(--zn-head); font-weight: 400; letter-spacing: 0; line-height: 1.18; font-size: clamp(22px, 2.3vw, 30px); }
html[lang="zh-Hans"] .post-row .t { font-weight: 700; }
.post-row .s { font-family: var(--cv-body); font-style: normal; font-size: 15px; line-height: 1.55; color: var(--cv-soft); opacity: 1; margin-top: 8px; }
.post-row .r { opacity: 1; }
.post-row .r .c {
  display: block; width: fit-content; margin-bottom: 7px; opacity: 1; padding: 3px 9px 2px;
  font-family: var(--cv-hand); font-weight: 800; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cv-ink); background: var(--cv-yolk); border: 2px solid var(--cv-ink);
}
.post-row .r .c:empty { display: none; }   /* topic pages leave the category out */
.blog-list .empty { border-top: 3px solid var(--cv-ink); }
.blog-foot .foot-note a { color: var(--cv-ink); border-bottom: 2px solid var(--cv-yolk); }

/* post page */
.post-title, .post-title:not(:lang(en)) {
  font-family: var(--zn-head); font-style: normal; font-weight: 400; letter-spacing: 0;
  font-size: clamp(40px, 6.2vw, 74px); line-height: 1.06; margin-top: 20px;
}
html[lang="zh-Hans"] .post-title { font-weight: 700; }
.post-title .sans { font-family: inherit; font-weight: 400; letter-spacing: 0; }
.summary-en { font-family: var(--cv-body); font-style: normal; font-weight: 500; font-size: 19px; line-height: 1.5; color: var(--cv-soft); }
.post-meta { border-top: 3px solid var(--cv-ink); border-bottom: 0; color: var(--cv-soft); }
.post-meta time { color: var(--cv-ink); }
.tldr {
  margin-top: 30px; padding: 18px 22px 20px; background: var(--cv-yolk);
  border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow); rotate: -.3deg;
}
.tldr p, .tldr p:not(:lang(en)) { font-family: var(--cv-body); font-style: normal; font-size: 17px; line-height: 1.75; color: var(--cv-ink); margin-top: 12px; }
.post-body h2 { font-family: var(--zn-head); font-weight: 400; letter-spacing: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.post-body h3 { font-family: var(--cv-sub); font-weight: 400; letter-spacing: 0; font-size: 21px; }
html[lang="en"] .post-body h3 { font-family: var(--cv-body); font-weight: 800; }
html[lang="zh-Hans"] .post-body :is(h2, h3) { font-weight: 700; }
.post-body a { text-decoration-color: var(--cv-orange); text-decoration-thickness: 2px; }
.post-body a:hover { color: var(--cv-ink); background: var(--cv-yolk); text-decoration-color: var(--cv-ink); }
.post-body mark { background: var(--cv-yolk); }
.post-body u { text-decoration-color: var(--cv-orange); }
.post-body .fact { color: var(--cv-beak-deep); }
.post-body li::marker { color: var(--cv-beak-deep); }
.post-body blockquote, .post-body blockquote:lang(en), .post-body blockquote.en {
  border-left: 5px solid var(--cv-yolk); padding: 4px 0 4px 20px;
  font-family: var(--cv-body); font-style: normal; font-size: 18px; line-height: 1.7; color: var(--cv-soft);
}
.post-body figure img, .post-body > img, .post-body video { border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow); }
.post-body pre { border: 3px solid var(--cv-ink); background: var(--cv-white); }
.post-body code { background: var(--cv-white); border-color: rgba(17, 17, 17, .25); }
.post-body th { border-bottom: 3px solid var(--cv-ink); font-family: var(--cv-mono); font-size: 12px; letter-spacing: .04em; }
.post-body .try { background: var(--cv-white); border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow); }
.post-body .try-code code { border: 3px solid var(--cv-ink); background: var(--cv-yolk); }
.post-foot { border-top: 3px solid var(--cv-ink); }
.post-nav a {
  padding: 14px 16px; border: 3px solid var(--cv-ink); background: var(--cv-white); box-shadow: 4px 4px 0 var(--cv-ink);
  transition: translate .15s ease, box-shadow .15s ease;
}
.post-nav a:hover { color: var(--cv-ink); translate: -2px -2px; box-shadow: 6px 6px 0 var(--cv-ink); }
.post-nav .t { font-family: var(--zn-head); font-weight: 400; letter-spacing: 0; font-size: 19px; }
html[lang="zh-Hans"] .post-nav .t { font-weight: 700; }
.footer-mini nav a { font-family: var(--cv-mono); }
.footer-mini nav a[href^="mailto:"] { text-transform: none; }   /* in caps "ooo" reads as "000" */

/* ==========================================================
   SMALL SCREENS + MOTION
   ========================================================== */
@media (max-width: 820px) {
  .page-nav { padding: 10px 16px; }
  .page-nav .mark::before { width: 92px; height: 19px; }
  .page-nav .back { font-size: 12px; }
  .work-hero, .blog-hero { padding-bottom: 46px; }
  .work-hero h1, .blog-hero h1, .topic-hero h1, .topic-hero:lang(en) h1 { font-size: clamp(46px, 14vw, 72px); }
  .work-hero h1 .ko, .blog-hero h1 .ko, .work-hero h1 .sub, .blog-hero h1 .sub { font-size: .42em; }
  .work-group .work-list { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .work-group .work-row, .work-group .work-row:nth-child(n) { rotate: 0deg; padding: 18px 18px 16px; }
  .post-row, .post-row:nth-child(even) { rotate: 0deg; padding: 16px 16px; }
  .post-row:hover { padding-left: 16px; }
  .tldr { rotate: 0deg; padding: 16px 16px 18px; }
  .marquee-track .word, .marquee-track .word.sans { font-size: 20px; }
  .marquee-track .word.ko { font-size: 22px; }
  .marquee-track .hand-word { font-size: 22px; }
}
@media (max-width: 600px) {
  /* the status pill drops "last deploy" (nerd.js order: clock · last deploy · shipped · …) so it stays one line */
  .status-strip > :nth-child(2), .status-strip > :nth-child(3), .cv-pill > :nth-child(2), .cv-pill > :nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .post-row, .post-nav a, .work-tabs button, .topic-nav a, .work-group .work-row .stores a, .page-nav .mark, .page-nav .back,
  .work-group .work-row:has(.more), .work-group .work-row .more { transition: none; }
  .work-group .work-row:has(.more):hover { translate: none; }
}

/* ==========================================================
   WORK DETAIL — "coming soon", until a product's own page is written (all four locales)
   The yolk band carries the product (name, other name, one-liner, store buttons); below, one big stamp.
   ========================================================== */
.soon-hero h1 { font-size: clamp(46px, 7.6vw, 116px); line-height: .96; margin-top: 22px; }
.soon-hero .soon-other {
  margin-top: 14px; font-family: var(--cv-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cv-ink);
}
.soon-hero .soon-desc { margin-top: 16px; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--cv-ink); }
.soon-stores { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 24px; }
.soon-stores a {
  display: inline-flex; align-items: center; padding: 8px 12px 7px; text-decoration: none;
  font-family: var(--cv-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cv-cream); background: var(--cv-ink); box-shadow: 3px 3px 0 var(--cv-orange);
  transition: translate .12s ease, box-shadow .12s ease;
}
.soon-stores a::after { content: " ↗"; }
.soon-stores a:hover { translate: -1px -1px; box-shadow: 4px 4px 0 var(--cv-orange); }
.soon-main { padding: 80px var(--cv-pad) 110px; }
.soon-main .container { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.soon-stamp {
  margin: 0; padding: .08em .2em 0;
  font-family: "Anton", var(--cv-display); font-weight: 400; font-size: clamp(56px, 11vw, 170px); line-height: .92;
  text-transform: uppercase; color: var(--cv-ink); background: var(--cv-yolk);
  border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow); rotate: -2.5deg;
}
.soon-note { font-family: var(--cv-body); font-size: 18px; line-height: 1.6; color: var(--cv-soft); }
@media (max-width: 820px) {
  .soon-main { padding: 56px 20px 80px; }
  .soon-hero .soon-desc { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .soon-stores a { transition: none; } }

/* ==========================================================
   WORK DETAIL — a product's own page: the blog post column in zine type
   (title in the display face, store buttons as black blocks, the facts as a small taped-down ticket, screenshots as stickers)
   ========================================================== */
.app-title { font-family: var(--zn-head); font-weight: 400; letter-spacing: 0; line-height: 1.04; font-size: clamp(42px, 6.4vw, 78px); margin-top: 20px; }
html[lang="zh-Hans"] .app-title { font-weight: 700; }
.app-en { font-family: var(--cv-mono); font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--cv-soft); margin-top: 12px; }
.app-lede { font-family: var(--cv-body); font-size: 18px; line-height: 1.65; color: var(--cv-ink); }
.app-stores { gap: 10px 12px; margin-top: 22px; }
.app-stores a {
  min-height: 0; padding: 9px 13px 8px; border: 0; background: var(--cv-ink); color: var(--cv-cream);
  font-family: var(--cv-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  box-shadow: 3px 3px 0 var(--cv-orange); transition: translate .12s ease, box-shadow .12s ease;
}
.app-stores a::after { font-family: inherit; }
.app-stores a:hover { background: var(--cv-ink); transform: none; translate: -1px -1px; box-shadow: 4px 4px 0 var(--cv-orange); }
.app-kv {
  margin-top: 28px; max-width: 460px; padding: 12px 18px 10px;
  background: var(--cv-white); border: 3px solid var(--cv-ink); box-shadow: 5px 5px 0 var(--cv-ink); rotate: -.6deg;
}
.app-kv > div { padding: 5px 0; border-bottom: 2px dashed rgba(17, 17, 17, .22); }
.app-kv > div:last-child { border-bottom: 0; }
.app-kv dt { color: var(--cv-soft); }
.app-kv dd { color: var(--cv-ink); font-weight: 700; }
.app-shots { margin-top: 44px; }
.app-shots .shots { gap: 20px; padding: 6px 12px 22px 2px; }
.app-shots .shot img { border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow); background: var(--cv-white); }
.app-shots figcaption { margin-top: 12px; font-family: var(--cv-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--cv-soft); }
.app-related .related-head { font-family: var(--zn-head); font-weight: 400; letter-spacing: 0; border-bottom: 3px solid var(--cv-ink); }
@media (max-width: 820px) {
  .app-kv { rotate: 0deg; }
}
/* story images inside a product page — stickers: one centred (.pic), or two side by side (.pics), small opposite tilts */
.app-body .pic { max-width: 400px; margin: 2.4em auto; }
.app-body .pics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 2.4em 0; align-items: start; }
.app-body .pic img, .app-body .pics img { display: block; width: 100%; height: auto; border: 3px solid var(--cv-ink); box-shadow: var(--zn-shadow); background: var(--cv-white); }
.app-body .pic img, .app-body .pics img:first-of-type { rotate: -1.2deg; }
.app-body .pics img:nth-of-type(2) { rotate: 1deg; }
.app-body .pic figcaption, .app-body .pics figcaption {
  grid-column: 1 / -1; margin-top: 16px; text-align: center;
  font-family: var(--cv-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--cv-soft);
}
@media (max-width: 820px) {
  .app-body .pic { max-width: 300px; }
  .app-body .pics { gap: 12px; }
}
.app-body .app-sources { margin-top: 2.6em; padding-top: 14px; border-top: 2px dashed rgba(17, 17, 17, .25); font-family: var(--cv-mono); font-size: 11.5px; line-height: 1.8; color: var(--cv-soft); }
.app-body .app-sources a { color: var(--cv-soft); }
.app-body figure.chart svg { margin: 0 auto; }
@media (prefers-reduced-motion: reduce) { .app-stores a { transition: none; } }