/* Blog, About, and the "From the blog" + "More apps" blocks on the home pages. Loads after home.css.
   Same voice as the home page: heavy uppercase headlines with the key line in orange, and the app's
   counter type (SF Mono, tabular) for every number. All classes start with p- so home.css rules
   (.mid/.far blur, .app, .tag, .note, .faq glass) never reach them. */
:root {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --read: oklch(0.9 0.008 85);            /* long-form text: brighter than --muted, same warm grey */
  --o-wash: oklch(0.68 0.21 40 / .1);
  --o-edge: oklch(0.68 0.21 40 / .42);
  --panel: oklch(0.21 0.006 85);
  --measure: 680px;
  --wide: 1100px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* reading pages: one glow at the top, one at the foot, calm in between */
.blog .page {
  background:
    radial-gradient(60% 900px at 90% 0, rgba(255, 92, 26, .26), transparent 70%),
    radial-gradient(60% 900px at 0 100%, rgba(255, 92, 26, .2), transparent 70%),
    var(--bg);
}
.blog main { position: relative; z-index: 1; }

/* nav: Blog link and a small language picker; labels never wrap */
.nav nav { align-items: center; }
.nav nav a { display: inline-block; padding: 12px 0; white-space: nowrap; }
.nav nav a[aria-current] { color: var(--orange); }
.p-lang { position: relative; }
.p-lang summary {
  list-style: none; cursor: pointer; display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 12px; color: var(--text); font: 700 13px/1 var(--mono); letter-spacing: .04em;
}
.p-lang summary::-webkit-details-marker { display: none; }
.p-lang[open] summary, .p-lang summary:hover { border-color: var(--o-edge); }
.p-lang ul {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 210px; padding: 8px;
  background: #1C1B18; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.p-lang li a { display: block; padding: 12px; border-radius: 10px; color: var(--text); font-size: 15px; white-space: normal; }
.p-lang li a:hover { background: var(--o-wash); text-decoration: none; }
.p-lang li a[aria-current] { color: var(--orange); font-weight: 800; }

/* ---------- post ---------- */
.p-post { padding: clamp(36px, 6vw, 88px) var(--gutter) 0; }
.p-head, .p-answer, .p-cover, .p-body, .p-get { max-width: var(--wide); margin-left: auto; margin-right: auto; }
.p-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 14px; color: var(--muted); }
.p-crumbs a { color: var(--muted); padding: 12px 0; }
.p-crumbs a:hover { color: var(--text); }
.p-crumbs span:last-child { padding: 12px 0; color: var(--peach); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.p-head h1 {
  margin-top: 14px; max-width: 16ch; color: var(--text); font-weight: 900; text-transform: uppercase;
  font-size: clamp(40px, 3.2vw + 18px, 66px); line-height: .95; letter-spacing: -.04em; text-wrap: balance; overflow-wrap: break-word;
}
.p-head h1 em, .p-index-head h1 em { display: block; font-style: normal; color: var(--orange); text-shadow: 0 0 60px rgba(255, 92, 26, .4); }
html:not([lang="en"]) .p-head h1 { max-width: 20ch; hyphens: auto; }
html:is([lang="ja"], [lang="zh-Hans"]) .p-head h1 { letter-spacing: -.01em; line-height: 1.12; max-width: 16em; }
.p-byline { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px 16px; margin-top: 32px; font-size: 15px; line-height: 1.4; }
.p-byline > img { width: 48px; height: 48px; border-radius: 23%; }
.p-byline b { color: var(--text); font-weight: 800; }
.p-byline a { color: inherit; display: inline-block; padding: 4px 0; }
.p-byline a:hover { text-decoration: none; }
.p-byline a:hover b { color: var(--orange); }
.p-byline .p-meta { justify-self: start; padding-left: 16px; border-left: 1px solid var(--line); }
.p-meta, p.p-meta { color: var(--muted); font: 500 14px/1.5 var(--mono) !important; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

.p-answer {
  margin-top: 32px; padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 36px); border-radius: 22px;
  background: var(--o-wash); border: 1px solid var(--o-edge);
}
.p-answer p:not(.p-label) { max-width: 44em; color: var(--text); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; }
.p-label { margin-bottom: 8px; color: var(--orange) !important; font: 700 12px/1.4 var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; }

.p-cover { margin-top: clamp(28px, 4vw, 48px); }
.p-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: clamp(18px, 2.4vw, 30px); box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgba(0, 0, 0, .9); }

/* body: TOC rail on wide screens, one 680px reading column */
.p-body { display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; margin-top: clamp(36px, 5vw, 64px); }
@media (min-width: 1180px) {
  .p-body:has(.p-toc) { grid-template-columns: 240px minmax(0, var(--measure)); justify-content: space-between; column-gap: 64px; }
  .p-toc { position: sticky; top: 96px; align-self: start; }
}
.p-toc { margin-bottom: 36px; border-top: 3px solid var(--orange); padding-top: 10px; }
.p-toc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 11px 0; color: var(--text); font: 700 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.p-toc summary::-webkit-details-marker { display: none; }
.p-toc summary::after { content: "+"; color: var(--orange); font-size: 20px; line-height: 1; }
.p-toc[open] summary::after { content: "-"; }
.p-toc ol { list-style: none; counter-reset: t; margin-top: 4px; }
.p-toc li { counter-increment: t; display: grid; grid-template-columns: 2.4em 1fr; font-size: 15px; line-height: 1.35; color: var(--muted); }
.p-toc li::before { content: counter(t, decimal-leading-zero); padding-top: 13px; color: var(--orange); font: 700 13px/1 var(--mono); }
.p-toc a { display: block; padding: 12px 0; color: var(--muted); }
.p-toc a:hover { color: var(--text); text-decoration: none; }

.p-prose > * + * { margin-top: 20px; }
.p-prose p, .p-prose li { color: var(--read); font-size: 18px; line-height: 1.72; }
.p-prose a { color: var(--hot); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.p-prose a:hover { color: var(--peach); }
.p-prose strong { color: var(--text); font-weight: 800; }
.p-prose h2 {
  margin-top: clamp(56px, 7vw, 84px); color: var(--text); font-weight: 900; text-transform: uppercase;
  font-size: clamp(26px, .8vw + 22px, 34px); line-height: 1.06; letter-spacing: -.03em; scroll-margin-top: 90px; text-wrap: balance;
}
html:is([lang="ja"], [lang="zh-Hans"]) .p-prose h2 { line-height: 1.3; letter-spacing: 0; }
.p-prose h3 { margin-top: 40px; color: var(--text); font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.p-prose h2 + p, .p-prose h3 + p, .p-prose h2 + ul, .p-prose h2 + ol { margin-top: 14px; }
.p-prose ul { padding-left: 1.2em; list-style: none; }
.p-prose ul > li { position: relative; }
.p-prose ul > li + li, .p-prose ol > li + li { margin-top: 10px; }
.p-prose ul > li::before { content: ""; position: absolute; left: -1.1em; top: .66em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.p-disclosure { font-size: 15px !important; color: var(--muted) !important; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.p-sources { margin-top: 48px !important; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px !important; line-height: 1.6 !important; color: var(--muted) !important; }
.p-sources a { color: var(--muted) !important; }

/* numbered steps: counter digits in the app's mono, like the widget */
.p-prose ol.steps { list-style: none; counter-reset: s; padding: 0; }
.steps > li { counter-increment: s; position: relative; padding: 16px 0 16px 60px; border-top: 1px solid var(--line); }
.steps > li + li { margin-top: 0 !important; }
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 17px; color: var(--orange); font: 700 26px/1 var(--mono); letter-spacing: -.04em; }

/* inline app name with its real icon */
.p-app { display: inline-flex; align-items: center; gap: .4em; vertical-align: middle; white-space: nowrap; }
.app-ic { display: inline-block; flex: none; border-radius: 23%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.p-prose h3 .app-ic { width: 36px; height: 36px; }
.p-prose h3 .p-app { gap: 12px; white-space: normal; }

/* "pick by" list: app on the left, reason on the right */
.p-prose ul.picks { padding: 0; border-top: 1px solid var(--line); }
.picks > li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 6px 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.picks > li::before { display: none; }
.picks .p-app span { color: var(--text); font-weight: 800; }
.picks > li > span:last-child { line-height: 1.5; }

/* callouts and verdicts: tinted panels with a full hairline border */
.p-callout { padding: 22px 26px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.p-callout p + p { margin-top: 10px; }
.p-callout p:not(.p-label) { font-size: 17px; }
.p-verdict { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: 20px; background: var(--o-wash); border: 1px solid var(--o-edge); }
.p-verdict .app-ic { width: 44px; height: 44px; }
.p-verdict p:not(.p-label) { font-size: 17px; line-height: 1.6; color: var(--text); }
.p-verdict + .p-verdict { margin-top: 12px; }

/* figures: real App Store frames, phone-sized, caption beside them */
.p-shot, .p-shots { margin: 40px 0 !important; }
.p-shot { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: end; }
.p-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.p-shots figcaption { grid-column: 1 / -1; }
.p-shot-img img { width: 100%; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 40px 70px -34px rgba(0, 0, 0, .9); background: #1A120D; }
.p-prose figcaption { max-width: 30em; padding-top: 12px; border-top: 3px solid var(--orange); color: var(--muted); font-size: 15px; line-height: 1.5; }
.p-shots { max-width: 540px; }

/* comparison tables: a table on wide screens, one block per row on phones */
.p-cmp-wrap { margin: 28px 0 !important; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
@media (min-width: 900px) { .p-body:not(:has(.p-toc)) .p-cmp-wrap:has(th:nth-child(5)) { margin-left: -120px !important; margin-right: -120px !important; } }
.p-cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.p-cmp th, .p-cmp td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); color: var(--muted); }
.p-cmp th { color: var(--peach); font: 700 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(255, 92, 26, .06); }
.p-cmp td:first-child { color: var(--text); font-weight: 800; }
.p-cmp tr:last-child td { border-bottom: 0; }
.p-cmp .app-ic { width: 26px; height: 26px; }
@media (max-width: 700px) {
  .p-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p-cmp, .p-cmp tbody, .p-cmp tr, .p-cmp td { display: block; }
  .p-cmp tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .p-cmp tr:last-child { border-bottom: 0; }
  .p-cmp td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 5px 0; border: 0; }
  .p-cmp td::before { content: attr(data-label); padding-top: 3px; color: var(--peach); font: 700 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .p-cmp td:first-child { display: block; padding-bottom: 8px; font-size: 18px; }
  .p-cmp td:first-child::before { display: none; }
  .p-cmp .app-ic { width: 32px; height: 32px; }
}

/* FAQ: solid panels, no frosted glass */
.p-faq { display: grid; gap: 10px; margin-top: 18px !important; }
.p-faq details { border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.p-faq details[open] { border-color: var(--o-edge); }
.p-faq summary { list-style: none; cursor: pointer; display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 18px 20px; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; flex: none; color: var(--orange); font: 700 22px/1 var(--mono); }
.p-faq details[open] summary::after { content: "-"; }
.p-faq h3 { margin: 0; font-size: 18px; }
.p-faq details p { padding: 0 20px 20px; font-size: 17px; }

/* the App Store block: the one place the page goes fully orange */
.p-get {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 32px;
  margin-top: clamp(64px, 8vw, 110px); padding: clamp(24px, 4vw, 44px); border-radius: 30px;
  background: var(--orange); color: var(--ink);
}
.p-get > img { width: 96px; height: 96px; border-radius: 23%; box-shadow: 0 18px 40px -14px rgba(60, 12, 0, .8); }
.p-get h2 { color: var(--ink); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 1.6vw + 18px, 44px); line-height: .92; letter-spacing: -.04em; }
.p-get h2 em { font-style: normal; color: #FFF6EE; }
.p-get p { margin-top: 10px; color: #3A1405; font-size: 17px; font-weight: 700; }
.p-get .badge img { height: 50px; width: auto; }
.p-get .badge:focus-visible { outline-color: var(--ink); }

/* related posts */
.p-related { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(64px, 8vw, 110px) var(--gutter) 0; }
.p-related > h2, .p-more-head h2, .p-from-head h2 { color: var(--text); font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 1.2vw + 18px, 38px); letter-spacing: -.03em; line-height: 1; }
.p-related ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 28px; }

/* shared post card bits (index, related, home strip) */
.p-posts li, .p-related li, .p-from li { position: relative; }
.p-posts a, .p-related a, .p-from li a { display: block; color: var(--text); }
.p-posts a:hover, .p-related a:hover, .p-from li a:hover { text-decoration: none; }
.p-posts img, .p-related img, .p-from img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 1px var(--line); transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .p-posts a:hover img, .p-related a:hover img, .p-from li a:hover img { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--o-edge), 0 30px 50px -30px rgba(255, 92, 26, .5); }
  .p-posts a:hover :is(h2, h3), .p-related a:hover h3, .p-from li a:hover h3 { color: var(--orange); }
}
.p-kind { display: flex; gap: 10px; align-items: baseline; margin-top: 18px; color: var(--peach); font: 700 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.p-kind b { color: var(--orange); font-weight: 700; }
.p-posts :is(h2, h3), .p-related h3, .p-from h3 { margin-top: 8px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-size: 22px; transition: color 200ms var(--ease-out); text-wrap: balance; }
.p-posts li > p, .p-related li > p, .p-from li > p { margin-top: 10px; font-size: 16px; line-height: 1.55; }
.p-posts li > p.p-meta, .p-related li > p.p-meta, .p-from li > p.p-meta { margin-top: 12px; }
.p-related li > p:not(.p-meta) { display: none; }

/* ---------- blog index: a lead story, then a numbered list like the app's own event list ---------- */
.p-index { max-width: calc(var(--wide) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(40px, 6vw, 96px) var(--gutter) 0; }
.p-index-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.p-index-head h1 { color: var(--text); font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 4.4vw + 24px, 92px); line-height: .9; letter-spacing: -.05em; }
.p-index-head p { color: var(--read); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; padding-bottom: 8px; }
html:is([lang="ja"], [lang="zh-Hans"]) .p-index-head h1 { font-size: clamp(44px, 3vw + 20px, 72px); line-height: 1.05; letter-spacing: -.02em; }

.p-posts .p-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 44px; align-items: end; padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid var(--line); }
.p-posts .p-lead a { display: contents; }
.p-posts .p-lead img { grid-column: 1; grid-row: 1 / span 4; border-radius: 24px; }
.p-posts .p-lead .p-kind, .p-posts .p-lead h2, .p-posts .p-lead > p { grid-column: 2; }
.p-posts .p-lead .p-kind { margin-top: 0; }
.p-posts .p-lead h2 { font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 1.2vw + 22px, 40px); letter-spacing: -.035em; line-height: .98; }
.p-posts .p-lead > p:not(.p-meta) { font-size: 18px; color: var(--read); }
.p-posts .p-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.p-posts .p-row a { display: contents; }
.p-posts .p-row img { grid-column: 3; grid-row: 1 / span 3; border-radius: 14px; }
.p-posts .p-row .p-kind { grid-column: 1; grid-row: 1 / span 3; margin-top: 6px; flex-direction: column; gap: 4px; }
.p-posts .p-row .p-kind b { font-size: clamp(32px, 3.4vw, 48px); line-height: 1; letter-spacing: -.04em; }
.p-posts .p-row h2 { grid-column: 2; grid-row: 1; margin-top: 0; font-size: clamp(22px, 2.2vw, 28px); }
.p-posts .p-row > p:not(.p-meta) { grid-column: 2; grid-row: 2; }
.p-posts .p-row > p.p-meta { grid-column: 2; grid-row: 3; }
.p-index .p-get { max-width: none; }

/* ---------- home: From the blog ---------- */
.p-from, .p-more { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gutter) 0; }
.p-from-head, .p-more-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.p-from-head a { padding: 12px 0; color: var(--orange); font-weight: 800; font-size: 16px; }
.p-from ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; margin-top: 28px; }
.p-from .p-lead { grid-column: span 2; grid-row: span 2; }
.p-from .p-lead h3 { font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 1.4vw + 12px, 32px); letter-spacing: -.035em; line-height: 1; }
.p-from .p-lead img { border-radius: 24px; }
.p-from .p-small h3 { font-size: 18px; }
.p-from .p-small > p:not(.p-meta) { display: none; }
.p-from .p-small .p-kind { margin-top: 14px; }

/* ---------- More apps: each card washed in its own icon colour ---------- */
.p-more { padding-bottom: clamp(64px, 8vw, 110px); }
.p-more-head p { max-width: 30em; font-size: 16px; }
.p-more ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.p-more li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; column-gap: 18px; padding: 28px;
  border-radius: 22px; border: 1px solid color-mix(in oklab, var(--tint) 30%, transparent);
  background: linear-gradient(135deg, color-mix(in oklab, var(--tint) 26%, #121210), color-mix(in oklab, var(--tint) 8%, #121210));
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.p-more li img { margin-bottom: 18px; width: 88px; height: 88px; border-radius: 23%; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .9); }
.p-more h3 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.p-more h3 a { color: var(--text); }
.p-more h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.p-more h3 a:hover { text-decoration: none; }
.p-more h3 a:focus-visible { outline: none; }
.p-more h3 a:focus-visible::after { outline: 3px solid var(--peach); outline-offset: 3px; }
.p-more li p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: #E6E3DC; }
.p-tag { justify-self: start; margin-top: 14px; padding: 4px 10px; border-radius: 8px; background: rgba(18, 18, 16, .5); color: var(--text); font: 700 12px/1.6 var(--mono); letter-spacing: .02em; }
.p-more li:hover, .p-more li:focus-within { border-color: color-mix(in oklab, var(--tint) 70%, transparent); }
@media (hover: hover) and (pointer: fine) { .p-more li:hover { transform: translateY(-3px); } }
.p-also { margin-top: 20px; font-size: 15px; }

/* about: headline beside the lit icon */
.p-about-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 28px clamp(32px, 6vw, 96px); }
.p-about-lede { margin-top: 28px; max-width: 30em; color: var(--read); font-size: clamp(19px, 1.9vw, 24px); line-height: 1.5; }
.p-about-icon { width: clamp(120px, 15vw, 200px); height: auto; border-radius: 23%; box-shadow: 0 0 0 clamp(8px, 1vw, 14px) rgba(255, 92, 26, .14), 0 40px 120px -10px rgba(255, 92, 26, .7); }
.p-prose ol.p-how { list-style: none; counter-reset: h; padding: 0; }
.p-how > li { counter-increment: h; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 12px; padding: 20px 0; border-top: 1px solid var(--line); margin: 0 !important; }
.p-how > li::before { content: counter(h, decimal-leading-zero); grid-row: span 2; color: var(--orange); font: 700 34px/1 var(--mono); letter-spacing: -.04em; }
.p-how b { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .p-index-head { grid-template-columns: minmax(0, 1fr); }
  .p-posts .p-lead { grid-template-columns: minmax(0, 1fr); }
  .p-posts .p-lead img, .p-posts .p-lead .p-kind, .p-posts .p-lead h2, .p-posts .p-lead > p { grid-column: 1; grid-row: auto; }
  .p-posts .p-lead .p-kind { margin-top: 20px; }
  .p-related ul, .p-from ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-more ul { grid-template-columns: minmax(0, 1fr); }
  .p-more li { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .p-more li img { grid-row: 1 / span 3; margin: 0; }
  .p-get { grid-template-columns: auto minmax(0, 1fr); }
  .p-get .badge { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .nav nav { gap: 14px; }
  .nav nav a { font-size: 14px; }
  .p-head h1 { font-size: clamp(34px, 10.6vw, 52px); }
  .p-byline { grid-template-columns: auto minmax(0, 1fr); }
  .p-byline .p-meta { grid-column: 1 / -1; width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .p-byline .p-meta br { display: none; }
  .p-byline .p-meta time::after { content: " · "; }
  .p-prose p, .p-prose li { font-size: 17px; }
  .p-shot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .p-shot .p-shot-img { width: min(72%, 280px); }
  .p-shot figcaption { justify-self: stretch; }
  .p-shots { gap: 12px; }
  .p-shot-img img { border-radius: 16px; }
  .picks > li { grid-template-columns: minmax(0, 1fr); }
  .p-callout, .p-verdict { padding: 18px; }
  .p-get { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
  .p-get > img { width: 80px; height: 80px; }
  .p-related ul { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p-related li { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
  .p-related li a { display: contents; }
  .p-related img { grid-row: 1 / span 3; border-radius: 10px; }
  .p-related .p-kind { margin-top: 0; }
  .p-related h3 { font-size: 18px; margin-top: 4px; }
  .p-related p.p-meta { margin-top: 6px; }
  .p-index-head h1 { font-size: 16vw; }
  .p-posts .p-row { grid-template-columns: minmax(0, 1fr) 110px; column-gap: 16px; padding: 22px 0; }
  .p-posts .p-row img { grid-column: 2; grid-row: 1 / span 2; border-radius: 10px; }
  .p-posts .p-row .p-kind { grid-column: 1; grid-row: 1; flex-direction: row; gap: 10px; margin-top: 0; }
  .p-posts .p-row .p-kind b { font-size: 12px; letter-spacing: .12em; }
  .p-posts .p-row h2 { grid-column: 1; grid-row: 2; margin-top: 6px; font-size: 20px; }
  /* explicit rows: the label kept its desktop 3-row span and a 3-line title rode up over it */
  .p-posts .p-row > p:not(.p-meta) { grid-column: 1 / -1; grid-row: 3; }
  .p-posts .p-row > p.p-meta { grid-column: 1 / -1; grid-row: 4; }
  /* home strip becomes a swipeable row */
  .p-from ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 16px; margin: 24px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .p-from ul::-webkit-scrollbar { display: none; }
  .p-from li { flex: 0 0 78%; scroll-snap-align: start; }
  .p-from .p-lead h3 { font-size: 24px; }
  .p-from .p-small h3 { font-size: 20px; }
  .p-more ul { grid-template-columns: minmax(0, 1fr); }
  .p-more li { grid-template-columns: 64px minmax(0, 1fr); padding: 18px; }
  .p-more li img { width: 64px; height: 64px; }
  .p-more h3 { font-size: 22px; }
  .p-about-head { grid-template-columns: minmax(0, 1fr); }
  .p-about-icon { grid-row: 1; width: 96px; margin-top: 8px; }
  .p-how > li { grid-template-columns: 48px minmax(0, 1fr); }
  .p-how > li::before { font-size: 26px; }
}
@media (max-width: 400px) { .nav nav { gap: 12px; } .nav nav a { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) {
  .p-posts img, .p-related img, .p-from img, .p-more li { transition: none; }
}

/* footer links are 44px tall on touch */
.foot nav { gap: 0 22px; }
.foot nav a, .foot .langs a { display: inline-block; padding: 12px 0; }

/* CJK: Japanese breaks at phrase boundaries; Chinese can break anywhere */
html[lang="ja"] :is(h1, h2, h3, .nav a) { word-break: auto-phrase; }

/* tap targets: 44px on touch (audit, 29 Oct). Also reaches the home pages, which load this file. */
.skip { padding: 12px 16px; }
.nav .brand { padding: 5px 0; }

/* Free tools (counters, printable sheets): inputs in the site's colours, numbers in the counter type */
.tool { margin: 28px 0 !important; padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); }
.tool-row { display: grid; gap: 12px; margin: 0 0 12px !important; }
.tool-row.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.tool label span { display: block; margin-bottom: 6px; color: var(--peach); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tool input { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(244, 244, 240, .22); background: var(--bg); color: var(--text); font: inherit; font-size: 17px; color-scheme: dark; }
.tool input:focus-visible, .tool-btn:focus-visible, .tool .x:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.p-prose .tool-big { margin: 18px 0 6px; color: var(--text); font-size: 20px; font-weight: 800; }
.tool-big b { color: var(--orange); font-family: var(--mono); font-size: clamp(64px, 11vw, 120px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.p-prose .tool-facts { list-style: none; padding: 0; margin: 0 0 16px; color: var(--muted); font-family: var(--mono); font-size: 15px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 6px 0 0 !important; }
.tool-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--orange); color: var(--ink); font: inherit; font-weight: 800; font-size: 16px; text-decoration: none; cursor: pointer; }
.tool-btn.ghost { background: none; color: var(--text); border: 1px solid rgba(244, 244, 240, .3); }
.tool-link { flex: 1 1 220px; }
.tool-link input { font-family: var(--mono); font-size: 13px; }
.p-prose .tool-saved { list-style: none; padding: 0; margin: 16px 0 0; }
.tool-saved li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.tool-saved b { color: var(--orange); font-family: var(--mono); font-size: 22px; }
.tool .x { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
/* Home maintenance tracker: presets, a row per job, overdue first */
.tool select { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(244, 244, 240, .22); background: var(--bg); color: var(--text); font: inherit; font-size: 17px; color-scheme: dark; }
.tool select:focus-visible, .preset:focus-visible, .home-file:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.p-prose .tool-label { margin: 0 0 8px; color: var(--peach); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px !important; }
.preset { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(244, 244, 240, .3); background: none; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.preset:disabled { opacity: .4; cursor: default; }
.home-new { grid-template-columns: minmax(0, 2fr) minmax(0, .7fr) minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: end; }
.p-prose .home-sum { margin: 14px 0 0; color: var(--text); font-family: var(--mono); font-size: 15px; }
.p-prose .home-list { list-style: none; padding: 0; margin: 12px 0 18px; }
.p-prose .home-list > li { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.p-prose .home-list > li::before { display: none; }
.home-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.home-head b { color: var(--text); font-size: 18px; }
.home-status { color: var(--muted); font-family: var(--mono); font-size: 14px; }
.home-item.late .home-status { color: var(--orange); font-weight: 700; }
.home-item.soon .home-status { color: var(--peach); }
.home-row { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: 10px; align-items: end; }
.home-row label span { font-size: 11px; }
.home-tool label { display: block; }
.home-tool input, .home-tool select { height: 50px; }
.home-tool .home-file input { height: auto; }
.home-item small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; }
.home-file { position: relative; overflow: hidden; }
.home-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
@media (max-width: 720px) {
  .home-new { grid-template-columns: 1fr 1fr; }
  .home-new label:first-child, .home-new label:last-of-type { grid-column: 1 / -1; }
  .home-row { grid-template-columns: 1fr 1.2fr; }
  .home-row label:nth-child(3) { grid-column: 1 / -1; }
}
.p-prose .tool-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.sign { margin: 18px 0 16px; padding: 28px 20px; border-radius: 18px; border: 4px solid var(--orange); text-align: center; background: var(--bg); }
.sign b { display: block; color: var(--orange); font-family: var(--mono); font-size: clamp(96px, 18vw, 180px); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.sign span { display: block; margin-top: 8px; color: var(--text); font-size: clamp(22px, 3.4vw, 36px); font-weight: 900; line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; }
.sign small { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; }
.sheet { margin: 18px 0 0 !important; padding: 22px; border-radius: 14px; background: #FBFAF6; color: #121210; overflow-x: auto; }
.p-prose .sheet h2 { margin: 0 0 6px; color: #121210; font-size: 22px; }
.p-prose .sheet p { margin: 0 0 12px; color: #3A3A36; font-size: 14px; }
.sheet table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 12px; }
.sheet th, .sheet td { height: 30px; padding: 4px 6px; border: 1px solid #3A3A36; text-align: left; color: #121210; }
.sheet th { background: #EDEAE2; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.p-prose .sheet .sheet-foot { margin: 10px 0 0; font-size: 11px; }
@media (max-width: 640px) {
    .tool { padding: 16px; }
    .tool-row.two { grid-template-columns: 1fr; }
}