.note-bio{font-size:17.5px;line-height:1.5;color:var(--ink-40);max-width:52ch;margin:24px 0 0}
.layout-marquee .single.note .note-bio{font-size:17.5px;line-height:1.5;color:var(--ink-40);margin:8px 0 0;max-width:34ch}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:var(--accent-ink,#fff);padding:8px 14px;font-size:16.5px}.skip:focus{left:8px;outline:2px solid #fff}

:root{
  --sans:"Hiragino Sans","Zen Kaku Gothic New","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.25s; --t-slow:.6s;
  --bg:#FFFFFF; --ink:#000000; --ink-40:rgba(0,0,0,.62); --ink-25:rgba(0,0,0,.56); --rule:rgba(0,0,0,.5); --rule-soft:rgba(0,0,0,.12);
  --ph:#F2F2F2; --bar:#000000; --bar-ink:#FFFFFF; --bar-60:rgba(255,255,255,.6);
  --accent:#EC5CFF; --accent-ink:#000000; --accent-40:rgba(0,0,0,.7); --accent-rule:rgba(0,0,0,.25);
  --pill:#000000; --pill-ink:#FFFFFF; --up:#EC5CFF;
  --ink-rgb:0,0,0; --bg-rgb:255,255,255;
  --board:#000; --board-ink:#fff; --board-dim:rgba(255,255,255,.6); --board-rule:rgba(255,255,255,.22); --board-mq:#F3F1EE; --board-mq-ink:#000; --board-mq-dim:rgba(0,0,0,.45);
  --accent-text:#B000C4;
 --bar-accent:#EC5CFF;

}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E0E10; --ink:#FFFFFF; --ink-40:rgba(255,255,255,.5); --ink-25:rgba(255,255,255,.5); --rule:rgba(255,255,255,.22); --rule-soft:rgba(255,255,255,.1);
  --ph:#1A1A1D; --bar:#000000; --pill:#FFFFFF; --pill-ink:#000000;
  --ink-rgb:255,255,255; --bg-rgb:14,14,16;
  --board:#000; --board-ink:#fff; --board-mq:#1A1A1D; --board-mq-ink:#fff; --board-mq-dim:rgba(255,255,255,.55);
  --accent-text:var(--accent);
 --bar-rule:rgba(255,255,255,.12);

}}
:root[data-theme="dark"]{
  --bg:#0E0E10; --ink:#FFFFFF; --ink-40:rgba(255,255,255,.5); --ink-25:rgba(255,255,255,.5); --rule:rgba(255,255,255,.22); --rule-soft:rgba(255,255,255,.1);
  --ph:#1A1A1D; --bar:#000000; --pill:#FFFFFF; --pill-ink:#000000;
  --ink-rgb:255,255,255; --bg-rgb:14,14,16;
  --board:#000; --board-ink:#fff; --board-mq:#1A1A1D; --board-mq-ink:#fff; --board-mq-dim:rgba(255,255,255,.55);
  --accent-text:var(--accent);
 --bar-rule:rgba(255,255,255,.12);

}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:19.5px;line-height:1.3;font-weight:500;letter-spacing:0;font-feature-settings:"cv05","cv11","ss03";-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}   /* the search and the sign-up fields cleared their outline and never put one back */
.menu .search input:focus-visible{outline-color:var(--accent-ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;letter-spacing:inherit}
img{display:block;max-width:100%}
.grey{color:var(--ink-40);overflow-wrap:anywhere}
:is(h1,.h1){margin:0;font-size:43px;font-weight:500;line-height:1.2;letter-spacing:-.02em}
h2{margin:0;font-size:25.36px;font-weight:500;line-height:1.2;letter-spacing:-.02em}
.sub{margin:0;color:var(--ink-25)}
.pill{display:inline-block;vertical-align:middle;border-radius:9999px;background:var(--pill);color:var(--pill-ink);font-size:14.6px;padding:6px 11px;line-height:1;letter-spacing:0;margin-right:6px;position:relative;top:-2px;white-space:nowrap}
.pill.jpill{background:none;color:var(--ink);border:1px solid var(--ink)}
.jp{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;letter-spacing:0}

/* ---------- black bar (Slanted) ---------- */
.bar{position:fixed;left:0;top:0;z-index:60;width:100%;height:48px;background:var(--bar);color:var(--bar-ink);box-shadow:0 1px 0 var(--bar-rule,transparent);display:flex;align-items:center;gap:24px;padding:0 16px}
.bar .logo{font-size:22px;letter-spacing:-.03em;display:flex;align-items:baseline;gap:8px}
.bar .logo .jp{font-size:16px;color:var(--bar-60);white-space:nowrap}
.bar .logo .logo-img{height:22px;width:auto;display:block;position:relative;top:2px}
@media(max-width:960px){.bar .logo .logo-img{height:18px}}
.bar .tick{margin-left:auto;font-size:16.5px;color:var(--bar-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar .tick b{font-weight:500;color:var(--bar-accent,var(--accent-text,var(--accent)))}
.bar .tick a{color:var(--bar-60)} .bar .tick a:hover{color:var(--bar-ink)}
.bar .menu-btn{font-size:16.5px;display:flex;align-items:center;gap:10px;color:var(--bar-ink);flex:none}
.bar .menu-btn i{display:inline-block;width:20px;height:14px;position:relative}
.bar .menu-btn i:before,.bar .menu-btn i:after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform var(--t-fast),top var(--t-fast),box-shadow var(--t-fast)}
.bar .menu-btn i:before{top:1px;box-shadow:0 5px 0 currentColor} .bar .menu-btn i:after{top:11px}
.bar.open .menu-btn i:before{top:6px;transform:rotate(45deg);box-shadow:none} .bar.open .menu-btn i:after{top:6px;transform:rotate(-45deg)}

/* ---------- dropdown menu (accent panel) ---------- */
.menu{position:fixed;left:0;right:0;top:48px;z-index:55;background:var(--accent);color:var(--accent-ink);transform:translateY(-102%);visibility:hidden;transition:transform var(--t-slow) var(--ease),visibility 0s var(--t-slow);max-height:calc(100vh - 48px);overflow:auto}
.menu.open{transform:none;visibility:visible;transition:transform var(--t-slow) var(--ease),visibility 0s}   /* closed, the menu leaves the tab order */
.menu .grid{display:grid;grid-template-columns:1fr 1fr 1fr}
.menu .grid > div{padding:0 16px 40px;border-left:1px solid var(--accent-rule)}
.menu .grid > div:first-child{border-left:0}
.menu .ch{height:48px;display:flex;align-items:center;font-size:25.36px;border-bottom:1px solid var(--accent-rule);margin:0 -16px 16px;padding:0 16px}
.menu a,.menu button{display:block;font-size:25.36px;line-height:1.35;text-align:left}
.menu a:hover,.menu button:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.menu .gap{height:22px}
.menu .small{font-size:19.5px;color:var(--accent-40)}
.menu button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.scrim{position:fixed;inset:48px 0 0;z-index:50;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity var(--t-fast)}
.scrim.open{opacity:1;pointer-events:auto}
/* A reader who asked the system for no motion was still given a pulsing "now playing" pill and
   bouncing equaliser bars: the targeted rules below cover what we remembered to name, and this
   covers what we did not. Everything lands on its final frame instead of being removed. */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}}
@media(prefers-reduced-motion:reduce){.menu{transition:none}.bar .menu-btn i:before,.bar .menu-btn i:after{transition:none}}

/* ---------- column heads + three independent columns ---------- */
.colhead{position:fixed;top:48px;left:0;right:0;z-index:40;height:48px;background:var(--bg);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr 1fr}
.colhead > div{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-left:1px solid var(--rule);font-size:25.36px}
.colhead > div:first-child{border-left:0}
.colhead > div span{font-size:16.5px;color:var(--ink-40);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:12px}
.colhead > div span.l{font-size:25.36px;color:var(--ink);margin-left:0;overflow:visible}
.cols{padding-top:96px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start}
.col{border-left:1px solid var(--rule);min-width:0;will-change:transform}
.cols.parallax .col{transform:translateY(var(--y,0px))}
.col:first-child{border-left:0}
.col > section{padding:32px 16px;border-bottom:1px solid var(--rule)}
.col > section:last-child{border-bottom:0;padding-bottom:32px}
.head{margin-bottom:24px}
.head .sub{margin-top:4px}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.head-row a,.head-row button{font-size:19.5px;color:var(--ink-40);white-space:nowrap}
.head-row a:hover,.head-row button:hover{color:var(--ink)}
.tabs{display:none}
.tabs[hidden]{display:none !important}   /* inner pages set hidden; the phone rule below must not override it */
@media(max-width:960px){
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--bg);color:var(--ink);border-top:1px solid var(--ink);padding-bottom:env(safe-area-inset-bottom)}
  .tabs button{height:56px;font-size:16.5px;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
  .tabs button small{font-size:14.6px;letter-spacing:.04em;color:var(--ink-40)}
  .tabs button[aria-pressed="true"]{color:var(--accent-text,var(--accent))}
  .tabs button[aria-pressed="true"] small{color:var(--accent-text,var(--accent))}
  .tabs button[aria-pressed="true"]:before{content:"";display:block;width:24px;height:2px;background:var(--accent);margin-bottom:4px}
  .cols.tabbed .col{display:none}
  .cols.tabbed .col.active{display:block}
  .board{padding-bottom:56px}
  .colhead{display:none}
  .cols{display:block;height:auto;padding-top:48px}
  .col{border-left:0;transform:none !important}
  .col + .col{border-top:1px solid var(--rule)}
  .col > section:last-child{padding-bottom:32px}
  .menu .grid{grid-template-columns:1fr}.menu .grid > div{border-left:0}
  .bar .tick{display:none}
  .bar .logo{margin-right:auto}   /* the counter that pushed the menu right is gone on phones; the logo pushes instead, whatever sits after it */
  :is(h1,.h1){font-size:34px}
}

/* ---------- news column ---------- */
.lead-sec .note{margin-top:8px}
.lead-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:24px}
.lead-thumbs .thumb h2{font-size:19.5px}
.lead-sec .more{display:inline-block;margin-top:20px;color:var(--ink-40)}
.lead-sec .more:hover{color:var(--ink)}
.post{display:block;margin-top:40px}
.post:first-of-type{margin-top:0}
.post .pic{aspect-ratio:3/2;background:var(--ph);overflow:hidden;position:relative}
.pic.noimg{display:grid;place-items:center;background:var(--ph)}
.pic.noimg span{font-size:25.36px;color:var(--ink-40);padding:16px;text-align:center}
.pic img[data-failed]{display:none}
.post .pic img{width:100%;height:100%;object-fit:cover}
.post h2{margin-top:14px}
.post .meta{margin-top:8px;font-size:14.6px;color:var(--ink-40)}
.post:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* A tablet fell into the phone rules at 960px and got one column of 736x491 pictures, one story a screen. Two columns
   between 601 and 960px, on the column layouts only - the bands and the marquee carry their own grids there. */
@media(min-width:601px) and (max-width:960px){body:not(.layout-bands):not(.layout-marquee) #posts{display:grid;grid-template-columns:1fr 1fr;gap:36px 20px;align-items:start}body:not(.layout-bands):not(.layout-marquee) #posts .post,body:not(.layout-bands):not(.layout-marquee) #posts .post:first-of-type{margin-top:0}}
.load-more{display:block;margin-top:40px;padding:16px 0;border-top:1px solid var(--rule);width:100%;text-align:left;font-size:25.36px}
.load-more:hover{text-decoration:underline;text-underline-offset:4px}
.empty{padding:40px 0;color:var(--ink-25)}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.thumb{display:block;min-width:0}
.thumb .pic{aspect-ratio:3/2;background:var(--ph);overflow:hidden}
.thumb .pic img{width:100%;height:100%;object-fit:cover}
.thumb h2{font-size:19.5px;margin-top:8px}
.thumb:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* ---------- radar column ---------- */
.accent{background:var(--accent);color:var(--accent-ink)}
.accent .sub,.accent .grey{color:var(--accent-40)}
.trend{display:grid;grid-template-columns:1fr auto auto auto;gap:8px 14px;padding:16px 0 18px;border-top:1px solid var(--accent-rule);align-items:baseline;width:100%;text-align:left;font-size:25.36px;line-height:1.2}
.trend:first-child{border-top:0;padding-top:0}
.trend .num{font-variant-numeric:tabular-nums;min-width:2ch;text-align:right}
.trend .delta{font-size:19.5px;color:var(--accent-40);min-width:4ch;text-align:right}
.trend .delta.up{color:var(--accent-ink)}
.spark{width:72px;height:22px;display:block;align-self:center}
.spark polyline{fill:none;stroke:var(--accent-40);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark circle{fill:var(--accent-ink)}
.trend[aria-pressed="true"] .n,.trend:hover .n{text-decoration:underline;text-underline-offset:5px}
.trend[aria-pressed="true"] .spark polyline,.trend:hover .spark polyline{stroke:var(--accent-ink)}
.trends-more{margin:18px 0 0;font-size:19.5px;color:var(--accent-40)}
.trends-more button{color:var(--accent-ink)}
.colours .bar-strip{display:flex;height:56px;width:100%;overflow:hidden;margin-top:14px}
.colours .bar-strip a{display:block;height:100%;min-width:6px;transition:flex-grow .3s}
.colours .bar-strip a:hover{flex-grow:3 !important}
.colours .names{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:19.5px;color:var(--ink-40)}
.colours .names b{font-weight:500;color:var(--ink)}
/* studio sound — a vertical studio day */
.sound{padding:0 !important}
.sound .head{padding:32px 16px 0}
.sound .day{position:relative;margin-top:24px;border-top:1px solid var(--rule)}
.slat{display:grid;grid-template-columns:76px 1fr auto minmax(30px,auto);gap:0 14px;align-items:center;height:52px;padding:0 16px;color:#fff;border-top:1px solid rgba(0,0,0,.15);position:relative;outline:none}
.slat:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.slat:first-child{border-top:0}
.slat.dark{color:#141414}
.slat .t{font-size:19.5px;line-height:1.1;font-weight:500;white-space:nowrap}
.slat .t b{font-weight:500}
.slat .t small{display:none}
.slat .ti{min-width:0}
.slat h2{font-size:19.5px;line-height:1.1;display:flex;align-items:center;min-width:0}
.slat h2 span.n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slat p{display:none}
.slat .mood{font-size:14.6px;border:1px solid currentColor;border-radius:9999px;padding:4px 10px;display:inline-block;line-height:1;white-space:nowrap;opacity:.9}
.slat .nowpill{font-weight:500;background:var(--accent);color:var(--accent-ink);border-radius:9999px;padding:6px 10px;font-size:14.6px;line-height:1;white-space:nowrap;justify-self:end;animation:pulse 2.4s ease-in-out infinite}
.slat .play{width:30px;height:30px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:14.6px;justify-self:end}
.slat:hover .play{background:currentColor}.slat:hover .play i{color:#fff}.slat.dark:hover .play i{color:#141414}
.slat:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:960px){.slat{grid-template-columns:64px 1fr auto 28px;gap:0 10px}.slat .mood{display:none}}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--accent);z-index:2;pointer-events:none}
.nowline b{position:absolute;right:16px;top:-13px;font-weight:500;background:var(--accent);color:var(--accent-ink);border-radius:9999px;padding:5px 10px;font-size:14.6px;line-height:1;white-space:nowrap}
.sound .foot{padding:14px 16px 32px;font-size:16.5px;color:var(--ink-40)}
.embed{padding:12px 16px 16px;background:var(--bg);border-top:1px solid var(--rule-soft)}
.embed iframe{width:100%;height:152px;border:0;border-radius:12px;display:block}
.embed .open{display:flex;justify-content:space-between;gap:12px;font-size:14.6px;color:var(--ink-40);padding-top:8px}
.embed .open span b{font-weight:500;color:var(--ink)}
.embed .open a{color:var(--ink)}.embed .open a:hover{color:var(--accent-text,var(--accent))}
.slat.open .play{background:currentColor}.slat.open .play i{color:#fff}.slat.dark.open .play i{color:#141414}
.pair{margin-top:28px}.pair:first-child{margin-top:0}
.pair .theme{font-size:19.5px;color:var(--ink-40);margin-bottom:10px}
.pair .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pair .two .thumb h2{font-size:19.5px}

/* ---------- japan column ---------- */
.subhead{margin:40px 0 16px;padding-top:24px;border-top:1px solid var(--rule)}
.subhead:first-of-type{margin-top:0;padding-top:0;border-top:0}
.subhead .grey{font-size:19.5px}
.events .ev{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:14px 0;border-top:1px solid var(--rule-soft);align-items:baseline}
.events .ev:first-child{border-top:0;padding-top:0}
.events .ev .d{grid-column:1/-1;font-size:16.5px;color:var(--ink-40)}
.events .ev h2{font-size:25.36px}
.events .ev .v{grid-column:1;font-size:19.5px;color:var(--ink-40)}
.events .ev .pill.soon{background:none;color:var(--ink);border:1px solid var(--ink)}
.events .ev .pill.closing{background:var(--accent);color:var(--accent-ink)}
.events .ev:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
/* A picture that has not arrived yet used to be a dark rectangle. The frame now carries the publication's name
   from the start; the image covers it when it loads, and it stays if the image never comes. */
.pic[data-src]:not(.noimg){position:relative}
.pic[data-src]:not(.noimg):before{content:attr(data-src);position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:var(--ink-40);font-size:19.5px;z-index:0}
.pic[data-src] img{position:relative;background:var(--ph)}   /* no z-index: the label sits before the image in box order, so the image covers it anyway — a z-index here lifted the image above captions laid over it (Cinepuuulse's lead lost its headlines) */
[hidden]{display:none!important}   /* .more-link and friends set display:block and were beating the attribute */
.more-link{display:block;margin-top:16px;color:var(--ink-40);font-size:19.5px}
.more-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.list a{display:block;padding:12px 0;border-top:1px solid var(--rule-soft);font-size:25.36px;line-height:1.2}
.list a:first-child{border-top:0;padding-top:0}
.list a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.list.wire a .ja{display:block;font-size:19.5px;color:var(--ink-40);margin-top:2px}
.list.trendlist a{font-size:19.5px;padding:10px 0}
.list.sources{display:flex;flex-wrap:wrap;gap:2px 14px;line-height:1.35}
.list.sources a{display:inline;font-size:14.6px;padding:0;border:0;white-space:nowrap}
.list.sources a .grey{font-size:14.6px;margin-left:3px}
.list.trendlist a .grey{white-space:nowrap}
footer{font-size:16.5px;color:var(--ink-40);line-height:1.5}
.about-text p{font-size:19.5px;line-height:1.45;margin:16px 0 0;max-width:46ch}
.about-text h2{margin-bottom:8px}

/* ---------- footer: departure board ---------- */
.board{background:var(--board,#000);color:var(--board-ink,#fff);border-top:1px solid var(--board-rule,rgba(255,255,255,.25));position:relative;z-index:5}
.board .mq{overflow:hidden;white-space:nowrap;height:120px;display:flex;align-items:center;background:var(--board-mq,#F3F1EE);color:var(--board-mq-ink,#000)}
:root[data-theme="dark"] .board .mq{background:var(--board-mq,#1A1A1D);color:var(--board-mq-ink,#fff)}
.board .track{display:inline-flex;gap:0;animation:mq var(--dur,60s) linear infinite;will-change:transform}
.board .mq:hover .track{animation-play-state:paused}
.board .track span{font-size:56px;line-height:1;letter-spacing:-.02em;color:var(--board-mq-accent,var(--accent-text,var(--accent)));padding-right:64px;font-variant-numeric:tabular-nums}
.board .track span.ja{font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;letter-spacing:.04em;font-weight:500}
.board .track span.dim{color:var(--board-mq-dim,rgba(0,0,0,.45))}
:root[data-theme="dark"] .board .track span.dim{color:var(--board-dim,rgba(255,255,255,.55))}
.board .track span i{font-style:normal;color:var(--board-mq-ink,#000);margin-right:28px}
:root[data-theme="dark"] .board .track span i{color:var(--board-ink,#fff)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.board .track{animation:none}}
.board .links{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:16.5px;color:var(--board-dim,rgba(255,255,255,.6))}
.board .links > div{padding:20px 16px 28px;border-left:1px solid var(--board-rule,rgba(255,255,255,.18));display:flex;flex-wrap:wrap;gap:8px 20px;align-content:start}
.board .links > div:first-child{border-left:0}
.board .links a{color:var(--board-ink,#fff)}.board .links a:hover{color:var(--accent-text,var(--accent))}
.board .links b{font-weight:500;color:var(--board-dim,rgba(255,255,255,.6));width:100%}
@media(max-width:960px){.board .mq{height:88px}.board .track span{font-size:36px;padding-right:40px}.board .links{grid-template-columns:1fr}.board .links > div{border-left:0;border-top:1px solid var(--board-rule,rgba(255,255,255,.18))}}

/* ---------- single pages (story / week / archive) ---------- */
.single{padding:96px 16px 64px;max-width:760px;margin:0 auto}
.single.left{margin:0;padding-left:24px}
.note-body p{font-size:22px;line-height:1.5;margin:0 0 22px;max-width:40ch}
:root[lang="ja"] .note-body p{font-size:20px;line-height:1.85}
.note-list a{display:block;padding:22px 0;border-top:1px solid var(--rule-soft)}
.note-list a:first-child{border-top:0;padding-top:0}
.note-list .d{font-size:16.5px;color:var(--ink-40);display:block;margin-bottom:6px}

/* ---- places map (self-written; GSI tiles) — restyled on the owner's note of 2026-09-21 ---- */
.layout-bands #places{padding-bottom:40px}
.places-sec{padding:20px 24px 8px}
.places-sec .head{margin:0 0 6px}
.places-sec .head .h1{font-size:44px;line-height:1;letter-spacing:-.02em}
.places-sec .head .sub{max-width:60ch}
@media (max-width:960px){ .places-sec{padding:62px 16px 0} .places-sec .head .h1{font-size:34px} }
.pmap-wrap{position:relative}
.pmap{position:relative;height:min(64vh,640px);min-height:380px;overflow:hidden;background:#EEF1EA;border-radius:18px;cursor:grab;touch-action:none;user-select:none;box-shadow:inset 0 0 0 1px var(--rule-soft)}
.pmap:active{cursor:grabbing}
.pmap::after{display:none}
.pmap-world{position:absolute;left:0;top:0;width:0;height:0;will-change:transform;transform-origin:0 0}
.pmap-tiles .lvl{position:absolute;left:0;top:0;transform-origin:0 0;transition:opacity .3s}
.pmap-tiles .lvl.old{pointer-events:none}
.pmap-tiles .lvl.gone{opacity:0}
.pmap-world.anim{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pmap-tiles img{position:absolute;width:256px !important;height:256px !important;max-width:none !important;max-height:none !important;pointer-events:none;filter:sepia(.1) saturate(.65) brightness(1.03) contrast(.94)}   /* the government's pale map, nearly as drawn: sea, parks and roads keep their colours; the grey-sepia wash read as mourning (owner, 2026-09-21) */
:root[data-theme="dark"] .pmap{background:#15130F;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 90px rgba(0,0,0,.5)}
:root[data-theme="dark"] .pmap-tiles img{filter:invert(1) hue-rotate(180deg) saturate(.4) brightness(.8) contrast(.85)}
/* pins: an ink disc with the kind's kanji and a short tail; colour by kind; the visited ones get the accent ring */
.pmap-marks .pm{position:absolute;transform:translate(-50%,calc(-100% - 6px)) scale(var(--inv,1));transform-origin:50% calc(100% + 6px);width:34px;height:34px;border-radius:50%;border:2px solid var(--bg);background:var(--accent);color:#fff;cursor:pointer;padding:0;box-shadow:0 3px 10px rgba(20,10,0,.28);transition:transform .15s,box-shadow .15s}
.pmap-marks .pm::after{content:"";position:absolute;left:50%;bottom:-8px;width:8px;height:8px;background:inherit;border-right:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:translateX(-50%) rotate(45deg)}
.pmap-marks .pm i{display:block;font-style:normal;font-size:15px;line-height:30px;font-family:var(--sans);font-weight:700;letter-spacing:0}
.pmap-marks .pm:hover,.pmap-marks .pm.on{transform:translate(-50%,calc(-100% - 6px)) scale(calc(1.18*var(--inv,1)));box-shadow:0 8px 20px rgba(20,10,0,.35);z-index:5}
.pmap-marks .pm u{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);pointer-events:none}
/* 'unsorted' (2026-09-30): a place whose name and article say neither food, drink, a bed nor a sight: a grey pin, never '食' */
.pmap-marks .pm.k-unsorted,.plist .pl.k-unsorted .k,.place-page .pl-near .k.k-unsorted,.pmap-ui .chips button.on.k-unsorted,.route-plan .rp-stop.k-unsorted i{background:#8A8F96;color:#fff}.pmap-tip.k-unsorted,.pmap-card.k-unsorted,.map-tease .mt-card.k-unsorted{--pc:#8A8F96}.pmap-ui .chips button.k-unsorted{--kc:#8A8F96}
.pmap-marks .pm.k-coffee{background:#6F4A2A}.pmap-marks .pm.k-bar{background:#4A3C8C}.pmap-marks .pm.k-sweets{background:#C94F78}.pmap-marks .pm.k-sight{background:#7A6A4F}.pmap-marks .pm.k-noodles{background:#D4A32A;color:#1C1A17}.pmap-marks .pm.k-sushi{background:#2E7C99}.pmap-marks .pm.k-stay{background:#3E7A4D}.pmap-marks .pm.k-comfort{background:#B2432B}.pmap-marks .pm.k-restaurant{background:var(--accent)}
.pmap-marks .pm.cl{border-radius:50%;transform:translate(-50%,-50%) scale(var(--inv,1));transform-origin:50% 50%;width:40px;height:40px;background:#fff;color:#1F1915;font-family:var(--mono);font-size:15px;font-weight:700;line-height:36px;border:2px solid var(--accent);box-shadow:0 0 0 5px rgba(var(--accent-rgb,196,69,26),.2),0 3px 10px rgba(20,10,0,.18)}
:root[data-theme="dark"] .pmap-marks .pm.cl{background:#241D18;color:#F3EDE4}
.pmap-marks .pm.cl::after{display:none}
.pmap-marks .pm.cl:hover{transform:translate(-50%,-50%) scale(calc(1.1*var(--inv,1)))}
.pmap-marks .pm.cl.big{width:48px;height:48px;line-height:44px;font-size:17px}
.pmap-osm .od{position:absolute;width:9px;height:9px;border-radius:50%;background:rgba(28,26,23,.34);border:1.5px solid rgba(247,243,236,.9);transform:translate(-50%,-50%) scale(var(--inv,1));cursor:pointer;transition:transform .15s,background .15s}
.pmap-osm .od:hover{transform:translate(-50%,-50%) scale(calc(1.8*var(--inv,1)));background:rgba(28,26,23,.75)}
.pmap-osm .od.a-cafe,.pmap-osm .od.a-coffee{background:rgba(111,74,42,.5)}.pmap-osm .od.a-bar,.pmap-osm .od.a-pub,.pmap-osm .od.a-izakaya{background:rgba(74,60,140,.5)}.pmap-osm .od.a-bakery,.pmap-osm .od.a-ice_cream,.pmap-osm .od.a-confectionery,.pmap-osm .od.a-pastry{background:rgba(201,79,120,.5)}
:root[data-theme="dark"] .pmap-osm .od{background:rgba(237,233,224,.35);border-color:rgba(14,13,12,.9)}
.pmap-tip.od{--pc:rgba(28,26,23,.45)}
.pmap-attr a{color:inherit;text-decoration:none}
.pmap-marks .me{position:absolute;width:16px;height:16px;border-radius:50%;background:#2A7FFF;border:3px solid #fff;box-shadow:0 0 0 8px rgba(42,127,255,.22);transform:translate(-50%,-50%) scale(var(--inv,1));pointer-events:none}
/* ---- motion: pins drop in, hover rings, a floating label, the list lights the pin ---- */
.pmap-tiles img{opacity:0;transition:opacity .4s ease}
.pmap-tiles img.ok{opacity:1}
.pmap-marks.drop .pm{animation:pmdrop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pmdrop{from{transform:translate(-50%,calc(-100% - 30px)) scale(calc(.3*var(--inv,1)));opacity:0}60%{opacity:1}to{transform:translate(-50%,calc(-100% - 6px)) scale(var(--inv,1));opacity:1}}
.pmap-marks.still .pm{animation:none !important;transition:none !important}
.pmap-marks.still .pmap-tip{display:none}
.pmap-marks.drop .pm.cl{animation:pmpop .4s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pmpop{from{transform:translate(-50%,-50%) scale(calc(.4*var(--inv,1)));opacity:0}to{transform:translate(-50%,-50%) scale(var(--inv,1));opacity:1}}
.pmap-marks .pm::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:0;pointer-events:none}
.pmap-marks .pm:hover::before,.pmap-marks .pm.on::before{animation:pmring 1.1s ease-out infinite}
@keyframes pmring{0%{transform:scale(.8);opacity:.75}100%{transform:scale(2.2);opacity:0}}
.pmap-marks .pm.cl:hover::before{animation:pmring 1.1s ease-out infinite;border-color:var(--accent)}
.pmap-marks .pm u{animation:pmvisit 1.6s ease-in-out 2}
@keyframes pmvisit{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.45}}
.pmap-marks .pm.lit{transform:translate(-50%,calc(-100% - 6px)) scale(calc(1.25*var(--inv,1)));z-index:6;box-shadow:0 10px 24px rgba(20,10,0,.4)}
.pmap-tip{position:absolute;z-index:8;pointer-events:none;transform:translate(-50%,calc(-100% - 46px)) scale(var(--inv,1));transform-origin:50% calc(100% + 46px);background:var(--bg);color:var(--ink);border-radius:12px;padding:9px 12px 8px;box-shadow:0 8px 24px rgba(20,10,0,.25);max-width:260px;white-space:nowrap;animation:pmtip .18s cubic-bezier(.2,.9,.3,1.2) both;border-left:5px solid var(--pc,var(--accent))}
.pmap-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:var(--bg);transform:translateX(-50%) rotate(45deg);box-shadow:3px 3px 6px rgba(20,10,0,.08)}
.pmap-tip b{display:block;font-family:var(--serif);font-size:17px;line-height:1.15;font-weight:600;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis}
.pmap-tip span{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-40);margin-top:3px;letter-spacing:.02em}
.pmap-tip.k-coffee{--pc:#6F4A2A}.pmap-tip.k-bar{--pc:#4A3C8C}.pmap-tip.k-sweets{--pc:#C94F78}.pmap-tip.k-sight{--pc:#7A6A4F}.pmap-tip.k-noodles{--pc:#D4A32A}.pmap-tip.k-sushi{--pc:#2E7C99}.pmap-tip.k-stay{--pc:#3E7A4D}.pmap-tip.k-comfort{--pc:#B2432B}.pmap-tip.cl{--pc:var(--ink)}
@keyframes pmtip{from{transform:translate(-50%,calc(-100% - 34px)) scale(calc(.85*var(--inv,1)));opacity:0}to{transform:translate(-50%,calc(-100% - 46px)) scale(var(--inv,1));opacity:1}}
.plist .pl{transition:transform .18s ease,background .18s ease;border-radius:10px;padding-left:6px;margin-left:-6px}
.plist .pl:hover{transform:translateX(6px);background:rgba(28,26,23,.04)}
:root[data-theme="dark"] .plist .pl:hover{background:rgba(255,255,255,.05)}
.plist .pl .k{transition:transform .18s ease}
.plist .pl:hover .k{transform:scale(1.15) rotate(-8deg)}
.pmap-ui .chips button{transition:transform .15s ease,background .15s ease}
.pmap-ui .chips button:hover{transform:translateY(-2px)}
.pmap-zoom button:hover{transform:scale(1.08)}
.pmap-zoom button{transition:transform .15s ease}
.map-button{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.map-button:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(20,10,0,.25)}
.map-button .mb-art b{transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.map-button:hover .mb-art b{transform:translateY(-6px)}
.map-button:hover .mb-art b:nth-child(2){transition-delay:.04s}.map-button:hover .mb-art b:nth-child(3){transition-delay:.08s}.map-button:hover .mb-art b:nth-child(4){transition-delay:.12s}.map-button:hover .mb-art b:nth-child(5){transition-delay:.16s}.map-button:hover .mb-art b:nth-child(6){transition-delay:.2s}
@media (prefers-reduced-motion:reduce){ .pmap-marks .pm,.pmap-marks .pm.cl,.pmap-tip,.pmap-marks .pm u{animation:none !important} .pmap-marks .pm:hover::before,.pmap-marks .pm.on::before{animation:none !important} .pmap-tiles img{transition:none;opacity:1} .plist .pl,.map-button,.map-button .mb-art b{transition:none} }
/* suggest a place */
.pmap-ui .tools button.sug{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pmap.dropping{cursor:crosshair}
.pmap-marks .drop-pin{position:absolute;width:22px;height:22px;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg) scale(var(--inv,1));transform-origin:0 100%;background:#2A7FFF;border:2px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.3);animation:pmpop .3s both}
.pmap-sheet{position:absolute;right:12px;top:12px;bottom:12px;width:min(380px,calc(100% - 24px));z-index:9;background:var(--bg);color:var(--ink);border-radius:16px;box-shadow:0 14px 40px rgba(20,10,0,.3);overflow:auto;padding:18px 20px;animation:pmsheet .25s cubic-bezier(.2,.7,.2,1) both}
@keyframes pmsheet{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.pmap-sheet .x{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:none;font-size:24px;color:var(--ink-40);cursor:pointer;display:grid;place-items:center}
.pmap-sheet h3{font-family:var(--serif);font-size:26px;line-height:1.05;margin:4px 0 8px;letter-spacing:-.015em}
.pmap-sheet p{font-size:15px;line-height:1.4;margin:0 0 12px}
.pmap-sheet label{display:block;font-family:var(--mono);font-size:13.5px;color:var(--ink-40);margin:10px 0 0}
.pmap-sheet input,.pmap-sheet textarea{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:9px 12px;margin-top:4px;border:1px solid var(--rule);border-radius:10px;background:var(--bg);color:var(--ink)}
.pmap-sheet .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pmap-sheet .pin{display:flex;gap:10px;align-items:center;margin:10px 0 0;flex-wrap:wrap}
.pmap-sheet .drop{font-family:var(--mono);font-size:14.6px;padding:8px 12px;border-radius:9999px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer}
.pmap-sheet .drop.on{background:#2A7FFF;color:#fff;border-color:#2A7FFF}
.pmap-sheet .dropped{font-family:var(--mono);font-size:13px;color:var(--ink-40)}
.pmap-sheet .acts{display:flex;gap:12px;align-items:center;margin-top:16px}
.pmap-sheet .go{font-family:var(--mono);font-size:15px;padding:10px 16px;border-radius:9999px;border:0;background:var(--ink);color:var(--bg);cursor:pointer}
.pmap-sheet .msg{font-family:var(--mono);font-size:13.5px;color:var(--ink-40)}
@media (max-width:960px){ .pmap-sheet{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:78%} }
/* likes */
.like{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:14.6px;padding:8px 13px;border-radius:9999px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;transition:transform .15s,background .2s,color .2s}
.like .h{font-size:16px;line-height:1;transition:transform .2s}
.like:hover .h{transform:scale(1.25)}
.like.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.like.pop .h{animation:lkpop .5s cubic-bezier(.2,.9,.3,1.6)}
@keyframes lkpop{0%{transform:scale(1)}40%{transform:scale(1.7) rotate(-12deg)}100%{transform:scale(1)}}
.note-like{display:flex;gap:12px;align-items:center;margin:28px 0 0;font-size:15px}
/* the controls float on the map: paper glass */
.pmap-ui{position:absolute;left:12px;right:12px;top:12px;z-index:6;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.pmap-ui > *{pointer-events:auto}
.pmap-ui .chips{display:flex !important;flex-wrap:nowrap !important;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px;margin:0}
.pmap-ui .chips button i{font-style:normal;font-weight:700;margin-right:1px}
.pmap-ui .chips button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--kc,var(--accent));flex:none}
.pmap-ui .chips button[data-k="all"]::before{display:none}
.pmap-ui .chips button.k-coffee{--kc:#6F4A2A}.pmap-ui .chips button.k-bar{--kc:#4A3C8C}.pmap-ui .chips button.k-sweets{--kc:#C94F78}.pmap-ui .chips button.k-sight{--kc:#7A6A4F}.pmap-ui .chips button.k-noodles{--kc:#D4A32A}.pmap-ui .chips button.k-sushi{--kc:#2E7C99}.pmap-ui .chips button.k-stay{--kc:#3E7A4D}.pmap-ui .chips button.k-comfort{--kc:#B2432B}.pmap-ui .chips button.k-restaurant{--kc:var(--accent)}
.pmap-ui .chips button.on::before{background:#fff}
.pmap-ui .chips::-webkit-scrollbar{display:none}
.pmap-ui .chips button{flex:0 0 auto;font-family:var(--mono);font-size:14.6px;padding:9px 13px 9px 11px;min-height:40px;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(var(--ink-rgb),.14);background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);border-radius:9999px;cursor:pointer;box-shadow:0 2px 8px rgba(20,10,0,.12);white-space:nowrap}
.pmap-ui .chips button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pmap-ui .chips button.on.k-coffee{background:#6F4A2A}.pmap-ui .chips button.on.k-bar{background:#4A3C8C}.pmap-ui .chips button.on.k-sweets{background:#C94F78}.pmap-ui .chips button.on.k-sight{background:#7A6A4F}.pmap-ui .chips button.on.k-noodles{background:#D4A32A;color:#1C1A17}.pmap-ui .chips button.on.k-sushi{background:#2E7C99}.pmap-ui .chips button.on.k-stay{background:#3E7A4D}.pmap-ui .chips button.on.k-comfort{background:#B2432B}.pmap-ui .chips button.on.k-restaurant{background:var(--accent);color:#fff}
.pmap-ui .tools{display:flex;gap:6px;align-items:center;max-width:520px}
@media (max-width:960px){ .pmap-ui .tools{flex-wrap:wrap;max-width:none} .pmap-ui .tools input{flex:1 1 150px;min-width:150px;font-size:15px;padding:8px 12px} .pmap-ui .tools button{padding:8px 10px;font-size:13.5px} }
.pmap-ui .tools input{flex:1 1 auto;min-width:0;font:inherit;font-size:16px;padding:9px 14px;min-height:40px;border:1px solid rgba(var(--ink-rgb),.14);border-radius:9999px;background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);box-shadow:0 2px 8px rgba(20,10,0,.12)}
.pmap-ui .tools button{font-family:var(--mono);font-size:14.6px;padding:9px 12px;min-height:40px;border:1px solid rgba(var(--ink-rgb),.14);background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);border-radius:9999px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(20,10,0,.12)}
.pmap-ui .tools button.on{background:#2A7FFF;color:#fff;border-color:#2A7FFF}

.pmap-n{position:absolute;left:12px;bottom:12px;z-index:6;font-family:var(--mono);font-size:14.6px;color:var(--ink);background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(8px);padding:6px 10px;border-radius:9999px;box-shadow:0 2px 8px rgba(20,10,0,.12)}
.pmap-zoom{position:absolute;right:12px;bottom:40px;display:flex;flex-direction:column;gap:6px;z-index:6}
.pmap-zoom button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),.14);background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(8px);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(20,10,0,.12)}
.pmap-attr{position:absolute;right:12px;bottom:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-40);z-index:6;text-decoration:none}
/* the card: a coloured edge for the kind, the name in the serif, two actions */
.pmap-card{position:absolute;left:12px;bottom:12px;z-index:7;max-width:min(440px,calc(100% - 24px));background:var(--bg);color:var(--ink);border-radius:16px;padding:18px 20px 16px 24px;box-shadow:0 14px 40px rgba(20,10,0,.28);overflow:hidden;opacity:1;animation:pmup .22s cubic-bezier(.2,.7,.2,1)}
.pmap-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--pc,var(--accent))}
.pmap-card.k-coffee{--pc:#6F4A2A}.pmap-card.k-bar{--pc:#4A3C8C}.pmap-card.k-sweets{--pc:#C94F78}.pmap-card.k-sight{--pc:#7A6A4F}.pmap-card.k-noodles{--pc:#D4A32A}.pmap-card.k-sushi{--pc:#2E7C99}.pmap-card.k-stay{--pc:#3E7A4D}.pmap-card.k-comfort{--pc:#B2432B}
@keyframes pmup{from{transform:translateY(12px)}to{transform:none}}
.pmap-card .x{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;background:none;font-size:24px;color:var(--ink-40);cursor:pointer;line-height:1;display:grid;place-items:center}
.pmap-card .like{position:absolute;right:46px;top:8px}
.pmap-card .kind{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pc,var(--accent))}
.pmap-card h3{font-family:var(--serif);font-size:28px;line-height:1.05;margin:6px 0 8px;letter-spacing:-.015em}
.pmap-card p{margin:0 0 4px;font-size:16px;line-height:1.4}
.pmap-card .addr{color:var(--ink-40)}
.pmap-card .src{font-family:var(--mono);font-size:14px;color:var(--ink-40);margin-top:6px}
.pmap-card .src a{color:inherit}
.pmap-card .was{display:inline-block;font-family:var(--mono);font-size:13.5px;background:var(--accent);color:var(--accent-ink);padding:3px 9px;border-radius:9999px;margin-left:8px;vertical-align:middle}
.pmap-card .acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.pmap-card .acts a{font-family:var(--mono);font-size:14.6px;padding:9px 14px;border-radius:9999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);text-decoration:none}
.pmap-card .acts a.go{background:none;border-color:var(--rule-soft);color:var(--ink)}
/* the list */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 32px;margin-top:22px}
.plist .pl{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--rule-soft);color:inherit;text-decoration:none}
.plist .pl:hover .t b{text-decoration:underline;text-underline-offset:3px}
.plist .pl .k{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;text-align:center;line-height:34px;font-weight:700;font-size:15px}
.plist .pl.k-coffee .k{background:#6F4A2A}.plist .pl.k-bar .k{background:#4A3C8C}.plist .pl.k-sweets .k{background:#C94F78}.plist .pl.k-sight .k{background:#7A6A4F}.plist .pl.k-noodles .k{background:#D4A32A;color:#1C1A17}.plist .pl.k-sushi .k{background:#2E7C99}.plist .pl.k-stay .k{background:#3E7A4D}.plist .pl.k-comfort .k{background:#B2432B}
.plist .pl .t b{display:block;font-size:18px;line-height:1.25;font-family:var(--serif);font-weight:600}
.plist .pl .t span{display:block;font-size:14px;color:var(--ink-40);font-family:var(--mono);margin-top:3px}
.plist .pl-more{grid-column:1/-1;font-family:var(--mono);font-size:14.6px}
@media (max-width:960px){ .pmap{height:66vh;min-height:360px;border-radius:0;margin:0 -16px} .plist{grid-template-columns:1fr} .pmap-card{left:8px;right:8px;max-width:none} .pmap-ui{left:8px;right:8px;top:8px} }
/* the video hero (site.video_hero): the latest video large, the next four beside it */
.layout-bands .tiles.vh{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);border-top:0}
.vhero{position:relative;background:#000}
.vhero .vh-play{display:block;width:100%;border:0;padding:0;background:#000;cursor:pointer;text-align:left;color:#fff;position:relative}
.vhero .pic{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.92;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.vhero .vh-play:hover .pic{transform:scale(1.03);opacity:1}
.vhero .vh-ov{position:absolute;left:0;right:0;bottom:0;padding:90px 28px 24px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 40%,rgba(0,0,0,.86));display:flex;flex-direction:column;gap:6px}
.vhero .vh-ov .k{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 10px;border-radius:9999px;width:max-content;max-width:100%}
.vhero .vh-ov b{font-family:var(--serif);font-size:34px;line-height:1.05;letter-spacing:-.015em;font-weight:600;max-width:22ch;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.vhero .vh-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-family:var(--mono);font-size:15px;background:var(--accent);color:#fff;padding:9px 14px;border-radius:9999px;width:max-content;transition:transform .15s}
.vhero .vh-play:hover .vh-go{transform:scale(1.05)}
.vhero iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.vh-list{display:flex;flex-direction:column;background:var(--bar);color:var(--bar-ink);border-left:1px solid rgba(255,255,255,.1)}
.vh-row{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);color:inherit;text-decoration:none;flex:1;transition:background .15s}
.vh-row:hover{background:rgba(255,255,255,.06)}
.vh-row .pic{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:0 0 auto}
.vh-row > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.vh-row b{font-family:var(--serif);font-size:16px;line-height:1.2;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vh-row > span > span{font-family:var(--mono);font-size:12.5px;opacity:.7}
.vh-row.more b{color:var(--accent)}
.phone-vh{display:none}
@media (max-width:960px){ .layout-bands .tiles.vh{grid-template-columns:1fr} .phone-vh{display:block;padding:48px 0 0;background:var(--bar);color:var(--bar-ink)} .phone-vh .vh-list{border-left:0} .phone-vh + .places-sec{padding-top:14px} .vhero .vh-ov{padding:50px 16px 16px} .vhero .vh-ov b{font-size:24px} .vh-list{flex-direction:row;overflow-x:auto;scrollbar-width:none} .vh-row{flex:0 0 240px;flex-direction:column;align-items:flex-start;border-bottom:0;border-right:1px solid rgba(255,255,255,.1)} .vh-row .pic{width:100%} }
.places-sec + .cols{padding-top:20px}
/* routes on the map: a line through numbered stops, a chip to pick one, a card with the day plan */
.pmap-route{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.pmap-route path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pmap-route .halo{stroke:rgba(var(--bg-rgb),.9);stroke-width:9}
.pmap-route .line{stroke:var(--accent);stroke-width:4;stroke-dasharray:2 10;animation:rtmarch 1.2s linear infinite}
@keyframes rtmarch{to{stroke-dashoffset:-12}}
.pmap-marks.has-route .pm:not(.rs):not(.cl){opacity:.28;filter:saturate(.4)}
.pmap-marks.has-route .pm.cl{opacity:.35}
.pmap-marks .pm.rs{width:36px;height:36px;background:var(--accent);color:var(--accent-ink);border:3px solid var(--bg);z-index:4;opacity:1 !important;filter:none !important}
.pmap-marks .pm.rs i{font-family:var(--mono);font-size:15px;font-weight:800;line-height:30px}
.pmap-ui .routes{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px}
.pmap-ui .routes button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:15.5px;padding:7px 14px 7px 10px;min-height:40px;max-width:min(100%,520px);border:1px solid var(--accent);background:rgba(var(--bg-rgb),.94);backdrop-filter:blur(8px);color:var(--ink);border-radius:9999px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px rgba(20,10,0,.12);transition:transform .15s}
.pmap-ui .routes button i{font-style:normal;color:var(--accent);font-size:17px}
.pmap-ui .routes button > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:960px){ .pmap-ui .routes button{max-width:78vw;font-size:14.6px} .pmap-ui .routes button small{display:none} }
.pmap-ui .routes button small{font-family:var(--mono);font-size:12px;color:var(--ink-40);font-weight:400}
.pmap-ui .routes button:hover{transform:translateY(-2px)}
.pmap-ui .routes button.on{background:var(--accent);color:var(--accent-ink)} .pmap-ui .routes button.on i,.pmap-ui .routes button.on small{color:inherit}
.pmap-card.pmap-rcard{display:block;padding:16px 44px 16px 24px;max-width:min(460px,calc(100% - 24px))}   /* the plain card is a grid with no padding (photo column); the route card is a block with its own */
.pmap-rcard .by{font-family:var(--mono);font-size:13.5px;color:var(--ink-40);margin:0 0 8px}
.pmap-rcard .stops{list-style:none;margin:0 0 6px;padding:0;max-height:34vh;overflow:auto}
.pmap-rcard .stops li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-top:1px solid var(--rule-soft);cursor:pointer;font-size:15px;line-height:1.3}
.pmap-rcard .stops li:hover{color:var(--accent-text)}
.pmap-rcard .stops li b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:12px;text-align:center;line-height:22px;transform:translateY(3px)}
.pmap-rcard .stops li em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ink-40);margin-right:6px}
.pmap-card .rnote{font-family:var(--serif);font-size:17px;line-height:1.35;margin:0 0 8px}
.pmap-card .blurb{font-size:14.6px;line-height:1.45;color:var(--ink-40);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.place-page .pl-quote{margin:0 0 18px;padding:0 0 0 18px;border-left:4px solid var(--accent)}
.place-page .pl-quote p{font-family:var(--serif);font-size:19.5px;line-height:1.5;margin:0 0 6px}
.place-page .pl-quote cite{font-style:normal;font-family:var(--mono);font-size:13.5px;color:var(--ink-40)}
.place-page .hero figcaption{font-family:var(--mono);font-size:12.5px;color:var(--ink-40);margin-top:6px}
.place-page figure.hero{margin:14px 0 18px}
.map-tease .mt-route a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(var(--ink-rgb),.04);border:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;transition:transform .15s,border-color .15s}
.map-tease .mt-route a:hover{transform:translateY(-2px);border-color:var(--accent)}
.map-tease .mt-route i{font-style:normal;color:var(--accent);font-size:22px;flex:none}
.map-tease .mt-route span{display:flex;flex-direction:column;min-width:0} .map-tease .mt-route small{font-family:var(--mono);font-size:12px;color:var(--ink-40)} .map-tease .mt-route b{font-family:var(--serif);font-size:16.5px;line-height:1.2;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-tease .mt-route em{font-style:normal;margin-left:auto;color:var(--accent);font-size:18px}
@media (max-width:960px){ .places-page .pmap-rcard{bottom:calc(30% + 8px);left:8px;right:8px;max-width:none} .pmap-rcard .stops{max-height:22vh} }
@media (prefers-reduced-motion:reduce){ .pmap-route .line{animation:none} }
/* the plan hero (site.plan_hero): the promise at route-title size and four doors into the trip */
.plan-hero{padding:34px 24px 38px}
.plan-hero .ph-k{font-family:var(--mono);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.plan-hero .ph-h{font-family:var(--serif);font-size:clamp(44px,5.6vw,80px);line-height:.98;letter-spacing:-.025em;font-weight:700;margin:8px 0 12px;max-width:16ch}
.plan-hero .ph-sub{font-size:22px;line-height:1.4;max-width:46ch;margin:0 0 26px;color:var(--ink)}
.plan-hero .ph-doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.plan-hero .ph-door{position:relative;display:flex;flex-direction:column;gap:6px;min-height:168px;padding:20px 20px 22px;border-radius:var(--r,18px);border:1px solid var(--rule-soft);background:var(--bg);color:var(--ink);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.plan-hero .ph-door:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,10,0,.16);border-color:var(--accent)}
.plan-hero .ph-door .k{font-family:var(--mono);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.plan-hero .ph-door b{font-family:var(--serif);font-size:26px;line-height:1.1;font-weight:700}
.plan-hero .ph-door .s{font-size:16.5px;line-height:1.4;color:var(--ink-40)}
.plan-hero .ph-door em{font-style:normal;position:absolute;right:18px;bottom:14px;font-size:22px;color:var(--accent-text)}
.plan-hero .ph-door{padding-bottom:44px}
.plan-hero .ph-door.hot{background:linear-gradient(135deg,#C94A1B,#8E2F10);border:0;color:#fff}
.plan-hero .ph-door.hot .k,.plan-hero .ph-door.hot .s,.plan-hero .ph-door.hot em{color:rgba(255,255,255,.92)}
@media (max-width:1180px){ .plan-hero .ph-doors{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:960px){ .plan-hero{padding:26px 16px 28px} .plan-hero .ph-h{font-size:clamp(36px,10vw,46px)} .plan-hero .ph-sub{font-size:19.5px} .plan-hero .ph-door{min-height:140px;padding:16px 16px 18px} .plan-hero .ph-door b{font-size:22px} }
/* the routes band on the home: a rounded-card row, city chips */
.routes-tease{padding:22px 24px 26px}
.routes-tease .rt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.routes-tease .rt-k{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.routes-tease .rt-h{font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.02em;margin:4px 0 6px;font-weight:700}
.routes-tease .rt-sub{margin:0;font-size:17px;line-height:1.4;color:var(--ink-40);max-width:60ch}
.routes-tease .rt-all{font-family:var(--mono);font-size:15px;color:var(--accent-text);text-decoration:none;white-space:nowrap;padding-bottom:6px}
.routes-tease .rt-chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px}
.routes-tease .rt-chips::-webkit-scrollbar{display:none}
.routes-tease .rt-chips button{flex:none;font-family:var(--mono);font-size:14px;padding:8px 13px;border-radius:9999px;border:1px solid var(--rule-soft);background:none;color:var(--ink);min-height:38px}
.routes-tease .rt-chips button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.routes-tease .rt-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding:4px 4px 12px}
.routes-tease .rc{scroll-snap-align:start;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--bg);border:1px solid var(--rule-soft);color:inherit;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.routes-tease .rc:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,10,0,.14)}
.routes-tease .rc img,.routes-tease .rc .noimg{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--ph)}
.routes-tease .rc-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.routes-tease .rc-k{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.routes-tease .rc b{font-family:var(--serif);font-size:20px;line-height:1.12;letter-spacing:-.015em;font-weight:600}
.routes-tease .rc-m{display:flex;flex-wrap:wrap;gap:4px}
.routes-tease .rc-m i{font-style:normal;font-family:var(--mono);font-size:12px;background:rgba(var(--ink-rgb),.06);padding:3px 8px;border-radius:9999px}
@media (max-width:960px){ .todaypage .rp-stop p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .routes-tease{padding:20px 16px 22px} .routes-tease .rt-h{font-size:32px} .routes-tease .rt-row{grid-auto-columns:minmax(240px,78vw);margin:0 -16px;padding:4px 16px 12px} }
/* the home block: a window into the map (owner 2026-09-21: the flat card did not make anyone want to click) */
.map-tease{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:0;border-radius:20px;overflow:hidden;background:var(--bg);border:1px solid var(--rule-soft);box-shadow:0 14px 40px rgba(20,10,0,.10)}
.map-tease .mt-map{position:relative;display:block;min-height:340px;overflow:hidden;background:#EEF1EA;text-decoration:none;color:var(--ink)}
:root[data-theme="dark"] .map-tease .mt-map{background:#15130F}
.map-tease .mt-tiles{position:absolute;inset:0;transition:transform 2.5s cubic-bezier(.2,.7,.2,1)}
.map-tease .mt-map:hover .mt-tiles{transform:scale(1.04)}
.map-tease .mt-tiles img{position:absolute;width:256px !important;height:256px !important;max-width:none !important}
.map-tease .mt-pins{position:absolute;inset:0}
.map-tease .mt-pins .pm{width:30px;height:30px;transform:translate(-50%,calc(-100% - 6px));transform-origin:50% calc(100% + 6px);pointer-events:auto;cursor:pointer}
.map-tease .mt-pins .pm i{font-size:13px;line-height:26px}
.map-tease .mt-pins .pm.on{transform:translate(-50%,calc(-100% - 6px)) scale(1.25);z-index:5}
.map-tease .mt-pins .pm.on::before{animation:pmring 1.2s ease-out infinite}
.map-tease .mt-card{position:absolute;z-index:6;display:flex;gap:10px;align-items:center;transform:translate(14px,calc(-100% - 40px));background:var(--bg);color:var(--ink);border-radius:14px;padding:8px 12px 8px 8px;box-shadow:0 10px 30px rgba(20,10,0,.22);border-left:5px solid var(--pc,var(--accent));max-width:260px;animation:pmtip .22s cubic-bezier(.2,.9,.3,1.2) both;pointer-events:none}
.map-tease .mt-card.flip{transform:translate(calc(-100% - 14px),calc(-100% - 40px))}
.map-tease .mt-card img{width:52px;height:52px;border-radius:9px;object-fit:cover;flex:none;background:var(--ph)}
.map-tease .mt-card b{display:block;font-family:var(--serif);font-size:16.5px;line-height:1.15;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.map-tease .mt-card small{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-40);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.map-tease .mt-card.k-coffee{--pc:#6F4A2A}.map-tease .mt-card.k-bar{--pc:#4A3C8C}.map-tease .mt-card.k-sweets{--pc:#C94F78}.map-tease .mt-card.k-sight{--pc:#7A6A4F}.map-tease .mt-card.k-noodles{--pc:#D4A32A}.map-tease .mt-card.k-sushi{--pc:#2E7C99}.map-tease .mt-card.k-stay{--pc:#3E7A4D}.map-tease .mt-card.k-comfort{--pc:#B2432B}
.map-tease .mt-go{position:absolute;left:14px;bottom:14px;z-index:6;font-family:var(--mono);font-size:14.6px;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(8px);padding:8px 12px;border-radius:9999px;box-shadow:0 2px 8px rgba(20,10,0,.12);transition:transform .2s}
.map-tease .mt-map:hover .mt-go{transform:translateX(4px)}
.map-tease .mt-text{display:flex;flex-direction:column;gap:12px;padding:28px 30px 26px;justify-content:center}
.map-tease .mt-k{font-family:var(--mono);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.map-tease .mt-h{font-family:var(--serif);font-size:30px;line-height:1.08;letter-spacing:-.02em;margin:0;font-weight:600}
.map-tease .mt-h b{font-size:1.7em;line-height:.9;color:var(--accent);font-weight:700;letter-spacing:-.03em;display:block;margin-bottom:6px}
.map-tease .mt-sub{margin:0;font-size:16px;line-height:1.45;color:var(--ink-40);max-width:44ch}
.map-tease .mt-cities{display:flex;flex-wrap:wrap;gap:6px}
.map-tease .mt-cities a{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--serif);font-weight:600;font-size:15.5px;padding:7px 12px;border-radius:9999px;border:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;transition:transform .15s,background .15s,border-color .15s}
.map-tease .mt-cities a small{font-family:var(--mono);font-size:12px;color:var(--ink-40)}
.map-tease .mt-cities a:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(var(--bg-rgb),1)}
.map-tease .mt-btn{align-self:flex-start;font-family:var(--mono);font-size:16px;background:var(--accent);color:var(--accent-ink);padding:12px 20px;border-radius:9999px;text-decoration:none;display:inline-flex;gap:8px;align-items:center;transition:transform .15s,box-shadow .15s;margin-top:4px}
.map-tease .mt-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(196,69,26,.3)}
.map-tease .mt-btn span{transition:transform .2s}
.map-tease .mt-btn:hover span{transform:translateX(4px)}
@media (max-width:960px){ .map-tease{grid-template-columns:minmax(0,1fr);border-radius:16px} .map-tease > *{min-width:0} .map-tease .mt-cities{flex-wrap:wrap} .map-tease .mt-map{min-height:240px} .map-tease .mt-text{padding:20px 18px 22px;gap:10px} .map-tease .mt-h{font-size:24px} .map-tease .mt-card{max-width:220px} }
@media (prefers-reduced-motion:reduce){ .map-tease .mt-tiles,.map-tease .mt-btn,.map-tease .mt-btn span{transition:none} .map-tease .mt-card{animation:none} }
/* the home button */
.map-button{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px;align-items:center;background:var(--ink);color:var(--bg);border-radius:18px;padding:28px 32px;text-decoration:none;min-height:200px;position:relative;overflow:hidden}
.map-button::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(224,120,30,.28),transparent 45%),radial-gradient(circle at 85% 20%,rgba(46,124,153,.25),transparent 40%);pointer-events:none}
.map-button > *{position:relative}
.map-button .mb-art{display:grid;grid-template-columns:repeat(3,54px);gap:12px;justify-content:center;align-content:center}
.map-button .mb-art b{width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:22px;font-family:var(--sans);border:2px solid rgba(255,255,255,.25)}
.map-button .mb-art b.k-coffee{background:#6F4A2A}.map-button .mb-art b.k-bar{background:#4A3C8C}.map-button .mb-art b.k-noodles{background:#D4A32A;color:#1C1A17}.map-button .mb-art b.k-sushi{background:#2E7C99}.map-button .mb-art b.k-stay{background:#3E7A4D}
.map-button .mb-text{display:flex;flex-direction:column;gap:8px}
.map-button .mb-k{font-family:var(--mono);font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.map-button .mb-h{font-family:var(--serif);font-size:44px;line-height:1;letter-spacing:-.02em}
.map-button .mb-sub{font-size:17px;line-height:1.4;opacity:.8;max-width:52ch}
.map-button .mb-kinds{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:14.6px;opacity:.85}
.map-button .mb-kinds i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-style:normal;font-size:11px;margin-right:5px;vertical-align:middle}
.map-button .mb-kinds i.k-coffee{background:#6F4A2A}.map-button .mb-kinds i.k-bar{background:#4A3C8C}.map-button .mb-kinds i.k-noodles{background:#D4A32A;color:#1C1A17}.map-button .mb-kinds i.k-sushi{background:#2E7C99}.map-button .mb-kinds i.k-stay{background:#3E7A4D}.map-button .mb-kinds i.k-sweets{background:#C94F78}.map-button .mb-kinds i.k-comfort{background:#B2432B}
.map-button .mb-go{font-family:var(--mono);font-size:18px;margin-top:6px;color:var(--accent)}
@media (max-width:960px){ .map-button{grid-template-columns:1fr;padding:22px 20px;border-radius:14px} .map-button .mb-art{order:2;gap:8px;grid-template-columns:repeat(6,44px);justify-content:start} .map-button .mb-art b{width:44px;height:44px;font-size:18px} .map-button .mb-h{font-size:34px} }
/* a story over the map */
.pmap-story{position:fixed;inset:0;z-index:70}
.pmap-story .ps-scrim{position:absolute;inset:0;background:rgba(var(--ink-rgb),.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:psfade .25s both}
.pmap-story .ps-panel{position:absolute;top:0;right:0;bottom:0;width:min(760px,100%);background:var(--bg);color:var(--ink);overflow:auto;box-shadow:-20px 0 60px rgba(20,10,0,.25);animation:psin .32s cubic-bezier(.2,.7,.2,1) both;overscroll-behavior:contain}
.pmap-story .x{position:sticky;top:10px;float:right;margin:10px 10px 0 0;width:44px;height:44px;border-radius:50%;background:var(--bg);color:var(--ink);border:1px solid var(--rule-soft);font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 4px 14px rgba(20,10,0,.18);z-index:2;cursor:pointer}
.pmap-story .ps-body.single{padding:24px 28px 64px;max-width:none;margin:0}
.pmap-story .ps-body .hero img{border-radius:14px}
.pmap-story .ps-loading{padding:40px 0}
body.ps-open{overflow:hidden}
@keyframes psin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes psfade{from{opacity:0}to{opacity:1}}
@media (max-width:960px){ .pmap-story .ps-panel{top:auto;left:0;right:0;bottom:0;width:auto;height:92%;border-radius:20px 20px 0 0;animation-name:psup} .pmap-story .ps-body.single{padding:16px 16px 64px} @keyframes psup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} }
@media (prefers-reduced-motion:reduce){ .pmap-story .ps-panel,.pmap-story .ps-scrim{animation:none} }
/* the place page */
.single.placepage{max-width:960px}
.place-page .hero{margin:14px 0 18px;aspect-ratio:auto;background:none}
.place-page .hero img{width:100%;max-height:520px;object-fit:cover;border-radius:18px;display:block}
.place-page .pill.was{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.place-page .pl-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:24px 32px;align-items:start;margin-top:8px}
.place-page .pl-body p{margin:0 0 12px;font-size:17px;line-height:1.45}
.place-page .pl-body p b{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin-bottom:2px;font-weight:600}
.place-page .pl-addr span{font-size:19.5px;line-height:1.4}
.place-page .pl-title{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);font-weight:600}
.place-page .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 14px}
.place-page .acts a{font-family:var(--mono);font-size:14.6px;padding:10px 15px;border-radius:9999px;border:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.place-page .acts a.go{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.place-page .pl-route{font-family:var(--mono);font-size:14.6px} .place-page .pl-route a{color:var(--accent-text);text-decoration:none}
.place-page .pl-note{font-size:14.6px;line-height:1.45;margin-top:18px}
.place-page .pl-map{position:relative;display:block;aspect-ratio:1/1;max-height:420px;border-radius:18px;overflow:hidden;background:#EEF1EA;border:1px solid var(--rule-soft)}
:root[data-theme="dark"] .place-page .pl-map{background:#15130F}
.place-page .pl-map .pmap-tiles{position:absolute;inset:0;transition:transform 2.5s cubic-bezier(.2,.7,.2,1)}
.place-page .pl-map:hover .pmap-tiles{transform:scale(1.04)}
.place-page .pl-map .pmap-tiles img{position:absolute;width:256px !important;height:256px !important;max-width:none !important}
.place-page .pl-map .pmap-marks{position:absolute;inset:0;pointer-events:none}
.place-page .pl-map .mt-go{position:absolute;left:12px;bottom:12px;z-index:6;font-family:var(--mono);font-size:14px;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(8px);padding:7px 11px;border-radius:9999px;box-shadow:0 2px 8px rgba(20,10,0,.12)}
.place-page .pl-nearby{margin-top:36px;border-top:1px solid var(--rule-soft);padding-top:18px}
.place-page .pl-nearby h2.t{font-family:var(--serif);font-size:24px;margin:0 0 10px;letter-spacing:-.015em}
.place-page .pl-near-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 24px}
.place-page .pl-near{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--rule-soft);color:inherit;text-decoration:none;position:relative}
.place-page .pl-near img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:var(--ph)}
.place-page .pl-near .k{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;text-align:center;line-height:34px;font-weight:700;font-size:14px}
.place-page .pl-near img + .k{position:absolute;left:38px;bottom:10px;width:22px;height:22px;line-height:22px;font-size:11px;border:2px solid var(--bg)}
.place-page .pl-near .k.k-coffee{background:#6F4A2A}.place-page .pl-near .k.k-bar{background:#4A3C8C}.place-page .pl-near .k.k-sweets{background:#C94F78}.place-page .pl-near .k.k-sight{background:#7A6A4F}.place-page .pl-near .k.k-noodles{background:#D4A32A;color:#1C1A17}.place-page .pl-near .k.k-sushi{background:#2E7C99}.place-page .pl-near .k.k-stay{background:#3E7A4D}.place-page .pl-near .k.k-comfort{background:#B2432B}
.place-page .pl-near .t b{display:block;font-family:var(--serif);font-size:17px;line-height:1.2;font-weight:600}
.place-page .pl-near .t small{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-40);margin-top:3px}
.place-page .pl-near:hover .t b{text-decoration:underline;text-underline-offset:3px}
.pmap-card h3 a{color:inherit;text-decoration:none} .pmap-card h3 a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){ .place-page .pl-grid{grid-template-columns:1fr} .place-page .pl-map{aspect-ratio:4/3;max-height:320px} .place-page .hero img{max-height:320px;border-radius:14px} }
/* ---- the sheet menu (site.menu_style:"sheet"): a paper sheet under the bar, big destinations first, then search, filters and the rest ---- */
body.menu-sheet .menu{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--rule-soft);box-shadow:0 30px 60px rgba(20,10,0,.18);max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain}
body.menu-sheet .menu .tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;max-width:1104px;margin:0 auto;padding:22px 24px 6px}
body.menu-sheet .menu .tiles .mt{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(var(--ink-rgb),.045);border:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;min-height:72px;transition:transform .18s var(--ease),background .18s,border-color .18s}
body.menu-sheet .menu .tiles .mt:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--bg)}
body.menu-sheet .menu .tiles .mt i{flex:none;width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-weight:700;font-size:18px}
body.menu-sheet .menu .tiles .mt i.k-coffee{background:#6F4A2A}body.menu-sheet .menu .tiles .mt i.k-bar{background:#4A3C8C}body.menu-sheet .menu .tiles .mt i.k-sushi{background:#2E7C99}body.menu-sheet .menu .tiles .mt i.k-stay{background:#3E7A4D}body.menu-sheet .menu .tiles .mt i.k-ink{background:var(--ink);color:var(--bg)}
body.menu-sheet .menu .tiles .mt span{display:flex;flex-direction:column;min-width:0}
body.menu-sheet .menu .tiles .mt b{font-family:var(--serif);font-size:18px;line-height:1.15;font-weight:600;letter-spacing:-.01em}
body.menu-sheet .menu .tiles .mt small{font-family:var(--mono);font-size:12.5px;color:var(--ink-40);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.menu-sheet .menu .grid{max-width:1104px;margin:0 auto;padding:12px 24px 28px;gap:0 32px;grid-template-columns:1.25fr 1fr 1fr}
body.menu-sheet .menu .grid > div{padding:10px 0 0;border-left:0}
body.menu-sheet .menu .ch{height:auto;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);border-bottom:0;margin:12px 0 8px;padding:0}
body.menu-sheet .menu .search{border:1px solid var(--rule-soft);border-radius:12px;background:rgba(var(--ink-rgb),.045);padding:4px 6px 4px 14px;margin:0 0 12px;gap:8px}
body.menu-sheet .menu .search input{font-size:17px;letter-spacing:0;color:var(--ink);min-height:36px}
body.menu-sheet .menu .search input::placeholder{color:var(--ink-40)}
body.menu-sheet .menu .search button{font-family:var(--mono);font-size:14px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:9px}
body.menu-sheet .menu a,body.menu-sheet .menu button{font-size:17px;line-height:1.3;padding:9px 10px;margin:0 -10px;border-radius:10px;min-height:40px;display:flex;align-items:center;color:var(--ink);transition:background .15s}
body.menu-sheet .menu a:hover,body.menu-sheet .menu .grid button:hover{background:rgba(var(--ink-rgb),.05)}
body.menu-sheet .menu .grid button[aria-pressed="true"]{color:var(--accent-text);font-weight:600}
body.menu-sheet .menu #menu-signals{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 0}
body.menu-sheet .menu #menu-signals button{display:inline-flex;gap:6px;align-items:center;font-family:var(--mono);font-size:14px;padding:8px 13px;margin:0;border:1px solid var(--rule-soft);border-radius:9999px;min-height:40px;background:none}
body.menu-sheet .menu #menu-signals button .small{font-size:12px;color:var(--ink-40)}
body.menu-sheet .menu #menu-signals button:hover,body.menu-sheet .menu #menu-signals button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
body.menu-sheet .menu #menu-signals button[aria-pressed="true"] .small,body.menu-sheet .menu #menu-signals button:hover .small{color:inherit;opacity:.8}
body.menu-sheet .menu .gap{height:14px}
body.menu-sheet .menu .small{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin:6px 0 4px}
body.menu-sheet .menu .sub-open,body.menu-sheet .menu a.support-open{font-family:var(--mono);font-size:14px;padding:9px 14px;margin:4px 0 0;border-radius:9999px;display:inline-flex;min-height:38px;background:var(--accent);color:var(--accent-ink);width:auto}
body.menu-sheet .menu a.support-open{background:none;border:1px solid var(--rule-soft);color:var(--ink);margin-left:6px}
body.menu-sheet .menu .sub-form input{font-size:16px;border-radius:10px}
@media (max-width:960px){
  body.menu-sheet .menu .tiles{grid-template-columns:1fr 1fr;padding:14px 16px 4px;gap:8px}
  body.menu-sheet .menu .tiles .mt{padding:12px;min-height:64px;border-radius:14px} body.menu-sheet .menu .tiles .mt i{width:36px;height:36px;font-size:16px} body.menu-sheet .menu .tiles .mt b{font-size:16px}
  body.menu-sheet .menu .grid{grid-template-columns:1fr;padding:8px 16px 40px;gap:0}
  body.menu-sheet .menu .grid > div{padding:6px 0 0}
  body.menu-sheet .menu a,body.menu-sheet .menu button{font-size:17px;min-height:44px}
}
/* ---- the calm footer (site.footer_style:"calm"): paper, a hairline, the brand and three columns, the ticker gone ---- */
body.board-calm .board{background:var(--bg);color:var(--ink);border-top:1px solid var(--rule-soft)}
body.board-calm .board .mq{display:none}
body.board-calm .board .links{max-width:1104px;margin:0 auto;grid-template-columns:1.4fr 1fr 1fr;font-size:16px;color:var(--ink-40);padding:0 24px}
body.board-calm .board .links > div{padding:40px 0 32px;border-left:0;gap:8px}
body.board-calm .board .links > div + div{padding-left:32px}
body.board-calm .board .links b{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);font-weight:600;margin-bottom:8px}
body.board-calm .board .links > div:first-child b{font-family:var(--serif);font-size:30px;line-height:1.05;letter-spacing:-.02em;text-transform:none;color:var(--ink);margin-bottom:8px}
body.board-calm .board .links > div:first-child span{font-size:17px;line-height:1.4;color:var(--ink);letter-spacing:0;max-width:30ch}
body.board-calm .board .links > div:first-child span.indie{font-size:14px;color:var(--ink-40);font-family:var(--mono)}
body.board-calm .board .links > div:first-child #board-when{font-family:var(--mono);font-size:13.5px;color:var(--ink-40);padding-top:16px}
body.board-calm .board .links a{font-size:16.5px;line-height:1.3;letter-spacing:0;color:var(--ink);min-height:32px;display:inline-flex;align-items:center}
body.board-calm .board .links a:hover{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}
body.board-calm .board .links .sub-open,body.board-calm .board .links .sub-form button{background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:14px;padding:9px 14px;border-radius:9999px}
body.board-calm .board .links .sub-form input{border:1px solid var(--rule-soft);border-radius:10px;background:var(--bg);color:var(--ink);font-size:16px}
body.board-calm .board .tip-row{max-width:1104px;margin:0 auto;border-top:1px solid var(--rule-soft);padding:14px 24px 22px}
body.board-calm .board .tip-row .tip-k,body.board-calm .board .tip-row p{color:var(--ink-40);font-family:var(--mono)}
body.board-calm .board .tip-row .support-open{border:1px solid var(--rule-soft);color:var(--ink);border-radius:9999px;padding:6px 12px}
body.board-calm .board .festline{border-top:1px solid var(--rule-soft)}
@media (max-width:960px){ body.board-calm .board .links{grid-template-columns:1fr;padding:0 16px} body.board-calm .board .links > div{padding:24px 0 8px} body.board-calm .board .links > div + div{padding-left:0;border-top:1px solid var(--rule-soft);padding-top:18px} body.board-calm .board .tip-row{padding:12px 16px 20px} }
/* ---- routes: the plan on a route page, the index of routes ---- */
.route-plan{margin:18px 0 28px;padding:18px 20px 20px;border:1px solid var(--rule-soft);border-radius:18px;background:rgba(var(--ink-rgb),.03)}
.route-plan .rp-head{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-family:var(--mono);font-size:14px;color:var(--ink-40);margin:0 0 14px}
.route-plan .rp-head i{font-style:normal;background:rgba(var(--ink-rgb),.06);padding:3px 9px;border-radius:9999px;font-size:12.5px;color:var(--ink)}
.route-plan .rp-caveat{font-family:var(--mono);font-size:13px;line-height:1.4;color:var(--ink-40);margin:-6px 0 12px}
.route-plan .rp-tl{list-style:none;margin:0;padding:0;position:relative}
.route-plan .rp-tl::before{content:"";position:absolute;left:78px;top:8px;bottom:8px;width:2px;background:var(--rule-soft)}
.route-plan .rp-stop{display:grid;grid-template-columns:56px 40px minmax(0,1fr);gap:0 12px;align-items:start;padding:8px 0;position:relative}
.route-plan .rp-stop time{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:6px;color:var(--ink)}
.route-plan.shifted .rp-stop time{color:var(--accent-text)}
.route-plan .rp-stop i{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-style:normal;font-family:var(--sans);font-weight:700;font-size:15px;border:3px solid var(--bg);position:relative;z-index:1}
.route-plan .rp-stop.k-coffee i{background:#6F4A2A}.route-plan .rp-stop.k-bar i{background:#4A3C8C}.route-plan .rp-stop.k-sweets i{background:#C94F78}.route-plan .rp-stop.k-sight i{background:#7A6A4F}.route-plan .rp-stop.k-noodles i{background:#D4A32A;color:#1C1A17}.route-plan .rp-stop.k-sushi i{background:#2E7C99}.route-plan .rp-stop.k-stay i{background:#3E7A4D}.route-plan .rp-stop.k-comfort i{background:#B2432B}
.route-plan .rp-stop b{display:block;font-family:var(--serif);font-size:19.5px;line-height:1.2;font-weight:600;padding-top:4px}
.route-plan .rp-stop b a{color:inherit;text-decoration:none} .route-plan .rp-stop b a:hover{text-decoration:underline;text-underline-offset:3px}
.route-plan .rp-stop p{margin:4px 0 2px;font-size:16px;line-height:1.4}
.route-plan .rp-stop small{display:block;font-family:var(--mono);font-size:12.5px;color:var(--ink-40)}
.route-plan .rp-leg{display:grid;grid-template-columns:56px 40px minmax(0,1fr);gap:0 12px;align-items:center;padding:2px 0;font-family:var(--mono);font-size:13px;color:var(--ink-40)}
.route-plan .rp-leg .m{grid-column:2;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.route-plan .rp-leg .t{grid-column:3}
.route-plan .rp-day{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);padding:14px 0 4px 108px}
.route-plan .rp-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 4px;padding-left:108px}
.route-plan .rp-now{font-family:var(--mono);font-size:14.6px;padding:9px 14px;border-radius:9999px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);min-height:40px}
.route-plan .rp-now.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.route-plan .rp-tools a{font-family:var(--mono);font-size:14.6px;color:var(--accent-text);text-decoration:none}
.route-plan .rp-hotel,.route-plan .rp-music{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.route-plan .k{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin-bottom:6px}
.route-plan .rp-hotel b{font-family:var(--serif);font-size:20px;font-weight:600}
.route-plan .rp-hotel p{margin:6px 0 10px;font-size:15.5px;line-height:1.45}
.route-plan .rp-hotel .acts{display:flex;flex-wrap:wrap;gap:8px}
.route-plan .rp-hotel .acts a{font-family:var(--mono);font-size:14px;padding:8px 13px;border-radius:9999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);text-decoration:none}
.route-plan .rp-hotel .acts a.quiet{background:none;border-color:var(--rule-soft);color:var(--ink)}
.route-plan .rp-tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.route-plan .rp-track{border:1px solid var(--rule-soft);border-radius:12px;padding:12px 14px;background:var(--bg)}
.route-plan .rp-track .k{margin-bottom:8px}
.route-plan .rp-track .sp{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:14px;color:var(--ink);text-decoration:none;border:1px solid var(--rule-soft);padding:8px 12px;border-radius:9999px}
.route-plan .rp-track .sp::before{content:"";width:12px;height:12px;border-radius:50%;background:#1DB954}
.route-plan .rp-track iframe{border-radius:12px;display:block}
@media (max-width:600px){ .route-plan{padding:14px 12px 16px} .route-plan .rp-stop,.route-plan .rp-leg{grid-template-columns:48px 36px minmax(0,1fr);gap:0 8px} .route-plan .rp-tl::before{left:66px} .route-plan .rp-day,.route-plan .rp-tools{padding-left:0} .route-plan .rp-stop b{font-size:18px} }
/* ---- the route page: a day told in the home's numbered bands, full width, never a column in the middle of the screen ---- */
.single.routepage{max-width:none;padding:0 0 64px}
.routepage .crumb{padding:88px 24px 0 64px}
.routepage .rt-bands{border-top:1px solid var(--rule-soft);margin-top:18px}
.routepage .band{display:grid;grid-template-columns:64px minmax(0,1fr);border-bottom:1px solid var(--rule-soft)}
.layout-bands.cv .single.routepage .rt-bands .band{content-visibility:visible;contain-intrinsic-size:auto}   /* site.cv skips off-screen bands on the home; on a route page it would blank the day below the fold */
.routepage .band > .rail{position:sticky;top:48px;align-self:start;padding:40px 0 36px 24px;font-family:var(--mono);font-size:25.36px;line-height:1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.routepage .band > .rail b:before{content:"";display:block;width:12px;height:12px;background:var(--accent);margin-bottom:10px}
.routepage .band > .rail span{display:block;font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);margin-top:10px;writing-mode:vertical-rl}
.routepage .band > section{padding:40px 40px 48px 0;min-width:0;max-width:1240px}
.routepage .pill{margin-bottom:10px}
.single.routepage :is(h1,.h1).rt-title{font-size:clamp(44px,5.6vw,80px);line-height:.98;letter-spacing:-.025em;margin:6px 0 10px;max-width:20ch}
.routepage .meta{margin:0 0 22px}
.routepage .rt-hero{margin:0 0 28px;border-radius:var(--r,18px);overflow:hidden;background:var(--ph)}
.routepage .rt-hero img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}
.routepage .rt-open{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 56px;align-items:start}
.routepage .rt-lede{min-width:0}
.routepage .rt-lede p{max-width:56ch;font-size:21px;line-height:1.5;margin:0 0 16px}
.routepage .rt-lede p.lead{font-size:26px;line-height:1.35;color:var(--ink)}
.routepage .rt-facts{margin:0;border-top:1px solid var(--ink)}
.routepage .rt-facts div{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--rule-soft)}
.routepage .rt-facts dt{font-family:var(--mono);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);margin:0}
.routepage .rt-facts dd{margin:0;font-size:19.5px;text-align:right;font-variant-numeric:tabular-nums}
.routepage .rt-acts{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 14px}
.routepage .rt-go{font-family:var(--mono);font-size:16.5px;padding:11px 18px;border-radius:9999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;min-height:46px;display:inline-flex;align-items:center}
.routepage .rt-go.quiet{background:none;border:1px solid var(--rule-soft);color:var(--ink)}
.routepage .rp-caveat{font-family:var(--mono);font-size:15px;line-height:1.45;color:var(--ink-40);margin:0;max-width:86ch}
/* the day */
.routepage .route-plan{margin:0;padding:0;border:0;background:none;border-radius:0}
.routepage .rp-tl::before{left:calc(84px + 24px + 22px);top:6px;bottom:40px}
.routepage .rp-day{font-family:var(--serif);font-size:38px;line-height:1;letter-spacing:-.02em;color:var(--ink);text-transform:none;padding:26px 0 14px;border-top:3px solid var(--accent);margin-top:22px}
.routepage .rp-day:first-child{margin-top:0}
.routepage .rp-stop{grid-template-columns:84px 44px minmax(0,1fr) 300px;gap:0 24px;padding:16px 0;align-items:start}
.routepage .rp-stop time{font-size:19.5px;padding-top:8px}
.routepage .rp-stop i{width:44px;height:44px;font-size:17px;border-width:4px}
.routepage .rp-stop b{font-size:26px;line-height:1.15;padding-top:4px}
.routepage .rp-stop p{font-size:20px;line-height:1.5;max-width:none;margin:8px 0 6px}
.routepage .rp-stop small{font-size:14.6px}
.routepage .rp-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.routepage .rp-acts a{font-family:var(--mono);font-size:15px;color:var(--accent-text);text-decoration:none;border:1px solid var(--rule-soft);border-radius:9999px;padding:8px 13px;min-height:40px;display:inline-flex;align-items:center}
.routepage .rp-acts a.quiet{color:var(--ink)}
.routepage .rp-shot{margin:0;border-radius:var(--r-sm,12px);overflow:hidden;background:var(--ph);aspect-ratio:3/2}
.routepage .rp-shot img{display:block;width:100%;height:100%;object-fit:cover}
.routepage .rp-shot.noimg{display:grid;place-items:center;background:rgba(var(--ink-rgb),.05)}
.routepage .rp-shot.noimg img{display:none}
.routepage .rp-shot.noimg span{font-family:var(--sans);font-size:44px;font-weight:700;color:rgba(var(--ink-rgb),.16)}
.routepage .rp-leg{grid-template-columns:84px 44px minmax(0,1fr);gap:0 24px;font-size:15px;padding:4px 0}
.routepage .rp-leg .m{font-size:14.6px;grid-column:1;text-align:right;white-space:nowrap}
.routepage .rp-tools{padding-left:calc(84px + 24px);margin:22px 0 0}
.routepage .rp-now{font-size:16.5px;min-height:46px;padding:11px 18px}
.routepage .rp-tools a{font-size:16.5px}
/* the map, the bed, the music */
.routepage .rt-mapcard{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;text-decoration:none;color:inherit;border:1px solid var(--rule-soft);border-radius:var(--r,18px);padding:26px 28px;background:linear-gradient(135deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.routepage .rt-mapcard:hover{border-color:var(--accent)}
.routepage .rt-mapk{font-family:var(--mono);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);flex-basis:100%}
.routepage .rt-mapcard b{font-family:var(--serif);font-size:34px;line-height:1.05;font-weight:600}
.routepage .rt-mapgo{font-family:var(--mono);font-size:16.5px;color:var(--accent-text);margin-left:auto}
.routepage .rp-hotel,.routepage .rp-music{margin:0;padding:0;border-top:0}
.routepage .rp-hotel .k,.routepage .rp-music .k{font-size:14.6px}
.routepage .rp-hotel b{font-size:32px}
.routepage .rp-hotel p{font-size:19.5px;max-width:62ch}
.routepage .rp-hotel .acts a{font-size:15.5px;min-height:44px;display:inline-flex;align-items:center}
.routepage .rp-tracks{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.routepage .rp-track .k{font-size:14.6px}
.routepage .note-bio{font-size:19.5px;line-height:1.5;color:var(--ink-40);max-width:62ch;margin:0}
.routepage .note-refs h2{font-size:15px}
.routepage .note-refs li{font-size:19.5px}
@media (max-width:1180px){
  .routepage .band > section{padding-right:24px}
  .routepage .rt-open{grid-template-columns:minmax(0,1fr) 300px;gap:0 40px}
  .routepage .rp-stop{grid-template-columns:76px 44px minmax(0,1fr) 250px;gap:0 20px}
  .routepage .rp-tl::before{left:calc(76px + 20px + 22px)}
  .routepage .rp-leg{grid-template-columns:76px 44px minmax(0,1fr);gap:0 20px}
  .routepage .rp-tools{padding-left:calc(76px + 20px)}
}
/* what it costs, what to do if it rains, and a card to hold up to a driver */
.routepage .rt-money{max-width:900px}
.routepage .rt-money-day,.routepage .rt-money-tot{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:4px 18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule-soft)}
.routepage .rt-money-tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:6px}
.routepage .rt-money .d{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)}
.routepage .rt-money b{font-family:var(--serif);font-size:34px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.routepage .rt-money-tot b{font-size:44px;color:var(--accent-text)}
.routepage .rt-money .o{font-family:var(--mono);font-size:16.5px;color:var(--ink-40);text-align:right;font-variant-numeric:tabular-nums}
.routepage .rt-money .f{grid-column:2/-1;font-family:var(--mono);font-size:15px;color:var(--ink-40)}
.routepage .rt-money .gap{grid-column:2/-1;font-family:var(--mono);font-size:15px;color:var(--accent-text)}
.routepage .rt-money .lvl{font-family:var(--mono);font-size:15px;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:6px 12px;border-radius:9999px;justify-self:end}
.routepage .rt-money .cov{grid-column:2/-1;font-family:var(--mono);font-size:15px;color:var(--accent-text)}
.routepage .rt-money-note{font-family:var(--mono);font-size:15px;line-height:1.5;color:var(--ink-40);margin:16px 0 0;max-width:80ch}
.routepage .rp-cost{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline;margin:10px 0 0}
.routepage .rp-cost .c{font-family:var(--serif);font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}
.routepage .rp-cost .u,.routepage .rp-cost .vf{font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.routepage .rp-cost .est{font-family:var(--mono);font-size:14.6px;color:var(--accent-text);border:1px dashed var(--accent);border-radius:9999px;padding:2px 9px}
.routepage .rp-cost .bk{font-family:var(--mono);font-size:14.6px;padding:3px 10px;border-radius:9999px;background:rgba(var(--ink-rgb),.07)}
.routepage .rp-cost .bk.required{background:var(--accent);color:var(--accent-ink)}
.routepage .rp-planb{margin:10px 0 0;font-size:17.5px;line-height:1.45;color:var(--ink-40);border-left:3px solid var(--rule-soft);padding-left:14px;max-width:64ch}
.routepage .rp-hours{margin:10px 0 0;font-size:17.5px;line-height:1.45;color:var(--ink-40);max-width:64ch}
.routepage .rp-hours span{font-family:var(--mono);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-right:10px}
.routepage .rp-planb span{display:block;font-family:var(--mono);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.routepage .rt-planb{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.routepage .rt-planb li{border:1px solid var(--rule-soft);border-radius:var(--r,18px);padding:18px 20px}
.routepage .rt-planb b{font-family:var(--serif);font-size:21px;font-weight:600;display:block}
.routepage .rt-planb p{margin:8px 0 0;font-size:17.5px;line-height:1.45;color:var(--ink-40)}
.routepage .rp-card-btn{font-family:var(--mono);font-size:15px;border:1px solid var(--rule-soft);border-radius:9999px;padding:8px 13px;min-height:40px;background:none;color:var(--ink)}
.rp-card{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.55);padding:16px}
.rp-card[hidden]{display:none}
.rp-card .in{background:#fff;color:#111;border-radius:18px;padding:32px 28px;max-width:520px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.rp-card .lead{font-family:var(--sans);font-size:19.5px;margin:0 0 18px;color:#555}
.rp-card .nm{font-family:var(--serif);font-size:34px;line-height:1.25;margin:0 0 10px;font-weight:700}
.rp-card .ad{font-family:var(--sans);font-size:26px;line-height:1.5;margin:0 0 20px}
.rp-card .say{font-family:var(--sans);font-size:23px;line-height:1.4;margin:0;padding-top:18px;border-top:1px solid #ddd}
.rp-card .x{margin-top:22px;font-family:var(--mono);font-size:16.5px;min-height:46px;padding:11px 20px;border-radius:9999px;border:1px solid #ccc;background:#f4f4f4;color:#111}
@media (max-width:960px){
  .routepage .rt-money-day,.routepage .rt-money-tot{grid-template-columns:minmax(0,1fr) auto}
  .routepage .rt-money .d{grid-column:1/-1}
  .routepage .rt-money b{font-size:28px} .routepage .rt-money-day b,.routepage .rt-money-tot b{grid-column:1/-1;white-space:nowrap} .routepage .rt-money .o{grid-column:1/-1;text-align:left} .routepage .rt-money .f,.routepage .rt-money .gap,.routepage .rt-money .cov{grid-column:1/-1;text-align:left} .routepage .rt-money .lvl{grid-column:1/-1;justify-self:start}
  .routepage .rt-money-tot b{font-size:34px}
  .routepage .rt-planb{grid-template-columns:minmax(0,1fr)}
  .rp-card .nm{font-size:27px} .rp-card .ad{font-size:22px} .rp-card .say{font-size:20px}
}
/* the first 24 hours: one way of doing a thing per row, with what it costs and where we got the figure */
.arrivalpage .ar-sub{font-size:26px;line-height:1.35;max-width:52ch;margin:10px 0 18px}
.arrivalpage .ar-h{font-family:var(--serif);font-size:40px;line-height:1.05;letter-spacing:-.02em;margin:0 0 10px;font-weight:700}
.arrivalpage .ar-intro{font-size:21px;line-height:1.5;color:var(--ink-40);max-width:62ch;margin:0 0 22px}
.arrivalpage .ar-list{list-style:none;margin:0;padding:0;max-width:1000px}
.arrivalpage .ar-opt{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:6px 24px;padding:20px 0;border-top:1px solid var(--rule-soft);align-items:baseline}
.arrivalpage .ar-opt .n b{font-family:var(--serif);font-size:26px;line-height:1.15;font-weight:600}
.arrivalpage .ar-opt .to{display:block;font-family:var(--mono);font-size:15px;color:var(--ink-40);margin-top:4px}
.arrivalpage .ar-opt .f{grid-column:2;grid-row:1/3;text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.arrivalpage .ar-opt .p{font-family:var(--serif);font-size:34px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.arrivalpage .ar-opt .m{font-family:var(--mono);font-size:16.5px;color:var(--ink-40)}
.arrivalpage .ar-opt .d{grid-column:1;margin:8px 0 0;font-size:19.5px;line-height:1.5;max-width:60ch}
.arrivalpage .ar-opt .s{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px}
.arrivalpage .ar-opt .src{font-family:var(--mono);font-size:14.6px;color:var(--accent-text)}
.arrivalpage .ar-opt .ck,.arrivalpage .ar-opt .est{font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.arrivalpage .ar-opt .est{color:var(--accent-text);border:1px dashed var(--accent);border-radius:9999px;padding:2px 9px}
.arrivalpage .ar-list:empty::after{content:"We have not filled this section yet.";display:block;font-family:var(--mono);font-size:16.5px;color:var(--ink-40);padding:18px 0;border-top:1px solid var(--rule-soft)}
@media (max-width:960px){
  .arrivalpage .ar-sub{font-size:21px}
  .arrivalpage .ar-h{font-size:30px}
  .arrivalpage .ar-intro{font-size:19.5px}
  .arrivalpage .ar-opt{grid-template-columns:minmax(0,1fr)}
  .arrivalpage .ar-opt .f{grid-column:1;grid-row:auto;text-align:left;flex-direction:row;align-items:baseline;gap:12px;margin-top:6px}
  .arrivalpage .ar-opt .p{font-size:28px}
  .arrivalpage .ar-opt .d{font-size:18px}
}
@media (max-width:960px){
  .routepage .crumb{padding:76px 16px 0}
  .routepage .band{display:block;border-bottom:1px solid var(--rule-soft)}
  .routepage .band > .rail{position:static;padding:22px 16px 0;font-size:16.5px;display:flex;align-items:baseline;gap:10px}
  .routepage .band > .rail b:before{display:none}
  .routepage .band > .rail span{writing-mode:horizontal-tb;margin:0;font-size:14.6px}
  .routepage .band > section{padding:14px 16px 32px;max-width:none}
  .single.routepage :is(h1,.h1).rt-title{font-size:clamp(34px,9vw,44px);max-width:none}
  .routepage .rt-hero{margin:0 -16px 22px;border-radius:0}
  .routepage .rt-hero img{aspect-ratio:16/10}
  .routepage .rt-open{display:block}
  .routepage .rt-lede p{font-size:19.5px;max-width:none}
  .routepage .rt-lede p.lead{font-size:22px}
  .routepage .rt-facts{margin-top:22px}
  .routepage .rt-facts dd{font-size:18px}
  .routepage .rp-day{font-size:28px}
  .routepage .rp-stop{grid-template-columns:64px 40px minmax(0,1fr);gap:0 12px}
  .routepage .rp-stop b{font-size:21px}
  .routepage .rp-stop p{font-size:18px}
  .routepage .rp-stop i{width:40px;height:40px;font-size:15px}
  .routepage .rp-shot{grid-column:1 / -1;margin-top:12px;aspect-ratio:16/9}
  .routepage .rp-shot.noimg{display:none}
  .routepage .rp-leg{grid-template-columns:64px 40px minmax(0,1fr);gap:0 12px}
  .routepage .rp-tl::before{left:calc(64px + 12px + 20px)}
  .routepage .rp-tools{padding-left:0}
  .routepage .rt-mapcard{padding:20px 18px}
  .routepage .rt-mapcard b{font-size:26px}
  .routepage .rt-mapgo{margin-left:0;flex-basis:100%}
  .routepage .rp-hotel b{font-size:24px}
}
/* the routes index */
.single.routespage{max-width:1104px}
.routespage .rfilters{display:flex;flex-direction:column;gap:8px;margin:10px 0 22px}
.routespage .rf{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.routespage .rf b{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);width:84px;flex:none}
.routespage .rf button{font-family:var(--mono);font-size:14px;padding:8px 13px;border-radius:9999px;border:1px solid var(--rule-soft);background:none;color:var(--ink);min-height:38px}
.routespage .rf button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.routespage .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.routespage .rc{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--bg);border:1px solid var(--rule-soft);color:inherit;text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.routespage .rc:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,10,0,.14)}
.routespage .rc img,.routespage .rc .noimg{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--ph)}
.routespage .rc-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.routespage .rc-k{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.routespage .rc b{font-family:var(--serif);font-size:22px;line-height:1.1;letter-spacing:-.015em;font-weight:600}
.routespage .rc-x{font-size:15px;line-height:1.45;color:var(--ink-40)}
.routespage .rc-m{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.routespage .rc-m i{font-style:normal;font-family:var(--mono);font-size:12px;background:rgba(var(--ink-rgb),.06);padding:3px 8px;border-radius:9999px}
.routespage .rnone{margin-top:20px}
/* Today: the form, and the build card in the routes band */
.single.todaypage{max-width:900px}
.today-form{display:flex;flex-direction:column;gap:14px;margin:8px 0 24px;padding:18px 20px;border:1px solid var(--rule-soft);border-radius:var(--r,18px);background:rgba(var(--ink-rgb),.03)}
.today-form .tf{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.today-form .tf > b{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);width:120px;flex:none}
.today-form .chips{display:flex;flex-wrap:wrap;gap:6px}
.today-form .chips button{font-family:var(--mono);font-size:14px;padding:8px 13px;border-radius:9999px;border:1px solid var(--rule-soft);background:none;color:var(--ink);min-height:40px;display:inline-flex;gap:6px;align-items:baseline}
.today-form .chips button small{font-size:11.5px;color:var(--ink-40)}
.today-form .chips button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .today-form .chips button.on small{color:inherit;opacity:.8}
.today-form input[type=time]{font:inherit;font-size:17px;padding:8px 12px;border:1px solid var(--rule-soft);border-radius:12px;background:var(--bg);color:var(--ink);min-height:40px}
.today-form .acts{margin-top:4px} .today-form .acts > b{display:none}
.today-form .go{font-family:var(--mono);font-size:15px;padding:11px 18px;border-radius:9999px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);min-height:44px}
.today-form .quiet{font-family:var(--mono);font-size:14.6px;padding:10px 14px;border-radius:9999px;border:1px solid var(--rule-soft);background:none;color:var(--ink);min-height:44px}
.today-form .tf-wx{font-family:var(--mono);font-size:13.5px;color:var(--ink-40)}
.today-plan .rp-copy{font-family:var(--mono);font-size:14.6px;padding:9px 14px;border-radius:9999px;border:1px solid var(--rule-soft);background:none;color:var(--ink);min-height:40px}
.routes-tease .rc-build{background:linear-gradient(135deg,#C94A1B,#8E2F10);color:#fff;border:0}   /* white on #C94A1B is 4.69:1; #FF9A3C was 2.11:1 */
.routes-tease .rc-build .rc-k{color:rgba(255,255,255,.85)} .routes-tease .rc-build .rc-x{color:rgba(255,255,255,.9)} .routes-tease .rc-build .rc-m i{background:rgba(255,255,255,.2);color:#fff;font-size:13px}
.routes-tease .rc-build .rc-body{padding:22px 18px;justify-content:center;min-height:100%}
@media (max-width:600px){ .today-form{padding:14px} .today-form .tf > b{width:100%} }
/* the map page: one stage under the bar, the list floating on it, the title as glass in the corner */
.single.mappage{max-width:none;padding:0}
.places-page{padding:48px 0 0;display:block}
.places-page .pmap-wrap{position:relative}
.places-page .pmap{height:calc(100vh - 48px);min-height:520px;border-radius:0;box-shadow:none}
.places-page .pmap::after{display:none}
.pmap-ui .ttl{display:flex;flex-direction:column;gap:2px;background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(var(--ink-rgb),.1);border-radius:14px;padding:10px 14px 11px;width:max-content;max-width:100%;box-shadow:0 4px 16px rgba(20,10,0,.12)}
.pmap-ui .ttl .k{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40)}
.pmap-ui .ttl b{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.02em;font-weight:600}
.pmap-ui .ttl{order:-2}
.pmap-ui .cities{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px;order:-1}
.pmap-ui .cities::-webkit-scrollbar{display:none}
.pmap-ui .cities button{flex:0 0 auto;font-family:var(--serif);font-weight:600;font-size:16px;padding:8px 14px;min-height:40px;border:1px solid rgba(var(--ink-rgb),.12);background:rgba(var(--bg-rgb),.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);border-radius:9999px;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s}
.pmap-ui .cities button small{font-family:var(--mono);font-size:11.5px;color:var(--ink-40);margin-left:6px;font-weight:400}
.pmap-ui .cities button:hover{transform:translateY(-2px)}
.pmap-ui .cities button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pmap-ui .cities button.on small{color:rgba(255,255,255,.8)}
.places-page .pmap-ui{right:auto;width:min(560px,calc(100% - 24px))}
.pmap-side{display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--rule-soft);overflow:hidden;height:calc(100vh - 48px);min-height:520px}
@media (min-width:961px){ .places-page .pmap-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px} .places-page .pmap-wrap .pmap{grid-column:1} }
.places-page .pmap-card,.places-page .pmap-sheet{z-index:9}
.pmap-side .ps-handle{display:none}
.pmap-side .ps-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 6px}
.pmap-side .ps-head b{font-family:var(--serif);font-size:22px;letter-spacing:-.015em;cursor:default}
.pmap-side .ps-head .sug{font-family:var(--mono);font-size:13.5px;padding:8px 12px;min-height:40px;border-radius:9999px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;white-space:nowrap}
.pmap-side .ps-sub{font-size:14px;line-height:1.4;color:var(--ink-40);margin:0;padding:0 16px 8px}
.pmap-side .plist{flex:1;overflow:auto;padding:0 12px 12px;margin:0;display:block;scrollbar-width:thin}
.pmap-side .plist .pl{padding:9px 6px;margin:0;border-top:1px solid var(--rule-soft)}
.pmap-side .plist .pl:first-child{border-top:0}
.plist .pl{position:relative}
.plist .pl .th{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 56px;background:var(--ph)}
.plist .pl .k.s{position:absolute;left:44px;top:auto;bottom:10px;width:22px;height:22px;line-height:22px;font-size:11px;border:2px solid var(--bg);flex:none}
.pmap-side .plist .pl .t b{font-size:16.5px}
.pmap-side .plist .pl .t span{font-size:13px}
.pmap-card{display:grid;grid-template-columns:minmax(0,1fr);padding:0}
.pmap-card .body{padding:16px 20px 16px 24px}
.pmap-card.ph{grid-template-columns:132px minmax(0,1fr);max-width:min(520px,calc(100% - 24px))}
.pmap-card .pic{width:132px;height:100%;min-height:150px;object-fit:cover;display:block;margin-left:8px}
.pmap-card .x{z-index:2}
.places-page .pmap-card{left:16px;bottom:16px}
.places-page .pmap-n{left:16px;bottom:auto;top:auto;bottom:16px}
.places-page .pmap-card ~ .pmap-n,.places-page .pmap-card:not([hidden]) ~ .pmap-n{opacity:0}
.places-page .pmap-zoom{right:auto;left:16px;bottom:56px;flex-direction:row}
@media (min-width:961px){ .places-page .pmap-n{left:16px;bottom:16px} .places-page .pmap-card{bottom:16px;left:16px} .places-page .pmap-zoom{left:auto;right:16px;bottom:40px;flex-direction:column} .places-page .pmap-attr{right:16px;bottom:12px} }
@media (max-width:960px){
  .places-page{padding-top:48px} .places-page .pmap{height:calc(100vh - 48px);min-height:420px;margin:0}
  .places-page .pmap-ui{left:8px;right:8px;top:8px;width:auto;gap:6px} .pmap-ui .ttl{display:none}
  .pmap-side{position:absolute;left:0;right:0;top:auto;bottom:0;width:auto;height:30%;min-height:150px;border-radius:18px 18px 0 0;border-left:0;border-top:1px solid var(--rule-soft);box-shadow:0 -12px 40px rgba(20,10,0,.16);z-index:7;transition:height .3s cubic-bezier(.2,.7,.2,1)}
  .pmap-side.open{height:74%}
  .pmap-side .ps-handle{display:block;border:0;background:none;padding:14px 0 12px;cursor:pointer;width:100%;min-height:36px} .pmap-side .ps-handle i{display:block;width:44px;height:5px;border-radius:9999px;background:rgba(var(--ink-rgb),.25);margin:0 auto}
  .pmap-side .ps-head{padding:4px 16px 4px} .pmap-side .ps-sub{display:none}
  .places-page .pmap-card{left:8px;right:8px;bottom:calc(30% + 8px);max-width:none} .pmap-card.ph{grid-template-columns:100px minmax(0,1fr)} .pmap-card .pic{width:100px;min-height:120px}
  .places-page .pmap-n{bottom:calc(30% + 8px)} .places-page .pmap-zoom{bottom:calc(30% + 8px);left:auto;right:8px;flex-direction:column} .places-page .pmap-attr{bottom:calc(30% + 2px);right:8px;font-size:10px}
  .pmap-side.open ~ .pmap-card{display:none}
}
.note-list .pill{margin:0 0 8px;top:0}
.note-body a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.note-refs{margin:40px 0 0;max-width:40ch;padding-top:18px;border-top:1px solid var(--rule-soft)}
.note-refs h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin:0 0 12px;font-weight:600}
.note-refs ol{margin:0;padding-left:1.3em}
.note-refs li{font-size:18px;line-height:1.45;margin:0 0 9px}
.note-refs li a{color:inherit}
.note-refs li .grey{font-size:15px;white-space:nowrap}
.single.editor .summary{max-width:52ch}
.single.editor .editor-h{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin:40px 0 4px;font-weight:600}
.single.editor .editor-contact{font-size:17px;margin:12px 0 0}
.note-list h2{font-size:31px;line-height:1.15;margin:0}
.note-list .pic{aspect-ratio:3/2;background:var(--ph);overflow:hidden;margin:0 0 14px}
.note-list .pic img{width:100%;height:100%;object-fit:cover;display:block}
.lead-note{margin-top:18px;font-size:19.5px}
.lead-note a{color:var(--ink)}
.lead-note a:hover{text-decoration:underline;text-underline-offset:4px}
.single.legal{max-width:none;padding:96px 24px 80px}
.legal-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(320px,1fr);gap:64px;align-items:start}
.legal-text .lsec{margin-top:40px;padding:0;border:0}
.legal-text .lsec h2{margin-bottom:8px}
.legal-text p{font-size:19.5px;line-height:1.45;margin:16px 0 0;max-width:46ch}
.legal-text .summary{max-width:none}
.legal-art{position:sticky;top:72px}
.legal-art img{display:block;width:100%;height:auto}
.legal-art .ph{aspect-ratio:3/4;background:var(--ph);display:grid;place-items:center;color:var(--ink-40);font-size:14.6px;letter-spacing:.08em}
@media(max-width:960px){.legal-grid{grid-template-columns:1fr;gap:32px}.legal-art{position:static}.legal-art .ph{aspect-ratio:4/3}}
.single .crumb{font-size:16.5px;color:var(--ink-40);margin-bottom:24px;display:flex;gap:16px;flex-wrap:wrap}
.single .crumb a{display:inline-block;padding:4px 0}   /* 2026-09-17: a 17px tap target */
@media(max-width:960px){   /* 2026-09-17: list, chip and card links were 19-23px tall; a finger needs 24 (phones and tablets) */
  .sig-index a,#src-list a,.pl-try,.one-open,.more-link,.bo-more,.bo-src,.note-more,.trends-more button,.load-more{display:inline-flex;align-items:center;min-height:24px}
}
.single .crumb a:hover{color:var(--ink)}
.single :is(h1,.h1).story{font-size:43px;line-height:1.1;margin:12px 0 16px}
:lang(ja) .single :is(h1,.h1).story,.single :is(h1,.h1).story:lang(ja){line-height:1.35;letter-spacing:0}   /* Japanese is set on a square body: the Latin tracking and 1.1 leading crushed it */
.single .meta{font-size:16.5px;color:var(--ink-40);margin-bottom:24px;display:flex;gap:14px;flex-wrap:wrap}
.single .hero{aspect-ratio:3/2;background:var(--ph);overflow:hidden;margin:0 -16px 24px}
.single .hero img{width:100%;height:100%;object-fit:cover}
.single .summary{font-size:25.36px;line-height:1.3;margin:0 0 24px;overflow-wrap:anywhere}   /* one unbreakable token panned 27 story pages sideways on a phone */
.single .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}
.single .chips a{font-size:14.6px;border:1px solid var(--ink);border-radius:9999px;padding:7px 12px;line-height:1}
.single .chips a:hover{background:var(--accent);border-color:var(--accent-text,var(--accent))}
.single .go{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--bg);border-radius:9999px;padding:16px 24px;font-size:19.5px;transition:background .2s,color .2s}
.single .go:hover{background:var(--accent);color:var(--accent-ink)}
.single .ja-orig{margin:24px 0 0;font-size:19.5px;color:var(--ink-40)}
.single .sec{margin-top:56px;padding-top:24px;border-top:1px solid var(--rule)}
.single .sec h2.t{margin-bottom:20px}
.single .thumbs{grid-template-columns:1fr 1fr 1fr}
@media(max-width:700px){.single .thumbs{grid-template-columns:1fr 1fr}}
.single .weekhead{font-size:16.5px;color:var(--ink-40)}
.single .note{font-size:25.36px;margin:12px 0 32px}
.single .trend{grid-template-columns:1fr auto auto;border-top-color:var(--rule-soft)}
.single .trend .delta{color:var(--ink-40)} .single .trend .delta.up{color:var(--ink)}
.single .colours .bar-strip{margin-top:0}
.archive .wk{display:grid;grid-template-columns:120px 1fr auto;gap:8px 16px;padding:16px 0;border-top:1px solid var(--rule-soft);align-items:baseline}
.archive .wk:first-child{border-top:0}
.archive .wk .n{font-size:25.36px}
.archive .wk .d{font-size:16.5px;color:var(--ink-40)}
.archive .wk .s{font-size:19.5px;color:var(--ink-40);grid-column:2}
.archive .wk:hover .n{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:600px){.archive .wk{grid-template-columns:1fr;gap:2px}.archive .wk .s{grid-column:1}.archive .wk .n{font-size:22px;line-height:1.2}}   /* 120px of week label left the issue title 93px wide and six lines tall on a phone */
/* search + subscribe */
.menu .search{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--accent-ink);padding:6px 0;margin:0 0 16px}
.menu .search input{flex:1;background:none;border:0;font:inherit;font-size:25.36px;letter-spacing:-.02em;color:var(--accent-ink);outline:none;min-width:0}
.menu .search input::placeholder{color:var(--accent-40)}
.menu .search button{font-size:19.5px;color:var(--accent-ink)}.board .links .indie{display:block;margin-top:10px;font-size:14.6px;line-height:1.4;color:var(--bar-60,rgba(255,255,255,.6));max-width:34ch}
.sub-open{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:7px 12px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono,inherit);font-size:14.6px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:0;cursor:pointer;line-height:1.2;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.sub-open:after{content:"→";font-family:inherit}
.sub-open:hover{background:var(--bar-ink,#fff);color:var(--bar,#000);transform:translateX(2px)}
.sub-open:focus-visible{outline:2px solid var(--bar-ink,#fff);outline-offset:2px}
.board .links .sub-open{margin-top:14px}
.board .links a.support-open,.menu a.support-open{font-size:14.6px;font-weight:500;line-height:1.2;width:auto;align-self:flex-start}
/* the studio credit on every magazine: "Design and development: Rekkarun", in English (owner 2026-10-08, renamed 2026-10-18) */
.board .made-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 16px 18px;border-top:1px solid var(--board-rule,rgba(255,255,255,.18));font-size:13.5px;letter-spacing:.02em;color:var(--board-dim,rgba(255,255,255,.6))}
.board .made-by b{font-weight:500;color:var(--board-ink,#fff)}.board .made-by a.rekkarun{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .2s,border-color .2s}.board .made-by a.rekkarun:hover,.board .made-by a.rekkarun:focus-visible{color:var(--accent);border-color:var(--accent)}.board .made-by b span{font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-weight:500;margin-left:2px}
body.board-calm .board .made-by{max-width:1104px;margin:0 auto;padding:12px 24px 22px;border-top:1px solid var(--rule-soft);color:var(--ink-40);font-family:var(--mono)}body.board-calm .board .made-by b{color:var(--ink)}
.board .tip-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 20px;align-items:center;padding:12px 16px;border-top:1px solid var(--board-rule,rgba(255,255,255,.18))}
.board .tip-row .tip-k{display:inline-flex;align-items:center;gap:10px;font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--board-dim,rgba(255,255,255,.55));white-space:nowrap}
.board .tip-row .tip-k:before{content:"";width:8px;height:8px;background:var(--accent);flex:none}
.board .tip-row p{margin:0;font-size:14.6px;line-height:1.4;color:var(--board-dim,rgba(255,255,255,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1200px){.board .tip-row p{white-space:normal}}
.board .tip-row .support-open{margin:0;font-size:14.6px;padding:4px 10px}
.layout-marquee .board .tip-row{padding:12px 24px;border-top-color:rgba(255,255,255,.14)}
.layout-marquee .board .tip-row p{font-family:var(--sans);font-size:14.6px}
.layout-marquee .board .tip-row .tip-k{font-family:var(--sans)}
@media(max-width:960px){.board .tip-row{grid-template-columns:1fr;gap:12px;padding:20px 16px}}
.support-open{background:transparent;color:var(--board-ink,#fff);border:1px solid var(--board-dim,rgba(255,255,255,.6));margin-left:10px;text-decoration:none}
.support-open:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-text,var(--accent))}
.support-page .sup-addr{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:14px 0}
.support-page .sup-addr code{font-family:var(--mono,monospace);font-size:16.5px;word-break:break-all;padding:8px 10px;border:1px solid var(--rule)}
.support-page .sup-addr .sub-open{margin-top:0}
.support-page .sup-qr{margin:18px 0}
.support-page .sup-qr img{display:block;border:1px solid var(--rule);background:#fff}
.menu .support-open{color:var(--bar-ink,#fff);border-color:var(--bar-60,rgba(255,255,255,.6))}
.menu .sub-open.menu-sub{margin-top:12px;font-size:14.6px;padding:7px 12px;background:var(--accent-ink);color:var(--accent)}   /* inside the accent-coloured menu the button inverts, so it reads on both themes */
.layout-marquee .menu .support-open{color:var(--bar-ink,#fff);border-color:var(--bar-60,rgba(255,255,255,.6))}
.menu .sub-open.menu-sub{font-family:var(--sans)}
.sub-dialog{border:0;padding:0;background:var(--bg);color:var(--ink);width:min(560px,calc(100vw - 32px));max-width:none;box-shadow:0 0 0 2px var(--ink)}
.sub-dialog::backdrop{background:rgba(0,0,0,.6)}
.sub-dialog .sub-form{display:block;margin:0;padding:32px 32px 28px;position:relative}
.sub-dialog .sub-close{position:absolute;top:10px;right:14px;font-size:28px;line-height:1;color:var(--ink-40);background:none;border:0;cursor:pointer}
.sub-dialog .sub-close:hover{color:var(--ink)}
.sub-dialog .small{font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);margin-bottom:8px}
.sub-dialog h2{font-size:34px;line-height:1.05;margin:0 0 12px}
.sub-dialog .sub-lead{font-size:19.5px;line-height:1.35;color:var(--ink-40);margin:0 0 22px}
.sub-dialog .sub-field{display:block;margin:0 0 16px}
.sub-dialog .sub-field span{display:block;font-size:14.6px;color:var(--ink-40);margin-bottom:6px}
.sub-dialog .sub-field input{width:100%;box-sizing:border-box;background:none;border:0;border-bottom:1px solid var(--ink);color:var(--ink);font:inherit;font-size:25.36px;padding:6px 0;outline:none}
.sub-dialog .sub-field input:focus{border-bottom-color:var(--accent-text,var(--accent))}
.sub-dialog .sub-consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:start;font-size:16.5px;line-height:1.4;margin:0 0 20px;cursor:pointer}
.sub-dialog .sub-consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent-text,var(--accent));cursor:pointer}
.sub-dialog .sub-consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sub-dialog .sub-submit{font:inherit;font-size:19.5px;padding:12px 22px;background:var(--ink);color:var(--bg);border:0;cursor:pointer}
.sub-dialog .sub-submit:hover{background:var(--accent);color:var(--accent-ink)}
.sub-dialog .sub-fine{font-size:14.6px;line-height:1.4;color:var(--ink-40);margin:18px 0 0}
.embed-load{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box;text-align:left;padding:14px 16px;background:var(--ph);color:var(--ink);border:1px solid var(--rule-soft);cursor:pointer;font:inherit}
.embed-load b{font-size:19.5px;font-weight:600}
.embed-load small{font-size:14.6px;line-height:1.35;color:var(--ink-40)}
.embed-load:hover{border-color:var(--ink)}
.embed-note{font-size:14.6px;color:var(--ink-40);padding:6px 16px 0}
.layout-bands .sound .mood-card.open .one-embed .embed-load{background:transparent;border:1px solid var(--rule);margin:0 0 4px}
.sub-form{display:flex;gap:8px;width:100%;margin-top:6px}
.sub-form[hidden]{display:none}
.sub-form input{flex:1;min-width:0;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;font:inherit;font-size:16.5px;padding:6px 0;outline:none}
.sub-form input::placeholder{color:rgba(255,255,255,.4)}
.sub-form button{color:#000;background:var(--accent);border-radius:9999px;padding:8px 14px;font-size:14.6px}
.bar .lang{font-size:16.5px;color:var(--bar-60);flex:none;display:flex;gap:6px;align-items:center}   /* the slash sat above the baseline on phones */
.bar .lang b{font-weight:500;color:var(--bar-ink)}
.bar .lang button,.bar .menu-btn{min-height:48px;padding:0 6px;margin:0 -6px}
.bar .lang button{color:inherit}
.bar .lang button[aria-pressed="true"]{color:var(--bar-ink)}
:root[lang="ja"] body{font-family:"Hiragino Sans","Zen Kaku Gothic New","Inter",Helvetica,Arial,sans-serif;letter-spacing:0}
:root[lang="ja"] .jp{font-family:inherit}

/* ---------- hanko of the day ---------- */
.hanko{width:88px;height:88px;flex:none;display:block;border-radius:50%;transition:transform var(--t-fast) var(--ease)}
.hanko:hover{transform:rotate(-8deg)}
.hanko svg{width:100%;height:100%;display:block}
.hanko-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.hanko-cap{font-size:14.6px;line-height:1.25;color:var(--ink-40);text-align:center;margin-top:6px}
.hanko-wrap > div:first-child{flex:1;min-width:0}
.hanko-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:20px 12px;margin-top:24px}
.hanko-wall .h{text-align:center;font-size:14.6px;color:var(--ink-40)}
.hanko-wall .hanko{width:100%;height:auto;aspect-ratio:1;margin:0 auto 6px}
/* ---------- night shift ---------- */
.bar .night{font-size:14.6px;color:var(--bar-60);flex:none;display:none;align-items:center;gap:6px}
.bar .night i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
:root[data-theme="dark"] .bar .night{display:inline-flex}
/* ---------- poster ---------- */
.poster{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start;margin-top:24px}
.poster img{width:100%;border:1px solid var(--rule)}
.poster .go{margin-top:8px}
@media(max-width:560px){.poster{grid-template-columns:1fr}}
/* ---------- departures board ---------- */
.dep{background:#000;color:#fff;min-height:100vh;padding:96px 0 48px;overflow-x:auto}   /* a residual wide row scrolls inside the black block, never the page */
.dep .dhead{display:flex;justify-content:space-between;align-items:baseline;padding:0 32px 24px;border-bottom:1px solid rgba(255,255,255,.25);gap:16px;flex-wrap:wrap}
.dep :is(h1,.h1){color:#fff}
.dep .clock{font-size:43px;color:var(--bar-accent,var(--accent-text,var(--accent)));font-variant-numeric:tabular-nums}
.dep table{width:100%;border-collapse:collapse;font-size:25.36px}
.dep th{font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45);text-align:left;padding:18px 16px 10px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.18)}
.dep td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
.dep td:first-child,.dep th:first-child{padding-left:32px}
.dep .t{font-variant-numeric:tabular-nums;color:var(--bar-accent,var(--accent-text,var(--accent)));white-space:nowrap}   /* 2026-09-17: Klein blue read 2.9:1 on the board's black */
.dep .dest{color:#fff}
.dep .dest small{display:none;font-size:19.5px;color:rgba(255,255,255,.5)}
.dep .plat{white-space:nowrap}
.dep .grey,.dep .dhead .grey{color:rgba(255,255,255,.55)}   /* 2026-09-17: the page ink was invisible on the board's black */
@media(max-width:1100px){   /* 2026-09-17: the board's table needs ~1125px; below that every row becomes a card, so City and Status stop falling off the screen (phones AND tablets) */
  .dep{padding:76px 0 40px}
  .dep .dhead{padding:0 16px 18px}
  .dep .clock{font-size:32px}
  .dep table{display:block;font-size:19.5px}
  .dep thead{display:none}
  .dep tbody,.dep tr,.dep td{display:block;width:auto}
  .dep tr{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
  .dep td{padding:1px 0;border:0}
  .dep td:first-child,.dep th:first-child{padding-left:0}
  .dep td.t{font-size:14.6px}
  .dep td.dest{font-size:22px;line-height:1.2;margin:2px 0 4px}
  .dep td.dest small{display:block;font-size:16.5px}
  .dep td.plat{font-size:16.5px;color:rgba(255,255,255,.62)}
  .dep td.st{margin-top:6px}
}
.dep .st{white-space:nowrap}
.dep .st.boarding{color:#5BF07A}.dep .st.last{color:var(--accent-text,var(--accent));animation:blink 1.2s steps(2,start) infinite}.dep .st.sched{color:rgba(255,255,255,.6)}
@keyframes blink{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.dep .st.last{animation:none}}
.flap{display:inline-block;overflow:hidden}
.flap span{display:inline-block;transition:transform .08s}
.flap.spin span{animation:flip .12s linear}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.dep .note{padding:24px 32px;color:rgba(255,255,255,.5);font-size:16.5px}
.dep a.row:hover td.dest{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(max-width:760px){.dep table{font-size:19.5px}.dep .hide{display:none}.dep .dest small{display:block}}

/* ---------- studio sound: motion ---------- */
.slat{transition:filter .25s,transform .25s;opacity:0;transform:translateY(14px);animation:slatIn .55s var(--ease) forwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes slatIn{to{opacity:1;transform:none}}
.slat:hover{filter:brightness(.92)}
.slat .eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px;width:18px;margin-left:10px;flex:none;opacity:0;transition:opacity .25s}
.slat .eq i{display:block;width:3px;height:30%;background:currentColor;border-radius:1px;transform-origin:bottom}
.slat:hover .eq,.slat.now .eq{opacity:1}
.slat:hover .eq i,.slat.now .eq i{animation:eq .9s ease-in-out infinite}
.slat .eq i:nth-child(2){animation-delay:-.3s}.slat .eq i:nth-child(3){animation-delay:-.6s}.slat .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}
.slat .play{transition:background .2s,transform .2s}
.slat:hover .play{transform:scale(1.08)}
.slat .play i{transition:transform .2s}
.slat:hover .play i{transform:translateX(1px)}
.slat.now .t b{position:relative}
.slat.now .t b:after{content:"";position:absolute;left:-14px;top:.45em;width:6px;height:6px;border-radius:50%;background:currentColor;animation:pulse 1.6s ease-in-out infinite}
.nowline b{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.slat{animation:none;opacity:1;transform:none}.slat .eq i,.slat.now .t b:after,.nowline b{animation:none}}

/* ---------- studio sound: gradient colour change ---------- */
.slat{background-image:linear-gradient(135deg, var(--c1) 0%, var(--c1) 40%, var(--c2) 100%);background-size:250% 100%;background-position:0% 0;transition:background-position var(--t-slow) var(--ease),filter var(--t-fast)}
.slat:hover{background-position:100% 0;filter:none}
.slat.now{animation:slatIn .55s var(--ease) forwards, breathe 9s ease-in-out .6s infinite;animation-delay:calc(var(--i,0)*70ms), .6s}
.slat.now:hover{animation:slatIn .55s forwards;opacity:1;transform:none}
@keyframes breathe{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.slat{transition:none}.slat.now{animation:none}}

/* ---------- footer: set in the site's column language ---------- */
.board .links{grid-template-columns:1fr 1fr 1fr;font-size:19.5px;color:var(--board-dim,rgba(255,255,255,.6))}
.board .links > div{padding:40px 16px 56px;border-left:1px solid var(--board-rule,rgba(255,255,255,.25));display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.board .links > div:first-child{border-left:0}
.board .links b{display:block;width:100%;font-size:19.5px;font-weight:500;color:var(--board-dim,rgba(255,255,255,.6));margin-bottom:14px}
.board .links > div:first-child b{font-size:43px;line-height:1.1;letter-spacing:-.02em;color:var(--board-ink,#fff);margin-bottom:12px}
.board .links > div:first-child span{display:block;font-size:25.36px;line-height:1.2;color:var(--board-ink,#fff);max-width:20ch;letter-spacing:-.02em}
.board .links > div:first-child #board-when{font-size:16.5px;color:var(--board-dim,rgba(255,255,255,.6));margin-top:auto;padding-top:24px}
.board .links > div:first-child span.indie{font-size:14.6px;line-height:1.4;letter-spacing:0;color:var(--board-dim,rgba(255,255,255,.55));max-width:34ch;margin-top:10px}
.layout-marquee .board .links > div:first-child span.indie{font-family:var(--sans);font-size:14.6px;color:rgba(255,255,255,.5)}
.board .links a{font-size:25.36px;line-height:1.2;letter-spacing:-.02em;color:var(--board-ink,#fff)}
.board .links a:hover{color:var(--accent-text,var(--accent))}
.board .links .sub-form{margin-top:24px;max-width:360px}
.board .links .sub-form input{font-size:19.5px}
@media(max-width:960px){.board .links{grid-template-columns:1fr}.board .links > div{border-left:0;border-top:1px solid var(--board-rule,rgba(255,255,255,.25));padding:32px 16px 40px}.board .links > div:first-child{border-top:0}}

/* ---------- theme switch: sun / moon in the bar ---------- */
.bar .theme{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;color:var(--bar-60);background:none;border:0;padding:0;cursor:pointer;border-radius:50%}
.bar .theme:hover{color:var(--bar-ink)}
.bar .theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.bar .theme .moon{fill:currentColor;stroke:none}
.bar .theme .sun{display:none}
[data-theme="dark"] .bar .theme .sun{display:block}
[data-theme="dark"] .bar .theme .moon{display:none}

/* ---------- the bar player: our frame, Spotify's strip inside it, pinned under the bar ---------- */
.barplay{position:fixed;top:48px;left:0;right:0;z-index:39;background:var(--bg);border-bottom:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.barplay .bp-in{display:grid;grid-template-columns:minmax(150px,1fr) minmax(280px,2fr) auto;align-items:center;gap:0 20px;padding:10px 16px}
.barplay .bp-meta{min-width:0;display:flex;flex-direction:column;gap:1px}
.barplay .bp-mood{font-size:14.6px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.barplay .bp-meta b{font-size:16.5px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barplay .bp-by{font-size:14.6px;color:var(--ink-40)}
.barplay .bp-embed{min-width:0}
.barplay .bp-embed iframe{width:100%;height:80px;border:0;display:block;border-radius:10px}
.barplay .bp-embed .embed-load{width:100%;text-align:left;padding:10px 12px;border:1px solid var(--rule);background:transparent;cursor:pointer;border-radius:10px}
.barplay .bp-embed .embed-load b{display:block;font-size:14.6px;font-weight:400}
.barplay .bp-embed .embed-load small{display:block;font-size:14.6px;color:var(--ink-40);margin-top:2px;line-height:1.3}   /* 12.5px sat under the 14.6px floor */
.barplay .bp-act{display:flex;align-items:center;gap:10px;white-space:nowrap}
.barplay .bp-nav,.barplay .bp-x{background:transparent;border:0;cursor:pointer;color:var(--ink);font-size:21px;line-height:1;padding:2px 6px}
.barplay .bp-nav:hover,.barplay .bp-x:hover{color:var(--accent)}
.barplay .bp-n{font-size:14.6px;color:var(--ink-40);font-variant-numeric:tabular-nums}
.barplay .bp-open{font-size:14.6px;color:var(--ink-40)}
.barplay .bp-open:hover{color:var(--accent)}
body.bp-on .lead-wide{padding-top:180px}          /* the strip pushes the page down instead of covering the first headline */
body.bp-on .cols{padding-top:200px}
@media(max-width:860px){
  .barplay .bp-in{grid-template-columns:1fr auto;gap:8px 12px;padding:8px 12px}
  .barplay .bp-embed{grid-column:1/-1;order:3}
  body.bp-on .lead-wide{padding-top:210px}
  body.bp-on .cols{padding-top:150px}
}

/* ---------- the day's playlist at the head of the bar (site.ticker_music), where the clock used to be ---------- */
.tick .tick-music{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tick .tick-music svg{width:11px;height:11px;flex:none;fill:var(--accent);transition:transform .18s ease}
.tick .tick-music:hover svg{transform:scale(1.22)}
.tick .tick-music .tk{color:inherit;opacity:.6;letter-spacing:.02em}   /* the bar sets its own ink; a light-mode grey disappears on it */
/* Menu before the theme switch, on this magazine only — the bar is a flex row, so it is a reorder and not a change
   to the markup the other four share. */
body.ticker-music .bar .menu-btn{order:1}
body.ticker-music .bar .theme{order:2}

/* ---------- lead-wide — the signal of the week lifted out of the news column and run across the full page, so its two features are
   read at poster size instead of at thumbnail size (site.lead_wide). The three columns carry on underneath, unchanged. ---------- */
.lead-wide{border-bottom:1px solid var(--rule);padding:60px 16px 22px}
/* ---------- the news river runs wide once the side columns end — the left column was three times their height and
   left thousands of pixels of white beside it (site.news_runs_wide) ---------- */
.latest-wide{columns:3;column-gap:34px;padding:8px 16px 0;border-top:1px solid var(--rule);margin-top:26px}
.latest-wide > *{break-inside:avoid}
.latest-wide .load-more{column-span:all;margin-top:20px}
@media(max-width:960px){.latest-wide{columns:2}}
@media(max-width:700px){.latest-wide{columns:1}}
/* ---------- sources and about leave the column and close the page: the list of publications reads as a wide
   index, the about text as a column of prose (site.foot_sections) ---------- */
.foot-wide{border-top:1px solid var(--rule);margin-top:34px;padding:30px 16px 8px;display:grid;grid-template-columns:1.15fr 1fr;gap:0 44px;align-items:start}
.foot-wide > section{margin:0}
.foot-wide #about .about-text{columns:2;column-gap:34px}
.foot-wide #about .about-text > *{break-inside:avoid}
.foot-wide #sources .list.sources{columns:2;column-gap:28px}
@media(min-width:1100px){.foot-wide #sources .list.sources{columns:3}}
.foot-wide #sources .list.sources a{break-inside:avoid}
@media(max-width:960px){.foot-wide{grid-template-columns:1fr;gap:26px 0}.foot-wide #about .about-text,.foot-wide #sources .list.sources{columns:1}}
/* The bar player was a wide grid with our own title on the left repeating what Spotify writes inside its own
   window, and the player stretched across the rest — which is why it looked like a box floating in a hole.
   One tight row now: our kicker, the player at its natural width, the controls at the far right. */
/* The window is the strip. No frame, no shadow, no padding: Spotify's own dark runs edge to edge under the bar as a
   second band, and our close and link sit in a narrow navy margin at its right. A card floating on navy read as pasted on. */
body.polish .barplay{background:var(--bar);border-bottom:0;box-shadow:none}
body.polish .barplay .bp-in{grid-template-columns:minmax(0,1fr) auto;gap:0;padding:0}
body.polish .barplay .bp-meta{display:none}   /* Spotify writes the record's name inside its own window; saying it twice is what made this look pasted on */
body.polish .barplay .bp-embed{grid-column:1;min-width:0}
body.polish .barplay .bp-embed iframe{height:80px;border-radius:0;display:block;filter:grayscale(1) sepia(.75) hue-rotate(190deg) saturate(2.6) brightness(.8) contrast(1.05)}   /* the window is Spotify's and cannot be repainted from outside; a navy duotone over the whole of it is the one thing CSS can do, and it makes the band ours — cover art included, as a blue engraving */
body.polish .barplay .bp-embed .embed-load{border:0;border-radius:0;padding:14px 16px;background:transparent;color:var(--bar-ink)}
body.polish .barplay .bp-embed .embed-load small{color:var(--bar-60)}
body.polish .barplay .bp-act{padding:0 10px 0 14px;height:80px;color:var(--bar-ink)}
body.polish .barplay .bp-nav,body.polish .barplay .bp-x{color:var(--bar-ink)}
body.polish .barplay .bp-open,body.polish .barplay .bp-n{color:var(--bar-60)}
body.polish .barplay .bp-nav:hover,body.polish .barplay .bp-x:hover,body.polish .barplay .bp-open:hover{color:var(--accent)}
body.polish .barplay .bp-act{justify-content:flex-end}
@media(max-width:820px){ body.polish .barplay .bp-in{grid-template-columns:1fr auto} body.polish .barplay .bp-meta{display:none} }
/* ---------- the record plays in a strip (site.polish) — the full Spotify player is 352px of cover art for a
   thing the reader came to hear, not to look at; the consent control is a line rather than a grey slab ---------- */
body.polish .sound .one-embed iframe{height:80px;border-radius:8px}
body.polish .embed-load{background:transparent;border:1px solid var(--rule);border-radius:8px;padding:10px 13px;gap:3px}
body.polish .embed-load b{font-weight:500}
body.polish .embed-load:hover{border-color:var(--ink);background:transparent}
body.polish .sound .one-head h2{margin-bottom:6px}
body.polish .sound .one-open{margin-top:10px}
/* ---------- polish (site.polish) — the family skeleton untouched; rank, air and quiet ---------- */
body.polish .subhead{font-size:31.68px}                         /* a shelf heading was set at story size and read as a story */
body.polish .subhead .grey{font-size:19.5px}
body.polish .post .meta{font-size:16.5px}                       /* the meta floor the rest of the page already uses */
body.polish #japan .rg button{font-size:19.5px;padding:8px 16px}   /* region chips at link size, and a hand-sized target */
body.polish .sound .one-head{border-left:0;padding-left:0}       /* the coloured bar made the playlist the loudest thing below the pictures */
body.polish .sound .one-head .mood{margin-bottom:10px}
body.polish .sound .one-head p{color:var(--ink-40)}
body.polish #sources{display:none}                               /* ninety names are a page, not a column block: /sources/ */
body.polish .pic{outline:1px solid rgba(var(--ink-rgb),.07);outline-offset:-1px}   /* a hairline keeps a dark photograph from sinking into navy */
/* ---------- the news continued in the middle column (site.fill_middle) ---------- */
.more-news{margin-top:48px;padding-top:8px;border-top:1px solid var(--rule)}
.more-news .posts-more .post:first-child{margin-top:0}
/* ---------- a tidied column head (site.polish) — the link to the whole section was sitting beside the
   heading and squeezing it onto two lines in a 480px column; it belongs underneath ---------- */
body.polish .cols .head-row{display:block}
body.polish .cols .head-row > button:not([hidden]),body.polish .cols .head-row > a:not([hidden]){display:block;margin-top:12px;white-space:normal;text-align:left}
body.polish .cols .head .h1{max-width:100%}
/* ---------- radar as a strip — the week's signals run across the page under the lead band instead of standing
   in a column, so the eye reads them as a ticker and the column below starts on the news (site.radar_strip) ---------- */
.radar-strip-sec{background:var(--accent);color:var(--accent-ink);padding:10px 16px 11px;border-bottom:1px solid var(--rule)}
/* everything on one line: the title, the signals, and the way to the rest of them. The sentence explaining the
   arithmetic and the hint about tapping live in the title attribute instead of taking a line each. */
.radar-strip-sec #radar{display:flex;align-items:baseline;gap:20px}
.radar-strip-sec .head{display:flex;align-items:baseline;gap:14px;margin:0;flex:none}
.radar-strip-sec .head .h1{margin:0;font-size:25.36px;line-height:1.15;white-space:nowrap}
.radar-strip-sec .head .sub{display:none}
.radar-strip-sec .trends-more span{display:none}
.radar-strip-sec .trends-more{flex:none;white-space:nowrap}
.radar-strip-sec #trends{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-width:0}
.radar-strip-sec #trends::-webkit-scrollbar{display:none}
/* six signals are wider than the page, so the last one fades out instead of being chopped: the strip scrolls sideways */
.radar-strip-sec #trends{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
/* one line per signal: name, the week's shape, the count, the change -- a strip, not a row of cards */
.radar-strip-sec .trend{width:auto;flex:0 0 auto;display:flex;align-items:baseline;gap:9px;padding:0 14px;border-top:0;border-left:1px solid var(--accent-rule);text-align:left;line-height:1.15}
.radar-strip-sec .trend:first-child{border-left:0;padding-left:0}
.radar-strip-sec .trend .n{font-size:25.36px;white-space:nowrap}
.radar-strip-sec .trend .spark{display:none}   /* at strip height the week's shape is decoration; the number and the change carry it */
.radar-strip-sec .trend .num,.radar-strip-sec .trend .delta{text-align:left;min-width:0;white-space:nowrap}
.radar-strip-sec .trends-more{margin:0}
@media(max-width:700px){ .radar-strip-sec .trend{padding:0 14px}
  .radar-strip-sec #radar{flex-wrap:wrap}
  .radar-strip-sec .head .h1{font-size:19.5px}
  .radar-strip-sec .trends-more{flex:1 0 100%;margin-top:4px}   /* 2026-09-17: it could not shrink and slid the whole page sideways */
}
/* Nami keeps the news and drops the studio furniture: no colour swatches, no seal on the pictures. */
body.no-colours #colours{display:none}
body.no-hanko .hanko,body.no-hanko .hanko-wrap > a.hanko{display:none}
/* ---------- directory pages (brands A-Z, marinas): long lists that must stay easy to scan ---------- */
.dir-nav{display:flex;flex-wrap:wrap;gap:0 6px;margin:0 0 8px}
.dir-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;text-decoration:none}   /* 26 bare letters made the I a 5px tap target */
.dir-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.dir-grid{display:block}
.dir-page{max-width:none}
.dir-page .summary,.dir-page > .grey{max-width:62ch}
.dir-cols{columns:2;column-gap:38px}
@media(min-width:1200px){.dir-cols{columns:3}}
.dir-page .dir-e{break-inside:avoid;margin:0 0 15px}
/* Champions (Nami): a directory of winning yachts and a page each with the builder's plate and the record */
.ch-nav small{font-family:var(--mono);opacity:.6;margin-left:3px}
.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;margin:10px 0 14px}
@media(max-width:960px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ch-grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.ch-card{display:flex;flex-direction:column;gap:7px;color:var(--ink);text-decoration:none;min-width:0}
.ch-pic{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0B1F33}
.ch-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-slow) var(--ease)}
.ch-card:hover .ch-pic img{transform:scale(1.03)}
.ch-card:hover .ch-name{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.ch-none{position:absolute;inset:0;display:grid;place-items:center;color:#B9964F;font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;font-size:72px;background:#0B1F33}
.ch-year{position:absolute;left:10px;top:10px;font:700 12.5px/1 var(--mono,monospace);font-style:normal;letter-spacing:.06em;color:#D9C08A;background:#06111C;padding:6px 10px;border-radius:999px}
.ch-name{font-family:var(--serif);font-size:27px;line-height:1.08;font-weight:500;letter-spacing:-.01em;margin-top:6px}
.ch-name small{display:block;font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-40);margin-top:3px}
.ch-head{font-size:16.5px;line-height:1.42}
.ch-spec{font:600 12.5px/1.45 var(--mono,monospace);letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text,var(--accent))}
.ch-credit{font-size:12.5px;line-height:1.4;color:var(--ink-40)}
.ch-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ch-src{font-size:14px;margin-top:22px}
.champ .ch-hero{margin:0 0 10px}
.champ .ch-big{aspect-ratio:16/9;max-height:72vh}
.champ .ch-big .ch-year{font-size:14px;padding:8px 13px;left:14px;top:14px}
.champ .ch-big .ch-none{font-size:120px}
.champ .ch-hero figcaption{margin-top:8px}
.ch-kick{font:700 12.5px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text,var(--accent));margin:26px 0 6px}
.ch-page h1.story{margin-top:0}
.ch-aka{font-size:17px;color:var(--ink-40);margin:-6px 0 10px}
.ch-plate,.ch-won{margin:34px 0 0}
.ch-plate h2,.ch-won h2{font-family:var(--serif);font-size:30px;font-weight:500;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--rule-soft);box-shadow:0 -5px 0 -1px var(--accent) inset}
.ch-plate dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
@media(max-width:960px){.ch-plate dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ch-plate dl > div{padding:12px 16px 14px 0;border-bottom:1px solid var(--rule-soft)}
.ch-plate dt{font:600 11.5px/1.3 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);margin-bottom:5px}
.ch-plate dd{margin:0;font-family:var(--serif);font-size:19px;line-height:1.3}
.ch-won ol{list-style:none;margin:0;padding:0}
.ch-won li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:6px 22px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule-soft)}
.ch-when{font:700 13px/1.3 var(--mono,monospace);letter-spacing:.06em;color:var(--accent-text,var(--accent))}
.ch-ev{font-size:16.5px;line-height:1.45}
.ch-ev b{display:block;font-family:var(--serif);font-size:21px;font-weight:500;line-height:1.2;margin-bottom:3px}
.ch-fig{font-family:var(--serif);font-size:26px;line-height:1;white-space:nowrap}
@media(max-width:600px){.ch-won li{grid-template-columns:minmax(0,1fr)}.ch-fig{font-size:22px}}

.dir-page .dir-e a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#src-list .nolink{color:var(--ink-40)}   /* a source with too few stories for a page: named, not linked */
.dir-page .dir-badge{font-family:var(--mono);font-size:14.6px;color:var(--accent-text,var(--accent));white-space:nowrap}   /* marinas.json "official" is a flag, not a link */
.dir-page .dir-form{columns:1;border-left:2px solid var(--rule);padding-left:14px;margin-bottom:20px}
@media(max-width:900px){.dir-cols{columns:1}}   /* the bar is 48px; without a heading the pictures start just under it */
body.lead-wide-on .cols{padding-top:24px}
body.lead-wide-on .colhead{display:none}                 /* the column captions belong above the columns, not above the wide band */
/* The band is the two pictures and nothing else: the heading, the week's arithmetic and the note repeating it were
   furniture in front of them. The hanko keeps its place, and the link out sits under the pictures. */
.lead-wide .head,.lead-wide .note{display:none}
.lead-wide .head.hanko-wrap{display:block;position:absolute;right:16px;top:56px;z-index:2}
.lead-wide .head.hanko-wrap > div{display:none}
.lead-wide{position:relative}
.lead-wide .lead-thumbs,.lead-wide .thumbs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}   /* the two features meet edge to edge, one wide picture split down the middle */
.lead-wide .thumb{display:block;position:relative;overflow:hidden}
.lead-wide .thumb .pic{aspect-ratio:16/9;overflow:hidden;background:var(--rule-soft);margin:0}
.lead-wide .thumb .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.lead-wide .thumb:hover .pic img{transform:scale(1.03)}
.lead-wide .thumb .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.34) 62%,rgba(0,0,0,.82) 100%);pointer-events:none}
.lead-wide .thumb h2{position:absolute;left:0;right:0;bottom:0;z-index:1;margin:0;padding:0 28px 26px;font-size:31.68px;line-height:1.14;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.lead-wide .thumb h2 .pill{background:rgba(255,255,255,.16);color:#fff;border-color:transparent;backdrop-filter:blur(4px)}
.lead-wide .thumb h2 .grey{display:block;font-size:16.5px;margin-top:8px;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.lead-wide .more{display:none}   /* 'See all N stories carrying this signal' filtered the news list and jumped to it — read as a link that led nowhere; the band is the two pictures and stops */
.lead-wide .strip{display:none}                          /* the strip is a marquee device; the wide band shows two features and stops */
@media(max-width:1100px){ .lead-wide .head :is(h1,.h1){font-size:44px} .lead-wide .thumb h2{font-size:25.36px} }
@media(max-width:960px){
  body.lead-wide-on .cols{padding-top:0}
  .lead-wide{padding:60px 16px 28px}
  .lead-wide .lead-thumbs,.lead-wide .thumbs{grid-template-columns:1fr;gap:2px 0}
  .lead-wide .head :is(h1,.h1){font-size:36px}
  .lead-wide .note{font-size:19.5px;margin-bottom:20px}
  /* One column, so a headline runs to three or four lines and climbs well above a bottom-only scrim. The card goes taller and the
     darkening starts higher, rather than the type getting smaller. */
  .lead-wide .thumb .pic{aspect-ratio:3/4}
  .lead-wide .thumb .pic:after{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.15) 34%,rgba(0,0,0,.6) 66%,rgba(0,0,0,.9) 100%)}
  .lead-wide .thumb h2{padding:0 18px 20px}
}

.layout-bands.cv .band:not(.pulse-band):not(:nth-child(2)){content-visibility:auto;contain-intrinsic-size:auto 1200px}   /* site.cv: the browser skips layout of bands off screen (the front-end audit: 400 cards laid out at once) */
.layout-bands.cv #latest .sig-group{content-visibility:auto;contain-intrinsic-size:auto 720px}
.layout-bands.pics #latest .post.row .meta .also{display:inline-block;padding:0 5px;border:1px solid var(--accent-text,var(--accent));color:var(--accent-text,var(--accent));border-radius:3px;font-size:14.6px;line-height:1.25}   /* one card per launch; the other outlets sit behind the +N */
.layout-bands.pics #latest .sig-index .lens-k{color:var(--ink-40);margin-left:12px;padding-left:12px;border-left:1px solid var(--rule)}
.layout-bands.pics #latest .sig-index a.lens{color:var(--ink-40)}
/* ---------- XLR, the art director's second round (2026-09-16, owner: "go ahead"), each behind a body class from a site flag ---------- */
.layout-bands.pics.strip-fold #latest .sig-group:not(.open) .post.row:nth-child(n+10){display:none}   /* eight cards a strip, the rest opens in place */
.layout-bands.pics #latest .sig-group h3 .unfold{grid-column:auto;font:500 14.6px var(--mono);color:var(--accent-text,var(--accent));background:none;border:0;padding:6px 8px;margin:-6px -8px;min-height:32px;cursor:pointer;white-space:nowrap}
.layout-bands.pics #latest .sig-group h3 .unfold:hover{text-decoration:underline}
.layout-bands.pics.head-name #latest .sig-group h3{grid-template-columns:auto minmax(0,1fr) 120px auto auto;padding:22px 0 10px}
.layout-bands.pics.head-name #latest .sig-group h3::before{font-size:19.5px}
.layout-bands.pics.head-name #latest .sig-group h3 a.fam,.layout-bands.pics.head-name #latest .sig-group h3 span.fam{font-size:34px;letter-spacing:-.02em}
.layout-bands.pics.head-name #latest .sig-group h3 i{height:6px}
.layout-bands.pics.head-name #latest .sig-group h3 > span:not(.fam){font-size:14.6px}
.layout-bands.pics.index-line #latest .sig-index{flex-wrap:nowrap;overflow-x:auto;height:40px;align-items:center;padding:0;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent)}
.layout-bands.pics.index-line #latest .sig-index::-webkit-scrollbar{display:none}
.layout-bands.pics.index-line #latest .sig-group{scroll-margin-top:100px}
.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(even){background:none;box-shadow:none}
.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12){padding:40px 0 48px;margin:24px 0}
.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12) h3{border-top-color:var(--accent)}
.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12),.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12) h3,.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12) h2,.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12) h3 button{color:var(--ink)}   /* 2026-09-17: without the bar background the strip must read in page ink (XLR light: paper on paper) */
.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12) .meta,.layout-bands.pics.no-strip-alt #latest .sig-group:nth-of-type(12) h3::before{color:var(--ink-40)}
.layout-bands.pics.front-split #front .first{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;align-items:start}
.layout-bands.pics.front-split #front .first .pic{aspect-ratio:3/2;margin:0;grid-row:1/3}
.layout-bands.pics.front-split #front .first :is(h1,h2){font-size:44px;line-height:1;max-width:none}
.layout-bands.pics.front-split #front .first .m{grid-column:2}
.layout-bands.pulse-flat .tile{min-height:170px}
.layout-bands.pulse-flat .tile.watch:not(:nth-child(2)){background:transparent;color:var(--bar-ink)}
.layout-bands.pulse-flat .tile.watch:not(:nth-child(2)) .ov,.layout-bands.pulse-flat .tile.watch:not(:nth-child(2)) .ov span:last-child{color:var(--bar-ink)}
.layout-bands.pulse-flat .tile.watch:not(:nth-child(2)) .ov .k{color:var(--accent)}
.layout-bands.pulse-flat .tile.watch:not(:nth-child(2)) .pic{border-bottom:2px solid var(--accent)}
.layout-bands.ticker-calm .board .mq{height:88px}
.layout-bands.ticker-calm .board .track span{font-size:44px;padding-right:48px;text-transform:none}
.layout-bands.ticker-calm .board .track span i{text-transform:uppercase}

/* ---------- layout: bands — "the diff view": a mono rail on the left, full-width bands as hunks (SITE.layout === "bands") ---------- */
@media(min-width:961px){
body.layout-bands:not(.bands-ready) #home > .cols{visibility:hidden}   /* the columns markup is only scaffolding for the bands; keep it invisible until buildBands has re-parented it, so a reload never flashes the old layout */
.layout-bands .colhead{display:none}
.layout-bands .bands{padding-top:48px}
/* site.side_rail: the bands on the left, a sticky column on the right (owner 2026-09-16: room for reviews, sponsors, whatever comes) */
.layout-bands .bands-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:0;align-items:start}
.layout-bands .bands-grid > .bands{min-width:0}
.layout-bands .siderail{position:sticky;top:48px;max-height:calc(100vh - 48px);overflow:auto;scrollbar-width:none;padding:48px 24px 40px 24px;border-left:1px solid var(--rule-soft);background:var(--bg)}
.layout-bands .siderail .mod{border-top:3px solid var(--ink);padding:10px 0 22px}
.layout-bands .siderail .mod h4{margin:0 0 10px;font-family:var(--mono);font-size:14.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40);font-weight:500}
.layout-bands .siderail .sc{display:grid;grid-template-columns:104px minmax(0,1fr);gap:2px 10px;align-items:start;padding:8px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit}
.layout-bands .siderail .sc:last-child{border-bottom:0}
.layout-bands .siderail .sc .pic{grid-row:1/3;display:block;aspect-ratio:1;background:var(--ph);overflow:hidden}
.layout-bands .siderail .mod.watch .sc .pic{aspect-ratio:16/9;align-self:center}
.layout-bands .siderail .mod .more{display:block;padding:8px 0 0;font-family:var(--mono);font-size:14.6px;color:var(--accent-text,var(--accent));text-decoration:none}
.layout-bands .siderail .sc .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands .siderail .sc b{font-family:var(--serif);font-weight:700;font-size:19.5px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands .siderail .sc .m,.layout-bands .siderail .note .m{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);display:block}
.layout-bands .siderail .adslot{aspect-ratio:6/5;border:1px dashed var(--rule);display:grid;place-items:center;align-content:center;gap:6px;text-align:center;color:var(--ink-40);font-family:var(--mono);font-size:14.6px;background:var(--ph)}
.layout-bands .siderail .adslot small{font-size:14.6px}
.layout-bands .siderail .note{display:block;text-decoration:none;color:inherit}
.layout-bands .siderail .note b{font-family:var(--serif);font-weight:700;font-size:25.36px;line-height:1.1;display:block}
.layout-bands .siderail .note p{margin:8px 0 6px;font-size:14.6px;line-height:1.4;color:var(--ink)}
.layout-bands .siderail .fe{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 10px;padding:7px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;color:inherit}
.layout-bands .siderail .fe span{font-family:var(--mono);font-size:14.6px;color:var(--accent-text,var(--accent));padding-top:3px}   /* XLR light: the orange read 2.8:1 on paper */
.layout-bands .siderail .fe b{font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:1.15}
.layout-bands .siderail .fe i{grid-column:2;font-style:normal;font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
@media(min-width:1201px){.layout-bands.siderail #front .fnext-k,.layout-bands.siderail #front .fnext{display:none}}   /* only where the page rail is shown and does say what is next */
@media(max-width:1200px){.layout-bands .bands-grid{grid-template-columns:minmax(0,1fr)}.layout-bands .siderail{display:none}}
.layout-bands .band{display:grid;grid-template-columns:64px minmax(0,1fr);border-bottom:1px solid var(--rule-soft)}
.layout-bands .band > .rail{position:sticky;top:48px;align-self:start;padding:44px 0 40px 24px;font-family:var(--mono);font-size:25.36px;line-height:1;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.layout-bands .band > .rail b{font-weight:600}
.layout-bands .band > .rail b:before{content:"";display:block;width:12px;height:12px;background:var(--accent);margin-bottom:10px}
.layout-bands .band > .rail span{display:none}
.layout-bands .band > section,.layout-bands .band > .halves{padding:40px 24px 48px 0;min-width:0}
.layout-bands .band > .halves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px}
.layout-bands .band > .halves > section{padding:0;min-width:0}
.layout-bands .band > .halves > section + section{border-left:1px solid var(--rule-soft);padding-left:56px;margin-left:-56px}
.layout-bands #lead[hidden],.layout-bands #radar[hidden],.layout-bands #colours[hidden]{display:none !important}
.layout-bands #lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;gap:16px 56px;align-items:start}
.layout-bands #lead .head{grid-column:1;margin:0}
.layout-bands #lead .head :is(h1,.h1){font-size:96px;line-height:.95;letter-spacing:-.03em}
.layout-bands #lead .note{grid-column:1;font-size:30px;line-height:1.2;max-width:none;margin-top:8px}
.layout-bands #lead .lead-note,.layout-bands #lead .more{grid-column:1}
.layout-bands #lead .lead-thumbs{grid-column:2;grid-row:1/span 4;margin:0;grid-template-columns:1fr 1fr;gap:20px 16px;align-self:start}
.layout-bands #lead .hanko{display:none}
.layout-bands #lead{padding-top:32px;padding-bottom:36px}
.layout-bands #lead .lead-thumbs .thumb .pic{border:1px solid var(--rule)}
.layout-bands #lead .lead-thumbs .thumb h2{font-size:19.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands #lead .head :is(h1,.h1){font-family:var(--mono);font-size:16.5px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40);font-weight:500}
.layout-bands #lead .head .sub{font-family:var(--mono);font-size:16.5px;color:var(--ink-40);margin-top:2px}
.layout-bands #lead .note{font-size:56px;line-height:1.02;letter-spacing:-.025em;margin-top:14px;font-weight:600}
.layout-bands #lead .note .grey{font-size:25.36px;letter-spacing:0;font-weight:500}
.layout-bands #lead .lead-list{grid-column:1;margin-top:20px;border-top:2px solid var(--ink)}
.layout-bands #lead .lead-list a{display:block;padding:10px 0 11px;border-bottom:1px solid var(--rule-soft)}
.layout-bands #lead .lead-list h2{font-size:25.36px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands #lead .lead-list .meta{display:block;font-family:var(--mono);font-size:14.6px;color:var(--ink-40);margin-top:4px}
.layout-bands #lead .more{margin-top:14px;font-family:var(--mono);font-size:16.5px}
.layout-bands #lead{grid-template-rows:auto auto auto auto 1fr}
.layout-bands #lead .lead-thumbs{grid-row:1/span 5}
.layout-bands #latest #posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;border-top:0}
.layout-bands #latest .sig-group{min-width:0;border-top:2px solid var(--ink)}
.layout-bands #latest .sig-group h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:10px 0 4px;font-family:var(--mono);font-size:16.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.layout-bands #latest .sig-group h3 button{font:inherit;color:inherit;text-align:left}
.layout-bands #latest .sig-group h3 button:hover{color:var(--accent-text,var(--accent))}
.layout-bands #latest .sig-group h3 span{color:var(--accent-text,var(--accent));font-weight:500}
.layout-bands #latest .sig-group .post.row:last-child{border-bottom:0}
.layout-bands #front{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 56px;padding:28px 24px 40px 0}
.layout-bands #front .first{display:block}
.layout-bands #front .first :is(h1,h2){font-size:56px;line-height:1;letter-spacing:-.03em;max-width:22ch;margin:0;overflow-wrap:anywhere}
.layout-bands #front .first:hover h2{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.layout-bands #front .m,.layout-bands #front .k{font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.layout-bands #front .first .m{display:block;margin-top:10px;font-size:16.5px}
.layout-bands #front .k{letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.layout-bands #front .ftwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;margin-top:26px;border-top:2px solid var(--ink)}
.layout-bands #front .fr{display:grid;grid-template-columns:56px minmax(0,1fr);gap:2px 12px;padding:12px 0 13px;border-bottom:1px solid var(--rule-soft);min-width:0}
.layout-bands #front .fr .t{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);padding-top:6px}
.layout-bands #front .fr h3{margin:0;font-size:25.36px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.layout-bands #front .fr .m{grid-column:2}
.layout-bands #front .fr:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.layout-bands #front .fside{border-left:1px solid var(--rule-soft);padding-left:32px;min-width:0}
.layout-bands #front .fsig{font-size:34px;line-height:1.05;font-weight:600;letter-spacing:-.02em}
.layout-bands #front .fsub{color:var(--ink-40);margin-top:4px}
.layout-bands #front #fr-radar{margin:14px 0 22px}
.layout-bands #front .fb{display:grid;grid-template-columns:minmax(0,1fr) 88px auto auto;gap:0 10px;align-items:center;width:100%;padding:7px 0;border-top:1px solid var(--rule-soft);font-size:16.5px;text-align:left;color:var(--ink);background:none;cursor:pointer}
.layout-bands #front .fb:hover span{text-decoration:underline;text-underline-offset:3px}
.layout-bands #front .fb i{display:block;height:8px;background:var(--accent)}
.layout-bands #front .fb b{font-family:var(--mono);font-weight:500}
.layout-bands #front .fb small{font-family:var(--mono);color:var(--accent-text,var(--accent));font-size:14.6px}
.layout-bands #front .fmini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:22px}
.layout-bands.pics #front .fmini{grid-template-columns:repeat(4,minmax(0,1fr))}
.layout-bands #front #fr-makers{margin:0 0 22px}
.layout-bands #front .fmini a{display:block;aspect-ratio:3/2;background:var(--ph);overflow:hidden}
.layout-bands #front .fmini img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter var(--t-fast)}
.layout-bands #front .fmini a:hover img{filter:none}
.layout-bands #front .fe{display:grid;grid-template-columns:64px minmax(0,1fr);gap:2px 12px;padding:8px 0;border-top:1px solid var(--rule-soft);font-size:16.5px;color:var(--ink)}
.layout-bands #front .fe span{font-family:var(--mono);color:var(--ink-40)}
.layout-bands #front .fe small{grid-column:2;color:var(--ink-40);font-size:16.5px}
.layout-bands #front .fe:hover b{text-decoration:underline;text-underline-offset:3px}
.layout-bands #shipped-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.layout-bands .ship{display:block;min-width:0}
.layout-bands .ship .pic{aspect-ratio:3/2;background:var(--ph);overflow:hidden;border:1px solid var(--rule-soft)}
.layout-bands .ship .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands .ship h2{font-size:25.36px;line-height:1.2;margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands .ship .meta{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);margin-top:8px}
.layout-bands .ship:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.layout-bands #latest #posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:2px solid var(--ink)}
.layout-bands #latest .post.row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 8px;margin:0;padding:16px 0 18px;border-bottom:1px solid var(--rule-soft)}
.layout-bands #latest .post.row .gut{font-family:var(--mono);font-size:19.5px;color:var(--accent-text,var(--accent));line-height:1.2}
.layout-bands #latest .post.row h2{margin:0;font-size:25.36px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands #latest .post.row .meta{grid-column:2;margin-top:6px;font-family:var(--mono)}
.layout-bands #latest .load-more{margin-top:32px;border-top:0;font-family:var(--mono);font-size:19.5px}
/* site.pics, the grid (owner 2026-09-16): every signal is a full-width strip of equal cards, four across, tight gaps; picture 3:2 on top,
   a three-line headline, the source and time under it. The front leads with its picture; From Japan and the pairs are cards too. */
.layout-bands.pics #latest #posts{display:block;border-top:0}
.layout-bands.pics #latest #posts:not(:has(.sig-group)){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}
.layout-bands.pics #latest #posts:not(:has(.sig-group)) > .sig-index{grid-column:1/-1}
.layout-bands.pics.signal-page #latest .head :is(h1,.h1){font-size:56px;line-height:1;letter-spacing:-.03em}
.layout-bands.pics.signal-page #latest .head .sub{font:500 16.5px var(--mono);color:var(--ink-40)}
.layout-bands.pics #latest .sig-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px;margin:0 0 34px;border-top:0}
.layout-bands.pics #latest .sig-group h3{grid-column:1/-1;margin:0;padding:10px 0 2px;border-top:3px solid var(--ink)}
.layout-bands.pics #latest .post.row{display:flex;flex-direction:column;margin:0;padding:0;border:0;min-width:0}
.layout-bands.pics #latest .post.row .gut{display:none}
.layout-bands.pics #latest .post.row .pic{aspect-ratio:3/2;margin:0 0 8px;border:0;background:var(--ph);overflow:hidden;flex:none}
.layout-bands.pics #latest .post.row .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.layout-bands.pics #latest .post.row:hover .pic img{transform:scale(1.03)}
.layout-bands.pics #latest .post.row .pic.noimg{display:grid;place-items:center}
.layout-bands.pics #latest .post.row .pic.noimg span{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);padding:6px;text-align:center}
.layout-bands.pics #latest .post.row h2{margin:0;font-size:19.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.2em * 3)}
.layout-bands.pics #latest .post.row .meta{grid-column:auto;margin-top:6px;font-size:14.6px}
.layout-bands.pics #latest .load-more{margin-top:0}
.layout-bands.pics #front .first .pic{aspect-ratio:16/9;background:var(--ph);overflow:hidden;margin:0 0 16px}
.layout-bands.pics #front .first .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands.pics #front .first h2{font-size:44px}
.layout-bands.pics #front .ftwo{gap:0 24px}
.layout-bands.pics #front .fr{grid-template-columns:56px 112px minmax(0,1fr);align-items:start}
.layout-bands.pics #front .fr .pic{grid-column:2;grid-row:1/3;aspect-ratio:4/3;background:var(--ph);overflow:hidden;margin:0}
.layout-bands.pics #front .fr .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands.pics #front .fr .pic.noimg{display:grid;place-items:center}
.layout-bands.pics #front .fr .pic.noimg span{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);padding:6px;text-align:center}
.layout-bands.pics #front .fr h3,.layout-bands.pics #front .fr .m{grid-column:3}
.layout-bands.pics .wv-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}
/* the art director's moves (2026-09-16): numbered strip heads with the family's signal bar, alternating grounds with one dark
   strip at the halfway mark, an orange mark on stories under a day old, a one-line meta at the type floor, no dots on the wall */
.layout-bands.pics #latest #posts{counter-reset:strip}
.layout-bands.pics #latest .sig-group{counter-increment:strip;padding:0 0 26px;margin:0}
.layout-bands.pics #latest .sig-group h3{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) 120px auto;align-items:baseline;gap:0 14px;padding:14px 0 8px;margin:0 0 4px;border-top:3px solid var(--ink);text-transform:none;letter-spacing:0}
.layout-bands.pics #latest .sig-group h3::before{content:counter(strip,decimal-leading-zero);font-family:var(--mono);font-size:44px;line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--ink-40);font-variant-numeric:tabular-nums}
.layout-bands.pics #latest .sig-group h3 button{font-family:var(--serif);font-weight:700;font-size:25.36px;line-height:1;letter-spacing:-.01em;text-transform:none}
.layout-bands.pics #latest .sig-group h3 i{display:block;height:8px;background:var(--accent);width:var(--w,4%);align-self:center}
.layout-bands.pics #latest .sig-group h3 span{font-family:var(--mono);font-size:16.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.layout-bands.pics #latest .sig-group h3 span::after{content:" / wk"}
:root{--strip-alt:#ECE8DF}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--strip-alt:#131211}}
:root[data-theme="dark"]{--strip-alt:#131211}
.layout-bands.pics #latest .sig-group:nth-of-type(even){background:var(--strip-alt);box-shadow:-64px 0 0 var(--strip-alt),24px 0 0 var(--strip-alt)}
.layout-bands.pics #latest .sig-group:nth-of-type(12){background:var(--bar);color:var(--bar-ink);box-shadow:-64px 0 0 var(--bar),24px 0 0 var(--bar)}
.layout-bands.pics #latest .sig-group:nth-of-type(12) h3,.layout-bands.pics #latest .sig-group:nth-of-type(12) h2,.layout-bands.pics #latest .sig-group:nth-of-type(12) h3 button{color:var(--bar-ink)}
.layout-bands.pics #latest .sig-group:nth-of-type(12) h3{border-top-color:var(--bar-ink)}
.layout-bands.pics #latest .sig-group:nth-of-type(12) .meta,.layout-bands.pics #latest .sig-group:nth-of-type(12) h3::before{color:var(--bar-60)}
.layout-bands.pics #latest .post.row.fresh .pic{box-shadow:inset 0 3px 0 var(--accent)}
.layout-bands.pics #latest .post.row.fresh .meta::before{content:"new · ";color:var(--accent);font-weight:500}
.layout-bands.pics #latest .post.row .meta{font-size:14.6px;line-height:1.25;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout-bands.pics #latest .post h2::before{display:none}
.layout-bands.pics #latest .post.row:hover .pic img{transform:none}
/* the usability review (2026-09-16): a sticky family index, strip heads as links, names on the rail, captions on the shipped-today thumbnails, an honest calendar */
.layout-bands.pics #latest .sig-index{position:sticky;top:48px;z-index:5;display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 0;margin:0 0 6px;background:var(--bg);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:14.6px;letter-spacing:.04em;text-transform:uppercase}
.layout-bands.pics #latest .sig-index a{color:var(--ink-40);white-space:nowrap;text-decoration:none}
.layout-bands.pics #latest .sig-index a b{color:var(--accent);font-weight:500;margin-left:4px}
.layout-bands.pics #latest .sig-index a[aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px var(--accent)}
.layout-bands.pics #latest .sig-group{scroll-margin-top:170px}
.layout-bands.pics #latest .sig-group h3 a.fam{font-family:var(--serif);font-weight:700;font-size:25.36px;line-height:1;letter-spacing:-.01em;color:inherit;text-decoration:none}
.layout-bands.pics #latest .sig-group h3 a.fam:hover{color:var(--accent)}
.layout-bands.pics #latest .sig-group h3 a.fam::after{content:" →";color:var(--ink-40);font-weight:500}
.layout-bands.pics .band > .rail span{display:block;writing-mode:vertical-rl;transform:rotate(180deg);margin-top:12px;font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);font-weight:500}
.layout-bands.pics #front .fmini a{position:relative}
.layout-bands.pics #front .fmini a b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--serif);font-weight:700;font-size:14.6px;line-height:1.15;margin-top:4px;color:var(--ink)}
.layout-bands.pics #front .fmini img{filter:none}
.layout-bands.pics #japan #all-rg{display:none}
.layout-bands.pics #japan #onview{display:block}
.layout-bands.pics #events{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.layout-bands.pics #pairs .pair .two .thumb .pic{display:block;aspect-ratio:3/2;background:var(--ph);overflow:hidden;margin:0 0 8px}
.layout-bands.pics #pairs .pair .two .thumb .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands.pics #pairs #pairs-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 40px}
@media(max-width:1200px){.layout-bands.pics #latest .sig-group,.layout-bands.pics #latest #posts:not(:has(.sig-group)){grid-template-columns:repeat(3,minmax(0,1fr))}.layout-bands.pics .wv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.layout-bands.pics #latest .sig-group{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-bands.pics .wv-grid{grid-template-columns:1fr 1fr}}
/* site.strip_cols: 5 (Accept All, 2026-09-16): five cards across on wide screens, so the squares stay small; tablets and phones keep 3 / 2 */
@media(min-width:1201px){.layout-bands.pics.cols-5 #latest .sig-group,.layout-bands.pics.cols-5 #latest #posts:not(:has(.sig-group)),.layout-bands.pics.cols-5 .wv-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.layout-bands.pics.cols-5 #latest .post.row h2{font-size:17.5px}
.layout-bands.cols-5 #fromjapan-list,.layout-bands.cols-5 .from-list,.layout-bands.cols-5 #japan .events{grid-template-columns:repeat(5,minmax(0,1fr))}   /* bands 05 and 06 follow the same count */
.layout-bands.pics.cols-5 #pairs #pairs-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 10px}   /* band 04: five pairs across, the two readings stacked in one column */
.layout-bands.pics.cols-5 #pairs .pair .two{grid-template-columns:minmax(0,1fr);gap:12px 0}
.layout-bands.pics.cols-5 #pairs .pair .two:before{display:none}
.layout-bands.pics.cols-5 #pairs .pair .two .thumb h2{font-size:17.5px}}
.layout-bands.pics #fromjapan-list a,.layout-bands.pics .from-list a{padding:0 0 22px;border-bottom:0}
.layout-bands.pics #fromjapan-list .pic,.layout-bands.pics .from-list .pic{aspect-ratio:3/2;background:var(--ph);overflow:hidden;margin:0 0 10px}
.layout-bands.pics #fromjapan-list .pic img,.layout-bands.pics .from-list .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands .band.accent-band{background:var(--accent);color:var(--accent-ink);border-bottom:0}
.layout-bands .band.accent-band > .rail{color:var(--accent-ink);opacity:.7}
.layout-bands .band.accent-band > .rail{padding-top:18px}
.layout-bands #radar{padding:14px 24px 16px 0}
.layout-bands #radar .head{margin:0 0 4px;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.layout-bands #radar .head :is(h1,.h1){font-size:25.36px;line-height:1.2}
.layout-bands #radar .head .sub{margin:0;font-family:var(--mono);font-size:16.5px}
.layout-bands #radar #trends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.layout-bands #radar .trend{grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;padding:6px 0 7px;line-height:1.1;border-top-width:1px}
.layout-bands #radar .trend .spark{display:none}
.layout-bands #radar .trends-more{margin-top:4px;font-size:16.5px;font-family:var(--mono)}
.layout-bands #discover .thumbs{grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 24px}
.layout-bands #discover .thumb .pic{aspect-ratio:1;filter:grayscale(1) contrast(1.08);transition:filter var(--t-fast)}
.layout-bands #discover .thumb:hover .pic{filter:none}
.layout-bands #discover .thumb h2{font-size:19.5px}
.layout-bands #fromjapan-list,.layout-bands .from-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;border-top:2px solid var(--ink)}
.layout-bands #fromjapan-list a,.layout-bands .from-list a{display:block;padding:16px 0 18px;border-bottom:1px solid var(--rule-soft);min-width:0}
.layout-bands #fromjapan-list h2,.layout-bands .from-list h2{font-size:25.36px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands #fromjapan-list .jp{display:block;font-size:19.5px;line-height:1.35;color:var(--ink-40);margin-top:6px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands #fromjapan-list .meta,.layout-bands .from-list .meta{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);margin-top:6px}
.layout-bands #japan .events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.layout-bands #japan .events .ev{display:block;border-top:1px solid var(--rule-soft) !important;padding:14px 0 16px !important}
.layout-bands #japan .events .ev .d{display:block;font-family:var(--mono)}
.layout-bands #japan .events .ev h2{margin-top:4px}
.layout-bands #japan .events .ev .pill{display:inline-block;margin-top:8px}
.layout-bands #japan .events .ev .v{display:block;margin-top:6px}
.layout-bands #japan #jp-web.thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
.layout-bands #japan #wire,.layout-bands #japan #jp-wire,.layout-bands #japan #jptrends,.layout-bands #japan #jp-trends{display:none}
.layout-bands #japan #jp-web .thumb:nth-child(n+5){display:none}
.layout-bands #pairs #pairs-list{display:block}
.layout-bands #pairs .pair{margin:0;padding:14px 0 16px;border-top:1px solid var(--rule-soft)}
.layout-bands #pairs .pair:first-child{border-top:0;padding-top:0}
.layout-bands #pairs .pair .two{gap:0 40px;position:relative}
.layout-bands #pairs .pair .two:before{content:"⇄";position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:16.5px;color:var(--ink-40)}
.layout-bands #pairs .pair .two .thumb .pic{display:none}
.layout-bands .sound{padding:40px 24px 48px 0 !important}
.layout-bands .sound .head{padding:0 0 8px}
.layout-bands .sound .moods{padding:0}
.layout-bands #colours .bar-strip{height:48px}
.layout-bands #japan .rg{margin-bottom:14px}
.layout-bands #japan #jpweb,.layout-bands #japan #jp-web{display:none}
.layout-bands #japan .events{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.layout-bands #japan .head{margin-bottom:14px}
.layout-bands #pairs #pairs-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.layout-bands #pairs .pair{border-top:1px solid var(--rule-soft) !important;padding:12px 0 14px !important}
.layout-bands .band.pulse-band{background:var(--bar);color:var(--bar-ink);border-bottom:2px solid var(--ink)}
.layout-bands .band.pulse-band > .rail{padding-top:18px;color:var(--bar-ink)}
.layout-bands.pics .band.pulse-band > .rail span{color:var(--bar-ink);opacity:.6}   /* the band is dark on both themes; ink-40 vanished on it */
.layout-bands #pulse{padding:0 24px 0 0}
.layout-bands .tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid rgba(var(--bg-rgb),.18)}
.layout-bands .tile{display:flex;flex-direction:column;gap:4px;min-height:200px;padding:16px 16px 14px;border-left:1px solid rgba(var(--bg-rgb),.22);min-width:0;color:var(--bar-ink);position:relative;transition:background var(--t-fast),color var(--t-fast)}
.layout-bands .tile:first-child{border-left:0}
.layout-bands .tile .k{font-family:var(--mono);font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--bar-ink);font-weight:600}
.layout-bands .tile .n{font-family:var(--mono);font-size:44px;line-height:1;font-weight:500;letter-spacing:-.03em;color:var(--bar-ink);font-variant-numeric:tabular-nums;margin-top:6px}
.layout-bands .tile .n:before{content:"";display:block;width:12px;height:12px;background:var(--accent);margin-bottom:8px}
.layout-bands .tile .n.date{font-size:34px}
.layout-bands .tile ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.layout-bands .tile li{font-size:16.5px;line-height:1.25;display:flex;flex-direction:column;min-width:0}
.layout-bands .tile li b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bar-ink)}
.layout-bands .tile li span{font-family:var(--mono);font-size:14.6px;color:var(--bar-60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layout-bands .tile .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:14.6px;color:var(--bar-accent,var(--accent-text,var(--accent)))}
.layout-bands .tile:hover{background:var(--bar-ink);color:var(--bar)}
.layout-bands .tile:hover .k,.layout-bands .tile:hover .n,.layout-bands .tile:hover li b{color:var(--bar)}
.layout-bands .tile:hover li span{color:rgba(var(--ink-rgb),.6)}
.layout-bands .tile:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.layout-bands .tile.watch{background:var(--accent);color:var(--accent-ink);padding:0;justify-content:flex-start;gap:0}
.layout-bands .tile.watch .pic{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--accent-ink)}
.layout-bands .tile.watch .ov{display:flex;flex-direction:column;gap:4px;padding:12px 16px 14px;color:var(--accent-ink);min-height:0;flex:1}
.layout-bands .tile.watch .ov .k{color:var(--accent-ink)}
.layout-bands .tile.watch .ov b{font-size:19.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands .tile.watch .ov span:last-child{font-family:var(--mono);font-size:14.6px;color:var(--accent-ink);opacity:.8;margin-top:auto;padding-top:6px}
.layout-bands .tile.watch:hover{background:var(--accent-ink);color:var(--accent-text,var(--accent))}
.layout-bands .tile.watch:hover .ov,.layout-bands .tile.watch:hover .ov .k,.layout-bands .tile.watch:hover .ov span:last-child{color:var(--accent-text,var(--accent))}
.layout-bands #watch .head{margin-bottom:16px}
.single.left.pulse-page{max-width:none;padding-right:24px}
.layout-bands .sound .moods{display:block}
.layout-bands .sound .mood-card{display:block;border-top:1px solid var(--rule-soft);padding:0;margin-left:-64px;margin-right:0}
.layout-bands .sound .mood-card .one-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:0 22px;align-items:center;padding:8px 32px 8px 72px;border-left:0;margin:0;cursor:pointer;min-height:48px}
.layout-bands .sound .mood-card .one-head p{grid-column:3;white-space:nowrap}
.layout-bands .sound .eq{grid-column:4}
.layout-bands .sound .mood-card .one-head:after{grid-column:5 !important;grid-row:1}
.layout-bands .sound .mood-card .one-head > *{grid-row:1}
.layout-bands .sound .mood-card .one-head .mood{margin:0}
.layout-bands .sound .mood-card .one-head h2{margin:0;font-size:25.36px;line-height:1.15}
.layout-bands .sound .mood-card .one-head p{display:block;margin:0;font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.layout-bands .sound .one .one-head h2,.layout-bands .sound .mood-card .one-head h2,.layout-bands .sound .one .one-head .mood,.layout-bands .sound .mood-card .one-head .mood{color:var(--ink)}   /* 2026-09-17: the slat palette's light text was invisible on a light page */
.layout-bands .sound .mood-card .one-head:after{content:"▶";font-family:var(--mono);color:var(--accent-text,var(--accent));grid-column:3}
.layout-bands .sound .mood-card.open .one-head:after{content:"■"}
.layout-bands .sound .mood-card .one-embed,.layout-bands .sound .mood-card .one-open{display:none}
.layout-bands .sound .mood-card.open .one-embed{display:block;padding:0 0 16px}
.layout-bands .sound .mood-card.open .one-embed iframe{height:80px}

.layout-bands .sound .mood-card.open .one-head:after{content:"■"}
.layout-bands .sound .eq{display:inline-flex;gap:3px;align-items:flex-end;height:20px}
.layout-bands .sound .eq i{display:block;width:4px;height:6px;background:var(--ink-40)}
.layout-bands .sound .mood-card.open .eq i{background:var(--accent);animation:aa-eq .9s ease-in-out infinite alternate}
.layout-bands .sound .mood-card.open .eq i:nth-child(2){animation-delay:.15s}.layout-bands .sound .mood-card.open .eq i:nth-child(3){animation-delay:.3s}.layout-bands .sound .mood-card.open .eq i:nth-child(4){animation-delay:.45s}
@keyframes aa-eq{from{height:4px}to{height:20px}}
.layout-bands #japan .head .sub,.layout-bands #japan .rg,.layout-bands #japan #onview{display:none}
.layout-bands #japan .head{margin-bottom:8px}
.layout-bands #discover .thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:2px solid var(--ink)}
.layout-bands #discover .tool{display:block;padding:14px 0 15px;border-bottom:1px solid var(--rule-soft);min-width:0;color:var(--ink)}
.layout-bands #discover .tool b{display:block;font-size:25.36px;line-height:1.2;font-weight:600;overflow-wrap:anywhere}
.layout-bands #discover .tool .d{display:block;margin-top:6px;font-size:19.5px;line-height:1.35;color:var(--ink-40);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.layout-bands #discover .tool .m{display:block;margin-top:6px;font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.layout-bands #discover .tool:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.layout-bands .board .track span.hot{color:var(--board-mq-ink,var(--ink))}   /* the strip has its own ground now; --ink vanished on it */
:root[data-theme="dark"] .layout-bands .board .track span.hot{color:var(--board-mq-ink,#fff)}
.layout-bands .sound .mood-card{position:relative;overflow:hidden}
.layout-bands .sound .mood-card:before{content:"";position:absolute;inset:0;background:var(--accent);opacity:0;transform:translateX(-6%);transition:opacity 1.4s ease,transform 1.4s ease;pointer-events:none}
.layout-bands .sound .mood-card:hover:before{opacity:1;transform:translateX(0);transition:opacity .45s ease,transform .45s ease}
.layout-bands .sound .mood-card .one-head{position:relative;z-index:1}
.layout-bands .sound .mood-card .one-head h2,.layout-bands .sound .mood-card .one-head p,.layout-bands .sound .mood-card .one-head .mood,.layout-bands .sound .mood-card .one-head:after{transition:color 1.4s ease,border-color 1.4s ease,transform 1.4s ease}
.layout-bands .sound .mood-card:hover .one-head h2,.layout-bands .sound .mood-card:hover .one-head p,.layout-bands .sound .mood-card:hover .one-head .mood,.layout-bands .sound .mood-card:hover .one-head:after{color:var(--accent-ink);border-color:var(--accent-ink);transition:color .45s ease,border-color .45s ease,transform .45s ease}
.layout-bands .sound .mood-card:hover .one-head h2{transform:translateX(8px)}
.layout-bands .sound .mood-card:hover .eq i{animation:aa-eq 1.6s ease-in-out infinite alternate;background:var(--accent-ink)}
.layout-bands .sound .mood-card:hover .eq i:nth-child(2){animation-delay:.2s}.layout-bands .sound .mood-card:hover .eq i:nth-child(3){animation-delay:.4s}.layout-bands .sound .mood-card:hover .eq i:nth-child(4){animation-delay:.6s}
.layout-bands .sound .mood-card.open{border-left:6px solid var(--accent)}
.layout-bands .sound .mood-card.open .one-head{padding-left:66px}
.layout-bands .sound .mood-card.open .one-embed{padding:0 32px 14px 66px}
.layout-bands .sound .mood-card.open .one-embed{position:relative;z-index:1;padding:0 0 18px}
.layout-bands .sound .mood-card.open .one-embed iframe{height:80px;border:0;background:transparent}
.layout-bands .sound .mood-card.open:hover:before{opacity:0}
.layout-bands .sound .mood-card.open:hover .one-head h2,.layout-bands .sound .mood-card.open:hover .one-head p,.layout-bands .sound .mood-card.open:hover .one-head .mood,.layout-bands .sound .mood-card.open:hover .one-head:after{color:var(--ink);border-color:var(--ink)}
.layout-bands .sound .mood-card.open:hover .eq i{background:var(--accent)}
@media(prefers-reduced-motion:reduce){.layout-bands .sound .mood-card:before,.layout-bands .sound .mood-card .one-head h2,.layout-bands .sound .mood-card .one-head:after{transition:none}.layout-bands .sound .mood-card:hover .eq i{animation:none}}
.layout-bands .sound .foot{display:none}
.layout-bands .sound .mood-card .one-head h2{font-size:25.36px}
.layout-bands #colophon{padding:32px 24px 40px 0}
.layout-bands #colophon > section{padding:0;border:0}
.layout-bands #colophon #about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 56px;align-items:start}
.layout-bands #colophon #about .head{display:none}
.layout-bands #colophon #about .about-text{grid-column:1}
.layout-bands #colophon #about .about-text h2{font-size:25.36px;line-height:1.25;margin:0 0 8px}
.layout-bands #colophon #about .about-text p{font-size:19.5px}
.layout-bands #colophon #about .about-text p:nth-of-type(n+2){display:none}
.layout-bands #colophon #about .about-text .read-on,.layout-bands #colophon #about .about-text button{display:none}
.layout-bands #colophon #about footer{grid-column:2;margin:0}
.layout-bands #colophon #sources{margin-top:28px;border-top:1px solid var(--rule-soft);padding-top:14px}
.layout-bands #colophon #sources .head{display:flex;gap:14px;align-items:baseline;margin:0 0 8px}
.layout-bands #colophon #sources .head :is(h1,.h1){font-family:var(--mono);font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);font-weight:500}
.layout-bands #colophon #sources .head .sub{display:none}
.layout-bands #colophon #sources .list{columns:auto;display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.layout-bands #colophon #sources .list a{color:var(--ink-40)}
.layout-bands #colophon #sources .list a:hover{color:var(--ink)}
.layout-bands #about .about-text p{max-width:none}
.layout-bands .head .sub .jp,.layout-bands .subhead .jp,.layout-bands .head .jp{font-family:var(--mono);font-size:16.5px;font-weight:500;color:var(--ink-40);letter-spacing:0}
.layout-bands h2 [lang="ja"],.layout-bands h2[lang="ja"]{font-weight:500;letter-spacing:0}
}
@media(max-width:960px){.layout-bands.pics #latest #posts:not(:has(.sig-group)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}.layout-bands.pics #latest #posts:not(:has(.sig-group)) > .sig-index{grid-column:1/-1}.layout-bands.pics.signal-page #latest .head :is(h1,.h1){font-size:36px}}   /* owner 2026-09-16 (this sat inside @media(min-width:961px) until 2026-09-17, so it never matched): a filtered list (a family button, a source, a search) and the family pages were one column of giant pictures */

/* ---------- the strips on a phone (usability review 2026-09-16): until now the card grid lived only above 960px, so a phone got
   24 unstyled headings and four hundred full-width pictures. Two cards a row, the family index as a sticky scrolling line,
   six cards a strip with the rest behind the same '+N'. ---------- */
@media(max-width:960px){
.layout-bands.pics #latest{padding:0 16px}
.layout-bands.pics #latest .sig-index{position:sticky;top:48px;z-index:5;display:flex;gap:16px;overflow-x:auto;white-space:nowrap;padding:10px 16px;margin:0 -16px 6px;background:var(--bg);font-family:var(--mono);font-size:14.6px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;scrollbar-width:none;border-bottom:1px solid var(--rule)}
.layout-bands.pics #latest .sig-index::-webkit-scrollbar{display:none}
.layout-bands.pics #latest .sig-index a{color:var(--ink-40);text-decoration:none;flex:none}
.layout-bands.pics #latest .sig-index a b{color:var(--accent-text,var(--accent));font-weight:500;margin-left:4px}
.layout-bands.pics #latest .sig-index a[aria-current="true"]{color:var(--ink)}.layout-bands.pics.index-line #latest .sig-index{padding:0 16px}   /* the only block on the phone home with no side gutter */
.layout-bands.pics #latest .sig-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;margin:0 0 28px;scroll-margin-top:100px}
.layout-bands.pics #latest .sig-group h3{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;margin:0;padding:12px 0 2px;border-top:3px solid var(--ink);font-family:var(--serif);font-weight:700;font-size:25.36px;line-height:1.05;letter-spacing:-.01em}
.layout-bands.pics #latest .sig-group h3 a.fam,.layout-bands.pics #latest .sig-group h3 span.fam{color:inherit;text-decoration:none;flex:1 1 auto;min-width:0}
.layout-bands.pics #latest .sig-group h3 i{display:none}
.layout-bands.pics #latest .sig-group h3 > span:not(.fam){font-family:var(--mono);font-size:14.6px;font-weight:500;color:var(--accent-text,var(--accent))}
.layout-bands.pics #latest .sig-group h3 button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;text-align:left}
.layout-bands.pics #latest .sig-group h3 .unfold{font:500 14.6px var(--mono);color:var(--accent-text,var(--accent));margin-left:auto;white-space:nowrap}
.layout-bands.pics #latest .post.row{display:flex;flex-direction:column;margin:0;padding:0;border:0;min-width:0}
.layout-bands.pics #latest .post.row .gut{display:none}
.layout-bands.pics #latest .post.row .pic{aspect-ratio:3/2;margin:0 0 8px;border:0;background:var(--ph);overflow:hidden;flex:none;width:100%}
.layout-bands.pics #latest .post.row .pic img{width:100%;height:100%;object-fit:cover;display:block}
.layout-bands.pics #latest .post.row .pic.noimg{display:grid;place-items:center}
.layout-bands.pics #latest .post.row .pic.noimg span{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);padding:6px;text-align:center}
.layout-bands.pics #latest .post.row h2{margin:0;font-size:17px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.2em * 3)}
.layout-bands.pics #latest .post.row h2::before{display:none}
.layout-bands.pics #latest .post.row .meta{margin-top:6px;font-family:var(--mono);font-size:14.6px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-40)}
.layout-bands.pics #latest .post.row .meta::before{content:none}
.layout-bands.pics.strip-fold #latest .sig-group:not(.open) .post.row:nth-child(n+8){display:none}
.layout-bands.pics #latest #posts:has(.sig-group) ~ .load-more{display:none}   /* phones: hidden only while the strips are shown; a search or a signal filter keeps its Show more */
}
/* pulse catalogue pages, watch grid and about page: every width, not only the bands desktop */
.wv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 20px}
.wv{display:block;min-width:0;color:var(--ink)}
.wv .wv-pic{display:block;aspect-ratio:16/9;background:var(--ph);overflow:hidden;position:relative}
.wv .wv-pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter var(--t-fast)}
.wv:hover .wv-pic img{filter:none}
.wv .wv-pic:after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:19.5px;color:#fff;background:rgba(0,0,0,.6);width:44px;height:44px;line-height:44px;text-align:center}
.wv .wv-pic iframe{width:100%;height:100%;border:0;display:block}
.wv .wv-live{position:absolute;left:8px;top:8px;z-index:1;font:700 11.5px/1 var(--mono,monospace);letter-spacing:.12em;font-style:normal;color:#fff;background:#D93025;padding:5px 7px 4px;border-radius:2px}.wv .wv-pic:has(.wv-live) img{filter:none}.wv .wv-pic:has(iframe) .wv-live{display:none}
.wv .wv-pic:has(iframe):after{display:none}
.wv b{display:block;margin-top:10px;font-size:19.5px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wv .pl-org{display:block;margin-top:4px;font-family:var(--mono);font-size:14.6px;color:var(--ink-40)}
.pulse-page .pl-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.pulse-page .pl-filter button{font-family:var(--mono);font-size:14.6px;padding:6px 12px;border:1px solid var(--rule);background:none;color:var(--ink);cursor:pointer;letter-spacing:.04em;text-transform:uppercase}
.pulse-page .pl-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pulse-page .pl-list{border-top:2px solid var(--ink)}
.pulse-page .pl-row{display:grid;grid-template-columns:96px minmax(0,1.2fr) minmax(0,2fr) auto auto auto;gap:0 18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule-soft);color:var(--ink);min-width:0}
.pulse-page .pl-row[hidden]{display:none}
.pulse-page .pl-row b{font-size:25.36px;line-height:1.2;overflow-wrap:anywhere}
.pulse-page .pl-row .pl-date,.pulse-page .pl-row .pl-num,.pulse-page .pl-row .pl-task,.pulse-page .pl-row .pl-try{font-family:var(--mono);font-size:14.6px;color:var(--ink-40);white-space:nowrap}
.pulse-page .pl-row .pl-org{font-size:16.5px;color:var(--ink-40);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pulse-page .pl-row .pl-org i,.pulse-page .pl-row .pl-for i{font-style:normal;font-family:var(--mono);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);padding:2px 6px;margin-right:4px;color:var(--ink)}
.pulse-page .pl-row .pl-try,.pulse-page .pl-row a .pl-try{color:var(--accent-text,var(--accent))}
.pulse-page .pl-row > a{color:var(--ink);min-width:0}
.pulse-page .pl-row > a:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pulse-page .pl-row:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media(min-width:961px){   /* two classes beat the one-column phone rule below, so /mcp/ and /skills/ kept the desk grid on a phone and squeezed a description into 53px; /models/ had no such override and was fine */
.pulse-page.pulse-mcp .pl-row{grid-template-columns:96px minmax(0,1fr) minmax(0,2fr) auto}
.pulse-page.pulse-skills .pl-row{grid-template-columns:96px minmax(0,1fr) minmax(0,2fr) auto auto}
}
.pulse-page .summary{max-width:70ch}
.pulse-page.pulse-watch .wv-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.pulse-page .pl-filter button small{font-weight:400;opacity:.6;margin-left:4px}
.single.left .about-page h2{font-size:40px;line-height:1.1;max-width:26ch}.single.left .about-page p{font-size:19.5px;line-height:1.45;max-width:60ch;margin-top:16px}
@media(max-width:960px){.wv-grid,.pulse-page.pulse-watch .wv-grid{grid-template-columns:1fr 1fr}.pulse-page .pl-row{grid-template-columns:1fr;gap:2px}.pulse-page .pl-row .pl-date{order:9}}

/* ---------- layout: marquee — dark screening room (SITE.layout === "marquee") ---------- */
.layout-marquee .colhead,.layout-marquee .tabs{display:none !important}
.marquee{padding-top:48px}
.marquee > section,.marquee .two > * > section{padding:32px 16px;border-bottom:1px solid var(--rule)}
.marquee .two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);border-bottom:1px solid var(--rule)}
.marquee .two > aside{border-left:1px solid var(--rule)}
.marquee .two > * > section:last-child{border-bottom:0}
.marquee #lead{position:relative;min-height:72vh;display:grid;align-content:end;padding:0 16px 48px;overflow:hidden;border-bottom:1px solid var(--rule)}
.marquee #lead .lead-thumbs{position:absolute;inset:0;margin:0;display:block;z-index:0}
.marquee #lead .lead-thumbs .thumb{height:100%;display:block}
.marquee #lead .lead-thumbs .thumb .pic{aspect-ratio:auto;height:100%}
.marquee #lead .lead-thumbs .thumb .pic img{filter:brightness(.72) saturate(.9);transform:scale(1.02);transition:transform 12s linear}
.marquee #lead:hover .lead-thumbs .thumb .pic img{transform:scale(1.08)}
.marquee #lead .lead-thumbs .thumb h2{position:absolute;top:72px;right:16px;margin:0;font-size:14.6px;letter-spacing:.02em;color:rgba(255,255,255,.7);text-align:right;max-width:40ch;text-shadow:0 1px 8px rgba(0,0,0,.6);font-family:var(--sans)}
.marquee #lead .lead-thumbs .thumb:nth-child(2){display:none}
.marquee #lead .lead-thumbs .thumb.failed{display:none}
.marquee #lead .lead-thumbs .thumb.failed + .thumb{display:block}
.marquee #lead .lead-thumbs .thumb .pic img[alt]{color:transparent}
.marquee #lead .lead-thumbs:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%)}
.marquee #lead .head,.marquee #lead .note,.marquee #lead .more,.marquee #lead .lead-note{position:relative;z-index:1;color:#fff}
.marquee #lead .head{margin-bottom:12px;max-width:1100px}
.marquee #lead .head :is(h1,.h1){font-size:88px;line-height:.98;letter-spacing:-.01em}
.marquee #lead .head .sub{color:rgba(255,255,255,.65)}
.marquee #lead .note{font-size:25.36px;line-height:1.3;max-width:62ch}
.marquee #lead .note .grey{color:rgba(255,255,255,.55)}
.marquee #lead .more{color:rgba(255,255,255,.65)}.marquee #lead .more:hover{color:#fff}
.marquee #lead .hanko{box-shadow:0 0 0 6px rgba(0,0,0,.35)}
.marquee #posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.marquee #posts .post{margin:0;position:relative;background:transparent}
/* A cinema feed sends press stills, not posters: 49 of 51 pictures measured were landscape, median 16:9,
   and the old 2:3 frame cut away three fifths of the width of every one of them - logos ended mid-word.
   The frame now follows the material and the headline sits under it at full contrast.
   site.poster_cards brings the tall poster wall back. */
.marquee #posts .post .pic img{transition:transform var(--t-slow) var(--ease)}
.marquee #posts .post:hover .pic img{transform:scale(1.05)}
.marquee #posts .post h2{margin:0;padding:12px 0 0;font-size:19.5px;line-height:1.2}
.marquee #posts .post h2 .grey,.marquee #posts .post .sum{display:none}
.marquee #posts .post h2 .pill{display:inline-block;margin:0 6px 8px 0;top:0}
.marquee #posts .post h2 .pill:last-of-type::after{content:"\A";white-space:pre}
.marquee #posts .post .meta{margin:8px 0 0;color:var(--ink-40);font-size:14.6px}
.poster-cards .marquee #posts .post{overflow:hidden;background:var(--ph)}
.poster-cards .marquee #posts .post .pic{aspect-ratio:2/3}
.poster-cards .marquee #posts .post h2{position:absolute;left:0;right:0;bottom:0;padding:72px 14px 14px;line-height:1.15;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.92) 100%)}
.poster-cards .marquee #posts .post h2 .pill.jpill{color:#fff;border-color:rgba(255,255,255,.7)}
.poster-cards .marquee #posts .post .meta{position:absolute;top:10px;left:12px;margin:0;color:rgba(255,255,255,.75);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.marquee #posts .post:hover h2{text-decoration:none}
.marquee #posts .post .pic.noimg span{font-size:19.5px}
.marquee .load-more{margin-top:24px}
.marquee .thumbs{grid-template-columns:1fr 1fr}
.marquee #about .about-text{columns:2;column-gap:48px;max-width:none}
.marquee #about .about-text h2{column-span:all;max-width:32ch}
.marquee #about .about-text p{max-width:none}
.marquee .side .head :is(h1,.h1){font-size:34px}
@media(max-width:1200px){.marquee #posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){
  .marquee .two{display:block}.marquee .two > aside{border-left:0}
  .marquee #lead{min-height:60vh}.marquee #lead .head :is(h1,.h1){font-size:44px}.marquee #lead .note{font-size:19.5px}
  .marquee #posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .marquee #posts .post h2{font-size:16.5px;padding:48px 10px 10px}
  .marquee #about .about-text{columns:1}
}

/* marquee v2: bar with section nav, overlay menu, hero strip, colophon, board */
.layout-marquee .bar{height:56px;gap:20px;border-bottom:1px solid rgba(255,255,255,.12)}
.layout-marquee .bar .logo .logo-img{height:26px;top:1px}
.layout-marquee .bar .logo .jp{font-size:15px}
.layout-marquee .topnav{display:flex;gap:22px;margin-left:8px;padding-left:24px;border-left:1px solid rgba(255,255,255,.16);font-size:16.5px;letter-spacing:.01em;color:var(--bar-60);white-space:nowrap}
.layout-marquee .topnav a{padding:4px 0;border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.layout-marquee .topnav a:hover{color:var(--bar-ink);border-color:var(--accent-text,var(--accent))}
.layout-marquee .menu .topnav{display:block;margin:0;padding:0;border:0;white-space:normal;font-size:inherit;letter-spacing:0;color:inherit}
.layout-marquee .menu .topnav a{display:block;padding:0;border:0}
.layout-marquee .menu,.layout-marquee .scrim{top:56px}
.layout-marquee .scrim{inset:56px 0 0;background:rgba(0,0,0,.55)}
.layout-marquee .menu{background:rgba(11,11,12,.97);color:#fff;border-top:2px solid var(--accent);max-height:calc(100vh - 56px);backdrop-filter:blur(12px)}
.layout-marquee .menu .grid > div{padding:0 24px 48px;border-left-color:rgba(255,255,255,.14)}
.layout-marquee .menu .ch{height:auto;padding:28px 24px 14px;margin:0 -24px 20px;font-family:var(--serif);font-size:40px;line-height:1;border-bottom:1px solid rgba(255,255,255,.2);color:#fff}
.layout-marquee .menu a,.layout-marquee .menu button{font-family:var(--serif);font-size:30px;line-height:1.3;color:#fff}
.layout-marquee .menu a:hover,.layout-marquee .menu button:hover{color:var(--accent-text,var(--accent));text-decoration:none}
.layout-marquee .menu button[aria-pressed="true"]{color:var(--accent-text,var(--accent));text-decoration:none}
.layout-marquee .menu .small{font-family:var(--sans);font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
.layout-marquee .menu .search{border-bottom-color:rgba(255,255,255,.3)}
.layout-marquee .menu .search input{color:#fff;font-family:var(--serif);font-size:30px}
.layout-marquee .menu .search input::placeholder{color:rgba(255,255,255,.4)}
.layout-marquee .menu .search button{color:#fff;font-family:var(--sans)}
.layout-marquee .menu #menu-signals button{font-family:var(--sans);font-size:16.5px;display:inline-block;margin:0 10px 8px 0;border:1px solid rgba(255,255,255,.3);border-radius:9999px;padding:6px 12px;line-height:1}
.layout-marquee .menu #menu-signals button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-text,var(--accent));color:#fff}
.marquee{padding-top:56px}
.marquee #lead{min-height:0;padding:34vh 16px 28px}
.marquee #lead .head :is(h1,.h1){font-size:72px}
.marquee #lead .strip{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.22)}
.marquee #lead .strip .thumb .pic{aspect-ratio:16/9;border-radius:4px}
.marquee #lead .strip .thumb h2{font-size:17.5px;line-height:1.25;margin-top:8px;color:#fff;font-family:var(--sans);font-weight:500}
.marquee #lead .strip .thumb h2 .grey{color:rgba(255,255,255,.55)}
.marquee #lead .strip .thumb h2 .pill{display:none}
.marquee #lead .strip .thumb.failed{display:none}
.marquee #lead .more{margin-top:14px}
.marquee .two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.marquee #jp-wire > *:nth-child(n+7){display:none}
.marquee #colours{border-bottom:0}
.marquee .colophon{border-top:1px solid var(--rule);padding:48px 16px 40px}
.marquee .colophon > section{padding:0;border:0}
.marquee .colophon #about .head{display:none}
.marquee .colophon #about .about-text{columns:3;column-gap:40px;max-width:none}
.marquee .colophon #about .about-text h2{column-span:all;max-width:34ch;font-size:40px;line-height:1.05;margin:0 0 28px}
.marquee .colophon #about .about-text p{font-size:18px;line-height:1.45;color:var(--ink-40);max-width:none;margin:0 0 12px;break-inside:avoid}
.marquee .colophon #about footer{margin:20px 0 0 !important;font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)}
.marquee .colophon #sources{margin-top:40px;padding-top:28px;border-top:1px solid var(--rule-soft)}
.marquee .colophon #sources .head :is(h1,.h1){font-size:14.6px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);color:var(--ink-40)}
.marquee .colophon #sources .head .sub{display:none}
.marquee .colophon .list.sources{gap:8px}
.marquee .colophon .list.sources a{display:inline-block;border:1px solid rgba(var(--ink-rgb),.22);border-radius:9999px;padding:8px 14px;line-height:1;color:var(--ink);font-size:16.5px}
.marquee .colophon .list.sources a .grey{font-size:14.6px}
.marquee .colophon .list.sources a .grey{color:var(--accent-text,var(--accent))}
.layout-marquee .board{border-top:2px solid var(--accent);background:#0B0B0C}
.layout-marquee .board .mq{background:#0B0B0C;color:#fff;height:88px;border-bottom:1px solid rgba(255,255,255,.14)}
.layout-marquee .board .track span{font-size:44px;font-family:var(--serif);letter-spacing:0}
.layout-marquee .board .track span i{color:#fff;font-family:var(--sans);font-size:15px;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;margin-right:18px}
.layout-marquee .board .track span.dim{color:rgba(255,255,255,.4);font-family:var(--sans);font-size:15px;letter-spacing:.1em}
.layout-marquee .board .links{grid-template-columns:1.4fr 1fr 1fr;font-size:19.5px}
.layout-marquee .board .links > div{padding:40px 24px 56px;border-left-color:rgba(255,255,255,.14)}
.layout-marquee .board .links > div > b{font-family:var(--sans);font-size:14.6px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px}
.layout-marquee .board .links > div:first-child > b{display:flex;align-items:baseline;gap:10px;text-transform:none;letter-spacing:0;margin-bottom:14px}
.layout-marquee .board .links > div:first-child > b .logo-img{height:34px}
.layout-marquee .board .links > div:first-child > b .jp{font-family:var(--serif);font-size:20px;color:rgba(255,255,255,.6)}
.layout-marquee .board .links > div:first-child > span[data-t="tagline"]{font-family:var(--serif);font-size:26px;line-height:1.2;color:#fff;max-width:22ch}
.layout-marquee .board .links a{font-family:var(--serif);font-size:24px;line-height:1.3}
.layout-marquee .board .links a:hover{color:var(--accent-text,var(--accent))}
.layout-marquee .board #board-when{font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:auto}
@media(max-width:960px){
  .layout-marquee .bar{height:48px}.layout-marquee .bar .logo .logo-img{height:20px}
  .layout-marquee .menu,.layout-marquee .scrim{top:48px}.layout-marquee .scrim{inset:48px 0 0}.layout-marquee .menu{max-height:calc(100vh - 48px)}
  .layout-marquee .menu .ch{font-size:30px}.layout-marquee .menu a,.layout-marquee .menu button{font-size:24px}
  .marquee{padding-top:48px}.marquee #lead{padding:26vh 16px 24px}.marquee #lead .head :is(h1,.h1){font-size:44px}
  .marquee #lead .strip{grid-template-columns:1fr 1fr;gap:10px}
  .marquee .colophon #about .about-text{columns:1}.marquee .colophon #about .about-text h2{font-size:30px}
  .layout-marquee .board .track span{font-size:30px}
  .layout-marquee .board .links a{font-size:21px}
}

/* box office boards */
.boxoffice .bo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.boxoffice .bo-card{border:1px solid var(--rule-soft);border-top:3px solid var(--accent);padding:14px 14px 10px;background:rgba(255,255,255,.02)}
.boxoffice .bo-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.boxoffice .bo-head h2{font-size:28px;margin:0;font-family:var(--serif)}
.boxoffice .bo-head .grey{font-size:14.6px;white-space:nowrap}
.boxoffice ol{list-style:none;margin:0;padding:0}
.boxoffice li{display:grid;grid-template-columns:24px 28px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:10px 0;border-top:1px solid var(--rule-soft);font-size:17.5px;line-height:1.25}
.boxoffice li:first-child{border-top:0}
.boxoffice .bo-rank{font-family:var(--serif);font-size:25.36px;line-height:1;color:var(--ink)}
.boxoffice li i{font-style:normal;font-size:14.6px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.boxoffice .bo-up{color:#4CD26B}.boxoffice .bo-down{color:var(--accent-text,var(--accent))}.boxoffice .bo-same{color:var(--ink-40)}.boxoffice .bo-new{color:#F2C14E;font-weight:600;font-size:14.6px}
.boxoffice .bo-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boxoffice .bo-gross{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.boxoffice .bo-gross small{display:block;font-size:14.6px;font-weight:400;color:var(--ink-40)}
.boxoffice .bo-gross small.pos{color:#4CD26B}.boxoffice .bo-gross small.neg{color:var(--accent-text,var(--accent))}
.boxoffice .bo-note{margin:14px 0 0;font-size:14.6px;color:var(--ink-40)}
.boxoffice .head-row .more-link{font-size:16.5px}
@media(max-width:1400px){.boxoffice .bo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.boxoffice .bo-grid{grid-template-columns:1fr}}
/* full charts page */
.single.boxoffice .bo-board{margin-top:36px}
.single.boxoffice .bo-board h2{font-size:32px;margin:0 0 10px;font-family:var(--serif)}
.single.boxoffice .bo-board h2 .grey{font-size:16px;font-family:var(--sans)}
.single.boxoffice table.bo{width:100%;border-collapse:collapse;font-size:19.5px}
.single.boxoffice table.bo th{text-align:left;font-weight:500;font-size:14.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40);padding:6px 8px;border-bottom:1px solid var(--rule)}
.single.boxoffice table.bo td{padding:9px 8px;border-bottom:1px solid var(--rule-soft);vertical-align:baseline}
.single.boxoffice table.bo td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.single.boxoffice table.bo td.t{font-family:var(--serif);font-size:24px}
/* Seven columns of which three never wrap left the film title 139px on a phone, so 81 of 198 titles
   ran three lines or more. The row becomes a card, the way the departures board already does. */
@media(max-width:600px){
.single.boxoffice table.bo,.single.boxoffice table.bo tbody,.single.boxoffice table.bo tr,.single.boxoffice table.bo td{display:block;width:auto}
.single.boxoffice table.bo thead{display:none}
.single.boxoffice table.bo tr{padding:12px 0;border-bottom:1px solid var(--rule-soft)}
.single.boxoffice table.bo td{border:0;padding:1px 0;text-align:left}
.single.boxoffice table.bo td.t{font-size:22px;line-height:1.2;margin:2px 0 6px}
.single.boxoffice table.bo td.r,.single.boxoffice table.bo td.lw{display:inline-block;margin-right:12px;font-size:14.6px;color:var(--ink-40)}
.single.boxoffice table.bo td.n{display:inline-block;margin-right:16px;font-size:16.5px;text-align:left}
}
.single.boxoffice table.bo td.pos{color:#4CD26B}.single.boxoffice table.bo td.neg{color:var(--accent-text,var(--accent))}
.single.boxoffice .bo-up{color:#4CD26B}.single.boxoffice .bo-down{color:var(--accent-text,var(--accent))}.single.boxoffice .bo-same{color:var(--ink-40)}.single.boxoffice .bo-new{color:#F2C14E;font-size:11px;font-weight:600;letter-spacing:.06em}
.single.boxoffice .bo-src{display:inline-block;margin-top:8px;font-size:16.5px;color:var(--ink-40)}
@media(max-width:960px){.single.boxoffice table.bo{font-size:14.6px}.single.boxoffice table.bo td.t{font-size:16.5px}.single.boxoffice table.bo th:nth-child(7),.single.boxoffice table.bo td:nth-child(7),.single.boxoffice table.bo th:nth-child(2),.single.boxoffice table.bo td:nth-child(2),.single.boxoffice table.bo th:nth-child(6),.single.boxoffice table.bo td:nth-child(6){display:none}.single.boxoffice table.bo td{padding:9px 4px}}

/* festival line above the board links (marquee) */
.layout-marquee .board .festline{display:grid;grid-template-columns:1.2fr 1fr auto;gap:0;border-bottom:1px solid rgba(255,255,255,.14)}
.layout-marquee .board .festline .fl-col{padding:22px 24px 20px;border-left:1px solid rgba(255,255,255,.14)}
.layout-marquee .board .festline .fl-col:first-child{border-left:0}
.layout-marquee .board .festline .fl-h{font-family:var(--sans);font-size:14.6px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.layout-marquee .board .festline .on .fl-h{color:#4CD26B}
.layout-marquee .board .festline .fl-item{display:block;margin:0 0 8px;color:#fff}
.layout-marquee .board .festline .fl-item b{display:block;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1}
.layout-marquee .board .festline .fl-item span{font-size:16.5px;color:rgba(255,255,255,.55)}
.layout-marquee .board .festline .fl-item:hover b{color:var(--accent-text,var(--accent))}
.layout-marquee .board .festline .fl-none{font-family:var(--serif);font-size:22px;color:rgba(255,255,255,.55)}
.layout-marquee .board .festline .fl-all{align-self:end;padding:22px 24px;font-family:var(--serif);font-size:22px;color:#fff;border-left:1px solid rgba(255,255,255,.14);white-space:nowrap}
.layout-marquee .board .festline .fl-all:hover{color:var(--accent-text,var(--accent))}
@media(max-width:960px){.layout-marquee .board .festline{grid-template-columns:1fr}.layout-marquee .board .festline .fl-col,.layout-marquee .board .festline .fl-all{border-left:0;padding:18px 16px}.layout-marquee .board .festline .fl-item b{font-size:21px}}

/* marquee: inner pages carry the same voice */
.layout-marquee .dep{padding-top:104px}
.layout-marquee .dep .dhead{padding:0 24px 20px}
.layout-marquee .dep :is(h1,.h1){font-family:var(--serif);font-size:44px}
.layout-marquee .dep :is(h1,.h1) .grey{font-family:var(--sans);font-size:19.5px;color:rgba(255,255,255,.5)}
.layout-marquee .dep .clock{font-family:var(--serif)}
.layout-marquee .dep table{font-size:19.5px}
.layout-marquee .dep th{font-size:14.6px}
.layout-marquee .dep td.dest{font-family:var(--serif);font-size:28px;line-height:1.1}
.layout-marquee .dep td.dest small{font-family:var(--sans)}
.layout-marquee .dep .t{font-family:var(--sans);font-size:19.5px;padding-top:18px}
.layout-marquee .dep td:not(.dest){font-size:19.5px;padding-top:18px;color:rgba(255,255,255,.75)}
.layout-marquee .dep .st{font-family:var(--sans);letter-spacing:.06em;font-size:16.5px}
.layout-marquee .dep td:first-child,.layout-marquee .dep th:first-child{padding-left:24px}
.layout-marquee .dep .note{padding:24px}
.layout-marquee .single :is(h1,.h1).story{font-family:var(--serif);font-weight:400;font-size:52px;letter-spacing:-.005em}
.layout-marquee .single h2,.layout-marquee .single .sec h2.t,.layout-marquee .legal-text h2,.layout-marquee .note-body h2,.layout-marquee .subhead{font-family:var(--serif);font-weight:400}
.layout-marquee .single .summary{font-family:var(--serif);font-size:28px;line-height:1.25;color:var(--ink)}
.layout-marquee .legal-text h2{font-size:30px}
.layout-marquee .archive .wk .n{font-family:var(--serif);font-size:28px;font-weight:400}
.layout-marquee .archive .wk .d{font-family:var(--serif);font-size:19.5px;color:var(--ink-40)}
.layout-marquee .crumb a{font-family:var(--sans)}
.layout-marquee .note-body p,.layout-marquee .single .body p{font-family:var(--sans)}
.layout-marquee .single .meta,.layout-marquee .single .byline{font-family:var(--sans)}
@media(max-width:960px){.layout-marquee .dep :is(h1,.h1){font-size:32px}.layout-marquee .dep td.dest{font-size:19.5px}.layout-marquee .single :is(h1,.h1).story{font-size:36px}.layout-marquee .single .summary{font-size:22px}}

.marquee .side #japan .head.head-row{flex-wrap:wrap}
.marquee .side #japan .head.head-row > div{flex:1 1 100%}
.marquee .side #japan .head.head-row > button{margin-top:6px}
/* marquee v3: art-director pass (measured at 1400 / 390) */
.layout-marquee{--accent-text:#FF4A5E;--label:15px}
:root[data-theme="light"] .layout-marquee{--accent-text:#B8102E}   /* 2026-09-17: the pink read 2.7:1 on the light ground */
:root[data-theme="light"] .boxoffice .bo-up,:root[data-theme="light"] .boxoffice .bo-gross small.pos,:root[data-theme="light"] .single.boxoffice table.bo td.pos,:root[data-theme="light"] .single.boxoffice .bo-up{color:#1E7B3C}
:root[data-theme="light"] .boxoffice .bo-new{color:#8A5A00}
.marquee #posts .post:not(:has(img)),.marquee #posts .post:has(img[data-failed]){color:var(--ink)}
.marquee #posts .post:not(:has(img)) .meta,.marquee #posts .post:has(img[data-failed]) .meta{color:var(--ink-40)}   /* a card whose picture failed (HanCinema 403) reads in ink, not white on grey */
.layout-marquee .bar .tick b{color:var(--accent-text)}
.layout-marquee .topnav{font-size:17px;color:rgba(255,255,255,.75)}
.layout-marquee .bar .logo .jp{font-size:18px}
.layout-marquee .pill{font-size:14.6px;padding:6px 12px}
.marquee #lead .strip .thumb h2{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.12}
.marquee #lead .strip .thumb h2 .grey{font-family:var(--sans);font-size:16.5px}
.marquee #lead .note{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.2}
.marquee #lead .head .sub{color:rgba(var(--ink-rgb),.72)}
.marquee #lead .lead-thumbs .thumb.failed + .thumb.failed,.marquee #lead .lead-thumbs:empty{display:block}
.marquee #lead .lead-thumbs{background:radial-gradient(60% 60% at 30% 40%,var(--ph),var(--bg))}
.marquee #posts .post h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1}
.marquee #posts .post h2 .pill{font-family:var(--sans);font-size:14.6px}
.marquee #posts .post .meta{font-size:var(--label);letter-spacing:.04em}
.marquee .side .head :is(h1,.h1){font-size:43px}
.marquee .subhead{font-size:30px}
.marquee .subhead .grey{font-size:19.5px}
.boxoffice .bo-gross small{font-size:15px}
.boxoffice .bo-gross small.neg,.boxoffice .bo-down,.single.boxoffice table.bo td.neg,.single.boxoffice .bo-down{color:var(--accent-text)}
.boxoffice li i{font-size:14.6px}.boxoffice .bo-new{font-size:14.6px;letter-spacing:.08em}
.boxoffice .bo-note{font-size:16px}
.single.boxoffice table.bo th{font-size:15px}
.single.boxoffice table.bo td.n{font-size:17.5px}
.single.boxoffice .bo-new{font-size:14.6px;letter-spacing:.08em}
.layout-marquee .board .track span.dim{color:rgba(255,255,255,.6);font-size:16.5px}
.layout-marquee .board .festline .fl-h{font-size:var(--label);color:rgba(255,255,255,.7)}
.layout-marquee .board .festline .on .fl-h{color:rgba(255,255,255,.85)}
.layout-marquee .board .festline .on .fl-h::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:1px}
.layout-marquee .board .links > div > b,.layout-marquee .board #board-when,.marquee .colophon #sources .head :is(h1,.h1),.marquee .colophon #about footer,.layout-marquee .menu .small{font-size:var(--label)}
.marquee .colophon #about .about-text p{font-size:19.5px;line-height:1.5;color:rgba(var(--ink-rgb),.72)}
.marquee .colophon #sources{border-top:0}
.marquee .colophon .list.sources{gap:4px 0;line-height:1.5}
.marquee .colophon .list.sources a{border:0;padding:0;font-family:var(--serif);font-size:21px;color:var(--ink)}
.marquee .colophon .list.sources a + a::before{content:"·";color:rgba(var(--ink-rgb),.4);margin:0 10px}
.marquee .colophon .list.sources a .grey{font-family:var(--sans);font-size:14.6px;color:rgba(var(--ink-rgb),.55)}
.sound .mood-card .one-head .mood{font-size:15px;padding:6px 12px}
.sound .mood-card .one-head p{color:rgba(var(--ink-rgb),.72)}
.layout-marquee .single,.layout-marquee .single.left{max-width:1100px}
.layout-marquee .single.boxoffice,.layout-marquee .single.legal{margin-left:0}
.layout-marquee .single.boxoffice .bo-board{max-width:1100px}
.layout-marquee .single :is(h1,.h1).story{font-size:64px}
.layout-marquee .single .hero img,.layout-marquee .single > img,.layout-marquee .single .pic img{width:100%}
@media(min-width:701px){.layout-marquee .single .thumbs{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* it came after the phone rule and beat it: three 108px columns on a phone */
.layout-marquee .single .thumbs .thumb h2{font-size:24px}
.layout-marquee .legal-art .ph{display:none}
.layout-marquee .dep td{border-bottom:0}
.layout-marquee .dep tbody tr:nth-child(even){background:rgba(var(--ink-rgb),.035)}
.layout-marquee .dep thead th{border-bottom:1px solid rgba(var(--ink-rgb),.25)}
html[lang=ja] .layout-marquee .head :is(h1,.h1),html[lang=ja] .marquee #lead .head :is(h1,.h1){letter-spacing:.02em;line-height:1.15}
@media(max-width:600px){
  .marquee #posts{grid-template-columns:1fr;gap:14px}
  .marquee #posts .post h2{font-size:24px;padding:12px 0 0}
  .poster-cards .marquee #posts .post .pic{aspect-ratio:4/5}
  .poster-cards .marquee #posts .post h2{padding:80px 14px 16px}
  .marquee .thumbs,.marquee #lead .strip{grid-template-columns:1fr}
  .marquee #lead .lead-thumbs .thumb h2{display:none}
  .marquee #lead .lead-thumbs:after{background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.2) 30%,rgba(11,11,12,.92) 80%)}
  .boxoffice li{grid-template-columns:24px 28px minmax(0,1fr) auto}
  .boxoffice .bo-title{white-space:normal;line-height:1.15}
  .layout-marquee .board .links{grid-template-columns:1fr}
  .layout-marquee .board .links > div{border-left:0;padding:28px 16px}
  .layout-marquee .single :is(h1,.h1).story{font-size:38px}
}

/* phone bar: never wider than the screen (JA "メニュー" + "発見" overflowed at 375px) */
@media(max-width:600px){
  .bar{gap:12px;padding:0 12px}
  .bar .logo{font-size:20px;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
  .bar .logo .jp{font-size:14.6px}
  .bar .lang{font-size:15px;gap:4px}
  .bar .menu-btn{font-size:15px;gap:6px}
}
@media(max-width:480px){
  .bar .theme{width:26px;height:26px}   /* the light / dark switch stays on phones (owner, 2026-09-17) */
}
@media(max-width:380px){
  .bar .logo .jp{display:none}
}
@media(max-width:340px){
  .bar .menu-btn span{display:none}
}

/* marquee v4: cinema-screen hero — the still is shown whole (letterboxed), a blurred copy fills the edges; no hanko */
.marquee #lead .hanko,.marquee #lead .hanko-wrap > a.hanko{display:none !important}
.marquee #lead{min-height:0;padding:0 16px 28px}
.marquee #lead .lead-thumbs{position:relative;inset:auto;margin:0 -16px 26px;height:min(62vh,640px);display:block;z-index:0;overflow:hidden;background:var(--bg)}
.marquee #lead .lead-thumbs:after{background:linear-gradient(180deg,rgba(11,11,12,0) 60%,rgba(11,11,12,.9) 100%)}
.marquee #lead .lead-thumbs .thumb{height:100%;display:block}
.marquee #lead .lead-thumbs .thumb .pic{position:relative;height:100%;aspect-ratio:auto;overflow:hidden}
.marquee #lead .lead-thumbs .thumb .pic::before{content:"";position:absolute;inset:-48px;background:var(--bg) center/cover no-repeat;filter:blur(30px) brightness(.45) saturate(.9)}
.marquee #lead .lead-thumbs .thumb .pic img{position:relative;width:100%;height:100%;object-fit:contain;object-position:center;filter:none;transform:none;transition:none;display:block}
.marquee #lead:hover .lead-thumbs .thumb .pic img{transform:none}
.marquee #lead .lead-thumbs .thumb h2{position:absolute;right:16px;bottom:16px;top:auto;margin:0;max-width:44ch;font-family:var(--serif);font-size:19.5px;line-height:1.15;color:#fff;text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.7);letter-spacing:0}
.marquee #lead .lead-thumbs .thumb h2 .grey{font-family:var(--sans);font-size:14.6px;color:rgba(255,255,255,.65)}
.marquee #lead .lead-thumbs .thumb.failed{display:none}
.marquee #lead .lead-thumbs .thumb.failed + .thumb{display:block}
.marquee #lead .head{margin-bottom:12px;max-width:1100px;padding-top:28px}
.marquee #lead .head :is(h1,.h1){font-size:80px}
.marquee #lead .note{margin-bottom:22px}
.marquee #lead .head,.marquee #lead .note,.marquee #lead .more,.marquee #lead .lead-note{color:var(--ink);position:static}
.marquee #lead .head .sub,.marquee #lead .note .grey,.marquee #lead .more{color:var(--ink-40)}
.marquee #lead .more:hover{color:var(--ink)}
.marquee #lead .strip{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule-soft)}
.marquee #lead .strip .thumb h2{color:var(--ink)}.marquee #lead .strip .thumb h2 .grey{color:var(--ink-40)}
@media(max-width:960px){
  .marquee #lead{padding:0 16px 24px}
  .marquee #lead .lead-thumbs{height:min(46vh,380px);margin-bottom:18px}
  .marquee #lead .lead-thumbs .thumb h2{display:none}
  .marquee #lead .head :is(h1,.h1){font-size:44px}
}


/* box office v2: ten rows per board, boards as columns without boxes; the full page is a centred 1400px column with the tables in pairs */
.boxoffice .bo-grid{gap:0 32px}
.boxoffice .bo-card{border:0;border-top:2px solid var(--accent);padding:14px 0 0;background:none}
.boxoffice .bo-head{display:block;min-height:64px}
.boxoffice .bo-head .grey{display:block;margin-top:4px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;white-space:normal}
.boxoffice li{grid-template-columns:36px 30px minmax(0,1fr) auto;gap:10px;padding:9px 0;min-height:44px}
.boxoffice .bo-rank{text-align:right;font-variant-numeric:tabular-nums}
.boxoffice .bo-gross{min-width:72px}
.boxoffice .bo-gross small{font-size:15px}
.boxoffice ol:empty::after{content:attr(data-empty);display:block;padding:12px 0;font-size:17.5px;color:var(--ink-40)}
.boxoffice{padding-bottom:48px}
@media(max-width:1499px){.boxoffice .bo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}}
@media(max-width:1099px){.boxoffice .bo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.boxoffice .bo-grid{grid-template-columns:1fr;gap:40px 0}.boxoffice .bo-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}}
.layout-marquee .single.boxoffice{max-width:none;margin:0;padding:80px 32px 64px}
.single.boxoffice .bo-head-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:16px 48px;align-items:end;margin:12px 0 0}
.single.boxoffice .bo-head-row :is(h1,.h1).story{margin:0}
.layout-marquee .single.boxoffice .bo-head-row .summary{margin:0 0 6px;max-width:52ch}
.layout-marquee .single.boxoffice .bo-board{max-width:none}
.layout-marquee .single.boxoffice .summary{max-width:60ch}
.single.boxoffice .bo-nav{position:sticky;top:56px;z-index:30;background:var(--bg);border-bottom:1px solid var(--rule);display:flex;gap:28px;padding:14px 0;margin:20px 0 0;font-size:17px;letter-spacing:.02em;overflow-x:auto;white-space:nowrap}
.single.boxoffice .bo-nav a{color:var(--ink-40)}.single.boxoffice .bo-nav a:hover,.single.boxoffice .bo-nav a.on{color:var(--ink);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--accent-text,var(--accent))}
.menu .bo-nav{position:static;display:block;background:none;border:0;padding:0;margin:0;white-space:normal;overflow:visible}
.menu .bo-nav a{display:block}
.menu .bo-nav a.on{color:var(--accent-text,var(--accent))}
.single.boxoffice .bo-region{margin-top:48px}.single.boxoffice .bo-nav + .bo-region{margin-top:28px}
.single.boxoffice .bo-region-h{display:flex;align-items:baseline;justify-content:space-between;font-family:var(--serif);font-weight:400;font-size:43px;line-height:1;margin:0 0 8px;padding-bottom:12px;border-bottom:2px solid var(--accent)}
.single.boxoffice .bo-region-h .grey{font-family:var(--sans);font-size:var(--label);letter-spacing:.08em;text-transform:uppercase}
.single.boxoffice .bo-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:40px 48px}
.single.boxoffice .bo-board.featured{grid-column:1/-1}
.single.boxoffice .bo-board{margin-top:24px}
.single.boxoffice .bo-board h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.single.boxoffice .bo-board h2 .grey{white-space:nowrap}
.single.boxoffice .bo-board.stale table.bo{opacity:.72}
.single.boxoffice .bo-board.stale h2 .grey::before{content:"● ";color:var(--ink-40)}
.single.boxoffice table.bo td.r{font-family:var(--serif);font-size:25.36px;width:44px;line-height:1}
.single.boxoffice table.bo td.lw{white-space:nowrap;width:64px;font-size:16.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.single.boxoffice .bo-up,.single.boxoffice .bo-down{font-weight:600}
.single.boxoffice .bo-board{min-width:0}
.single.boxoffice table.bo{table-layout:fixed}
.single.boxoffice table.bo th:nth-child(n+4){text-align:right}
.single.boxoffice table.bo th:nth-child(1){width:44px}.single.boxoffice table.bo th:nth-child(2){width:56px}.single.boxoffice table.bo th:nth-child(4){width:92px}.single.boxoffice table.bo th:nth-child(5){width:76px}.single.boxoffice table.bo th:nth-child(6){width:92px}.single.boxoffice table.bo th:nth-child(7){width:48px}
.single.boxoffice table.bo td.t{overflow-wrap:anywhere}
.single.boxoffice table.bo td.empty{color:var(--ink-40);padding:18px 8px}
.single.boxoffice .bo-board:not(.featured) table.bo th:nth-child(6),.single.boxoffice .bo-board:not(.featured) table.bo td:nth-child(6){display:none}
.single.boxoffice .bo-foot{margin-top:56px;font-size:16.5px;color:var(--ink-40);max-width:70ch}
.single.boxoffice .bo-board.featured{grid-column:span 2}
@media(min-width:1920px){.layout-marquee .single.boxoffice{padding:96px 48px 80px}.single.boxoffice .bo-boards{gap:48px 64px}}
@media(max-width:1099px){.single.boxoffice .bo-head-row{grid-template-columns:1fr;gap:12px}.single.boxoffice .bo-boards{grid-template-columns:1fr}.single.boxoffice .bo-board.featured{grid-column:auto}.layout-marquee .single.boxoffice{padding:96px 16px 64px}}
@media(max-width:960px){.single.boxoffice table.bo{font-size:17.5px}.single.boxoffice table.bo td.t{font-size:24px}.single.boxoffice .bo-region-h{font-size:32px}.single.boxoffice .bo-nav{top:48px;gap:20px}.single.boxoffice table.bo th:nth-child(1){color:transparent;width:36px}}


/* marquee v6: masthead colophon (statement left, running text right), balanced two-column block, wide-screen gutters and rhythm */
.marquee .colophon{padding:72px 32px 56px}
.marquee .colophon #about .about-text{columns:auto;column-gap:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:48px;align-items:start}
.marquee .colophon #about .about-text h2{column-span:none;grid-column:1;grid-row:1/span 12;font-size:48px;line-height:1.04;letter-spacing:-.01em;max-width:18ch;margin:0}
.marquee .colophon #about .about-text p{grid-column:2;max-width:62ch;margin:0 0 1em;line-height:1.55;break-inside:auto}
.marquee .colophon #about .about-text p:last-of-type{margin-bottom:0;color:var(--ink)}
.marquee .colophon #about footer{margin:40px 0 0 !important;padding-top:14px;border-top:2px solid var(--accent);display:inline-block;font-size:15px;letter-spacing:.08em;text-transform:uppercase;line-height:1.6}
.marquee .colophon #sources{margin-top:56px;padding-top:28px;border-top:1px solid var(--rule-soft)}
.layout-marquee{--ink-25:rgba(var(--ink-rgb),.62)}
.marquee .two{align-items:start}
.marquee .two > main,.marquee .two > aside{position:sticky;top:calc(56px + min(0px,100vh - 56px - var(--col-h,0px)))}
.marquee .two .thumb h2,.marquee .pair .two .thumb h2{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.15}
.marquee .events .ev h2,.marquee .list.wire a{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15}
.marquee #japan .head .sub{max-width:44ch}
@media(min-width:1440px){
  .marquee > section,.marquee .two > * > section{padding:56px 32px}
  .marquee #lead{padding-left:32px;padding-right:32px}
  .marquee .two > main #thumbs{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px}
}
@media(min-width:1920px){
  .marquee > section,.marquee .two > * > section{padding:72px 48px}
  .marquee #lead{padding-left:48px;padding-right:48px}
  .marquee .colophon{padding:96px 48px 72px}
}
@media(min-width:1800px){.marquee #posts{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:960px){
  .marquee .two > main,.marquee .two > aside{position:static}
  .marquee .colophon{padding:48px 16px 40px}
  .marquee .colophon #about .about-text{display:block}
  .marquee .colophon #about .about-text h2{font-size:30px;max-width:none;margin-bottom:20px}
  .marquee .colophon #about .about-text p{max-width:none}
}

/* marquee v7: editor's note as a feature page — masthead column left, wide serif text right; fluid like every other page */
.layout-marquee .single.note{max-width:none;margin:0;padding:80px 32px 64px}
.layout-marquee .single.note .note-page{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;align-items:start;margin-top:8px}
.layout-marquee .single.note .note-side{position:sticky;top:80px;display:grid;gap:14px;justify-items:start;padding-top:18px;border-top:2px solid var(--accent)}
.layout-marquee .single.note .note-author{font-family:var(--serif);font-size:32px;line-height:1.1}
.layout-marquee .single.note .note-date{font-size:16.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-40)}
.layout-marquee .single.note .note-more{margin-top:24px;font-size:17.5px;color:var(--ink-40)}.layout-marquee .single.note .note-more:hover{color:var(--ink)}
.layout-marquee .single.note .note-main :is(h1,.h1).story{font-size:80px;line-height:.98;letter-spacing:-.01em;max-width:20ch;margin:0 0 36px}
.layout-marquee .single.note .hero{margin:0 0 36px}
.layout-marquee .single.note .note-body p{font-family:var(--serif);font-size:24px;line-height:1.5;max-width:62ch;margin:0 0 26px;color:var(--ink)}
.layout-marquee .single.note .note-body p.lead{font-size:30px;line-height:1.35;max-width:52ch;margin-bottom:34px}
html[lang=ja] .layout-marquee .single.note .note-body p{font-size:22px;line-height:1.9;max-width:44em}
html[lang=ja] .layout-marquee .single.note .note-body p.lead{font-size:26px;line-height:1.7}
html[lang=ja] .layout-marquee .single.note .note-main :is(h1,.h1).story{line-height:1.15;letter-spacing:.02em}
@media(min-width:1920px){.layout-marquee .single.note{padding:96px 48px 80px}.layout-marquee .single.note .note-page{gap:24px 64px}}
@media(max-width:960px){
  .layout-marquee .single.note{padding:72px 16px 56px}
  .layout-marquee .single.note .note-page{grid-template-columns:1fr;gap:20px}
  .layout-marquee .single.note .note-side{position:static;border-top:0;padding-top:0;gap:8px}
  .layout-marquee .single.note .note-author{font-size:24px}
  .layout-marquee .single.note .note-main :is(h1,.h1).story{font-size:40px;max-width:none;margin-bottom:24px}
  .layout-marquee .single.note .note-body p{font-size:22px}
  .layout-marquee .single.note .note-body p.lead{font-size:25.36px}
}

/* box office v3 (home): a leaders' bill — the #1 film big, places 2–5 compact, the full chart one click away */
.boxoffice .bo-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 32px}
.boxoffice .bo-head{min-height:0;margin-bottom:14px}
.boxoffice .bo-top{display:grid;gap:6px;padding:0 0 14px;border-bottom:1px solid var(--rule-soft);color:var(--ink)}
.boxoffice .bo-top-rank{font-size:14.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text,var(--accent));font-weight:600}
.boxoffice .bo-top-title{font-family:var(--serif);font-size:28px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.boxoffice .bo-top:hover .bo-top-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.boxoffice .bo-top-gross{margin-top:2px;font-size:19.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.boxoffice .bo-top-gross small{font-size:15px;margin-left:4px}.boxoffice .bo-top-gross small.pos{color:#4CD26B}.boxoffice .bo-top-gross small.neg{color:var(--accent-text,var(--accent))}
.boxoffice .bo-top-gross i{font-style:normal;font-size:14.6px;margin-left:6px;letter-spacing:.02em}
.boxoffice .bo-rest li{grid-template-columns:22px minmax(0,1fr) auto auto;gap:8px;padding:7px 0;min-height:0;font-size:17.5px;border-top:1px solid var(--rule-soft)}
.boxoffice .bo-rest li:first-child{border-top:0}
.boxoffice .bo-rest .bo-rank{font-size:19.5px;text-align:right}
.boxoffice .bo-rest .bo-gross{font-weight:400}
.boxoffice .bo-empty{margin:0 0 14px;font-size:17.5px;color:var(--ink-40)}
.boxoffice .bo-more{display:inline-block;margin-top:14px;font-size:16.5px;color:var(--ink-40)}.boxoffice .bo-more:hover{color:var(--ink)}
@media(max-width:1299px){.boxoffice .bo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}}
@media(max-width:899px){.boxoffice .bo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.boxoffice .bo-grid{grid-template-columns:1fr;gap:32px 0}.boxoffice .bo-rest .bo-title{white-space:nowrap;-webkit-line-clamp:unset;display:block}}

/* marquee v8: the colophon as a colophon — statement left, the text in two balanced columns right; half the height */
.marquee .colophon{padding:56px 32px 48px}
.marquee .colophon #about .about-text{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:48px}
.marquee .colophon #about .about-text h2{grid-row:auto;max-width:22ch}
.marquee .colophon #about .about-text .about-cols{grid-column:2;columns:2;column-gap:48px;column-fill:balance}
.marquee .colophon #about .about-text .about-cols p{max-width:none;break-inside:auto;margin:0 0 1em}
.marquee .colophon #about .about-text .about-cols p:last-of-type{margin-bottom:0}
.marquee .colophon #about footer{margin-top:28px !important}
.marquee .colophon #sources{margin-top:40px;padding-top:24px}
@media(max-width:960px){.marquee .colophon #about .about-text .about-cols{columns:1}.marquee .colophon{padding:48px 16px 40px}}

/* marquee v9: colophon, smallest — statement across the top, two lead paragraphs in two columns, the rest behind "Read on" */
.marquee .colophon{padding:48px 32px 40px}
.marquee .colophon #about .about-text{display:block}
.marquee .colophon #about .about-text h2{max-width:62ch;font-size:40px;margin:0 0 20px}
.marquee .colophon #about .about-text .about-cols{columns:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.marquee .colophon #about .about-text .about-cols[hidden]{display:none}
.marquee .colophon #about .about-text .about-cols p{grid-column:auto;margin:0 0 1em;max-width:62ch}
.marquee .colophon #about .about-text .about-lead{display:block;columns:2;column-gap:48px;column-fill:balance}
.marquee .colophon #about .about-text .about-lead p{margin-bottom:0;max-width:none;break-inside:auto}
.marquee .colophon #about .about-text .about-more{margin-top:1em}
.marquee .colophon #about .about-text .about-toggle{margin-top:14px;padding:0;border:0;background:none;font:inherit;font-size:16.5px;color:var(--ink-40);cursor:pointer}
.marquee .colophon #about .about-text .about-toggle:hover{color:var(--ink)}
.marquee .colophon #about footer{margin-top:22px !important}
.marquee .colophon #sources{margin-top:32px;padding-top:20px}
@media(max-width:960px){.marquee .colophon #about .about-text .about-cols{grid-template-columns:1fr}.marquee .colophon #about .about-text .about-lead{columns:1}.marquee .colophon #about .about-text h2{font-size:30px}}

/* marquee v5: double feature — two big stills side by side, the headline set over each; only wide stills are allowed up here (checked at load, weak ones drop to the strip) */
.marquee #lead .lead-thumbs{position:relative;inset:auto;margin:0 0 26px;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;overflow:visible;background:none}
.marquee #lead .lead-thumbs:after{display:none}
.marquee #lead .lead-thumbs .thumb{position:relative;display:block;height:min(58vh,560px);overflow:hidden;background:var(--ph);border-radius:3px}
.marquee #lead .lead-thumbs .thumb:nth-child(2){display:block}
.marquee #lead .lead-thumbs .thumb .pic{position:absolute;inset:0;height:100%;aspect-ratio:auto;overflow:hidden;background:var(--ph)}
.marquee #lead .lead-thumbs .thumb .pic::before{display:none}
.marquee #lead .lead-thumbs .thumb .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.84) saturate(.95);transform:scale(1.02);transition:transform 9s linear;display:block}
.marquee #lead .lead-thumbs .thumb:hover .pic img{transform:scale(1.07)}
.marquee #lead .lead-thumbs .thumb .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,0) 38%,rgba(11,11,12,.5) 68%,rgba(11,11,12,.94) 100%)}
.marquee #lead .lead-thumbs .thumb h2{position:absolute;left:26px;right:26px;bottom:24px;top:auto;margin:0;max-width:none;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.06;letter-spacing:-.005em;color:#fff;text-align:left;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.marquee #lead .lead-thumbs .thumb h2 .grey{display:block;margin-top:12px;font-family:var(--sans);font-size:14.6px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.marquee #lead .lead-thumbs .thumb h2 .pill{display:table;margin:0 0 12px;vertical-align:baseline;color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.35)}
.marquee .thumb h2 .pill,.marquee .pair .two .thumb h2 .pill{display:table;margin:0 0 8px}
.thumb h2 .pill{margin-right:8px}
.marquee #lead .lead-thumbs .thumb:hover h2{text-decoration:none}
.marquee #lead .lead-thumbs .thumb.failed{display:block}
.marquee #lead .lead-thumbs .thumb.failed .pic img{visibility:hidden}
.marquee #lead .lead-thumbs .thumb.failed .pic{background:radial-gradient(70% 70% at 30% 30%,var(--ph),var(--bg))}
.marquee #lead .lead-thumbs .thumb.weak .pic img{opacity:0}
.marquee #lead .strip{margin-top:0;padding-top:0;border-top:0}
@media(max-width:960px){
  .marquee #lead .lead-thumbs{grid-template-columns:1fr;gap:12px;height:auto;margin-bottom:18px}
  .marquee #lead .lead-thumbs .thumb{height:min(54vh,440px)}
  .marquee #lead .lead-thumbs .thumb h2{display:block;left:18px;right:18px;bottom:18px;font-size:30px}
}
@media(max-width:600px){
  .marquee #lead .lead-thumbs .thumb{height:min(58vh,380px)}
  .marquee #lead .lead-thumbs .thumb h2{display:block;font-size:28px}
  .marquee #lead .lead-thumbs .thumb h2 .grey{margin-top:8px}
}


/* Hakken Releases (releases.pen frames XNRul index, TbepD page, S81Pt8 and RzKpt phone; approved by the owner 2026-10-12).
   The site's sans throughout, light and lower-key labels, the pink Latest panel as the live radar panel, a pink dot on the tiles. */
.xr{--xr-disp:var(--sans);--xr-disp-w:400;--xr-disp-ls:-.012em;--xr-txt:var(--sans);--xr-lab:var(--sans);--xr-lab-fs:12.5px;--xr-lab-tt:none;--xr-lab-ls:0;--xr-r:999px;--xr-dot-r:50%}
.xr .xr-h1{font-weight:400;letter-spacing:-.035em}
.xr-crumb .xr-cr-d a:first-child{text-transform:lowercase}
/* ---------------------------------------------------------------- the shared layout (releases.pen: one layout, themed per magazine)
   Every rule sits under main.xpage-releases (the wrapper build.py gives the step's pages) and .xr (the engine's markup). The
   1440 px frame's values are used as written; the large type scales with vw below 1440; at 600 px and under the phone frames apply.
   Colours and fonts are the magazine's own variables (light and dark), never new ones: fonts are locked (owner, 2026-09-07). */
main.single.xpage-releases{display:block;max-width:none;width:auto;margin:0;padding:48px 0 0;color:var(--ink);background:var(--bg)}
.xr{--g:32px;--rail:336px;--xr-acc:var(--accent-text,var(--accent));overflow-x:clip;font-family:var(--xr-txt)}
.xr *{box-sizing:border-box}
.xr h1,.xr h2,.xr p,.xr ol,.xr dl,.xr dd,.xr figure{margin:0}
.xr ol{padding:0;list-style:none}
.xr a{color:inherit;text-decoration:none}
.xr i{font-style:normal}
.xr svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.xr .xr-k,main.xpage-releases .xr h2.xr-k{font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt)}
.xr .xr-n-p,.xr .xr-pm,.xr .xr-src-p,.xr .xr-go{display:none}
.xr .xr-q::before{content:"\201C"}.xr .xr-q::after{content:"\201D"}

/* crumb: News / Releases (/ Brand) */
.xr-crumb{display:flex;align-items:center;gap:10px;padding:0 var(--g);height:44px;border-bottom:1px solid var(--rule-soft);font:400 var(--xr-lab-fs)/1 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt)}
.xr-crumb .xr-back{display:none}
.xr-crumb .xr-cr-d{display:flex;gap:10px;align-items:center;color:var(--ink-40)}
.xr-crumb .xr-cr-d a:first-child{color:var(--xr-acc)}
.xr-crumb .xr-cr-d i{opacity:.7}
.xr-crumb .xr-cr-b{color:var(--ink)}
.xr-crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.xr-index:has(.xr-crumb-i) .xr-kick{display:none}

/* the type tiles: one quiet block per maker, the magazine's dot top left, the maker below (no borrowed pictures) */
.xr-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;flex:none;width:160px;height:106px;padding:10px;background:var(--ph);color:var(--ink);overflow:hidden}
.xr-tile::before{content:"";position:absolute;left:12px;top:12px;width:7px;height:7px;border-radius:var(--xr-dot-r);background:var(--accent)}
.xr-tile small{display:none}
.xr-tile b{font:var(--xr-tile-w,400) 19px/1.08 var(--xr-disp);letter-spacing:var(--xr-disp-ls);overflow-wrap:anywhere}

/* ---------------------------------------------------------------- index: hero */
.xr-hero{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between;gap:40px;padding:44px var(--g) 36px}
.xr-hero-l{flex:0 1 760px;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:22px}
.xr .xr-h1{font:var(--xr-disp-w) clamp(76px,11.2vw,162px)/.86 var(--xr-disp);letter-spacing:calc(var(--xr-disp-ls) * 3);color:var(--ink);text-transform:none;margin:0}
.xr-intro{display:flex;flex-direction:column;gap:18px;max-width:660px}
.xr-kick{color:var(--xr-acc)}
.xr-lede{font:400 20px/1.4 var(--xr-txt);color:var(--ink-40)}
.xr .xr-count{color:var(--xr-acc)}
.xr-latest{position:relative;flex:0 1 516px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-start;padding:22px 24px;background:var(--accent);color:var(--accent-ink)}
.xr-latest[class*="xr-h-"]{background:var(--accent);color:var(--accent-ink)}
.xr-latest-k{order:0;font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt)}
.xr-latest-top{order:2;display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.xr-latest-top small{font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt)}
.xr-latest-top .xr-pill{display:none}
.xr-latest-b{order:1;display:flex;flex-direction:column;gap:10px;margin-top:auto}
.xr-latest-b>small{display:none}
.xr-latest-b>b{font:var(--xr-disp-w) 32px/1.08 var(--xr-disp);letter-spacing:var(--xr-disp-ls)}
.xr-latest-d{display:none}
.xr .xr-latest .xr-btn{position:absolute;inset:0;border-radius:0;background:none;padding:0;font-size:0;color:transparent}
.xr-latest .xr-btn svg{display:none}
.xr-latest:hover .xr-latest-b>b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ---------------------------------------------------------------- index: filters and the makers strip */
.xr-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px var(--g);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.xr-filters>.xr-k{display:none}
.xr-chips{display:flex;flex-wrap:wrap;gap:8px}
.xr-chip{appearance:none;background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:var(--xr-r);padding:7px 13px;font:400 var(--xr-lab-fs)/1.2 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);cursor:pointer;white-space:nowrap}
.xr-chip .xr-c{color:var(--xr-acc);margin-left:4px}
.xr-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.xr-chip[aria-pressed="true"] .xr-c{color:inherit}
.xr-chip:not([aria-pressed="true"]):hover{border-color:var(--ink)}
.xr-sp{flex:1 1 0}
.xr-selects{display:flex;gap:10px}
.xr-sel{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:var(--xr-r);padding:0 14px}
.xr-sel .xr-k{color:var(--ink-40)}
.xr-sel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--ink);font:400 var(--xr-lab-fs)/1.2 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);padding:8px 20px 8px 0;margin:0;cursor:pointer;max-width:220px}
.xr-sel select option{background:var(--bg);color:var(--ink)}
.xr-sel svg{position:absolute;right:12px;width:14px;height:14px;pointer-events:none}
.xr-makers{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;padding:14px var(--g);border-bottom:1px solid var(--rule-soft)}
.xr-makers .xr-k{color:var(--ink-40);margin-right:4px}
.xr-makers a{font:500 17px/1.3 var(--xr-txt)}
.xr-makers a:hover,.xr-makers a.on{color:var(--xr-acc)}
.xr-more-n{font:500 17px/1.3 var(--xr-txt)}

/* ---------------------------------------------------------------- index: the list and the rail */
.xr-body{display:flex;align-items:flex-start;gap:48px;padding:32px var(--g) 64px}
.xr-main{flex:1 1 0;min-width:0}
.xr-month{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:22px 0 10px;border-bottom:2px solid var(--ink)}
.xr-month:first-child{padding-top:0}
.xr-month h2{font:var(--xr-disp-w) 40px/1 var(--xr-disp);letter-spacing:var(--xr-disp-ls)}
.xr-month small{font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--ink-40)}
.xr-month.xr-dim{opacity:.45}
.xr-row{border-bottom:1px solid var(--rule-soft)}
.xr-row-a{display:grid;grid-template-columns:82px 160px minmax(0,1fr);gap:22px;padding:18px 0}
.xr-date{display:flex;gap:4px;font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--ink-40)}
.xr-date b{font-weight:400}
.xr-date small{display:inline-block;font:inherit;text-transform:var(--xr-mon-tt,lowercase)}.xr-date small::first-letter{text-transform:uppercase}
.xr-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.xr-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline}
.xr-meta .xr-pill{font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--xr-acc)}
.xr-meta .xr-feat{font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--ink)}
.xr-meta .xr-src{display:none}
.xr .xr-text .xr-src-p{display:block;font:400 calc(var(--xr-lab-fs) - 1px)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--ink-40)}
.xr-t{font:var(--xr-disp-w) 27px/1.15 var(--xr-disp);letter-spacing:var(--xr-disp-ls)}
.xr-line{font:400 16px/1.45 var(--xr-txt);color:var(--ink-40);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.xr-row-a:hover .xr-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.xr-empty{padding:24px 0;color:var(--ink-40)}
.xr-next{appearance:none;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:16px;padding:15px;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:var(--xr-r);font:400 var(--xr-lab-fs)/1.2 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);cursor:pointer}
.xr-next svg{width:13px;height:13px}
.xr-next:hover{background:var(--ink);color:var(--bg)}
.xr-next[hidden]{display:none}
.xr-rail{flex:0 0 var(--rail);display:flex;flex-direction:column;gap:30px}
.xr-rb{border-top:2px solid var(--ink);padding-top:14px}
.xr-rb h2.xr-k{color:var(--ink-40);margin-bottom:6px}
.xr-rb ol li{border-bottom:1px solid var(--rule-soft)}
.xr-rb ol li a,.xr-rb ol li>span{display:grid;grid-template-columns:140px 1fr;align-items:center;gap:10px;padding:8px 0;font:500 15px/1.3 var(--xr-txt)}
.xr-rb ol li a small{display:flex;align-items:center;gap:10px;font:400 var(--xr-lab-fs)/1 var(--xr-lab)}
.xr-rb ol li a small i{display:block;height:5px;border-radius:var(--xr-r);background:var(--accent)}
.xr-rb ol li a:hover b{color:var(--xr-acc)}
.xr-bytype ol li>span{grid-template-columns:1fr auto}
.xr-bytype ol li>span small{font:400 var(--xr-lab-fs)/1 var(--xr-lab);color:var(--xr-acc)}
.xr-bytype .xr-bar{display:none}
.xr-rb p{font:400 15px/1.45 var(--xr-txt);color:var(--ink-40)}

/* ---------------------------------------------------------------- the release page */
.xr-main-p{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:48px;align-items:start;padding:40px var(--g) 56px}
.xr-sleeve{position:relative;container-type:inline-size;aspect-ratio:600/560;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:var(--ph);color:var(--ink);overflow:hidden}
.xr-sleeve[class*="xr-h-"]{background:var(--ph);color:var(--ink)}
.xr-sleeve::before{content:"";position:absolute;left:24px;top:24px;width:14px;height:14px;border-radius:var(--xr-dot-r);background:var(--accent)}
.xr-sl-top{visibility:hidden}
.xr-big{display:flex;flex-direction:column;white-space:nowrap;font:var(--xr-disp-w) min(140px,calc(100cqw / (var(--n,5) * .6)))/.92 var(--xr-disp);letter-spacing:calc(var(--xr-disp-ls) * 2)}
.xr-sl-bot{display:flex;font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt)}
.xr-sl-bot small{font:inherit}
.xr-sl-sep,.xr-sl-bot small:last-child{display:none}
.xr-sleeve-img img{width:100%;height:auto;display:block}
.xr-sleeve-img figcaption{margin-top:8px;color:var(--ink-40)}
.xr-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.xr-tags{display:flex;flex-wrap:wrap;gap:0;font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--xr-acc)}
.xr-tags .xr-pill{font:inherit}
.xr-tags .xr-pill:nth-child(2){display:none}
.xr-tags .xr-pill-b::before{content:"\00a0·\00a0"}
.xr .xr-h1p{font:var(--xr-disp-w) clamp(38px,3.7vw,54px)/1.06 var(--xr-disp);letter-spacing:var(--xr-disp-ls);text-transform:none;margin:0}
.xr-brief{font:400 19px/1.5 var(--xr-txt)}
.xr-facts{border-top:2px solid var(--ink);padding-top:12px}
.xr-facts h2.xr-k{color:var(--ink-40);margin-bottom:2px}
.xr-fact{display:grid;grid-template-columns:150px 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--rule-soft)}
.xr-fact dt{font:400 var(--xr-lab-fs)/1.5 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--ink-40)}
.xr-fact dd{font:500 17px/1.4 var(--xr-txt)}
.xr-links{display:flex;flex-direction:column;gap:10px}
.xr .xr-btn{display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:var(--xr-r);padding:14px 20px;font:600 17px/1.2 var(--xr-txt);transition:opacity .2s}
.xr-btn svg{flex:none;width:18px;height:18px}
.xr .xr-off{background:var(--accent);color:var(--accent-ink)}
.xr .xr-kit{border:1.5px solid var(--ink);color:var(--ink)}
.xr .xr-btn:hover{opacity:.86}
.xr-note{font:400 13px/1.5 var(--xr-txt);color:var(--ink-40)}
.xr-video{padding:0 var(--g) 56px}
.xr-sec-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:14px}
.xr-sec-h h2{font:var(--xr-disp-w) 40px/1 var(--xr-disp);letter-spacing:var(--xr-disp-ls)}
.xr-sec-h small{color:var(--ink-40)}
.xr-player{position:relative;aspect-ratio:16/7.2;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
.xr-player.on{padding:0;aspect-ratio:16/9}
.xr-player iframe{width:100%;height:100%;border:0;display:block}
.xr-play{appearance:none;width:84px;height:84px;border:0;border-radius:var(--xr-dot-r);background:var(--accent);color:var(--accent-ink);padding:24px 22px 24px 26px;cursor:pointer}
.xr-play-l{font:600 20px/1.3 var(--xr-txt)}
.xr-legal{font:400 13px/1.5 var(--xr-txt);color:rgba(255,255,255,.62)}
.xr-legal a{text-decoration:underline;text-underline-offset:2px}
.xr-morefrom{background:var(--bar);color:#fff;padding:48px var(--g) 56px;--ink:#fff;--ink-40:rgba(255,255,255,.55);--rule-soft:rgba(255,255,255,.12)}
.xr-mf-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:12px;border-bottom:2px solid #fff;margin-bottom:20px}
.xr-mf-h h2{font:var(--xr-disp-w) 44px/1.02 var(--xr-disp);letter-spacing:var(--xr-disp-ls)}
.xr-mf-h h2 .xr-n-d{display:none}.xr-mf-h h2 .xr-n-p{display:inline}
.xr-mf-h a.xr-k{color:var(--xr-acc);text-align:right}
.xr-more-note{font:400 16px/1.4 var(--xr-txt);color:var(--ink-40);margin-bottom:22px}
.xr-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.xr-card{display:flex;flex-direction:column;gap:10px;min-width:0}
.xr-card .xr-tile{width:100%;height:auto;aspect-ratio:390/176;background:#1C1C1F;color:#fff}
.xr-card .xr-tile::before{left:10px;top:10px;width:6px;height:6px}
.xr-card .xr-tile b{font-size:18px}
.xr-card .xr-k{order:1;color:var(--xr-acc)}
.xr-card-t{order:2;font:var(--xr-disp-w) 21px/1.2 var(--xr-disp);letter-spacing:var(--xr-disp-ls)}
.xr-card:hover .xr-card-t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.menu a.xr-menu{display:block}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1200px){
  .xr-body{gap:32px}.xr{--rail:280px}
  .xr-main-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
}
@media (max-width:960px){
  .xr{--g:24px}
  .xr-body{flex-direction:column}.xr-rail{flex:none;width:100%}
  .xr-latest{flex:1 1 100%;min-height:220px}
  .xr-main-p{grid-template-columns:1fr}
  .xr-sleeve{max-width:600px;width:100%}
  .xr-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------------------------------------------------------------- phone frames (390) */
@media (max-width:600px){
  .xr{--g:16px}
  .xr-crumb{height:38px}
  .xr-hero{padding:24px var(--g) 22px;gap:22px}
  .xr .xr-h1{font-size:64px}
  .xr-lede{font-size:17px}
  .xr-latest{min-height:0;padding:16px;gap:28px}
  .xr-latest-b>b{font-size:24px}
  .xr-filters{padding:12px var(--g);gap:10px}
  .xr-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--g));padding:0 var(--g);width:calc(100% + 2 * var(--g))}
  .xr-chips::-webkit-scrollbar{display:none}
  .xr-sp{display:none}
  .xr-selects{width:100%}.xr-sel{flex:1 1 0;min-width:0}.xr-sel select{width:100%}
  .xr-makers{display:none}
  .xr-body{padding:22px var(--g) 40px}
  .xr-rail{display:none}
  .xr-month h2{font-size:30px}
  .xr-month .xr-n-d{display:none}.xr-month .xr-n-p{display:inline}
  .xr-row-a{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px 0}
  .xr-date,.xr-meta,.xr-line,.xr .xr-text .xr-src-p{display:none}
  .xr .xr-pm{display:block;font:400 var(--xr-lab-fs)/1.4 var(--xr-lab);letter-spacing:var(--xr-lab-ls);text-transform:var(--xr-lab-tt);color:var(--xr-acc)}
  .xr-tile{width:96px;height:64px;padding:8px}
  .xr-tile::before{left:8px;top:8px;width:6px;height:6px}
  .xr-tile b{font-size:14px}
  .xr-t{font-size:20px}
  .xr-next .xr-n-d{display:none}.xr-next .xr-n-p{display:inline}
  .xr-main-p{padding:20px var(--g) 36px;gap:22px}
  .xr-sleeve{aspect-ratio:358/240;padding:16px}
  .xr-sleeve::before{left:16px;top:16px;width:10px;height:10px}
  .xr-big{font-size:min(80px,calc(100cqw / (var(--n,5) * .6)))}
  .xr-brief{font-size:17px}
  .xr-fact{grid-template-columns:110px 1fr}
  .xr-fact dd{font-size:16px}
  .xr-video{padding:0 var(--g) 36px}
  .xr-video .xr-sec-h{display:none}
  .xr-player{aspect-ratio:358/200}
  .xr-play{width:56px;height:56px;padding:16px 14px 16px 18px}
  .xr-play-l .xr-n-d,.xr-legal{display:none}.xr-play-l .xr-n-p{display:inline}.xr-play-l{font-size:14px;font-weight:400;opacity:.62}
  .xr-morefrom{padding:30px var(--g) 36px}
  .xr-mf-h{flex-direction:column;align-items:flex-start}
  .xr-mf-h h2{font-size:30px}
  .xr-more-note .xr-n-d{display:none}.xr-more-note .xr-n-p{display:inline}
  .xr-cards{grid-template-columns:1fr;gap:18px}
}

/* hk-shell — Hakken redesign 2026-10-16, slice A: top bar, player bar, menu, footer, reveal motion.
   Pencil hakken.pen: Wj3jx / p0lEwd top bar, E9TH3 / v46cy player, g6BYdJ / snUWD menu, Hvx6x / cvAV8 footer, CuvVr system.
   Families are the site's (var(--sans); Japanese "Zen Kaku Gothic New"). Type the frames set under the site's 14.6px floor
   is raised to it (owner rule: sub-floor sizes may be raised, never lowered); tracking is eased where that made a label
   overflow its block. The design has one palette (the dark ground), so it is forced in both themes. */

/* ------------------------------------------------------------ tokens (shared with the other slices) */
:root:root, :root:root[data-theme="light"], :root:root[data-theme="dark"] {
  --hk-bg:#0E0E10; --hk-card:#1E1E22; --hk-ink:#FFFFFF; --hk-dim:rgba(255,255,255,.65); --hk-mag:#EC5CFF; --hk-mag-press:#C63FDB;
  --hk-paper:#F4F2EE; --hk-purple:#A0219E; --hk-blue:#2D5BE3; --hk-yellow:#F2C230; --hk-red:#D93A2B; --hk-night:#2B2B30; --hk-jpmag:#D63BEA;
  --hk-on-mag:rgba(14,14,16,.8);   /* the frames' 70% dark on magenta measured 4.29:1; 80% clears 4.5 */
  --hk-jp:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --hk-bar-h:144px; --hk-ease:cubic-bezier(.2,.7,.2,1);
  /* the engine's own tokens, set to its dark values so engine-drawn content sits on the same ground */
  --bg:#0E0E10; --ink:#FFFFFF; --ink-40:rgba(255,255,255,.65); --ink-25:rgba(255,255,255,.6); --rule:rgba(255,255,255,.22); --rule-soft:rgba(255,255,255,.1);
  --ph:#1E1E22; --bar:#0E0E10; --bar-ink:#FFFFFF; --bar-60:rgba(255,255,255,.65); --pill:#FFFFFF; --pill-ink:#0E0E10;
  --ink-rgb:255,255,255; --bg-rgb:14,14,16; --accent:#EC5CFF; --accent-ink:#0E0E10; --accent-text:#EC5CFF;
  color-scheme:dark;
}
@media (max-width:767px){ :root:root, :root:root[data-theme="light"], :root:root[data-theme="dark"] { --hk-bar-h:112px } }
html.hk-on body{background:var(--hk-bg);color:var(--hk-ink)}
.hk-vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.hk-i{display:inline-block;flex:none;vertical-align:middle}

/* the engine chrome this shell replaces stays in the DOM (engine code looks it up) but out of sight */
html.hk-on .bar .logo, html.hk-on .bar .tick, html.hk-on .bar .theme, html.hk-on .bar .menu-btn i,
html.hk-on #menu, html.hk-on #scrim, html.hk-on #barplay, html.hk-on .colhead, html.hk-on .tabs, html.hk-on #footer.hk-hidden{display:none !important}
/* the old fixed 48 px bar pushed every page down by hand; the new bar is in the flow */
html.hk-on .cols, html.hk-on .marquee, html.hk-on .places-page, html.hk-on body.bp-on .cols{padding-top:0}
html.hk-on .single{padding-top:0}

/* ------------------------------------------------------------ focus (CuvVr: 3 px white outside, never removed) */
html.hk-on :is(.hk-bar,.hk-play,.hk-pdrawer,.hk-menu,.hk-foot) :is(a,button,input):focus-visible{outline:3px solid #FFFFFF;outline-offset:2px}
html.hk-on :is(.hk-brand,.hk-play,.hk-g-mag,.hk-g-paper,.hk-fweek,.hk-fmark) :is(a,button,input):focus-visible,
html.hk-on .hk-brand:focus-visible{outline-color:#0E0E10}   /* white is invisible on paper and magenta; same ring, dark */
html.hk-on .hk-search input:focus-visible{outline:none}
html.hk-on .hk-search:focus-within{outline:3px solid #FFFFFF;outline-offset:2px}

/* ------------------------------------------------------------ top bar: desktop (Wj3jx) */
html.hk-on .bar.hk-bar{position:sticky;top:0;z-index:60;height:76px;padding:0;gap:0;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,2fr) minmax(330px,1fr);
  align-items:stretch;background:var(--hk-bg);color:var(--hk-ink);box-shadow:none;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--sans)}
.hk-brand{display:flex;align-items:center;gap:12px;padding:0 28px;background:var(--hk-paper);color:#0E0E10;min-width:0;text-decoration:none}
.hk-wm{white-space:nowrap;flex:none;font-size:34px;font-weight:800;letter-spacing:-1.6px;line-height:1}
.hk-jpm{white-space:nowrap;flex:none;font-family:var(--hk-jp);font-size:30px;font-weight:900;letter-spacing:-2px;line-height:1;color:var(--hk-jpmag)}
.hk-wk{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.1;white-space:nowrap}
.hk-wk b{font-size:14.6px;font-weight:800;letter-spacing:1.6px}
.hk-wk span{font-size:14.6px;font-weight:700;letter-spacing:1px;color:rgba(14,14,16,.78)}
.hk-wk:empty, .hk-wk b:empty{display:none}
.hk-nav{display:flex;min-width:0}
.hk-tab{position:relative;flex:1 1 0;min-width:max-content;display:flex;align-items:center;justify-content:center;padding:0 14px;height:76px;
  border-right:1px solid rgba(255,255,255,.1);font-size:15px;font-weight:700;line-height:1.2;color:var(--hk-ink);white-space:nowrap;
  transition:background-color .15s ease-out,color .15s ease-out}
.hk-tab:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--hk-mag);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--hk-ease)}
.hk-tab:hover,.hk-tab:focus-visible{color:var(--hk-mag)}
.hk-tab:hover:after,.hk-tab:focus-visible:after,.hk-tab.here:after{transform:scaleX(1)}
.hk-tab.here{color:var(--hk-mag)}
.hk-tab.open{background:var(--hk-mag);color:#0E0E10}
.hk-tab.open:after{transform:scaleX(0)}
.hk-tools{display:flex;align-items:center;gap:8px;padding:0 14px;min-width:0;justify-content:flex-end}
.hk-search{position:relative;display:flex;align-items:center;flex:1 1 196px;min-width:0;height:40px;border-radius:20px;background:rgba(255,255,255,.08);padding:0 12px;gap:6px}
.hk-sic{display:flex;color:rgba(255,255,255,.65)}
.hk-search input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--hk-ink);font-family:inherit;font-size:14.6px;font-weight:400;padding:0}
.hk-search input::placeholder{color:rgba(255,255,255,.65);opacity:1}
.hk-search input::-webkit-search-cancel-button{filter:invert(1)}
html.hk-on .bar .lang.hk-lang{display:flex;align-items:center;flex:none;height:40px;padding:3px;border-radius:20px;background:rgba(255,255,255,.08);gap:0;margin:0}
html.hk-on .bar .lang.hk-lang > span{display:none}
html.hk-on .bar .lang.hk-lang button{min-height:34px;height:34px;margin:0;padding:0 10px;border-radius:17px;font-size:14.6px;font-weight:800;color:var(--hk-ink);transition:background-color .15s ease-out,color .15s ease-out}
html.hk-on .bar .lang.hk-lang button[data-lang="ja"]{font-family:var(--hk-jp);font-weight:700}
html.hk-on .bar .lang.hk-lang button[aria-pressed="true"]{background:#FFFFFF;color:#0E0E10}
html.hk-on .bar .lang.hk-lang button[aria-pressed="false"]:hover{background:rgba(255,255,255,.16)}
.hk-sbtn{display:none}
html.hk-on .bar .menu-btn.hk-mbtn{display:none}
@media (max-width:1279px){
  html.hk-on .bar.hk-bar{grid-template-columns:auto minmax(0,1fr) auto auto}
  .hk-wk{display:none}
  .hk-tools .hk-search{display:none}
  .hk-tools{padding:0 16px 0 0}
  .hk-sbtn{display:flex;align-items:center;justify-content:center;width:64px;height:76px;color:var(--hk-ink);border-left:1px solid rgba(255,255,255,.1);order:3}
  .hk-tools{order:4}
}
/* ------------------------------------------------------------ top bar: phone and small tablet (p0lEwd) */
@media (max-width:1023px){
  html.hk-on .bar.hk-bar{height:56px;display:flex;border-bottom:0}
  .hk-brand{flex:1 1 auto;padding:0 16px;gap:8px}
  .hk-wm{font-size:24px;letter-spacing:-1px}
  .hk-jpm{font-size:22px;letter-spacing:0}
  .hk-nav, .hk-tools{display:none}
  .hk-sbtn{display:flex;width:56px;height:56px;border-left:0;background:var(--hk-bg);order:0}
  html.hk-on .bar .menu-btn.hk-mbtn{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;width:84px;height:56px;min-height:56px;margin:0;padding:0;
    background:var(--hk-mag);color:#0E0E10;font-size:15px;font-weight:800;transition:background-color .15s ease-out,color .15s ease-out}
  html.hk-on .bar .menu-btn.hk-mbtn span{display:inline}
  .hk-mx{display:none}
  html.hk-on .bar.hk-open .menu-btn.hk-mbtn{background:var(--hk-bg);color:var(--hk-mag);width:auto;padding:0 16px}
  html.hk-on .bar.hk-open .hk-mx{display:flex}
}

/* ------------------------------------------------------------ player bar (E9TH3) */
.hk-play{position:relative;display:flex;align-items:center;gap:22px;min-height:68px;padding:8px 32px;background:var(--hk-mag);color:#0E0E10;font-family:var(--sans)}
.hk-play[hidden]{display:none}
.hk-pbtn{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#0E0E10;color:var(--hk-mag);transition:transform .15s ease-out,background-color .15s ease-out}
.hk-pbtn:hover{transform:scale(1.06)}
.hk-pnow{flex:none;display:flex;flex-direction:column;gap:2px;min-width:0}
.hk-pk{font-size:14.6px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--hk-on-mag);line-height:1.1;white-space:nowrap}
.hk-pk-s{display:none}
.hk-pt{display:flex;align-items:flex-end;gap:10px;font-size:24px;font-weight:800;letter-spacing:-.8px;line-height:1.15;white-space:nowrap}
.hk-eq{display:none;align-items:flex-end;gap:2px;height:14px;margin-bottom:5px}
.hk-eq i{display:block;width:3px;height:14px;background:#0E0E10;transform:scaleY(.3);transform-origin:bottom}
.hk-eq.on{display:inline-flex}
.hk-eq.on i{animation:hk-eq .9s ease-in-out infinite alternate}
.hk-eq.on i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.hk-eq.on i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
@keyframes hk-eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.hk-pprog{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.hk-pn,.hk-pc{font-size:14.6px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hk-pn{font-weight:600}
.hk-pc{font-weight:400;color:var(--hk-on-mag)}   /* CuvVr "Spotify before play": 14 / normal */
.hk-ptrack{display:block;height:4px;background:rgba(14,14,16,.2);overflow:hidden}
.hk-ptrack i{display:block;height:100%;background:#0E0E10;transform-origin:left;transition:transform .45s ease-out}
.hk-pchips{flex:none;display:flex;gap:6px}
.hk-chip{height:30px;padding:0 12px;border-radius:16px;background:rgba(14,14,16,.12);color:#0E0E10;font-size:14.6px;font-weight:700;white-space:nowrap;transition:background-color .15s ease-out,color .15s ease-out}
.hk-chip:hover{background:rgba(14,14,16,.24)}
.hk-chip.on{background:#0E0E10;color:var(--hk-mag)}
.hk-popen{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:14.6px;font-weight:800;white-space:nowrap;color:inherit;
  background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .25s ease-out}
.hk-popen:hover,.hk-popen:focus-visible{background-size:100% 2px}
.hk-plists{display:none;flex:none;align-items:center;gap:4px;font-size:14.6px;font-weight:800;color:#0E0E10;min-height:44px}
.hk-plists[aria-expanded="true"] .hk-i{transform:rotate(180deg)}
@media (max-width:1279px){ .hk-pk-l{display:none} .hk-pk-s{display:inline} }
@media (max-width:1199px){ .hk-play .hk-pchips, .hk-play > .hk-popen{display:none} .hk-plists{display:inline-flex} }
@media (max-width:767px){
  .hk-play{min-height:56px;gap:12px;padding:0 16px;border-bottom:1px solid rgba(14,14,16,.2)}
  .hk-pbtn{width:36px;height:36px}
  .hk-pnow{flex:1 1 auto;gap:1px}
  .hk-pt{font-size:18px;letter-spacing:0}
  .hk-eq{margin-bottom:3px;height:12px} .hk-eq i{height:12px}
  .hk-pprog{display:none}
}
/* the drawer: playlists, the Spotify window after Play, the consent line before it (CuvVr "Spotify before play") */
.hk-pdrawer{background:var(--hk-card);color:var(--hk-ink);padding:14px 32px 16px;display:grid;gap:12px;font-family:var(--sans)}
.hk-pdrawer[hidden]{display:none}
.hk-dchips{display:flex;flex-wrap:wrap;gap:6px}
.hk-dchips .hk-chip{background:rgba(255,255,255,.08);color:var(--hk-ink)}
.hk-dchips .hk-chip:hover{background:rgba(255,255,255,.16)}
.hk-dchips .hk-chip.on{background:var(--hk-mag);color:#0E0E10}
@media (min-width:1200px){ .hk-dchips{display:none} }
.hk-dhold{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hk-dload{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;background:var(--hk-mag);color:#0E0E10;font-size:15px;font-weight:800;transition:background-color .15s ease-out,color .15s ease-out}
.hk-dload:hover{background:#0E0E10;color:var(--hk-mag);box-shadow:inset 0 0 0 1px var(--hk-mag)}
.hk-dload:active{background:var(--hk-mag-press);color:#0E0E10}
.hk-dnote{margin:0;font-size:14.6px;font-weight:400;line-height:1.4;color:var(--hk-dim)}
@media (min-width:768px){ .hk-dhold .hk-dnote{display:none} }   /* the bar already shows the line beside Play */
.hk-dembed iframe{display:block;width:100%;height:152px;border:0;border-radius:12px;background:#000}
.hk-dfoot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hk-dfoot .hk-popen{color:var(--hk-mag)}
.hk-dclose{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--hk-ink);transition:color .15s ease-out}
.hk-dclose:hover{color:var(--hk-mag)}
@media (max-width:767px){ .hk-pdrawer{padding:12px 16px 14px} }

/* ------------------------------------------------------------ menu: desktop mega menu (g6BYdJ) */
.hk-dim{position:fixed;left:0;right:0;bottom:0;top:var(--hk-mtop,0);z-index:57;background:rgba(14,14,16,.8);opacity:0;transition:opacity .2s ease-out}
.hk-dim.in{opacity:1}
.hk-dim[hidden]{display:none}
.hk-menu{position:fixed;left:0;right:0;top:var(--hk-mtop,76px);z-index:58;max-height:calc(100vh - var(--hk-mtop,76px));max-height:calc(100dvh - var(--hk-mtop,76px));overflow:auto;overscroll-behavior:contain;
  background:var(--hk-bg);color:var(--hk-ink);font-family:var(--sans);opacity:0;transform:translateY(-8px);transition:opacity .2s ease-out,transform .25s var(--hk-ease)}
.hk-menu.in{opacity:1;transform:none}
.hk-menu[hidden]{display:none}
.hk-menu:focus{outline:none}
.hk-msearch{display:none;padding:14px 16px;background:var(--hk-bg)}
.hk-msearch .hk-search{height:46px;border-radius:23px;padding:0 16px;max-width:560px}
.hk-msearch .hk-search input{font-size:15px}
.hk-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hk-grp{display:flex;flex-direction:column;min-height:470px;padding:28px 28px 26px}
.hk-g-card{background:var(--hk-card);color:var(--hk-ink)} .hk-g-mag{background:var(--hk-mag);color:#0E0E10}
.hk-g-paper{background:var(--hk-paper);color:#0E0E10} .hk-g-blue{background:var(--hk-blue);color:#FFFFFF}
.hk-gh{margin:0 0 18px;font:inherit}
.hk-gk{display:block;font-size:14.6px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;line-height:1.1}
.hk-gt{display:none}
.hk-glinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.hk-gl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:41px;padding:0;font-size:25.36px;font-weight:800;letter-spacing:-.8px;line-height:1.2;color:inherit;   /* the old menu's 25.36px wins over the frame's 24 (owner: never lower a size) */
  transition:background-color .15s ease-out,color .15s ease-out,padding .15s ease-out}
.hk-gl .hk-i{opacity:0;transition:opacity .15s ease-out}
.hk-gl:hover,.hk-gl:focus-visible{background:#0E0E10;color:var(--hk-mag);padding:0 12px}
.hk-g-card .hk-gl:hover,.hk-g-card .hk-gl:focus-visible{background:var(--hk-mag);color:#0E0E10}
.hk-gl:hover .hk-i,.hk-gl:focus-visible .hk-i{opacity:1}
.hk-gfact{margin:auto 0 0;padding-top:14px;border-top:1px solid currentColor;border-top-color:rgba(255,255,255,.25);display:flex;flex-direction:column;gap:6px}
.hk-g-mag .hk-gfact,.hk-g-paper .hk-gfact{border-top-color:rgba(14,14,16,.25)}
.hk-gfact[hidden]{display:none}
@media (min-width:768px){ .hk-gfact{min-height:72px} }   /* the rules line up across the four blocks, as in the frame */
.hk-fk{font-size:14.6px;font-weight:800;letter-spacing:2px;text-transform:uppercase;line-height:1.1}
.hk-ft{font-size:14.6px;font-weight:600;line-height:1.4}
.hk-gfact :lang(ja), [lang="ja"] .hk-ft{font-family:var(--hk-jp)}
.hk-ls{display:none}
.hk-mbase{display:flex;align-items:center;gap:28px;min-height:60px;padding:0 28px;border-top:1px solid rgba(255,255,255,.1);background:var(--hk-bg)}
.hk-mlinks{display:flex;flex-wrap:wrap;gap:8px 28px}
.hk-mlinks a,.hk-mclose,.hk-malt{font-size:15px;font-weight:700;color:var(--hk-ink);background:linear-gradient(var(--hk-mag),var(--hk-mag)) left bottom/0 2px no-repeat;padding:4px 0;transition:background-size .25s ease-out,color .15s ease-out}
.hk-mlinks a:hover,.hk-mlinks a:focus-visible,.hk-malt:hover,.hk-malt:focus-visible{background-size:100% 2px}
.hk-msp{flex:1}
.hk-malt{display:inline-flex;align-items:center;gap:6px;color:var(--hk-mag)}
.hk-malt[lang="ja"],.hk-malt :lang(ja){font-family:var(--hk-jp)}
.hk-malt-s{display:none}
.hk-mclose{display:inline-flex;align-items:center;gap:8px;font-weight:800}
.hk-mclose:hover{color:var(--hk-mag)}
@media (max-width:1279px){ .hk-msearch{display:block} }
@media (max-width:1279px){ .hk-groups{grid-template-columns:repeat(2,minmax(0,1fr))} .hk-grp{min-height:0} .hk-gfact{margin-top:32px} }
/* ------------------------------------------------------------ menu: phone sheet (snUWD) */
@media (max-width:767px){
  html.hk-menu-open{overflow:hidden}
  .hk-menu{bottom:0;max-height:none}
  .hk-groups{grid-template-columns:1fr}
  .hk-grp{min-height:0;padding:18px 16px 16px;gap:12px}
  .hk-gh{margin:0}
  .hk-gk{display:none}
  .hk-gt{display:block;font-size:30px;font-weight:800;letter-spacing:-1.1px;line-height:1.2}
  .hk-glinks{gap:2px}   /* at 25.36px two columns no longer fit 390, so one column */
  .hk-gl{min-height:36px;font-weight:700;letter-spacing:-.4px}
  .hk-gl .hk-i{display:none}
  .hk-gl:hover,.hk-gl:focus-visible{padding:0 6px}
  .hk-gfact{display:block;margin:0;padding:0;border:0}
  .hk-gfact > span{display:inline}
  .hk-fk{letter-spacing:1px}
  .hk-gfact .hk-fk:after{content:" · ";white-space:pre}
  .hk-ll{display:none} .hk-ls{display:inline}
  .hk-ft{font-weight:800;letter-spacing:.4px;line-height:1.3}
  .hk-mbase{gap:16px;min-height:77px;padding:16px;flex-wrap:wrap;border-top:0}
  .hk-mlinks{gap:8px 16px}
  .hk-mlinks a{font-size:14.6px}
  .hk-msp,.hk-mclose{display:none}
  .hk-malt{display:inline-flex;align-items:center;height:31px;padding:0 12px;border-radius:14px;background:rgba(255,255,255,.08);color:var(--hk-ink);font-size:14.6px}
  .hk-malt .hk-i,.hk-malt-l{display:none}
  .hk-malt-s{display:inline}
}

/* ------------------------------------------------------------ footer (Hvx6x / cvAV8) */
.hk-foot{background:var(--hk-bg);color:var(--hk-ink);font-family:var(--sans)}
.hk-fblocks{display:grid;grid-template-columns:2fr 1fr 1fr;min-height:190px}
.hk-fmark{display:flex;align-items:center;gap:24px;padding:30px 32px;background:var(--hk-mag);color:#0E0E10;min-width:0}
.hk-fjp{font-family:var(--hk-jp);font-size:130px;font-weight:900;letter-spacing:-6px;line-height:1;flex:none}
.hk-fname{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:420px}
.hk-fwm{font-size:40px;font-weight:800;letter-spacing:-1.6px;line-height:1.2}
.hk-fmean{margin:0;font-size:14.6px;font-weight:600;line-height:1.4}
.hk-fmean[lang="ja"]{font-family:var(--hk-jp)}
.hk-fcount{font-size:14.6px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;line-height:1.1;margin-top:4px}
.hk-fcount:empty{display:none}
.hk-fsecs{display:flex;flex-direction:column;gap:14px;padding:26px 28px}
.hk-fsecs > .hk-fk{color:var(--hk-mag);letter-spacing:2.4px}
.hk-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 12px}   /* one column where two no longer fit at 25.36px */
.hk-fgrid > div{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.hk-fl{font-size:25.36px;font-weight:800;letter-spacing:-.6px;line-height:1.2;color:var(--hk-ink);white-space:nowrap;
  background:linear-gradient(var(--hk-mag),var(--hk-mag)) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .25s ease-out,color .15s ease-out}
.hk-fl:hover,.hk-fl:focus-visible{background-size:100% 2px;color:var(--hk-mag)}
.hk-fweek{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 28px 18px;background:var(--hk-paper);color:#0E0E10}
.hk-fk-p{color:var(--hk-purple);letter-spacing:2.4px}
.hk-fwt{margin:0;font-size:18px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.hk-fwt:empty{display:none}
.hk-fbtn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;background:#0E0E10;color:var(--hk-mag);font-size:15px;font-weight:800;transition:background-color .15s ease-out,color .15s ease-out}
.hk-fbtn:hover{background:var(--hk-mag);color:#0E0E10}
.hk-fbtn:active{background:var(--hk-mag-press);color:#0E0E10}
.hk-fwmob{display:none}
.hk-fxl{display:flex;flex-wrap:wrap;gap:6px 18px}
.hk-fxl a{display:inline-flex;align-items:center;gap:4px;font-size:14.6px;font-weight:700;color:#0E0E10;background:linear-gradient(var(--hk-purple),var(--hk-purple)) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .25s ease-out}
.hk-fxl a[lang="ja"]{font-family:var(--hk-jp)}
.hk-fxl a:hover,.hk-fxl a:focus-visible{background-size:100% 2px}
.hk-fbase{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;min-height:49px;padding:12px 32px}
.hk-ftag{margin:0 auto 0 0;font-size:14.6px;font-weight:400;line-height:1.3;color:var(--hk-dim)}
.hk-ftag[lang="ja"]{font-family:var(--hk-jp)}
.hk-flinks{display:flex;flex-wrap:wrap;gap:8px 28px}
.hk-flinks a,.hk-fmade{font-size:14.6px;font-weight:700;color:var(--hk-ink);background:linear-gradient(var(--hk-mag),var(--hk-mag)) left bottom/0 2px no-repeat;padding-bottom:2px;transition:background-size .25s ease-out}
.hk-flinks a:hover,.hk-flinks a:focus-visible,.hk-fmade:hover,.hk-fmade:focus-visible{background-size:100% 2px}
.hk-fmade{color:var(--hk-mag)}
.hk-fmade [lang="ja"],.hk-fmade[lang="ja"],.hk-flang{font-family:var(--hk-jp)}
.hk-flang{display:none !important}
@media (max-width:1199px){ .hk-fjp{font-size:96px;letter-spacing:-4px} .hk-fwm{font-size:32px} }
/* audit 2026-10-16: the frame's Sections block holds two columns (Hvx6x). At the kept 25.36px the two longest links need
   ~360px, more than a quarter of the page, so from 1280px the block takes its content width and the mark gives way */
@media (min-width:1280px){
  .hk-fblocks{grid-template-columns:minmax(0,2fr) max-content minmax(0,1fr)}
  .hk-fgrid{grid-template-columns:max-content max-content;column-gap:32px}
}
@media (max-width:1023px){
  .hk-fblocks{grid-template-columns:1fr 1fr}
  .hk-fmark{grid-column:1/-1}
}
@media (max-width:767px){
  .hk-fblocks{grid-template-columns:1fr;min-height:0}
  .hk-fmark{gap:14px;padding:20px 16px;align-items:center;min-height:129px}
  .hk-fjp{font-size:64px;letter-spacing:-3px}
  .hk-fname{gap:4px}
  .hk-fwm{font-size:26px;letter-spacing:-1px}
  .hk-fmean{font-size:14.6px;line-height:1.35}
  .hk-fcount{display:none}
  .hk-fsecs{padding:20px 16px}
  .hk-fgrid{grid-template-columns:max-content max-content;column-gap:24px}   /* cvAV8: two columns, "Studio sound" on one line */
  @media (max-width:379px){ .hk-fgrid{grid-template-columns:1fr} }          /* narrower than the frame: one column, never sideways */
  .hk-fsecs > .hk-fk{display:none}
  .hk-fl-x{display:none}
  .hk-fweek{padding:16px}
  .hk-fweek > :not(.hk-fwmob){display:none}
  .hk-fwmob{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  .hk-fwmob b{font-size:16px;font-weight:800;line-height:1.2}
  .hk-fbtn-s{height:37px;padding:0 14px;font-size:14.6px;gap:6px}
  .hk-fbase{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 16px 24px}
  .hk-ftag{display:none}
  .hk-flinks{gap:8px 16px}
  .hk-flinks a{font-size:14.6px}
  .hk-flang{display:inline !important}
}

/* ------------------------------------------------------------ motion: reveal helper (window.hkReveal) */
.hk-rv{opacity:0;transform:translateY(12px)}
.hk-rv.hk-rv-in{opacity:1;transform:none;transition:opacity .45s ease-out var(--hk-rv-d,0ms),transform .45s ease-out var(--hk-rv-d,0ms)}
@media (prefers-reduced-motion:reduce){
  .hk-rv{opacity:1 !important;transform:none !important}
  .hk-eq.on i{animation:none !important;transform:scaleY(.6)}
  .hk-tab,.hk-tab:after,.hk-chip,.hk-popen,.hk-gl,.hk-gl .hk-i,.hk-menu,.hk-dim,.hk-fl,.hk-flinks a,.hk-fmade,.hk-mlinks a,.hk-malt,.hk-fbtn,.hk-fxl a,.hk-pbtn,.hk-ptrack i,.hk-dload{transition:none !important}
  .hk-pbtn:hover{transform:none}
}

/* hk-home — Hakken home, the 2026-10-16 redesign (slice B). Pencil hakken.pen: FTPFx (1440), v26zO (390), JA Rw4L6 (390).
   Everything is scoped to html.hk-home-on, which hk-home.js sets on the real home only (EN and JA), never on signal or
   source pages. Sizes, colours and spacing are the frames' numbers; the type family stays the site's own (var(--sans)).
   The page is fluid: grids add columns as the screen grows (hk-home.js sets --hk-c), nothing sits in a centred column.
   Breakpoints: < 768 the 390 frames; 768–1023 two-column tablet; >= 1024 the 1440 frame.
   Deliberate differences from the frames are listed in the slice report (ops/review/build-2026-10-16). */

html.hk-home-on #home > :not(#hk-home), html.hk-home-on #tabs { display: none !important; }
html.hk-home-on #home { padding: 0; margin: 0; max-width: none; }
#hk-home {
  --hk-bg: #0E0E10; --hk-ink: #FFFFFF; --hk-dim: rgba(255, 255, 255, .65); --hk-rule: rgba(255, 255, 255, .12);
  --hk-mag: #EC5CFF; --hk-paper: #F4F2EE; --hk-black: #111111; --hk-card: #1E1E22; --hk-floor: 14.6px;
  --hk-blue: #2D5BE3; --hk-yellow: #F2C230; --hk-red: #D93A2B; --hk-grey: #2B2B30;
  display: block; width: 100%; margin: 0; padding: 0; background: var(--hk-bg); color: var(--hk-ink);
  font-family: var(--sans); overflow-x: clip;
}
#hk-home *, #hk-home *::before, #hk-home *::after { box-sizing: border-box; }
#hk-home a { color: inherit; text-decoration: none; }
#hk-home h2, #hk-home h3, #hk-home p, #hk-home ol, #hk-home ul { margin: 0; padding: 0; }
#hk-home ul, #hk-home ol { list-style: none; }
#hk-home button { font-family: var(--sans); color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; }
#hk-home [hidden] { display: none !important; }
#hk-home .hk-i { display: block; flex: none; }
#hk-home .hb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#hk-home :lang(ja) { letter-spacing: 0; }

/* the engine's sections, re-parented: their own chrome off, only our part shows */
#hk-home > .hb-sec { display: block; position: static; margin: 0; padding: 0; border: 0; background: none; max-width: none; width: auto; min-height: 0; height: auto; box-shadow: none; }
#hk-home > #latest > :not(.hb-lt), #hk-home > #radar > :not(.hb-rad), #hk-home > #pairs > :not(.hb-pairs),
#hk-home > #japan > :not(.hb-jn), #hk-home > #sound > :not(.hb-snd) { display: none !important; }

/* focus: 3 px ring outside the element, never removed (design system CuvVr); dark ring on light ground */
#hk-home a:focus-visible, #hk-home button:focus-visible { outline: 3px solid #fff; outline-offset: 0; position: relative; z-index: 3; }
#hk-home .hb-lt button:focus-visible, #hk-home .hb-jin a:focus-visible, #hk-home .hb-show.hb-c2:focus-visible,
#hk-home .hb-show.hb-c3:focus-visible, #hk-home .hb-pick.hb-p2 :focus-visible, #hk-home .hb-pick.hb-p0 :focus-visible { outline-color: var(--hk-bg); }

/* ------------------------------------------------------------ the tile: picture, shade, kicker, headline, source */
#hk-home .hb-t {
  --h: 28px; --ls: -.9px; --lh: 1.04; --pad: 26px; --gap: 10px; --k: 12px; --kls: 2.2px; --tw: 18px; --d: 15px; --s: 11px;
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--gap);
  padding: 0 var(--pad) var(--pad); overflow: hidden; background: var(--hk-card); color: var(--hk-ink); min-width: 0; isolation: isolate;
}
#hk-home .hb-t .hb-pic { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
#hk-home .hb-t .hb-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 450ms ease-out; }
#hk-home .hb-t::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 16, 0) 22%, rgba(14, 14, 16, .55) 52%, rgba(14, 14, 16, .95) 100%); }   /* audit: contrast on light pictures */
#hk-home .hb-tx { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
#hk-home .hb-k { display: flex; align-items: center; gap: 10px; font: 800 max(var(--k), var(--hk-floor))/1.25 var(--sans); letter-spacing: var(--kls); text-transform: uppercase; color: var(--hk-ink); }
#hk-home .hb-k i { flex: none; width: var(--tw); height: 4px; background: var(--hk-mag); }
#hk-home .hb-k :lang(ja), #hk-home .hb-k:lang(ja) { letter-spacing: .6px; }
#hk-home .hb-h { font: 800 max(var(--h), var(--hk-floor))/var(--lh) var(--sans); letter-spacing: var(--ls); color: var(--hk-ink); overflow-wrap: anywhere; }
#hk-home .hb-h:lang(ja) { font-weight: 700; line-height: 1.3; letter-spacing: 0; font-size: calc(var(--h) * .86); }
#hk-home .hb-h span { background: linear-gradient(var(--hk-mag), var(--hk-mag)) no-repeat 0 100% / 0 3px; transition: background-size 300ms ease-out; padding-bottom: 2px; }
#hk-home .hb-d { font: 400 max(var(--d), var(--hk-floor))/1.4 var(--sans); color: var(--hk-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#hk-home .hb-s { font: 700 max(var(--s), var(--hk-floor))/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hk-mag); }
#hk-home .hb-m, #hk-home .hb-fbs { display: none; }
#hk-home .hb-t:hover .hb-pic img, #hk-home .hb-t:focus-visible .hb-pic img { transform: scale(1.03); }
#hk-home .hb-t:hover .hb-h span, #hk-home .hb-t:focus-visible .hb-h span { background-size: 100% 3px; }

/* no picture (or a broken one): the design system's typographic block, never an empty box */
#hk-home .hb-t.hb-nopic .hb-pic { display: none; }
#hk-home .hb-t.hb-nopic::before { display: none; }
#hk-home .hb-t.hb-nopic { justify-content: space-between; padding-top: var(--pad); }
#hk-home .hb-t.hb-nopic .hb-fbs { display: block; font: 800 44px/1.2 var(--sans); letter-spacing: -1.8px; text-transform: uppercase; overflow-wrap: anywhere; }
#hk-home .hb-t.hb-nopic .hb-s { display: none; }
#hk-home .hb-t.hb-nopic.hb-fb0 { background: var(--hk-yellow); }
#hk-home .hb-t.hb-nopic.hb-fb1 { background: var(--hk-blue); }
#hk-home .hb-t.hb-nopic.hb-fb2 { background: var(--hk-paper); }
#hk-home .hb-t.hb-nopic.hb-fb0, #hk-home .hb-t.hb-nopic.hb-fb2 { --hk-ink: #0E0E10; --hk-dim: rgba(14, 14, 16, .72); color: #0E0E10; }
#hk-home .hb-t.hb-nopic .hb-k i { background: currentColor; }
#hk-home .hb-t.hb-nopic.hb-fb1 .hb-k i { background: var(--hk-mag); }
#hk-home .hb-t.hb-nopic .hb-h span { background-image: linear-gradient(currentColor, currentColor); }
#hk-home .hb-t.hb-nopic .hb-h { font-size: min(var(--h), 22px); line-height: 1.08; letter-spacing: 0; }

/* ------------------------------------------------------------ 1 · three lead tiles: 2 : 1 : 1, 620 high */
#hk-home .hb-three { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 620px; }
/* audit 2026-10-16: the frames' 1.02–1.05 are Inter values; in the locked Hiragino Sans the lines touched, so 1.1 */
#hk-home .hb-three .hb-t { --h: clamp(28px, 2.64vw, 38px); --ls: -1.4px; --lh: 1.1; --pad: 28px; --gap: 12px; --k: 13px; --kls: 2.5px; --tw: 22px; --d: 16px; --s: 12px; padding-bottom: 30px; }
#hk-home .hb-three .hb-t.hb-w2 { --h: clamp(40px, 3.9vw, 56px); --ls: -2px; }

/* ------------------------------------------------------------ 2 · mosaic: --hk-c columns, rows 500 / 460 */
#hk-home .hb-mos { display: grid; grid-template-columns: repeat(var(--hk-c, 4), 1fr); grid-auto-rows: 500px 460px; grid-auto-flow: row dense; }
#hk-home .hb-mos .hb-t.hb-w2 { grid-column: span 2; --h: clamp(36px, 3.2vw, 46px); --ls: -1.8px; }

/* ------------------------------------------------------------ 3 · Latest, on paper */
#hk-home > #latest { background: var(--hk-paper); color: var(--hk-black); }
#hk-home .hb-lhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; padding: 48px 32px 28px; }
#hk-home .hb-lt1 { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; min-width: 0; }
#hk-home .hk-H { font: 800 80px/.9 var(--sans); letter-spacing: -3.5px; color: var(--hk-black); }
#hk-home .hk-H:lang(ja) { font-weight: 900; line-height: 1.1; }
#hk-home .hb-sub { font: 500 17px/1.2 var(--sans); color: rgba(17, 17, 17, .68); padding-bottom: 6px; }
#hk-home .hb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#hk-home .hb-chips button { font: 600 15px/18px var(--sans); padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(17, 17, 17, .2); color: var(--hk-black); white-space: nowrap; transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
#hk-home .hb-chips button:hover { background: rgba(17, 17, 17, .08); }
#hk-home .hb-chips button[aria-pressed="true"] { background: var(--hk-black); border-color: var(--hk-black); color: #fff; }
#hk-home .hb-lbody { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
#hk-home .hb-wall { display: grid; grid-template-columns: repeat(var(--hk-c, 3), 1fr); grid-auto-rows: 440px 400px 420px; grid-auto-flow: row dense; }
#hk-home .hb-wall .hb-t { --h: 26px; --ls: -.8px; --lh: 1.1; --pad: 24px; --gap: 9px; }
#hk-home .hb-wall .hb-t.hb-w2 { grid-column: span 2; --h: clamp(32px, 2.8vw, 40px); --ls: -1.5px; }
#hk-home .hb-jin { align-self: stretch; padding: 28px 24px; border-left: 1px solid rgba(17, 17, 17, .2); }
#hk-home .hb-jh { font: 800 max(13px, var(--hk-floor))/1.2 var(--sans); letter-spacing: 3px; text-transform: uppercase; color: var(--hk-black); }
#hk-home .hb-jh:lang(ja) { letter-spacing: .6px; }
#hk-home .hb-jin li a { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(17, 17, 17, .094); }
#hk-home .hb-jin time { flex: 0 0 44px; font: 700 max(13px, var(--hk-floor))/1.2 var(--sans); color: #B21FD6; font-variant-numeric: tabular-nums; }
#hk-home .hb-jin span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#hk-home .hb-jin b { font: 600 15px/1.3 var(--sans); color: var(--hk-black); background: linear-gradient(var(--hk-mag), var(--hk-mag)) no-repeat 0 100% / 0 2px; transition: background-size 300ms ease-out; justify-self: start; }
#hk-home .hb-jin a:hover b, #hk-home .hb-jin a:focus-visible b { background-size: 100% 2px; }
#hk-home .hb-jin small { font: 400 max(13px, var(--hk-floor))/1.2 var(--sans); color: rgba(17, 17, 17, .68); }
#hk-home .hb-empty { padding: 24px 32px; font: 500 17px/1.4 var(--sans); color: var(--hk-black); }
#hk-home .hb-more-w { display: flex; justify-content: center; padding: 36px 0 48px; }
#hk-home .hb-more { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/18px var(--sans); padding: 16px 32px; border-radius: 999px; background: var(--hk-black); color: #fff; transition: background-color 150ms ease-out; }
#hk-home .hb-more:hover { background: #333; }

/* ------------------------------------------------------------ 4 · Radar strip: 120 high, intro 360 + 180 cells */
#hk-home > #radar { background: var(--hk-bg); }
#hk-home .hb-rad { display: flex; min-height: 120px; }
#hk-home .hb-ri { flex: 0 0 360px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px 32px; }
#hk-home .hb-rt { display: flex; align-items: flex-end; gap: 12px; }
#hk-home .hb-rh { font: 800 36px/44px var(--sans); letter-spacing: -1.4px; color: var(--hk-ink); }
#hk-home .hb-rh:lang(ja) { font-weight: 900; }
#hk-home .hb-allsig { display: inline-flex; align-items: center; gap: 4px; font: 700 max(14px, var(--hk-floor))/1.2 var(--sans); color: var(--hk-mag); padding-bottom: 7px; background: linear-gradient(var(--hk-mag), var(--hk-mag)) no-repeat 0 100% / 0 2px; transition: background-size 300ms ease-out; }
#hk-home .hb-allsig:hover, #hk-home .hb-allsig:focus-visible { background-size: 100% 2px; }
#hk-home .hb-rd { font: 400 max(13px, var(--hk-floor))/1.2 var(--sans); color: var(--hk-dim); }
#hk-home .hb-cells { flex: 1 1 auto; display: flex; min-width: 0; }
#hk-home .hb-cells li { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--hk-rule); }
#hk-home .hb-rad.hb-open .hb-cells { flex-wrap: wrap; }
#hk-home .hb-rad.hb-open .hb-cells li { flex: 1 0 180px; border-bottom: 1px solid var(--hk-rule); }
#hk-home .hb-sig { display: flex; flex-direction: column; justify-content: center; gap: 8px; height: 100%; min-height: 120px; padding: 12px 18px; }
#hk-home .hb-num { display: flex; align-items: flex-end; gap: 8px; }
#hk-home .hb-num b { font: 800 30px/1 var(--sans); letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--hk-ink); display: inline-block; }
#hk-home .hb-num i { font: 800 max(13px, var(--hk-floor))/1.2 var(--sans); font-style: normal; color: var(--hk-mag); }
#hk-home .hb-neg .hb-num i { color: var(--hk-dim); }
#hk-home .hb-track { display: block; height: 4px; background: rgba(255, 255, 255, .1); }
#hk-home .hb-track i { display: block; height: 100%; background: var(--hk-mag); transform-origin: 0 50%; }
#hk-home .hb-neg .hb-track i { background: rgba(255, 255, 255, .4); }
#hk-home .hb-rad.hb-grow0 .hb-track i { transform: scaleX(0); }
#hk-home .hb-rad.hb-grow .hb-track i { transform: scaleX(1); transition: transform 450ms ease-out; }
#hk-home .hb-sn { font: 700 max(13px, var(--hk-floor))/1.2 var(--sans); color: var(--hk-ink); align-self: flex-start; background: linear-gradient(var(--hk-mag), var(--hk-mag)) no-repeat 0 100% / 0 2px; transition: background-size 300ms ease-out; }
#hk-home .hb-sig:hover .hb-sn, #hk-home .hb-sig:focus-visible .hb-sn { background-size: 100% 2px; }

/* ------------------------------------------------------------ 5 · Japan ⇄ World */
#hk-home .hb-ph { display: flex; align-items: flex-end; gap: 20px; padding: 56px 32px 32px; font: 800 96px/.9 var(--sans); letter-spacing: -4px; color: var(--hk-ink); }
#hk-home .hb-ph:lang(ja), #hk-home .hb-ph :lang(ja) { font-weight: 900; line-height: 1.1; }
#hk-home .hb-ph .hk-i { color: var(--hk-mag); align-self: center; }
#hk-home .hb-plist { display: grid; grid-template-columns: 1fr; }
#hk-home .hb-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 460px; }
#hk-home .hb-pair .hb-t { --h: 38px; --ls: -1.4px; --lh: 1.1; --pad: 32px; padding-bottom: 30px; }
#hk-home .hb-pair .hb-t .hb-h:lang(ja) { font-size: 34px; }
#hk-home .hb-badge { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 22px; background: var(--hk-mag); color: #0E0E10; font: 800 max(14px, var(--hk-floor))/1.2 var(--sans); white-space: nowrap; transition: background-color 150ms ease-out; }
#hk-home .hb-badge:hover { background: #F28BFF; }
#hk-home .hb-badge:focus-visible { outline-offset: 2px; }

/* ------------------------------------------------------------ 6 · Japan now */
#hk-home .hb-jhead { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding: 56px 32px 32px; }
#hk-home .hk-H2 { font: 800 72px/1.2 var(--sans); letter-spacing: -3px; color: var(--hk-ink); }
#hk-home .hk-H2:lang(ja) { font-weight: 900; letter-spacing: 0; }
#hk-home .hb-j2 { font: 700 28px/1.45 var(--sans); color: var(--hk-mag); }
#hk-home .hb-j2:lang(ja) { font-weight: 900; }
#hk-home .hb-jd { font: 400 16px/1.2 var(--sans); color: var(--hk-dim); padding-bottom: 12px; }
#hk-home .hb-shows { display: grid; grid-template-columns: repeat(var(--hk-c, 4), 1fr); grid-auto-rows: 420px; }
#hk-home .hb-show { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 28px 30px; color: #0E0E10; min-width: 0; transition: filter 150ms ease-out; }
#hk-home .hb-show:hover { filter: brightness(1.06); }
#hk-home .hb-show.hb-c0 { background: var(--hk-mag); }
#hk-home .hb-show.hb-c1 { background: var(--hk-blue); color: #fff; }
#hk-home .hb-show.hb-c2 { background: var(--hk-yellow); }
#hk-home .hb-show.hb-c3 { background: var(--hk-paper); }
#hk-home .hb-st { display: flex; flex-direction: column; gap: 14px; }
#hk-home .hb-sl { font: 800 max(12px, var(--hk-floor))/1.2 var(--sans); letter-spacing: 2.4px; text-transform: uppercase; }
#hk-home .hb-sl:lang(ja), #hk-home:lang(ja) .hb-sl { letter-spacing: .6px; }
#hk-home .hb-sd { font: 800 clamp(28px, 2.78vw, 40px)/1 var(--sans); letter-spacing: -1.6px; }
#hk-home .hb-sd:lang(ja), #hk-home:lang(ja) .hb-sd { letter-spacing: 0; font-weight: 900; }
#hk-home .hb-sb { display: flex; flex-direction: column; gap: 10px; }
#hk-home .hb-sn2 { font: 800 26px/1.08 var(--sans); letter-spacing: -.8px; overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px; transition: background-size 300ms ease-out; align-self: flex-start; }
#hk-home .hb-show:hover .hb-sn2, #hk-home .hb-show:focus-visible .hb-sn2 { background-size: 100% 2px; }
#hk-home .hb-sp { font: 600 max(14px, var(--hk-floor))/1.2 var(--sans); }
#hk-home .hb-ps { display: none; }
#hk-home .hb-wp { display: grid; grid-template-columns: repeat(var(--hk-w, 2), 1fr) 2fr; grid-auto-rows: 400px; }
#hk-home .hb-wp .hb-t { --h: 34px; --ls: -1.2px; --lh: 1.1; --pad: 32px; padding-bottom: 30px; }
#hk-home .hb-press { display: flex; flex-direction: column; justify-content: space-between; padding: 32px 36px; background: var(--hk-bg); min-width: 0; }
#hk-home .hb-pk { font: 800 max(12px, var(--hk-floor))/1.2 var(--sans); letter-spacing: 2.4px; text-transform: uppercase; color: var(--hk-mag); }
#hk-home .hb-press ul { display: flex; flex-direction: column; gap: 22px; }
#hk-home .hb-press li a { font: 800 30px/1.12 var(--sans); letter-spacing: -1px; color: var(--hk-ink); background: linear-gradient(var(--hk-mag), var(--hk-mag)) no-repeat 0 100% / 0 3px; transition: background-size 300ms ease-out; }
#hk-home .hb-press li + li a { color: var(--hk-dim); }
#hk-home .hb-press li a:hover, #hk-home .hb-press li a:focus-visible { background-size: 100% 3px; }
#hk-home .hb-ps2 { font: 700 max(11px, var(--hk-floor))/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hk-mag); }

/* ------------------------------------------------------------ 7 · Studio sound: 100 high, intro 240 + one pick per playlist */
#hk-home > #sound { background: #17171A; }
#hk-home .hb-snd { display: flex; min-height: 100px; }
#hk-home .hb-si { flex: 0 0 auto; width: min-content; min-width: 240px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 20px; background: var(--hk-bg); }
#hk-home .hb-sh { font: 800 30px/36px var(--sans); letter-spacing: -1.1px; color: var(--hk-ink); white-space: nowrap; }   /* audit: one line, as R76Zs (Hiragino's Latin is wider than the frame's Inter) */
#hk-home .hb-sh:lang(ja) { font-weight: 900; letter-spacing: 0; }
#hk-home .hb-sdd { font: 400 max(12px, var(--hk-floor))/1.2 var(--sans); color: var(--hk-dim); }
#hk-home .hb-sdm { display: none; font: 400 max(12px, var(--hk-floor))/1.2 var(--sans); color: var(--hk-dim); }
#hk-home .hb-picks { flex: 1 1 auto; display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
#hk-home .hb-picks::-webkit-scrollbar { display: none; }
#hk-home .hb-pick { --fg: #0E0E10; --pb: #0E0E10; --pi: var(--hk-mag); position: relative; flex: 1 0 220px; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px 30px 10px 18px; color: var(--fg); }
#hk-home .hb-pick.hb-p0 { background: var(--hk-paper); }   /* the frame's magenta, turned paper: it sits on the magenta footer mark (CuvVr: two blocks of one colour never touch) */
#hk-home .hb-pick.hb-p1 { background: var(--hk-blue); --fg: #fff; --pb: #fff; --pi: var(--hk-blue); }
#hk-home .hb-pick.hb-p2 { background: var(--hk-yellow); --pi: var(--hk-yellow); }
#hk-home .hb-pick.hb-p3 { background: var(--hk-red); --fg: #fff; --pb: #fff; --pi: var(--hk-red); }
#hk-home .hb-pick.hb-p4 { background: var(--hk-grey); --fg: #fff; --pb: #fff; --pi: var(--hk-grey); }
#hk-home .hb-play { flex: none; width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--pb) !important; color: var(--pi) !important; transition: transform 150ms ease-out; }
#hk-home .hb-play:hover { transform: scale(1.06); }
#hk-home .hb-pt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#hk-home .hb-plab { font: 800 max(10px, var(--hk-floor))/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; }
#hk-home .hb-plab:lang(ja), #hk-home:lang(ja) .hb-plab { letter-spacing: .6px; }
#hk-home .hb-pt b { font: 800 24px/1 var(--sans); letter-spacing: -.8px; }
#hk-home .hb-ptr { display: block; width: 146px; max-width: 100%; height: 3px; background: color-mix(in srgb, var(--fg) 25%, transparent); }
#hk-home .hb-ptr i { display: block; height: 100%; background: var(--fg); }
#hk-home .hb-ext { position: absolute; top: 10px; right: 10px; color: var(--fg); padding: 2px; transition: opacity 150ms ease-out; }
#hk-home .hb-ext:hover { opacity: .7; }

/* ------------------------------------------------------------ tablet, 768–1023 */
@media (max-width: 1023px) {
  #hk-home .hb-three { grid-template-columns: 1fr 1fr; grid-auto-rows: 520px 400px; }
  #hk-home .hb-three .hb-t.hb-w2 { grid-column: span 2; }
  #hk-home .hb-mos { grid-auto-rows: 460px; }
  #hk-home .hb-lbody { grid-template-columns: 1fr; }
  #hk-home .hb-wall { grid-auto-rows: 420px 380px 400px; }
  #hk-home .hb-jin { border-left: 0; border-top: 1px solid rgba(17, 17, 17, .2); padding: 28px 32px; }
  #hk-home .hb-jin ol { columns: 2; column-gap: 32px; }
  #hk-home .hb-jin li { break-inside: avoid; }
  #hk-home .hb-ph { font-size: 72px; letter-spacing: -3px; }
  #hk-home .hb-shows { grid-template-columns: 1fr 1fr; grid-auto-rows: 360px; }
  #hk-home .hb-wp { grid-template-columns: 1fr 1fr; grid-auto-rows: 400px auto; }
  #hk-home .hb-press { grid-column: 1 / -1; gap: 32px; }
  #hk-home .hb-rad { display: block; }
  #hk-home .hb-ri { padding: 20px 32px 12px; }
  #hk-home .hb-snd { flex-direction: column; }
  #hk-home .hb-si { flex: none; width: auto; padding: 20px 24px; }
  #hk-home .hb-picks { overflow-x: auto; scrollbar-width: none; }
  #hk-home .hb-pick { flex: 0 0 240px; min-height: 100px; }
}

/* ------------------------------------------------------------ phone: the 390 frames */
@media (max-width: 767px) {
  #hk-home .hb-t { --h: 17px; --ls: -.4px; --lh: 1.06; --pad: 14px; --gap: 6px; --k: 10px; --kls: 1.8px; --tw: 14px; --d: 14px; --s: 10px; }
  #hk-home .hb-k { gap: 7px; }
  #hk-home .hb-k i { height: 3px; }
  #hk-home .hb-s { letter-spacing: 1.6px; }
  #hk-home .hb-t.hb-nopic .hb-fbs { font-size: 26px; letter-spacing: -1px; }
  #hk-home .hb-three { grid-template-columns: 1fr 1fr; grid-auto-rows: 500px 260px; }
  #hk-home .hb-three .hb-t { --h: 17px; --ls: -.4px; --pad: 14px; --gap: 6px; --k: 10px; --kls: 1.8px; --tw: 14px; --d: 14px; --s: 10px; padding-bottom: 14px; }
  #hk-home .hb-three .hb-t.hb-w2 { grid-column: span 2; --h: 32px; --ls: -1.1px; }
  #hk-home .hb-three .hb-t:not(.hb-w2) .hb-d { display: none; }
  #hk-home .hb-mos { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  #hk-home .hb-mos .hb-d { display: none; }

  #hk-home .hb-lhead { display: block; padding: 24px 0 0; }
  #hk-home .hb-lt1 { gap: 10px; padding: 0 16px 10px; }
  #hk-home .hk-H { font-size: 32px; line-height: 39px; letter-spacing: -1.3px; }
  #hk-home .hb-sub { font: 400 max(12px, var(--hk-floor))/1.2 var(--sans); padding-bottom: 5px; }
  #hk-home .hb-chips { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
  #hk-home .hb-chips::-webkit-scrollbar { display: none; }
  #hk-home .hb-chips button { font: 700 max(13px, var(--hk-floor))/1.2 var(--sans); padding: 7px 12px; border: 0; border-radius: 16px; background: rgba(17, 17, 17, .07); color: #0E0E10; }
  #hk-home .hb-chips button[aria-pressed="true"] { background: #0E0E10; color: #fff; }
  /* the wall becomes the frame's list: thumb 92 × 70, time · source, headline */
  #hk-home .hb-wall { display: block; }
  #hk-home .hb-wall .hb-t { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 12px 16px; background: transparent; color: #0E0E10; border-bottom: 1px solid rgba(17, 17, 17, .094); min-height: 94px; }
  #hk-home .hb-wall .hb-t::before { display: none; }
  #hk-home .hb-wall .hb-t .hb-pic { position: relative; inset: auto; z-index: 0; flex: 0 0 92px; width: 92px; height: 70px; background: var(--hk-card); }
  #hk-home .hb-wall .hb-t.hb-nopic { padding-top: 12px; }
  #hk-home .hb-wall .hb-t.hb-nopic::after { content: ""; order: -1; flex: 0 0 92px; height: 70px; background: var(--hk-yellow); }
  #hk-home .hb-wall .hb-t.hb-nopic.hb-fb1::after { background: var(--hk-blue); }
  #hk-home .hb-wall .hb-t.hb-nopic.hb-fb2::after { background: #E6E2DA; }
  #hk-home .hb-wall .hb-t.hb-nopic .hb-fbs { display: none; }
  #hk-home .hb-wall .hb-t.hb-nopic { background: transparent; }
  #hk-home .hb-wall .hb-tx { gap: 4px; flex: 1 1 auto; }
  #hk-home .hb-wall .hb-k, #hk-home .hb-wall .hb-s { display: none; }
  #hk-home .hb-wall .hb-m { display: block; font: 800 max(10px, var(--hk-floor))/1.2 var(--sans); letter-spacing: 1.4px; text-transform: uppercase; color: #A0219E; }
  #hk-home .hb-wall .hb-h, #hk-home .hb-wall .hb-t.hb-nopic .hb-h { font: 800 16px/1.18 var(--sans); letter-spacing: -.3px; color: #0E0E10; }
  #hk-home .hb-wall .hb-h:lang(ja) { font-size: 15px; line-height: 1.35; letter-spacing: 0; }
  #hk-home .hb-wall .hb-t:hover .hb-pic img { transform: scale(1.03); }
  #hk-home .hb-wall .hb-t:focus-visible { outline-color: #0E0E10; outline-offset: -3px; }
  #hk-home .hb-jin { display: none; }
  #hk-home .hb-empty { padding: 20px 16px; font-size: 15px; }
  #hk-home .hb-more-w { padding: 12px 16px 20px; }
  #hk-home .hb-more { width: 100%; justify-content: center; height: 46px; padding: 0 16px; border-radius: 23px; font: 800 max(14px, var(--hk-floor))/1.2 var(--sans); }

  #hk-home .hb-rad { display: block; padding-top: 20px; }
  #hk-home .hb-ri { padding: 0 16px 12px; }
  #hk-home .hb-rt { justify-content: space-between; }
  #hk-home .hb-rh { font-size: 28px; line-height: 34px; letter-spacing: -1px; }
  #hk-home .hb-allsig { font-size: max(13px, var(--hk-floor)); line-height: 1.2; padding-bottom: 4px; }
  #hk-home .hb-rd { display: none; }
  #hk-home .hb-cells { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  #hk-home .hb-cells::-webkit-scrollbar { display: none; }
  #hk-home .hb-cells li { flex: 0 0 140px; }
  #hk-home .hb-cells li:first-child { border-left: 0; }
  #hk-home .hb-rad.hb-open .hb-cells { overflow: visible; }
  #hk-home .hb-rad.hb-open .hb-cells li { flex: 0 0 50%; border-left: 0; border-right: 1px solid var(--hk-rule); }
  #hk-home .hb-sig { min-height: 108px; gap: 7px; padding: 12px 14px; }
  #hk-home .hb-num { gap: 6px; }
  #hk-home .hb-num b { font-size: 26px; letter-spacing: 0; }
  #hk-home .hb-num i { font-size: max(12px, var(--hk-floor)); line-height: 1.2; }
  #hk-home .hb-track { height: 3px; }

  #hk-home .hb-ph { gap: 8px; padding: 24px 16px 12px; font-size: 30px; line-height: 36px; letter-spacing: -1.2px; }
  #hk-home .hb-pair { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  #hk-home .hb-pair .hb-t { --h: 21px; --ls: -.4px; --pad: 14px; --gap: 6px; padding-bottom: 14px; }
  #hk-home .hb-pair .hb-t .hb-h:lang(ja) { font-size: 21px; }
  #hk-home .hb-badge { top: 256px; left: 16px; transform: none; gap: 6px; padding: 7px 10px; border-radius: 16px; font-size: max(12px, var(--hk-floor)); line-height: 1.2; }

  #hk-home .hb-jhead { gap: 8px; padding: 24px 16px 12px; }
  #hk-home .hk-H2 { font-size: 30px; line-height: 36px; letter-spacing: -1.2px; }
  #hk-home .hb-j2 { font: 900 16px/23px var(--sans); }
  #hk-home .hb-jd { display: none; }
  #hk-home .hb-shows { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
  #hk-home .hb-show { padding: 14px; }
  #hk-home .hb-st { gap: 6px; }
  #hk-home .hb-sl { font-size: max(10px, var(--hk-floor)); line-height: 1.2; letter-spacing: 1.8px; }
  #hk-home .hb-sd { font-size: 20px; line-height: 1.05; letter-spacing: -.6px; }
  #hk-home .hb-sb { gap: 4px; }
  #hk-home .hb-sn2 { font-size: 15px; line-height: 1.15; letter-spacing: 0; }
  #hk-home .hb-sp { font-size: max(12px, var(--hk-floor)); line-height: 1.2; }
  #hk-home .hb-pl { display: none; }
  #hk-home .hb-ps { display: inline; }
  #hk-home .hb-wp { display: none; }

  #hk-home .hb-snd { display: block; padding: 20px 0 16px; background: var(--hk-bg); }
  #hk-home .hb-si { width: auto; flex-direction: row; justify-content: space-between; align-items: flex-end; padding: 0 16px 12px; background: none; }
  #hk-home .hb-sh { font-size: 24px; line-height: 29px; letter-spacing: -.8px; }
  #hk-home .hb-sdd { display: none; }
  #hk-home .hb-sdm { display: block; }
  #hk-home .hb-picks { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  #hk-home .hb-picks::-webkit-scrollbar { display: none; }
  #hk-home .hb-pick { flex: 0 0 130px; min-height: 96px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px; }
  #hk-home .hb-play { width: 30px; height: 30px; border-radius: 15px; }
  #hk-home .hb-play .hk-i { width: 12px; height: 12px; }
  #hk-home .hb-pt { gap: 2px; max-width: 100%; }
  #hk-home .hb-pt b { font-size: 18px; line-height: 22px; letter-spacing: 0; }
  #hk-home .hb-ptr { width: 100%; }
  #hk-home .hb-ext { top: 14px; right: 10px; }
}

/* ------------------------------------------------------------ wide screens: more pairs per row */
@media (min-width: 2000px) {
  #hk-home .hb-plist { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  #hk-home *, #hk-home *::before, #hk-home *::after { transition: none !important; animation: none !important; }
  #hk-home .hb-t:hover .hb-pic img, #hk-home .hb-t:focus-visible .hb-pic img, #hk-home .hb-play:hover { transform: none; }
  #hk-home .hb-rad .hb-track i { transform: none !important; }
}

/* audit 2026-10-16: R76Zs sets every playlist name on one line; in Hiragino "Night shift" needs ~135 px, which a pick has
   from 1360 px (its corner arrow sits above the name, so the right padding may be used) */
@media (min-width: 1360px) { #hk-home .hb-pt b { white-space: nowrap; } }

/* hk-pages-c — Hakken editorial pages, slice C of the 2026-10-16 redesign (Pencil hakken.pen: story f9ugjx / dVpr2,
   signal U4EP2 / ZnEtL, note WrquI / o92mGm, notes r4yJn, source hkxg8 / U00jMU, week XV3o0 / R0DzY, archive OEqWs,
   about h3LD6 / Ytc3k, legal kwu4i / zYHPn, support ByPRE). Everything is scoped to the class hk-pages-c.js puts on <html>
   only on the page type it rebuilt (html.hk-c-on + hk-c-story / -signal / -source / -week / -archive / -notes / -note /
   -about / -legal / -support). Colours and fonts come from hk-shell.css (html.hk-on) with the CuvVr values as fallbacks.
   Deliberate differences from the frames, the same as the other slices:
   - no size goes under the site's 14.6 px floor (the frames' 10–13 px kickers are 14.6 px), and no size the engine already
     used on these pages is lowered (crumbs 16.5 px, story excerpt 22–28 px, note body 22 px and lead 26–30 px, text pages
     19.5 px, archive dates 19.5 px);
   - fluid: the four 360 columns of the frames are a grid that adds columns as the screen grows (two on a phone, three on a
     tablet, four from 1100 px, six from 1800 px); nothing is capped in a centred column. */

html.hk-c-on {
  --hkc-bg: var(--hk-bg, #0E0E10); --hkc-card: var(--hk-card, #1E1E22); --hkc-paper: var(--hk-paper, #F4F2EE);
  --hkc-mag: var(--hk-mag, #EC5CFF); --hkc-purple: var(--hk-purple, #A0219E); --hkc-blue: var(--hk-blue, #2D5BE3);
  --hkc-yellow: var(--hk-yellow, #F2C230); --hkc-red: var(--hk-red, #D93A2B); --hkc-night: var(--hk-night, #2B2B30);
  --hkc-ink: var(--hk-ink, #FFFFFF); --hkc-dark: #0E0E10; --hkc-dim: var(--hk-dim, rgba(255, 255, 255, .65));
  --hkc-ddim: rgba(17, 17, 17, .7); --hkc-jpmag: var(--hk-jpmag, #D63BEA);
  --hkc-jp: var(--hk-jp, "Zen Kaku Gothic New", "Hiragino Sans", sans-serif);
  --hkc-floor: 14.6px; --hkc-pad: 32px; --hkc-c: 4; --hkc-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 1800px) { html.hk-c-on { --hkc-c: 6; } }
@media (max-width: 1099px) { html.hk-c-on { --hkc-c: 3; } }
@media (max-width: 767px) { html.hk-c-on { --hkc-c: 2; --hkc-pad: 16px; } }

/* the engine's own page box: the rebuilt page brings its own spacing */
html.hk-c-on main.single#single.hk-c-main { max-width: none; width: 100%; margin: 0; padding: 0; background: var(--hkc-bg); border: 0; }
/* until a trends-dependent page is rebuilt, the engine's version is not flashed */
html.hk-c-on:is(.hk-c-week, .hk-c-archive, .hk-c-note, .hk-c-about) main#single:not(.hk-c-main) > * { visibility: hidden; }
/* signal and source pages: the engine's home layout under the rebuilt list is not shown */
html.hk-c-list #home > :not(#hkc-list) { display: none !important; }
html.hk-c-list #home { padding: 0; margin: 0; max-width: none; }
html.hk-c-list #tabs { display: none !important; }

.hkc, .hkc *, .hkc *::before, .hkc *::after { box-sizing: border-box; }
.hkc { display: block; width: 100%; margin: 0; padding: 0; background: var(--hkc-bg); color: var(--hkc-ink); font-family: var(--sans); text-align: left; overflow-x: clip; }
.hkc a { color: inherit; text-decoration: none; }
.hkc h1, .hkc h2, .hkc h3, .hkc p, .hkc figure, .hkc dl, .hkc dd { margin: 0; }
.hkc button { font-family: var(--sans); color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.hkc :is(a, button, [tabindex]):focus-visible { outline: 3px solid var(--hkc-ink); outline-offset: 3px; }
.hkc :is(.hkc-bg-mag, .hkc-bg-paper, .hkc-bg-yellow, .hkc-sig-tag, .hkc-wh-s, .hkc-lg-r, .hkc-ab-e, .hkc-nh-s) :is(a, button):focus-visible,
.hkc :is(.hkc-bg-mag, .hkc-bg-paper, .hkc-bg-yellow, .hkc-sig-tag, .hkc-wh-s, .hkc-lg-r, .hkc-ab-e, .hkc-nh-s):focus-visible { outline-color: var(--hkc-dark); }
.hkc img { display: block; }
.hkc .hk-i { flex: none; vertical-align: -2px; }
.hkc [lang="ja"], .hkc :lang(ja) { font-family: var(--hkc-jp); letter-spacing: 0; }
.hkc .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hkc .hkc-k { display: inline-block; max-width: 100%; font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; }
.hkc .hkc-big { font-weight: 800; font-variant-numeric: tabular-nums; }
/* colour grounds (CuvVr): the ink always reaches 4.5:1 on its ground */
.hkc .hkc-bg-bg { background: var(--hkc-bg); color: var(--hkc-ink); }
.hkc .hkc-bg-card { background: var(--hkc-card); color: var(--hkc-ink); }
.hkc .hkc-bg-night { background: var(--hkc-night); color: var(--hkc-ink); }
.hkc .hkc-bg-blue { background: var(--hkc-blue); color: #fff; }
.hkc .hkc-bg-purple { background: var(--hkc-purple); color: #fff; }
.hkc .hkc-bg-mag { background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc .hkc-bg-yellow { background: var(--hkc-yellow); color: var(--hkc-dark); }
.hkc .hkc-bg-red { background: var(--hkc-red); color: var(--hkc-dark); }
.hkc .hkc-bg-paper { background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc .hkc-paper { background: var(--hkc-paper); color: var(--hkc-dark); }
/* links: an underline that grows from the left (Motion) */
.hkc :is(.hkc-see, .hkc-nr, .hkc-back span, .hkc-trail a, .hkc-morefrom b, .hkc-toc a, .hkc-wnav a span, .hkc-poster a) { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; }
.hkc a:is(:hover, :focus-visible) :is(.hkc-see, .hkc-nr, .hkc-back span, .hkc-morefrom b, .hkc-wnav span),
.hkc :is(.hkc-trail a, .hkc-toc a, .hkc-poster a):is(:hover, :focus-visible) { background-size: 100% 2px; }
@media (prefers-reduced-motion: no-preference) {
  .hkc :is(.hkc-see, .hkc-nr, .hkc-back span, .hkc-trail a, .hkc-morefrom b, .hkc-toc a, .hkc-wnav a span, .hkc-poster a) { transition: background-size .25s ease-out; }
}

/* ------------------------------------------------------------ shared: the trail, section heads, kickers */
.hkc .hkc-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 52px; padding: 12px var(--hkc-pad); background: var(--hkc-paper); color: var(--hkc-dark); font: 600 16.5px/1.2 var(--sans); }
.hkc .hkc-trail i { font-style: normal; color: rgba(17, 17, 17, .45); }
.hkc .hkc-trail .hkc-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.hkc .hkc-trail .hkc-tsig { font-weight: 700; color: var(--hkc-purple); }
.hkc .hkc-trail .hkc-tsrc { color: var(--hkc-ddim); }
.hkc .hkc-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hkc .hkc-back { display: inline-flex; align-items: center; gap: 6px; font: 800 16.5px/1.2 var(--sans); }
.hkc .hkc-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 48px var(--hkc-pad) 24px; }
.hkc .hkc-sh h2 { font: 800 clamp(36px, 3.9vw, 56px)/1 var(--sans); letter-spacing: -.04em; }
.hkc .hkc-sh p { font: 400 16.5px/1.3 var(--sans); color: var(--hkc-dim); }
.hkc .hkc-kick { display: inline-flex; align-items: center; gap: 10px; font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2.2px; text-transform: uppercase; }
.hkc .hkc-kick i { display: inline-block; width: 18px; height: 3px; background: var(--hkc-mag); flex: none; }
.hkc .hkc-see { display: inline-flex; align-items: center; gap: 6px; font: 800 16px/1.2 var(--sans); width: max-content; }
.hkc .hkc-ph { padding: 28px var(--hkc-pad) 36px; display: flex; flex-direction: column; gap: 10px; }
.hkc .hkc-ph h1 { font: 800 clamp(34px, 5vw, 78px)/1 var(--sans); letter-spacing: -.045em; max-width: 22ch; }
.hkc .hkc-pk { color: var(--hkc-purple); }
.hkc .hkc-dek { font: 600 18px/1.4 var(--sans); color: rgba(17, 17, 17, .78); max-width: 60ch; }

/* ------------------------------------------------------------ tiles: gapless picture tiles with a shade */
.hkc .hkc-tiles { display: grid; grid-template-columns: repeat(var(--hkc-c), minmax(0, 1fr)); grid-auto-flow: row dense; grid-auto-rows: var(--hkc-th, 420px); }
.hkc .hkc-tiles-wk { --hkc-th: 420px; }
.hkc .hkc-tiles-lead { --hkc-th: 500px; }
.hkc a.hkc-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; overflow: hidden; background: var(--hkc-card); color: #fff; isolation: isolate; }
.hkc a.hkc-tile.hkc-w2 { grid-column: span 2; }
.hkc a.hkc-tile .hkc-pic { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hkc a.hkc-tile .hkc-pic img { width: 100%; height: 100%; object-fit: cover; }
.hkc a.hkc-tile:not(.noimg)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 16, 0) 35%, rgba(14, 14, 16, .92) 100%); }
.hkc a.hkc-tile .hkc-tx { display: flex; flex-direction: column; gap: 9px; padding: 0 24px 24px; }
.hkc a.hkc-tile .hkc-h { font: 800 24px/1.08 var(--sans); letter-spacing: -.03em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.hkc a.hkc-tile.hkc-w2 .hkc-h { font-size: clamp(30px, 2.6vw, 44px); letter-spacing: -.04em; line-height: 1.04; -webkit-line-clamp: 4; }
.hkc a.hkc-tile .hkc-h:lang(ja) { font-weight: 700; letter-spacing: 0; line-height: 1.3; font-size: 22px; }
.hkc a.hkc-tile.hkc-w2 .hkc-h:lang(ja) { font-size: clamp(26px, 2.2vw, 34px); }
.hkc a.hkc-tile .hkc-ex { font: 400 16.5px/1.4 var(--sans); color: var(--hkc-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hkc a.hkc-tile .hkc-src { font: 700 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hkc-mag); }
.hkc a.hkc-tile .hkc-h { background: linear-gradient(var(--hkc-mag), var(--hkc-mag)) 0 100% / 0 3px no-repeat; }
.hkc a.hkc-tile:is(:hover, :focus-visible) .hkc-h { background-size: 100% 3px; }
.hkc a.hkc-tile:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .hkc :is(a.hkc-tile, a.hkc-row) .hkc-pic img { transition: transform .45s ease-out; }
  .hkc :is(a.hkc-tile, a.hkc-row):is(:hover, :focus-visible) .hkc-pic img { transform: scale(1.03); }
  .hkc a.hkc-tile .hkc-h { transition: background-size .3s ease-out; }
}
/* no picture: a typographic block in the source's colour (CuvVr), never a grey hole */
.hkc .hkc-fb { position: absolute; inset: 0; z-index: -2; display: block; padding: 22px 24px; overflow: hidden; }
.hkc .hkc-fb b { display: block; font: 800 clamp(30px, 3vw, 44px)/.95 var(--sans); letter-spacing: -.04em; text-transform: uppercase; opacity: .38; overflow-wrap: anywhere; }
.hkc .hkc-fb-yellow { background: var(--hkc-yellow); color: var(--hkc-dark); }
.hkc .hkc-fb-blue { background: var(--hkc-blue); color: #fff; }
.hkc .hkc-fb-paper { background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc .hkc-fb-purple { background: var(--hkc-purple); color: #fff; }
.hkc .hkc-fb-red { background: var(--hkc-red); color: var(--hkc-dark); }
.hkc a.hkc-tile.noimg:has(.hkc-fb-yellow, .hkc-fb-paper, .hkc-fb-red) { color: var(--hkc-dark); }
.hkc a.hkc-tile.noimg:has(.hkc-fb-yellow, .hkc-fb-paper, .hkc-fb-red) :is(.hkc-src, .hkc-ex) { color: rgba(14, 14, 16, .78); }
.hkc a.hkc-tile.noimg:has(.hkc-fb-yellow, .hkc-fb-paper, .hkc-fb-red) .hkc-kick i { background: var(--hkc-dark); }
.hkc a.hkc-tile.noimg:has(.hkc-fb-blue, .hkc-fb-purple) .hkc-src { color: #fff; }
.hkc a.hkc-tile.noimg:has(.hkc-fb-blue, .hkc-fb-purple) .hkc-kick i { background: #fff; }
.hkc a.hkc-tile.noimg .hkc-h { background-image: linear-gradient(currentColor, currentColor); }

/* ------------------------------------------------------------ list rows (U4EP2 List) */
.hkc .hkc-rows { padding: 8px 0 0; }
.hkc a.hkc-row { display: grid; grid-template-columns: 148px minmax(130px, 200px) minmax(0, 1fr) 24px; align-items: center; gap: 0 28px; min-height: 120px; padding: 16px var(--hkc-pad); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hkc a.hkc-row .hkc-pic, .hkc a.hkc-row .hkc-fb { position: relative; inset: auto; z-index: auto; display: block; width: 148px; height: 88px; overflow: hidden; }
.hkc a.hkc-row .hkc-pic img { width: 100%; height: 100%; object-fit: cover; }
.hkc a.hkc-row .hkc-fb { padding: 10px; }
.hkc a.hkc-row .hkc-fb b { font-size: 20px; opacity: .5; }
.hkc .hkc-rm { display: flex; flex-direction: column; gap: 4px; }
.hkc .hkc-rd { font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hkc-mag); }
.hkc .hkc-rs { font: 700 16px/1.25 var(--sans); color: var(--hkc-dim); }
.hkc .hkc-rh { font: 800 24px/1.15 var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; }
.hkc .hkc-rh:lang(ja) { font-weight: 700; font-size: 22px; line-height: 1.4; }
.hkc .hkc-ra { color: var(--hkc-dim); display: inline-flex; }
.hkc a.hkc-row:is(:hover, :focus-visible) .hkc-rh { text-decoration: underline; text-decoration-color: var(--hkc-mag); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hkc a.hkc-row:focus-visible { outline-offset: -3px; }
.hkc .hkc-more-wrap { display: flex; justify-content: center; padding: 28px var(--hkc-pad) 40px; }
.hkc .hkc-more { min-height: 46px; padding: 12px 26px; border-radius: 26px; background: rgba(255, 255, 255, .08); font: 800 16px/1.2 var(--sans); }
.hkc .hkc-more:hover { background: rgba(255, 255, 255, .16); }
.hkc .hkc-empty { padding: 40px var(--hkc-pad); font: 600 19.5px/1.4 var(--sans); color: var(--hkc-dim); }
@media (prefers-reduced-motion: no-preference) { .hkc .hkc-more, .hkc .hkc-chips a, .hkc .hkc-reg-c a, .hkc .hkc-go, .hkc .hkc-visit, .hkc .hkc-copy { transition: background-color .15s ease-out, color .15s ease-out; } }

/* ------------------------------------------------------------ story (f9ugjx, dVpr2) */
.hkc-story .hkc-st { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 640px; }
.hkc-story .hkc-st-pic { position: relative; min-height: 100%; background: #2A2A2E; overflow: hidden; }
.hkc-story .hkc-st-pic .hkc-pic { position: absolute; inset: 0; }
.hkc-story .hkc-st-pic img { width: 100%; height: 100%; object-fit: cover; }
.hkc-story .hkc-st-pic figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: rgba(14, 14, 16, .8); color: #fff; font: 700 var(--hkc-floor)/1.2 var(--sans); }
.hkc-story .hkc-st-pic.hkc-gone img, .hkc-story .hkc-st-pic.hkc-gone figcaption { display: none; }
.hkc-story .hkc-st-fb .hkc-fb b { font-size: clamp(48px, 6vw, 96px); }
.hkc-story .hkc-st-tx { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px 48px 40px; background: var(--hkc-bg); }
.hkc-story .hkc-st-top { display: flex; flex-direction: column; gap: 22px; }
.hkc-story .hkc-st-top .hkc-kick { color: #fff; }
.hkc-story .hkc-st-h { font: 800 clamp(44px, 4.45vw, 72px)/1 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.hkc-story .hkc-st-h.hkc-long { font-size: clamp(40px, 3.6vw, 56px); }
.hkc-story .hkc-st-h:lang(ja) { font-weight: 700; letter-spacing: 0; line-height: 1.25; font-size: clamp(32px, 3.2vw, 48px); }
.hkc-story .hkc-st-ex { font: 400 clamp(22px, 1.95vw, 28px)/1.45 var(--sans); color: var(--hkc-dim); overflow-wrap: anywhere; }
.hkc-story .ja-orig { font: 400 16.5px/1.4 var(--sans); color: var(--hkc-dim); margin: 0; }
.hkc-story .hkc-st-act { display: flex; flex-direction: column; gap: 16px; }
.hkc-story .hkc-go { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; padding: 14px 22px; background: var(--hkc-mag); color: var(--hkc-dark); font: 800 19.5px/1.2 var(--sans); }
.hkc-story .hkc-go:hover { background: var(--hk-mag-press, #C63FDB); }
.hkc-story .hkc-go:focus-visible { outline-color: #fff; }
.hkc-story .hkc-st-fine { font: 400 var(--hkc-floor)/1.45 var(--sans); color: var(--hkc-dim); }
.hkc-story .also { font: 400 var(--hkc-floor)/1.45 var(--sans); color: var(--hkc-dim); margin: 0; }
.hkc-story .also a { text-decoration: underline; text-underline-offset: 3px; }
.hkc-story .hkc-sig { display: grid; grid-template-columns: 1fr 1fr 2fr; min-height: 100px; background: var(--hkc-card); }
.hkc-story .hkc-sig-tag { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px var(--hkc-pad); background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc-story .hkc-sig-tag b { font: 800 28px/1.1 var(--sans); letter-spacing: -.035em; }
.hkc-story .hkc-sig-n { display: flex; align-items: center; gap: 12px; padding: 16px var(--hkc-pad); border-right: 1px solid rgba(255, 255, 255, .08); }
.hkc-story .hkc-sig-n .hkc-big { font-size: 44px; line-height: 1; letter-spacing: -.035em; }
.hkc-story .hkc-sig-n > span { display: flex; flex-direction: column; gap: 2px; font: 700 var(--hkc-floor)/1.3 var(--sans); }
.hkc-story .hkc-sig-n em { font-style: normal; color: var(--hkc-mag); }
.hkc-story .hkc-sig-link { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 16px var(--hkc-pad); }
.hkc-story .hkc-sig-link p { font: 400 16.5px/1.4 var(--sans); color: var(--hkc-dim); max-width: 46ch; }
.hkc-story .hkc-sig-link a { display: inline-flex; align-items: center; gap: 6px; font: 800 16.5px/1.2 var(--sans); color: var(--hkc-mag); white-space: nowrap; }
.hkc-story .hkc-sig-link a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hkc-story .hkc-tiles-rel { --hkc-th: 400px; }
.hkc-story .hkc-morefrom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 72px; padding: 16px var(--hkc-pad); background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-story .hkc-morefrom span { font: 800 20px/1.2 var(--sans); }
.hkc-story .hkc-morefrom b { display: inline-flex; align-items: center; gap: 6px; font: 800 16.5px/1.2 var(--sans); color: var(--hkc-purple); }

/* ------------------------------------------------------------ signal and source heads (U4EP2, hkxg8) */
.hkc-list .hkc-lh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 320px; }
.hkc-list .hkc-lh-name { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 32px; background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc-list .hkc-lh-name.hkc-dark { background: var(--hkc-bg); color: var(--hkc-ink); }
.hkc-list .hkc-lh-name.hkc-dark .hkc-k { color: var(--hkc-mag); }
.hkc-list .hkc-lh-b { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hkc-list .hkc-lh-b h1 { font: 800 clamp(52px, 5.4vw, 96px)/.95 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.hkc-list .hkc-lh-b p { font: 600 19.5px/1.35 var(--sans); }
.hkc-list .hkc-visit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 24px; background: var(--hkc-mag); color: var(--hkc-dark); font: 800 16px/1.2 var(--sans); }
.hkc-list .hkc-visit:hover { background: var(--hk-mag-press, #C63FDB); }
.hkc-list .hkc-chart { display: flex; flex-direction: column; gap: 22px; padding: 32px 32px 24px; background: var(--hkc-bg); }
.hkc-list .hkc-ch-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; }
.hkc-list .hkc-ch-top .hkc-k { color: var(--hkc-mag); }
.hkc-list .hkc-ch-note { font: 400 var(--hkc-floor)/1.3 var(--sans); color: var(--hkc-dim); }
.hkc-list .hkc-bars { flex: 1; min-height: 150px; display: flex; align-items: flex-end; gap: 6px; }
.hkc-list .hkc-bars i { flex: 1; min-width: 2px; background: #3A3A40; transform-origin: 50% 100%; }
.hkc-list .hkc-bars i.now { background: var(--hkc-mag); }
@media (prefers-reduced-motion: no-preference) {
  .hkc-list .hkc-bars i { animation: hkc-grow .45s ease-out both; }
  .hkc-list .hkc-bars i:nth-child(n+8) { animation-delay: .04s; } .hkc-list .hkc-bars i:nth-child(n+15) { animation-delay: .08s; } .hkc-list .hkc-bars i:nth-child(n+22) { animation-delay: .12s; }
}
@keyframes hkc-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hkc-list .hkc-axis { display: flex; justify-content: space-between; gap: 8px; font: 700 var(--hkc-floor)/1.2 var(--sans); color: var(--hkc-dim); }
.hkc-list .hkc-axis .now { color: var(--hkc-mag); }
.hkc-list .hkc-chips { display: flex; align-items: center; gap: 8px 16px; min-height: 64px; padding: 12px var(--hkc-pad); background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-list .hkc-chips > .hkc-k { flex: none; color: var(--hkc-ddim); }
.hkc-list .hkc-chips > div { display: flex; flex-wrap: wrap; gap: 8px; }
.hkc-list .hkc-chips a, .hkc .hkc-reg-c :is(a, span) { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 14px; border-radius: 18px; background: rgba(17, 17, 17, .07); font: 700 16px/1.2 var(--sans); color: var(--hkc-dark); }
.hkc-list .hkc-chips a:hover, .hkc .hkc-reg-c a:hover { background: var(--hkc-dark); color: var(--hkc-mag); }
.hkc .hkc-reg-c span.hkc-ci { display: contents; }
.hkc .hkc-reg-c a[aria-current] { background: var(--hkc-dark); color: var(--hkc-mag); }
.hkc .hkc-reg-c span:not(.hkc-ci) { color: rgba(17, 17, 17, .72); }
.hkc-source .hkc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hkc-source .hkc-fact { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 160px; padding: 0 28px 22px; }
.hkc-source .hkc-fact .hkc-big { font-size: 52px; line-height: 1; letter-spacing: -.04em; }
.hkc-source .hkc-fact > span { font: 700 16px/1.25 var(--sans); }
.hkc-source .hkc-bg-paper, .hkc-source .hkc-fact.hkc-bg-paper { background: var(--hkc-paper); }
.hkc .hkc-all { display: flex; flex-direction: column; gap: 18px; padding: 40px var(--hkc-pad) 44px; background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc .hkc-all header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.hkc .hkc-all h2 { font: 800 40px/1.1 var(--sans); letter-spacing: -.035em; }
.hkc .hkc-all header p { font: 400 16px/1.3 var(--sans); color: var(--hkc-ddim); }
.hkc .hkc-reg { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: start; gap: 8px; }
.hkc .hkc-reg > .hkc-k { color: var(--hkc-purple); padding-top: 10px; }
.hkc .hkc-reg-c { display: flex; flex-wrap: wrap; gap: 8px; }
.hkc .hkc-more-src { min-height: 36px; padding: 8px 14px; border-radius: 18px; background: rgba(17, 17, 17, .07); font: 700 16px/1.2 var(--sans); color: var(--hkc-dark); }
.hkc .hkc-more-src:focus-visible { outline-color: var(--hkc-dark); }
.hkc .hkc-all a:focus-visible { outline-color: var(--hkc-dark); }

/* ------------------------------------------------------------ week (XV3o0, R0DzY) */
.hkc-week .hkc-wh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 360px; }
.hkc-week .hkc-wh-w { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 32px; background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-week .hkc-wnav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.hkc-week .hkc-wnav a { display: inline-flex; align-items: center; gap: 6px; font: 800 16.5px/1.2 var(--sans); }
.hkc-week .hkc-wnav a:last-child { justify-self: end; }
.hkc-week .hkc-wnav .hkc-arch { color: var(--hkc-purple); }
.hkc-week .hkc-wh-t h1 { font: 800 clamp(72px, 8.4vw, 120px)/.9 var(--sans); letter-spacing: -.05em; }
.hkc-week .hkc-wh-t > p { margin-top: 14px; font: 700 22px/1.2 var(--sans); }
.hkc-week .hkc-wh-t .hkc-wnote { margin-top: 14px; font: 400 19.5px/1.5 var(--sans); color: rgba(17, 17, 17, .8); max-width: 56ch; }
.hkc-week .hkc-wh-t .hkc-wnote span { font-weight: 700; color: var(--hkc-purple); }
.hkc-week .hkc-wh-s { display: flex; flex-direction: column; gap: 12px; padding: 32px; background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc-week .hkc-wh-s b { margin-top: auto; font: 800 clamp(48px, 5.6vw, 80px)/.95 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.hkc-week .hkc-wh-m { font: 700 16.5px/1.3 var(--sans); }
.hkc-week .hkc-wh-s .hkc-see { margin-top: auto; }
.hkc-week .hkc-ws .hkc-sh { padding-top: 48px; }
.hkc-week .hkc-poster { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 20px var(--hkc-pad); background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-week .hkc-poster .hkc-k { color: var(--hkc-purple); }
.hkc-week .hkc-poster a { display: inline-flex; align-items: center; gap: 6px; font: 800 16.5px/1.2 var(--sans); }
.hkc .hkc-wkstrip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--hkc-card); }
.hkc .hkc-wkstrip::-webkit-scrollbar { display: none; }
.hkc .hkc-wkstrip a { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 96px; padding: 0 20px; border-right: 1px solid rgba(255, 255, 255, .06); }
.hkc .hkc-wkstrip .hkc-k { color: var(--hkc-dim); }
.hkc .hkc-wkstrip b { font: 800 34px/1 var(--sans); letter-spacing: -.035em; }
.hkc .hkc-wkstrip a[aria-current] { background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc .hkc-wkstrip a[aria-current] .hkc-k { color: var(--hkc-dark); }
.hkc .hkc-wkstrip a:not([aria-current]):hover { background: var(--hkc-night); }
.hkc .hkc-wkstrip a:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------ archive (OEqWs) */
.hkc-archive .hkc-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.hkc-archive a.hkc-wk { display: grid; grid-template-columns: clamp(84px, 9vw, 160px) minmax(0, 1fr) 40px; min-height: 76px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: var(--hkc-bg); }
.hkc-archive .hkc-wn { display: grid; place-items: center; font: 800 clamp(34px, 3.4vw, 56px)/1 var(--sans); letter-spacing: -.035em; }
.hkc-archive .hkc-wt { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 14px 14px 16px; }
.hkc-archive .hkc-wd { font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hkc-mag); }
.hkc-archive .hkc-ws { font: 800 22px/1.15 var(--sans); letter-spacing: -.02em; }
.hkc-archive .hkc-wm { font: 600 16.5px/1.3 var(--sans); color: var(--hkc-dim); }
.hkc-archive .hkc-wnote { font: 400 19.5px/1.45 var(--sans); color: var(--hkc-dim); }
.hkc-archive .hkc-wa { align-self: center; color: var(--hkc-dim); display: inline-flex; }
.hkc-archive a.hkc-wk:is(:hover, :focus-visible) .hkc-ws { text-decoration: underline; text-decoration-color: var(--hkc-mag); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.hkc-archive a.hkc-wk:focus-visible { outline-offset: -3px; }
.hkc-archive .hkc-hanko { padding: 40px var(--hkc-pad); }
.hkc-archive .hkc-hanko h2.t { font: 800 36px/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 20px; color: var(--hkc-ink); }

/* ------------------------------------------------------------ notes list (r4yJn) */
.hkc-notes .hkc-nlist { display: grid; grid-template-columns: repeat(var(--hkc-c), minmax(0, 1fr)); }
.hkc-notes .hkc-nt, .hkc-note .hkc-mnt { display: flex; flex-direction: column; gap: 10px; min-height: 280px; padding: 26px; }
.hkc-notes .hkc-nt .hkc-k, .hkc-note .hkc-mnt .hkc-k { opacity: .9; }
.hkc-notes .hkc-nh, .hkc-note .hkc-mnh { font: 800 30px/1.08 var(--sans); letter-spacing: -.03em; overflow-wrap: anywhere; margin-top: auto; margin-bottom: auto; }
.hkc-notes .hkc-nr, .hkc-note .hkc-nr { display: inline-flex; align-items: center; gap: 6px; width: max-content; font: 800 16px/1.2 var(--sans); }
.hkc-notes .hkc-nt:first-child { grid-column: span 2; }
.hkc-notes .hkc-nt:first-child .hkc-nh { font-size: clamp(34px, 3vw, 48px); }
.hkc-notes .hkc-nt:focus-visible, .hkc-note .hkc-mnt:focus-visible { outline-offset: -4px; }
.hkc-notes .hkc-nall { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 16px var(--hkc-pad); background: var(--hkc-card); font: 800 19.5px/1.2 var(--sans); color: var(--hkc-ink); }
.hkc-notes .hkc-nall .hk-i { color: var(--hkc-mag); }

/* ------------------------------------------------------------ note (WrquI, o92mGm) */
.hkc-note .hkc-nh-wrap { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-note.hkc-has-sig .hkc-nh-wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.hkc-note .hkc-nh-t { display: flex; flex-direction: column; gap: 40px; padding: 32px 40px 36px 32px; }
.hkc-note .hkc-nh-t h1 { font: 800 clamp(48px, 6.7vw, 96px)/.95 var(--sans); letter-spacing: -.045em; max-width: 18ch; overflow-wrap: anywhere; }
.hkc-note .hkc-nh-t h1:lang(ja), :lang(ja) .hkc-note .hkc-nh-t h1 { letter-spacing: 0; line-height: 1.2; font-size: clamp(36px, 4.6vw, 64px); }
.hkc-note .hkc-byl { display: flex; align-items: center; gap: 14px; }
.hkc-note .hkc-byl > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.hkc-note .hkc-byl b { font: 800 16.5px/1.2 var(--sans); }
.hkc-note .hkc-byl b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hkc-note .hkc-byl > span:last-child > span { font: 400 16px/1.3 var(--sans); color: var(--hkc-ddim); }
.hkc .hkc-av { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--hkc-dark); color: var(--hkc-mag); font: 800 16px/1 var(--sans); }
.hkc-note .hkc-nh-s { display: flex; flex-direction: column; gap: 8px; padding: 32px 28px; background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc-note .hkc-nh-s b { margin-top: auto; font: 800 36px/1.05 var(--sans); letter-spacing: -.035em; }
.hkc-note .hkc-nh-s .hkc-see { margin-top: auto; }
.hkc-note .hkc-nb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 0; padding: 64px 0 72px; background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-note .hkc-nb-l, .hkc-note .hkc-nb-r { padding: 0 32px; display: flex; flex-direction: column; gap: 14px; }
.hkc-note .hkc-nb-l > .hkc-k, .hkc-note .hkc-nb-r .hkc-k { color: var(--hkc-ddim); }
.hkc-note .hkc-nb-l dl { display: flex; flex-direction: column; gap: 14px; }
.hkc-note .hkc-nb-l dl > div { padding-bottom: 12px; border-bottom: 1px solid rgba(17, 17, 17, .14); }
.hkc-note .hkc-nb-l dt { font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--hkc-purple); }
.hkc-note .hkc-nb-l dd { margin-top: 3px; font: 700 16.5px/1.3 var(--sans); }
.hkc-note .hkc-nb-t { padding: 0 40px; display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hkc-note .note-body { display: flex; flex-direction: column; gap: 28px; margin: 0; max-width: none; }
.hkc-note .note-body p { margin: 0; font: 400 22px/1.65 var(--sans); color: #1A1A1C; }
.hkc-note .note-body p.lead { font: 700 clamp(26px, 2.1vw, 30px)/1.45 var(--sans); letter-spacing: -.01em; color: var(--hkc-dark); }
.hkc-note .note-body :lang(ja) p, .hkc-note .note-body p:lang(ja) { line-height: 1.85; }
.hkc-note .note-body a { color: var(--hkc-purple); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hkc-note .note-body a:hover { text-decoration-thickness: 2px; }
.hkc-note .note-body a:focus-visible { outline-color: var(--hkc-dark); }
.hkc-note .note-like { display: flex; align-items: center; gap: 12px; color: var(--hkc-dark); }
.hkc-note .note-like .grey { color: var(--hkc-ddim); font: 400 16.5px/1.3 var(--sans); }
.hkc-note .note-like button { color: var(--hkc-dark); }
.hkc-note .note-like button:focus-visible { outline: 3px solid var(--hkc-dark); outline-offset: 3px; }
.hkc-note .hkc-wire { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 220px; padding: 18px; }
.hkc-note .hkc-wire b { font: 800 20px/1.15 var(--sans); }
.hkc-note .hkc-wire .hkc-src { display: inline-flex; align-items: center; gap: 6px; font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; }
.hkc-note .hkc-wire:is(:hover, :focus-visible) b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.hkc-note .hkc-about-ed { padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.hkc-note .hkc-about-ed .note-bio { margin: 0; font: 400 17.5px/1.5 var(--sans); color: var(--hkc-dark); }
.hkc-note .hkc-mn-g { display: grid; grid-template-columns: repeat(min(var(--hkc-c), 4), minmax(0, 1fr)); }
@media (min-width: 1800px) { .hkc-note .hkc-mn-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ about (h3LD6, Ytc3k) */
.hkc-about .hkc-ab-h { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-about .hkc-ab-w { display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.hkc-about .hkc-ab-word { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.hkc-about .hkc-kanji { font: 900 clamp(120px, 15.3vw, 220px)/1 var(--hkc-jp); letter-spacing: -.045em; }
.hkc-about .hkc-ab-d { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; }
.hkc-about .hkc-ab-d b { font: 800 40px/1 var(--sans); letter-spacing: -.035em; color: var(--hkc-purple); }
.hkc-about .hkc-ab-d span { font: 600 22px/1.2 var(--sans); }
.hkc-about .hkc-ab-l { font: 800 clamp(22px, 1.7vw, 25.36px)/1.25 var(--sans); letter-spacing: -.02em; max-width: 32ch; }
.hkc-about .hkc-ab-e { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px; background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc-about .hkc-ab-e .hkc-av { width: 72px; height: 72px; font-size: 24px; margin-top: auto; }
.hkc-about .hkc-ab-e b { font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; }
.hkc-about .hkc-ab-c { font: 600 16.5px/1.4 var(--sans); }
.hkc-about .hkc-ab-e .hkc-see { margin-top: auto; }
.hkc-about .hkc-ab-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); padding: 24px 0 64px; background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-about .hkc-ab-t { grid-column: 2; padding: 0 40px; display: flex; flex-direction: column; gap: 24px; }
.hkc-about .hkc-ab-t p { margin: 0; font: 400 19.5px/1.65 var(--sans); color: #1A1A1C; }
.hkc-about .hkc-ab-t p:first-child { font: 700 clamp(22px, 1.7vw, 25.36px)/1.45 var(--sans); color: var(--hkc-dark); }
.hkc-about .hkc-ab-t h2 { margin: 16px 0 0; font: 800 36px/1.1 var(--sans); letter-spacing: -.03em; }
.hkc-about .hkc-ab-t a { color: var(--hkc-purple); text-decoration: underline; text-underline-offset: 3px; }
.hkc-about .hkc-ab-t a:focus-visible { outline-color: var(--hkc-dark); }
.hkc-about .hkc-ab-t p.grey { color: var(--hkc-purple); font-weight: 700; font-style: italic; }
.hkc-about .hkc-prom { display: grid; grid-template-columns: repeat(min(var(--hkc-c), 4), minmax(0, 1fr)); }
.hkc-about .hkc-prom > * { display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding: 26px; }
.hkc-about .hkc-prom b { margin-top: auto; font: 800 28px/1.08 var(--sans); letter-spacing: -.025em; }
.hkc-about .hkc-prom b:lang(ja) { letter-spacing: 0; }
.hkc-about .hkc-prom p { margin-top: auto; font: 400 16.5px/1.45 var(--sans); }
.hkc-about .hkc-prom a:is(:hover, :focus-visible) b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.hkc-about .hkc-prom a:focus-visible { outline-color: var(--hkc-dark); outline-offset: -4px; }
.hkc-about .hkc-nums { display: grid; grid-template-columns: repeat(min(var(--hkc-c), 4), minmax(0, 1fr)); background: var(--hkc-bg); }
.hkc-about .hkc-nums p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: 120px; padding: 16px 28px; }
.hkc-about .hkc-nums .hkc-big { font-size: 44px; line-height: 1; letter-spacing: -.035em; color: var(--hkc-mag); }
.hkc-about .hkc-nums span:not([data-hk-n]) { font: 700 16px/1.3 var(--sans); }

/* ------------------------------------------------------------ legal (kwu4i, zYHPn) */
.hkc-legal .hkc-lg-h { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); min-height: 260px; }
.hkc-legal .hkc-lg-t { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 32px; background: var(--hkc-bg); }
.hkc-legal .hkc-mk { color: var(--hkc-mag); margin: 0; }
.hkc-legal .hkc-lg-big { font: 800 clamp(40px, 4.45vw, 64px)/1 var(--sans); letter-spacing: -.045em; }
.hkc-legal .hkc-lg-r { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; background: var(--hkc-mag); color: var(--hkc-dark); }
.hkc-legal .hkc-lg-r b { margin-top: auto; font: 800 22px/1.15 var(--sans); }
.hkc-legal .hkc-lg-r .hkc-see { margin-top: auto; }
.hkc-legal .hkc-lg-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); padding: 48px 0 64px; background: var(--hkc-paper); color: var(--hkc-dark); }
.hkc-legal .hkc-toc { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 10px; padding: 0 32px; }
.hkc-legal .hkc-toc .hkc-k { color: var(--hkc-ddim); margin-bottom: 4px; }
.hkc-legal .hkc-toc a { width: max-content; max-width: 100%; font: 600 16.5px/1.3 var(--sans); }
.hkc-legal .hkc-toc a[aria-current] { color: var(--hkc-purple); font-weight: 800; }
.hkc-legal .hkc-toc a:focus-visible { outline-color: var(--hkc-dark); }
.hkc-legal .hkc-lg-x { padding: 0 40px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hkc-legal .hkc-lg-x > p.summary { margin: 0; font: 600 22px/1.5 var(--sans); color: var(--hkc-dark); }
.hkc-legal .lsec { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 24px; }
.hkc-legal .lsec h2 { margin: 20px 0 0; font: 800 36px/1.1 var(--sans); letter-spacing: -.03em; }
.hkc-legal .lsec h2:lang(ja), .hkc-legal .lsec :lang(ja) h2 { letter-spacing: 0; }
.hkc-legal .lsec p, .hkc-legal .lsec li { margin: 0; font: 400 19.5px/1.65 var(--sans); color: #1A1A1C; }
.hkc-legal .lsec b { color: var(--hkc-dark); }
.hkc-legal .lsec a { color: var(--hkc-purple); text-decoration: underline; text-underline-offset: 3px; }
.hkc-legal .lsec a:focus-visible { outline-color: var(--hkc-dark); }
.hkc-legal .lsec .grey { color: rgba(17, 17, 17, .72); }

/* ------------------------------------------------------------ support (ByPRE) */
.hkc-support .hkc-ph h1.hkc-k { margin: 0; }
.hkc-support .hkc-sp-big { font: 800 clamp(34px, 4.45vw, 64px)/1 var(--sans); letter-spacing: -.045em; max-width: 18ch; }
.hkc-support .hkc-sp-g { display: grid; grid-template-columns: repeat(min(var(--hkc-c), 4), minmax(0, 1fr)); }
.hkc-support .hkc-sp-g > section { display: flex; flex-direction: column; gap: 16px; padding: 26px var(--hkc-pad) 32px; min-width: 0; }
.hkc-support .hkc-sp-how { grid-column: span 2; }
.hkc-support .hkc-sp-g .hkc-k { color: inherit; opacity: .9; }
.hkc-support .hkc-sp-how > .hkc-k { color: var(--hkc-mag); opacity: 1; }
.hkc-support .hkc-sp-g p { margin: 0; font: 400 19.5px/1.5 var(--sans); }
.hkc-support .hkc-sp-g p.grey { font-size: 16.5px; color: inherit; opacity: .8; }
.hkc-support .hkc-sp-g a { text-decoration: underline; text-underline-offset: 3px; }
.hkc-support .sup-addr { display: flex; flex-direction: column; gap: 16px; }
.hkc-support .sup-addr code { font: 700 19.5px/1.4 var(--sans); overflow-wrap: anywhere; word-break: break-all; color: #fff; background: none; padding: 0; }
.hkc-support .hkc-copy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 20px; background: var(--hkc-mag); color: var(--hkc-dark); font: 800 19.5px/1.2 var(--sans); border: 0; border-radius: 0; }
.hkc-support .hkc-copy:hover { background: var(--hk-mag-press, #C63FDB); }
.hkc-support .sup-qr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.hkc-support .sup-qr img { width: 160px; height: 160px; background: #fff; padding: 8px; }
.hkc-support .hkc-sp-jp p.jp { line-height: 1.8; }
.hkc-support .hkc-sp-jp, .hkc-support .hkc-sp-jp * { font-family: var(--hkc-jp); }

/* ------------------------------------------------------------ 768 – 1099: the halves stay, sidebars fold in */
@media (max-width: 1099px) {
  .hkc-note .hkc-nb, .hkc-legal .hkc-lg-b, .hkc-about .hkc-ab-b { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .hkc-note .hkc-nb-r { grid-column: 1 / -1; padding: 40px 32px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; align-items: start; }
  .hkc-note .hkc-nb-r > .hkc-k { grid-column: 1 / -1; }
  .hkc-about .hkc-ab-t { grid-column: 1 / -1; }
  .hkc-legal .hkc-lg-x { padding: 0 32px 0 8px; }
  .hkc-story .hkc-sig { grid-template-columns: 1fr 1fr; }
  .hkc-story .hkc-sig-link { grid-column: 1 / -1; }
  .hkc-support .hkc-sp-how { grid-column: 1 / -1; }
}
/* ------------------------------------------------------------ phone (390 frames) */
@media (max-width: 767px) {
  .hkc .hkc-trail { min-height: 44px; }
  .hkc .hkc-trail .hkc-tsrc, .hkc .hkc-trail .hkc-tsrc + i, .hkc .hkc-trail i:last-of-type { display: none; }
  .hkc .hkc-sh { padding: 28px var(--hkc-pad) 16px; }
  .hkc .hkc-sh h2 { font-size: 32px; }
  .hkc .hkc-sh p { display: none; }
  .hkc .hkc-tiles { grid-auto-rows: 230px; }
  .hkc a.hkc-tile.hkc-w2 { grid-row: span 1; }
  .hkc .hkc-tiles > a.hkc-tile.hkc-w2 { min-height: 380px; }
  .hkc a.hkc-tile .hkc-tx { padding: 0 14px 14px; gap: 6px; }
  .hkc a.hkc-tile .hkc-h { font-size: 19.5px; -webkit-line-clamp: 4; }
  .hkc a.hkc-tile.hkc-w2 .hkc-h { font-size: 30px; }
  .hkc a.hkc-tile .hkc-h:lang(ja) { font-size: 17.5px; }
  .hkc a.hkc-tile .hkc-src { display: none; }
  .hkc a.hkc-tile.hkc-w2 .hkc-src { display: block; }
  .hkc a.hkc-tile:not(.hkc-w2) .hkc-kick { display: none; }
  .hkc .hkc-tiles { grid-auto-rows: auto; }
  .hkc .hkc-tiles > a.hkc-tile { min-height: 230px; }
  .hkc a.hkc-row { grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 14px; min-height: 0; padding: 14px var(--hkc-pad); }
  .hkc a.hkc-row .hkc-pic, .hkc a.hkc-row .hkc-fb { grid-row: 1 / span 2; width: 88px; height: 66px; align-self: start; }
  .hkc .hkc-rm { flex-direction: row; flex-wrap: wrap; gap: 0 8px; }
  .hkc .hkc-rs { font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--hkc-mag); }
  .hkc .hkc-rs::before { content: "· "; }
  .hkc .hkc-rh { font-size: 19.5px; }
  .hkc .hkc-rh:lang(ja) { font-size: 17.5px; }
  .hkc .hkc-ra { display: none; }
  .hkc .hkc-more { width: 100%; }

  .hkc-story .hkc-st { grid-template-columns: 1fr; min-height: 0; }
  .hkc-story .hkc-st-pic { min-height: 0; aspect-ratio: 390 / 300; }
  .hkc-story .hkc-st-tx { padding: 28px var(--hkc-pad) 32px; gap: 24px; }
  .hkc-story .hkc-st-h { font-size: 40px; }
  .hkc-story .hkc-st-h.hkc-long { font-size: clamp(40px, 3.6vw, 56px); }
.hkc-story .hkc-st-h:lang(ja) { font-size: 28px; }
  .hkc-story .hkc-st-ex { font-size: 22px; }
  .hkc-story .hkc-go { font-size: 19.5px; }
  .hkc-story .hkc-sig { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); min-height: 0; }
  .hkc-story .hkc-sig-tag { padding: 16px; }
  .hkc-story .hkc-sig-tag b { font-size: 22px; }
  .hkc-story .hkc-sig-n { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 4px; border: 0; }
  .hkc-story .hkc-sig-n .hkc-big { font-size: 34px; }
  .hkc-story .hkc-sig-n em { display: none; }
  .hkc-story .hkc-sig-link { padding: 14px 16px 18px; flex-direction: column; align-items: flex-start; }
  .hkc-story .hkc-morefrom span { font-size: 17.5px; }

  .hkc-list .hkc-lh, .hkc-week .hkc-wh, .hkc-about .hkc-ab-h, .hkc-legal .hkc-lg-h, .hkc-note.hkc-has-sig .hkc-nh-wrap { grid-template-columns: 1fr; min-height: 0; }
  .hkc-list .hkc-lh-name { padding: 20px var(--hkc-pad) 24px; gap: 20px; }
  .hkc-list .hkc-lh-b h1 { font-size: 46px; }
  .hkc-list .hkc-lh-b p { font-size: 17.5px; }
  .hkc-list .hkc-chart { padding: 20px var(--hkc-pad) 18px; gap: 14px; }
  .hkc-list .hkc-ch-note { display: none; }
  .hkc-list .hkc-bars { min-height: 84px; flex: none; height: 84px; gap: 3px; }
  .hkc-list .hkc-axis span:not(:first-child):not(.now) { display: none; }
  .hkc-list .hkc-chips { padding: 14px var(--hkc-pad); overflow: hidden; }
  .hkc-list .hkc-chips > .hkc-k { display: none; }
  .hkc-list .hkc-chips > div { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-right: calc(-1 * var(--hkc-pad)); padding-right: var(--hkc-pad); }
  .hkc-list .hkc-chips > div::-webkit-scrollbar { display: none; }
  .hkc-list .hkc-chips a { flex: none; }
  .hkc-source .hkc-fact { min-height: 112px; padding: 0 16px 14px; }
  .hkc-source .hkc-fact .hkc-big { font-size: 38px; }
  .hkc .hkc-all { padding: 28px var(--hkc-pad) 32px; }
  .hkc .hkc-all h2 { font-size: 30px; }
  .hkc .hkc-reg { grid-template-columns: 1fr; }

  .hkc-week .hkc-wh-w { padding: 20px var(--hkc-pad) 24px; }
  .hkc-week .hkc-wnav .hkc-arch { display: none; }
  .hkc-week .hkc-wnav { grid-template-columns: 1fr 1fr; }
  .hkc-week .hkc-wh-t h1 { font-size: 72px; }
  .hkc-week .hkc-wh-t > p { font-size: 19.5px; }
  .hkc-week .hkc-wh-s { padding: 20px var(--hkc-pad); gap: 6px; }
  .hkc-week .hkc-wh-s b { font-size: 25.36px; margin-top: 0; }
  .hkc-week .hkc-wh-m, .hkc-week .hkc-wh-s .hkc-see { display: none; }
  .hkc-week .hkc-ws .hkc-sh { display: none; }
  .hkc .hkc-wkstrip { grid-auto-columns: 78px; }
  .hkc .hkc-wkstrip a { min-height: 72px; align-items: center; padding: 0; }
  .hkc .hkc-wkstrip .hkc-k { display: none; }
  .hkc .hkc-wkstrip b { font-size: 25.36px; }

  .hkc-archive a.hkc-wk { grid-template-columns: 84px minmax(0, 1fr); }
  .hkc-archive .hkc-wa, .hkc-archive .hkc-wm, .hkc-archive .hkc-wnote { display: none; }
  .hkc-archive .hkc-wn { font-size: 34px; }
  .hkc-archive .hkc-ws { font-size: 19.5px; }

  .hkc-notes .hkc-nlist { grid-template-columns: 1fr; }
  .hkc-notes .hkc-nt:first-child { grid-column: auto; }
  .hkc-notes .hkc-nt, .hkc-note .hkc-mnt { min-height: 0; padding: 18px var(--hkc-pad) 20px; gap: 6px; }
  .hkc-notes .hkc-nh, .hkc-note .hkc-mnh, .hkc-notes .hkc-nt:first-child .hkc-nh { font-size: 22px; margin: 0; }
  .hkc-notes .hkc-nt:not(:first-child) .hkc-nr, .hkc-note .hkc-mnt .hkc-nr { display: none; }
  .hkc-note .hkc-mn-g { grid-template-columns: 1fr; }
  .hkc-note .hkc-mn .hkc-sh { display: none; }

  .hkc-note .hkc-nh-t { padding: 20px var(--hkc-pad) 20px; gap: 16px; }
  .hkc-note .hkc-nh-t .hkc-back { display: none; }
  .hkc-note .hkc-nh-t h1 { font-size: 40px; }
  .hkc-note .hkc-nh-t h1:lang(ja), :lang(ja) .hkc-note .hkc-nh-t h1 { font-size: 30px; }
  .hkc-note .hkc-nh-wrap { display: flex; flex-direction: column; }
  .hkc-note .hkc-nh-s { order: 9; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 18px var(--hkc-pad); }
  .hkc-note .hkc-nh-s .hkc-k { width: 100%; }
  .hkc-note .hkc-nh-s b { font-size: 22px; margin: 0; }
  .hkc-note .hkc-nb { grid-template-columns: 1fr; padding: 4px 0 28px; }
  .hkc-note .hkc-nb-t { padding: 0 var(--hkc-pad); order: 1; gap: 22px; }
  .hkc-note .note-body { gap: 22px; }
  .hkc-note .note-body p { font-size: 19.5px; }
  .hkc-note .note-body p.lead { font-size: 22px; }
  .hkc-note .hkc-nb-l { order: 2; padding: 24px var(--hkc-pad) 0; }
  .hkc-note .hkc-nb-l > .hkc-k { display: none; }
  .hkc-note .hkc-nb-l dl { border-top: 1px solid rgba(17, 17, 17, .14); padding-top: 14px; gap: 10px; }
  .hkc-note .hkc-nb-l dl > div { display: flex; justify-content: space-between; gap: 16px; border: 0; padding: 0; }
  .hkc-note .hkc-nb-l dd { margin: 0; text-align: right; }
  .hkc-note .hkc-nb-r { order: 3; display: flex; padding: 24px var(--hkc-pad) 0; }
  .hkc-note .hkc-wire { min-height: 160px; }
  /* the move into the paper: the "Signal that week" band sits below the body on a phone (o92mGm) */
  .hkc-note.hkc-has-sig { display: flex; flex-direction: column; }
  .hkc-note.hkc-has-sig .hkc-nh-wrap { display: contents; }
  .hkc-note.hkc-has-sig .hkc-nh-t { order: 1; background: var(--hkc-paper); color: var(--hkc-dark); }
  .hkc-note.hkc-has-sig .hkc-nb { order: 2; }
  .hkc-note.hkc-has-sig .hkc-nh-s { order: 3; }
  .hkc-note.hkc-has-sig .hkc-mn { order: 4; }

  .hkc-about .hkc-ab-w { padding: 20px var(--hkc-pad) 24px; gap: 8px; }
  .hkc-about .hkc-ab-word { flex-direction: column; align-items: flex-start; gap: 0; }
  .hkc-about .hkc-kanji { font-size: 120px; }
  .hkc-about .hkc-ab-d { flex-direction: row; flex-wrap: wrap; gap: 0 8px; padding: 0; }
  .hkc-about .hkc-ab-d b, .hkc-about .hkc-ab-d span { font: 700 19.5px/1.3 var(--sans); letter-spacing: 0; color: var(--hkc-purple); }
  .hkc-about .hkc-ab-d b::after { content: " ·"; }
  .hkc-about .hkc-ab-l { font-size: 19.5px; }
  .hkc-about .hkc-ab-e { padding: 18px var(--hkc-pad) 20px; gap: 6px; }
  .hkc-about .hkc-ab-e .hkc-av, .hkc-about .hkc-ab-e .hkc-see { display: none; }
  .hkc-about .hkc-ab-e b { font-size: 22px; }
  .hkc-about .hkc-ab-b { grid-template-columns: 1fr; padding: 24px 0 32px; }
  .hkc-about .hkc-ab-t { padding: 0 var(--hkc-pad); }
  .hkc-about .hkc-ab-t p:first-child { font-size: 22px; }
  .hkc-about .hkc-prom { grid-template-columns: 1fr; }
  .hkc-about .hkc-prom > * { min-height: 0; padding: 16px var(--hkc-pad) 18px; gap: 4px; }
  .hkc-about .hkc-prom b { font-size: 22px; margin: 0; }
  .hkc-about .hkc-prom p { display: none; }
  .hkc-about .hkc-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hkc-about .hkc-nums p { min-height: 96px; padding: 14px 16px; }
  .hkc-about .hkc-nums .hkc-big { font-size: 34px; }

  .hkc-legal .hkc-lg-t { padding: 20px var(--hkc-pad) 24px; gap: 20px; }
  .hkc-legal .hkc-lg-big { font-size: 34px; }
  .hkc-legal .hkc-lg-r { padding: 18px var(--hkc-pad) 20px; flex-direction: column; gap: 8px; }
  .hkc-legal .hkc-lg-r b { font-size: 19.5px; margin: 0; }
  .hkc-legal .hkc-lg-r .hkc-see { margin: 0; }
  .hkc-legal .hkc-lg-b { grid-template-columns: 1fr; padding: 24px 0 40px; }
  .hkc-legal .hkc-toc { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; gap: 8px; padding: 0 var(--hkc-pad) 20px; }
  .hkc-legal .hkc-toc::-webkit-scrollbar { display: none; }
  .hkc-legal .hkc-toc .hkc-k { display: none; }
  .hkc-legal .hkc-toc a { flex: none; padding: 8px 14px; border-radius: 18px; background: rgba(17, 17, 17, .07); }
  .hkc-legal .hkc-lg-x { padding: 0 var(--hkc-pad); }
  .hkc-legal .lsec h2 { font-size: 28px; }

  .hkc-support .hkc-sp-g { grid-template-columns: 1fr; }
  .hkc-support .hkc-sp-how { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hkc *, .hkc *::before, .hkc *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ late fixes: kickers that are headings keep the kicker size */
.hkc .hkc-ph h1.hkc-k, .hkc-legal h1.hkc-k { font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; max-width: none; }
.hkc-support .hkc-sp-g p.hkc-k { font: 800 var(--hkc-floor)/1.2 var(--sans); letter-spacing: 2px; }
.hkc-support .hkc-sp-jp { grid-column: 1 / -1; }
.hkc-support .hkc-sp-jp p.jp { max-width: 60em; }
.hkc .hkc-kick > span { min-width: 0; }
@media (max-width: 1099px) {
  .hkc-note .hkc-mn-g, .hkc-about .hkc-prom, .hkc-about .hkc-nums, .hkc-support .hkc-sp-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hkc-support .hkc-sp-how { grid-column: 1 / -1; }
}
@media (max-width: 900px) and (min-width: 768px) {
  .hkc-story .hkc-st { grid-template-columns: 1fr; min-height: 0; }
  .hkc-story .hkc-st-pic { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .hkc-note .hkc-mn-g, .hkc-about .hkc-prom, .hkc-support .hkc-sp-g { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ size floors: the sizes the engine already set on these pages
   (site.css before the redesign: h1.story 43, .summary 25.36, .note-body p 22 / 20 in Japanese, .note-list h2 31 and its
   date 16.5, .note-refs source 15, .archive dates 16.5, .meta 16.5, .thumb h2 / .post h2 19.5). Placed last so no width
   above goes under them. */
.hkc-story .hkc-st-h, .hkc-story .hkc-st-h:lang(ja), .hkc-story .hkc-st-h.hkc-long { font-size: max(43px, min(4.45vw, 64px)); }
.hkc-story .hkc-st-h.hkc-long { font-size: max(43px, min(3.6vw, 56px)); }
.hkc-story .hkc-st-ex { font-size: max(25.36px, min(1.95vw, 28px)); }
.hkc-story .hkc-st-top .hkc-kick, .hkc-note .hkc-nh-t .hkc-pk { font-size: 16.5px; }
.hkc-note .hkc-nh-t h1, .hkc-note .hkc-nh-t h1:lang(ja), :lang(ja) .hkc-note .hkc-nh-t h1 { font-size: max(43px, min(6.7vw, 96px)); }
.hkc .hkc-ph h1:not(.hkc-k) { font-size: max(43px, min(5vw, 78px)); }
.hkc-legal .hkc-lg-big, .hkc-support .hkc-sp-big { font-size: max(43px, min(4.45vw, 64px)); }
.hkc-note .note-body p { font-size: 22px; }
:root[lang="ja"] .hkc-note .note-body p, .hkc-note .note-body p:lang(ja) { font-size: 20px; }
.hkc-note .note-body p.lead { font-size: max(25.36px, min(2.1vw, 30px)); }
.hkc-notes .hkc-nh, .hkc-note .hkc-mnh, .hkc-notes .hkc-nt:first-child .hkc-nh { font-size: 31px; }
.hkc-notes .hkc-nt:first-child .hkc-nh { font-size: max(31px, min(3vw, 48px)); }
.hkc-notes .hkc-nt .hkc-k, .hkc-note .hkc-mnt .hkc-k, .hkc-archive .hkc-wd { font-size: 16.5px; }
.hkc-note .hkc-wire .hkc-src { font-size: 15px; }
.hkc a.hkc-tile .hkc-h:lang(ja), .hkc .hkc-rh, .hkc .hkc-rh:lang(ja) { font-size: max(19.5px, var(--hkc-hj, 19.5px)); }
.hkc a.hkc-tile .hkc-h { font-size: max(19.5px, var(--hkc-hs, 24px)); }
@media (min-width: 768px) { .hkc .hkc-rh { font-size: 24px; } .hkc .hkc-rh:lang(ja) { font-size: 22px; } .hkc a.hkc-tile .hkc-h:lang(ja) { font-size: 22px; } }
@media (max-width: 767px) { .hkc a.hkc-tile:not(.hkc-w2) .hkc-h { font-size: 19.5px; } .hkc a.hkc-tile.hkc-w2 .hkc-h { font-size: 30px; } .hkc-about .hkc-ab-l { font-size: 25.36px; } }
.hkc a.hkc-tile.hkc-w2 .hkc-h { font-size: max(30px, min(2.6vw, 44px)); }
.hkc a.hkc-tile.hkc-w2 .hkc-h:lang(ja) { font-size: max(26px, min(2.2vw, 34px)); }
.hkc-about .hkc-ab-l { font-size: 25.36px; }

/* ============================================================ audit 2026-10-16: design-vs-build fixes
   Line height: the frames' 1.05–1.08 are Inter values; in the locked Hiragino Sans the lines of a wide tile touched. */
.hkc a.hkc-tile.hkc-w2 .hkc-h:not(:lang(ja)), .hkc-note .hkc-nh-s b { line-height: 1.12; }

/* archive, desktop frame Pz2lm: the head is two halves, paper title and the dark strip of each week's signal */
.hkc-archive .hkc-ac { display: none; }
@media (min-width: 1100px) {
  .hkc-archive .hkc-ah { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hkc-archive .hkc-ah > .hkc-ph { justify-content: space-between; min-height: 300px; }
  .hkc-archive .hkc-ac { display: flex; flex-direction: column; gap: 20px; padding: 32px var(--hkc-pad) 24px; background: var(--hkc-bg); min-width: 0; }
  .hkc-archive .hkc-ac > .hkc-k { color: var(--hkc-mag); letter-spacing: 2.4px; }
  .hkc-archive .hkc-acs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: auto; }
  .hkc-archive .hkc-acw { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 120px; padding: 10px 6px; min-width: 0; }
  .hkc-archive .hkc-acw b { font: 800 34px/1 var(--sans); letter-spacing: -.035em; }
  .hkc-archive .hkc-acw { position: relative; }
  /* the frame sets these names at 9 px; at the 14.6 px floor they fit a block only from ~1700 px, so below that the name is
     read out but not drawn (the rows right under the strip name every week's signal) */
  .hkc-archive .hkc-acw span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hkc-archive .hkc-acw:focus-visible { outline-offset: -3px; }
  .hkc-archive .hkc-acl { margin: 0; font: 400 16.5px/1.35 var(--sans); color: var(--hkc-dim); }
}
@media (min-width: 1700px) {
  .hkc-archive .hkc-acw span { position: static; width: auto; height: auto; clip: auto; white-space: normal; font: 800 var(--hkc-floor)/1.15 var(--sans); letter-spacing: -.01em; overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* one full-width row per week: number block 180, date and signal, three pictures of that week, arrow */
.hkc-archive .hkc-wth { display: none; }
@media (min-width: 1100px) {
  .hkc-archive .hkc-weeks { grid-template-columns: minmax(0, 1fr); }
  .hkc-archive a.hkc-wk { grid-template-columns: 180px minmax(0, 1fr) auto 120px; min-height: 120px; }
  .hkc-archive .hkc-wn { font-size: 48px; }
  .hkc-archive .hkc-wt { padding: 14px 32px; }
  .hkc-archive .hkc-ws { font-size: 32px; letter-spacing: -.035em; line-height: 1.15; }
  .hkc-archive .hkc-wth { display: flex; }
  .hkc-archive .hkc-wpic { display: block; width: 120px; height: 120px; overflow: hidden; background: var(--hkc-card); }
  .hkc-archive .hkc-wpic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 450ms ease-out; }
  .hkc-archive a.hkc-wk:is(:hover, :focus-visible) .hkc-wpic img { transform: scale(1.03); }
  .hkc-archive .hkc-wa { justify-self: center; color: var(--hkc-mag); }
}

/* editor's notes list, desktop frame B7kTx5: editor card beside the title, a days-between-notes count beside the newest note,
   and the older notes as a list */
@media (min-width: 1100px) {
  .hkc-notes .hkc-nhd { display: grid; grid-template-columns: repeat(var(--hkc-c), minmax(0, 1fr)); }
  .hkc-notes .hkc-nhd > .hkc-ph { grid-column: 1 / -2; justify-content: space-between; min-height: 380px; padding-top: 32px; }
  .hkc-notes .hkc-nau { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; min-width: 0; color: var(--hkc-dark); }
  .hkc-notes .hkc-nau-w { display: flex; flex-direction: column; gap: 10px; margin-top: auto; min-height: 150px; justify-content: flex-end; }
  .hkc-notes .hkc-nau .hkc-av { width: 64px; height: 64px; font-size: 22px; }
  .hkc-notes .hkc-nau b { font: 800 30px/1.1 var(--sans); letter-spacing: -.03em; }
  .hkc-notes .hkc-nau-r { font: 600 16.5px/1.35 var(--sans); }
  .hkc-notes .hkc-nau .hkc-see { margin-top: auto; }
  .hkc-notes .hkc-ngap { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; margin: 0; padding: 26px 28px 28px; min-height: 280px; }
  .hkc-notes .hkc-ngap .hkc-big { font-size: 56px; line-height: 1; letter-spacing: -.035em; color: var(--hkc-mag); }
  .hkc-notes .hkc-ngap > span { font: 700 16.5px/1.3 var(--sans); }
  .hkc-notes .hkc-nlist > .hkc-nt:first-child .hkc-nh { font-size: max(48px, min(5.8vw, 84px)); line-height: 1.08; letter-spacing: -.04em; }   /* B7kTx5: 84 px */
  .hkc-notes .hkc-nold { display: flex; flex-direction: column; padding: 32px var(--hkc-pad) 40px; background: var(--hkc-bg); }
  .hkc-notes .hkc-nold > .hkc-k { color: var(--hkc-dim); letter-spacing: 2px; margin-bottom: 4px; }
  .hkc-notes .hkc-nold a { display: grid; grid-template-columns: 114px minmax(0, 1fr) 20px; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--hkc-ink); }
  .hkc-notes .hkc-nold .hkc-nod { font: 800 16.5px/1.2 var(--sans); letter-spacing: 1.6px; text-transform: uppercase; color: var(--hkc-mag); }
  .hkc-notes .hkc-nold .hkc-noh { font: 800 24px/1.2 var(--sans); letter-spacing: -.025em; }
  .hkc-notes .hkc-nold .hk-i { color: var(--hkc-dim); }
  .hkc-notes .hkc-nold a:is(:hover, :focus-visible) .hkc-noh { text-decoration: underline; text-decoration-color: var(--hkc-mag); text-decoration-thickness: 3px; text-underline-offset: 5px; }
}

/* support, desktop frame coPU5: the paper head and the address panel side by side, the two text blocks below as halves */
.hkc-support .hkc-sp-h { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .hkc-support .hkc-sp-h { grid-column: span 2; justify-content: space-between; }
  .hkc-support .hkc-sp-what, .hkc-support .hkc-sp-dis { grid-column: span 2; }
}
/* the head now sits inside .hkc-sp-g, whose block rules (p 19.5px, kicker colour) must not reach it */
.hkc-support .hkc-sp-g .hkc-sp-h .hkc-sp-big { font: 800 max(43px, min(4.45vw, 64px))/1 var(--sans); letter-spacing: -.045em; max-width: 18ch; }
.hkc-support .hkc-sp-g .hkc-sp-h .hkc-dek { font: 600 18px/1.4 var(--sans); max-width: 40em; }
.hkc-support .hkc-sp-g .hkc-sp-h .hkc-pk { color: var(--hkc-purple); opacity: 1; }
/* contrast: white headlines on a light picture fell under 4.5:1 where the 35 % shade had not yet darkened (signal 390 lead
   tile on a white app icon); the shade now starts earlier and is half dark by the middle */
.hkc a.hkc-tile:not(.noimg)::before { background: linear-gradient(180deg, rgba(14, 14, 16, 0) 22%, rgba(14, 14, 16, .55) 52%, rgba(14, 14, 16, .94) 100%); }
/* notes list from 1100 to 1299 px: four columns left ~223 px for a 31 px title and broke words ("Photographe/d");
   three columns until the tiles are wide enough (hk-pages-c.js reads --hkc-c for the row maths) */
@media (min-width: 1100px) and (max-width: 1299px) { html.hk-c-notes { --hkc-c: 3; } }

/* hk-pages-d — Hakken redesign, build slice D (2026-10-16). Japan now (feaFM / MTPH8), Studio sound (rGLs9 / L2vmD8), search
   (YUAjx / KicnX), the full Departures board (pR4AR) and the Releases index (obVOF / YBxxK). Values from the Pencil frames;
   every rule is scoped to a class hk-pages-d.js puts on <html> (hkd-japan-p, hkd-sound-p, hkd-search-p, hkd-dep, hkd-rel) or to
   the main the step pages get (main.xpage-japan / -sound / -search), so no other page changes.
   Fonts: the site's own families (var(--sans); Zen Kaku Gothic New for Japanese through .jp), never new ones. Sizes: the frames'
   numbers, raised to the owner's floor of 14.6px wherever a frame label is smaller (11–13px in the frames); on the two restyled
   engine pages no element is set smaller than the engine had it. */

:root {
  --hkd-ink: #0E0E10; --hkd-board: #050506; --hkd-panel: #1E1E22; --hkd-side: #141416; --hkd-paper: #F4F2EE;
  --hkd-mag: #EC5CFF; --hkd-mag-t: #A0219E; --hkd-amber: #F2C230; --hkd-blue: #2D5BE3; --hkd-red: #D93A2B; --hkd-night: #2B2B30;
  --hkd-dim: rgba(255, 255, 255, .68); --hkd-gone: rgba(255, 255, 255, .52); --hkd-rule: rgba(255, 255, 255, .08);
  --hkd-pad: 32px; --hkd-ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 767px) { :root { --hkd-pad: 16px; } }

/* ------------------------------------------------------------ the page frame: full bleed, dark, under the shell's bars */
main#single.xpage-japan, main#single.xpage-sound, main#single.xpage-search,
html.hkd-dep main#single.hkd-main, html.hkd-rel main.single.xpage-releases {
  max-width: none; width: auto; margin: 0; padding: 0;   /* the shell's bars are sticky / in flow (hk-shell, slice A) */ background: var(--hkd-ink); color: #fff;
}
html.hkd-on body { background: var(--hkd-ink); }
.hkd { --bg: var(--hkd-ink); --ink: #fff; font-family: var(--sans); color: #fff; overflow-x: clip; }
.hkd *, .hkd *::before, .hkd *::after { box-sizing: border-box; }
.hkd h1, .hkd h2, .hkd h3, .hkd p, .hkd ol, .hkd ul { margin: 0; padding: 0; }
.hkd ol, .hkd ul { list-style: none; }
.hkd a { color: inherit; text-decoration: none; }
.hkd .jp { font-family: "Zen Kaku Gothic New", "Hiragino Sans", var(--sans); letter-spacing: 0; }
.hkd [lang="ja"] { font-family: "Zen Kaku Gothic New", "Hiragino Sans", var(--sans); letter-spacing: 0; }
.hkd-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hkd .ar { display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.hkd .hk-i { display: block; }
.hkd :focus-visible { outline: 3px solid var(--hkd-mag); outline-offset: 2px; }
.hkd-g { font-style: normal; }
.hkd [id] { scroll-margin-top: 88px; }
/* links: an underline that grows from the left (motion rules, 2026-10-16) */
.hkd .hkd-u, .hkd-all, .hkd-wbtn, .hkd-snote a, .hkd-trend .s, .hkd-wlist b, .hkd-r a.c-n {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--hkd-ease);
}
.hkd-all:hover, .hkd-all:focus-visible, .hkd-wbtn:hover, .hkd-wbtn:focus-visible, .hkd-snote a:hover, .hkd-snote a:focus-visible,
.hkd-trend .s:hover, .hkd-trend .s:focus-visible, .hkd-wlist a:hover b, .hkd-wlist a:focus-visible b, .hkd-r a.c-n:hover, .hkd-r a.c-n:focus-visible { background-size: 100% 2px; }
.hkd-r a.c-n { background-image: linear-gradient(var(--hkd-mag), var(--hkd-mag)); }
.hkd-chip, .hkd-f, .hkd-more button, .hkd .pl, .hkd .sp { transition: background-color .15s, color .15s, transform .15s; }

/* ------------------------------------------------------------ section heads (Japanese web, trends) */
.hkd-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 48px var(--hkd-pad) 24px; }
.hkd-sh h2 { font-size: 48px; font-weight: 800; letter-spacing: -1.8px; line-height: 1.05; }
.hkd-sh p { font-size: 16.5px; font-weight: 400; color: var(--hkd-dim); }
.hkd-h1 { font-weight: 800; color: #fff; }
.hkd-h1 .jp { font-weight: 900; }

/* ============================================================ Japan now */
.hkd-jh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 300px; }
.hkd-jt { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 32px var(--hkd-pad); background: var(--hkd-ink); }
.hkd-japan .hkd-h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; font-size: clamp(64px, 6.4vw, 120px); letter-spacing: -.045em; line-height: .95; }
.hkd-japan .hkd-h1 .jp { font-size: .44em; color: var(--hkd-mag); }
.hkd-dek { font-size: 19.5px; font-weight: 400; line-height: 1.45; color: var(--hkd-dim); max-width: 34em; }
.hkd-facts { display: grid; grid-template-columns: 1fr 1fr; }
.hkd-fact { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; min-height: 150px; color: var(--hkd-ink); }
.hkd-fact b { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; }
.hkd-fact .l { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.hkd-fact .s { display: none; }
.f-on { background: var(--hkd-mag); } .f-soon { background: var(--hkd-paper); } .f-last { background: var(--hkd-blue); color: #fff; } .f-cities { background: var(--hkd-amber); }

/* the board (Japan now and the full board share it) */
.hkd-board { background: var(--hkd-board); padding: 48px var(--hkd-pad) 40px; }
.hkd-bh { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding-bottom: 20px; }
.hkd-bh h2 { font-size: 56px; font-weight: 800; letter-spacing: -2.2px; line-height: 1; color: var(--hkd-amber); }
.hkd-bh h2 .jp { font-size: 32px; font-weight: 900; margin-left: 12px; }
.hkd-bn { margin-left: auto; font-weight: 400; font-size: 14.6px; color: var(--hkd-dim); }
.hkd-cols, .hkd-r { display: grid; grid-template-columns: minmax(210px, 230px) minmax(150px, 200px) minmax(0, 1fr) minmax(180px, 320px) minmax(80px, 120px); column-gap: 16px; align-items: center; }
.hkd-cols { padding: 10px 0; border-top: 1px solid rgba(242, 194, 48, .4); border-bottom: 1px solid rgba(242, 194, 48, .4); font-size: 14.6px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: var(--hkd-amber); }
.hkd-r { padding: 16px 0; border-bottom: 1px solid var(--hkd-rule); min-height: 56px; }
.hkd-r .c-st { font-size: 14.6px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #fff; white-space: nowrap; }
.hkd-r .c-st .s { display: none; }
.hkd-r.st-last .c-st { color: var(--hkd-mag); }
.hkd-r.st-on .c-st { color: var(--hkd-amber); }
.hkd-r .c-d { font-size: 16.5px; font-weight: 700; color: var(--hkd-amber); white-space: nowrap; }
.hkd-r .c-n { font-size: 20px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; color: #fff; justify-self: start; }
.hkd-r .c-v { font-size: 16.5px; font-weight: 400; color: var(--hkd-dim); line-height: 1.3; }
.hkd-r .c-d small { display: block; font-size: 14.6px; font-weight: 400; color: var(--hkd-dim); white-space: normal; }
.hkd-r .c-c { font-size: 16.5px; font-weight: 700; color: #fff; }
.hkd-r.st-gone > * , .hkd-r.st-gone .c-st { color: var(--hkd-gone); }
.hkd-r[hidden] { display: none; }
.hkd-all { display: none; margin-top: 18px; font-size: 16.5px; font-weight: 800; color: var(--hkd-amber); }
.hkd-empty { padding: 24px 0; font-size: 19.5px; color: var(--hkd-dim); }

/* Japanese web */
.hkd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hkd-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--hkd-panel); }
.hkd-pic { position: absolute; inset: 0; display: block; }
.hkd-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--hkd-ease); }
.hkd-tile:hover .hkd-pic img, .hkd-tile:focus-visible .hkd-pic img { transform: scale(1.03); }
.hkd-pic .fb, .hkd-th .fb { display: none; }
.hkd-pic.noimg .fb, .hkd-th.noimg .fb, .hkd-big.noimg .fb { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; padding: 16px; text-align: center;
  font-size: 19.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--hkd-mag); background: var(--hkd-panel); }
.hkd-tile::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); pointer-events: none; }
.hkd-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.hkd-cap .d { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag); }
.hkd-cap b { font-size: 24px; font-weight: 700; line-height: 1.3; color: #fff; }
.hkd-cap .s { font-size: 14.6px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hkd-dim); }

/* trends: four colour blocks */
.hkd-tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hkd-trend { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 340px; padding: 26px; color: var(--hkd-ink); }
.hkd-trend h3 { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.05; }
.hkd-trend .b { display: flex; flex-direction: column; gap: 10px; }
.hkd-trend p { font-size: 16.5px; font-weight: 400; line-height: 1.45; }
.hkd-trend .s { align-self: flex-start; font-size: 14.6px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.hkd-trend.c0 { background: var(--hkd-paper); } .hkd-trend.c1 { background: var(--hkd-mag); } .hkd-trend.c2 { background: var(--hkd-blue); color: #fff; } .hkd-trend.c3 { background: var(--hkd-amber); }

/* the wire strip */
.hkd-wire { background: var(--hkd-panel); }
.hkd-wbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px var(--hkd-pad); }
.hkd-wbar h2 { font-size: 20px; font-weight: 800; }
.hkd-wbtn { appearance: none; border: 0; background-color: transparent; color: var(--hkd-mag); font: 800 16.5px var(--sans); cursor: pointer; padding: 6px 0; white-space: nowrap; }
.hkd-wbtn[aria-expanded="true"] .ar { transform: rotate(90deg); }
.hkd-wlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 32px; padding: 0 var(--hkd-pad) 24px; }
.hkd-wlist[hidden] { display: none; }
.hkd-wlist a { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hkd-rule); }
.hkd-wlist .d { font-size: 14.6px; font-weight: 700; color: var(--hkd-dim); }
.hkd-wlist b { font-size: 19.5px; font-weight: 800; line-height: 1.25; justify-self: start; align-self: flex-start; }

@media (max-width: 1099px) {
  .hkd-jh { grid-template-columns: 1fr; }
  .hkd-cols { display: none; }
  .hkd-r { grid-template-columns: 1fr auto; grid-template-areas: "st d" "n n" "v v"; row-gap: 6px; padding: 16px 0; }
  .hkd-r .c-st { grid-area: st; } .hkd-r .c-d { grid-area: d; text-align: right; } .hkd-r .c-n { grid-area: n; font-size: 22px; }
  .hkd-r .c-v { grid-area: v; } .hkd-r .c-c { display: none; }
  .hkd-r .c-v::after { content: " · " attr(data-c); }
  .hkd-tiles, .hkd-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hkd-all { display: inline-block; }
}
@media (max-width: 767px) {
  .hkd-jt { padding: 24px var(--hkd-pad) 28px; }
  .hkd-japan .hkd-h1 { font-size: 46px; gap: 4px 12px; }
  .hkd-japan .hkd-h1 .jp { font-size: 22px; }
  .hkd-dek { font-size: 16.5px; }
  .hkd-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hkd-fact { min-height: 96px; padding: 12px; gap: 4px; }
  .hkd-fact.f-cities { display: none; }
  .hkd-fact b { font-size: 34px; }
  .hkd-fact .l { display: none; } .hkd-fact .s { display: block; font-size: 14.6px; font-weight: 700; }
  .hkd-board { padding: 24px var(--hkd-pad); }
  .hkd-bh { padding-bottom: 8px; }
  .hkd-bh h2 { font-size: 34px; letter-spacing: -1px; } .hkd-bh h2 .jp { font-size: 22px; margin-left: 8px; }
  .hkd-bn { display: none; }
  .hkd-r { padding: 14px 0; }
  .hkd-r .c-st .l { display: none; } .hkd-r .c-st .s { display: inline; }
  .hkd-r .c-d { font-size: 14.6px; }
  .hkd-r .c-n { font-size: 19.5px; }
  .hkd-r .c-v { font-size: 14.6px; }
  .hkd-japan .hkd-r.cut { display: none; }
  .hkd-sh { padding: 32px var(--hkd-pad) 16px; } .hkd-sh h2 { font-size: 32px; letter-spacing: -1px; } .hkd-sh p { font-size: 14.6px; }
  .hkd-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .hkd-tiles .hkd-tile { flex: 0 0 50%; scroll-snap-align: start; }
  .hkd-cap { left: 14px; right: 14px; bottom: 14px; } .hkd-cap b { font-size: 19.5px; }
  .hkd-tgrid { grid-template-columns: 1fr; }
  .hkd-trend { min-height: 0; gap: 12px; padding: 18px var(--hkd-pad); }
  .hkd-trend h3 { font-size: 22px; letter-spacing: -.4px; }
  .hkd-trend p { display: none; }
  .hkd-wbar { flex-wrap: wrap; } .hkd-wbar h2 { font-size: 19.5px; }
  .hkd-wlist { grid-template-columns: 1fr; }
}

/* ============================================================ Studio sound */
.hkd-sh2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 440px; }
.hkd-now { display: flex; flex-direction: column; padding: 32px var(--hkd-pad); color: #fff; }
.hkd-now .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hkd-now .k, .hkd-day .k { font-size: 14.6px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; }
.hkd-now a.sp { font-size: 16.5px; font-weight: 800; white-space: nowrap; }
.hkd-now .n { margin-top: auto; padding-top: 32px; font-size: clamp(80px, 9.7vw, 180px); font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.hkd-now .x { margin-top: 12px; font-size: 22px; font-weight: 600; line-height: 1.35; max-width: 26em; }
.hkd-now .ctl { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.hkd .pl { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; }
.hkd-now .pl { width: 64px; height: 64px; background: #fff; color: var(--now-c, var(--hkd-blue)); }
.hkd .pl:hover { transform: scale(1.06); }
.hkd-now .trk { flex: 1; height: 5px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.hkd-now .trk i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.hkd-now .emb { margin-top: 24px; }
.hkd-now .emb iframe { display: block; border: 0; border-radius: 12px; }
.hkd-now .emb[hidden] { display: none; }
.hkd-now.c0 { background: var(--hkd-mag); color: var(--hkd-ink); --now-c: var(--hkd-mag); } .hkd-now.c0 .pl { background: var(--hkd-ink); color: var(--hkd-mag); } .hkd-now.c0 .trk { background: rgba(0, 0, 0, .2); } .hkd-now.c0 .trk i { background: var(--hkd-ink); }
.hkd-now.c1 { background: var(--hkd-blue); --now-c: var(--hkd-blue); }
.hkd-now.c2 { background: var(--hkd-amber); color: var(--hkd-ink); --now-c: var(--hkd-amber); } .hkd-now.c2 .pl { background: var(--hkd-ink); color: var(--hkd-amber); } .hkd-now.c2 .trk { background: rgba(0, 0, 0, .2); } .hkd-now.c2 .trk i { background: var(--hkd-ink); }
.hkd-now.c3 { background: var(--hkd-red); --now-c: var(--hkd-red); }
.hkd-now.c4 { background: var(--hkd-night); --now-c: var(--hkd-night); }
.hkd-day { display: flex; flex-direction: column; padding: 32px var(--hkd-pad); background: var(--hkd-ink); }
.hkd-day .k { color: var(--hkd-mag); }
.hkd-clock { margin: auto 0; padding: 40px 0; }
.hkd-bar { position: relative; height: 72px; background: var(--hkd-night); }
.hkd-bar .seg { position: absolute; top: 0; bottom: 0; overflow: hidden; }
.hkd-bar .seg b { position: absolute; left: 8px; top: 10px; font-size: 14.6px; font-weight: 800; white-space: nowrap; }
.hkd-bar .seg.c0 { background: var(--hkd-mag); color: var(--hkd-ink); } .hkd-bar .seg.c1 { background: var(--hkd-blue); color: #fff; } .hkd-bar .seg.c2 { background: var(--hkd-amber); color: var(--hkd-ink); }
.hkd-bar .seg.c3 { background: var(--hkd-red); color: #fff; } .hkd-bar .seg.c4 { background: var(--hkd-night); color: #fff; }
.hkd-bar .now { position: absolute; top: -8px; bottom: -8px; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.hkd-axis { position: relative; height: 22px; margin-top: 10px; }
.hkd-axis .tk { position: absolute; top: 0; font-size: 14.6px; font-weight: 700; color: var(--hkd-dim); font-variant-numeric: tabular-nums; }
.hkd-axis .tk.end { transform: translateX(-100%); }
.hkd-day .nb { font-size: 16.5px; font-weight: 400; color: var(--hkd-dim); }
.hkd-pls li { display: grid; grid-template-columns: 52px minmax(90px, 120px) minmax(140px, 260px) minmax(0, 1fr) auto; align-items: center; column-gap: 24px; min-height: 96px; padding: 12px var(--hkd-pad); }
.hkd-pls .t { font-size: 28px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.hkd-pls .n { font-size: 36px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; }
.hkd-pls .x { font-size: 16.5px; font-weight: 400; line-height: 1.4; }
.hkd-pls a.sp { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 20px; font-size: 14.6px; font-weight: 800; white-space: nowrap; background: rgba(0, 0, 0, .15); }
.hkd-pls a.sp:hover, .hkd-pls a.sp:focus-visible { background: rgba(0, 0, 0, .3); }
.hkd-pl.c0 { background: var(--hkd-mag); color: var(--hkd-ink); } .hkd-pl.c0 .pl { background: var(--hkd-ink); color: var(--hkd-mag); }
.hkd-pl.c1 { background: var(--hkd-blue); color: #fff; } .hkd-pl.c1 .pl { background: #fff; color: var(--hkd-blue); }
.hkd-pl.c2 { background: var(--hkd-amber); color: var(--hkd-ink); } .hkd-pl.c2 .pl { background: var(--hkd-ink); color: var(--hkd-amber); }
.hkd-pl.c3 { background: var(--hkd-red); color: #fff; } .hkd-pl.c3 .pl { background: #fff; color: var(--hkd-red); }
.hkd-pl.c4 { background: var(--hkd-night); color: #fff; } .hkd-pl.c4 .pl { background: #fff; color: var(--hkd-night); } .hkd-pl.c4 a.sp { background: rgba(255, 255, 255, .14); }
.hkd-snote { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px var(--hkd-pad); }
.hkd-snote p { font-size: 16.5px; font-weight: 400; color: var(--hkd-dim); }
.hkd-snote a { font-size: 16.5px; font-weight: 800; color: var(--hkd-mag); }
@media (max-width: 1099px) {
  .hkd-sh2 { grid-template-columns: 1fr; min-height: 0; }
  .hkd-now { min-height: 440px; }
  .hkd-pls li { grid-template-columns: 52px 90px minmax(0, 1fr) auto; grid-template-areas: "p t n s" "p t x s"; row-gap: 4px; }
  .hkd-pls .pl { grid-area: p; } .hkd-pls .t { grid-area: t; } .hkd-pls .n { grid-area: n; } .hkd-pls .x { grid-area: x; } .hkd-pls a.sp { grid-area: s; }
}
@media (max-width: 767px) {
  .hkd-now { padding: 24px var(--hkd-pad); }
  .hkd-now .top a.sp { display: none; }
  .hkd-now .n { padding-top: 16px; font-size: 80px; }
  .hkd-now .x { font-size: 16.5px; }
  .hkd-now .ctl { margin-top: 20px; } .hkd-now .pl { width: 48px; height: 48px; }
  .hkd-day { padding: 0; }
  .hkd-day .k, .hkd-day .nb, .hkd-axis { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hkd-clock { margin: 0; padding: 0; }
  .hkd-bar { height: 36px; } .hkd-bar .seg b { display: none; } .hkd-bar .now { top: 0; bottom: 0; }
  .hkd-pls li { grid-template-columns: 40px 64px minmax(0, 1fr) auto; grid-template-areas: "p t n s"; min-height: 72px; column-gap: 14px; padding: 10px var(--hkd-pad); }
  .hkd .hkd-pls .pl { width: 40px; height: 40px; }
  .hkd-pls .t { font-size: 16.5px; letter-spacing: 0; }
  .hkd-pls .n { font-size: 25.36px; letter-spacing: -.5px; }
  .hkd-pls .x { display: none; }
  .hkd-pls .hkd-pl a.sp { padding: 10px; background: transparent; }
  .hkd-now { min-height: 0; } .hkd-pls a.sp .w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hkd-pls a.sp .ar { margin: 0; }
  .hkd-snote a { display: none; }
}

/* ============================================================ search */
.hkd-qh { background: var(--hkd-paper); color: var(--hkd-ink); padding: 36px var(--hkd-pad) 28px; }
.hkd-form { display: flex; align-items: center; gap: 18px; height: 84px; padding: 0 28px; background: #fff; border-bottom: 3px solid var(--hkd-ink); }
.hkd-form .ic { flex: none; color: var(--hkd-ink); }
.hkd-form .ic .hk-i { width: 28px; height: 28px; }
.hkd-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--hkd-ink); caret-color: var(--hkd-mag);
  font: 800 44px/1 var(--sans); letter-spacing: -1.6px; padding: 0; }
.hkd-form input::placeholder { color: rgba(14, 14, 16, .4); }
.hkd-form input::-webkit-search-cancel-button { display: none; }
.hkd-form:focus-within { box-shadow: 0 0 0 3px var(--hkd-mag); }
.hkd-form .clr { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 800 16.5px var(--sans); color: rgba(17, 17, 17, .72); }
.hkd-form .clr .hk-i { width: 14px; height: 14px; }
.hkd-count { margin-top: 14px; font-size: 19.5px; font-weight: 700; }
.hkd { position: relative; }
.hkd-sbody { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start; }
.hkd-search.blank .hkd-sbody, .hkd-search.nores .hkd-sbody { display: none; }
.hkd-facets { display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--hkd-side); }
.hkd-facets[hidden] { display: none; }
.hkd-fg { display: flex; flex-direction: column; gap: 8px; }
.hkd-fg .k { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag); }
.hkd-f { appearance: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 8px 12px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .05); color: #fff; font: 700 16.5px/1.2 var(--sans); text-align: left; }
.hkd-f b { font-weight: 800; color: var(--hkd-mag); font-variant-numeric: tabular-nums; }
.hkd-f:hover { background: rgba(255, 255, 255, .12); }
.hkd-f[aria-pressed="true"] { background: var(--hkd-mag); color: var(--hkd-ink); } .hkd-f[aria-pressed="true"] b { color: var(--hkd-ink); }
.hkd-res mark { background: var(--hkd-mag); color: var(--hkd-ink); padding: 0 4px; }
.hkd-top { display: grid; grid-template-columns: 2fr 1fr; }
.hkd-top.n1 { grid-template-columns: 1fr; }
.hkd-big { position: relative; display: block; height: 420px; overflow: hidden; background: var(--hkd-panel); }
.hkd-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--hkd-ease); }
.hkd-big:hover img, .hkd-big:focus-visible img { transform: scale(1.03); }
.hkd-big::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .85)); }
.hkd-big .cap { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; display: flex; flex-direction: column; gap: 9px; }
.hkd-big .d { font-size: 14.6px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; }
.hkd-big .d::before { content: ""; display: inline-block; width: 16px; height: 3px; margin-right: 12px; vertical-align: middle; background: var(--hkd-mag); }
.hkd-big b { font-size: 36px; font-weight: 800; letter-spacing: -1.3px; line-height: 1.05; }
.hkd-big.sm b { font-size: 25.36px; letter-spacing: -.7px; }
.hkd-big .s { font-size: 14.6px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag); }
.hkd-big.noimg::after { display: none; }
.hkd-it { display: grid; grid-template-columns: 140px minmax(120px, 160px) minmax(0, 1fr); align-items: center; column-gap: 24px; min-height: 116px; padding: 14px 28px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hkd-it:hover b, .hkd-it:focus-visible b { text-decoration: underline; text-decoration-color: var(--hkd-mag); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hkd-th { position: relative; display: block; width: 140px; height: 88px; overflow: hidden; background: var(--hkd-panel); }
.hkd-th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s var(--hkd-ease); }
.hkd-it:hover .hkd-th img { transform: scale(1.03); }
.hkd-th.noimg .fb { font-size: 14.6px; }
.hkd-it .mt { display: flex; flex-direction: column; gap: 4px; }
.hkd-it .d { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag); }
.hkd-it .s { font-size: 16.5px; font-weight: 700; color: var(--hkd-dim); }
.hkd-it b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.25; }
.hkd-more { display: flex; justify-content: center; padding: 28px 0 36px; }
.hkd-more button { appearance: none; border: 0; border-radius: 26px; padding: 14px 26px; cursor: pointer; background: rgba(255, 255, 255, .08); color: #fff; font: 800 16.5px var(--sans); }
.hkd-more button:hover { background: rgba(255, 255, 255, .16); }
.hkd-wait { padding: 32px; font-size: 19.5px; color: var(--hkd-dim); }
.hkd-none { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 200px; margin-top: 0; }
.hkd-none[hidden] { display: none; }
.hkd-none .m { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 24px var(--hkd-pad); background: var(--hkd-paper); color: var(--hkd-ink); }
.hkd-none .k { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag-t); }
.hkd-none .h { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
.hkd-none .t { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; padding: 24px var(--hkd-pad); }
.hkd-chip { appearance: none; border: 0; border-radius: 20px; padding: 10px 14px; cursor: pointer; background: rgba(255, 255, 255, .08); color: #fff; font: 700 16.5px/1.1 var(--sans); white-space: nowrap; }
.hkd-chip:hover { background: rgba(255, 255, 255, .16); }
.hkd-chip[aria-pressed="true"] { background: var(--hkd-amber); color: var(--hkd-ink); }
@media (max-width: 1099px) {
  .hkd-sbody { grid-template-columns: minmax(0, 1fr); }
  .hkd-facets, .hkd-res { min-width: 0; }
  .hkd-facets { position: relative; }   /* the hidden group labels are absolute: keep them inside the scrolling row */
  .hkd-facets { flex-direction: row; gap: 8px; overflow-x: auto; padding: 16px var(--hkd-pad); scrollbar-width: none; overscroll-behavior-x: contain; }
  .hkd-fg { flex-direction: row; flex: none; gap: 8px; }
  .hkd-fg .k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hkd-f { width: auto; border-radius: 20px; white-space: nowrap; padding: 8px 14px; }
  .hkd-f b { margin-left: 2px; }
  .hkd-none { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hkd-qh { padding: 16px var(--hkd-pad) 14px; }
  .hkd-form { height: 56px; padding: 0 14px; gap: 10px; }
  .hkd-form .ic .hk-i { width: 22px; height: 22px; }
  .hkd-form input { font-size: 25.36px; letter-spacing: -.6px; }
  .hkd-form .clr { font-size: 14.6px; }
  .hkd-count { font-size: 16.5px; margin-top: 10px; }
  .hkd-top { display: contents; }
  .hkd-res { display: flex; flex-direction: column; }
  .hkd-big { height: auto; display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; padding: 14px var(--hkd-pad); background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .hkd-big img { position: static; grid-row: 1 / 3; width: 84px; height: 64px; }
  .hkd-big::after { display: none; }
  .hkd-big .cap { position: static; gap: 4px; }
  .hkd-big .d::before { display: none; }
  .hkd-big b, .hkd-big.sm b { font-size: 19.5px; letter-spacing: -.3px; line-height: 1.2; }
  .hkd-big .s { display: none; }
  .hkd-it { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "th mt" "th b"; column-gap: 12px; row-gap: 4px; min-height: 0; padding: 14px var(--hkd-pad); align-items: start; }
  .hkd-th { grid-area: th; width: 84px; height: 64px; }
  .hkd-it .mt { grid-area: mt; display: block; }
  .hkd-it .mt .d { display: inline; }
  .hkd-it .mt .s { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag); }
  .hkd-it .mt .s { display: inline; }
  .hkd-it .mt .s::before { content: " · "; }
  .hkd-it b { grid-area: b; font-size: 19.5px; letter-spacing: -.3px; line-height: 1.2; }
  .hkd-none .h { font-size: 22px; }
}

/* ============================================================ the full Departures board (pR4AR) */
html.hkd-dep #dep { display: none !important; }
html.hkd-dep main#single.hkd-main[hidden] { display: block !important; }   /* the engine hides #single on this page every minute; the board lives in it */
html.hkd-dep main#single.hkd-main > :not(.hkd-depw) { display: none !important; }
.hkd-depw { background: var(--hkd-board); padding: 40px var(--hkd-pad) 48px; }
.hkd-dh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 24px; }
.hkd-depw .hkd-h1 { font-size: clamp(64px, 8.4vw, 160px); letter-spacing: -.042em; line-height: .9; color: var(--hkd-amber); }
.hkd-depw .hkd-h1 .jp { font-size: .53em; margin-left: .15em; }
.hkd-today { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 6px; }
.hkd-today .k { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-amber); }
.hkd-today b { font-size: 28px; font-weight: 800; }
.hkd-filt { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 18px; }
.hkd-depw .hkd-board { padding: 0; background: none; }
.hkd-depw .hkd-r { min-height: 63px; padding: 18px 0; }
/* every cell at the engine board's own 25.36px (owner rule: no size goes below what the page had). Five columns do not hold
   that size, so the board has three: status over dates | exhibition | venue over city (decision 2026-10-16) */
.hkd-depw .hkd-cols, .hkd-depw .hkd-r { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(260px, 380px);
  grid-template-areas: "st n v" "d n c"; column-gap: 32px; row-gap: 4px; align-items: start; }
.hkd-depw .hkd-cols { grid-template-areas: "st n v"; }
.hkd-depw .hkd-cols .c-d, .hkd-depw .hkd-cols .c-c { display: none; }
.hkd-depw .hkd-cols .c-st::after { content: " · Dates"; }
.hkd-depw .hkd-cols .c-v::after { content: " · City"; }
.hkd-depw .hkd-r .c-st { grid-area: st; font-size: 25.36px; letter-spacing: 1px; white-space: normal; line-height: 1.15; }
.hkd-depw .hkd-r .c-d { grid-area: d; font-size: 25.36px; }
.hkd-depw .hkd-r .c-n { grid-area: n; font-size: 25.36px; align-self: center; }
.hkd-depw .hkd-r .c-v { grid-area: v; font-size: 25.36px; line-height: 1.2; }
.hkd-depw .hkd-r .c-c { grid-area: c; font-size: 25.36px; }
.hkd-depw .hkd-cols .c-st { grid-area: st; } .hkd-depw .hkd-cols .c-n { grid-area: n; } .hkd-depw .hkd-cols .c-v { grid-area: v; }
.hkd-src { padding-top: 12px; font-weight: 400; font-size: 14.6px; color: var(--hkd-dim); }
@media (max-width: 1099px) {
  /* the engine's card board below 1100px: status 19.5px, dates 14.6px, name 22px, venue and city 16.5px */
  .hkd-depw .hkd-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st d" "n n" "v v"; column-gap: 16px; row-gap: 6px; align-items: baseline; }
  .hkd-depw .hkd-r .c-st { font-size: 19.5px; letter-spacing: 1px; }
  .hkd-depw .hkd-r .c-d { font-size: 19.5px; text-align: right; }
  .hkd-depw .hkd-r .c-n { font-size: 22px; }
  .hkd-depw .hkd-r .c-v { font-size: 16.5px; line-height: 1.3; }
  .hkd-depw .hkd-r .c-c { display: none; }
}

@media (max-width: 767px) {
  .hkd-depw { padding: 24px var(--hkd-pad) 32px; }
  .hkd-depw .hkd-h1 { font-size: 56px; }
  .hkd-today { align-items: flex-start; } .hkd-today b { font-size: 22px; }
  .hkd-filt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--hkd-pad)); padding: 0 var(--hkd-pad) 16px; overscroll-behavior-x: contain; }
  .hkd-depw .hkd-r .c-d { font-size: 16.5px; }
}

/* ============================================================ Releases (obVOF / YBxxK), on x-releases' markup */
html.hkd-rel main.xpage-releases { --bg: var(--hkd-ink); --ink: #fff; --ink-40: var(--hkd-dim); --rule: rgba(255, 255, 255, .22); --rule-soft: var(--hkd-rule); --xr-acc: var(--hkd-mag); }
html.hkd-rel .xr { --g: var(--hkd-pad); --xr-lab-fs: 14.6px; color: #fff; background: var(--hkd-ink); }
html.hkd-rel .xr :focus-visible { outline: 3px solid var(--hkd-mag); outline-offset: 2px; }
html.hkd-rel .xr-index .xr-crumb, html.hkd-rel .xr-index .xr-crumb-i { display: none; }
html.hkd-rel .xr-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; min-height: 340px; border: 0; }
html.hkd-rel .xr-hero-l { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px var(--hkd-pad); background: var(--hkd-ink); }
/* the engine's own title size (clamp 76–162px) is kept; it gets the full width above the two columns, so it never runs under
   the featured panel: row 1 kicker, row 2 title, row 3 the lede (left) beside the featured typeface (right) */
html.hkd-rel .xr-hero { grid-template-rows: auto auto 1fr; background: var(--hkd-ink); }
html.hkd-rel .xr-hero-l { display: contents; }
html.hkd-rel .xr-hero-l > .xr-kick { grid-column: 1 / -1; grid-row: 1; display: block !important; margin: 0; padding: 32px var(--hkd-pad) 0; }
html.hkd-rel .xr-hero-l .xr-h1 { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 24px var(--hkd-pad) 32px; font-weight: 800; letter-spacing: -.045em; color: #fff; }
html.hkd-rel .xr-intro { grid-column: 1; grid-row: 3; align-self: end; padding: 0 var(--hkd-pad) 32px; }
html.hkd-rel .hkd-feat { grid-column: 2; grid-row: 3; }
html.hkd-rel .xr-intro { display: flex; flex-direction: column; gap: 10px; }
html.hkd-rel .xr-kick { font-size: 14.6px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--hkd-mag); }
html.hkd-rel .xr-lede { font-size: 20px; color: var(--hkd-dim); max-width: 32em; }
html.hkd-rel .xr-count { color: var(--hkd-dim); }
html.hkd-rel .xr-hero .xr-latest { display: none; }
.hkd-feat { display: flex; flex-direction: column; gap: 20px; padding: 32px var(--hkd-pad); background: var(--hkd-paper); color: var(--hkd-ink); text-decoration: none; }
.hkd-feat .k { display: flex; justify-content: space-between; gap: 16px; }
.hkd-feat .k span { font-size: 14.6px; font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase; color: var(--hkd-mag-t); }
.hkd-feat .k small { font-size: 14.6px; font-weight: 700; color: rgba(17, 17, 17, .72); }
.hkd-feat .spec { display: flex; flex-direction: column; font-family: "Zen Kaku Gothic New", "Hiragino Sans", var(--sans); }
html.hkd-rel .hkd-feat, html.hkd-rel .hkd-feat .sp, html.hkd-rel .hkd-feat .full { color: var(--hkd-ink); }
.hkd-feat .sp { font-size: clamp(44px, 4.4vw, 84px); font-weight: 700; line-height: 1.1; }
html.hkd-rel .hkd-feat .sp.alt { font-weight: 900; color: #B42AC4; }
.hkd-feat .sp.one { font-size: 32px; line-height: 1.3; }
.hkd-feat .full { font-size: 16.5px; font-weight: 700; line-height: 1.5; font-family: "Zen Kaku Gothic New", "Hiragino Sans", var(--sans); }
.hkd-feat:hover .full, .hkd-feat:focus-visible .full { text-decoration: underline; text-decoration-color: var(--hkd-mag); text-decoration-thickness: 2px; text-underline-offset: 4px; }
html.hkd-rel .xr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px var(--hkd-pad); background: var(--hkd-panel); border: 0; margin: 0; }
html.hkd-rel .xr-filters > .xr-k, html.hkd-rel .hkd-makers .xr-k { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-dim); }
html.hkd-rel .xr-chips, html.hkd-rel .hkd-makers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
html.hkd-rel .hkd-makers { margin-left: auto; }
html.hkd-rel .xr-chip { border: 0; border-radius: 18px; padding: 8px 13px; background: rgba(255, 255, 255, .08); color: #fff; font: 700 14.6px/1.2 var(--sans); transition: background-color .15s, color .15s; }
html.hkd-rel .xr-chip .xr-c { font-weight: 800; color: var(--hkd-mag); }
html.hkd-rel .xr-chip:hover { background: rgba(255, 255, 255, .16); }
html.hkd-rel .xr-chip[aria-pressed="true"] { background: var(--hkd-mag); color: var(--hkd-ink); } html.hkd-rel .xr-chip[aria-pressed="true"] .xr-c { color: var(--hkd-ink); }
html.hkd-rel .xr-filters .xr-sp, html.hkd-rel .xr-filters .xr-selects, html.hkd-rel .xr-index > .xr-makers { display: none; }
html.hkd-rel .xr-body { display: block; padding: 0; }
html.hkd-rel .xr-body > :not(.xr-main) { display: none; }
html.hkd-rel .xr-list { margin: 0; padding: 0; }
html.hkd-rel .xr-month { display: none; }
html.hkd-rel .xr-row { border: 0; border-bottom: 1px solid var(--hkd-rule); margin: 0; padding: 0; }
html.hkd-rel .xr-row-a { display: grid; grid-template-columns: 140px minmax(160px, 220px) minmax(0, 1fr) auto; align-items: stretch; min-height: 128px; padding: 0; gap: 0; color: #fff; }
html.hkd-rel .xr-row .xr-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--hkd-panel); color: #fff; }
html.hkd-rel .xr-row .xr-date b { font-size: 32px; font-weight: 800; letter-spacing: -1.2px; line-height: 1; }   /* «10.18»: the date is numeric now (owner 2026-10-18) */
html.hkd-rel .xr-row .xr-date small { font-size: 14.6px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--hkd-mag); }
html.hkd-rel .xr-row .xr-date small::first-letter { text-transform: uppercase; }
html.hkd-rel .xr-row .xr-tile { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 0 28px; background: none; aspect-ratio: auto; width: auto; height: auto; min-height: 0; border: 0; color: #fff; }
html.hkd-rel .xr-row .xr-tile::before, html.hkd-rel .xr-row .xr-tile::after { display: none; }
html.hkd-rel .xr-row .xr-tile small { display: inline-block; padding: 4px 10px; font-size: 14.6px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; line-height: 1.2; background: #fff; color: var(--hkd-ink); }
html.hkd-rel .xr-row[data-type="event"] .xr-tile small { background: var(--hkd-blue); color: #fff; }
html.hkd-rel .xr-row[data-type="award"] .xr-tile small { background: var(--hkd-amber); }
html.hkd-rel .xr-row[data-type="software"] .xr-tile small { background: var(--hkd-mag); }
html.hkd-rel .xr-row[data-type="exhibition"] .xr-tile small { background: var(--hkd-paper); }
html.hkd-rel .xr-row[data-type="typeface"] .xr-tile small { background: var(--hkd-red); color: #fff; }
html.hkd-rel .xr-row .xr-tile b { font-size: 19px; font-weight: 800; letter-spacing: 0; line-height: 1.2; }
html.hkd-rel .xr-row .xr-text { display: flex; flex-direction: column; justify-content: center; padding: 16px 0; gap: 0; }
html.hkd-rel .xr-row .xr-meta, html.hkd-rel .xr-row .xr-src-p, html.hkd-rel .xr-row .xr-pm, html.hkd-rel .xr-row .xr-line { display: none; }
html.hkd-rel .xr-row .xr-t { font-size: 27px; font-weight: 800; letter-spacing: -.5px; line-height: 1.2; }
html.hkd-rel .xr-row .xr-t[lang="ja"] { font-weight: 700; line-height: 1.45; letter-spacing: 0; }   /* x-releases' 27px kept (the frame's 19 would be smaller) */
html.hkd-rel .xr-row .xr-go { display: flex; align-items: center; gap: 6px; padding: 0 var(--hkd-pad) 0 24px; color: var(--hkd-mag); background: none; border: 0; width: auto; height: auto; border-radius: 0; }
html.hkd-rel .xr-row .xr-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.hkd-open { font-size: 16.5px; font-weight: 800; white-space: nowrap; }
html.hkd-rel .xr-row-a:hover .xr-t, html.hkd-rel .xr-row-a:focus-visible .xr-t { text-decoration: underline; text-decoration-color: var(--hkd-mag); text-decoration-thickness: 2px; text-underline-offset: 5px; }
html.hkd-rel .xr-next { width: auto; margin: 28px auto 40px; border: 0; border-radius: 26px; padding: 14px 26px; background: rgba(255, 255, 255, .08); color: #fff; font: 800 16.5px var(--sans); }
html.hkd-rel .xr-next:hover { background: rgba(255, 255, 255, .16); }
@media (max-width: 1099px) {
  html.hkd-rel .xr-hero { grid-template-columns: 1fr; grid-template-rows: none; }
  html.hkd-rel .xr-intro, html.hkd-rel .hkd-feat { grid-column: 1; grid-row: auto; }
  html.hkd-rel .hkd-makers { margin-left: 0; }
  html.hkd-rel .xr-row-a { grid-template-columns: 110px minmax(140px, 180px) minmax(0, 1fr) auto; }
}
@media (max-width: 767px) {
  html.hkd-rel .xr-hero { min-height: 0; }
  html.hkd-rel .xr-hero-l > .xr-kick { padding-top: 24px; } html.hkd-rel .xr-hero-l .xr-h1 { padding: 16px var(--hkd-pad) 20px; } html.hkd-rel .xr-intro { padding-bottom: 24px; }
  .hkd-feat { padding: 20px var(--hkd-pad); gap: 12px; } .hkd-feat .k small, .hkd-feat .full { display: none; }
  html.hkd-rel .hkd-feat, html.hkd-rel .hkd-feat .sp, html.hkd-rel .hkd-feat .full { color: var(--hkd-ink); }
.hkd-feat .sp { font-size: 40px; }
  html.hkd-rel .xr-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  html.hkd-rel .xr-filters > .xr-k, html.hkd-rel .hkd-makers { display: none; }
  html.hkd-rel .xr-chips { flex-wrap: nowrap; }
  html.hkd-rel .xr-row-a { display: block; min-height: 0; padding: 16px var(--hkd-pad); }
  html.hkd-rel .xr-row .xr-date, html.hkd-rel .xr-row .xr-tile, html.hkd-rel .xr-row .xr-go { display: none; }
  html.hkd-rel .xr-row .xr-text { padding: 0; gap: 6px; }
  html.hkd-rel .xr-row .xr-pm { display: block; font-size: 14.6px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hkd-mag); }
  html.hkd-rel .xr-row .xr-t { font-size: 20px; }
}

/* ------------------------------------------------------------ no motion when the reader asks for none */
@media (prefers-reduced-motion: reduce) {
  .hkd *, .hkd *::before, .hkd *::after, html.hkd-rel .xr * { transition: none !important; animation: none !important; }
  .hkd-tile:hover .hkd-pic img, .hkd-big:hover img, .hkd-it:hover .hkd-th img, .hkd .pl:hover { transform: none; }
}

/* Hakken Partner kit, /partners/ (reference hakken.pen "Hakken · Partner kit page · 1440", owner OK 2026-10-23).
   The guide's grid on the web: a dark hero with the outlined Hakken 発見 lockup (inline SVG from the kit, so it needs no
   Japanese font) and the two download buttons, then five sections, each a big magenta number, a title and a lead on
   the left and the content on the right, split by hairlines. Round pills as in the guide. Every rule sits under .hpk;
   nothing under the site's 14.6 px floor. */
main.xpage-partners{display:block;max-width:none;width:auto;margin:0;padding:0!important}
.hpk{--hpk-ink:#0E0E10;--hpk-paper:#F4F2EE;--hpk-mag:#EC5CFF;--hpk-deep:#A0219E;--hpk-dim:rgba(14,14,16,.62);--hpk-rule:rgba(14,14,16,.15);
  --hpk-gut:clamp(16px,5.5vw,80px);--hpk-sans:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;background:var(--hpk-paper);color:var(--hpk-ink);font-family:var(--hpk-sans);overflow-x:clip}
.hpk *{box-sizing:border-box}
:where(.hpk) :where(h1,h2,h3,p,ol,ul){margin:0;padding:0}
.hpk ul,.hpk ol{list-style:none}
.hpk-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- hero */
.hpk-hero{background:var(--hpk-ink);color:#fff;padding:64px var(--hpk-gut) 72px;display:flex;flex-direction:column;gap:40px}
.hpk-kick{font:800 14.6px/1.3 var(--hpk-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--hpk-mag)}
.hpk-title{line-height:0}
.hpk-logo{display:block;width:min(100%,860px);height:auto;color:#fff}
.hpk-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.hpk-promise{font:800 clamp(30px,3.4vw,48px)/1.05 var(--hpk-sans);letter-spacing:-.035em;color:#fff}
.hpk-btns{display:flex;gap:14px;flex-wrap:wrap}
.hpk-btn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:16px 30px;border-radius:999px;
  font:800 20px/1.2 var(--hpk-sans);letter-spacing:-.01em;text-decoration:none;transition:transform .15s ease,background .15s ease}
.hpk-btn small{font:700 14.6px/1.2 var(--hpk-sans);letter-spacing:.04em;opacity:.7}
.hpk-btn-main{background:var(--hpk-mag);color:var(--hpk-ink)}
.hpk-btn-line{border:2px solid #fff;color:#fff}
.hpk-btn:hover{transform:translateY(-2px)}
.hpk-btn-line:hover{background:#fff;color:var(--hpk-ink)}
.hpk-btn:focus-visible,.hpk button:focus-visible,.hpk a:focus-visible{outline:3px solid var(--hpk-mag);outline-offset:3px}

/* ---------------------------------------------------------------- sections */
.hpk-sec{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:80px;padding:56px var(--hpk-gut);border-bottom:1px solid var(--hpk-rule)}
.hpk-l{display:flex;flex-direction:column;gap:16px}
.hpk-n{font:800 72px/.9 var(--hpk-sans);letter-spacing:-.04em;color:var(--hpk-mag)}
.hpk-l h2{font:800 40px/1.02 var(--hpk-sans);letter-spacing:-.04em}
.hpk-lead{font:500 18px/1.5 var(--hpk-sans);color:var(--hpk-dim)}
.hpk-r{display:flex;flex-direction:column;gap:16px;min-width:0}

.hpk-pills{display:flex;flex-wrap:wrap;gap:8px}
.hpk-pills li{padding:7px 14px;border:1.5px solid var(--hpk-ink);border-radius:999px;font:800 15px/1.2 var(--hpk-sans)}
.hpk-pills li.is-on{background:var(--hpk-mag);border-color:var(--hpk-mag)}
.hpk-who{display:flex;align-items:center;gap:24px;padding:12px 0;border-top:1px solid var(--hpk-rule)}
.hpk-who h3{flex:0 0 160px;font:800 36px/1 var(--hpk-sans);letter-spacing:-.04em}

.hpk-subject{font:800 clamp(22px,2.2vw,32px)/1.25 var(--hpk-sans);letter-spacing:-.03em}
.hpk-subject mark{background:var(--hpk-mag);color:var(--hpk-ink);padding:0 .3em}
.hpk-tags li{padding:10px 20px;font-size:18px}

.hpk-steps li{display:grid;grid-template-columns:56px 96px minmax(0,300px) minmax(0,1fr);align-items:center;gap:24px;padding:14px 0;border-top:1px solid var(--hpk-rule)}
.hpk-sn{font:800 28px/1 var(--hpk-sans)}
.hpk-steps li.is-last .hpk-sn{color:var(--hpk-mag)}
.hpk-whotag{justify-self:start;padding:4px 12px;border-radius:999px;font:800 14.6px/1.2 var(--hpk-sans);letter-spacing:.1em}
.hpk-whotag.is-you{background:var(--hpk-mag);color:var(--hpk-ink)}
.hpk-whotag.is-hakken{background:var(--hpk-ink);color:#fff}
.hpk-steps b{font:800 24px/1.15 var(--hpk-sans);letter-spacing:-.025em}
.hpk-sd{font:500 16px/1.45 var(--hpk-sans);color:var(--hpk-dim)}
.hpk-sd a{color:inherit}

.hpk-para{display:flex;flex-direction:column;gap:20px;padding:32px 36px;background:#fff;border:1px solid var(--hpk-rule)}
.hpk-para p{font:700 24px/1.4 var(--hpk-sans);letter-spacing:-.012em}
.hpk-copy{display:flex;align-items:center;gap:14px}
.hpk-copy button{padding:12px 22px;border:0;border-radius:999px;background:var(--hpk-ink);color:#fff;font:800 16px/1.2 var(--hpk-sans);cursor:pointer}
.hpk-copy button.is-done{background:var(--hpk-mag);color:var(--hpk-ink)}
.hpk-live{font:600 15px/1.3 var(--hpk-sans);color:var(--hpk-dim)}

.hpk-kit{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.hpk-tab{display:block;width:56px;height:14px;border-radius:6px 6px 0 0;background:var(--hpk-ink)}
.hpk-fold{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;height:120px;padding:16px;border-radius:0 8px 8px 8px;background:var(--hpk-ink);color:#fff}
.hpk-fold i{font:800 14.6px/1 var(--hpk-sans);font-style:normal;letter-spacing:.1em;color:var(--hpk-mag)}
.hpk-fold b{font:800 22px/1.1 var(--hpk-sans);letter-spacing:-.02em}
.hpk-fold small{font:600 14.6px/1.2 var(--hpk-sans);opacity:.6}
.hpk-kit li.is-on .hpk-tab,.hpk-kit li.is-on .hpk-fold{background:var(--hpk-mag);color:var(--hpk-ink)}
.hpk-kit li.is-on .hpk-fold i{color:var(--hpk-ink)}
.hpk-note{display:flex;align-items:center;gap:14px;padding:18px 22px;border:2px solid var(--hpk-ink)}
.hpk-note b{flex:none;font:800 18px/1.2 var(--hpk-sans)}
.hpk-note p{font:500 15px/1.45 var(--hpk-sans);color:var(--hpk-dim)}

/* ---------------------------------------------------------------- tablet and phone */
@media (max-width:1100px){
  .hpk-sec{grid-template-columns:minmax(0,1fr);gap:28px}
  .hpk-kit{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:700px){
  .hpk-hero{padding-top:40px;padding-bottom:48px;gap:28px}
  .hpk-btns,.hpk-btn{width:100%}
  .hpk-sec{padding-top:40px;padding-bottom:40px}
  .hpk-n{font-size:56px}.hpk-l h2{font-size:32px}
  .hpk-who{flex-direction:column;align-items:flex-start;gap:10px}
  .hpk-who h3{flex:none;font-size:30px}
  .hpk-steps li{grid-template-columns:44px minmax(0,1fr);gap:6px 14px}
  .hpk-whotag{grid-column:2}.hpk-steps b{grid-column:2}.hpk-sd{grid-column:2}
  .hpk-para{padding:22px}.hpk-para p{font-size:19px}
  .hpk-kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hpk-note{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.hpk-btn{transition:none}.hpk-btn:hover{transform:none}}

.rg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.rg button{font-size:16.5px;padding:5px 12px;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--ink);cursor:pointer}
.rg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sound .one{padding:0 16px}
.sound.single .day{margin-top:0;border-top:0}
.sound.single .foot{display:none}
.sound.single{padding:24px 0 26px !important}
.sound .one-head{padding:6px 0 16px;border-left:6px solid var(--c1,var(--accent));padding-left:14px;margin:0 0 4px}
.sound .one-head .mood{font-size:14.6px;border:1px solid var(--ink);border-radius:9999px;padding:4px 10px;display:inline-block;line-height:1;margin-bottom:12px}
.sound .one-head h2{font-size:32px;line-height:1.05;margin:0 0 8px;font-family:var(--serif,inherit)}
.sound .one-head p{margin:0;font-size:19.5px;line-height:1.35;color:var(--ink-40)}
.sound .one-embed iframe{width:100%;height:352px;border:0;border-radius:12px;display:block}
.sound .one-open{display:inline-block;margin-top:12px;font-size:16.5px;color:var(--ink)}
.sound .moods{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px;padding:0 16px}
.sound .mood-card{min-width:0;display:flex;flex-direction:column}
.sound .mood-card .one-head{border-left-width:4px;padding-left:12px}
.sound .mood-card .one-head h2{font-size:24px}
.sound .mood-card .one-head p{font-size:18px;flex:1}
.sound .mood-card .one-embed{margin-top:auto}
.sound .mood-card .one-embed iframe{height:352px}
.sound.moods-mode .one-head{margin-bottom:10px}
.sound.moods-mode{max-width:none !important;margin:0 !important}
.sound.moods-mode .head{padding:8px 16px 0}
@media(max-width:1400px){.sound .moods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:960px){.sound .moods{grid-template-columns:1fr;gap:28px}.sound .mood-card .one-embed iframe{height:352px}}