/* mattjhannan.com house style. Extracted from the live /japanese-fashion/ guide (2026-11-04):
   same fonts, colours, rules, cards, tabs, burst, feature block and button. Additions (nav, breadcrumb,
   author box, facts, tables, Q&A, notes, video facade, take-away, footer) reuse those same tokens. */
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(/assets/fonts/Barlow-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/assets/fonts/SpaceMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
/* Cover title stand-in while Barlow Condensed loads: a local bold sans scaled to roughly the same width
   (Arial Bold caps average .688em, Barlow Condensed ExtraBold .477em; 67% keeps it a little narrower) and
   the same ascent/descent (1.0/0.2em), so the title never runs past the frame and nothing moves on the swap. */
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:800;size-adjust:67%;ascent-override:149.25%;descent-override:29.85%;line-gap-override:0%}

:root{
  --lime:#efff3d;
  --ink:#171715;
  --cream:#f4f0e6;
  --paper:#fffdf6;
  --on-ink:#f4f0e6;
  --link-grey:#52524c;
  --muted:#6b6a62;
  --confirm:#ffe14a;
  --col:560px;
  --pad:22px;
  --rule:1.5px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:"Barlow",system-ui,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:400;letter-spacing:.02em;text-transform:uppercase}
a{color:inherit}
strong{font-weight:600}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--lime);padding:10px 14px;font-size:11px;z-index:10}
.skip:focus{left:8px;top:8px}

/* Site header + nav (sits on the lime cover colour so the page opens like the fashion guide) */
.site-head{background:var(--lime);padding:0 var(--pad)}
/* One header height everywhere (V10, 2026-11-06): one 44px row at every width, brand left and links right, as on the
   homepage (built pages were 74px from 700px). Round 1 ruling R17 (DESIGN.md D-02, spec 4.1 "one row of 44px or less").
   The brand and every link are 44px tap targets (PHONE.md P-14). */
.site-head-inner{max-width:var(--col);margin:0 auto;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:10px;height:44px;padding:0;border-bottom:var(--rule) solid var(--ink)}
.brand{font-size:11px;text-decoration:none;font-weight:400;display:inline-flex;align-items:center;min-height:44px;flex:none}
.site-nav{display:flex;flex-wrap:nowrap;gap:0 12px;font-size:11px;min-width:0}
.site-nav a{text-decoration:none;padding:0;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;box-sizing:border-box}
.site-nav a:hover,.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}
/* V9 (R10): all five links on phones too, About included. Phones drop the mono letter-spacing in the header so the brand
   and five links fit one row; under 390px the header gutter is 16px (the homepage's) and the gaps 8px, so it still fits
   at 360px; under 360px the links scroll sideways inside the header, never the page. */
@media (max-width:699px){.site-head .mono{letter-spacing:0}}
@media (max-width:389px){.site-head{padding:0 16px}.site-nav{gap:0 8px}.site-head-inner{gap:8px}}
@media (max-width:359px){.site-nav{overflow-x:auto;scrollbar-width:none}}
.soon{color:var(--muted);padding:4px 0;display:inline-block;cursor:default}
.soon-tag{font-size:.75em;margin-left:3px;border:1px solid currentColor;padding:0 3px;border-radius:2px}

/* Cover (identical to the fashion guide, with an auto-fitting H1 for longer titles). V11c: each topline label stays one
   unbroken line; a pair too long for one row at 11px (/unwritten-rules/, /japan-picks/, local spots on a phone) stacks. */
.topline>*{white-space:nowrap}
.cover{background:var(--lime);padding:0 var(--pad) 12px}
.cover-inner{max-width:var(--col);margin:0 auto}
.topline{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.02em;padding:15px 0 13px;border-bottom:var(--rule) solid var(--ink);text-transform:uppercase}
h1{margin:12px 0 0;font-family:"Barlow Condensed","Barlow Condensed Fallback",sans-serif;font-weight:800;line-height:.86;letter-spacing:.005em}
/* --n = characters in the line. 180vw/n reproduces the fashion guide's 22.5vw for 8 letters. */
h1 .t1,h1 .t2,h1 .t3{display:block;text-align:center;white-space:nowrap;font-size:min(calc(180vw / var(--n)),calc(1168px / var(--n)))}
h1 .t2{margin-top:14px;background:var(--ink);color:var(--on-ink);padding:.1em 0 .04em}
h1 .t3{margin-top:10px}
.kicker{margin:13px 0 0;font-size:11px}
.intro{display:flex;align-items:center;gap:16px;margin-top:4px}
.burst{position:relative;flex:0 0 auto;width:88px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.burst svg{position:absolute;inset:0;width:100%;height:100%}
.burst polygon{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linejoin:miter}
.burst-num{position:relative;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:47px;line-height:.9;margin-top:4px}
.burst-label{position:relative;font-family:"Space Mono",monospace;font-size:8px;line-height:1.2;margin-top:3px;text-transform:uppercase}
.intro-text{margin:0;font-size:16px;line-height:1.45}

/* Breadcrumb + author box */
.meta-strip{max-width:calc(var(--col) + var(--pad)*2);margin:0 auto;padding:16px var(--pad) 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--link-grey)}
.crumbs li+li::before{content:"/";margin-right:4px}
.crumbs a{text-decoration:none;display:inline-block;padding:14px 0;margin:-14px 0}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
/* R17: the author box sits after the page's answer section, in its own strip (same column as the sections). */
.byline{max-width:calc(var(--col) + var(--pad)*2);margin:0 auto;padding:0 var(--pad) 8px}
.byline .author{margin-top:0}
.tk-jump{max-width:calc(var(--col) + var(--pad)*2);margin:0 auto;padding:0 var(--pad) 14px}
.tk-jump a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px;background:var(--lime);color:var(--ink);border:var(--rule) solid var(--ink);text-decoration:none;font-size:12px;line-height:1.35}
.tk-jump a:hover{background:#f6ff8a}
.author{display:flex;gap:12px;align-items:center;margin-top:14px;padding:12px 0;border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.author img{width:56px;height:56px;border-radius:50%;border:var(--rule) solid var(--ink);flex:0 0 auto;object-fit:cover}
.author p{margin:0}
.author-name{font-weight:600}
.author-name .mono{font-size:11px;font-weight:400}
.author-line{font-size:14px}
/* Press mention: plain text in the site's own type, never the publisher's logo, never a link. */
.author-press{font-size:14px;font-weight:600;margin-top:2px!important}
.author-press .mono{font-size:11px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--link-grey);margin-right:5px}
.updated{font-size:11px;color:var(--link-grey);margin-top:3px!important;text-transform:none}

/* Sections + cards (fashion guide) */
.details{max-width:calc(var(--col) + var(--pad)*2);margin:0 auto;padding:21px var(--pad) 18px}
.details>h2,.after h2{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:31px;line-height:1;margin:6px 0 12px;letter-spacing:.005em}
.details>p,.details>ul,.details>ol{margin:0 0 12px}
.details>h3{font-size:17px;margin:18px 0 6px}
.details>p+h2,.details>ul+h2,.details>ol+h2,.details>div+h2{margin-top:36px}
/* D-18 (E2): the portrait in THE SHORT ANSWER (content front-matter photo:), under the answer on phones, left of it from 1024px */
.answer-photo{margin:20px 0 0}
.answer-photo img{display:block;width:180px;height:180px;object-fit:cover;border:1.5px solid var(--ink)}
@media (min-width:1024px){.details:has(>.answer-photo){display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:32px;align-items:start}
  .details:has(>.answer-photo)>*{grid-column:2}.details>.answer-photo{grid-column:1;grid-row:1 / span 2;margin:0}}
.section-label{margin:0 0 9px;font-size:11px}
.card{background:var(--paper);border:var(--rule) solid var(--ink);margin:0 0 18px;scroll-margin-top:16px}
.card-tab{background:var(--lime);border-bottom:var(--rule) solid var(--ink);padding:10px 14.5px;font-size:11px}
.card:not(.hub-card):nth-of-type(even) .card-tab{background:var(--cream)}
.hub-card.is-soon .card-tab{background:var(--cream)}
.card-body{padding:17px 14.5px 24px}
.card h2,.card .hub-card-title{margin:0 0 6px;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:31px;line-height:1;letter-spacing:.005em}
.card h2 a{text-decoration:none}
.card h3{font-size:15px;margin:16px 0 4px}
.card p{margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.card ul{margin:0 0 10px;padding-left:18px}
.tagline{font-size:11px;margin:0 0 14px!important}
.hub-card .card-go{font-size:11px;margin-top:12px}
.hub-card:has(h2 a):hover{background:#fffbe0}
/* whole hub card = its one title link (dead-buttons QA 2026-11-07) */
.hub-card:has(h2 a){position:relative}
.hub-card h2 a::after{content:"";position:absolute;inset:0}
.hub-card .card-body p a{position:relative;z-index:1}
.hub-card:has(h2 a:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.is-soon{opacity:.72}
.is-soon .card-tab{background:var(--cream)!important}

/* Facts list inside a card */
.facts{margin:14px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;border-top:1px solid var(--ink);padding-top:12px}
.facts div{min-width:0}
.facts dt{font-size:11px;color:var(--link-grey)}
.facts dd{margin:2px 0 0;font-size:14px;line-height:1.3}

/* Quotes */
blockquote{margin:14px 0;padding:0 0 0 14px;border-left:4px solid var(--lime)}
blockquote p{margin:0 0 6px;font-size:16px;line-height:1.4}
blockquote cite{display:block;font-style:normal;font-family:"Space Mono",monospace;font-size:11px;text-transform:uppercase;color:var(--link-grey)}
.card blockquote{border-left-color:var(--ink)}

/* Tables: a real table on wide screens, stacked rows on phones (no sideways page scroll) */
.table-wrap{margin:8px 0 16px}
table{width:100%;border-collapse:collapse;background:var(--paper);border:var(--rule) solid var(--ink);font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #d9d4c6;vertical-align:top}
thead th{background:var(--ink);color:var(--on-ink);font-family:"Space Mono",monospace;font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.02em}
tbody th{font-weight:600}
@media (max-width:699px){
  table,thead,tbody,tr,th,td{display:block}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{border-bottom:var(--rule) solid var(--ink);padding:8px 10px}
  tbody tr:last-child{border-bottom:0}
  tbody th,tbody td{border:0;padding:2px 0}
  tbody th{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:22px;line-height:1.1}
  td{display:flex;gap:10px}
  td::before{content:attr(data-label);flex:0 0 100px;font-family:"Space Mono",monospace;font-size:11px;text-transform:uppercase;color:var(--link-grey);padding-top:3px}
}

/* Notes */
.tip{background:var(--paper);border:var(--rule) dashed var(--ink);padding:12px 14px;margin:14px 0}
.tip-label{font-size:11px;margin:0 0 6px}
.tip p{margin:0}
/* MATT TO CONFIRM: deliberately loud, so nothing unconfirmed can be mistaken for finished copy */
.confirm{background:var(--confirm);border:var(--rule) solid var(--ink);padding:10px 12px;margin:14px 0;font-size:14px}
.confirm-label{font-size:12px;font-weight:400;margin:0 0 4px!important}
.confirm p{margin:0 0 6px}
.confirm p:last-child{margin:0}

/* Q&A */
.faq .qa{border-top:var(--rule) solid var(--ink);padding:14px 0}
.faq .qa:last-child{border-bottom:var(--rule) solid var(--ink)}
.faq h3{margin:0 0 6px;font-size:17px;line-height:1.25}
.faq p{margin:0 0 6px}

/* Japanese phrase box with a copy button (the :::phrase directive; copy behaviour: the page's app.js, or
   /assets/phrase-copy.js on built pages). Moved here from guide.css in round 1 E2 (PHONE.md P-02, P-06, P-08):
   12px labels and a 44px copy button on phones. */
.phrase{margin:16px 0 4px;background:var(--cream);border:var(--rule) solid var(--ink);padding:12px 14px}
.phrase-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.phrase-label{margin:0!important;font-size:12px}
.copy-phrase{flex:0 0 auto;background:var(--lime);color:var(--ink);border:var(--rule) solid var(--ink);padding:12px 14px;font-size:12px;min-height:44px;cursor:pointer}
.copy-phrase:hover{background:#f6ff8a}
.phrase p{margin:0 0 3px}
.phrase-ja{font-size:20px;line-height:1.35;font-weight:600}
.phrase-romaji{font-style:italic}
.phrase-note{font-size:13px;color:var(--link-grey)}
@media (min-width:700px){.phrase{padding:16px 20px}.phrase-ja{font-size:24px}.phrase-note{font-size:15px}}

/* Spots (neighbourhood pages) */
.spot{border-top:1px solid #d9d4c6;padding:28px 0 10px}
.spot-head{margin:0 0 4px!important}
.spot-head strong{display:block;font-size:21px;line-height:1.15}
.spot-meta{display:block;margin-top:4px;font-size:11px;color:var(--link-grey)}
@media (min-width:1024px){.spot-head strong{font-size:24px}}
.spot-map{display:flex;align-items:center;min-height:44px;font-size:11px;text-decoration:none;color:var(--link-grey)}

/* Video facade: nothing heavy loads until the visitor taps */
.video{max-width:var(--col);margin:18px auto 0;padding:0 var(--pad)}
.video-facade{display:block;position:relative;width:100%;max-width:320px;aspect-ratio:9/16;margin:0 auto;border:var(--rule) solid var(--ink);background:var(--ink);padding:0;cursor:pointer;overflow:hidden}
.video-facade img{width:100%;height:100%;object-fit:cover;display:block}
.video-facade .play{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--lime);color:var(--ink);padding:10px 14px;font-size:11px;white-space:nowrap}
/* R17: no poster still on disk = a one-row click-to-load card, never an empty 9:16 black box. */
.video-facade.is-card{aspect-ratio:auto;max-width:none;min-height:64px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:12px 16px;background:var(--paper);color:var(--ink);text-align:left}
.video-facade.is-card .play{position:static;transform:none;padding:0;background:none;font-size:13px}
.video-facade.is-card .video-src{font-size:11px;color:var(--link-grey)}
.video-facade.is-card:hover{background:var(--lime)}
.video iframe{display:block;width:100%;max-width:320px;aspect-ratio:9/16;margin:0 auto;border:var(--rule) solid var(--ink)}
.video figcaption{font-size:14px;margin-top:10px}

/* Button (fashion guide "WATCH THE DOCUMENTARY") */
.watch{display:block;margin-top:18px;background:var(--lime);color:var(--ink);text-decoration:none;padding:20px 16px;font-size:11px;line-height:14px;border:var(--rule) solid var(--ink)}
.watch:hover{background:#f6ff8a}
.cta{margin:16px 0 0!important}
.cta .watch{margin-top:0;padding:16px;font-size:11px}

/* After-content: take-away + related */
.after{max-width:calc(var(--col) + var(--pad)*2);margin:0 auto;padding:8px var(--pad) 36px}
.takeaway{background:var(--paper);border:var(--rule) solid var(--ink);padding:18px 14.5px 16px;margin:10px 0 0}
.takeaway p{margin:0 0 6px}
/* Round 1 R12: the take-away email box in the article (assets/takeaway.js), same field as the trip form. */
.takeaway-form{display:grid;gap:10px;margin:12px 0 10px}
.takeaway-form[hidden]{display:none}
.takeaway-form .watch{margin-top:0;width:100%;text-align:left;cursor:pointer;font-family:"Space Mono",monospace;text-transform:uppercase}
.takeaway-form .watch:disabled{cursor:default}
.tk-done{margin:12px 0 10px}
.tk-done .watch{margin-top:10px}
.tk-done-title{font-weight:600}
.tk-all{display:inline-block;margin-top:12px;color:inherit;text-decoration:underline;text-underline-offset:3px;font-size:12px}
.tk-quote{margin:12px 0 6px;padding:0 0 0 12px;border-left:3px solid var(--ink)}
.tk-quote p{font-style:italic}
.tk-quote cite{display:block;font-style:normal;font-size:13px;color:var(--muted)}
.takeaway .tk-fine{font-size:13px;margin:0 0 8px;color:var(--muted)}
.reading{border-top:var(--rule) solid var(--ink);padding-top:20px;margin-top:26px}
.reading ul{list-style:none;margin:0;padding:0}
.reading a{display:block;width:fit-content;padding:7px 0;font-family:"Space Mono",monospace;font-size:11px;line-height:14px;color:var(--link-grey);text-decoration:none;letter-spacing:.01em;text-transform:uppercase}
.reading a:hover{text-decoration:underline;text-underline-offset:3px}

/* Feature (fashion guide Casanova block) */
.feature{background:var(--ink);color:var(--on-ink);padding:21px var(--pad) 28px}
.feature-inner{max-width:var(--col);margin:0 auto}
.feature h2{margin:9px 0 14px;color:var(--lime);font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(44px,12vw,86px);line-height:.9}
.feature p{margin:0;font-size:16px;line-height:1.45}
.feature .feature-kicker{color:var(--lime);font-size:11px;line-height:1.3;margin:0}
.feature blockquote cite{color:#c9c5b8}
.feature .watch{margin-top:28px;border-color:var(--lime)}
.feature .watch:focus-visible{outline-color:var(--lime)}
/* Round 1 C-08: the Tokyo Bible ranks third, so its call to action is a text link, never a second lime button. */
.bible-link{display:inline-block;margin-top:24px;color:var(--lime);font-size:13px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.bible-link:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* Footer */
.site-footer{background:var(--ink);color:#a9a69c;padding:0 var(--pad) 28px;font-size:11px}
.site-footer-inner{max-width:var(--col);margin:0 auto;border-top:1px solid #3a3a35;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a,.site-footer li .soon{display:inline-block;padding:9px 0;text-decoration:none;color:#d8d4c8}
.site-footer li .soon{color:#8a877d}
.site-footer a:hover{color:var(--lime)}
.foot-label{color:var(--lime);margin:0 0 6px;font-size:11px}
.foot-legal{grid-column:1/-1;margin:6px 0 0;font-size:11px}

/* Desktop: proportionally larger (same steps as the fashion guide) */
@media (min-width:700px){
  :root{--pad:32px;--rule:2.5px;--col:600px}
  body{font-size:18px;line-height:1.6}
  .site-head-inner{border-bottom-width:2px}
  .brand{font-size:13px}
  .site-nav{font-size:12px;gap:0 18px}
  .cover{padding-bottom:34px}
  .topline{font-size:13px;padding:18px 0 14px;border-bottom-width:2px}
  .kicker{margin-top:16px;font-size:13px}
  .intro{gap:18px;margin-top:8px}
  .burst{width:128px;height:128px}
  .burst polygon{stroke-width:1.8}
  .burst-num{font-size:54px;margin-top:6px}
  .burst-label{font-size:10px;margin-top:6px}
  .intro-text{font-size:19px;line-height:1.5}
  h1{margin-top:22px}
  .crumbs ol{font-size:11px}
  .author-line{font-size:16px}
  .author-press{font-size:15px}
  .author-press .mono{font-size:11px}
  .updated{font-size:11px}
  .details{padding-top:34px}
  .details>h2,.after h2{font-size:46px}
  .section-label{margin-bottom:18px;font-size:12px}
  .card{margin-bottom:28px}
  .card-tab{padding:12px 28px;font-size:12px}
  .card-body{padding:34px 28px 26px}
  .card h2,.card .hub-card-title{font-size:46px}
  .tagline{font-size:12px}
  .facts dt{font-size:10px}
  .facts dd{font-size:16px}
  .facts{grid-template-columns:repeat(4,1fr)}
  table{font-size:16px}
  thead th{font-size:11px}
  blockquote p{font-size:20px}
  .confirm{font-size:16px}
  .faq h3{font-size:21px}
  .reading a{font-size:12px;line-height:1.6}
  .takeaway{padding:28px}
  .feature{padding-top:44px}
  .feature p{font-size:19px;line-height:1.6}
  .feature .feature-kicker{font-size:12px}
  .watch{padding:26px 20px;font-size:15px;line-height:1.6}
  .cta .watch{font-size:13px;padding:18px 20px}
  .site-footer{font-size:12px}
}

/* Jump links: desktop rail only (see the 1024px block). */
.toc{display:none}

/* Tablet and up: the cover title is sized from the column it sits in, so each line still fills it
   (205cqi / n is the same ratio as the 1168px / n rule at the old 560px column). */
@supports (font-size:1cqi){
  @media (min-width:700px){
    .cover h1{container-type:inline-size}
    h1 .t1,h1 .t2,h1 .t3{font-size:min(calc(205cqi / var(--n)),220px)}
  }
}

/* Desktop (1024px+): use the screen. A 1240px frame for header, cover, rail layout, hubs, the
   Tokyo Bible block and footer. Running text stays in a 600px column (about 70-75 characters a line)
   on the right; the space to its left holds a sticky rail with the page's jump links and its take-away
   offer. The rail comes after the article in the page code (phones show it at the end, and screen
   readers and the keyboard reach the article first); only its on-screen column changes. */
@media (min-width:1024px){
  :root{--wide:1240px;--side:minmax(300px,1fr);--read:minmax(0,600px);--split-gap:clamp(56px,8vw,136px)}
  .site-head-inner,.cover-inner,.site-footer-inner,.bible .feature-inner{max-width:var(--wide)}

  /* Cover: every title line spans the full frame (sizes below); kicker + intro sit under it, on the
     same two columns as the rail and the article. */
  .cover-inner{display:grid;grid-template-columns:var(--side) var(--read);column-gap:var(--split-gap);align-items:start}
  .topline,.cover h1{grid-column:1/-1}
  .kicker{grid-column:1;grid-row:3;margin-top:30px}
  .intro{grid-column:2;grid-row:3;margin-top:24px}

  /* Guide pages: sticky rail (left) + article (right) */
  .layout{max-width:calc(var(--wide) + var(--pad)*2);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:var(--side) var(--read);column-gap:var(--split-gap);row-gap:0;align-items:start}
  .layout>*{grid-column:2;min-width:0}
  .layout>.meta-strip,.layout>.details,.layout>.video,.layout>.byline,.layout>.tk-jump,.layout>.after>.related{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .layout>.meta-strip{grid-column:1/-1;grid-row:1}
  .layout>.feature{margin:28px 0}
  .layout>.feature .feature-inner{max-width:none}
  .layout>.after{display:contents}
  .layout>.after>.related{grid-column:2;padding-bottom:44px}
  .layout .rail{grid-column:1;grid-row:2/span 40;align-self:stretch;padding:34px 0 44px}
  /* V5: never a box with its own scrollbar (the quote at the end was cut off). /assets/site.js sets --rail-top and
     .is-stuck: 24px when the rail fits the window, otherwise window - rail - 24, so a tall rail scrolls until its end shows. */
  .rail-stick.is-stuck{position:sticky;top:var(--rail-top,24px)}
  .rail .takeaway{margin:0}
  .rail .takeaway h2{font-size:clamp(32px,2.8vw,40px)}
  .toc{display:block;border-top:var(--rule) solid var(--ink);padding-top:14px;margin-bottom:26px}
  .toc-label{font-size:12px;margin:0 0 6px}
  .toc ol{list-style:none;margin:0;padding:0}
  .toc li{border-bottom:1px solid #d9d4c6}
  .toc a{display:block;padding:8px 0;font-size:12px;line-height:1.35;color:var(--link-grey);text-decoration:none}
  .toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
  .layout>.video{margin-top:34px;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:32px;align-items:end}
  .layout>.video .video-facade,.layout>.video iframe{margin:0}
  .layout>.video figcaption{margin:0}

  /* Hub pages: the guide cards go 2-3 across, the intro sits beside its card */
  [data-page-type=hub] :is(.meta-strip,.details,.after,.byline,.tk-jump){max-width:calc(var(--wide) + var(--pad)*2)}
  [data-page-type=hub] .details:not([data-section=children]):has(>.card){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,72px);align-items:start}
  [data-page-type=hub] .details:not([data-section=children])>*{grid-column:1}
  [data-page-type=hub] .details:not([data-section=children])>.section-label{grid-column:1/-1}
  [data-page-type=hub] .details:not([data-section=children])>.card{grid-column:2;grid-row:2/span 20;margin:0}
  [data-page-type=hub] .details:not([data-section=children]):not(:has(>.card))>:not(.section-label){max-width:600px}
  [data-page-type=hub] [data-section=children]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  [data-page-type=hub] [data-section=children]>.section-label{grid-column:1/-1;margin:0}
  [data-page-type=hub] .hub-card{margin:0}
  [data-page-type=hub] .hub-card h2,[data-page-type=hub] .hub-card .hub-card-title{font-size:40px}
  [data-page-type=hub] .after{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,72px);align-items:start}
  [data-page-type=hub] .after .reading{margin-top:10px}

  /* Tokyo Bible block: title left, line + button right */
  .bible .feature-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);align-items:end}
  .bible .feature-kicker{grid-column:1/-1}
  .bible h2{grid-column:1;grid-row:2/span 2;margin-bottom:0;font-size:clamp(86px,8vw,120px)}
  .bible p:not(.feature-kicker){grid-column:2;grid-row:2}
  .bible .watch,.bible .bible-link{grid-column:2;grid-row:3;margin-top:22px}

  /* Footer across the frame */
  .site-footer-inner{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-legal{grid-column:4;grid-row:1;margin:0;text-align:right}
}
@media (min-width:1200px){
  [data-page-type=hub] [data-section=children]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Desktop cover title: each line fills the full frame width. --fit (set per line by the build from the
   font's measured glyph widths, templates/partials.mjs coverFit) is the size in cqi at which that line
   spans the title's width exactly. Three caps keep the whole cover (title, kicker, intro) and the start
   of the author box on the first screen of a laptop (wave 1h, Matt: "It's too tall"):
   - --cap (cqi, per title, from the build's coverCap): no line above 1.2x the title's longest line, and
     never above 26cqi, so a short word ("TOKYO") never towers over a long one;
   - window height: the title gets the window height minus --title-room (header, top line, kicker and
     intro, breadcrumb, and the author box down to its "Creator living in Tokyo" line: 365-393px measured
     on 2026-11-04, so 400px; the build sets 440px on a cover with a burst, which is 436px), less the
     gaps between lines (14px, then 10px), shared between the lines (a 2-line title is .86 + 1
     line-heights tall, the band line has extra padding; a 3-line one .86 + 1 + .86). Never below 96px;
   - a capped line sits centred and its black band (the second line) still runs edge to edge.
   Pure CSS: it needs no script and nothing moves when the font arrives (the line box is set by the
   font size, not by the text). Without cqi support the character-count rule above still applies. */
@supports (font-size:1cqi){
  @media (min-width:1024px){
    h1{--title-room:400px}
    h1 .t1,h1 .t2,h1 .t3{font-size:min(calc(var(--fit,calc(205 / var(--n))) * 1cqi),calc(var(--cap,26) * 1cqi),max(calc((100vh - var(--title-room) - (10px * var(--lines,2) - 6px)) / (.86 * var(--lines,2) + .14)),96px))}
  }
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Trip-plan form (moved from assets/ticket/ticket.css on 2026-11-05: ticket.css now loads at 1200px+ only) */
/* /trip-plan/: the one-tap "when's your trip?" question (built by the :::tripform block) */
.trip-form{margin:14px 0 6px;display:grid;gap:12px}
.trip-email{display:grid;gap:6px}
.trip-email .mono{font-size:12px}
.trip-email input{width:100%;height:50px;padding:0 14px;font:400 16px/1 "Barlow",system-ui,sans-serif;border:1.5px solid #171715;border-radius:0;background:#fff;color:#171715;-webkit-appearance:none;appearance:none}
.trip-email input:focus{outline:none;box-shadow:0 0 0 2px #171715}
.trip-form.has-email .trip-email{display:none}
.trip-answers{display:grid;gap:8px}
.trip-answers button{min-height:52px;padding:0 16px;background:#efff3d;color:#171715;border:1.5px solid #171715;border-radius:0;font-size:14px;letter-spacing:.04em;cursor:pointer;text-align:left}
.trip-answers button:hover{background:#f6ff8a}
.trip-answers button[aria-pressed=true]{background:#171715;color:#efff3d}
.trip-answers button:disabled{cursor:default}
.trip-status{font-weight:600;min-height:1.4em;margin:0}
@media (min-width:700px){.trip-answers{grid-template-columns:repeat(3,minmax(0,1fr))}.trip-answers button{text-align:center}}
/* Wave 4 (2026-11-05): nav labels, proof line, and the new blocks (SITE-BLUEPRINT.md 4.1, 4.5, 4.9, 4.10) */
.nav-pre{display:none}
/* pre: a link is a flex box now (V10), which would drop the space at the end of "Free " */
@media (min-width:700px){.nav-pre{display:inline;white-space:pre}}
.proof-line{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--link-grey)}
.trip-fine{margin:6px 0 0;font-size:13px}
.trip-fine a,.tk-fine a{color:inherit;text-decoration:underline}
.spot-tip{margin:8px 0 0;padding:8px 10px;border:1.5px dashed var(--ink);background:var(--paper);font-size:15px}
.spot-tip .mono{font-size:11px;margin-right:6px}
.spot.is-closed{opacity:.72}
.spot-closed{display:inline-block;margin:0 0 6px;padding:3px 7px;background:var(--ink);color:var(--on-ink);font-size:11px}
.verdict{background:var(--ink);color:var(--lime);border:var(--rule) solid var(--ink);margin:0 0 22px;padding:14px 14px 10px}
.verdict dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.verdict dt{font-size:11px;color:var(--on-ink);text-transform:uppercase}
.verdict dd{margin:3px 0 0;font-size:16px;line-height:1.3;color:var(--lime)}
.verdict .verdict-call dd{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:28px;line-height:1}
.verdict a{color:var(--lime)}
.verdict-checked{margin:12px 0 0;font-size:11px;color:var(--on-ink)}
@media (min-width:700px){.verdict dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.walk{border-left:3px solid var(--ink);padding:2px 0 2px 14px;margin:14px 0}
.walk-label{font-size:11px;margin:0 0 8px}
.walk-stops{margin:0;padding-left:22px}
.walk-stops li{margin:0 0 8px}
.checklist{background:var(--paper);border:var(--rule) solid var(--ink);padding:12px 14px;margin:14px 0}
.checklist-label{font-size:11px;margin:0 0 6px}
.checklist ul{list-style:none;margin:0;padding:0}
.checklist li{border-top:1px solid rgba(23,23,21,.15)}
.checklist li:first-child{border-top:0}
.checklist label{display:flex;gap:10px;align-items:flex-start;padding:10px 0;min-height:44px;box-sizing:border-box;cursor:pointer}
.checklist input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px;accent-color:#171715}
.checklist input:checked+span{text-decoration:line-through;text-decoration-thickness:1px;color:var(--link-grey)}
.timeline{list-style:none;margin:14px 0;padding:0 0 0 14px;border-left:2px solid var(--ink)}
.timeline li{display:grid;grid-template-columns:84px 1fr;gap:10px;padding:0 0 14px;position:relative}
.timeline li::before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;background:var(--lime);border:2px solid var(--ink);border-radius:50%}
.tl-time{font-size:13px;padding-top:2px;overflow-wrap:anywhere;hyphens:manual}
.timeline p{margin:0}
.tl-title{font-weight:600}
.nextstop{background:var(--lime);border:var(--rule) solid var(--ink);padding:18px 16px;margin:26px 0 8px}
.nextstop-label{font-size:11px;margin:0 0 6px}
.nextstop-title{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:31px;line-height:1;margin:0 0 8px}
.nextstop p{margin:0 0 12px}
.nextstop-answers{display:grid;gap:8px}
.nextstop-answers a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;background:var(--cream);color:var(--ink);border:1.5px solid var(--ink);text-decoration:none;font-size:13px}
.nextstop-answers a:hover{background:var(--ink);color:var(--lime)}
@media (min-width:700px){.nextstop-answers{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Round 1 R13: the card is the trip form; its answers keep the card's cream-on-lime look. */
.nextstop .trip-form{margin:4px 0 0}
.nextstop .trip-answers button{background:var(--cream)}
.nextstop .trip-answers button:hover{background:var(--ink);color:var(--lime)}
.nextstop .trip-fine{font-size:12px}
.tiles{display:grid;gap:10px;margin:8px 0 0}
.tiles .tile{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:14px 16px;background:var(--paper);color:var(--ink);border:var(--rule) solid var(--ink);text-decoration:none;font-size:13px;line-height:1.3;text-transform:uppercase}
.tiles .tile::after{content:"\2192";flex:none}
.tiles .tile:hover{background:var(--lime)}
@media (min-width:700px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trip-answers button.is-picked{box-shadow:inset 0 0 0 3px #171715}
/* The plain pages (404, /legal, /privacy/; review2 S8): their own rules, moved from each page's inline <style>; .legal h1 was in two of them, identical, and is here once. */
.nf{padding:28px var(--pad) 36px}.nf h1{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(44px,13vw,96px);line-height:.9;margin:0 0 14px;text-transform:uppercase}.nf .watch{max-width:420px}.nf ul{margin:18px 0 0;padding-left:20px}.nf li{margin:.45em 0}
.legal-facts{background:var(--paper);border:var(--rule) solid var(--ink);padding:14px 16px;margin:16px 0 22px}.legal-facts dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:10px 20px}.legal-facts dt{font-family:"Space Mono",monospace;font-size:11px;text-transform:uppercase;color:var(--link-grey);padding-top:3px}.legal-facts dd{margin:0}.legal h1{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:clamp(40px,11vw,80px);line-height:.92;margin:0 0 12px;text-transform:uppercase}@media(max-width:480px){.legal-facts dl{grid-template-columns:1fr;gap:2px}.legal-facts dt{margin-top:10px}}
.policy{font-size:16px;line-height:1.6}.policy p{margin:0 0 12px}.policy h2{font:800 22px/1.15 "Barlow Condensed",sans-serif;text-transform:uppercase;margin:28px 0 10px;padding-top:18px;border-top:var(--rule) solid var(--ink)}.policy ul{margin:0 0 14px 20px}.policy li{margin-bottom:6px}.policy .effective{margin-top:28px;font-size:13px}.policy a{color:inherit;text-decoration:underline}