/* Cross-page fade animation — Chrome/Edge 126+, graceful fallback elsewhere */
@view-transition { navigation: auto; }

/* ============================================================================
   白壁荘 SHIRAKABESO — SHARED DESIGN SYSTEM  ·  site.css
   Every page links this file. Page-unique layout lives in each page's <style>.

   TYPE — three distinct roles + JP:
     DISPLAY  Fraunces        headlines · cover title · ordinals   (opsz, 300..600, ital)
     TEXT     Newsreader      body & reading                        (200..500, ital)
     LABEL    Hanken Grotesk  eyebrows · nav · captions · specs     (400/500/600)
     JP       Shippori Mincho  html[lang="ja"] flips DISPLAY/TEXT/LABEL to this
   COLOUR — 5 brand tokens: plaster paper · sumi ink · moss · amber · stone.
   ============================================================================ */

:root{
  --plaster:#EAE3D5;   /* warm paper ground            */
  --sumi:#1B1916;      /* warm near-black ink          */
  --moss:#4E5747;      /* moss-cypress — accent        */
  --amber:#BE8A4E;     /* spring-amber — sparing accent */
  --stone:#908D84;     /* river-stone grey             */

  --paper-2:#E1D8C6;   /* a half-tone deeper paper for panels */
  --hair:rgba(144,141,132,.42);

  --frame:1200px;
  --pad:44px;
  --ease:cubic-bezier(.18,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-io:cubic-bezier(.4,0,.3,1);

  /* families as switchable tokens — JP view swaps the Latin faces for Mincho */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --text:"Newsreader",Georgia,serif;
  --label:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --jp:"Shippori Mincho",serif;
}
/* JP: Fraunces / Newsreader / Hanken carry no Japanese glyphs → become Mincho.
   Ordinal numerals are set in Fraunces explicitly (below) so they stay language-neutral. */
html[lang="ja"]{
  --display:"Shippori Mincho",serif;
  --text:"Shippori Mincho",serif;
  --label:"Shippori Mincho",serif;
  /* Japanese line-breaking: hold kinsoku strictly so small kana, the long vowel
     mark and closing brackets never start or end a line. Words stay whole. */
  line-break:strict;
  word-break:normal;
  overflow-wrap:normal;
}
html[lang="ja"] body,
html[lang="ja"] p,
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] li,
html[lang="ja"] dt,
html[lang="ja"] dd,
html[lang="ja"] figcaption,
html[lang="ja"] a,
html[lang="ja"] span{line-break:strict;word-break:normal}

/* One lexical unit — a whole word, with its hugging punctuation. site.js wraps
   these at runtime so the browser gets the word boundaries unspaced Japanese
   doesn't supply. Breaks stay legal between units; only the inside is sealed. */
.wb{white-space:nowrap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--plaster);
  color:var(--sumi);
  font-family:var(--text);
  font-optical-sizing:auto;
  font-size:19px;line-height:1.6;font-weight:400;letter-spacing:.004em;
  overflow-x:hidden;position:relative;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* ONE continuous washi ground for the whole page — a single fixed layer so the
   canvas never resets at a section boundary. Depth from soft corner washes. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(132% 78% at 6% 2%, rgba(144,141,132,.06), transparent 56%),
    radial-gradient(120% 92% at 96% 100%, rgba(78,87,71,.06), transparent 60%),
    radial-gradient(100% 100% at 50% 46%, transparent 60%, rgba(27,25,22,.05));}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* faint fractal grain, blended — kills the flat "AI render" look */
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ============ LAYOUT ============ */
.frame{max-width:var(--frame);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1}
.frame-narrow{max-width:820px}
main{position:relative;z-index:1}
.section{position:relative;z-index:1;overflow-x:clip}

/* ============ TYPE ROLES ====================================================
   Dramatic scale contrast is the headline fix: a 12px tracked LABEL sits next to
   a 100px+ DISPLAY. Body reads in Newsreader, never in the display face. */

/* LABEL — Hanken grotesque, wide-tracked, uppercase micro-type */
/* Label tier floor raised 2026-07-10: 10-12px read fine on large art screens but
   fell below legibility on ~1366px laptops (client feedback). The dramatic
   label-vs-display contrast survives — 13px against 128px is still 10x. */
.eyebrow{font-family:var(--label);font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.5;color:var(--amber)}
html[lang="ja"] .eyebrow{letter-spacing:.32em;text-transform:none;font-size:14px;font-weight:600}
.eyebrow.stone{color:var(--stone)}
.cap{font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone)}
html[lang="ja"] .cap{text-transform:none;letter-spacing:.08em}
.micro{font-family:var(--label);font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}

/* Line-break discipline: headings balance their lines (no orphaned last word or
   stranded period); running text avoids single-word last lines where supported. */
h1,h2,h3,.display,.display-xl,.display-sm,.pullquote{text-wrap:balance}
p{text-wrap:pretty}

/* DISPLAY — Fraunces, high-contrast, tight. Optical sizing on. */
.display{font-family:var(--display);font-optical-sizing:auto;font-weight:340;
  font-size:clamp(34px,5vw,68px);line-height:1.0;letter-spacing:-.018em}
.display-xl{font-family:var(--display);font-optical-sizing:auto;font-weight:320;
  font-size:clamp(48px,8vw,128px);line-height:.98;letter-spacing:-.022em}
.display-sm{font-family:var(--display);font-optical-sizing:auto;font-weight:380;
  font-size:clamp(26px,3vw,40px);line-height:1.06;letter-spacing:-.012em}
.display em,.pullquote em{font-style:italic}

/* JP display scale — Mincho renders ~10-16% optically taller than Fraunces at the
   same nominal size, and full-width glyphs carry more mass per character. Display
   roles are therefore set at roughly 71-76% of the Latin size so the JP view reads
   calm and proportionate rather than inheriting Latin drama literally. Body, lead,
   label, nav, caption and button sizes are deliberately NOT touched. */
html[lang="ja"] .display{font-size:clamp(27px,calc(14.5px + 2.6vw),48px)}

/* TEXT — Newsreader for reading */
.lead{font-family:var(--text);font-weight:380;font-size:clamp(20px,2.2vw,25px);
  line-height:1.52;letter-spacing:0;max-width:56ch}
.body{font-family:var(--text);font-weight:400;font-size:clamp(18px,1.4vw,20px);
  line-height:1.64;max-width:62ch}
.body+.body{margin-top:1.05em}
.body em{font-style:italic}

/* PULLQUOTE — large Fraunces italic; often right-aligned to break the left axis */
.pullquote{font-family:var(--display);font-optical-sizing:auto;font-style:italic;font-weight:340;
  font-size:clamp(26px,3.6vw,44px);line-height:1.22;letter-spacing:-.01em}
html[lang="ja"] .pullquote{font-style:normal;font-weight:600;line-height:1.5;
  font-size:clamp(22px,calc(12.5px + 2.1vw),34px)}

/* ORDINAL — huge Fraunces light chapter numerals (language-neutral → stays Fraunces) */
.ordinal{font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;font-weight:290;
  font-size:clamp(56px,9vw,128px);line-height:.86;letter-spacing:-.02em;
  color:var(--moss);font-variant-numeric:lining-nums;display:block}

.amber{color:var(--amber)}
.moss{color:var(--moss)}

/* alignment utilities — mixed alignment is the default here, not an exception */
.t-center{text-align:center}
.t-right{text-align:right}
.t-left{text-align:left}
.mx-auto{margin-left:auto;margin-right:auto}

/* FIGURE / CAPTION */
.figure{position:relative;margin:0}
.figure img{width:100%;object-fit:cover;filter:saturate(.9) brightness(.98) contrast(1.02)}
figcaption.cap{margin-top:12px}

/* CTA — letter-spaced Hanken link with an underline that grows on hover */
.cta{display:inline-block;font-family:var(--label);font-weight:600;font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sumi);
  padding-bottom:7px;position:relative}
html[lang="ja"] .cta{text-transform:none;letter-spacing:.12em}
.cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--amber);transform:scaleX(.32);transform-origin:left;
  transition:transform 1s var(--ease)}
.cta:hover::after,.cta:focus-visible::after{transform:scaleX(1)}
.cta.on-dark{color:var(--plaster)}

/* ============ COVER (generic full-viewport hero) ============
   Big Fraunces title; dissolves to var(--plaster) at the bottom so there is
   NO hard dark seam where the hero meets the paper page. */
.cover{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;color:var(--plaster)}
.cover-media{position:absolute;inset:0;z-index:0}
.cover-media img{width:100%;height:114%;object-fit:cover;object-position:center 42%;
  filter:saturate(.88) brightness(.9) contrast(1.03)}
.cover-media::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 42%, transparent 34%, rgba(15,14,11,.42) 100%),
  linear-gradient(180deg, rgba(15,14,11,.5), transparent 36%, transparent 52%,
    rgba(234,227,213,.42) 80%, var(--plaster) 100%)}
.scrollcue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.scrollcue .t{font-family:var(--label);font-weight:500;font-size:12px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(238,232,220,.92);
  text-shadow:0 1px 12px rgba(15,14,11,.5)}
html[lang="ja"] .scrollcue .t{text-transform:none;letter-spacing:.18em}
.scrollcue .l{width:1px;height:44px;background:linear-gradient(var(--amber),transparent)}

/* ============ TOPBAR + NAV (shared, identical markup on every page) ==========
   Transparent over the dark hero (plaster ink + white lockup); once scrolled past
   the hero JS adds .scrolled → a warm plaster scrim fades in with sumi ink. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:12;display:flex;
  justify-content:space-between;align-items:center;gap:18px;
  padding:18px clamp(20px,4vw,48px);color:var(--plaster);
  transition:color .45s var(--ease-out),background-color .45s var(--ease-out),
    box-shadow .45s var(--ease-out),backdrop-filter .45s var(--ease-out)}
.topbar.scrolled{color:var(--sumi);background-color:rgba(233,226,213,.9);
  -webkit-backdrop-filter:saturate(1.06) blur(10px);backdrop-filter:saturate(1.06) blur(10px);
  box-shadow:0 1px 0 rgba(27,25,22,.07),0 14px 34px -26px rgba(27,25,22,.5)}
.topbar .wm{position:relative;display:block;line-height:0}
.topbar .logo-img{height:56px;width:auto;display:block;transition:opacity .45s var(--ease-out)}
/* over the photo (unscrolled): lift white ink off bright skies */
.topbar .logo-white{filter:drop-shadow(0 2px 12px rgba(15,14,11,.55))}
.topbar:not(.scrolled) .nav-inline a,
.topbar:not(.scrolled) .lang-toggle{text-shadow:0 1px 10px rgba(15,14,11,.45)}
.topbar .logo-sumi{position:absolute;inset:0;opacity:0}
.topbar.scrolled .logo-white{opacity:0}
.topbar.scrolled .logo-sumi{opacity:1}
/* no-JS fallback: give the bar a permanent scrim + sumi mark so nav never sits plaster-on-plaster */
.no-js .topbar{color:var(--sumi);background-color:rgba(233,226,213,.9);
  -webkit-backdrop-filter:saturate(1.06) blur(10px);backdrop-filter:saturate(1.06) blur(10px);
  box-shadow:0 1px 0 rgba(27,25,22,.07)}
.no-js .topbar .logo-white{opacity:0}
.no-js .topbar .logo-sumi{opacity:1}

.topbar-end{display:flex;align-items:center;gap:clamp(16px,2.2vw,30px)}
.nav-inline{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.nav-inline a{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;opacity:.95;position:relative;padding:4px 0}
.nav-inline a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.7;transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.nav-inline a:hover::after,.nav-inline a:focus-visible::after{transform:scaleX(1)}
/* current page marker */
.nav-inline a[aria-current="page"]{opacity:1}
.nav-inline a[aria-current="page"]::after{transform:scaleX(1);background:var(--amber);opacity:1}
html[lang="ja"] .nav-inline a{text-transform:none;letter-spacing:.16em;font-size:14px}

.lang-toggle{display:flex;align-items:center;gap:7px;font-family:var(--label);font-size:12.5px;letter-spacing:.14em}
.lang-btn{background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:uppercase;cursor:pointer;opacity:.65;padding:5px 1px;
  position:relative;transition:opacity .3s var(--ease-out)}
.lang-btn::after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;
  background:var(--amber);transform:scaleX(0);transform-origin:center;
  transition:transform .35s var(--ease)}
.lang-btn.is-active{opacity:1;font-weight:600}
.lang-btn.is-active::after{transform:scaleX(1)}
.lang-btn:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.lang-div{opacity:.4}
html[lang="ja"] .lang-btn{text-transform:none}
.no-js .lang-toggle{display:none}

.burger{display:none;background:none;border:0;cursor:pointer;width:28px;height:22px;position:relative;padding:0;color:inherit}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor;top:50%;
  transform-origin:center;
  transition:transform .42s var(--ease),opacity .28s var(--ease-out)}
.burger span:nth-child(1){transform:translateY(-7px)}
.burger span:nth-child(2){transform:translateY(0)}
.burger span:nth-child(3){transform:translateY(7px)}
.burger:focus-visible{outline:1px solid currentColor;outline-offset:4px}
html.nav-open .burger span:nth-child(1){transform:rotate(45deg)}
html.nav-open .burger span:nth-child(2){opacity:0;transform:scaleX(0)}
html.nav-open .burger span:nth-child(3){transform:rotate(-45deg)}

/* drawer (mobile) */
.nav-backdrop{position:fixed;inset:0;z-index:18;background:rgba(15,14,11,.55);opacity:0;
  pointer-events:none;transition:opacity .45s var(--ease-out)}
html.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;z-index:20;height:100dvh;width:min(86vw,360px);
  transform:translateX(100%);visibility:hidden;
  transition:transform .5s var(--ease),visibility 0s .5s;color:var(--plaster);overflow-y:auto;
  background:radial-gradient(80% 50% at 82% 12%, rgba(190,138,78,.12), transparent 60%),
    linear-gradient(160deg,#20211C 0%, var(--sumi) 60%, #16140F 100%);
  padding:84px 34px 44px;box-shadow:-34px 0 70px rgba(15,14,11,.45)}
html.nav-open .drawer{transform:none;visibility:visible;transition:transform .5s var(--ease)}
.drawer-close{position:absolute;top:22px;right:24px;z-index:3;background:none;border:0;
  color:var(--plaster);font-size:22px;line-height:1;cursor:pointer;font-family:var(--label);width:40px;height:40px}
.drawer-close:focus-visible{outline:1px solid var(--plaster);outline-offset:3px}
.drawer-nav{display:flex;flex-direction:column;margin-top:6px}
.drawer-nav a{font-family:var(--display);font-optical-sizing:auto;font-weight:360;font-size:26px;
  line-height:1.4;letter-spacing:0;padding:11px 0;border-bottom:1px solid rgba(234,227,213,.1)}
.drawer-nav a:last-child{border-bottom:0}
.drawer-nav a[aria-current="page"]{color:var(--amber)}
/* drawer link stagger entrance */
.js .drawer-nav a{opacity:0;transform:translateX(14px);
  transition:opacity .38s var(--ease-out),transform .38s var(--ease-out)}
html.nav-open .drawer-nav a{opacity:1;transform:none}
html.nav-open .drawer-nav a:nth-child(2){transition-delay:.06s}
html.nav-open .drawer-nav a:nth-child(3){transition-delay:.12s}
html.nav-open .drawer-nav a:nth-child(4){transition-delay:.18s}
html.nav-open .drawer-nav a:nth-child(5){transition-delay:.23s}
html.nav-open .drawer-nav a:nth-child(6){transition-delay:.28s}
.no-js .burger,.no-js .drawer,.no-js .nav-backdrop{display:none}

/* ============ FOOTER (shared, identical markup on every page) ============ */
.site-foot{background:var(--sumi);color:var(--plaster);padding:82px 0 60px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr auto;gap:44px 56px;align-items:start}
.foot-logo{height:88px;width:auto;display:block;margin-bottom:18px}
.foot-since{font-family:var(--label);font-weight:500;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(234,227,213,.6);line-height:1.9}
html[lang="ja"] .foot-since{text-transform:none;letter-spacing:.06em}
.foot-addr{font-family:var(--text);font-style:normal;font-size:15px;line-height:1.9;
  color:rgba(234,227,213,.78)}
.foot-addr a{color:var(--amber);border-bottom:1px solid rgba(190,138,78,.45);padding-bottom:1px}
.foot-nav{display:flex;flex-direction:column;gap:9px}
.foot-nav a{font-family:var(--label);font-weight:500;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(234,227,213,.72)}
.foot-nav a:hover{color:var(--plaster)}
html[lang="ja"] .foot-nav a{text-transform:none;letter-spacing:.1em;font-size:14px}
.foot-cta-wrap{grid-column:1/-1;margin-top:16px;padding-top:26px;
  border-top:1px solid rgba(234,227,213,.12);display:flex;justify-content:flex-end}
.cta.cta-foot{color:var(--plaster)}
.cta.cta-foot::after{transform:scaleX(1);opacity:.6}
.cta.cta-foot:hover::after{opacity:1}

/* ============ MOTION ============ */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.m-hover{transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .m-hover:hover{transform:scale(1.012);filter:saturate(.96) brightness(1.02)}
}
/* language crossfade — swap fades and lifts content out/in, chrome stays put */
.js #page{transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.js #page.lang-fade{opacity:0;transform:translateY(5px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .m-hover:hover{transform:none}
  .js #page{transition:none}.js #page.lang-fade{opacity:1;transform:none}
  .burger span{transition:none}
  .lang-btn,.lang-btn::after{transition:none}
  .js .drawer-nav a{opacity:1!important;transform:none!important;transition:none!important}
  .drawer{transition:transform 0s,visibility 0s}
  .nav-backdrop,.topbar{transition:none}
}

/* ============ RESPONSIVE (shared chrome) ============ */
@media (max-width:880px){
  .nav-inline{display:none}
  .js .burger{display:block}
  .no-js .nav-inline{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px;max-width:64vw}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 40px}
  .foot-cta-wrap{justify-content:flex-start}
}
@media (max-width:560px){
  :root{--pad:24px}
  body{font-size:18px}
  .topbar{padding:14px 20px}
  .topbar .logo-img{height:46px}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .drawer-nav a{font-size:23px;padding:10px 0}
  .site-foot{padding:64px 0 52px}
}