/* ============================================================
   BLACK JAPAN — studio surface (site/)
   Kuro & Kin canon from design-system/tokens.css.
   Two additions below; every other value is the design system's.
   ============================================================ */
:root{
  /* --paper-faint #6b675e measures 3.51:1 on --kuro-1 — below AA
     for the 10-15px labels, nav and meta this surface uses it for.
     Lifted for text; the canon token is untouched for other uses. */
  --paper-faint-aa:#8a857a;              /* 5.05:1 on --kuro-1 */

  /* the dim half of the paired philosophy lines needs to be READ,
     so it cannot use --paper-ghost (1.80:1, decorative only).    */
  --paper-mid:#66625a;                   /* 3.06:1 at 38-44px    */
  color-scheme:dark;
}
/* ============================================================
   BLACK JAPAN — studio surface (site/)
   Loads design-system/tokens.css first; the block below is the
   ONLY place this surface deviates, and says why for each one.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--kuro-1);overflow-x:clip}
body{background:var(--kuro-1);color:var(--paper);font-family:var(--serif);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--kin);color:var(--kuro-0)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--kin);outline-offset:4px}
.jp{font-family:var(--jp)}
.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,66px)}
.mid{max-width:820px}

/* ── top ── */
.topbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--kuro-1) 88%,transparent);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s,background .25s}
@supports not (backdrop-filter:blur(2px)){.topbar{background:var(--kuro-1)}}
.topbar.stuck{border-bottom-color:var(--kuro-line);background:color-mix(in srgb,var(--kuro-1) 96%,transparent)}
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:20px 0;transition:padding .25s}
.topbar.stuck .top{padding:13px 0}
.wm{display:inline-flex;align-items:center;gap:13px;font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;color:var(--paper-dim);transition:color .2s}
.wm:hover{color:var(--paper)}
.mk{width:34px;height:23px}
.tn{display:flex;flex-wrap:wrap;gap:10px 20px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.tn a{color:var(--paper-faint-aa);transition:color .2s}
.tn a:hover{color:var(--kin)}

/* ── 01 hero ── */
.hero{position:relative;overflow:hidden;min-height:88vh;display:flex;align-items:center;padding:clamp(60px,10vh,120px) 0}
.hk{position:absolute;top:50%;right:clamp(-16px,0vw,20px);transform:translateY(-50%);display:flex;flex-direction:column;gap:.06em;font-family:var(--jp);font-weight:600;font-size:clamp(96px,16vw,230px);line-height:.93;color:var(--paper);opacity:.03;user-select:none;pointer-events:none}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--kin);margin-bottom:clamp(26px,4vh,44px)}
h1{font-size:clamp(40px,8.6vw,126px);font-weight:200;line-height:1;letter-spacing:-.032em;max-width:11em;text-wrap:balance}
h1 em{font-style:italic;font-weight:200;color:var(--kin)}
.hlede{margin-top:clamp(30px,4.5vh,50px);max-width:37em}
.hlede p{color:var(--paper-dim);font-size:clamp(15.5px,1.45vw,18px);line-height:1.68;margin-bottom:11px}
.hlede p:last-child{margin-bottom:0}
.htri{margin-top:clamp(32px,4.5vh,52px);font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--paper-faint-aa)}
.htri b{color:var(--kin);font-weight:400}
.cue{margin-top:clamp(34px,5vh,60px);font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-ghost);display:inline-flex;align-items:center;gap:10px}
.cue .ln{width:34px;height:1px;background:var(--paper-ghost);display:inline-block}

@media(max-width:760px){.hk{display:none}}
.hr{border-top:1px solid var(--kuro-line)}

/* ── section frame ── */
section.blk{padding:clamp(76px,13vh,150px) 0;position:relative}
.bm{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(26px,4vh,44px);font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;color:var(--kin-dim);text-transform:uppercase}
.bm .kj{font-family:var(--jp);font-size:15px;letter-spacing:0;color:var(--kin);opacity:.85}
h2{font-size:clamp(29px,4.8vw,66px);font-weight:200;line-height:1.06;letter-spacing:-.024em;text-wrap:balance;max-width:16em}
h2 em{font-style:italic;color:var(--kin)}
.body{margin-top:clamp(24px,3.4vh,40px);max-width:37em}
.body p{color:var(--paper-dim);font-size:16px;line-height:1.72;margin-bottom:15px}
.body p:last-child{margin-bottom:0}
.body p b{color:var(--paper);font-weight:400}
.body p em{font-style:italic;color:var(--paper)}

/* stacked declaratives */
.stack{margin:clamp(24px,3.4vh,38px) 0;display:flex;flex-direction:column;gap:2px}
.stack span{font-size:clamp(25px,3.7vw,44px);font-weight:200;line-height:1.18;letter-spacing:-.02em;color:var(--paper)}
.stack span.dim{color:var(--paper-mid)}

/* ── boxed notation ── */
.boxed{
  margin:clamp(26px,4vh,44px) 0;border:1px solid var(--kuro-rule);
  padding:clamp(20px,3vw,34px) clamp(16px,3vw,32px);
  display:flex;justify-content:center;overflow-x:auto;background:var(--kuro-2);
}
.boxed .expr .ar{color:var(--paper-faint-aa)}
.boxed .expr{
  font-family:var(--mono);font-size:clamp(11px,1.35vw,16px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper);white-space:nowrap;display:flex;
  align-items:center;gap:clamp(8px,1.4vw,18px);
}
.boxed .expr i{color:var(--kin);font-style:normal;font-weight:500}
.boxed.tall .expr{font-size:clamp(13px,1.9vw,24px);letter-spacing:.1em}
.eqcap{
  text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper-ghost);margin-top:-28px;margin-bottom:40px;
}

/* ── layers (vertical flow) ── */
.layers{margin-top:clamp(30px,4.5vh,54px);border-top:1px solid var(--kuro-rule)}
.ly{
  display:grid;grid-template-columns:150px 1fr;gap:clamp(22px,4vw,54px);
  padding:clamp(38px,5.5vh,62px) 0;border-bottom:1px solid var(--kuro-line);
}
@media(max-width:760px){.ly{grid-template-columns:1fr;gap:16px}}
.ly-n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--kin);text-transform:uppercase}
.ly-jp{font-family:var(--jp);font-size:clamp(34px,4vw,56px);color:var(--paper-mid);line-height:1;margin-top:14px;display:block}
@media(max-width:760px){.ly-jp{font-size:26px;margin-top:8px}}
.ly h3{font-size:clamp(24px,3.3vw,40px);font-weight:200;letter-spacing:-.018em;line-height:1.12;color:var(--paper)}
.ly .lines{margin-top:18px;display:flex;flex-direction:column;gap:5px}
.ly .lines span{color:var(--paper-dim);font-size:15.5px;line-height:1.5}
.ly p{margin-top:16px;color:var(--paper-dim);font-size:15.5px;line-height:1.68;max-width:38em}
.ly p b{color:var(--paper);font-weight:400}
.ly .go{display:inline-block;margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--kin)}
.ly .go .a{display:inline-block;transition:transform .2s}
.ly .go:hover .a{transform:translateX(5px)}

/* ── centrepiece ── */
.centre{background:var(--kuro-0);padding:clamp(84px,15vh,180px) 0;text-align:center}
.centre .big{
  font-size:clamp(29px,7.4vw,104px);font-weight:200;line-height:1.06;letter-spacing:-.035em;
  color:var(--paper);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 clamp(12px,2.4vw,34px);
}
.centre .big i{font-style:normal;color:var(--kin)}
.centre .big .grp{display:inline-flex;align-items:center;gap:clamp(12px,2.4vw,34px);white-space:nowrap}
.centre .big .ar{color:var(--paper-mid);font-weight:200}
.centre .note{margin:clamp(34px,5vh,58px) auto 0;max-width:38em;text-align:left}
.centre .note p{color:var(--paper-dim);font-size:15.5px;line-height:1.75;margin-bottom:9px}
.centre .note p:last-child{margin-bottom:0;color:var(--paper)}

/* ── essays ── */
.ess{border-top:1px solid var(--kuro-rule);margin-top:clamp(24px,3.4vh,38px)}
.es{display:grid;grid-template-columns:110px 1fr 26px;gap:26px;align-items:baseline;padding:28px 2px;border-bottom:1px solid var(--kuro-line);transition:background .22s,padding-left .22s}
.es:hover{background:var(--kuro-2);padding-left:12px}
.em{font-family:var(--mono);font-size:10px;letter-spacing:.15em;color:var(--paper-faint-aa);white-space:nowrap;text-transform:uppercase}
.et{display:block;font-size:clamp(20px,2.3vw,28px);font-weight:300;line-height:1.18;letter-spacing:-.014em;transition:color .22s}
.es:hover .et{color:var(--kin)}
.el{display:block;margin-top:9px;font-size:15px;color:var(--paper-dim);max-width:46em;line-height:1.56}
.ea{color:var(--paper-faint-aa);transition:color .22s,transform .22s;font-size:15px}
.es:hover .ea{color:var(--kin);transform:translateX(4px)}
.cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-dim);border:1px solid var(--kuro-rule);padding:13px 26px;transition:all .2s}
.btn:hover{color:var(--paper);border-color:var(--paper-faint-aa)}
.btn.gold{color:var(--kin);border-color:var(--kin-dim)}
.btn.gold:hover{background:var(--kin-soft);border-color:var(--kin)}

/* ── energy stack ── */
.estack{margin:clamp(26px,4vh,42px) 0;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--kuro-line);max-width:26em}
.estack div{
  display:flex;align-items:baseline;gap:14px;padding:12px 2px;border-bottom:1px solid var(--kuro-line);
  font-family:var(--mono);font-size:clamp(12px,1.3vw,15px);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-dim);
}
.estack div .ar{color:var(--paper-faint-aa)}
.estack div b{color:var(--kin);font-weight:500}

/* ── philosophy pairs ── */
.pairs{margin-top:clamp(30px,4.5vh,50px);display:flex;flex-direction:column;gap:0;border-top:1px solid var(--kuro-rule)}
.pr{
  display:flex;align-items:baseline;gap:clamp(12px,2.6vw,34px);padding:clamp(16px,2.4vh,26px) 2px;
  border-bottom:1px solid var(--kuro-line);font-size:clamp(19px,2.8vw,38px);font-weight:200;letter-spacing:-.016em;
}
.pr .a{color:var(--paper-mid);flex:0 0 auto}
.pr .ar{color:var(--kin-dim);font-family:var(--mono);font-size:.55em;letter-spacing:0}
.pr .b{color:var(--paper)}

/* ── generalisation table ── */
.gtbl{margin-top:clamp(26px,4vh,42px);overflow-x:auto;border:1px solid var(--kuro-line)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint-aa);text-align:left;padding:14px 16px;border-bottom:1px solid var(--kuro-rule);background:var(--kuro-2);font-weight:500}
td{padding:15px 16px;border-bottom:1px solid var(--kuro-line);color:var(--paper-dim);vertical-align:top}
tr:last-child td{border-bottom:none}
td.sys{color:var(--kin);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
@media(max-width:700px){
  .gtbl{border:none;overflow-x:visible}
  table{min-width:0;display:block}
  thead{display:none}
  tbody,tr,td{display:block;width:100%}
  tr{border:1px solid var(--kuro-line);margin-bottom:10px;padding:4px 0}
  td{border-bottom:none;padding:8px 15px}
  td.sys{padding-top:14px;font-size:13px}
  td:not(.sys):before{content:attr(data-l);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper-faint-aa);margin-bottom:5px}
}
@media(max-width:700px){
  .boxed{overflow-x:visible;padding:22px 16px}
  .boxed .expr{white-space:normal;flex-wrap:wrap;justify-content:center;gap:6px 10px;font-size:12px;line-height:1.9}
  .boxed.tall .expr{font-size:19px}
  .centre .big{gap:0 14px}
}
.gclose{margin-top:clamp(26px,4vh,42px);font-size:clamp(20px,2.9vw,34px);font-weight:200;line-height:1.3;letter-spacing:-.016em;max-width:22em;color:var(--paper)}
.gclose em{font-style:italic;color:var(--kin)}

/* ── final ── */
.final{background:var(--kuro-0);padding:clamp(90px,16vh,200px) 0 clamp(46px,7vh,84px)}
.fm{width:min(268px,66vw);height:auto;display:block;margin-bottom:clamp(38px,5.5vh,58px)}
.fl{font-size:clamp(38px,9vw,118px);font-weight:200;line-height:1;letter-spacing:-.034em;color:var(--paper)}
.fl em{font-style:italic;color:var(--kin)}
.fs{margin-top:clamp(32px,4.5vh,50px);max-width:34em;color:var(--paper-dim);font-size:16.5px;line-height:1.7}
.fmail{display:inline-block;margin-top:36px;font-family:var(--mono);font-size:14px;color:var(--kin);border-bottom:1px solid var(--kin-dim);padding-bottom:3px}
.fmail:hover{border-bottom-color:var(--kin)}
.meta{margin-top:clamp(56px,8vh,92px);padding-top:24px;border-top:1px solid var(--kuro-line);display:flex;flex-wrap:wrap;gap:12px 36px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:lowercase;color:var(--paper-faint-aa)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.rv{opacity:1;transform:none}}