:root{--accent:#5E2750;--accentInk:#FFFFFF;--bg:#F7F4EE;--surface:#FFFFFF;--ink:#1A1418;--muted:#61565E;--line:#E5DED4;--good:#1E7B4F;--warn:#B54708;--navy:#2A1C28;--gold:#C2603E;--display:'Zen Kaku Gothic New','Hiragino Sans','Helvetica Neue',sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
a{color:var(--accent)}
main{display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:22px 0}
@media(min-width:900px){section{padding:30px 0}}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.96;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(52px,9.5vw,118px);letter-spacing:.005em}
h1 em{font-style:normal;color:var(--accent)}
h2{font-size:clamp(30px,4.6vw,54px)}
h2 span{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;text-transform:lowercase;font-size:.42em;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:.4em}
h3{font-size:19px;margin:0 0 .5em}
p{margin:0 0 1em}
.small{font-size:14px;color:var(--muted)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px 12px;z-index:10}

header.site{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);z-index:6;border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.logo{font-family:var(--display);font-size:21px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo svg{width:30px;height:30px;flex:0 0 30px}
.logo b{color:var(--accent);font-weight:400}
nav.top a{margin-left:24px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none}
nav.top a:hover{color:var(--accent)}
/* nav dropdown: a nav entry with children (hub sites use it for the country list).
   Opens on hover and on keyboard focus, so it works with JS disabled; the click handler
   only exists to serve touch and to keep aria-expanded truthful. */
.navgroup{position:relative;display:inline-block;margin-left:24px}
.navbtn{background:none;border:0;padding:0;font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.navbtn:hover,.navgroup:hover .navbtn,.navgroup:focus-within .navbtn{color:var(--accent)}
.navbtn .caret{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.navgroup:hover .navbtn .caret,.navgroup.open .navbtn .caret{transform:rotate(-135deg) translateY(-3px)}
.navpanel{display:none;position:absolute;top:100%;right:0;padding-top:14px;z-index:8}
.navgroup:hover .navpanel,.navgroup:focus-within .navpanel,.navgroup.open .navpanel{display:block}
.navpanel::before{content:"";display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;position:absolute;inset:14px 0 0 0;box-shadow:0 18px 44px rgba(0,0,0,.18)}
nav.top .navpanel a{position:relative;display:block;margin:0;padding:9px 12px;border-radius:9px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap}
nav.top .navpanel a:hover{color:var(--accent)}
/* Single column by default. Two columns only when the list is long enough to need them,
   which in practice means the hub's 14-country rack; a 4-item local-SIM group read as a
   broken grid. Quantity query: 9 or more links. Browsers without :has() keep one column,
   which is the safe fallback. */
@media(min-width:701px){.navpanel::before{inset:14px -10px 0 -10px}
.navpanel:has(a:nth-child(9)){min-width:392px}
nav.top .navpanel:has(a:nth-child(9)) a{display:inline-block;width:calc(50% - 2px);vertical-align:top}}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .15s,opacity .15s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:700px){
.logo{font-size:18px}
.burger{display:flex}
nav.top{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);padding:4px 24px 12px;flex-direction:column;box-shadow:0 14px 24px rgba(11,45,74,.08)}
nav.top.open{display:flex}
nav.top a{margin:0;padding:13px 0;font-size:17px;border-bottom:1px solid var(--line)}
nav.top a:last-child{border-bottom:0}
.navgroup{margin:0;display:block;border-bottom:1px solid var(--line)}
.navbtn{width:100%;justify-content:space-between;padding:13px 0;font-size:17px}
.navpanel{position:static;padding:0 0 10px}
.navpanel::before{display:none}
.navgroup.open .navpanel{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
nav.top .navpanel a{margin:0;padding:9px 0;font-size:15px;color:var(--muted);border-bottom:0}
}

.hero{padding:40px 0 28px;overflow:hidden}
@media(min-width:900px){.hero{padding:52px 0 40px}}
.hero-grid{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:7fr 5fr}}
.hero .sub{font-size:clamp(18px,2vw,21px);color:var(--muted);margin:16px 0 0;line-height:1.5}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-art{position:relative;justify-self:center}
.hero-art svg{width:min(72vw,460px);display:block;filter:drop-shadow(0 24px 48px rgba(11,45,74,.18))}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px}
.btn{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:14px 26px;font-size:15px;font-weight:700;text-decoration:none;border:0;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--accent)}
.btn-ghost{display:inline-block;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:12px 24px;font-size:15px;font-weight:700;text-decoration:none}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.qa{border:2px solid var(--ink);border-radius:16px;padding:26px;margin:24px 0 0;font-size:19px;line-height:1.6;position:relative}
.qa .tag{position:absolute;top:-13px;left:20px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:5px 12px;letter-spacing:.08em;text-transform:uppercase}
.qa b{color:var(--accent)}
.trust{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--muted);margin-top:14px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 26px}
.chips button{background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:13px 22px;font-size:15px;font-weight:600;cursor:pointer;min-height:48px;color:var(--ink);transition:border-color .12s}
.chips button:hover{border-color:var(--ink)}
.chips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
.chips button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.sel-q{font-weight:700;font-size:17px;margin:26px 0 8px}
.result{border:3px solid var(--accent);border-radius:20px;padding:26px;background:var(--surface);margin-top:24px}
.result .tag{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;letter-spacing:.08em;text-transform:uppercase}
.result .sel-pick{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,3vw,32px);line-height:1.05;margin:12px 0 8px}

.pcards{display:grid;gap:20px;margin:22px 0 10px}
@media(min-width:900px){.pcards{grid-template-columns:repeat(3,1fr)}}
.pcard{display:flex;flex-direction:column;gap:10px;padding:24px;position:relative}
.pcard.reco{border:3px solid var(--accent)}
.pcard .tag{position:absolute;top:-13px;left:20px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:5px 12px;letter-spacing:.08em;text-transform:uppercase}
.pcard .verdict{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;margin:0}
.pcard .vsub{font-size:14px;color:var(--muted)}
.pcard .price{font-size:38px;font-family:var(--display);font-variant-numeric:tabular-nums;margin-top:4px}
.pcard .price span{font-size:14px;color:var(--muted);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.pcard ul{margin:0;padding-left:18px;font-size:15px;line-height:1.55}
.pcard .con{font-size:15px;color:var(--warn)}
.pcard .con b{letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.pcard .tp-score{font-size:13px;color:var(--muted)}
.pcard .btn{margin-top:auto;text-align:center}

.ncards{display:grid;gap:20px;margin:20px 0}
@media(min-width:900px){.ncards{grid-template-columns:repeat(3,1fr)}}
.ncard{padding:28px}
.ncard.good .nverdict{color:var(--good)}
.ncard.warn .nverdict{color:var(--warn)}
.ncard.mid .nverdict{color:var(--accent)}
.ncard .nname{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;display:block;margin:0}
.ncard .nverdict{font-weight:700;color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.06em;display:block;margin:4px 0 10px}
.ncard p{font-size:15px!important}
.kicker{font-size:clamp(18px,2vw,20px);font-weight:600;margin:6px 0 0}

.tbl-wrap{overflow-x:auto;margin:18px 0 10px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:15px;background:var(--surface)}
th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--ink)}
th,td{padding:14px 14px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
caption{caption-side:top;text-align:left;padding:0 0 8px}
.note-warn{border:2px solid var(--warn);border-radius:16px;padding:16px 20px;font-size:16px;margin:14px 0}
.note-warn b{color:var(--warn)}

.faq-grid{display:grid;gap:24px}
@media(min-width:900px){.faq-grid{grid-template-columns:4fr 8fr}.faq-grid h2{position:sticky;top:90px}}
details{border-bottom:1px solid var(--line);padding:0}
details summary{cursor:pointer;font-weight:700;font-size:17px;padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
details summary::after{content:"+";font-family:var(--display);font-size:22px;color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px}

.steps{counter-reset:s;list-style:none;padding:0;margin:20px 0;display:grid;gap:16px}
@media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s;padding:20px;border:1px solid var(--line);border-radius:16px;font-size:15px;line-height:1.55}
.steps li::before{content:"0" counter(s);display:block;font-family:var(--display);font-size:34px;color:var(--accent);margin-bottom:10px}

.cta-band{background:var(--navy);color:#fff;padding:48px 0;text-align:center;margin-top:22px}
.cta-band h2{color:#fff;margin-bottom:8px}
.cta-band h2 b{color:var(--gold);font-weight:400}
.cta-band p{color:#B9CCDD;margin:0 auto 26px;max-width:40em}
.cta-band .btn{background:#fff;color:var(--navy)}
.cta-band .btn:hover{background:var(--gold)}

.sources{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;max-width:none}
.sources p{max-width:none}
.sources a{color:var(--muted)}
footer.site{padding:28px 0;font-size:13px;color:var(--muted)}
footer.site a{color:var(--muted)}
footer.site p{max-width:none}

.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 16px;display:none;align-items:center;gap:12px;z-index:7}
.sticky-cta .btn{padding:10px 18px;white-space:nowrap}
.sticky-cta .m{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:767px){.sticky-cta.on{display:flex}body.has-sticky{padding-bottom:64px}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.lead{font-size:19px;margin:0 0 6px}
.whofor{display:grid;gap:0;margin:8px 0}
.whofor .row{display:grid;grid-template-columns:1fr;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
@media(min-width:900px){.whofor .row{grid-template-columns:180px 1fr auto;gap:20px;align-items:baseline}}
.whofor .wname{font-family:var(--display);text-transform:uppercase;font-size:20px}
.whofor .row p{margin:0;font-size:16px}
.whofor .row a.more{font-size:14px;font-weight:700;white-space:nowrap}
sup.fnote{color:var(--warn);font-weight:700}
.polaroids{display:flex;flex-wrap:wrap;gap:22px;margin:20px 0}
.polaroid{background:#fff;border:1px solid var(--line);box-shadow:0 10px 28px rgba(11,45,74,.14);padding:10px 10px 14px;width:min(46vw,240px);transform:rotate(var(--tilt,-2deg))}
.polaroid .ph{aspect-ratio:1/1;background:linear-gradient(160deg,#BFD8EA 0%,#7FA8C9 55%,#33618C 100%);display:block;width:100%;object-fit:cover}
.polaroid figcaption{font-size:13px;color:var(--muted);font-style:italic;padding:8px 2px 0}
.hero-art .polaroid{position:relative;z-index:2;width:min(64vw,300px)}
.hero-art .chip-mini{position:absolute;right:-7%;top:-9%;width:38%;z-index:3}
footer.site .legal{margin-top:6px}

.sel-grid{display:grid;gap:32px;align-items:start}
@media(min-width:900px){.sel-grid{grid-template-columns:7fr 5fr}.sel-grid aside{justify-self:center;padding-top:24px}}
.sel-grid aside .polaroid{width:min(40vw,380px)}
.faq-grid aside .polaroid{width:min(40vw,340px);margin-top:28px}
@media(max-width:899px){.sel-grid aside{display:none}}

.toc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 24px;border-bottom:1px solid var(--line);font-size:14px}
.toc b{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--muted);margin-right:6px}
.toc a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 14px;text-decoration:none;color:var(--ink);font-weight:600}
.toc a:hover{border-color:var(--accent);color:var(--accent)}

.grid2{display:grid;gap:20px;margin:20px 0}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.grid2 h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:24px;margin:0 0 10px}
.grid2 .card p{font-size:15px}
.grid2 .card p:last-child{margin-bottom:0}

.faq-related{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;font-size:14px}
.faq-related b{letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--muted);margin-right:4px}
.faq-related a{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:7px 14px;text-decoration:none;color:var(--ink);font-weight:600}
.faq-related a:hover{border-color:var(--accent);color:var(--accent)}

.ccards{display:grid;gap:16px;margin:20px 0 6px}
@media(min-width:900px){.ccards{grid-template-columns:repeat(3,1fr)}}
.ccard{padding:22px}
.ccard .cv{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:inline-block;border-radius:999px;padding:4px 10px;margin-bottom:10px}
.ccard.yes .cv{background:var(--accent);color:#fff}
.ccard.no .cv{background:var(--good);color:#fff}
.ccard.alt .cv{background:var(--warn);color:#fff}
.ccard .ct{font-family:var(--display);text-transform:uppercase;font-size:20px;display:block;margin-bottom:8px}
.ccard p{font-size:15px;margin:0}

tr.grouprow td{background:var(--bg);font-family:var(--display);text-transform:uppercase;font-size:14px;letter-spacing:.06em;padding:14px 14px 10px;border-bottom:2px solid var(--ink)}

/* bestesimjapan.com — "murasaki".
   Identity: washi-paper ground, murasaki (imperial purple) accent, a vermilion secondary,
   Zen Kaku Gothic New set in tight uppercase, and photographs cropped into a full circle
   (ensō) with a hairline ring standing off the edge. Greece is Anton all-caps on white with
   tilted polaroids, Asia is Space Grotesk on near-black and frameless, Costa Rica is
   Bricolage Grotesque with upright field-guide plates, Vietnam is Fraunces on sand with a
   brass hairline inset, Italy is Playfair with a Roman arch crop. The circle is this
   site's alone — nothing here may be copied into another site, see docs/design-system.md. */

:root{color-scheme:light;
  /* --gold #C2603E is the vermilion secondary; --gold-deep is the same hue pushed to AA on
     the washi ground. --plum-deep is the accent darkened for hover states. */
  --gold-deep:#8C3D22;
  --plum-deep:#3F1737;
  --washi:#EFE8DC}

/* ---------------------------------------------------------------- type
   A Japanese-designed geometric sans in tight uppercase. Greece's Anton is a condensed
   uppercase slab; Zen Kaku is wide, even-weighted and open, so the two read as different
   voices even though both are set in caps. Costa Rica, Vietnam and Italy are all sentence
   case, which keeps this one distinct from the whole second half of the network. */
h1,h2{text-transform:uppercase;font-weight:900;letter-spacing:-.005em;line-height:1.04}
h1{font-size:clamp(40px,6.6vw,76px)}
h2{font-size:clamp(25px,3.4vw,38px)}
h2 span{text-transform:none;color:var(--muted);font-size:.46em;font-weight:700;
  letter-spacing:.005em}
h1 em{font-style:normal;color:var(--accent)}
h3,.pcard .verdict,.ncard .nname,.ccard .ct,.whofor .wname,.grid2 h3,.result .sel-pick{
  text-transform:none;font-weight:700;letter-spacing:-.006em}
.logo{text-transform:uppercase;font-weight:900;letter-spacing:-.005em;font-size:19px}
/* Wide-tracked vermilion eyebrow, the one typographic flourish on the site. */
.eyebrow{letter-spacing:.24em;color:var(--gold-deep);text-transform:uppercase;
  font-weight:700;font-size:11.5px}
body{font-size:17px}
.lead{font-size:19px}

/* ---------------------------------------------------------------- ground
   Washi: a plum wash low right and a vermilion bloom top left, the reverse diagonal of
   Italy's limewash. Flat everywhere else — borders, never shadows. */
.hero{background:
  radial-gradient(88% 68% at 96% 94%, rgba(94,39,80,.12) 0%, rgba(94,39,80,0) 62%),
  radial-gradient(72% 58% at 6% 2%, rgba(194,96,62,.13) 0%, rgba(194,96,62,0) 64%)}

/* ---------------------------------------------------------------- shapes
   Softer than Italy's cut-stone 4px and harder than Greece's default: 2px, a paper edge.
   The recommended card takes a vermilion top rule so it reads as picked in grayscale. */
.card{border-radius:2px;border-color:var(--line)}
.qa{border-radius:2px;border-color:var(--accent);border-width:2px}
.qa .tag{background:var(--accent)}
.pcard.reco{border-radius:2px;border-top:5px solid var(--gold)}
.result{border-radius:2px;border-left:5px solid var(--accent)}
.steps li{border-radius:2px}
.note-warn{border-radius:2px;border-width:2px}
.trust{border-radius:2px}

/* ---------------------------------------------------------------- buttons */
.btn{background:var(--accent);color:#fff;border-radius:2px}
.btn:hover{background:var(--plum-deep)}
.btn-ghost{border-color:var(--accent);color:var(--accent);border-radius:2px}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.chips button{background:#fff;border-color:var(--line);border-radius:2px}
.chips button:hover{border-color:var(--accent)}
.toc a:hover,.faq-related a:hover{background:rgba(94,39,80,.08)}

/* ---------------------------------------------------------------- tables
   Japan pages live or die on the network column, so the header rule is plum and grouped
   coverage rows read as vermilion paper bands. */
th{border-bottom-color:var(--accent)}
tr.grouprow td{background:rgba(194,96,62,.14);border-bottom-color:var(--gold);
  text-transform:uppercase;font-weight:800;letter-spacing:.04em;font-size:14px}
sup.fnote{color:var(--gold-deep)}

/* ---------------------------------------------------------------- photos
   The sixth photo treatment in the network and the one that carries the identity: the image
   is cropped to a full circle with a plum hairline ring standing off the edge, and the
   caption sits centred beneath in wide-tracked uppercase. Images are generated square,
   frameless and text-free, so the circle is CSS and nothing is stamped into the pixels. */
.polaroid{transform:none;background:transparent;border:0;box-shadow:none;padding:0;
  border-radius:0;overflow:visible;position:relative}
.polaroid .ph{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;
  background:linear-gradient(152deg,#E4D6C4 0%,#5E2750 56%,#241220 100%)}
.polaroid::before{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid var(--accent);opacity:.5;pointer-events:none}
.polaroid figcaption{margin-top:22px;padding:0 6px;text-align:center;font-size:11.5px;
  color:var(--muted);text-transform:uppercase;letter-spacing:.16em;line-height:1.5;
  font-style:normal}
.hero-art .polaroid{width:min(62vw,300px)}
/* docs/responsive.md: no hero image on mobile — headline and quick answer come first. */
@media(max-width:767px){.hero-art{display:none}}
.hero-art{position:relative}
/* The photograph sits inside the gate: the circle is centred between the posts and the
   kasagi runs behind it, the way the sun sits in a torii at Miyajima. The beams are hidden
   behind the circle in the middle and read at the edges, which is where the upturned tips
   are anyway. */
.hero-art .chip-mini{left:50%;transform:translateX(-50%);top:-3%;width:106%;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0) 96%);
  mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,0) 96%)}
.hero-art .polaroid{position:relative;z-index:2}
.hero-art svg{filter:drop-shadow(0 22px 44px rgba(36,18,32,.20))}
.polaroids{gap:30px}

/* ---------------------------------------------------------------- accents */
.ccard.yes .cv{background:var(--accent)}
.ccard.no .cv{background:var(--muted)}
.ccard.alt .cv{background:var(--gold-deep)}
.ncard.warn .nverdict{color:var(--gold-deep)}
.cta-band{background:var(--navy)}
.cta-band p{color:#E5D3E0}
.cta-band .btn{background:var(--gold);color:#2A1C28}
.cta-band .btn:hover{background:#fff;color:var(--navy)}
.cta-band h2 b{color:#F0AE8E}
details summary::after{color:var(--accent)}
header.site{border-bottom-color:var(--line)}
.inline-cta{border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:18px 0}
.inline-cta p{margin:0 0 12px}
.ic-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ================================================================ Japanese texture
   Four flourishes, each doing one job. docs/design-system.md allows one flourish per site
   and this site spends its budget here rather than on shadows, gradients or animation.
   None of them carry meaning, so none of them cost a reader who ignores them. */

/* ---- 1. Seigaiha (青海波), the overlapping-wave pattern, as the ground under the hero and
   the CTA band. Drawn as interlocking fans in one 40x20 tile, masked so it fades out before
   it reaches the text. Greece has a flat white ground, Asia a near-black one, Costa Rica and
   Vietnam plain washes, Italy a limewash bloom. This is the only patterned ground in the
   network. */
.hero{position:relative;overflow:hidden}
.hero>.wrap{position:relative;z-index:1}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='20'%20viewBox='0%200%2040%2020'%3E%3Cg%20fill='none'%20stroke='%235E2750'%20stroke-width='1'%3E%3Cpath%20d='M0%2020a20%2020%200%200%201%2040%200'/%3E%3Cpath%20d='M6%2020a14%2014%200%200%201%2028%200'/%3E%3Cpath%20d='M12%2020a8%208%200%200%201%2016%200'/%3E%3Cpath%20d='M-20%2020a20%2020%200%200%201%2040%200'/%3E%3Cpath%20d='M-14%2020a14%2014%200%200%201%2028%200'/%3E%3Cpath%20d='M-8%2020a8%208%200%200%201%2016%200'/%3E%3Cpath%20d='M20%2020a20%2020%200%200%201%2040%200'/%3E%3Cpath%20d='M26%2020a14%2014%200%200%201%2028%200'/%3E%3Cpath%20d='M32%2020a8%208%200%200%201%2016%200'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 28px;opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,0) 46%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,0) 46%)}
.cta-band{position:relative;overflow:hidden}
.cta-band>.wrap{position:relative;z-index:1}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='20'%20viewBox='0%200%2040%2020'%3E%3Cg%20fill='none'%20stroke='%23C2603E'%20stroke-width='1'%3E%3Cpath%20d='M0%2020a20%2020%200%200%201%2040%200'/%3E%3Cpath%20d='M6%2020a14%2014%200%200%201%2028%200'/%3E%3Cpath%20d='M12%2020a8%208%200%200%201%2016%200'/%3E%3Cpath%20d='M-20%2020a20%2020%200%200%201%2040%200'/%3E%3Cpath%20d='M-14%2020a14%2014%200%200%201%2028%200'/%3E%3Cpath%20d='M-8%2020a8%208%200%200%201%2016%200'/%3E%3Cpath%20d='M20%2020a20%2020%200%200%201%2040%200'/%3E%3Cpath%20d='M26%2020a14%2014%200%200%201%2028%200'/%3E%3Cpath%20d='M32%2020a8%208%200%200%201%2016%200'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 28px;opacity:.22;
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,0) 72%);
  mask-image:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,0) 72%)}

/* ---- 2. Hanko. The recommended card's tag stops being a pill and becomes a stamped
   vermilion seal, set slightly off-square the way a real hanko lands on paper. The site's
   whole argument is "these facts were checked on a date", so a seal is the one ornament
   that is actually about the content. */
.pcard.reco .tag{border-radius:2px;background:var(--gold);color:#fff;letter-spacing:.16em;
  padding:6px 11px;transform:rotate(-3.5deg);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--gold)}
.qa .tag,.result .tag{border-radius:2px;letter-spacing:.14em}

/* ---- 3. Corner brackets. Every eyebrow on the site sits inside 「」, the quotation marks
   Japanese typography uses where English uses quotes. Purely typographic, no color cost. */
.eyebrow::before{content:"「";margin-right:.05em;opacity:.62;letter-spacing:0}
.eyebrow::after{content:"」";margin-left:-.1em;opacity:.62;letter-spacing:0}

/* ---- 4. A vermilion square before every H2, the marker Japanese editorial layouts put at
   the head of a section. It also gives the page a strong left rhythm on mobile, where the
   uppercase headings are the only structure a scrolling reader gets. */
h2::before{content:"";display:inline-block;width:.3em;height:.3em;background:var(--gold);
  margin-right:.4em;vertical-align:.22em;flex:none}
.cta-band h2::before{background:var(--gold);opacity:.9}

/* ---- Japanese script set alongside Latin (carrier names in the network tables) sits at a
   slightly smaller size so the Latin line length still governs the column. */
.jp{font-size:.86em;color:var(--muted);letter-spacing:0;white-space:nowrap}
/* In a network card the Japanese name sits under the Latin one rather than beside it, so a
   long carrier name never pushes the heading to three lines. */
.ncard .nname .jp{display:block;font-size:.62em;font-weight:600;margin-top:2px;
  letter-spacing:.04em}

/* This site's menu labels are the longest in the network ("Docomo, KDDI or SoftBank?"), and
   the shared panel is 392px wide with nowrap items at 50% each, so the two columns collided.
   Widened here rather than in template/base.css, which would move every other site's menu. */
@media(min-width:701px){.navpanel{min-width:548px}
  /* base.css lays the panel out as inline-blocks at calc(50% - 2px), where the 2px is
     absorbing the whitespace between the anchors in the source. Widening that with a margin
     re-broke it: 50%-10+10 is exactly 50%, so the inter-element whitespace tipped every
     second item onto its own row and the panel went single-column with an empty half.
     Grid has no such arithmetic. The ::before that draws the panel background is absolutely
     positioned, so it stays out of flow and does not become a grid cell. */
  .navgroup:hover .navpanel,.navgroup:focus-within .navpanel,.navgroup.open .navpanel{
    display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:0}
  nav.top .navpanel a{width:auto;margin:0}}