/* sites-v2 · skins.css
   Loaded after base.css (the prototypes-v2 stylesheet, radii multiplied by --rk at build time) and before each site's theme.css (variables only).
   1 header / brand / section-head / card variants, switched by data-* on <html>   2 headline size classes   3 Japanese type   4 home page skeletons   5 small additions */

/* ---------- 1. variants ---------- */
.site-head{background:var(--head-bg,var(--bg));color:var(--head-fg,var(--ink))}
.site-head .brand{color:var(--head-fg,var(--ink))}
.nav-top{color:color-mix(in srgb,var(--head-fg,var(--ink)) 76%,transparent)}
.nav-top:hover,.nav-group[aria-current]>.nav-top{color:var(--head-fg,var(--ink))}
.nav-menu>summary{color:var(--head-fg,var(--ink));border-color:color-mix(in srgb,var(--head-fg,var(--ink)) 30%,transparent)}
.nav-menu[open]>summary{background:var(--head-fg,var(--ink));color:var(--head-bg,var(--bg));border-color:var(--head-fg,var(--ink))}
[data-head="ink"] .site-head,[data-head="accent"] .site-head,[data-head="soft"] .site-head{border-bottom-color:transparent}
[data-head="ink"] .site-head .brand svg,[data-head="accent"] .site-head .brand svg{color:var(--head-fg)}
[data-head="ink"] .nav-group[aria-current]>.nav-top,[data-head="accent"] .nav-group[aria-current]>.nav-top{border-bottom-color:var(--head-fg)}
[data-head="double"] .site-head{border-top:3px solid var(--accent);border-bottom:1px solid var(--ink)}

.brand.long{font-size:14.5px}
@media (min-width:768px){.brand.long{font-size:16.5px}}
[data-brand="caps"] .brand span{text-transform:uppercase;letter-spacing:.05em;font-size:.8em;font-weight:700}
[data-brand="lower"] .brand span{text-transform:lowercase}
[data-brand="duo"] .brand i{font:italic 500 1em/1 var(--font-read);color:inherit;opacity:.78}
[data-brand="dot"] .brand i.dot{font-style:normal;font-weight:800;color:var(--mark);opacity:1}
[data-brand="box"] .brand svg{padding:4px;border-radius:calc(7px*var(--rk,1));background:var(--mark);color:var(--bg)}
[data-head="ink"][data-brand="box"] .site-head .brand svg,[data-head="accent"][data-brand="box"] .site-head .brand svg{background:var(--head-fg);color:var(--head-bg)}
[data-head="ink"][data-brand="dot"] .site-head .brand i.dot,[data-head="accent"][data-brand="dot"] .site-head .brand i.dot{color:inherit;opacity:.7}

[data-sec="bar"] .sec-head{border-top:0;padding-top:0}
[data-sec="bar"] .sec-head h2{padding-left:12px;border-left:4px solid var(--accent)}
[data-sec="plain"] .sec-head{border-top:0;padding:0 0 10px;border-bottom:1px solid var(--rule)}
[data-sec="chip"] .sec-head{border-top:1px solid var(--rule)}
[data-sec="chip"] .sec-head .eyebrow{display:inline-block;padding:4px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
[data-sec="center"] .sec-head{border-top:0;padding-top:0;flex-direction:column;align-items:center;gap:6px;text-align:center}
[data-sec="center"] .sec-head h2::after{content:"";display:block;width:44px;height:3px;margin:10px auto 0;border-radius:2px;background:var(--accent)}

[data-card="boxed"] .card>a{padding:12px;border:1px solid var(--rule);border-radius:var(--r);background:var(--bg)}
[data-card="boxed"] .card>a:hover{border-color:var(--accent)}
[data-card="shadow"] .card>a{padding:12px;border-radius:var(--r);background:var(--bg);box-shadow:var(--shadow)}
[data-card="shadow"] .card>a:hover{box-shadow:var(--shadow-lg)}
[data-card="tint"] .card>a{padding:12px;border-radius:var(--r);background:var(--panel)}
[data-card="tint"] .card>a:hover{background:var(--panel-2)}

/* ---------- 2. headline size classes (the generator picks one so the first screen keeps ad1; see lib.fit_h1 / pages.entry_fit) ---------- */
.hero h1.h-s{font-size:23px}
.hero h1.h-xs{font-size:21px}
.app-hero h1.h-s,.art-hero h1.h-s{font-size:22.5px}
.app-hero h1.h-xs,.art-hero h1.h-xs{font-size:20.5px}
.lede.lede-s{font-size:14px}
@media (min-width:768px){.hero h1.h-s,.hero h1.h-xs{font-size:32px}.app-hero h1.h-s,.app-hero h1.h-xs,.art-hero h1.h-s,.art-hero h1.h-xs{font-size:34px}.lede.lede-s{font-size:17px}}

/* ---------- 3. Japanese ---------- */
html[lang="ja"] body{line-height:1.75;line-break:strict;overflow-wrap:anywhere}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .ttl,html[lang="ja"] .nm,html[lang="ja"] .brand,html[lang="ja"] .btn{letter-spacing:0}
html[lang="ja"] .hero h1,html[lang="ja"] .app-hero h1,html[lang="ja"] .art-hero h1{font-size:24px;line-height:1.32;font-weight:700}
html[lang="ja"] .hero h1.h-s{font-size:22px}
html[lang="ja"] .hero h1.h-xs{font-size:20px}
html[lang="ja"] .lede,html[lang="ja"] .app-hero .lede,html[lang="ja"] .art-hero .lede{font-size:15px;line-height:1.6}
html[lang="ja"] .lede.lede-s{font-size:14px}
html[lang="ja"] .sec p,html[lang="ja"] .article-body p,html[lang="ja"] .blk p{line-height:1.85}
html[lang="ja"] .card .ttl,html[lang="ja"] .log .ttl{line-height:1.45}
html[lang="ja"] .eyebrow,html[lang="ja"] .tag,html[lang="ja"] .kind,html[lang="ja"] .blk h3,html[lang="ja"] .facts dt,html[lang="ja"] .dateline,html[lang="ja"] .nextline b,html[lang="ja"] .cta-hook b{letter-spacing:.04em}
html[lang="ja"] .cta-note,html[lang="ja"] .nextline,html[lang="ja"] .cta-hook{text-wrap:pretty}
@media (min-width:768px){html[lang="ja"] .hero h1,html[lang="ja"] .app-hero h1,html[lang="ja"] .art-hero h1,html[lang="ja"] .hero h1.h-s,html[lang="ja"] .hero h1.h-xs{font-size:32px}html[lang="ja"] .lede{font-size:17px}}

/* ---------- 4. home skeletons ---------- */
.ad-sec.first .ad{margin:30px auto 4px}
.side-h{margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--ink);font:800 15px/1.3 var(--font-display)}
.mini{list-style:none;margin:0;padding:0}
.mini li{border-bottom:1px solid var(--rule)}
.mini a{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding:10px 0;color:var(--ink);text-decoration:none}
.mini .icon{grid-row:1/3;width:40px;height:40px;border-radius:calc(10px*var(--rk,1));border:1px solid var(--rule);background:#fff}
.mini a>span{font:700 15px/1.3 var(--font-ui)}
.mini a small{grid-column:2;font-size:13px;line-height:1.4;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini a:hover>span{color:var(--accent)}
.side .more{display:inline-block;padding:10px 0 0;font:500 13px/1.3 var(--font-ui);text-decoration:none}
.home .hero .eyebrow{margin-bottom:10px}

.h-magtop h1{font-size:30px;line-height:1.08}
.h-magtop .lede{margin:0;max-width:70ch}
.h-mag{display:grid;gap:22px;margin-top:36px}
.h-mag .cards{grid-template-columns:1fr}
@media (min-width:960px){.h-mag{grid-template-columns:1.7fr 1fr;column-gap:40px}.h-magtop h1{max-width:20ch}.home .h-magtop h1{font-size:54px;letter-spacing:-.035em}}

.h-mast{align-items:center;text-align:center;padding:8px 0 0}
.h-mast h1{max-width:20ch;font-size:30px}
.h-mast .lede{max-width:62ch;margin:0 auto}
@media (min-width:960px){.home .h-mast h1{font-size:54px}}
.ad-sec.first+.sec,.ad-sec.first+.index-cols>.sec{margin-top:44px}

.h-letter{display:grid;gap:26px}
.h-letter .byline{margin:2px 0 14px}
.h-letter .lede{margin:0}
.h-letter .sig{margin:14px 0 0;padding-left:14px;border-left:3px solid var(--accent);font:400 15px/1.6 var(--font-read);color:var(--ink-2)}
@media (min-width:960px){.h-letter{grid-template-columns:1.5fr 1fr;column-gap:52px;align-items:start}.home .h-letter h1{font-size:44px}}

.h-shelves .tiles{margin-top:6px}

.h-index{padding-bottom:16px;border-bottom:3px double var(--ink)}
.h-index .index-top{display:flex;flex-direction:column;gap:8px}
.h-index h1{margin:0;font-size:28px}
.h-index .index-top .eyebrow{margin:0}
.h-index .lede{max-width:72ch;margin:12px 0 0}
.index-cols{display:grid}
.index-cols>.sec{margin-top:36px}
.glist{list-style:none;margin:0;padding:0}
.glist li{border-bottom:1px solid var(--rule)}
.glist a{display:block;padding:12px 0;color:var(--ink);text-decoration:none}
.glist .kind{display:block;margin-bottom:3px;font:500 10.5px/1.3 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.glist b{font:700 16px/1.35 var(--font-display)}
.glist a:hover b{color:var(--accent)}
@media (min-width:960px){.h-index .index-top{flex-direction:row;align-items:baseline;justify-content:space-between;gap:24px}.home .h-index h1{font-size:40px}
 .index-cols{grid-template-columns:1.6fr 1fr;column-gap:48px}.index-cols .log.two{column-count:1}}

@media (min-width:960px){.cards.lead{grid-template-columns:repeat(4,minmax(0,1fr))}.cards.lead .big{grid-column:1/3;grid-row:1/3}}

.h-dir .chips{margin:0 0 20px}
.wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 8px}
.wall a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);text-decoration:none;text-align:center}
.wall .icon{width:56px;height:56px;border-radius:calc(14px*var(--rk,1));border:1px solid var(--rule);background:#fff;transition:transform .2s}
.wall a:hover .icon{transform:translateY(-2px)}
.wall span{max-width:100%;font:500 11.5px/1.25 var(--font-ui);color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wall span.gl{display:grid;place-items:center;width:56px;height:56px;font:800 20px/1 var(--font-display);color:#fff;background:var(--h)}
@media (min-width:600px){.wall{grid-template-columns:repeat(6,minmax(0,1fr))}.wall .icon,.wall span.gl{width:64px;height:64px}}

.h-band .band{margin:-20px -16px 20px;padding:28px 16px 26px;background:var(--band,var(--accent));color:#fff}
.h-band .band h1{color:#fff}
.h-band .band .lede{margin:0;color:rgba(255,255,255,.92)}
.h-band .band .eyebrow{color:rgba(255,255,255,.82)}
@media (min-width:768px){.h-band .band{margin:0 0 28px;padding:44px 40px;border-radius:var(--r)}.home .h-band .band h1{max-width:20ch;font-size:46px}}
.cards.rail-x{display:flex;gap:16px;margin:0 -16px;padding:0 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rail-x>.card{flex:0 0 78%;scroll-snap-align:start}
@media (min-width:600px){.rail-x>.card{flex-basis:300px}}
@media (min-width:1100px){.cards.rail-x{margin:0;padding:0 0 10px}}

.h-split{display:grid;gap:24px}
.h-split .lede{margin:0}
@media (min-width:960px){.h-split{grid-template-columns:1.1fr 1fr;column-gap:52px;align-items:center}.home .h-split h1{font-size:48px}.h-split .wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
.home-cta{max-width:420px;margin:0 auto}
.home-cta .cta-note{margin-top:16px}

/* ---------- 5. additions ---------- */
.pcol[data-v]{--pc:var(--ht)}
.pcol li>a small{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.picks{margin:18px 0;padding:14px 16px;border:1px solid var(--rule);border-radius:var(--r);background:var(--panel)}
.picks h3{margin:0 0 6px;font:800 16px/1.3 var(--font-display)}
.picks ol{margin:0;padding-left:20px}
.picks li{margin:6px 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.legal .lang{margin-left:10px}
.facts-src,.rail small,.disc-line,.store-blk .src,.loghead .ver{overflow-wrap:anywhere}
.hero h1,.sec h2,.card .ttl,.log .ttl,.appcard .nm,.morelinks a>span,.mini a>span{overflow-wrap:anywhere}
/* not on the H1: phrase breaks can add a line above ad1 */
html[lang="ja"] .sec h2,html[lang="ja"] .card .ttl,html[lang="ja"] .log .ttl,html[lang="ja"] .glist b,html[lang="ja"] .cta-note,html[lang="ja"] .nextline{word-break:auto-phrase}