/* Derived from the read-only Payload frontend styles (2026-10-16). Tailwind directives were removed; no runtime Tailwind dependency. */
@layer reset, base, components;
@layer reset { *,*::before,*::after{box-sizing:border-box} html{line-height:1.5} body,h1,h2,h3,h4,p,figure,ul,ol{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button,input{font:inherit} img{display:block;max-width:100%} }





/* === I1 foundation: design tokens (source: plan/redesign/FINAL/tokens.css) === */
/* ==========================================================================
   多元ニュース — FINAL design tokens (Concept A · Editorial Classic, compact)
   Source of truth for web/src/app/(frontend)/styles.css (owner: I1).
   Light default; dark via prefers-color-scheme AND [data-theme="dark"]
   (the head script in layout.tsx always sets data-theme, so both paths stay in sync).

   Changes vs A-editorial/tokens.css
   - + per-category accent tokens (--cat-*) — markers/kickers/rules only, never fills behind text
   - + layout tokens for the compact mobile shell (--hdr-h, --tabs-h, --sticky-h)
   - + legacy aliases (--color-bg, --color-surface, --color-accent …) so pages not yet
       restyled keep rendering with the new palette during the migration
   - fonts: exactly 2 families / 4 weights (Sans 400·700, Serif 700·900); Inter removed
   - --fs-* mobile scale tightened (h1 28, display 32) for compact mobile

   Contrast (WCAG 2.x) — all text pairs verified, see plan/redesign/A-editorial/tokens.css for base table.
   Category accents (light on paper / paper-2 / paper-3 | dark on bg / surface / paper-3):
     industry        #1F4E8C 7.38 / 6.63 / 5.92 | #8DB4F0 8.89 / 8.26 / 7.44
     international   #6B3FA0 6.56 / 5.89 / 5.26 | #C3A5EE 8.91 / 8.27 / 7.45
     travel          #9A440E 5.81 / 5.22 / 4.67 | #F0A06A 8.91 / 8.27 / 7.45
     entertainment   #A02A68 6.16 / 5.54 / 4.95 | #F08CC0 8.26 / 7.67 / 6.91
     culture-science #735400 6.22 / 5.59 / 4.99 | #DDBE5C 10.39 / 9.65 / 8.69
     society         #45566A 6.68 / 6.00 / 5.36 | #AEBBCC 9.66 / 8.97 / 8.08
     opinion (=shu)  #B02A18 5.84 / 5.25 / 4.69 | #F0705A 6.43 / 5.97 / 5.38
     environment     #2B6639 6.09 / 5.47 / 4.89 | #7FCB91 9.73 / 9.03 / 8.14
   => every accent is AA (>=4.5) as 12px bold text on every paper tone in both themes.
   ========================================================================== */

:root {
  /* ---- colour: light (washi + sumi) ---- */
  --paper:       #F6F1E6;
  --paper-2:     #EDE5D3;
  --paper-3:     #E3D9C2;
  --ink:         #1B1814;
  --ink-2:       #463F35;
  --ink-3:       #665D4F;   /* >=13px only */
  --rule:        #CBBFA5;
  --rule-strong: #1B1814;
  --shu:         #B02A18;
  --shu-fill:    #B02A18;
  --on-shu:      #FFFFFF;
  --link:        #0B6B66;
  --link-hover:  #07504C;
  --on-link:     #F6F1E6;
  --btn:         #1B1814;
  --on-btn:      #F6F1E6;
  --focus:       #0B6B66;
  --band:        #1B1814;
  --on-band:     #F6F1E6;
  --on-band-2:   #CFC6B2;
  --img-veil:    rgba(27,24,20,0);
  --grain:       .035;
  --fade-from:   rgba(246,241,230,0);
  --fade-to:     #F6F1E6;
  --scrim:       rgba(10,8,6,.55);
  --hdr-bg:      rgba(246,241,230,.97);

  /* ---- category accents (markers, kickers, rules, fallback-card glyphs) ---- */
  --cat-industry:        #1F4E8C;
  --cat-international:   #6B3FA0;
  --cat-travel:          #9A440E;
  --cat-entertainment:   #A02A68;
  --cat-culture-science: #735400;
  --cat-society:         #45566A;
  --cat-opinion:         #B02A18;
  --cat-environment:     #2B6639;
  --cat-default:         #463F35;

  /* ---- type ---- */
  --ff-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --ff-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --fs-micro: 12px;  --fs-meta: 13px;  --fs-ui: 14px;  --fs-row: 15px;
  --fs-body: 17px;   --fs-lead: 18px;
  --fs-h4: 17px;  --fs-h3: 19px;  --fs-h2: 21px;
  --fs-h1: 28px;  --fs-display: 32px;      /* mobile; >=1024: h1 36 / display 40 via clamp */
  --lh-tight: 1.4; --lh-head: 1.5; --lh-body: 1.9;
  --fw-regular: 400; --fw-bold: 700; --fw-black: 900;   /* 500/600 are NOT loaded: never use */
  --tracking-head: .01em; --tracking-label: .12em;

  /* ---- spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --gutter: 16px; --col-gap: 28px; --page-max: 1240px; --measure: 40em;
  --sec-gap-m: 28px;   /* vertical gap between home blocks on mobile */
  --sec-gap-d: 44px;   /* … on desktop */

  /* ---- compact shell ---- */
  --hdr-h: 52px;       /* mobile header bar */
  --tabs-h: 44px;      /* mobile section tab bar (44px = minimum comfortable tap height) */
  --sticky-h: 0px;     /* header is no longer sticky (iOS Safari showed page text through the status-bar strip) */
  --tap: 44px;

  /* ---- shape ---- */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-pill: 999px;
  --hair: 1px; --rule-heavy: 3px;
  --sh-pop: 0 8px 24px rgba(27,24,20,.18);   /* drawer / menus only */
  --sh-print: 6px 6px 0 var(--paper-3);      /* gate + featured plan only */
}

:root:not([data-theme="dark"]) { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14110D; --paper-2: #1D1914; --paper-3: #28221A;
    --ink: #EFE8D8; --ink-2: #BDB3A0; --ink-3: #9C927F;
    --rule: #3A3328; --rule-strong: #EFE8D8;
    --shu: #F0705A; --shu-fill: #F0705A; --on-shu: #14110D;
    --link: #5ECDC2; --link-hover: #8DE0D7; --on-link: #14110D;
    --btn: #EFE8D8; --on-btn: #14110D; --focus: #5ECDC2;
    --band: #0A0806; --on-band: #EFE8D8; --on-band-2: #BDB3A0; --grain: 0;
    --img-veil: rgba(20,17,13,.18);
    --fade-from: rgba(20,17,13,0); --fade-to: #14110D;
    --scrim: rgba(0,0,0,.65); --hdr-bg: rgba(20,17,13,.97);
    --sh-pop: 0 8px 24px rgba(0,0,0,.6);
    --cat-industry: #8DB4F0; --cat-international: #C3A5EE; --cat-travel: #F0A06A;
    --cat-entertainment: #F08CC0; --cat-culture-science: #DDBE5C; --cat-society: #AEBBCC;
    --cat-opinion: #F0705A; --cat-environment: #7FCB91; --cat-default: #BDB3A0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14110D; --paper-2: #1D1914; --paper-3: #28221A;
  --ink: #EFE8D8; --ink-2: #BDB3A0; --ink-3: #9C927F;
  --rule: #3A3328; --rule-strong: #EFE8D8;
  --shu: #F0705A; --shu-fill: #F0705A; --on-shu: #14110D;
  --link: #5ECDC2; --link-hover: #8DE0D7; --on-link: #14110D;
  --btn: #EFE8D8; --on-btn: #14110D; --focus: #5ECDC2;
  --band: #0A0806; --on-band: #EFE8D8; --on-band-2: #BDB3A0; --grain: 0;
  --img-veil: rgba(20,17,13,.18);
  --fade-from: rgba(20,17,13,0); --fade-to: #14110D;
  --scrim: rgba(0,0,0,.65); --hdr-bg: rgba(20,17,13,.97);
  --sh-pop: 0 8px 24px rgba(0,0,0,.6);
  --cat-industry: #8DB4F0; --cat-international: #C3A5EE; --cat-travel: #F0A06A;
  --cat-entertainment: #F08CC0; --cat-culture-science: #DDBE5C; --cat-society: #AEBBCC;
  --cat-opinion: #F0705A; --cat-environment: #7FCB91; --cat-default: #BDB3A0;
}

/* Category scoping: any element with data-cat="<slug>" exposes --cat for its subtree.
   Child slugs map to their parent (video/movie/music -> entertainment, voices -> opinion,
   japan-china-exchange/japan-china-economy -> international). Server code resolves
   child -> parent via CHILD_PARENT in lib/seo/categories.ts and emits the PARENT slug. */
[data-cat]                   { --cat: var(--cat-default); }
[data-cat="industry"]        { --cat: var(--cat-industry); }
[data-cat="international"]   { --cat: var(--cat-international); }
[data-cat="travel"]          { --cat: var(--cat-travel); }
[data-cat="entertainment"]   { --cat: var(--cat-entertainment); }
[data-cat="culture-science"] { --cat: var(--cat-culture-science); }
[data-cat="society"]         { --cat: var(--cat-society); }
[data-cat="opinion"]         { --cat: var(--cat-opinion); }
[data-cat="environment"]     { --cat: var(--cat-environment); }





/* ==========================================================================
   Layering: every rule below lives in @layer base / @layer components so Tailwind utilities
   (layer `utilities`) can still override them (e.g. `p-4`, `hidden`). I2/I3 sections MUST also be wrapped
   in `@layer components { … }`.
   ========================================================================== */
@media (min-width: 64rem) {
  :root { --sticky-h: 0px; }   /* desktop masthead is not sticky */
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--sticky-h) + env(safe-area-inset-top, 0px)); padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ff-sans);
    font-size: 16px;
    line-height: 1.8;
    line-break: strict;
    overflow-wrap: break-word;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
  }
  /* paper grain: one tiny tiled SVG, never repainted (0 in dark) */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  img, svg { max-width: 100%; }
  h1, h2, h3, h4, .hd, .hd-wrap, .dek, .kicker, .cat-h1, .gate h2, .dateline { word-break: auto-phrase; }
  h1, h2, h3, h4 { text-wrap: balance; }
  .prose, .tn-article-body, .art-body, .art-dek, .gate p { word-break: normal; line-break: strict; }
  ::selection { background: var(--shu-fill); color: var(--on-shu); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
  a:hover .hd, a.hd:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}

/* ========================= === I1 foundation === ========================= */
@layer components {

/* ---- a11y / layout ---- */
.skip { position: absolute; left: -999px; top: 0; background: var(--btn); color: var(--on-btn); padding: 12px 16px; z-index: 300; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 48rem) { .wrap { padding-inline: 24px; } }
@media (max-width: 63.999rem) { .d-only { display: none !important; } }
@media (min-width: 64rem) { .m-only { display: none !important; } }

/* ---- type ---- */
.hd { font-family: var(--ff-serif); font-weight: 700; line-height: 1.5; letter-spacing: .01em; font-feature-settings: "palt"; text-wrap: pretty; word-break: auto-phrase; }
.hd-xl { font-size: clamp(23px, 4.6vw + 5px, 40px); line-height: 1.42; font-weight: 900; letter-spacing: .005em; }
.hd-l { font-size: clamp(20px, .6vw + 15px, 23px); line-height: 1.45; }
.hd-m { font-size: 17px; line-height: 1.55; }
.hd-s { font-size: var(--fs-row); line-height: 1.6; }
@media (min-width: 64rem) { .hd-m { font-size: 18px; } .hd-s { font-size: 16px; } }
.dek { color: var(--ink-2); font-size: 14.5px; line-height: 1.75; }
.meta { font-size: var(--fs-meta); color: var(--ink-3); line-height: 1.5; font-feature-settings: "palt"; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; }
.clamp3 { -webkit-line-clamp: 3; }

/* ---- labels: kicker (category colour), seals, PR ---- */
.kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--cat, var(--shu)); line-height: 1.4; position: relative; }
.kicker::before { content: ""; width: 7px; height: 7px; background: currentColor; flex: none; }
a.kicker:hover { text-decoration: underline; text-underline-offset: .2em; }
.kicker--link::after { content: ""; position: absolute; inset: -12px -6px; }   /* >= 44px hit area without extra height */
/* Plain category links: grow the hit area a little (>= 24px, WCAG 2.5.8) without stealing the neighbouring title link. */
a.kicker:not(.kicker--link)::after { content: ""; position: absolute; inset: -4px -6px; }
.seal { display: inline-flex; align-items: center; background: rgba(176, 42, 24, 0.08); color: var(--shu); border: 1px solid rgba(176, 42, 24, 0.35); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 1px 6px; border-radius: 2px; line-height: 1.4; vertical-align: baseline; white-space: nowrap; }
.seal.o { background: rgba(31, 78, 140, 0.06); color: #1F4E8C; border: 1px solid rgba(31, 78, 140, 0.3); }
:root[data-theme="dark"] .seal { background: rgba(240, 112, 90, 0.15); border-color: rgba(240, 112, 90, 0.45); color: var(--shu); }
:root[data-theme="dark"] .seal.o { background: rgba(141, 180, 240, 0.12); border-color: rgba(141, 180, 240, 0.4); color: #8DB4F0; }
.pr { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); border: 1px solid var(--rule); padding: 1px 6px; border-radius: 2px; line-height: 1.4; vertical-align: baseline; }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

/* ---- media frame (Media.tsx) ---- */
.ph { display: block; position: relative; background: var(--paper-3); overflow: hidden; aspect-ratio: 3 / 2; }
.ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ph.r169 { aspect-ratio: 16 / 9; }
.ph.r85 { aspect-ratio: 8 / 5; }
.ph.contain { background: var(--paper-2); }
.ph.contain img { object-fit: contain; object-position: center; }
.ph::after { content: ""; position: absolute; inset: 0; background: var(--img-veil); pointer-events: none; }
.ph-fb { display: flex; align-items: center; justify-content: center; background: var(--paper-2); border-top: 3px solid var(--cat, var(--rule-strong)); container-type: size; }
.ph-fb::after { display: none; }
.ph-fb i { display: block; width: min(62%, 220px); aspect-ratio: 834 / 141; background: var(--ink-2); opacity: .32; -webkit-mask: url(../brand/logo-wordmark.svg) center / contain no-repeat; mask: url(../brand/logo-wordmark.svg) center / contain no-repeat; }

/* ---- buttons / fields ---- */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--tap); min-height: var(--tap); background: none; border: 0; color: var(--ink); padding: 0; border-radius: 2px; list-style: none; font-size: 14px; font-weight: 700; cursor: pointer; }
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px; font-weight: 700; font-size: 15px; letter-spacing: .06em; background: var(--btn); color: var(--on-btn); border: 1px solid var(--btn); border-radius: 2px; line-height: 1.2; font-family: var(--ff-sans); cursor: pointer; text-align: center; }
.btn:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.btn--shu { background: var(--shu-fill); border-color: var(--shu-fill); color: var(--on-shu); }
.btn--shu:hover { background: var(--shu-fill); border-color: var(--shu-fill); color: var(--on-shu); filter: brightness(1.1); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.btn--sm { padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }
.field { width: 100%; min-height: 46px; padding: 0 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink-3); border-radius: 2px; font: inherit; font-size: 16px; }
.field::placeholder, .field input::placeholder { font-weight: 400; color: var(--ink-3); opacity: 1; }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); background: none; border: 1px solid var(--ink-3); padding: 0 12px; border-radius: 2px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { background: var(--paper-3); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; flex: none; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--rule-strong); font-size: 14px; font-weight: 700; border-radius: 2px; letter-spacing: .04em; white-space: nowrap; }
.chip[aria-current] { background: var(--btn); color: var(--on-btn); }
.chip:not([aria-current]):hover { background: var(--paper-2); }
@media (min-width: 64rem) { .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 2px; margin: 0 calc(-1 * var(--gutter)); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; min-width: 0; }

/* ---- section heads ---- */
.sec { margin-top: var(--sec-gap-m); }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 3px solid var(--rule-strong); padding-top: 6px; margin-bottom: 6px; }
.sec-head h2 { font-family: var(--ff-serif); font-size: 19px; font-weight: 900; letter-spacing: .06em; line-height: 1.4; display: flex; align-items: center; gap: 9px; }
.sec-head h2::before { content: ""; width: 10px; height: 10px; background: var(--shu-fill); flex: none; }
.sec-head .lbl { font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.more { font-size: 13px; font-weight: 700; color: var(--link); display: inline-flex; align-items: center; min-height: var(--tap); letter-spacing: .04em; white-space: nowrap; }
.more:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: .2em; }
.more-row { display: flex; justify-content: flex-end; border-top: 1px solid var(--rule); }
.mini-head { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.mini-head small { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
@media (min-width: 64rem) {
  .sec { margin-top: var(--sec-gap-d); }
  .sec-head { padding-top: 10px; margin-bottom: 18px; align-items: baseline; }
  .sec-head h2 { font-size: 21px; gap: 10px; }
  .sec-head h2::before { width: 12px; height: 12px; }
  .more { margin: -10px 0; }
}

/* ---- ads ---- */
.adbox { margin: var(--sec-gap-m) auto 0; width: 300px; max-width: 100%; height: 250px; border: 1px solid var(--rule); background: var(--paper-2); position: relative; contain: layout; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 12px; }
.adbox::before { content: "広告"; position: absolute; top: -1px; left: -1px; z-index: 1; background: var(--paper); border: 1px solid var(--rule); font-size: 11px; padding: 0 6px; color: var(--ink-2); line-height: 1.7; }
.adbox--tall { height: 600px; }
.adbox--leaderboard { width: 320px; height: 100px; }
@media (min-width: 48rem) { .adbox--leaderboard { width: 728px; height: 90px; } }

/* ---- header / masthead ---- */
.mast { position: relative; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule-strong); padding-top: env(safe-area-inset-top, 0px); }
.mast-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--hdr-h); padding-inline: 6px; max-width: var(--page-max); margin-inline: auto; }
.mast-bar .l, .mast-bar .r { display: flex; align-items: center; }
.mast-bar .r { justify-content: flex-end; }
.brand { display: flex; align-items: center; min-height: var(--tap); color: var(--ink); }
.brand svg { width: 150px; height: auto; }
.sub-cta { display: none; align-items: center; min-height: var(--tap); padding-left: 4px; }
.sub-cta span { display: inline-flex; align-items: center; height: 30px; padding: 0 11px 0 13px; background: var(--shu-fill); color: var(--on-shu); font-size: 13px; font-weight: 700; letter-spacing: .14em; border-radius: 2px; }
.sub-cta i { display: none; font-style: normal; }
.sub-cta:hover span { filter: brightness(1.1); }
/* login: hidden in the mobile bar until a signed-in member is detected (avatar takes the 購読 slot) */
.mast-bar .login { display: inline-flex; }
.mast-bar .login .avatar { display: none; width: 30px; height: 30px; align-items: center; justify-content: center; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 14px; border-radius: 2px; }
.mast-bar .login[data-me] .avatar { display: inline-flex; }
.mast-bar .login[data-me] svg { display: none; }
.mast-bar .login [data-tn-label] { display: none; }
.mast-bar .login[data-me], html[data-me] .mast-bar .login { display: inline-flex; }
/* signed-in state is applied from <html data-me> (set before first paint) so nothing flashes the logged-out UI */
[data-tn-label-me] { display: none; }
html[data-me] [data-tn-sub] { display: none !important; }
html:not([data-me]) .drawer-panel .acts a[data-tn-login] { display: none; }
html[data-me] [data-tn-label] { display: none !important; }
html[data-me] .mast-bar .login svg { display: none; }
html[data-me] .mast-bar .login .avatar { display: inline-flex; }
html[data-me] .acts [data-tn-label-me], html[data-me] .foot [data-tn-label-me] { display: inline; }
@media (min-width: 64rem) { html[data-me] .mast-bar .login [data-tn-label-me] { display: inline; } }
/* Header search / account: no grey block on hover; the label gets a thin underline and the avatar fills with the accent. */
.mast-bar .icon-btn:hover { background: none; }
@media (hover: hover) and (min-width: 64rem) {
  .mast-bar .icon-btn { padding-inline: 10px; transition: color .15s; }
  .mast-bar .icon-btn:hover { color: var(--shu); }
  .mast-bar .icon-btn > span:not(.avatar) { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .2s; }
  .mast-bar .icon-btn:hover > span:not(.avatar) { background-size: 100% 1px; }
  .mast-bar .login .avatar { transition: background-color .15s, color .15s; }
  .mast-bar .login:hover .avatar { background: var(--shu-fill); color: var(--on-shu); }
}

/* section tabs */
.tabs { height: var(--tabs-h); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; background: var(--paper); }
.tabs ul { display: flex; height: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 12px; scroll-padding-inline: 12px; }
.tabs ul::-webkit-scrollbar { display: none; }
.tabs::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(90deg, transparent, var(--paper)); pointer-events: none; }
.tabs li { flex: none; }
.tabs a { display: flex; align-items: center; height: 100%; min-width: 48px; justify-content: center; padding: 0 10px; font-size: 13.5px; font-weight: 700; white-space: nowrap; color: var(--ink-2); position: relative; letter-spacing: .02em; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--shu); }
.tabs a[aria-current]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2.5px; background: var(--shu-fill); border-radius: 2px 2px 0 0; }

/* dateline */
.dateline { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--rule); font-feature-settings: "palt"; }
.dateline b { color: var(--shu); font-weight: 700; }
.dateline[data-pro] .tg { display: none; }

/* drawer (<details>) */
.drawer > summary { list-style: none; position: relative; z-index: 3; cursor: pointer; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer .tn-ico-close { display: none; }
.drawer[open] .tn-ico-close { display: block; }
.drawer[open] .tn-ico-open { display: none; }
.drawer > :not(summary) { display: none; }
.drawer[open] > .scrim { display: block; }
.drawer[open] > .drawer-panel { display: flex; }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 1; }
.drawer-panel { position: fixed; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); background: var(--paper); border-right: 1px solid var(--rule-strong); box-shadow: var(--sh-pop); z-index: 2; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
.drawer-head { display: flex; align-items: center; padding: 0 8px 0 56px; border-bottom: 1px solid var(--rule-strong); min-height: var(--hdr-h); flex: none; }
.drawer-head .brand svg { width: 140px; }
.drawer-panel form { padding: 16px; border-bottom: 1px solid var(--rule); }
.drawer-panel nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; font-family: var(--ff-serif); font-weight: 700; font-size: 17px; border-bottom: 1px solid var(--rule); }
.drawer-panel nav a.s { font-family: var(--ff-sans); font-size: 14px; color: var(--ink-2); padding-left: 36px; min-height: 44px; justify-content: flex-start; }
.drawer-panel nav a.s::before { content: "–"; margin-right: 8px; color: var(--ink-3); }
.drawer-panel nav a b { display: inline-block; width: 7px; height: 7px; background: var(--shu-fill); }
.drawer-panel .acts { padding: 16px; display: grid; gap: 10px; background: var(--paper-2); border-bottom: 1px solid var(--rule-strong); }
.drawer-panel .who { font-size: 12px; color: var(--ink-3); text-align: center; overflow-wrap: anywhere; }
.drawer-panel .who[hidden] { display: none; }
.drawer-panel .mini { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.drawer-panel .mini a { min-height: 44px; display: inline-flex; align-items: center; }
.drawer-panel .theme-toggle { justify-self: start; }
html:has(#tn-drawer[open]) { overflow: hidden; }

/* theme toggle icons (legacy hooks kept) */
.tn-ico-sun { display: none; }
:root[data-theme="dark"] .tn-ico-sun { display: block; }
:root[data-theme="dark"] .tn-ico-moon { display: none; }

/* desktop masthead */
.nav ul { display: flex; justify-content: center; }
@media (min-width: 64rem) {
  .mast { position: static; border-bottom: 0; }
  .mast-bar { height: auto; min-height: 104px; padding-inline: 24px; gap: 8px; }
  .mast-bar .r { gap: 6px; padding-right: 0; }
  .mast-bar .l { gap: 6px; }
  .brand { padding: 10px 0; }
  .brand svg { width: 240px; }
  .mast-bar .login svg { display: block; }
  .mast-bar .login[data-me] svg { display: none; }
  .mast-bar .login [data-tn-label] { display: inline; }
  .sub-cta { display: inline-flex; padding-left: 0; }
  html:not([data-me]) .mast-bar .login { display: none; }
  .sub-cta span { height: 40px; padding: 0 20px 0 22px; font-size: 15px; }
  .sub-cta i { display: inline; }
  .mast-line { max-width: var(--page-max); margin-inline: auto; padding-inline: 24px; }
  .dateline { display: grid; grid-template-columns: 1fr auto 1fr; border-top: 1px solid var(--rule-strong); font-size: 13px; min-height: 38px; gap: 12px; }
  .dateline .tg { letter-spacing: .2em; font-size: 12px; display: block !important; }
  .dateline .mt { display: block; text-align: right; }
  .dateline .mt:empty { display: block; }
  .nav { border-bottom: 4px double var(--rule-strong); }
  /* The menu comes from CMS data: when it has more items than fit, wrap to a second row instead of overflowing the page. */
  .nav ul { flex-wrap: wrap; }
  .nav li { position: relative; }
  .nav li + li::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--rule); }
  .nav { --nav-px: clamp(8px, 1.1vw, 18px); }
  /* every tab has the same side padding; the dropdown caret sits in extra right padding so labels keep an even rhythm */
  .nav a.t { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--nav-px); font-weight: 700; font-size: clamp(13.5px, 1.4vw, 15px); letter-spacing: .02em; position: relative; white-space: nowrap; }
  .nav a.t:has(.caret) { padding-right: calc(var(--nav-px) + 13px); }
  .nav a.t[aria-current]::after, .nav a.t:hover::after, .nav li:focus-within > a.t::after { content: ""; position: absolute; left: var(--nav-px); right: var(--nav-px); bottom: 0; height: 3px; background: var(--shu-fill); }
  .nav .caret { position: absolute; right: var(--nav-px); top: 50%; width: 7px; height: 7px; margin: -6px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
  .nav .sub { position: absolute; top: 100%; left: 0; min-width: 180px; background: var(--paper); border: 1px solid var(--rule-strong); border-top: 3px solid var(--shu-fill); box-shadow: var(--sh-pop); display: none; z-index: 30; padding: 6px 0; }
  .nav li.is-open > .sub { display: block; }
  .nav .sub a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 14px; white-space: nowrap; }
  .nav .sub a:hover { background: var(--paper-2); color: var(--link); }
}
@media (min-width: 90rem) { .brand svg { width: 290px; } }

/* ---- footer ---- */
.foot { margin-top: var(--sec-gap-m); border-top: 4px double var(--rule-strong); background: var(--paper-2); padding: 14px 0 18px; }
.foot .brand svg { width: 132px; }
.foot .tag { font-size: 12px; color: var(--ink-2); margin-top: -4px; }
.foot .desc { display: none; }
.foot details { border-bottom: 1px solid var(--rule); }
.foot .about + details { border-top: 1px solid var(--rule); margin-top: 8px; }
.foot summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); font-size: 14px; font-weight: 700; letter-spacing: .06em; list-style: none; cursor: pointer; }
.foot summary::-webkit-details-marker { display: none; }
.foot summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--shu); }
.foot details[open] summary::after { content: "–"; }
.foot details ul { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 6px; }
.foot details a { display: flex; align-items: center; min-height: var(--tap); font-size: 13.5px; color: var(--ink-2); }
.foot details a:hover { color: var(--link); text-decoration: underline; }
.foot-bot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
@media (min-width: 64rem) {
  .foot { margin-top: 56px; padding: 0; }
  .foot-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px 40px; padding: 40px 0 28px; align-items: start; }
  .foot .brand svg { width: 200px; }
  .foot .tag { margin-top: 0; font-size: 13px; }
  .foot .desc { display: block; font-size: 13.5px; color: var(--ink-2); max-width: 32em; margin-top: 8px; line-height: 1.85; }
  .foot details { border: 0 !important; margin: 0 !important; }
  .foot details > ul { display: block; }
  .foot summary { pointer-events: none; cursor: default; min-height: 0; font-size: 12px; letter-spacing: .16em; border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px; margin-bottom: 6px; }
  .foot summary::after { display: none; }
  .foot details a { font-size: 14px; min-height: 34px; }
  /* 6 equal tracks: about = 2, two-column links = 2 (each sub-column = exactly 1 track, same width as the single columns), others = 1 */
  .foot .about, .foot .foot-cats { grid-column: span 2; }
  .foot .foot-cats > ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .foot-bot { border-top: 1px solid var(--rule); padding: 6px 0 28px; margin-top: 0; font-size: 12.5px; }
}
@media (min-width: 64rem) {
  .foot details::details-content { content-visibility: visible; display: block; }
}

/* ---- breadcrumbs ---- */
.crumbs { display: flex; flex-wrap: nowrap; gap: 0 8px; font-size: 13px; color: var(--ink-3); padding: 6px 0 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink-2); }
.crumbs a:hover { color: var(--link); text-decoration: underline; }
.crumbs li { display: flex; align-items: center; }
.crumbs li:last-child { max-width: min(55vw, 260px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 48rem) { .crumbs li:last-child { max-width: none; } }
@media (min-width: 64rem) { .crumbs { flex-wrap: wrap; overflow: visible; padding-top: 14px; } }

/* ---- pager ---- */
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: 0 12px; border: 1px solid var(--rule-strong); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.pager a:hover { background: var(--paper-2); }
.pager [aria-current] { background: var(--btn); color: var(--on-btn); }
.pager .gap { border: 0; min-width: 24px; padding: 0; }

/* ---- paywall: fade, gate card ---- */
.prose-fade { position: relative; }
.prose-fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; background: linear-gradient(var(--fade-from), var(--fade-to) 92%); pointer-events: none; }
.gate { max-width: var(--measure); border: 1px solid var(--rule-strong); background: var(--paper-2); padding: 28px 24px; text-align: center; position: relative; margin: 16px auto 0; z-index: 1; border-radius: 4px; }
.gate::before { display: none; }
.gate .seal { font-size: 11px; padding: 1px 8px; }
.gate h2 { font-family: var(--ff-serif); font-weight: 900; font-size: clamp(19px, 1.2vw + 15px, 23px); line-height: 1.5; margin: 12px 0 8px; }
.gate p { max-width: 32em; margin-inline: auto; font-size: 14.5px; color: var(--ink-2); line-height: 1.8; text-wrap: pretty; }
.gate ul { margin: 14px auto 4px; display: grid; gap: 4px; max-width: 30em; text-align: left; }
.gate li { font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; color: var(--ink); }
.gate li::before { content: ""; width: 5px; height: 5px; background: var(--shu-fill); flex: none; transform: translateY(-2px); border-radius: 50%; }
.gate .acts { display: flex; flex-direction: column; gap: 10px; width: min(100%, 320px); margin: 20px auto 0; }
.gate .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.gate .price strong { font-family: var(--ff-serif); font-size: 28px; font-weight: 900; line-height: 1; }
.gate .price span { font-size: 13px; color: var(--ink-2); }
.gate .login { font-size: 13.5px; margin-top: 10px; color: var(--ink-2); text-align: center; }
.gate .login a { color: var(--link); text-decoration: underline; font-weight: 700; display: inline-flex; align-items: center; min-height: 40px; padding: 0 4px; }
@media (max-width: 39.99rem) { .gate { padding: 20px 16px; margin-top: 12px; } }

/* ---- article body typography (.prose + BlockRenderer .tn-* classes) ---- */
.prose, .tn-article-body { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.prose { margin-top: 28px; }
.prose p { margin: 0 0 1.35em; letter-spacing: .02em; }
.prose h2 { font-family: var(--ff-serif); font-size: clamp(20px, .7vw + 17px, 25px); line-height: 1.55; font-weight: 900; margin: 2.1em 0 .8em; padding-top: .55em; border-top: 1px solid var(--rule-strong); position: relative; }
.prose h2::before { content: ""; position: absolute; left: 0; top: -3px; width: 56px; height: 5px; background: var(--shu-fill); }
.tn-p { margin: 0 0 1.35em; letter-spacing: .02em; text-wrap: pretty; }
.tn-h2 { font-family: var(--ff-serif); font-size: clamp(20px, .7vw + 17px, 25px); line-height: 1.55; font-weight: 900; margin: 2.1em 0 .8em; padding-top: .55em; border-top: 1px solid var(--rule-strong); position: relative; text-wrap: balance; }
.tn-h2::before { content: ""; position: absolute; left: 0; top: -3px; width: 56px; height: 5px; background: var(--shu-fill); }
.tn-h3 { font-family: var(--ff-serif); font-size: 19px; line-height: 1.55; font-weight: 700; margin: 1.8em 0 .6em; text-wrap: balance; }
.tn-h4 { font-size: 17px; line-height: 1.6; font-weight: 700; margin: 1.5em 0 .5em; }
.tn-list { margin: 1.25em 0; padding-left: 1.6em; }
.tn-list-ordered { list-style-type: decimal; }
.tn-list-unordered { list-style-type: disc; }
.tn-list-item { margin: .35em 0; line-height: 1.8; }
.tn-list-item::marker { color: var(--shu); }
.tn-quote { margin: 1.75em 0; padding: .4em 0 .4em 1.1em; border-left: 3px solid var(--shu-fill); color: var(--ink-2); font-family: var(--ff-serif); font-weight: 700; }
.tn-quote-content { font-style: normal; }
.tn-quote-cite { display: block; margin-top: .5em; font-size: 13px; color: var(--ink-3); font-style: normal; font-family: var(--ff-sans); font-weight: 400; }
.tn-figure { margin: 2em 0; }
.tn-img { width: 100%; height: auto; display: block; border-radius: 0; }
.tn-figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.65; color: var(--ink-3); }
.tn-caption-text { margin-right: .5em; }
.tn-image-credit { color: var(--ink-3); }
.tn-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 2em 0; }
.tn-gallery-item { margin: 0; }
.tn-embed { margin: 2em 0; overflow: hidden; }
.tn-embed-youtube { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.tn-embed-iframe { width: 100%; height: 100%; border: 0; }
.tn-link-card { display: block; padding: .9em 1.1em; background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); text-decoration: none; }
.tn-link-card:hover { border-left-color: var(--shu-fill); }
.tn-link-card-provider { display: block; font-size: 12px; font-weight: 700; color: var(--link); margin-bottom: .25em; }
.tn-link-card-title { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.tn-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 2em 0; }
.tn-table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
.tn-thead { background: var(--paper-2); }
.tn-th { padding: .7em 1em; border: 1px solid var(--rule); font-weight: 700; color: var(--ink); }
.tn-td { padding: .7em 1em; border: 1px solid var(--rule); color: var(--ink); }
.tn-divider { border: 0; height: 1px; background: var(--rule-strong); margin: 2.5em 0; }
.tn-callout { margin: 1.75em 0; padding: 1em 1.25em; border-left: 3px solid var(--rule-strong); background: var(--paper-2); }
.tn-callout-info { border-left-color: var(--link); }
.tn-callout-note { border-left-color: var(--cat-culture-science); }
.tn-callout-warning { border-left-color: var(--shu-fill); }
.tn-callout-content { font-size: 15px; line-height: 1.75; }
.tn-pre { background: var(--paper-2); border: 1px solid var(--rule); padding: 1em 1.25em; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 1.5em 0; }
.tn-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; line-height: 1.6; }
.tn-inline-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .875em; background: var(--paper-3); padding: .1em .35em; border-radius: 2px; }
.tn-bold { font-weight: 700; }
.tn-italic { font-style: italic; }
.tn-underline { text-decoration: underline; text-underline-offset: 3px; }
.tn-strike { text-decoration: line-through; }
.tn-link { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.tn-link:hover { color: var(--link-hover); }
.tn-ad-slot { min-height: 250px; background: var(--paper-2); border: 1px solid var(--rule); margin: 2em 0; display: flex; align-items: center; justify-content: center; }
.tn-ad-slot::after { content: "広告"; font-size: 12px; color: var(--ink-3); }
.paywalled-fade { position: relative; overflow: hidden; max-height: 11rem; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, transparent 100%); user-select: none; pointer-events: none; }

/* ---- free layout block (.tn-rich, CMS block `layout`) + fx-* design kit ----
   Sanitizer: lib/blocks/rich-html.ts. Agent guide: web/docs/free-layout-blocks.md.
   contain: paint keeps everything inside the block (nothing can overlay the site chrome). */
.tn-rich { margin: 2em 0; contain: layout paint; overflow-wrap: anywhere; }
.tn-rich :where(img, iframe, video, table) { max-width: 100%; }
.tn-rich :where(img) { height: auto; }
.tn-rich :where(p) { margin: 0 0 1em; }
.tn-rich :where(a) { color: var(--link); text-underline-offset: 3px; }
.tn-rich :where(h2, h3, h4) { font-family: var(--ff-serif); font-weight: 700; line-height: 1.5; margin: 1.4em 0 .6em; }
.tn-rich :where(iframe) { display: block; width: 100%; border: 0; }
.fx-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.25em 0; }
.fx-btns--center { justify-content: center; }
.fx-btns--stack { flex-direction: column; align-items: stretch; }
.fx-btns--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tn-rich .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--btn); background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 15px; line-height: 1.3; text-decoration: none; border-radius: var(--radius-md); }
.tn-rich .fx-btn:hover { opacity: .88; }
.tn-rich .fx-btn--accent { background: var(--shu-fill); border-color: var(--shu-fill); color: var(--on-shu); }
.tn-rich .fx-btn--outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.tn-rich .fx-btn--link { background: var(--link); border-color: var(--link); color: var(--on-link); }
.tn-rich .fx-btn--block { display: flex; width: 100%; }
.fx-icon { width: 24px; height: 24px; object-fit: contain; flex: none; }
.fx-icon--lg { width: 40px; height: 40px; }
.fx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 1.25em 0; }
.fx-card { display: block; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
a.fx-card:hover { border-color: var(--rule-strong); }
.fx-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 10px; }
.fx-card-title { display: block; font-weight: 700; font-size: 16px; line-height: 1.5; }
.fx-card-text { display: block; font-size: 14px; line-height: 1.7; color: var(--ink-2); margin-top: 4px; }
.fx-box { padding: 16px 18px; border: 1px solid var(--rule); background: var(--paper-2); margin: 1.25em 0; }
.fx-box--accent { border-left: 4px solid var(--shu-fill); }
.fx-box--ink { background: var(--band); color: var(--on-band); border-color: var(--band); }
.fx-badge { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; border-radius: var(--radius-sm); vertical-align: middle; }
.fx-badge--accent { color: var(--shu); }
.fx-grid-2, .fx-grid-3 { display: grid; gap: 16px; margin: 1.25em 0; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .fx-grid-2 { grid-template-columns: repeat(2, 1fr); } .fx-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.fx-center { text-align: center; }
.fx-muted { color: var(--ink-3); font-size: 14px; }
.fx-lead { font-size: 1.1em; font-weight: 700; line-height: 1.7; }
.fx-acc { border-top: 1px solid var(--rule); }
.fx-acc:last-of-type { border-bottom: 1px solid var(--rule); }
.fx-acc > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; padding: 8px 0; }
.fx-acc > :not(summary) { margin: 0 0 12px; }
.fx-embed { aspect-ratio: 16 / 9; margin: 1.25em 0; }
.fx-embed > iframe { width: 100%; height: 100%; }
.fx-embed--tall { aspect-ratio: auto; }
.fx-embed--tall > iframe { height: 820px; }
.fx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fx-table th, .fx-table td { border: 1px solid var(--rule); padding: .6em .8em; text-align: left; }
.fx-table th { background: var(--paper-2); }
.fx-divider { border: 0; height: 1px; background: var(--rule); margin: 1.75em 0; }

/* legacy utility kept for un-migrated cards (card overlay link) */
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 10; }

} /* end @layer components (I1) */

/* ==== I2 home ==== */
/* Owner: coder I2. Wrap rules in `@layer components { … }`. Classes: .top .latest .rank .digest .dg-* .thumb-left .textrows
   .vband .vid .play .partners .front .col-* */
@layer components {

/* ---- shared teaser bits ---- */
.hd-wrap { margin: 0; font: inherit; }
.st-img { display: block; position: relative; }
.st { display: block; min-width: 0; }
.st .ph { margin-bottom: 12px; }
.st .tags { margin-bottom: 6px; }
.st .hd { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.st .dek { margin-bottom: 8px; }
.st--lead .ph { margin-bottom: 10px; }
.st--noimg { border-top: 3px solid var(--cat, var(--rule-strong)); padding-top: 10px; }
.st-list > li + li { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 14px; }

/* ---- top story ---- */
.top { padding-top: 14px; }
.top .ph { margin: 0 calc(-1 * var(--gutter)) 10px; }
.top h1 { margin: 6px 0; }
.top .hd-xl { text-wrap: balance; }
.top .hd { display: block; }
.top--text { padding-top: 16px; border-top: 3px solid var(--cat, var(--rule-strong)); }
.top--text .tags { margin-top: 0; }
.top--text .hd-xl { font-size: clamp(26px, 5.4vw + 6px, 44px); }
.top-dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
@media (min-width: 48rem) { .top .ph { margin-inline: -24px; } }

/* ======================= HOME REDESIGN (front grid / digest / 動画 band) =======================
   Principle: content may vary, the SKELETON never moves. Fixed aspect ratios, line-clamped titles, fixed row counts,
   fixed card heights. Order of the home page: front (hero | 最新 | PICK UP) -> 分野別 (.digest) -> 動画 band -> partners.
   Mobile/tablet (<1024): hero, 最新 (5 rows), 分野別 = scroll-snap rail of category cards.
   Desktop (>=1024): 12-col front (hero 8 / 最新 4, 6 rows) + quiet PICK UP row; 分野別 = 3/4-column hairline grid. */
:root { --home-gap: 40px; }
@media (min-width: 64rem) { :root { --home-gap: 56px; } }
.front > * { min-width: 0; }
.col-r > .sec:first-child { margin-top: var(--sec-gap-m); }
/* hero: image is always 16:9 (Media r169); headline clamped, so the block height depends on the data only through the dek */
.top h1 .hd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.latest li, .latest .row-c { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--rule); }
.latest li:first-child, .latest .row-c:first-child { border-top: 0; padding-top: 0; }
.latest .row-c-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.latest time { font-size: 12px; color: var(--ink-3); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; }
.latest .hd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; font-size: 15px; }
.latest .kicker { font-size: 11.5px; position: relative; z-index: 1; }
.latest li, .latest .row-c { position: relative; }
.latest .hd a::after, .latest a.hd::after { content: ""; position: absolute; inset: 0; }
.latest li:nth-child(n+5) { display: flex; }  /* mobile: max 4 rows */
@media (min-width: 40rem) {
  .front { display: grid; grid-template-columns: minmax(0, 1fr) 288px; grid-template-areas: "c r" "l l"; }
  .col-c { grid-area: c; padding-right: 28px; }
  .col-r { grid-area: r; padding-left: 28px; border-left: 1px solid var(--rule); }
  .col-l { grid-area: l; }
  .col-r > .sec:first-child { margin-top: 0; }
  .col-r .sec-head { border-top: 0; padding-top: 14px; }
}
@media (min-width: 48rem) {
  .top h1 .hd { -webkit-line-clamp: 2; }
}
@media (min-width: 64rem) {
  /* 12-column front: hero 8/12 | 最新ニュース 4/12; PICK UP spans the full width underneath */
  .front { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "c c c c c c c c r r r r" "l l l l l l l l l l l l"; padding-top: 26px; }
  .col-c { padding-right: 36px; }
  .col-r { padding-left: 36px; }
  .top { padding-top: 0; }
  .top .ph { margin: 0 0 16px; border-radius: 2px; }
  .top h1 { margin: 10px 0 12px; }
  .top h1 .hd { min-height: 2.9em; }
  .top-dek { -webkit-line-clamp: 3; font-size: 15.5px; }
  .col-r .sec-head { border: 0; border-bottom: 1px solid var(--rule-strong); padding: 0 0 6px; margin-bottom: 8px; }
  .col-r .sec-head h2 { font-size: 13px; letter-spacing: .14em; font-family: var(--ff-sans); }
  .col-r .sec-head h2::before { display: none; }
  .latest li, .latest .row-c { padding: 10px 0; }
  .latest li:nth-child(n+5) { display: flex; }
  .latest li:nth-child(n+6) { display: none; }
  /* quiet PICK UP row */
  .col-l { margin-top: 32px; border-top: 1px solid var(--rule-strong); padding-top: 14px; }
  .col-l .mini-head { border-bottom: 0; margin-bottom: 14px; padding-bottom: 0; font-size: 12px; color: var(--ink-3); }
  .col-l .st-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; }
  .col-l .st-list > li { border: 0; margin: 0; padding: 0; position: relative; }
  .col-l .st-list > li + li::before { content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 1px; background: var(--rule); }
  .col-l .st .hd { -webkit-line-clamp: 3; font-size: 15.5px; }
  .col-l .st-list > li.row-t { border-top: 2px solid var(--cat, var(--rule-strong)); padding-top: 10px; min-height: 160px; }
  .col-l .row-t .hd { font-size: 15.5px; -webkit-line-clamp: 3; }
  .col-l .row-t .dek { margin-top: 6px; color: var(--ink-2); }
}

/* ---- ranking list ---- */
.rank { list-style: none; margin: 0; padding: 0; }
.rank li, .rank .row-r { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); align-items: flex-start; }
.rank li:first-child, .rank .row-r:first-child { border-top: 0; padding-top: 0; }
.rank .n { font-family: var(--ff-serif); font-weight: 900; font-size: 20px; line-height: 1.2; text-align: center; color: var(--ink-3); }
.rank li:first-child .n { color: var(--shu); }
.rank li:nth-child(2) .n { color: #8A5A2B; }
.rank li:nth-child(3) .n { color: #5B6878; }
.rank .rank-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rank .hd { display: block; line-height: 1.45; }
.rank .rank-t { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank .tags { margin-top: 2px; }
.rank .kicker { font-size: 11.5px; }
@media (min-width: 64rem) {
  .rank li, .rank .row-r { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
  .rank .n { font-size: 24px; }
  .rank .rank-t { font-size: 14.5px; }
}

/* ---- rows ---- */
.row-t .tags { margin-bottom: 3px; }
.row-t .hd, .thumb-left .hd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
.row-t .meta { margin-top: 2px; }
.textrows > li { padding: 9px 0; border-top: 1px solid var(--rule); }
.thumb-left { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: start; padding-bottom: 10px; min-width: 0; }
.thumb-left .ph { aspect-ratio: 3 / 2; }
.thumb-left .hd { -webkit-line-clamp: 3; margin-top: 2px; }
.thumb-left .tags { margin-bottom: 2px; }
.thumb-left .dek { display: none; }
.thumb-left .meta { margin-top: 3px; }
@media (min-width: 38.75rem) {
  .thumb-left { grid-template-columns: 200px 1fr; gap: 20px; }
  .thumb-left .dek { display: -webkit-box; margin-top: 4px; }
}

/* ---- home rhythm: every home block (digest, 動画 band, partners) starts the same vertical gap after the previous one ---- */
.digest, .vband, .partner-sec { margin-top: var(--home-gap); }

/* ---- 分野別ニュース (.digest): <1024px scroll-snap rail of category cards; >=1024px 3-column (4 from 80rem) hairline grid ---- */
.digest { --wrap-pad: 16px; --dg-gap: 24px; --dg-thumb: 80px; border-top: 3px solid var(--rule-strong); padding-top: 6px; }
.digest-rail { display: flex; gap: var(--dg-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--wrap-pad)); padding: 0 var(--wrap-pad) 4px; scroll-padding-inline: var(--wrap-pad); }
.digest-rail::-webkit-scrollbar { display: none; }
.digest-rail:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.dg-card { position: relative; flex: 0 0 min(80vw, 330px); min-width: 0; min-height: 316px; display: flex; flex-direction: column; scroll-snap-align: start; }
.dg-card:not(:first-child)::before { content: ""; position: absolute; left: calc(var(--dg-gap) / -2); top: 12px; bottom: 0; width: 1px; background: var(--rule); }
.dg-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: var(--tap); }
.dg-head h3 { font-family: var(--ff-serif); font-weight: 900; font-size: 17px; letter-spacing: .03em; line-height: 1.4; min-width: 0; }
.dg-head h3 a { display: flex; align-items: center; gap: 6px; min-height: var(--tap); min-width: 0; }
.dg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-head h3 a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--shu)); flex: none; }
.dg-head .more { flex: none; font-size: 13px; letter-spacing: 0; }
@media (max-width: 39.999rem) { .dg-head .more { font-size: 12px; } }
@media (max-width: 22.4375rem) { .dg-head h3 { font-size: 15px; letter-spacing: .01em; } }
.dg-card .thumb-left { grid-template-columns: var(--dg-thumb) minmax(0, 1fr); gap: 14px; padding: 4px 0 12px; align-items: start; }
.dg-card .thumb-left .ph { aspect-ratio: 1 / 1; margin: 0; }  /* square thumb, also for the no-image placeholder */
.dg-card .thumb-left .hd { font-size: 16px; -webkit-line-clamp: 2; margin-top: 0; }
.dg-card .textrows > li { padding: 10px 0; border-top: 1px solid var(--rule); }
.dg-card .row-t .hd { font-size: 15.5px; }
@media (min-width: 40rem) {
  .dg-card { flex-basis: min(46vw, 340px); }
}
@media (min-width: 48rem) {
  .digest { --wrap-pad: 24px; }
}
@media (min-width: 64rem) {
  .digest { --dg-gap: 48px; padding-top: 14px; }
  .digest-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--dg-gap); overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .digest-rail:focus-visible { outline-offset: 4px; }
  .dg-card { flex: none; min-height: 0; padding: 16px 0 8px; scroll-snap-align: none; }
  .dg-card:not(:first-child)::before, .dg-card::after { content: none; }
  .dg-head { min-height: 40px; }
  .dg-head h3 { font-size: 15.5px; letter-spacing: .03em; }
  .dg-head .more { font-size: 12px; margin: 0; }
  .dg-card .thumb-left { padding-top: 6px; gap: 12px; }
  .dg-card .textrows > li { padding-block: 9px; }
}
@media (min-width: 64rem) and (max-width: 79.999rem) {
  .dg-card:nth-child(-n+3) { padding-top: 6px; }
  .dg-card:not(:nth-child(3n+1))::before { content: ""; top: 0; }
  .dg-card:nth-child(n+4)::after { content: ""; position: absolute; top: 0; left: calc(var(--dg-gap) / -2); right: calc(var(--dg-gap) / -2); height: 1px; background: var(--rule); }
  .dg-card:nth-child(3n+1)::after { left: 0; }
  .dg-card:nth-child(3n)::after { right: 0; }
}
@media (min-width: 80rem) {
  .digest { --dg-gap: 40px; }
  .digest-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dg-head h3 { font-size: 15px; letter-spacing: .02em; }
  .dg-head .more { font-size: 11.5px; }
  .dg-card:nth-child(-n+4) { padding-top: 6px; }
  .dg-card:not(:nth-child(4n+1))::before { content: ""; top: 0; }
  .dg-card:nth-child(n+5)::after { content: ""; position: absolute; top: 0; left: calc(var(--dg-gap) / -2); right: calc(var(--dg-gap) / -2); height: 1px; background: var(--rule); }
  .dg-card:nth-child(4n+1)::after { left: 0; }
  .dg-card:nth-child(4n)::after { right: 0; }
}

/* ---- 動画 band: standalone full-width dark band; horizontal scroll-snap scroller of 16:9 cards (the next one peeks) ---- */
.vband { background: var(--band); color: var(--on-band); padding: 14px 0 22px; }
.vband-in { --wrap-pad: 16px; }
.vband .sec-head { border-top-color: var(--on-band-2); margin-bottom: 10px; }
.vband .sec-head h2, .vband .more { color: var(--on-band); }
.vband .scroller { grid-auto-columns: min(72vw, 280px); gap: 14px; margin-inline: calc(-1 * var(--wrap-pad)); padding-inline: var(--wrap-pad); scroll-padding-inline: var(--wrap-pad); overscroll-behavior-x: contain; }
.vband .meta { color: var(--on-band-2); }
/* Dark theme: the global --band is almost the page colour there, so the video band vanished; lift it one step and rule it off. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vband { background: var(--paper-2); border-block: 1px solid var(--rule); } }
:root[data-theme="dark"] .vband { background: var(--paper-2); border-block: 1px solid var(--rule); }
.vid { position: relative; min-width: 0; }
.vid .ph { margin-bottom: 8px; }
.vid .play { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(10, 8, 6, .7); border: 1.5px solid #F6F1E6; display: flex; align-items: center; justify-content: center; z-index: 2; }
.vid .play::after { content: ""; border-left: 11px solid #F6F1E6; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.vid .hd { color: var(--on-band); }
@media (min-width: 48rem) {
  .vband-in { --wrap-pad: 24px; }
}
@media (min-width: 64rem) {
  .vband { padding: 18px 0 28px; }
  .vband .sec-head { margin-bottom: 16px; }
  .vband .scroller { gap: 20px; }
}

/* ---- partners ---- */
.pr-lbl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); letter-spacing: .08em; }
.partners { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); min-width: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.pcard:hover, .pcard:focus-visible { border-color: var(--rule-strong); box-shadow: var(--sh-print); }
/* artwork sits on white so logos stay legible in dark mode */
.pcard-img { display: flex; align-items: center; justify-content: center; background: #fff; padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.pcard-img img { display: block; width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.pcard--wide .pcard-img { padding: 0; }
.pcard--wide .pcard-img img { max-height: none; }
.pcard-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 12px; }
.pcard .p-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
.pcard .p-desc { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.pcard .p-cta { font-size: 12.5px; font-weight: 700; color: var(--link); margin-top: 2px; }
.pcard:hover .p-cta { color: var(--link-hover); text-decoration: underline; }
@media (min-width: 40rem) {
  .partners { grid-template-columns: 1fr 1fr; }
  .pcard--wide { grid-column: 1 / -1; flex-direction: row; }
  .pcard--wide .pcard-img { flex: 0 0 62%; border-bottom: 0; border-right: 1px solid var(--rule); }
  .pcard--wide .pcard-body { flex: 1; justify-content: center; }
}
@media (min-width: 64rem) {
  .partner-sec { margin-top: var(--sec-gap-d); }
  .partners { gap: 18px; }
  .pcard .p-name { font-size: 16px; }
  .pcard .p-desc { font-size: 13.5px; }
  .pcard .p-cta { font-size: 13.5px; }
  .pcard-body { padding: 14px 20px 16px; gap: 5px; }
  .pcard--wide .pcard-body { padding: 20px 28px; }
  .pcard-img img { max-height: 170px; }
  /* compact 3-up: fixed 2:1 image area (logos contained, never cropped), 1-line name and description */
  .partners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcard--wide { grid-column: auto; flex-direction: column; }
  .pcard-img, .pcard--wide .pcard-img { flex: none; aspect-ratio: 2 / 1; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pcard-img img, .pcard--wide .pcard-img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
  .pcard-body, .pcard--wide .pcard-body { padding: 10px 16px 12px; gap: 2px; justify-content: flex-start; }
  .pcard .p-name, .pcard .p-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pcard .p-name { font-size: 15px; }
  .pcard .p-desc { font-size: 12.5px; }
  .pcard .p-cta { font-size: 12.5px; }
}

} /* end @layer components (I2) */
/* ==== /I2 home ==== */

/* ==== I3 inner ==== */
/* Owner: coder I3. Wrap rules in `@layer components { … }`. Classes: .art-* .byline .hero .endcta .tagrow .related
   .nextart .cat-* .rows .plans .plan .cycle .compare .faq .auth-* */
@layer components {

/* ---------- article ---------- */
.art-grid { display: block; }
.art { min-width: 0; }
.art-head { max-width: 760px; margin-top: 4px; }
.art-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.art-title { font-weight: 900; font-size: clamp(24px, 1.2vw + 19px, 36px); line-height: 1.42; letter-spacing: .005em; margin-top: 10px; }
.art-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 13px; line-height: 1.8; color: var(--ink-3); min-width: 0; }
.byline > * + *::before { content: "·"; margin-right: 10px; color: var(--ink-3); }
.byline a { position: relative; color: var(--ink); font-weight: 700; }
.byline a::after { content: ""; position: absolute; inset: -12px -4px; }
.byline a:hover { color: var(--link); text-decoration: underline; }
.byline .upd { display: none; }
@media (min-width: 40rem) { .byline .upd { display: inline; } }
.byline .src { font-weight: 400; color: var(--ink-3); }
.byline .by > .src::before { content: none; }
.share--c { display: inline-flex; flex: none; margin-right: -10px; }
.share--c .icon-btn svg { width: 20px; height: 20px; }
.share--c .share-copy { padding: 0 10px; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.share--c:has(.share-copy) { margin-right: 0; }
.art-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; min-height: 44px; }
.art-act:not([data-ready]) { visibility: hidden; }
.act-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 2px; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.act-b:hover { background: var(--paper-2); }
.act-b svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; flex: none; }
.act-b[aria-pressed="true"] { border-color: var(--shu-fill); color: var(--shu-fill); }
.act-b[aria-pressed="true"] svg { fill: currentColor; }
.act-b[aria-busy="true"] { opacity: .7; }
.act-n { font-variant-numeric: tabular-nums; }
.act-n:empty { display: none; }
.act-hint { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--ink-2); }
.act-hint:empty { display: none; }
.art-act--end { margin: 28px 0 8px; padding-top: 18px; border-top: 1px solid var(--rule); align-items: center; }
.act-ask { flex-basis: 100%; margin: 0 0 2px; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.hero { margin: 14px calc(-1 * var(--gutter)) 0; }
.hero figcaption { font-size: 12.5px; line-height: 1.65; color: var(--ink-3); padding: 6px var(--gutter) 0; }
@media (min-width: 48rem) { .hero { margin-inline: 0; } .hero figcaption { padding-inline: 0; } }
.art-dek { margin-top: 18px; padding-left: 14px; border-left: 3px solid var(--shu-fill); font-size: 16px; line-height: 1.85; color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.art-body { margin-top: 24px; }
.art .adbox { margin-top: 32px; }
.tagrow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 36px calc(-1 * var(--gutter)) 0; padding-inline: var(--gutter); }
.tagrow::-webkit-scrollbar { display: none; }
.tagrow .chip { font-weight: 400; }
@media (min-width: 48rem) { .tagrow { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; } }
.art-share { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--rule); }
.art-share > span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--rule-strong); border-radius: 2px; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.share-b:hover { background: var(--paper-2); }
.share-b svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; flex: none; }
@media (max-width: 30rem) { .art-share .share { width: 100%; flex-wrap: nowrap; gap: 6px; } .art-share .share-b { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: 12px; gap: 4px; } .art-share .share-b svg { width: 14px; height: 14px; } }
.art-aside { padding-top: 14px; }
.art-aside-in { position: sticky; top: 24px; }
.art-static { max-width: 48rem; padding-bottom: 48px; }
.art-static .art-title { margin-top: 12px; }
@media (min-width: 64rem) {
  .art-grid { max-width: 760px; margin-inline: auto; }
  .art-grid.has-aside { display: grid; grid-template-columns: minmax(0, 760px) 300px; gap: 56px; max-width: none; justify-content: center; }
}

/* body island: skeleton + error */
.body-skel { display: grid; gap: 14px; padding-top: 6px; min-height: 16rem; max-width: var(--measure); }
.body-skel i { display: block; height: 14px; background: var(--paper-3); animation: tn-pulse 1.4s ease-in-out infinite; }
@keyframes tn-pulse { 50% { opacity: .45; } }
.body-err { margin-top: 16px; font-size: 14px; color: var(--shu); font-weight: 700; }

/* gate wrapper */
.gate-wrap { margin-top: 20px; }
.gate-teaser { max-width: var(--measure); max-height: 7rem; overflow: hidden; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); user-select: none; }
.gate-teaser p { margin: 0 0 1.2em; }
.gate-wrap .gate { margin-top: -20px; }
.gate-note { font-size: 12.5px !important; color: var(--ink-3) !important; text-align: center; margin-top: 12px; }
.gate .seal { display: inline-block; }

/* 次の記事 / 関連記事 */
.nextart { margin-top: 36px; border-top: 3px solid var(--rule-strong); padding: 12px 0 4px; position: relative; display: grid; gap: 6px; }
.nextart-lbl { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-3); }
.nextart-k { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
.nextart h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nextart-k .kicker { z-index: 2; }
.related { margin-top: 32px; }
.related .sec-head { margin-bottom: 4px; }
.related .rows .row:last-child { border-bottom: 0; }
.art > .more-row { margin-top: 4px; }
@media (min-width: 64rem) {
  .related { margin-top: 48px; }
  .related .rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .related .row { grid-template-columns: 1fr; border-bottom: 0; padding: 0; gap: 10px; align-content: start; }
}

/* ---------- listing rows (category / tag / author / search / related / mypage) ---------- */
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.row-th { display: block; }
.row-tx { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row-k { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.row-k .meta { font-size: 12px; margin-left: auto; }
.row-h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.row-k .kicker { z-index: 2; }
.row-dek { display: none; }
@media (min-width: 38.75rem) {
  .row { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 0; }
  .rows--list .row-dek { display: -webkit-box; }
  .rows--list .row-h { font-size: 18px; }
  .row-k .meta { margin-left: 0; }
}
.rows--list .row:last-child { border-bottom: 0; }

/* ---------- category / tag / author / search ---------- */
.cat-head { padding: 4px 0 12px; border-bottom: 1px solid var(--rule); }
.cat-h1 { font-family: var(--ff-serif); font-weight: 900; font-size: clamp(26px, 2vw + 20px, 44px); line-height: 1.3; letter-spacing: .02em; display: flex; align-items: center; gap: 12px; word-break: auto-phrase; }
.cat-h1::before { content: ""; width: .5em; height: .5em; background: var(--cat, var(--shu-fill)); flex: none; }
.cat-count { margin-top: 0; }
.cat-desc { margin-top: 4px; max-width: 46em; }
@media (max-width: 47.99rem) { .cat-desc.clamp2 { -webkit-line-clamp: 1; } }
.cat-head .chips { margin-top: 10px; }
.lead-st + .rows, .cat-main > .rows { margin-top: 0; }
.cat-main .pager { margin-top: 14px; margin-bottom: 0; }
.cat-head[data-cat] { border-top: 3px solid var(--cat); padding-top: 14px; }
@media (min-width: 64rem) { .cat-head .chips { margin-inline: 0; padding-inline: 0; } }
.cat-layout { display: block; margin-top: 4px; }
.cat-main { min-width: 0; }
@media (min-width: 64rem) { .cat-layout:not(.has-aside) .cat-main { max-width: 980px; } }
.cat-empty { padding: 40px 0; text-align: center; color: var(--ink-2); font-size: 15px; line-height: 1.9; }
.lead-st { padding: 12px 0 2px; border-bottom: 1px solid var(--rule); position: relative; display: grid; gap: 10px; }
.lead-th { display: block; margin-inline: calc(-1 * var(--gutter)); }
.lead-tx { display: grid; gap: 4px; padding-bottom: 10px; }
.lead-h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lead-tx .kicker { z-index: 2; }
@media (min-width: 48rem) { .lead-th { margin-inline: 0; } }
@media (min-width: 64rem) {
  .lead-st { grid-template-columns: 420px minmax(0, 1fr); gap: 28px; padding: 24px 0 24px; align-items: start; }
  .lead-h { font-size: 26px; }
  .cat-layout.has-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 48px; }
  .cat-aside-in { position: sticky; top: 24px; padding-top: 20px; }
}
.auth-head { display: flex; align-items: center; gap: 16px; }
.auth-av { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--paper-3); display: flex; align-items: center; justify-content: center; flex: none; font-family: var(--ff-serif); font-weight: 900; font-size: 28px; color: var(--shu); }
.auth-tx { min-width: 0; }
.auth-tx .dek { margin-top: 6px; }
.auth-tx .cat-h1::before { display: none; }
.search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; max-width: 36rem; }
.search-form .btn { min-height: 46px; }

/* ---------- pricing ---------- */
.pricing { padding-bottom: 48px; }
.pr-head { text-align: center; padding-top: 20px; }
.pr-head .hd { font-weight: 900; font-size: clamp(24px, 2vw + 18px, 40px); line-height: 1.4; }
.pr-head .dek { margin-top: 6px; }
.cycle { display: flex; justify-content: center; margin: 18px 0 22px; }
.cycle > div { display: inline-flex; border: 1px solid var(--rule-strong); }
.cycle button { min-height: 46px; padding: 0 20px; background: transparent; border: 0; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .08em; color: var(--ink); cursor: pointer; }
.cycle button[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); }
.cycle small { font-weight: 400; color: var(--shu); font-size: 12px; margin-left: 6px; }
.cycle button[aria-pressed="true"] small { color: inherit; }
.plans { display: flex; flex-direction: column; gap: 16px; }
.plans--billing { max-width: 820px; margin: 32px auto 0; }
.plan { border: 1px solid var(--rule-strong); padding: 22px 20px 20px; display: flex; flex-direction: column; background: var(--paper); position: relative; }
.plan.feat { order: 0; border: 2px solid var(--rule-strong); border-top: 6px solid var(--shu-fill); box-shadow: var(--sh-print); }
.plan h2 { font-family: var(--ff-serif); font-weight: 900; font-size: 22px; letter-spacing: .1em; }
.plan .for { font-size: 14px; color: var(--ink-2); margin-top: 6px; line-height: 1.7; }
.plan .amt { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 4px; padding-top: 14px; border-top: 1px solid var(--rule); }
.plan .amt strong { font-family: var(--ff-serif); font-weight: 900; font-size: 40px; line-height: 1; }
.plan .amt span { font-size: 14px; color: var(--ink-2); }
.plan ul { margin: 14px 0 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.plan li { display: flex; gap: 10px; font-size: 15px; line-height: 1.7; align-items: baseline; }
.plan li::before { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--shu); border-bottom: 2px solid var(--shu); transform: rotate(-45deg) translateY(-3px); flex: none; margin-right: 2px; }
.plan .seal { position: absolute; top: -1px; right: 18px; font-size: 12px; padding: 3px 12px; border-radius: 0 0 2px 2px; }
.plan-msg { margin-top: 10px; font-size: 13px; color: var(--shu); text-align: center; }
.plan-msg a { text-decoration: underline; font-weight: 700; }
@media (min-width: 56.25rem) {
  .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .plans--billing { grid-template-columns: repeat(2, 1fr); }
  .plan.feat { order: 0; margin: 0; padding-top: 22px; padding-bottom: 20px; z-index: 1; }
  .plan + .plan { border-left: 1px solid var(--rule-strong); }
  .plan .for { min-height: 3.6em; }
  .faq { margin-top: 64px; }
}
.faq { max-width: 820px; margin: 40px auto 0; border-top: 3px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-family: var(--ff-serif); font-weight: 700; font-size: 17px; line-height: 1.6; list-style: none; padding: 8px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--ff-sans); font-size: 24px; color: var(--shu); }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0 18px; color: var(--ink-2); max-width: 42em; font-size: 15px; line-height: 1.85; }
.pr-links { display: flex; flex-wrap: wrap; gap: 0 20px; justify-content: center; margin-top: 12px; font-size: 14px; }
.pr-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- auth ---------- */
.auth { display: grid; gap: 40px; padding-block: 32px 64px; align-items: start; justify-items: center; }
.auth-card { position: relative; width: 100%; max-width: 460px; border: 1px solid var(--rule); border-top: 3px solid var(--shu); background: var(--paper); padding: 32px; }
.auth-card > * { position: relative; }
.auth-kicker { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--shu); line-height: 1.8; }
.auth-card-head { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.auth-title { margin-top: 7px; font-family: var(--ff-serif); font-weight: 900; font-size: 22px; line-height: 1.4; letter-spacing: .04em; text-wrap: balance; }
.auth-sub { white-space: pre-line; margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.auth-form { display: flex; flex-direction: column; gap: 0; }
.auth-fields { display: flex; flex-direction: column; gap: 16px; }
.auth-label { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 700; }
.auth-card .field { min-height: 52px; background: var(--paper); border-color: var(--ink-3); }
.auth-card .field:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.auth-field-help { margin-top: -8px; font-size: 12px; line-height: 1.8; color: var(--ink-2); }
.auth-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.8; }
.auth-check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--shu-fill); flex: none; }
.auth-check a, .auth-hint a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.auth-terms { font-size: 12px; color: var(--ink-2); }
.ts-slot { min-height: 65px; }
.ts-slot > div, .ts-slot > div > div { width: 100%; }
.ts-slot iframe { max-width: 100%; }
.auth-msg { min-height: 1.5rem; font-size: 14px; line-height: 1.7; }
.auth-feedback { font-size: 13px; line-height: 1.8; }
.auth-feedback:empty { display: none; }
.auth-err { color: var(--shu); font-size: 13px; font-weight: 600; line-height: 1.8; }
.auth-ok { color: var(--ink); font-size: 14px; line-height: 1.7; border-left: 3px solid var(--link); padding-left: 10px; }
.auth-link { align-self: flex-start; min-height: var(--tap); padding: 0; background: none; border: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.auth-link:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.auth-memory { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 12px; }
.auth-memory .auth-check { flex: 1 1 0; min-width: 0; }
/* Keep the row exactly one text line tall (same as the terms row); the 44px tap target is a pseudo-element. */
.auth-forget { position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; font-size: 12px; line-height: 1.8; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.auth-forget::before { content: ''; position: absolute; inset: -10px -6px; }
.auth-forget:hover { color: var(--ink); }
.auth-forget:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.auth-sent { display: grid; gap: 8px; padding: 16px; border-left: 3px solid var(--link); background: var(--paper-2); }
.auth-sent-title { font-weight: 700; font-size: 15px; }
.auth-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.auth-note { background: var(--paper-2); padding: 14px; font-size: 14px; color: var(--ink-2); }
.auth-banner { margin-bottom: 14px; padding: 10px 12px; background: var(--paper-2); }
.auth-card .btn--block { min-height: 50px; font-size: 14px; letter-spacing: .03em; }
.auth-card .btn--block:disabled { opacity: .55; cursor: not-allowed; }
.auth-new-reader { margin-top: 14px; font-size: 12px; text-align: center; color: var(--ink-2); line-height: 1.8; }
.auth-help { margin-top: 24px; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.85; }
.auth-help summary { cursor: pointer; list-style: none; position: relative; padding: 16px 22px 4px 0; min-height: 44px; color: var(--ink-2); }
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary::after { content: '+'; position: absolute; right: 0; top: 12px; font-size: 20px; }
.auth-help[open] summary::after { content: '−'; }
.auth-help-content { display: grid; gap: 10px; padding-top: 12px; color: var(--ink-2); }
.auth-help { interpolate-size: allow-keywords; }
.auth-help::details-content { block-size: 0; opacity: 0; overflow: hidden;
  transition: block-size .28s ease, opacity .28s ease, content-visibility .28s allow-discrete; }
.auth-help[open]::details-content { block-size: auto; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .auth-help::details-content { transition: none; } }
.auth-aside { display: none; padding-top: 24px; }
.auth-aside h2 { font-family: var(--ff-serif); font-weight: 900; font-size: 24px; line-height: 1.5; margin: 16px 0; }
.auth-aside-intro { color: var(--ink-2); font-size: 14px; line-height: 2; margin-bottom: 32px; }
.auth-aside ul { display: grid; border-bottom: 1px solid var(--rule); }
.auth-aside li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 22px 0; border-top: 1px solid var(--rule); }
.auth-benefit-number { font-family: var(--ff-serif); font-size: 15px; color: var(--shu); line-height: 1.8; }
.auth-aside li b { font-size: 15px; line-height: 1.8; }
.auth-aside li p { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.9; }
.auth-aside-foot { margin-top: 18px; font-size: 12px; color: var(--ink-2); }
body .auth .auth-card { border: 0; background: transparent; box-shadow: none; }
@media (min-width: 64rem) {
  .auth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; padding: 0; margin-block: 56px 80px; justify-items: stretch; align-items: start; max-width: min(62rem, calc(100% - 48px)); }
  .auth-aside { display: block; min-width: 0; padding: 0; }
  .auth-aside h2 { margin-top: 7px; }
  body .auth .auth-card { max-width: none; min-width: 0; padding: 0; justify-self: stretch; }
}
.auth-completing { max-width: 28rem; margin: 72px auto; padding: 24px; text-align: center; font-size: 15px; line-height: 1.8; }
@media (max-width: 39.99rem) {
  .auth { padding-block: 24px 40px; }
  .auth-title { font-size: 22px; }
  .auth-card-head { padding-bottom: 20px; margin-bottom: 22px; }
  .auth-sub { font-size: 13px; }
  .auth-help { font-size: 12px; }
}
.dev-wrap { padding-top: 20px; }
.dev-login { border: 2px dashed var(--shu); background: var(--paper-2); padding: 14px 16px; }
.dev-login h2 { font-weight: 700; font-size: 16px; }
.dev-login p { font-size: 13.5px; color: var(--ink-2); margin: 4px 0 12px; line-height: 1.7; }
.dev-grid { display: grid; gap: 8px; }
.dev-grid button { min-height: 44px; border: 1px solid var(--rule-strong); background: var(--paper); padding: 10px 12px; text-align: left; cursor: pointer; border-radius: 2px; color: var(--ink); font: inherit; display: grid; gap: 2px; }
.dev-grid button:hover { background: var(--paper-3); }
.dev-grid b { font-size: 14px; }
.dev-grid span { font-size: 12.5px; color: var(--ink-2); }
@media (min-width: 40rem) { .dev-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- mypage ---------- */
.mypage { padding-block: 16px 48px; max-width: 60rem; }
.mypage > .hd { font-weight: 900; font-size: clamp(26px, 2vw + 20px, 40px); line-height: 1.3; }
.my-tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--rule-strong); overflow-x: auto; scrollbar-width: none; }
.my-tabs a { flex: none; min-height: 46px; display: inline-flex; align-items: center; padding: 0 16px; font-weight: 700; font-size: 14.5px; color: var(--ink-2); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.my-tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--shu-fill); }
.my-body { margin-top: 24px; display: grid; gap: 16px; }
.my-body .sec-head { margin-bottom: 4px; }
.my-body section { display: grid; gap: 16px; align-content: start; }
.my-dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px 12px; max-width: 34rem; padding: 18px; background: var(--paper-2); border-left: 3px solid var(--shu-fill); font-size: 15px; }
.my-dl dt { color: var(--ink-3); font-size: 13.5px; }
.my-tone { display: inline-block; padding: 0 8px; font-size: 12.5px; font-weight: 700; line-height: 1.8; border-radius: 2px; box-shadow: inset 0 0 0 1px currentColor; }
.my-tone--ok { color: var(--cat-environment); }
.my-tone--warn { color: var(--cat-travel); }
.my-tone--bad { color: var(--shu); }
.my-box { padding: 18px; background: var(--paper-2); display: grid; gap: 12px; justify-items: start; font-size: 15px; }
.my-note { padding: 12px 14px; background: var(--paper-2); border-left: 3px solid var(--link); font-size: 14px; margin-top: 16px; }
.my-free { font-size: 14px; color: var(--ink-2); }
.my-block { display: grid; gap: 10px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.my-block h3, .danger-zone h3 { font-family: var(--ff-serif); font-weight: 700; font-size: 17px; }
.acct-form { display: flex; flex-direction: column; gap: 12px; max-width: 28rem; align-items: stretch; }
.acct-form .btn { align-self: flex-start; }
.acct-fold { max-width: 28rem; font-size: 14px; }
.acct-fold > summary { cursor: pointer; list-style: none; position: relative; display: flex; align-items: center; min-height: 44px; padding-right: 28px; color: var(--ink-2); }
.acct-fold > summary::-webkit-details-marker { display: none; }
.acct-fold > summary::after { content: '+'; position: absolute; right: 4px; font-size: 20px; line-height: 1; }
.acct-fold[open] > summary::after { content: '\2212'; }
.acct-fold > summary:hover { color: var(--ink); }
.acct-fold-body { padding-top: 4px; }
.acct-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.danger-zone { border: 1px solid var(--shu); padding: 16px; max-width: 36rem; display: grid; gap: 10px; justify-items: start; }
.danger-zone h3 { color: var(--shu); }
.danger-zone p { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
.danger-zone .acct-form { width: 100%; max-width: none; }

/* ---------- 404 ---------- */
.nf { max-width: 48rem; padding-block: 32px 48px; display: grid; gap: 14px; justify-items: start; }
.nf .seal { font-size: 14px; padding: 2px 12px; letter-spacing: .2em; }
.nf > .hd { font-weight: 900; font-size: clamp(24px, 2vw + 18px, 38px); line-height: 1.45; }
.nf .search-form { width: 100%; }
.nf .sec { width: 100%; margin-top: 16px; }
.nf-list { list-style: none; margin: 0; padding: 0; }
.nf-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.nf-list .hd { display: -webkit-box; }
.nf-list a:hover { text-decoration: underline; }

}
/* ==== /I3 inner ==== */

@media print {
  .mast, .mast-line-m, .drawer, .foot, .adbox, .tabs, .skip { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* smooth full-page navigations (no white/unstyled flash between documents) */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .12s; }

/* Promo banner (CMS Site Settings): slim announcement bar above the sticky header. */
.promo-bar { background: var(--btn); color: var(--on-btn); text-align: center; font-size: 13px; line-height: 1.5; padding: 8px var(--gutter); }
.promo-bar a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Card hover (home / lists / related): the image and the headline are separate links, so react to the whole card —
   the image eases in a little and the headline is underlined. Only for real hover devices; no motion
   when the visitor prefers reduced motion. */
@media (hover: hover) {
  :is(.st, .top, .thumb-left, .row-c, .row-t, .row-r, .vid):hover .hd {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
  }
  :is(.st, .top, .thumb-left, .row-c, .row-t, .row-r, .vid) .ph img { transition: transform .5s cubic-bezier(.2, .6, .2, 1); }
  :is(.st, .top, .thumb-left, .row-c, .row-t, .row-r, .vid):hover .ph:not(.contain) img { transform: scale(1.04); }
  .ph.contain img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.st, .top, .thumb-left, .row-c, .row-t, .row-r, .vid) .ph img { transition: none; transform: none !important; }
}

/* Masthead wordmark: eases to the accent red on hover/focus (the SVG paints with currentColor). */
.mast-bar .brand svg { transition: color .25s ease; }
@media (hover: hover) {
  .mast-bar .brand:hover { color: var(--shu); }
}

/* mypage saved lists: 解除 control under the headline (above the whole-row link, z-index 2) and 「もっと見る」. */
.row-act { position: relative; z-index: 2; margin-top: 2px; }
.row-undo { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; margin-left: -12px; font: 700 13px/1.2 var(--ff-sans); letter-spacing: .06em; color: var(--ink-2); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.row-undo:hover { color: var(--shu); }
.row-undo:focus-visible { outline: 2px solid var(--shu); outline-offset: -2px; }
.more-wrap { display: flex; justify-content: center; padding-top: 8px; }
.more-wrap .btn:disabled { opacity: .6; cursor: default; }

/* Header light/dark switch: sun | moon track, knob on the active side (html[data-theme] drives it). */
.theme-sw { position: relative; display: inline-flex; align-items: center; justify-content: space-between; flex: none; width: 52px; height: 28px; margin-inline: 8px; padding: 0 6px; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--paper-2); color: var(--ink-2); cursor: pointer; }
.theme-sw::before { content: ""; position: absolute; inset: -9px -4px; } /* 44px tap target */
.theme-sw svg { position: relative; z-index: 1; width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-sw .ts-knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 1px solid var(--ink-3); box-shadow: 0 1px 2px rgb(0 0 0 / .18); transition: transform .22s cubic-bezier(.2, .7, .2, 1), background-color .2s; }
html[data-theme="dark"] .theme-sw .ts-knob { transform: translateX(24px); }
/* the icon under the knob is the active mode: keep it readable, dim the other */
.theme-sw .ts-sun { color: var(--ink); }
html[data-theme="dark"] .theme-sw .ts-sun { color: var(--ink-3); }
.theme-sw .ts-moon { color: var(--ink-3); }
html[data-theme="dark"] .theme-sw .ts-moon { color: var(--ink); }
.theme-sw:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .theme-sw:hover { border-color: var(--shu); } }
@media (prefers-reduced-motion: reduce) { .theme-sw .ts-knob { transition: none; } }

/* ---- GA4 consent banner + footer "Cookie設定" link (rendered by /tn-ui.js only when GA4 is configured) ---- */
.foot-consent { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.foot-consent[hidden] { display: none; }
.foot-consent:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .foot-consent:hover { color: var(--shu); } }
.tn-consent { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; margin-inline: auto; padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, .18); font-size: 13px; line-height: 1.6; }
.tn-consent-t { margin: 0; }
.tn-consent-t a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tn-consent-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.tn-consent-b button { min-height: 40px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.tn-consent-yes { background: var(--ink); color: var(--paper); }
.tn-consent-no { background: transparent; color: var(--ink); border-color: var(--rule) !important; }
.tn-consent a:focus-visible, .tn-consent-b button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* One purchase surface shared by article gates and the account page. */
.purchase-offer { display: grid; gap: 16px; width: 100%; }
.purchase-offer .cycle { margin: 0; }
.purchase-offer .cycle > div { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.purchase-offer .cycle button { width: 100%; min-height: 44px; }
.purchase-offer .amt { display: flex; gap: 8px; justify-content: center; align-items: baseline; }
.purchase-offer .amt strong { font-size: 26px; }
.purchase-offer .amt span { font-size: 13px; color: var(--ink-2); }
.purchase-offer ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.8; }
.gate .purchase-offer li { display: block; font-size: 13px; }
.gate .purchase-offer li::before { content: none; }
.purchase-offer > .btn { width: 100%; min-height: 48px; }
.purchase-offer .plan-msg:empty { display: none; }
.mypage .purchase-offer { max-width: 360px; margin-top: 20px; }

/* ---- footer social links (only rendered when the CMS has any) ---- */
.foot-social { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13px; }
.foot-social a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.foot-social a:hover { color: var(--ink); }

/* Editorial refinement. Keep the existing theme tokens and shared content contract. */
@layer components {
  body .mast-bar, body .mast-bar .l, body .mast-bar .r { min-width: 0; }
  body .tabs ul { overscroll-behavior-x: contain; padding-right: 30px; }
  body .top { display: flex; flex-direction: column; }
  body .top-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); }
  body .top-eyebrow span:first-child { color: var(--shu); }
  body .top-eyebrow span:last-child { font-size: 10px; letter-spacing: .16em; }
  body .top .ph { margin: 0 0 14px; }
  body .top h1 { margin: 8px 0 14px; }
  body .top .hd-xl { line-height: 1.45; letter-spacing: .015em; }
  body .top-dek { color: var(--ink-2); line-height: 1.85; }
  body .latest li, body .latest .row-c { grid-template-columns: 44px minmax(0, 1fr); }
  body .rank li, body .rank .row-r { grid-template-columns: 30px minmax(0, 1fr); }
  body .thumb-left { grid-template-columns: 116px minmax(0, 1fr); }
  body .thumb-left > *, body .row-t > *, body .latest li > *, body .rank li > * { min-width: 0; }
  body .hd, body .art-title { overflow-wrap: anywhere; }
  body .sec-head { margin-bottom: 18px; }
  body .more { text-underline-offset: 4px; }
  body .drawer-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 10px; }
  body .drawer-search { padding: 22px 20px; }
  body .drawer-nav { padding: 22px 20px 12px; }
  body .drawer-group-head { position: relative; }
  body .drawer-panel nav a { padding-inline: 0; min-height: 54px; }
  body .drawer-panel nav .drawer-parent { padding-right: 54px; }
  body .drawer-panel nav a b { width: 5px; height: 5px; opacity: .7; }
  body .drawer-sub > summary { position: absolute; right: 0; top: 5px; width: 44px; height: 44px; display: grid; place-items: center; list-style: none; cursor: pointer; border-left: 1px solid var(--rule); }
  body .drawer-sub > summary::-webkit-details-marker { display: none; }
  body .drawer-sub[open] > summary > span:last-child { transform: rotate(180deg); }
  body .drawer-children { background: var(--paper-2); padding-inline: 14px; }
  body .drawer-panel nav .drawer-children a { font-size: 13px; padding-left: 8px; min-height: 46px; }
  body .drawer-panel nav .drawer-children a:last-child { border-bottom: 0; }
  body .drawer-footer { margin-top: auto; padding-top: 16px; background: var(--paper-2); }
  body .drawer-footer > .drawer-label { margin-inline: 20px; }
  body .drawer-panel .acts { padding: 4px 20px 24px; border-bottom: 0; }
  body .auth-card { border: 1px solid var(--rule); border-top: 3px solid var(--shu); box-shadow: none; padding: 32px; }
  body .auth-card::before { content: none; }
  body .art-title { line-height: 1.5; }
  body .art-dek { color: var(--ink-2); }
  body .pcard { box-shadow: none; }
  @media (max-width: 63.999rem) {
    body .mast-bar { grid-template-columns: minmax(88px, 1fr) auto minmax(44px, 1fr); padding-inline: 6px; }
    body .mast-bar .brand svg { width: clamp(132px, 38vw, 164px); }
    body .top-eyebrow { order: -4; }
    body .top > .tags { order: -3; }
    body .top > h1 { order: -2; }
    body .top > .st-img { order: -1; }
    body .top .hd-xl { font-size: clamp(26px, 6.8vw, 34px); text-wrap: pretty; }
    body .top-dek { font-size: 15px; }
    body .art-title { font-size: clamp(26px, 6.9vw, 34px); }
  }
  @media (max-width: 39.999rem) {
    body .top { padding-top: 22px; }
    body .col-r > .sec:first-child { margin-top: 30px; }
    body .latest li { padding-block: 12px; }
    body .latest .hd { font-size: 16px; line-height: 1.65; }
    body .latest time { font-size: 12px; padding-top: 3px; }
    body .pcard { flex-direction: row; align-items: stretch; }
    body .pcard-img { flex: 0 0 36%; border-bottom: 0; border-right: 1px solid var(--rule); padding: 12px 8px; }
    body .pcard--shop .pcard-img { padding: 0; }
    body .pcard--shop .pcard-img img { height: 100%; object-fit: contain; }
    body .pcard-body { padding: 14px 12px; justify-content: center; }
    body .pcard .p-name { font-size: 13px; }
    body .pcard .p-desc { font-size: 12px; }
    body .auth-card { padding: 24px 18px; }
  }
  @media (min-width: 40rem) and (max-width: 63.999rem) {
    body .front { padding-top: 24px; grid-template-columns: minmax(0, 1fr) 260px; }
    body .top { padding-top: 0; }
    body .col-c { padding-right: 22px; }
    body .col-r { padding-left: 22px; }
    body .top .hd-xl { font-size: 28px; }
  }
  @media (min-width: 64rem) {
    body .top .hd-xl { font-size: clamp(30px, 2.6vw, 38px); }
    body .top-eyebrow { margin-bottom: 18px; }
    body .rank li, body .rank .row-r { grid-template-columns: 40px minmax(0, 1fr); }
    body .foot { padding-top: 28px; }
  }
}
/* The legacy theme control is unlayered; keep this responsive override in that same cascade.
   Phones: a compact 44x26 switch beside the account icon (the right column is at least 88px = 44 + 44 at 320px). */
@media (max-width: 63.999rem) {
  body .mast-bar .mast-theme { width: 44px; height: 26px; margin-inline: 0 2px; padding: 0 5px; }
  body .mast-bar .mast-theme svg { width: 13px; height: 13px; }
  body .mast-bar .mast-theme .ts-knob { width: 20px; height: 20px; }
  html[data-theme="dark"] body .mast-bar .mast-theme .ts-knob { transform: translateX(18px); }
}
/* ≤ 360px: shrink the wordmark so it keeps clear of the switch. */
@media (max-width: 22.5rem) {
  body .mast-bar .brand svg { width: 116px; }
}
/* Logo's utility colour otherwise wins over its theme-aware parent. */
body .brand svg { color: inherit; } /* parent colour: --ink, accent red on :hover */

/* WordPress block and refined editorial template selectors */
@layer components {
  .wp-block-image img, .wp-block-cover img, .prose img { max-width: 100%; height: auto; }
  .prose :where(p) { margin: 0 0 1.25em; }
  .prose :where(h2, h3, h4) { font-family: var(--ff-serif); font-weight: 700; line-height: 1.55; margin: 1.8em 0 .7em; }
  .prose :where(h2) { font-size: 1.4em; border-top: 1px solid var(--rule-strong); padding-top: .5em; }
  .prose :where(a:not(.btn)) { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .prose :where(ul, ol) { margin: 1em 0 1em 1.6em; }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose :where(blockquote) { margin: 1.8em 0; border-left: 3px solid var(--shu-fill); padding-left: 1em; font-family: var(--ff-serif); }
  .prose :where(figcaption) { font-size: 12px; color: var(--ink-3); line-height: 1.65; }
  .prose :where(pre) { overflow-x: auto; background: var(--paper-2); padding: 1em; }
  .prose :where(table) { display: block; overflow-x: auto; border-collapse: collapse; }
  .prose :where(th, td) { border: 1px solid var(--rule); padding: .5em; }
  .tn-editor-note, .is-style-editor-note { border-left: 3px solid var(--shu-fill); background: var(--paper-2); padding: 1em 1.25em; }
  .wp-block-separator { border: 0; border-top: 1px solid var(--rule-strong); }
  .wp-block-pullquote { border-block: 3px double var(--rule-strong); padding: 1em; }

  /* Brand logo sizing */
  .tn-logo { display: block; width: 150px; height: auto; }
  .tn-logo img { display: block; width: 100%; height: auto; }
  .mast-bar .tn-logo { width: 150px; }
  .foot .tn-logo { width: 132px; }
  @media (min-width: 64rem) {
    .mast-bar .tn-logo { width: 240px; }
    .foot .tn-logo { width: 200px; }
  }

  /* Header login & account controls (always visible on both mobile & desktop) */
  .tn-hdr-login { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); transition: color .15s; }
  .tn-hdr-login svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; flex: none; }
  .tn-hdr-login:hover { color: var(--shu); }
  @media (max-width: 24rem) { .tn-hdr-login span { display: none; } }

  .tn-hdr-user { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 6px; color: var(--ink); transition: color .15s; }
  .tn-hdr-user .avatar { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 14px; border-radius: 2px; transition: background-color .15s, color .15s; }
  .tn-hdr-user:hover .avatar { background: var(--shu-fill); color: var(--on-shu); }
  .tn-hdr-user-meta { display: inline-flex; align-items: center; gap: 6px; }
  .tn-hdr-user-name { font-size: 13.5px; font-weight: 700; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .dateline .mt a { color: var(--ink-2); font-weight: 700; text-decoration: none; }
  .dateline .mt a:hover { color: var(--shu); text-decoration: underline; text-underline-offset: 3px; }

  /* Mobile drawer member summary */
  .tn-drawer-member { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
  .tn-drawer-member .avatar { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 15px; border-radius: 2px; flex: none; }
  .tn-drawer-member-tx { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
  .tn-drawer-member-tx strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Editorial section kickers & category headers */
  .tn-sec-kicker, .tn-membership-eyebrow, .tn-membership-step { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--shu); line-height: 1.5; margin-bottom: 4px; }
  .tn-cat-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }

  /* Home PICK UP on mobile/tablet & Membership Callout Banner */
  @media (max-width: 63.999rem) {
    .col-l { margin-top: 28px; border-top: 3px solid var(--rule-strong); padding-top: 12px; }
    .col-l .st-list { display: grid; grid-template-columns: 1fr; gap: 14px; }
    .col-l .st-list > li { border-top: 1px solid var(--rule); padding-top: 12px; margin: 0; }
    .col-l .st-list > li:first-child { border-top: 0; padding-top: 0; }
  }
  @media (min-width: 40rem) and (max-width: 63.999rem) {
    .col-l .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
    .col-l .st-list > li { border-top: 2px solid var(--cat, var(--rule-strong)); padding-top: 10px; }
    .col-l .st-list > li:first-child { border-top: 2px solid var(--cat, var(--rule-strong)); padding-top: 10px; }
  }

  .tn-home-cta { margin-top: var(--home-gap); border: 1px solid var(--rule-strong); border-top: 3px solid var(--shu-fill); background: var(--paper-2); padding: clamp(20px, 3vw, 32px); }
  .tn-home-cta-in { display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
  .tn-home-cta-tx { max-width: 44rem; }
  .tn-home-cta-tx h2 { margin: 4px 0 8px; }
  .tn-home-cta-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: none; }
  @media (min-width: 56rem) {
    .tn-home-cta-in { flex-direction: row; align-items: center; }
  }

  /* Article sidebar promo card */
  .tn-aside-promo { margin-top: 28px; padding: 18px; border: 1px solid var(--rule-strong); border-top: 3px solid var(--shu-fill); background: var(--paper-2); display: grid; gap: 8px; }
  .tn-aside-promo .dek { font-size: 13.5px; line-height: 1.75; }
  .tn-aside-promo .btn { margin-top: 4px; }

  /* Membership & Account Hub (page-membership.php + [tagennews_membership]) */
  .tn-membership-account { max-width: 860px; margin: 28px auto 0; }
  .tn-membership-prose > :not(.tn-member-hub):not(.tn-account-actions) { max-width: var(--measure); margin-inline: auto; }
  .tn-checkout-return { max-width: 860px; margin: 20px auto 0; }

  .tn-member-hub { border: 1px solid var(--rule-strong); border-top: 3px solid var(--shu-fill); background: var(--paper-2); padding: clamp(20px, 3vw, 30px); display: grid; gap: 22px; }
  .tn-member-hub--guest { display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
  @media (min-width: 48rem) {
    .tn-member-hub--guest { flex-direction: row; align-items: center; }
    .tn-member-guest-body { max-width: 36rem; }
    .tn-member-guest-acts { flex: none; }
  }

  .tn-member-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
  .tn-member-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .tn-member-avatar { width: 48px; height: 48px; border-radius: 2px; background: var(--btn); color: var(--on-btn); font-family: var(--ff-serif); font-weight: 900; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .tn-member-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
  .tn-sso-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); padding: 0 7px; border-radius: 2px; line-height: 1.75; }

  .tn-member-dl { max-width: none; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--shu-fill); margin: 0; }

  /* Stripe Checkout Cards & Billing Portal Bar */
  .tn-billing-controls { display: grid; gap: 16px; }
  .tn-checkout-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 44rem) {
    .tn-checkout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .tn-checkout-card { position: relative; background: var(--paper); border: 1px solid var(--rule-strong); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .tn-checkout-card--feat { border-top: 4px solid var(--shu-fill); box-shadow: var(--sh-print); }
  .tn-checkout-card > .seal { position: absolute; top: -1px; right: 16px; border-radius: 0 0 2px 2px; padding: 2px 10px; }
  .tn-checkout-card-head h3 { font-family: var(--ff-serif); font-weight: 900; font-size: 18px; letter-spacing: .04em; }
  .tn-checkout-amt { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
  .tn-checkout-amt strong { font-family: var(--ff-serif); font-weight: 900; font-size: 30px; line-height: 1.1; }
  .tn-checkout-amt span { font-size: 13px; color: var(--ink-2); }
  .tn-checkout-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; flex: 1; margin: 0; }
  .tn-checkout-card form { margin-top: 4px; }

  .tn-portal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 20px; background: var(--paper); border: 1px solid var(--rule); }
  .tn-portal-tx { display: grid; gap: 2px; }
  .tn-portal-tx strong { font-size: 14.5px; }
  .tn-portal-tx span { font-size: 13px; color: var(--ink-2); }

  /* Self-service cancellation & account closure accordion */
  .tn-account-actions { margin-top: 16px; }
  .tn-lifecycle-fold { max-width: none; border: 1px solid var(--rule); background: var(--paper); padding: 0 18px; }
  .tn-lifecycle-fold > summary { font-weight: 700; font-size: 14px; color: var(--ink-2); min-height: 48px; }
  .tn-lifecycle-fold > .acct-fold-body { padding: 14px 0 20px; border-top: 1px solid var(--rule); }
  .tn-lifecycle-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 48rem) {
    .tn-lifecycle-grid:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .tn-lifecycle-card { padding: 18px; border: 1px solid var(--rule); background: var(--paper-2); display: flex; flex-direction: column; gap: 10px; max-width: none; }
  .tn-lifecycle-card h3 { font-family: var(--ff-serif); font-weight: 700; font-size: 16px; }
  .tn-lifecycle-card p { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; margin: 0; flex: 1; }
  .tn-lifecycle-card .acct-form { margin-top: 4px; max-width: none; }
  .tn-btn-danger { border-color: var(--shu); color: var(--shu); }
  .tn-btn-danger:hover { background: var(--shu-fill); border-color: var(--shu-fill); color: var(--on-shu); }

  /* Membership page sample articles by tier */
  .tn-membership-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
  .tn-membership-article-group { border-top: 2px solid var(--rule-strong); padding-top: 14px; }
  .tn-tier-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
  .tn-tier-group-head h3 { font-family: var(--ff-serif); font-weight: 900; font-size: 17px; }
  .tn-membership-article-list { list-style: none; margin: 0; padding: 0; }
  .tn-membership-article-list li { border-bottom: 1px solid var(--rule); }
  .tn-membership-article-list a { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; text-decoration: none; }
  .tn-tier-art-title { font-family: var(--ff-serif); font-weight: 700; font-size: 15px; line-height: 1.55; color: var(--ink); }
  .tn-membership-article-list a:hover .tn-tier-art-title { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 56rem) {
    .tn-membership-articles { grid-template-columns: 1fr; gap: 28px; }
  }

  /* Paywall faded multi-line preview & fallback section */
  .tn-paywall { margin: 28px auto; }
  .tn-paywall-excerpt { margin-bottom: 14px !important; font-style: normal; }
  .tn-paywall-preview { position: relative; max-width: var(--measure); padding: 20px 0 36px; border-top: 1px solid var(--rule); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.38) 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0,0,0,.38) 78%, transparent 100%); user-select: none; }
  .tn-paywall-preview-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-family: var(--ff-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--shu); }
  .tn-paywall-preview-kicker small { font-weight: 400; color: var(--ink-3); letter-spacing: .04em; }
  .tn-paywall-preview-text p { margin: 0 0 1.15em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
  .tn-paywall-preview-lines { display: grid; gap: 12px; margin-top: 14px; opacity: .45; filter: blur(1.5px); }
  .tn-paywall-preview-lines span { display: block; height: 12px; background: linear-gradient(90deg, var(--ink-3) 0%, var(--rule) 100%); border-radius: 2px; }

  /* ==========================================================================
     Nikkei-style Features & Enhancements (Series, Key points, TOC, Bottom bar,
     Rankings tabs, Member library, Font sizing)
     ========================================================================== */

  /* Series kicker in article header */
  .tn-series-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ff-sans); font-size: 12px; font-weight: 700; color: var(--link); background: rgba(11, 107, 102, 0.08); padding: 2px 8px; border-radius: 2px; }
  .tn-series-kicker a { color: inherit; text-decoration: none; }
  .tn-series-kicker a:hover { text-decoration: underline; }
  .tn-series-kicker .num { font-size: 11px; font-weight: 700; opacity: .85; }

  /* Reading time & stats in byline */
  .tn-read-time { color: var(--ink-3); margin-left: 2px; font-size: 12.5px; }

  /* Clip button in header & lists */
  .tn-clip-btn.is-clipped { color: var(--shu); }
  .tn-clip-btn.is-clipped svg, .tn-clip-btn.is-clipped .tn-bar-svg path { color: var(--shu); fill: currentColor; }

  /* Key points summary box */
  .tn-keypoints { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: 16px 20px; margin: 20px 0 24px; }
  .tn-keypoints-hd { font-family: var(--ff-serif); font-weight: 900; font-size: 14.5px; letter-spacing: .06em; color: var(--ink); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 8px; }
  .tn-keypoints-ico { width: 17px; height: 17px; stroke: var(--shu); fill: none; stroke-width: 2; flex: none; }
  .tn-keypoints ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .tn-keypoints li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
  .tn-keypoints li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--shu); }

  /* Table of Contents (TOC) */
  .tn-toc { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; margin: 20px 0 24px; overflow: hidden; }
  .tn-toc details > summary { font-family: var(--ff-sans); font-size: 13.5px; font-weight: 700; color: var(--ink); padding: 12px 16px; cursor: pointer; user-select: none; background: var(--paper-2); display: flex; align-items: center; gap: 8px; }
  .tn-toc details > summary svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
  .tn-toc details[open] > summary { border-bottom: 1px solid var(--rule); }
  .tn-toc ol { list-style: none; counter-reset: toc-counter; margin: 0; padding: 12px 18px 16px; display: grid; gap: 6px; }
  .tn-toc li { font-size: 14px; line-height: 1.5; }
  .tn-toc li a { color: inherit; text-decoration: none; }
  .tn-toc li a:hover { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
  .tn-toc-l2 { font-weight: 700; color: var(--ink); padding-left: 2px; }
  .tn-toc-l3 { font-size: 13px; color: var(--ink-2); padding-left: 16px; position: relative; }
  .tn-toc-l3::before { content: "– "; color: var(--ink-3); }

  /* Series navigation box (end of article) */
  .tn-series-box { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: 20px; margin: 32px 0 24px; }
  .tn-series-box-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
  .tn-series-box-label { font-family: var(--ff-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; background: var(--ink); color: var(--paper); padding: 2px 7px; border-radius: 2px; }
  .tn-series-box-title { font-family: var(--ff-serif); font-weight: 900; font-size: 17px; margin: 0; }
  .tn-series-box-title a { color: var(--ink); text-decoration: none; }
  .tn-series-box-title a:hover { color: var(--link); text-decoration: underline; }
  .tn-series-box-count { font-size: 12.5px; color: var(--ink-3); }
  .tn-series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  @media (max-width: 38rem) {
    .tn-series-nav { grid-template-columns: 1fr; }
  }
  .tn-series-nav-link { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; text-decoration: none; transition: border-color .15s, background .15s; }
  .tn-series-nav-link:hover { border-color: var(--rule-strong); background: var(--paper-3); }
  .tn-series-dir { font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; }
  .tn-series-nav-title { font-family: var(--ff-serif); font-size: 13.5px; line-height: 1.5; color: var(--ink); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tn-series-all { text-align: right; font-size: 12.5px; font-weight: 700; }
  .tn-series-all a { color: var(--link); text-decoration: none; }
  .tn-series-all a:hover { color: var(--link-hover); text-decoration: underline; }

  /* Sticky Bottom Action Bar (Translucent Glassmorphism) */
  .tn-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(246, 241, 230, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
    padding: 3px 12px max(4px, env(safe-area-inset-bottom, 4px));
  }
  :root[data-theme="dark"] .tn-bottom-bar {
    background: rgba(20, 17, 13, 0.94);
  }
  @media (min-width: 48rem) {
    .tn-bottom-bar {
      bottom: 24px;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      border: 1px solid var(--rule);
      border-radius: 9999px;
      box-shadow: 0 4px 20px rgba(0,0,0,.15);
      padding: 4px 18px;
      max-width: 80vw;
    }
  }
  .tn-bottom-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 400px;
    margin: 0 auto;
    gap: 8px;
  }
  .tn-bar-btn {
    background: transparent;
    border: 0;
    color: var(--ink-2);
    font-family: var(--ff-sans);
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 48px;
    min-height: 42px;
    text-decoration: none;
    border-radius: 4px;
    line-height: 1;
    transition: color .15s, background .15s;
  }
  .tn-bar-btn:hover { color: var(--ink); background: var(--paper-2); }
  .tn-bar-btn.is-clipped { color: var(--shu); }
  .tn-bar-svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
  }
  .tn-bar-btn.is-clipped .tn-bar-svg path { fill: currentColor; }
  .tn-bar-text-ico {
    font-family: var(--ff-serif);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
  }
  .tn-bar-text-ico small {
    font-size: 10px;
    font-weight: 400;
    margin-left: 1px;
  }

  /* Article font size scaling */
  :root[data-font-size="sm"] .art-body { --fs-body: 15px; --lh-body: 1.8; }
  :root[data-font-size="md"] .art-body { --fs-body: 17px; --lh-body: 1.9; }
  :root[data-font-size="lg"] .art-body { --fs-body: 19px; --lh-body: 1.95; }
  :root[data-font-size="xl"] .art-body { --fs-body: 21.5px; --lh-body: 2.05; }
  [data-font-size="sm"] .art-body p, [data-font-size="sm"] .art-body li { font-size: 15px; line-height: 1.8; }
  [data-font-size="lg"] .art-body p, [data-font-size="lg"] .art-body li { font-size: 19px; line-height: 1.95; }
  [data-font-size="xl"] .art-body p, [data-font-size="xl"] .art-body li { font-size: 21.5px; line-height: 2.05; }

  /* Ranking tabs on front page sidebar */
  .ranking-sec { margin-top: var(--sec-gap-m); }
  @media (min-width: 64rem) {
    .ranking-sec { margin-top: 36px; }
  }
  .tn-rank-tabs { display: flex; border-bottom: 2px solid var(--rule-strong); margin: 8px 0 10px; gap: 4px; }
  .tn-rank-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 6px 10px; font-family: var(--ff-sans); font-size: 12.5px; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: color .15s, border-color .15s; }
  .tn-rank-tab:hover { color: var(--ink); }
  .tn-rank-tab.is-active { color: var(--shu); border-bottom-color: var(--shu); }
  .tn-rank-panel { display: block; }
  .tn-rank-panel[hidden] { display: none !important; }

  /* Tier tabs for membership page */
  .tn-tier-tabs { display: flex; border-bottom: 2px solid var(--rule); margin: 10px 0 16px; gap: 4px; }
  .tn-tier-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 8px 12px; font-family: var(--ff-sans); font-size: 13px; font-weight: 700; color: var(--ink-3); cursor: pointer; transition: color .15s, border-color .15s; }
  .tn-tier-tab:hover { color: var(--ink); }
  .tn-tier-tab.is-active { color: var(--shu); border-bottom-color: var(--shu); }
  @media (max-width: 56rem) {
    [data-tn-tier-panel][data-initialized] { display: none; }
    [data-tn-tier-panel].is-active,
    [data-tn-tier-panel][data-tn-tier-panel="free"]:not([data-initialized]) { display: block; }
  }

  /* Member library (Clips & History) on page-membership.php */
  .tn-member-library { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--rule-strong); }
  .tn-member-library-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
  @media (min-width: 48rem) {
    .tn-member-library-grid { grid-template-columns: 1fr 1fr; }
  }
  .tn-member-lib-col { display: flex; flex-direction: column; gap: 10px; }
  .tn-member-lib-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .tn-member-lib-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; }
  .tn-lib-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .tn-lib-item-main .hd { font-family: var(--ff-serif); font-size: 14.5px; line-height: 1.45; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tn-lib-item-main .hd:hover { color: var(--link); text-decoration: underline; }
  .tn-history-time { margin-left: 8px; color: var(--ink-3); font-size: 12px; }
  .tn-lib-empty { padding: 16px 0; color: var(--ink-3); font-size: 13.5px; }
  .tn-clear-history-btn { font-size: 12px; padding: 4px 10px; cursor: pointer; }
}

/* External SVG images render their own currentColor; invert the ink wordmark in dark mode. */
:root[data-theme="dark"] .tn-logo img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tn-logo img { filter: invert(1); } }


/* Shared UX refinements: natural text height, balanced grids and consistent controls. */
@layer components {
  .btn { padding-block: 11px; line-height: 1.5; letter-spacing: .03em; white-space: normal; overflow-wrap: anywhere; }
  .btn[aria-disabled="true"] { opacity: .65; cursor: default; }
  .btn:disabled { opacity: .6; cursor: wait; }
  .sec-head { flex-wrap: wrap; gap: 4px 16px; }
  .mini-head h2 { font: inherit; letter-spacing: inherit; }
  .sec-head h2 { min-width: 0; }
  .sec-head .lbl { overflow-wrap: anywhere; }
  .crumbs { flex-wrap: wrap; white-space: normal; }
  .crumbs li:last-child { max-width: none; white-space: normal; overflow: visible; }
  /* Titles carry the navigation promise; show them in full on every device. */
  body :is(.top h1 .hd, .latest .hd, .st .hd, .row-t .hd, .thumb-left .hd, .row-h, .rank .rank-t, .tn-lib-item-main .hd, .tn-series-nav-title, .cat-desc) {
    display: block; -webkit-line-clamp: unset; overflow: visible; text-overflow: clip; max-height: none;
  }
  body .top h1 .hd { min-height: 0; }
  .top-media { min-width: 0; }
  body .top .ph { display: block; aspect-ratio: 16 / 9; margin-inline: 0; }
  body .top h1 { margin-block: 10px 14px; }
  body .top--text { border-top: 0; }
  body .top-dek { -webkit-line-clamp: 3; }
  .latest .hd { line-height: 1.65; }
  .latest .row-c-meta { gap: 6px 10px; }
  .tn-rank-tabs, .tn-tier-tabs { gap: 0; }
  .tn-rank-tab, .tn-tier-tab { flex: 1; min-height: 44px; padding: 10px 8px; line-height: 1.5; }
  .digest { border-top: 0; padding-top: 0; }
  .digest-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; overflow: visible; margin: 0; padding: 0; }
  .dg-card { min-height: 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
  .dg-card::before, .dg-card::after { content: none !important; }
  .dg-head { margin-bottom: 10px; }
  .dg-head h3 { width: 100%; font-size: 18px; }
  .dg-head h3 a { justify-content: space-between; gap: 12px; }
  .dg-name { white-space: normal; overflow: visible; }
  .dg-head .dg-arrow { color: var(--link); flex: none; }
  .dg-card .thumb-left { grid-template-columns: 80px minmax(0, 1fr); }
  .dg-card .textrows .hd { font-size: 15px; }
  .tn-home-cta-acts { align-items: stretch; }
  .tn-home-cta-acts .btn { width: 100%; }
  .tn-home-cta-in { gap: 24px; }
  .plan { min-width: 0; border-top: 4px solid var(--rule-strong); padding: 22px 20px 20px; }
  .plan.feat { border-width: 1px; border-top-width: 4px; box-shadow: none; }
  .plan .amt { flex-wrap: wrap; row-gap: 8px; }
  .plan .amt strong { font-size: 36px; }
  .plan .seal { position: static; align-self: flex-start; margin-bottom: 8px; }
  .plan.feat:has(> .seal) { padding-top: 22px; }
  .plan .for { min-height: 0; }
  .plan .btn { margin-top: auto; }
  .tn-member-grid .prose { max-width: none; margin-top: 0; }
  .tn-member-grid .prose :is(h2, h3) { margin: 0 0 8px; border: 0; padding: 0; }
  .tn-member-grid .prose :is(h2, h3)::before { content: none; }
  .tn-member-grid .prose p { margin: 0; }
  .tn-member-grid .prose .btn { text-decoration: none; }
  .tn-member-guest-body { flex: 1; min-width: 0; }
  .tn-member-guest-acts { width: 100%; }
  .tn-member-guest-acts .btn { width: 100%; }
  .tn-tier-group-head { flex-wrap: wrap; }
  .tn-member-id > div { min-width: 0; overflow-wrap: anywhere; }
  .tn-checkout-card--feat { box-shadow: none; }
  .tn-checkout-card > .seal { position: static; align-self: flex-start; }
  .tn-lifecycle-fold summary, .faq summary { gap: 16px; }
  .faq summary::after { flex: none; }
  .tn-bar-btn { min-height: 44px; line-height: 1.35; }
  body:has(.tn-bottom-bar) .foot { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  @media (min-width: 40rem) {
    .digest-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  }
  @media (max-width: 63.999rem) {
    body .front { display: flex; flex-direction: column; padding-top: 24px; }
    body .col-c, body .col-l, body .col-r { padding-inline: 0; border-left: 0; width: 100%; }
    body .top { padding-top: 0; }
    .col-l .mini-head { border: 0; }
    .col-r > .sec { margin-top: 32px; }
    .col-r .sec-head { border-top: 3px solid var(--rule-strong); padding-top: 8px; }
    .tn-home-cta-in { flex-direction: column; align-items: stretch; }
    .tn-home-cta-acts { display: grid; grid-template-columns: 1fr; }
  }
  @media (min-width: 48rem) {
    .tn-member-guest-acts { width: auto; max-width: 44%; }
    .tn-home-cta-acts { min-width: 240px; max-width: 300px; }
  }
  @media (min-width: 64rem) {
    .nav ul { flex-wrap: nowrap; justify-content: center; }
    .nav { --nav-px: clamp(6px, .7vw, 12px); overflow-x: auto; scrollbar-width: thin; }
    .nav li { flex: none; display: flex; align-items: center; }
    .nav a.t { font-size: 14px; letter-spacing: 0; }
    .nav-sub-toggle { flex: none; width: 44px; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
    .nav-sub-toggle:hover, .nav-sub-toggle[aria-expanded="true"] { background: var(--paper-2); color: var(--shu); }
    .nav .nav-sub-toggle .caret { position: static; display: inline-block; margin: -4px 0 0; }
    .nav-sub-toggle[aria-expanded="true"] .caret { transform: rotate(225deg); }
    .nav .sub { position: fixed; }
    .nav .sub[hidden] { display: none !important; }
    .nav .sub a { white-space: normal; }
    body .front { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); grid-template-areas: "c r" "l l"; gap: 0 32px; }
    body .col-c { padding-right: 0; }
    body .col-r { padding-left: 32px; }
    .digest-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .dg-card { padding-top: 16px; }
    body .col-l .st-list { gap: 28px; }
    .tn-home-cta-acts { width: 260px; }
  }
  @media (min-width: 64rem) and (max-width: 74.999rem) {
    .nav ul { justify-content: flex-start; }
    .nav a.t { font-size: 13px; padding-inline: 6px; }
    .nav-sub-toggle { width: 44px; }
  }
}

@layer components {
  .drawer-search-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  body .row--text, body .thumb-left--text, body .lead-st--text { grid-template-columns: minmax(0, 1fr); }
  .tn-membership-articles { grid-template-columns: minmax(0, 1fr); }
  .tn-membership-article-group[hidden] { display: none !important; }
  .tn-plan-status { min-height: 46px; padding: 11px 16px; border: 1px solid var(--rule); color: var(--ink-2); text-align: center; font-size: 14px; margin-top: auto; }
  .tn-empty-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
  .tn-ranking-empty { padding-block: 16px; }
  .dg-head .more { font-size: 13px; margin: 0; }
}

@layer components {
  @media (max-width: 63.999rem) {
    body .mast-bar { height: 60px; grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr); align-items: center; }
    body .mast-bar .tn-logo { width: clamp(118px, 36vw, 150px); padding: 0; }
    body .mast-bar .l, body .mast-bar .r { height: 60px; align-items: center; }
    body .mast-bar .r { gap: 0; }
    .tn-hdr-login { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
    .tn-hdr-login span { display: none; }
    .tn-hdr-user { min-width: 44px; justify-content: center; padding: 0; }
  }
}

@layer components {
  .tn-dev-tools { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
  .tn-dev-tools > summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
  .tn-dev-tools .tn-dev-switcher { margin-top: 0 !important; }
  .dg-head h3 { display: flex; align-items: center; gap: 8px; }
  .dg-head h3::before { content: ""; width: 8px; height: 8px; background: var(--cat, var(--shu)); flex: none; }
}

@layer components {
  .byline > :first-child::before { content: none; }
  .tn-bottom-bar-inner { min-width: 220px; }
  .tn-bar-btn { flex: 1 1 0; }
}

/* The account overview stays compact; each personal library has its own paged view. */
@layer components {
  .tn-member-library-hub { display: block; margin-top: 32px; }
  .tn-library-entry-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border: 1px solid var(--rule); border-top: 3px solid var(--rule-strong); background: var(--paper-2); min-width: 0; }
  .tn-library-entry-card h3, .tn-library-entry-card h2 { font: 700 19px/1.5 var(--ff-serif); }
  .tn-library-entry-card .btn, .tn-library-entry-card .more { margin-top: auto; }
  .tn-library-page { max-width: 980px; padding-bottom: 32px; }
  .tn-library-header { margin-top: 20px; }
  .tn-library-header h1 { font: 900 clamp(26px, 4vw, 36px)/1.5 var(--ff-serif); }
  .tn-library-header .dek { margin-top: 10px; max-width: 44em; }
  .tn-library-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
  .tn-library-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--rule); font-size: 14px; font-weight: 700; }
  .tn-library-nav a[aria-current] { background: var(--btn); color: var(--on-btn); border-color: var(--btn); }
  .tn-library-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block: 20px; padding-block: 16px; border-block: 1px solid var(--rule); font-size: 14px; }
  .tn-library-page .tn-member-lib-item { align-items: flex-start; padding: 16px; gap: 16px; }
  .tn-library-page .tn-lib-item-main .hd { font-size: 17px; line-height: 1.65; }
  .tn-library-page .tn-member-lib-item > button { flex: none; }
  .tn-library-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-block: 24px; }
  .tn-library-page .tn-history-time { margin-left: 0; display: block; }
  @media (min-width: 40rem) {
    .tn-member-library-hub .tn-member-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 25rem) {
    .tn-library-page .tn-member-lib-item { flex-direction: column; }
    .tn-library-page .tn-member-lib-item > button { align-self: flex-end; }
  }
}

@layer components { .tn-library-page .tn-member-library { border-top: 0; padding-top: 0; margin-top: 0; } .tn-library-back { margin-top: 24px; } .tn-library-range { margin-bottom: 12px; } .tn-library-entry-card:hover { border-color: var(--link); } .tn-library-entry-count strong { font-size: 24px; } }
@layer components { .tn-member-library-hub { border-top: 0; padding-top: 0; } }