/* ============================================================
   ONE OF ONE INTERVIEWS — ARTICLE HOUSE STYLE
   The calm interior. Loud cover lives on the homepage; in here
   the job is readability and credibility.
   One stylesheet for every article page. Do not add per-article
   CSS — add a rule here so all articles stay identical.
   ============================================================ */

:root{
  --paper:#FAF8F3;
  --paper-2:#F1EDE3;
  --ink:#0B0B0B;
  --body-ink:#26241F;
  --muted:#6E6A62;
  --rule:#D9D3C4;
  --white:#FFFFFF;
  --yellow:#FCEE04;
  --cyan:#00FCFE;
  --green:#03FC02;
  --magenta:#FD05FD;
  --red:#FB0100;
  --blue:#004EFC;
  --display:'Fraunces',Georgia,serif;
  --body:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  /* the single reading column every article shares */
  --colw:760px;
  --colpad:clamp(16px,4vw,28px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--body-ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--yellow);color:var(--ink)}
img{max-width:100%;height:auto;display:block}
/* long handles and URLs must never push the page sideways on a phone */
p,li,td,figcaption,h1,h2,h3,blockquote{overflow-wrap:break-word}
a{overflow-wrap:anywhere}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--rule)}
a:hover{text-decoration-color:var(--red);color:var(--red)}
a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.display{font-family:var(--display);font-weight:900;font-variation-settings:'SOFT' 0,'WONK' 1;text-transform:uppercase;letter-spacing:-.02em;line-height:.94}

/* Some articles carry .reveal markup from their old designs. Article text must
   NEVER depend on JavaScript to become visible, so .reveal is always visible
   here — no opacity:0 default. Scroll animation belongs on the cover, not in
   the reading experience. */
.reveal,.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------------- masthead ---------------- */
.topbar,.topnav,.nav{background:var(--ink);color:var(--paper);position:sticky;top:0;z-index:100}
.topbar a,.topnav a,.nav a{color:var(--paper);text-decoration:none}
.nav-inner,.footer-inner,.topbar>div,.topnav>div{max-width:1180px;margin:0 auto}
.topbar,.topnav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:0 clamp(14px,3vw,34px);min-height:70px;max-width:none}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px;padding:0 clamp(14px,3vw,34px)}
.brand,.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:17px;letter-spacing:.01em;color:var(--paper);text-decoration:none}
.brand img,.logo img{height:46px;width:auto}
.brand span,.logo span{color:var(--yellow)}
.brand-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--yellow);color:var(--yellow);font-size:11px;font-family:var(--mono)}
.nav-links,.topbar nav,.topnav nav,.links{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center}
.topbar nav a,.topnav nav a,.nav-links a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#B4AFA4;text-decoration:none}
.topbar nav a:hover,.topnav nav a:hover,.nav-links a:hover{color:var(--yellow)}
.nav-links a.active,.topbar nav a.active{color:var(--yellow)}
.btn-nav,.topbar .btn,.topnav .btn{background:var(--yellow);color:var(--ink)!important;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:9px 15px;border:2px solid var(--yellow);text-decoration:none}
.btn-nav:hover{background:var(--paper);border-color:var(--paper)}

/* the seven broadcast bars under the masthead */
.bars,.bar{display:flex;height:8px;position:sticky;top:70px;z-index:99}
.bars i,.bar i{flex:1}
.bars:not(:has(i)),.bar:not(:has(i)){
  background:linear-gradient(90deg,#FFF 0 14.28%,var(--yellow) 14.28% 28.56%,var(--cyan) 28.56% 42.84%,
  var(--green) 42.84% 57.12%,var(--magenta) 57.12% 71.4%,var(--red) 71.4% 85.68%,var(--blue) 85.68% 100%);
}

/* ---------------- page shell ---------------- */
.wrap,.article-wrap,.content,.article,.narrow,.cover-wrap{
  max-width:var(--colw);margin:0 auto;padding-left:var(--colpad);padding-right:var(--colpad);
}

/* Some articles nest one column container inside another, which padded the text
   twice and made the measure narrower than its siblings. Inner containers keep
   the column set by the outer one. */
.wrap .wrap,.wrap .content,.wrap .article,.wrap .article-wrap,.wrap .narrow,
.article-wrap .content,.article-wrap .wrap,.article-wrap .narrow,
.content .wrap,.content .article,.content .narrow,
.article .wrap,.article .content,.article .narrow{
  max-width:none;padding-left:0;padding-right:0;
}

/* Several articles hang content straight off <body> with no wrapper element
   (rebirth uses a bare <article>, allocation a bare <main>). Without this they
   run edge to edge. */
body > article,
body > main:not([class]),
body > section:not([class]),
body > figure{
  max-width:var(--colw);margin-left:auto;margin-right:auto;
  padding-left:var(--colpad);padding-right:var(--colpad);
}
/* standalone components sitting on <body> align to the text measure, not the
   outer column, so their borders line up with the copy above and below */
body > .cert,body > .slab,body > .stamp,body > .tab,body > .folder,body > .outlet,
body > .receipts,body > .share,body > .tags,body > .outro,body > .close,body > .byline{
  max-width:calc(var(--colw) - 2 * var(--colpad));margin-left:auto;margin-right:auto;
}
.article-wrap,.wrap{padding-bottom:clamp(48px,7vw,84px)}
.art-head{padding-top:clamp(30px,4vw,52px)}
.art-head-bg{display:none}

/* ---------------- article header ---------------- */
/* NOTE: .folder is deliberately NOT in this list — on the Japan piece it is a
   container wrapping the whole article, and meta typography cascaded into the
   body copy (10.5px mono). Only put genuinely small strips here. */
.slab,.cert,.stamp,.tab,.outlet{
  display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  margin:clamp(26px,4vw,40px) 0 clamp(18px,2.5vw,26px);
  background:var(--paper-2);border:2px solid var(--ink);border-top:5px solid var(--ink);
  padding:9px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.slab strong,.cert strong,.stamp strong{color:var(--ink);font-weight:500}
.cert-inner{display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;width:100%}
.grade,.serial,.sn{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.kicker,.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:14px;display:block;font-weight:500;
}
.kicker strong,.eyebrow strong{font-weight:600}

h1{
  font-family:var(--display);font-weight:900;font-variation-settings:'SOFT' 0,'WONK' 1;
  font-size:clamp(34px,5.6vw,60px);line-height:1;letter-spacing:-.022em;
  text-transform:uppercase;color:var(--ink);margin-bottom:18px;text-wrap:balance;
}

.byline,.lead-date,.date-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding-bottom:16px;border-bottom:3px solid var(--ink);margin-bottom:26px;
}
.byline b,.byline strong{color:var(--ink);font-weight:600}

.dek,.sub,.lede{
  font-family:var(--body);font-size:clamp(19px,2.1vw,23px);font-weight:500;line-height:1.5;
  color:var(--ink);margin-bottom:26px;
}
.preface{
  font-style:italic;color:#3c3a34;border-left:5px solid var(--red);
  padding:2px 0 2px 18px;margin-bottom:28px;
}

/* ---------------- body copy ---------------- */

/* .folder wraps the whole Japan article — a panel, not a label */
.folder{border:3px solid var(--ink);background:var(--paper);padding:clamp(16px,2.6vw,26px);margin:1.4em 0}

/* Safety net: reading text always resets to the body font, whatever container
   it sits inside. Stops any meta-strip styling from cascading into copy. */
article,.content,.article{
  font-family:var(--body);font-size:19px;line-height:1.72;
  letter-spacing:normal;text-transform:none;color:var(--body-ink);
}
article p,.content p,.article p{font-family:var(--body);font-size:19px;line-height:1.72}

article p,.content p,.article p{margin-bottom:1.15em;max-width:68ch}
article h2,.content h2,.article h2{
  font-family:var(--display);font-weight:900;font-variation-settings:'WONK' 1;
  font-size:clamp(24px,3.4vw,36px);line-height:1.06;letter-spacing:-.015em;text-transform:uppercase;
  color:var(--ink);margin:2.2em 0 .6em;padding-top:.5em;border-top:3px solid var(--ink);
}
article h3,.content h3,.article h3{
  font-family:var(--display);font-weight:900;font-variation-settings:'WONK' 1;
  font-size:clamp(19px,2.3vw,25px);line-height:1.1;text-transform:uppercase;
  color:var(--ink);margin:1.8em 0 .5em;
}
article ul,article ol,.content ul,.content ol{margin:0 0 1.3em 1.2em;max-width:66ch}
article li,.content li{margin-bottom:.5em}
strong,b{font-weight:600;color:var(--ink)}
em,i{font-style:italic}
hr,.divider{border:none;border-top:3px solid var(--ink);margin:2.4em 0}

/* ---------------- emphasis devices ---------------- */
.standout,.punch,.pull,.pullquote,.slabquote,.shoutout{
  font-family:var(--display);font-weight:900;font-variation-settings:'WONK' 1;
  font-size:clamp(21px,2.9vw,30px);line-height:1.16;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--ink);
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  padding:.7em 0;margin:1.8em 0;max-width:none;
}
.standout em,.punch em,.pull em{color:var(--red);font-style:normal}

.callout,.note,.allegedly{
  background:var(--yellow);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  padding:16px 20px;margin:1.9em 0;font-size:17.5px;line-height:1.5;color:var(--ink);
}
.callout p,.note p,.allegedly p{margin-bottom:.6em;max-width:none}
.callout p:last-child,.note p:last-child,.allegedly p:last-child{margin-bottom:0}
.gold,.inline{background:var(--yellow);padding:0 4px;font-weight:600;color:var(--ink)}

.correction,.disclaimer,.fineprint,.footer-note{
  font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.02em;
  color:var(--muted);border:2px dashed var(--rule);padding:14px 16px;margin:2em 0 0;
}

/* ---------------- figures ---------------- */
figure,.slot,.figure-sm,.hero-figure{margin:2em 0}
figure img,.slot img,.figure-sm img,.hero-figure img{width:100%;border:3px solid var(--ink)}
figcaption,.hero-caption{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  margin-top:9px;line-height:1.5;
}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:2em 0}
.gallery img{border:3px solid var(--ink)}

/* ---------------- data structures ---------------- */
.receipts,.sources{
  background:var(--paper-2);border:3px solid var(--ink);
  padding:22px 24px;margin:2.6em 0 0;
}
.receipts h2,.sources h2{margin-top:0;border-top:none;padding-top:0;font-size:clamp(20px,2.6vw,26px)}
.receipts ol,.receipts ul,.sources ol,.sources ul{margin-bottom:0;padding-left:1.2em}
.receipts li,.sources li{font-size:16px;margin-bottom:.5em}
.receipts .disclaimer,.sources .disclaimer{border:none;padding:12px 0 0;margin:14px 0 0;border-top:2px solid var(--rule)}

/* card grid (30th) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:2em 0}
.card{border:3px solid var(--ink);background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.card.flagship{border-width:5px}
.card img{width:100%;border:none;border-bottom:3px solid var(--ink)}
.card-body{padding:14px 16px}
.card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:7px;flex-wrap:wrap}
.card-name{font-family:var(--display);font-weight:900;font-variation-settings:'WONK' 1;text-transform:uppercase;font-size:16.5px;line-height:1.06}
.price-pill{font-family:var(--mono);font-size:11px;background:var(--ink);color:var(--yellow);padding:3px 8px;white-space:nowrap}
.card-desc,.desc{font-size:15px;line-height:1.55;color:#3c3a34}

/* versus columns (allocation) */
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:2em 0}
.col{border:3px solid var(--ink);padding:18px 20px;background:var(--paper)}
.col h3{margin-top:0;font-size:19px}
.col ul{margin:.6em 0 0 1.1em}
.col li{font-size:15.5px}
.col.fair{background:var(--paper-2);border-top:7px solid var(--blue)}
.col.rest{border-top:7px solid var(--red)}

/* ladder (overprinting) */
.ladder{border:3px solid var(--ink);background:var(--paper-2);padding:20px 22px;margin:2em 0}
.ladder-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.ladder ul{list-style:none;columns:2;column-gap:26px;margin:0}
.ladder li{font-size:15px;padding:2px 0;font-variant-numeric:tabular-nums;color:var(--body-ink)}
.ladder-total{margin-top:14px;padding-top:12px;border-top:3px solid var(--ink);font-family:var(--display);font-weight:900;font-variation-settings:'WONK' 1;font-size:clamp(19px,2.6vw,25px);text-transform:uppercase;color:var(--ink)}
@media(max-width:520px){.ladder ul{columns:1}}

/* slab rows */
.slab-row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:9px 0;border-bottom:2px solid var(--rule)}
.slab-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.slab-num{font-family:var(--display);font-weight:900;font-size:20px}
.slab-body,.slab-desc{font-size:15.5px;color:#3c3a34}
.dot{color:var(--rule)}

/* ---------------- tags, share, outro ---------------- */
.tags,.hashtags{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--muted);margin:2.4em 0 1.1em;text-transform:uppercase}
.tag{display:inline-block;border:2px solid var(--ink);padding:3px 8px;margin:0 5px 5px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

.share,.share-row{display:flex;gap:10px;flex-wrap:wrap;margin:1.4em 0 2.4em}
.share a,.share-row a,.btn,.watch,.backlink{
  display:inline-block;background:var(--ink);color:var(--paper)!important;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 18px;border:3px solid var(--ink);text-decoration:none;
  box-shadow:5px 5px 0 var(--red);transition:transform .1s,box-shadow .1s;
}
.share a:hover,.share-row a:hover,.btn:hover,.watch:hover,.backlink:hover{
  transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--red);color:var(--paper)!important;
}
.backlink{background:var(--paper);color:var(--ink)!important;box-shadow:5px 5px 0 var(--ink);margin-bottom:1.6em}
.backlink:hover{color:var(--ink)!important;box-shadow:7px 7px 0 var(--ink)}

.outro,.close,.cta-note{
  border-top:4px solid var(--ink);padding-top:20px;margin-top:2.4em;
  font-size:16.5px;color:#3c3a34;
}
.socials{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:14px}
.socials a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.socials a:hover{color:var(--red)}

/* ---------------- footer ---------------- */
footer{background:var(--ink);color:#8D887E;padding:28px 0;margin-top:clamp(36px,5vw,60px)}
footer a{color:#B4AFA4;text-decoration:none}
footer a:hover{color:var(--yellow)}
.footer-inner,.foot{
  max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,34px);
  display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
}
.foot-social{display:flex;gap:8px 20px;flex-wrap:wrap}
.foot-social a,.foot-line,.copyright{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.foot-line,.copyright{color:#8D887E}