/* Homepage, house style (2026-11-05, concept A+). Colours: lime, ink, cream and paper are the house
   tokens from assets/site.css (taken from the live /japanese-fashion/ guide); gold #e8c46a is sampled
   from the ticket poster's lit face; hanko red #c8321c is the red of a station ink stamp.
   Type: Barlow Condensed ExtraBold for display (the house cover face, built for huge caps), Barlow for
   reading, Space Mono for labels (ticket and timetable print), Instrument Serif italic for the one
   focus word in the headline. */
@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}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"MJH Press Mark";src:url(/assets/fonts/mjh-press-mark.woff2) format("woff2");font-weight:400;font-display:swap}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* SITE-TOKENS:START (built by scripts/build.mjs from the :root block of assets/site.css, do not hand-edit) */
: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;
}
/* SITE-TOKENS:END */
/* The homepage's own tokens, under names assets/site.css does not use, so no token has two values on this site.
   --home-muted, --home-on-ink and --home-pad are the homepage's values of site.css's --muted (#6b6a62), --on-ink
   (#f4f0e6) and --pad (22px): which one the whole site should use is a design call (review2/ENG-BUILD-C2.md). */
:root{--ink2:#23231f;--gold:#e8c46a;--hanko:#c8321c;--home-muted:#5c5b54;--home-on-ink:#ece7da;--on-ink-dim:#c9c4b5;--home-pad:16px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:"Barlow",system-ui,sans-serif;background:var(--cream);color:var(--ink);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.hero :focus-visible,.gate-overlay :focus-visible{outline-color:var(--lime)}
.mono{font-family:"Space Mono",ui-monospace,Menlo,monospace;font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:640px;margin:0 auto;padding:0 var(--home-pad);width:100%}
section{padding:36px 0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--lime);padding:10px 14px;font-size:12px;z-index:1100}
.skip:focus{left:8px;top:8px}

/* Header: one row on every phone, so the claim button fits the first screen */
.site-head{background:var(--lime);padding:0 var(--home-pad)}
.site-head-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px}
.brand{font-size:12px;text-decoration:none}
.site-nav{display:flex;gap:16px;font-size:11px;min-width:0}
.site-nav a{text-decoration:none;display:inline-block;padding:13px 0;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}
/* Shared header labels (R16): same rule as assets/site.css; "Free" shows from 700px */
.nav-pre{display:none}
@media (min-width:700px){.nav-pre{display:inline}}
/* V9 (R10): all five links on phones too, About included (same rules as site.css's header) */
@media (max-width:699px){.site-head .mono{letter-spacing:0}.site-nav{gap:12px}}
@media (max-width:389px){.site-nav{gap:8px}.site-head-inner{gap:8px}}
@media (max-width:359px){.site-nav{overflow-x:auto;scrollbar-width:none}}

/* Hero: the ticket and the claim */
.hero{background:radial-gradient(ellipse 70% 52% at 50% 24%,#3b301b 0%,var(--ink) 72%);color:var(--home-on-ink);padding:4px 0 16px;text-align:center}
.hero-in{max-width:1080px;margin:0 auto;padding:0 var(--home-pad)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:10px;color:var(--on-ink-dim);min-height:26px}
.hero-top .who{display:flex;align-items:center;gap:8px}
.hero-top img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1px solid #6b6553}
/* The ticket stage has a fixed shape so the poster still and the 3D first frame line up exactly:
   390:250 and edge to edge on phones (the ticket is 88% of the screen width, with room above and below
   for a thumb), 1080:400 from 700px. The shape is reserved before any image loads: no layout shift. */
.tk-stage{position:relative;aspect-ratio:390/250;margin:0 calc(-1 * var(--home-pad));touch-action:pan-y}
.tk-stage picture{position:absolute;inset:0}
.tk-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s ease-out .1s}
.tk-hint{position:absolute;left:0;right:0;bottom:6px;font-size:10px;color:var(--on-ink-dim);opacity:0;transition:opacity .4s;pointer-events:none}
html.tk-3d .tk-hint{opacity:1}
html.tk-touched .tk-hint{opacity:0}
.tk-stage .tk-3d{position:absolute;inset:0}
.tk-stage .tk-3d canvas{display:block;opacity:0;transition:opacity .4s ease-out}
.tk-stage.is-live .tk-3d canvas{opacity:1}
.tk-stage.is-live .tk-poster{opacity:0}
/* Poster sway (2026-11-05): the poster moves from the first paint with the 3D ticket's own idle sway
   (engine.js Ticket.tick: yaw 0.11 sin(0.62 t), pitch 0.05 sin(0.47 t), in radians), as a compositor-only CSS
   animation, so nothing waits for a script. Each quarter of the swing uses the
   cubic curve closest to a quarter sine (away from rest .33,.518,.64,1; back to rest its mirror; off by under 0.1%).
   Yaw 0.11 rad = 6.30deg over 10.13 s; pitch 0.05 rad = 2.86deg over 13.37 s (CSS rotateX is the 3D pitch with
   the sign flipped). The perspective matches the 3D camera (fov 26deg: 2.166 x the stage height, phones 250px).
   dock.js reads the animation's own clock and starts the 3D ticket at the same pose, so the cross-fade has no
   jump. It keeps swaying on every screen (phones ran one cycle until 2026-11-06: a still ticket read as a picture). */
@keyframes tk-yaw{0%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.33,.518,.64,1)}25%{transform:rotateY(6.3deg);animation-timing-function:cubic-bezier(.36,0,.67,.482)}50%{transform:rotateY(0deg);animation-timing-function:cubic-bezier(.33,.518,.64,1)}75%{transform:rotateY(-6.3deg);animation-timing-function:cubic-bezier(.36,0,.67,.482)}100%{transform:rotateY(0deg)}}
@keyframes tk-pitch{0%{transform:rotateX(0deg);animation-timing-function:cubic-bezier(.33,.518,.64,1)}25%{transform:rotateX(-2.86deg);animation-timing-function:cubic-bezier(.36,0,.67,.482)}50%{transform:rotateX(0deg);animation-timing-function:cubic-bezier(.33,.518,.64,1)}75%{transform:rotateX(2.86deg);animation-timing-function:cubic-bezier(.36,0,.67,.482)}100%{transform:rotateX(0deg)}}
@media (prefers-reduced-motion:no-preference){
  html:not(.tk-still) .tk-stage{perspective:541px;overflow:clip} /* (the turned poster's clear corners must not widen the page) */
  html:not(.tk-still) .tk-stage picture{transform-style:preserve-3d;animation:tk-pitch 13.368s linear infinite}
  html:not(.tk-still) .tk-stage .tk-poster{animation:tk-yaw 10.134s linear infinite;will-change:transform}
  html .tk-stage.is-settled picture,html .tk-stage.is-settled .tk-poster{animation:none}
}
@media (prefers-reduced-motion:no-preference) and (min-width:700px){
  html:not(.tk-still) .tk-stage{perspective:866px}
}
.hero h1{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(34px,9.4vw,64px);line-height:.92;letter-spacing:.005em;margin:0 auto;max-width:14.5em;color:#f6f1e4;text-wrap:balance}
.hero h1 em,.hc-big em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;text-transform:none;color:var(--gold);font-size:1.14em;letter-spacing:0;line-height:.8}
.lede{font-size:16px;line-height:1.4;color:var(--home-on-ink);max-width:31em;margin:4px auto 0}
.claim{max-width:560px;margin:12px auto 0;display:grid;gap:8px;text-align:left}
/* The ask is one row: email + button (stacks only under 360px). No name field: the name is asked after. */
.claim-row{display:grid;grid-template-columns:minmax(0,1fr) auto}
.claim-row label{min-width:0}
.claim-row .btn-claim{width:auto;min-height:50px;padding:0 12px;font-size:13px;letter-spacing:0;gap:8px;white-space:nowrap}
.claim-row .btn-claim::before{width:9px;height:9px}
@media(max-width:359px){.claim-row{grid-template-columns:1fr;gap:8px}}
.claim input{width:100%;height:48px;padding:0 14px;font:400 16px/1 "Barlow",system-ui,sans-serif;background:var(--ink2);color:#f6f1e4;border:1.5px solid #8d887a;border-radius:0;-webkit-appearance:none;appearance:none}
.claim input[type=email]{height:50px}
.claim input::placeholder{color:#b3ae9f;opacity:1}
.claim input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.btn-claim{min-height:52px;background:var(--lime);color:var(--ink);border:0;border-radius:0;font:400 15px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;padding:0 18px;width:100%}
.btn-claim::before{content:"";flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.btn-claim:hover{background:#f6ff8a}
.btn-claim:active{transform:translateY(1px)}
.btn-claim:disabled{opacity:.75;cursor:progress}
.claim-note{font-size:13px;line-height:1.35;color:var(--on-ink-dim);text-align:center}
.claim-status{font-size:14px;color:var(--lime);text-align:center}
.claim-status:empty{display:none}
.hero-claimed{display:none;margin:10px auto 0;max-width:640px}
.hc-k{font-size:11px;color:var(--gold);letter-spacing:.1em}
.hc-big{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(32px,8.4vw,52px);line-height:.95;color:#f6f1e4;margin-top:4px}
.hc-sub{color:var(--home-on-ink);margin:8px auto 0;max-width:30em}
.hc-actions{display:grid;gap:8px;margin-top:14px}
.btn-ghost{min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--lime);color:var(--lime);text-decoration:none;font:400 15px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;padding:0 16px}
.btn-ghost:hover{background:rgba(239,255,61,.08)}
html.tk-claimed .claim,html.tk-claimed .lede{display:none}
html.tk-claimed .hero-claimed{display:block}
/* After a claim: one small, optional-in-practice step to put a name on the ticket (never sent anywhere). */
.hc-name-form{max-width:440px;margin:14px auto 0;text-align:left}
.hc-name-form[hidden]{display:none}
.hc-name-q{display:block;text-align:center;font-size:15px;color:var(--home-on-ink);margin-bottom:8px}
.hc-name-form input{width:100%;height:48px;padding:0 14px;font:400 16px/1 "Barlow",system-ui,sans-serif;background:var(--ink2);color:#f6f1e4;border:1.5px solid #8d887a;border-right:0;border-radius:0;-webkit-appearance:none;appearance:none}
.hc-name-form input::placeholder{color:#b3ae9f;opacity:1}
.hc-name-form input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.hc-name-form .btn-ghost{min-height:48px;white-space:nowrap;background:transparent;border-radius:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.hc-name-form .btn-ghost:hover{background:rgba(239,255,61,.08)}
.hero-proof{margin:0 0 22px;border-top:1.5px solid var(--ink);padding-top:12px;display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:6px}
.proof{margin:0;font-size:13px;line-height:1.6;color:var(--ink)}
.proof b{font-weight:400;background:var(--lime);padding:0 3px}
/* The Washington Post: a small grey wordmark set in a blackletter face (a subset of the open-licence
   UnifrakturMaguntia, renamed as the licence asks). Text, never the Post's logo file, never a link. */
.hero-press{margin:0;display:inline-flex;align-items:baseline;gap:8px;color:var(--home-muted);cursor:default}
.hero-press span:first-child{font:400 10px "Space Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase}
.hero-press .wapo{font-family:"MJH Press Mark","UnifrakturMaguntia",Georgia,serif;font-size:19px;line-height:1;letter-spacing:0;color:#6b6a62;white-space:nowrap}

/* Section heads */
.sec-k{font-size:11px;color:var(--home-muted);margin-bottom:6px}
.sh{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(34px,8vw,56px);line-height:.92;margin-bottom:16px}
.sh em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;text-transform:none}

/* Email gate (DM links: no close; cold visitors: opened from a locked card, no close button) */
.gate-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(23,23,21,.72);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.gate-overlay.hidden{display:none}
body.gated{overflow:hidden}
body.gated .site-head,body.gated .hero,body.gated .shop,body.gated .guides,body.gated .trip,body.gated .route,body.gated .testimonials-section,body.gated .bible,body.gated .about,body.gated .site-footer{filter:blur(6px);pointer-events:none;user-select:none}
.gate-card{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--lime);padding:24px 20px;text-align:center;position:relative;max-width:440px;width:100%}
.gate-card .gate-title{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:30px;line-height:.95;margin-bottom:8px}
.gate-card .sub{color:var(--home-muted);font-size:15px;line-height:1.45;margin-bottom:14px}
.email-form{display:grid;gap:8px;max-width:420px;margin:0 auto}
.email-form input{width:100%;height:50px;padding:0 14px;border-radius:0;border:1.5px solid var(--ink);background:#fff;color:var(--ink);font:400 16px/1 "Barlow",system-ui,sans-serif;outline:none;-webkit-appearance:none;appearance:none}
.email-form input::placeholder{color:#76746b;opacity:1}
.email-form input:focus{box-shadow:0 0 0 2px var(--ink)}
.email-form button{min-height:52px;border:0;border-radius:0;background:var(--ink);color:var(--lime);font:400 15px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em;cursor:pointer}
.email-form button:disabled{opacity:.75;cursor:progress}
.form-msg{display:none;padding:10px;font-weight:600;margin-top:10px;font-size:15px;border:1.5px solid var(--ink)}
.form-msg--success{background:var(--lime);color:var(--ink)}
.form-msg--error{background:#fff;color:var(--hanko)}
.gate-proof{color:var(--home-muted);font:400 13px/1.5 "Space Mono",ui-monospace,monospace;text-transform:uppercase;margin-top:12px}
.gate-proof a,.claim-note a{color:inherit;text-decoration:underline}

/* Guide cards */
.guides{padding:18px 0 28px}
/* The shop, right after the hero (2026-11-08); the cards are the product block from templates/blocks.mjs. */
.shop{padding:20px 0 32px;border-bottom:1.5px solid var(--ink)}
.shop-copy{font-size:17px;line-height:1.45;max-width:34em;margin:0 0 20px}
/* PRODUCT-CSS: templates/blocks.mjs PRODUCT_CSS + GRID_CSS, copied verbatim (tests/blocks.test.mjs keeps them equal). */
.product-block{box-sizing:border-box;max-width:760px;margin:48px auto;padding:24px;background:var(--paper,#fffdf6);color:var(--ink,#171715);border:var(--rule,1.5px) solid var(--ink,#171715);border-radius:0}.product-block h2{margin:0 0 6px;font-size:1.45rem;line-height:1.2}.pb-label{margin:0 0 8px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.pb-sub{margin:0 0 12px}.pb-price{margin:0 0 16px;font-weight:700;font-size:1.1rem}.pb-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;box-sizing:border-box;width:calc(100% - 4px);min-height:52px;padding:13px 16px;background:var(--lime,#efff3d);color:var(--ink,#171715);border:2px solid var(--ink,#171715);border-radius:0;box-shadow:4px 4px 0 var(--ink,#171715);font-family:"Barlow",system-ui,sans-serif;font-weight:600;font-size:17px;line-height:1.25;text-decoration:none;transition:transform .08s ease,box-shadow .08s ease}.pb-cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink,#171715)}.pb-terms{margin:12px 0 0;font-size:.85rem;color:var(--muted,#6b6a62)}
.product-grid{display:grid;gap:20px;max-width:1080px;margin:0 auto}.product-grid .product-block{margin:0;max-width:none;display:flex;flex-direction:column}.product-grid .pb-cta{margin-top:auto}.pb-region{max-width:1080px;margin:16px auto 0;font-size:.85rem;color:var(--muted,#6b6a62)}@media (min-width:700px){.product-grid{grid-template-columns:1fr 1fr}}
/* Straight-in links at the top of the guides: the first thing past the fold, so it shows the page goes on */
.jump{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.jump-k{width:100%;font-size:11px;color:var(--home-muted)}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.jump a:hover{background:var(--lime)}
.jump a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.guides-grid{display:flex;flex-direction:column;gap:10px}
.guide-card{background:var(--paper);border:1.5px solid var(--ink);padding:16px;display:flex;align-items:center;gap:14px}
.guide-card.locked{cursor:pointer}
/* Dead-buttons QA 2026-11-07: an open guide card (and the START HERE card) is one tap target like a locked one (whose tap opens the email ask):
   its one link stretches over the card. On a locked card the tap still reaches the card's own handler (gate.js). */
.guide-card,.featured-guide{position:relative}
.guide-card .guide-dl::after,.featured-guide .guide-dl::after{content:"";position:absolute;inset:0}
.guide-card.locked .guide-dl{display:none}
.guide-card.locked .guide-lock{display:block}
body.soft-gate .guide-card.locked .guide-dl{display:inline-flex}
body.soft-gate .guide-card.locked .guide-lock{display:none}
.guide-num{font-size:11px;flex-shrink:0;align-self:flex-start;padding-top:4px;color:var(--home-muted)}
.guide-info{flex:1;min-width:0}
.guide-info h3{font-size:18px;font-weight:600;line-height:1.2;margin-bottom:3px}
.guide-info p{color:var(--home-muted);font-size:15px;line-height:1.4}
.guide-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.guide-tag{display:inline-block;padding:2px 6px;border:1px solid var(--ink);font:400 10px/1.5 "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);background:transparent}
.guide-dl{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;background:var(--ink);color:var(--lime);font:400 13px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;flex-shrink:0;border:0}
.guide-dl:hover{background:#000}
.guide-lock{display:none;color:var(--home-muted);font:400 11px "Space Mono",ui-monospace,monospace;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.featured-guide{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:24px 20px 22px;margin-bottom:24px;text-align:center}
.featured-label{display:inline-block;background:var(--ink);color:var(--lime);font:400 11px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.06em;padding:5px 10px;margin-bottom:12px}
.featured-guide h3{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:32px;line-height:.95;margin-bottom:8px}
.featured-guide>p{color:var(--home-muted);font-size:16px;line-height:1.5;margin:0 auto 12px;max-width:32em}
.featured-guide .guide-tags{justify-content:center;margin-bottom:16px}
.featured-guide .featured-row{display:flex;justify-content:center}
.featured-guide .guide-dl{background:var(--lime);color:var(--ink);border:1.5px solid var(--ink);min-height:50px;padding:0 28px;font-size:14px}
.guide-card.highlighted{border-width:3px;box-shadow:6px 6px 0 var(--ink);margin-bottom:20px}
.context-banner{background:var(--ink);color:var(--lime);padding:12px 16px;text-align:center;margin-bottom:8px;font-size:15px;font-weight:600}
.context-banner span{color:#fff}

/* Your trip plan: the first step after the guides */
.trip{background:var(--lime);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.trip .sec-k{color:var(--ink)}
.trip p{font-size:17px;line-height:1.45;max-width:34em}
.trip .btn-ink{margin-top:16px;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;background:var(--ink);color:var(--lime);text-decoration:none;font:400 15px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.05em}

/* The route: five stops, five stamps */
.route-copy{color:var(--home-muted);font-size:16px;max-width:34em;margin-bottom:18px}
.route-list{list-style:none;display:grid;border-top:1.5px solid var(--ink)}
.route-list li{border-bottom:1.5px solid var(--ink)}
.route-list a{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;padding:14px 4px;text-decoration:none;min-height:44px}
.route-list a:hover{background:var(--paper)}
.stampmark{--s:52px;grid-row:1/span 3;width:var(--s);height:var(--s);border-radius:50%;border:2px dashed #8f8b80;display:grid;place-items:center;color:#6f6b61}
.stampmark i{font-style:normal;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:20px}
.stampmark b{display:none}
.route-list li.is-in .stampmark{border:3px double var(--hanko);color:var(--hanko);transform:rotate(-8deg)}
.route-list li.is-in .stampmark i{display:none}
.route-list li.is-in .stampmark b{display:block;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:700;font-size:22px;line-height:1;white-space:nowrap;letter-spacing:-.04em}
.route-list li.two.is-in .stampmark b{font-size:16px}
.rs-name{font-family:"Barlow Condensed",sans-serif;font-weight:800;text-transform:uppercase;font-size:26px;line-height:1}
.rs-desc{color:var(--home-muted);font-size:15px;line-height:1.4}
.rs-gloss{font-size:10px;color:var(--home-muted)}
.route-list li.is-in .rs-gloss::after{content:" · stamped";color:var(--hanko)}
.route-list li.is-next{background:var(--lime)}
.route-list li.is-next .rs-gloss::after{content:" · next stop →";color:var(--ink)}

/* Testimonials */
.testimonials-section{padding:36px 0 12px}
.testimonials-intro{color:var(--home-muted);font-size:16px;margin:-8px 0 16px}
.video-testimonial{background:var(--paper);border:1.5px solid var(--ink);padding:12px;margin-bottom:12px}
.video-testimonial video{width:100%;max-width:100%;background:#000;display:block;height:auto}
/* V7: the page's own play/pause button (templates/home/video.js), never over the burned-in subtitles in the lower third */
.vt-frame{position:relative}
.video-testimonial video{cursor:pointer}
.vt-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--lime);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;cursor:pointer}
.vt-play::before{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--ink)}
.vt-play:hover{background:#f6ff8a}
.vt-frame.is-playing .vt-play{left:auto;top:10px;right:10px;width:44px;height:44px;margin:0;box-shadow:none;opacity:.85}
.vt-frame.is-playing .vt-play::before{width:12px;height:16px;margin:0;border:0;border-left:4px solid var(--ink);border-right:4px solid var(--ink);box-sizing:border-box}
.video-testimonial-caption{padding:10px 2px 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.video-testimonial-caption .v-name{font-weight:600;font-size:15px}
.video-testimonial-caption .v-context{color:var(--home-muted);font-size:14px}
.video-testimonial-badge{margin-left:auto;font:400 10px "Space Mono",ui-monospace,monospace;text-transform:uppercase;border:1px solid var(--ink);padding:2px 6px}
.quote-grid{display:grid;grid-template-columns:1fr;gap:10px}
.quote-card{background:var(--paper);border:1.5px solid var(--ink);padding:14px 16px}
.quote-card p{font-size:16px;line-height:1.5;margin-bottom:8px}
.quote-card .q-attr{color:var(--home-muted);font:400 11px/1.4 "Space Mono",ui-monospace,monospace;text-transform:uppercase}
@media(min-width:600px){.quote-grid{grid-template-columns:1fr 1fr}}

/* Japan Move Plan (a side door, below the testimonials) */
.move-plan{padding:12px 0 28px}.move-plan-card{background:var(--paper);border:1.5px solid var(--ink);padding:22px 20px}.move-plan-label{font:400 11px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--home-muted);margin-bottom:8px}.move-plan h2{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:32px;line-height:.95;margin-bottom:10px}.move-plan-card>p:not(.move-plan-label){color:var(--home-muted);font-size:16px;line-height:1.5}.move-plan .guide-tags{margin:14px 0 18px}.move-plan-cta{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--ink);color:var(--lime);min-height:52px;padding:0 16px;font:400 14px "Space Mono",ui-monospace,monospace;text-transform:uppercase;text-decoration:none}.move-plan-cta span{white-space:nowrap}.move-plan-free{display:inline-block;margin-top:14px;padding:8px 0;color:var(--home-muted);font-size:15px;text-underline-offset:3px}.move-plan a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}body.gated .move-plan{filter:blur(6px);pointer-events:none;user-select:none}@media(max-width:420px){.move-plan-cta{display:block;padding:12px 16px}.move-plan-cta span{display:block;margin-top:4px}}

/* Tokyo Bible: an honest waitlist card */
.bible{padding:24px 0}
.bible-card{background:var(--paper);border:1.5px solid var(--ink);padding:22px 20px;text-align:center}
.bible-badge{display:inline-block;font:400 11px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--ink);padding:3px 8px;margin-bottom:10px}
.bible-card h3{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;text-transform:uppercase;font-size:34px;line-height:.95;margin-bottom:6px}
.bible-stats{font-weight:600;font-size:16px;margin-bottom:8px}
.bible-desc{color:var(--home-muted);font-size:16px;line-height:1.5;margin:0 auto 12px;max-width:34em}
.bible-price{margin-bottom:12px}
.bible-price .amount{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:800;font-size:40px;line-height:1}
.bible-cta{display:inline-flex;align-items:center;min-height:50px;padding:0 22px;background:var(--ink);color:var(--lime);font:400 14px "Space Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;margin-bottom:8px}
.bible-note{color:var(--home-muted);font-size:14px}

/* About */
.about{padding:20px 0 32px}
.about-card{background:var(--paper);border:1.5px solid var(--ink);padding:18px}
.about-inner{display:flex;gap:16px;align-items:flex-start}
.about-photo{width:60px;height:60px;border-radius:50%;overflow:hidden;border:1.5px solid var(--ink);flex-shrink:0}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-text p{font-size:16px;line-height:1.6}
.about-text .sig{font-weight:600;margin-top:8px}

/* Shared site footer (R16, templates/partials.mjs): same rules as assets/site.css */
.site-footer{background:var(--ink);color:#a9a69c;padding:0 var(--home-pad) 28px;font-size:11px}
.site-footer-inner{max-width:1240px;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}
@media (min-width:700px){.site-footer{font-size:12px}}
@media (min-width:1024px){.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(max-width:600px){
  .guide-card{flex-wrap:wrap}
  .guide-dl{width:100%}
  .guide-lock{width:100%;text-align:center;margin-top:6px}
  .about-inner{flex-direction:column;gap:12px}
}
@media(min-width:700px){
  :root{--home-pad:24px}
  .tk-stage{aspect-ratio:1080/400;width:100%;margin:2px auto 0}
  .hc-actions{grid-template-columns:1fr 1fr}
  .jump-k{width:auto;margin-right:6px}
}
@media(min-width:900px){
  .claim{max-width:620px}
  .claim input,.claim input[type=email]{height:52px}
  .claim-row .btn-claim{min-height:52px;padding:0 22px;font-size:14px}
}
/* Desktop (1024px+): use the screen. Phones and tablets keep the 640px column. */
@media(min-width:1024px){
  .container{max-width:calc(1240px + 2 * var(--home-pad));padding:0 var(--home-pad)}
  .hero-top{width:min(1240px,calc(100vw - 2 * var(--home-pad)));margin-left:50%;transform:translateX(-50%)}
  .featured-guide{padding:32px clamp(48px,20%,260px) 30px}
  .guides-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .guides-grid>.guide-card.highlighted{grid-column:1/-1;margin-bottom:10px}
  .guides-grid>.guide-card:last-child:nth-child(odd){grid-column:1/-1}
  .route-list{grid-template-columns:repeat(5,minmax(0,1fr));border-left:1.5px solid var(--ink)}
  .route-list li{border-right:1.5px solid var(--ink)}
  .route-list a{grid-template-columns:1fr;align-content:start;gap:8px;padding:18px 16px;height:100%}
  .stampmark{grid-row:auto;--s:60px}
  .move-plan-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:48px;padding:32px 40px}
  .trip .container{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:56px;align-items:end}
  .trip .container>*{grid-column:1}
  .trip .btn-ink{grid-column:2;grid-row:1/4;margin:0 0 4px}
  .route-copy{margin-bottom:14px}
  .trip,.route{padding:26px 0}
  .move-plan-card>*{grid-column:1}
  .move-plan .guide-tags{margin-bottom:0}
  .move-plan-cta{grid-column:2;grid-row:2/span 2;align-self:center}
  .move-plan-free{grid-column:2;grid-row:4;justify-self:start;margin-top:0}
  .testimonials-section .container{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:16px;align-items:start}
  .testimonials-section .sh,.testimonials-section .sec-k,.testimonials-intro{grid-column:1/-1}
  .video-testimonial{margin-bottom:0}
  .bible-card{padding:34px 48px}
  .about-card{padding:26px 34px}
  .about-text p{max-width:860px}
}
/* A claimed ticket docks at the bottom right from 1200px: keep the page clear of it */
@media(min-width:1200px){html.tk-card-room main>section:not(.hero),html.tk-card-room .site-footer{padding-right:330px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tk-poster,.tk-stage .tk-3d canvas{transition:none}}