/* ============================================================
Puonhime — style.css ROUND 2 (drop-in replacement)
Direction 5c: numbers-led. Nocturne tokens. Dark only.
Safari 15+ / Firefox / Chrome / Edge / Brave.
Avoids: 100svh/dvh, color-mix(), :has(), text-wrap:balance,
subgrid, container queries.
── CHANGES IN THIS ROUND ───────────────────────────────────
[1-a] JA line length fixed. `ch` resolves to ~0.5em in Noto
Sans JP, so every `max-width:52ch` was breaking Japanese
at ~26 chars. All measures now duplicated in `em` under
:lang(ja): body 36em, standfirst 30em, lede 26em,
disclaimer 40em, h1 20em.
[1-b] Paragraph gap 16px → 28px (was narrower than the 1.95
line gap, so paragraphs did not separate).
[1-c] h2 rhythm 40/12 → 56/14. On desktop the accent mark now
hangs outside the text column, so h2 text aligns flush
with body text.
[2-a] .yquote presence: JA original 1rem → 1.1rem, left rule
2px → 3px, fill raised to --color-surface-2.
[2-b] figcaption compressed — votes + date only. The source
link now lives once in .source-strip; add class
.yquote-src to any caption span that must still hold it.
[2-c] Consecutive quotes group: .yquote + .yquote gap 12px.
[2-d] .votes always first in the caption, accent-tinted,
tabular. Build must emit ▲ counts on JA pages too.
[3-a] .stat-label now wraps to 2 lines cleanly; meta-only
stats should be dropped in the build (see README).
[3-b] .article-stats is a lighter single row (value 1.4rem,
no 3-up grid) so the article entrance is not as heavy
as the landing hero.
[4-a] .source-strip .ja clamps to 2 lines.
[4-b] .source-strip gains a 1px accent left rule; the
"open the original" link sits on its own right-aligned
row (.source-strip .en a).
[5] New .hero-note — one line under the hero lede that
explains what a Japanese comment thread is.
[6-a] Index counts right-aligned + tabular so the number
column forms a vertical line.
[7] New: .next-read (end-of-article routing), .follow
(X follow block replacing the dormant newsletter),
.about-* (About page), .principles.
[8] Light mode deliberately NOT added — see README.
============================================================
:
*/
:root{
--color-bg:#161826;
--color-surface:#1c1f30;
--color-surface-2:#20233a;
--color-section:#2a2d63;
--color-text:#e9e9ed;
--color-divider:#3f424d;
--color-accent:#9184d9;
--color-accent-300:#c3bcec;
--color-neutral-100:#f3f5fe;
--color-neutral-200:#dfe2f0;
--color-neutral-300:#c2c6d8;
--color-neutral-400:#a3a7bb;
--font-heading:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
--radius-sm:4px; --radius-md:8px; --radius-lg:14px;
--shadow-sm:0 0 0 1px #3f424d;
--shadow-md:0 0 0 1px #3f424d, 0 8px 24px rgba(0,0,0,.35);
--pad-x:20px; /* mobile gutter */
--measure:44rem;
}
@media (min-width:52rem){ :root{ --pad-x:56px; } }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--color-bg)}
body{
margin:0;background:var(--color-bg);color:var(--color-text);
font-family:var(--font-body);font-size:16px;line-height:1.65;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overflow-wrap:break-word;
}
html:lang(ja) body,body:lang(ja){font-family:var(--font-jp);line-height:1.95;letter-spacing:.01em}
:lang(ja),[lang="ja"]{line-break:strict;word-break:normal}
::selection{background:#332e57;color:var(--color-neutral-100)}
a{color:var(--color-accent-300);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--color-accent);text-decoration:underline}
a:active{color:var(--color-accent)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;letter-spacing:-.025em;line-height:1.12;color:var(--color-neutral-100);margin:0}
:lang(ja) h1,:lang(ja) h2,:lang(ja) h3{letter-spacing:.01em;line-height:1.45}
/* numerals stay Inter, tabular, even inside Japanese text */
.num,.stat-value,.count,.votes{font-family:var(--font-heading);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--measure);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.band{padding:44px 0}
@media (min-width:52rem){ .band{padding:76px 0} }
.band + .band{border-top:1px solid var(--color-divider)}
.band-hero{background:radial-gradient(90% 110% at 0% 0%,#262b48 0%,var(--color-bg) 62%)}
.band-section{background:linear-gradient(115deg,var(--color-section) 0%,#20234e 100%);color:var(--color-neutral-100);border-top:0}
.band-section h2{color:var(--color-neutral-100)}
.band-section p{color:#c3c7e8}
.band-close{background:radial-gradient(70% 160% at 0% 100%,#23273f 0%,var(--color-bg) 65%)}
/* ---------- sticky header / footer ---------- */
.header-bar{
position:sticky;top:0;z-index:20;
background:rgba(22,24,38,.92);
-webkit-backdrop-filter:saturate(140%) blur(10px);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--color-divider);
}
@supports not ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
.header-bar{background:var(--color-bg)}
}
.site-header{
display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
max-width:var(--measure);margin:0 auto;padding:8px var(--pad-x);
}
.brand{font-family:var(--font-heading);font-weight:600;font-size:1rem;color:var(--color-neutral-100);margin-right:auto;white-space:nowrap}
.brand:hover{color:var(--color-neutral-100);text-decoration:none}
.site-header nav{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.site-header nav a{font-size:.875rem;color:var(--color-neutral-200);display:inline-flex;align-items:center;min-height:44px}
.site-header nav a:hover{color:var(--color-accent);text-decoration:none}
@media (min-width:52rem){
.site-header{padding:10px var(--pad-x)}
.brand{font-size:1.05rem}
.site-header nav{gap:16px}
}
.tagline{display:none}
.lang-switch{display:inline-flex;border:1px solid var(--color-divider);border-radius:var(--radius-md);overflow:hidden}
.site-header .lang-switch a{
min-height:40px;padding:0 12px;
font-family:var(--font-heading);font-size:.76rem;font-weight:500;letter-spacing:.08em;
color:var(--color-neutral-300);
}
.lang-switch a + a{border-left:1px solid var(--color-divider)}
.site-header .lang-switch a:hover{color:var(--color-neutral-100);background:rgba(233,233,237,.07);text-decoration:none}
.site-header .lang-switch a[aria-current="page"]{color:var(--color-neutral-100);background:rgba(145,132,217,.18)}
.site-footer{
max-width:var(--measure);margin:0 auto;padding:20px var(--pad-x) 34px;
display:flex;gap:18px;flex-wrap:wrap;
border-top:1px solid var(--color-divider);
font-size:.8rem;color:var(--color-neutral-300);
}
.site-footer a{color:var(--color-neutral-200)}
/* ---------- hero ---------- */
.eyebrow{
display:block;font-family:var(--font-heading);font-size:.72rem;letter-spacing:.15em;
text-transform:uppercase;color:var(--color-accent-300);
}
:lang(ja) .eyebrow{text-transform:none;letter-spacing:.12em;font-family:var(--font-jp)}
h1.display{margin-top:18px;font-size:2rem;line-height:1.06;max-width:16ch}
:lang(ja) h1.display{line-height:1.42;font-size:1.85rem;max-width:13em}
@media (min-width:52rem){ h1.display{font-size:3.5rem} :lang(ja) h1.display{font-size:3.1rem} }
.lede{margin:18px 0 0;max-width:40ch;font-size:1.05rem;line-height:1.65;color:var(--color-neutral-200)}
:lang(ja) .lede{line-height:1.95;max-width:26em}
@media (min-width:52rem){ .lede{font-size:1.19rem} }
/* [5] one-line explainer under the lede — what a JP comment thread is */
.hero-note{
margin:16px 0 0;max-width:44ch;padding-left:14px;
border-left:1px solid var(--color-accent);
font-size:.92rem;line-height:1.7;color:var(--color-neutral-300);
}
:lang(ja) .hero-note{max-width:30em;line-height:1.9}
/* ---------- stat row (the 5c signature) ---------- */
.stats{
margin-top:30px;display:flex;flex-direction:column;
border-top:1px solid var(--color-divider);
}
.stat{
display:flex;align-items:baseline;gap:14px;
padding:16px 0;border-bottom:1px solid var(--color-divider);
}
.stat-value{
flex:none;min-width:108px;font-size:2.15rem;line-height:1;font-weight:600;
letter-spacing:-.035em;color:var(--color-neutral-100);
}
.stat:first-child .stat-value{color:var(--color-accent)}
.stat-label{font-size:.85rem;line-height:1.55;color:var(--color-neutral-200)}
:lang(ja) .stat-label{line-height:1.75}
@media (min-width:52rem){
.stats{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:0}
.stat{flex-direction:column;align-items:flex-start;gap:8px;padding:26px 24px;border-bottom:0;border-left:1px solid var(--color-divider)}
.stat:first-child{padding-left:0;border-left:0}
.stat:last-child{padding-right:0}
.stat-value{min-width:0;font-size:3rem}
.stat-label{font-size:.875rem}
}
/* [3-b] article version: one light row, never the 3-up hero grid */
.article-stats{
margin-top:26px;display:flex;flex-direction:row;flex-wrap:wrap;gap:0 28px;
border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);
padding:14px 0;
}
.article-stats .stat{
flex:0 1 auto;display:flex;align-items:baseline;gap:8px;
padding:4px 0;border:0;
}
.article-stats .stat-value{min-width:0;font-size:1.4rem;letter-spacing:-.03em}
.article-stats .stat-label{font-size:.8rem;color:var(--color-neutral-300)}
@media (min-width:52rem){
.article-stats{gap:0 36px;padding:16px 0}
.article-stats .stat{flex-direction:row;align-items:baseline;gap:10px;padding:4px 0;border-left:0}
.article-stats .stat-value{font-size:1.55rem}
.article-stats .stat-label{font-size:.83rem}
}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
font-family:var(--font-heading);font-weight:500;font-size:1rem;
min-height:44px;padding:12px 20px;border-radius:var(--radius-md);
border:1px solid transparent;background:transparent;color:var(--color-neutral-100);
transition:background-color .16s,border-color .16s,color .16s;
}
:lang(ja) .btn{font-family:var(--font-jp);font-size:.95rem}
.btn:hover{text-decoration:none}
.btn-primary{border-color:var(--color-accent);color:var(--color-accent-300)}
.btn-primary:hover{background:rgba(145,132,217,.14);color:var(--color-neutral-100)}
.btn-primary:active{background:rgba(145,132,217,.24)}
.btn-secondary{border-color:var(--color-divider);color:var(--color-neutral-100)}
.btn-secondary:hover{background:rgba(233,233,237,.07)}
.btn-ghost{color:var(--color-neutral-200)}
.btn-ghost:hover{color:var(--color-accent-300)}
.btn-block{display:flex;width:100%;min-height:48px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
@media (max-width:51.99rem){ .btn-row .btn{flex:1 1 100%;min-height:48px} }
.input{
flex:1;min-height:44px;padding:11px 14px;font:inherit;font-size:.95rem;
color:var(--color-neutral-100);background:var(--color-surface);
border:1px solid var(--color-divider);border-radius:var(--radius-md);
-webkit-appearance:none;appearance:none;
}
.input::placeholder{color:var(--color-neutral-400)}
.input:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-color:transparent}
.subscribe{display:flex;gap:10px;margin-top:22px;max-width:440px;flex-wrap:wrap}
@media (max-width:33rem){ .subscribe .input,.subscribe .btn{flex:1 1 100%} }
/* [7] X follow block — the honest stand-in until a newsletter has a backend */
.follow{margin-top:24px;display:flex;flex-direction:column;gap:14px;max-width:34rem}
.follow-line{font-size:.95rem;line-height:1.7;color:var(--color-neutral-200)}
:lang(ja) .follow-line{line-height:1.9}
.follow-row{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:51.99rem){ .follow-row .btn{flex:1 1 100%;min-height:48px} }
.tag{
display:inline-flex;align-items:center;font-size:.72rem;letter-spacing:.04em;
padding:5px 10px;border-radius:6px;background:rgba(233,233,237,.08);color:var(--color-neutral-200);
}
.tag-accent{background:rgba(145,132,217,.16);color:var(--color-accent-300)}
.tag-outline{background:transparent;border:1px solid var(--color-accent);color:var(--color-accent-300)}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
/* ---------- index ---------- */
.article-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.article-list li{border-top:1px solid var(--color-divider)}
.article-list li:last-child{border-bottom:1px solid var(--color-divider)}
.article-list a{
display:flex;flex-direction:column;gap:8px;padding:18px 0;color:var(--color-neutral-100);
}
.article-list a:hover{color:var(--color-accent-300);text-decoration:none}
.entry-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--color-neutral-300)}
.entry-meta .count{font-size:1.18rem;font-weight:600;color:var(--color-accent)}
.entry-title{font-size:1.19rem;line-height:1.3;font-weight:500}
:lang(ja) .entry-title{line-height:1.6}
.entry-desc{font-size:.9rem;line-height:1.7;color:var(--color-neutral-200)}
:lang(ja) .entry-desc{line-height:1.9;max-width:32em}
.entry-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.entry-date{white-space:nowrap}
@media (min-width:52rem){
.article-list a{display:grid;grid-template-columns:104px 1fr auto;gap:24px;align-items:baseline;padding:24px 0}
.article-list a > .entry-meta{display:contents}
/* [6-a] right-aligned tabular count → the numbers form a vertical line */
.article-list a .count{grid-column:1;grid-row:1;justify-self:end;text-align:right;font-size:1.44rem}
.article-list a .entry-word{display:none}
.article-list a .entry-date{grid-column:3;grid-row:1;font-size:.78rem;color:var(--color-neutral-300)}
.article-list a .badge{grid-column:3;grid-row:2;justify-self:start;margin-top:8px}
.article-list a .entry-main{grid-column:2;grid-row:1}
.entry-title{font-size:1.5rem}
:lang(ja) .entry-title{font-size:1.4rem}
}
.list-note{margin:14px 0 0;font-size:.85rem;color:var(--color-neutral-300)}
/* ---------- article ---------- */
.article-header .eyebrow{margin-bottom:16px}
article h1{font-size:1.8rem;line-height:1.12;max-width:22ch}
:lang(ja) article h1{font-size:1.6rem;line-height:1.45;max-width:20em}
@media (min-width:52rem){ article h1{font-size:2.6rem} :lang(ja) article h1{font-size:2.3rem} }
.standfirst{margin:16px 0 0;max-width:48ch;font-size:1.05rem;line-height:1.65;color:var(--color-neutral-200)}
:lang(ja) .standfirst{line-height:1.95;max-width:30em;font-size:1.02rem}
/* [4-a][4-b] source strip */
.source-strip{
margin-top:22px;padding:14px 16px;
border-radius:var(--radius-md);border-left:1px solid var(--color-accent);
background:var(--color-surface);
display:flex;flex-direction:column;gap:7px;max-width:36rem;
}
.source-strip .label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-neutral-300)}
:lang(ja) .source-strip .label{text-transform:none;letter-spacing:.1em}
.source-strip .ja{
font-family:var(--font-jp);font-size:.92rem;line-height:1.75;color:var(--color-neutral-100);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.source-strip .en{
font-size:.83rem;line-height:1.6;color:var(--color-neutral-300);
display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
}
.source-strip .en a{margin-left:auto;color:var(--color-accent-300);white-space:nowrap;min-height:32px;display:inline-flex;align-items:center}
/* ---------- body ---------- */
.body{margin-top:8px}
.body h2{
display:flex;align-items:center;gap:12px;
margin:56px 0 14px;font-size:1.35rem;line-height:1.25;
}
.body h2::before{content:"";flex:none;width:16px;height:2px;background:var(--color-accent)}
@media (min-width:52rem){
/* [1-c] mark hangs outside the column so h2 text is flush with body text */
.body h2{position:relative;display:block;font-size:1.5rem;margin:64px 0 16px}
.body h2::before{position:absolute;left:-30px;top:.72em;width:18px}
}
.body h3{margin:34px 0 10px;font-size:1.1rem}
/* [1-a][1-b] measure + paragraph rhythm */
.body p{margin:0 0 28px;max-width:52ch;font-size:1rem;line-height:1.8;color:var(--color-neutral-200)}
:lang(ja) .body p{line-height:1.95;max-width:36em;letter-spacing:.015em}
.body p:last-child{margin-bottom:0}
.body ul,.body ol{margin:0 0 28px;padding-left:1.2rem;max-width:52ch;color:var(--color-neutral-200)}
:lang(ja) .body ul,:lang(ja) .body ol{max-width:36em}
.body li{margin-bottom:10px}
.body strong{font-weight:600;color:var(--color-neutral-100)}
.body h2 + p,.body h3 + p{margin-top:0}
.disclaimer{margin:0;max-width:60ch;font-size:.78rem;line-height:1.75;color:var(--color-neutral-300)}
:lang(ja) .disclaimer{max-width:40em;line-height:1.9}
.divider{height:1px;margin:40px 0 18px;background:var(--color-divider)}
/* ★ .yquote — the site's signature UI ------------------------- */
.yquote{
margin:26px 0;padding:18px 20px 14px;max-width:38rem;
border-radius:var(--radius-md);
background:var(--color-surface-2); /* [2-a] raised a step */
border-left:3px solid var(--color-accent); /* [2-a] 2px → 3px */
}
/* [2-c] consecutive quotes read as one group */
.yquote + .yquote{margin-top:12px}
.yquote .translation{margin:0;max-width:none;font-size:1.06rem;line-height:1.7;color:var(--color-neutral-100)}
.yquote blockquote{
margin:10px 0 0;max-width:none;font-family:var(--font-jp);font-size:.85rem;line-height:1.9;
color:var(--color-neutral-300);white-space:pre-wrap;
}
/* JA pages: the original is the only text, so it carries body weight [2-a] */
:lang(ja) .yquote blockquote{margin:0;font-size:1.1rem;line-height:1.9;color:var(--color-neutral-100);letter-spacing:.015em}
/* [2-b] compressed caption: votes + date. Source lives in .source-strip. */
.yquote figcaption{
margin-top:14px;padding-top:10px;border-top:1px solid var(--color-divider);
display:flex;gap:6px 14px;flex-wrap:wrap;align-items:baseline;
font-size:.74rem;line-height:1.6;color:var(--color-neutral-300);
}
:lang(ja) .yquote figcaption{font-size:.75rem}
.yquote .votes{
font-size:.86rem;font-weight:600;color:var(--color-accent-300);
letter-spacing:.01em;
}
.yquote figcaption a{color:var(--color-neutral-300);text-decoration:underline}
.yquote figcaption a:hover{color:var(--color-accent-300)}
/* opt-in: keep a per-quote source link when a note mixes threads */
.yquote .yquote-src{margin-left:auto}
/* thread card (landing artifact, optional) */
.thread{margin-top:24px;max-width:38rem;border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-md);overflow:hidden}
.thread-head{padding:14px 18px;background:var(--color-surface-2);display:flex;flex-direction:column;gap:5px}
.thread-head .ja{font-family:var(--font-jp);font-size:.9rem;line-height:1.7;color:var(--color-neutral-100)}
.thread-head .en{font-size:.8rem;color:var(--color-neutral-200)}
.thread-row{padding:16px 18px;border-top:1px solid var(--color-divider);display:flex;gap:14px}
.thread-row .votes{flex:none;width:62px;font-size:.75rem;line-height:1.5;color:var(--color-neutral-300)}
.thread-row .text{flex:1;font-size:.9rem;line-height:1.75;color:var(--color-neutral-100)}
.thread-more{padding:12px 18px;border-top:1px solid var(--color-divider);font-size:.78rem;color:var(--color-neutral-300)}
/* [7] next-read — end-of-article routing (was missing entirely) */
.next-read{margin-top:40px;padding-top:22px;border-top:1px solid var(--color-divider)}
.next-read .label{
display:block;font-family:var(--font-heading);font-size:.7rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-neutral-300);
}
:lang(ja) .next-read .label{font-family:var(--font-jp);text-transform:none;letter-spacing:.1em}
.next-read-card{
display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:18px 20px;
border-radius:var(--radius-md);background:var(--color-surface);
box-shadow:var(--shadow-sm);color:var(--color-neutral-100);
transition:box-shadow .16s,background-color .16s;
}
.next-read-card:hover{box-shadow:0 0 0 1px var(--color-accent);text-decoration:none;color:var(--color-neutral-100)}
.next-read-card .meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--color-neutral-300)}
.next-read-card .count{font-size:1.18rem;font-weight:600;color:var(--color-accent)}
.next-read-card .title{font-size:1.19rem;line-height:1.35;font-weight:500}
:lang(ja) .next-read-card .title{line-height:1.6}
@media (min-width:52rem){ .next-read-card .title{font-size:1.3rem} }
/* [7] About page ------------------------------------------------ */
.about-lead{margin:18px 0 0;max-width:48ch;font-size:1.1rem;line-height:1.7;color:var(--color-neutral-100)}
:lang(ja) .about-lead{max-width:30em;line-height:1.95;font-size:1.06rem}
.principles{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column}
.principles li{
padding:20px 0;border-top:1px solid var(--color-divider);
display:flex;flex-direction:column;gap:8px;
}
.principles li:last-child{border-bottom:1px solid var(--color-divider)}
.principles .p-no{
font-family:var(--font-heading);font-size:.78rem;font-weight:600;letter-spacing:.14em;
color:var(--color-accent);
}
.principles h3{font-size:1.12rem;line-height:1.35}
:lang(ja) .principles h3{line-height:1.6}
.principles p{margin:0;max-width:52ch;font-size:.95rem;line-height:1.8;color:var(--color-neutral-200)}
:lang(ja) .principles p{max-width:34em;line-height:1.95}
@media (min-width:52rem){
.principles li{display:grid;grid-template-columns:64px 1fr;gap:8px 24px;padding:24px 0}
.principles .p-no{grid-column:1;grid-row:1}
.principles h3{grid-column:2;grid-row:1}
.principles p{grid-column:2;grid-row:2}
}
.about-note{margin:26px 0 0;max-width:52ch;font-size:.85rem;line-height:1.8;color:var(--color-neutral-300)}
:lang(ja) .about-note{max-width:36em;line-height:1.95}
/* banners / badges ------------------------------------------- */
.draft-banner,.pr-banner{
display:inline-block;margin:0 10px 16px 0;padding:6px 12px;
font-family:var(--font-heading);font-size:.72rem;letter-spacing:.12em;
border:1px dashed var(--color-accent);border-radius:var(--radius-sm);
color:var(--color-accent-300);
}
:lang(ja) .pr-banner{font-family:var(--font-jp);letter-spacing:.06em}
.badge{
font-family:var(--font-heading);font-size:.68rem;letter-spacing:.1em;
padding:1px 6px;border:1px solid var(--color-accent);border-radius:var(--radius-sm);
color:var(--color-accent-300);
}
/* ---------- table ---------- */
.table{width:100%;max-width:38rem;border-collapse:collapse;font-size:.9rem;margin:0 0 28px}
.table th{
text-align:left;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-neutral-300);padding:8px 8px 8px 0;border-bottom:1px solid var(--color-divider);
}
:lang(ja) .table th{text-transform:none;letter-spacing:.06em}
.table td{padding:11px 8px 11px 0;color:var(--color-neutral-200);border-bottom:1px solid var(--color-divider);font-variant-numeric:tabular-nums}
.table td:first-child{color:var(--color-neutral-100)}
/* X embeds */
.body .twitter-tweet{margin:28px 0 !important}
.body iframe,.body .twitter-tweet-rendered{max-width:100% !important}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}
@media print{
html,body{background:#fff;color:#000}
.header-bar,.btn-row,.subscribe,.follow,.next-read{display:none}
.band-section{background:none;color:#000}
.yquote,.thread{break-inside:avoid;background:none;border:1px solid #ccc}
.body p,.body ul,.body ol,:lang(ja) .body p{max-width:none}
}