/* james-saito.com · site.css · v2 · September 4, 2026
   One system for every page. Two grounds (paper, the open; dark, the working), one accent (the mask's green),
   two type families (IBM Plex as one superfamily; Zen Old Mincho for the Japanese display).
   Animation on transform, opacity and clip-path only. No drop shadows. No pure black. No em dash in chrome. */

:root{
  --paper:#EAEDE4; --paper-ink:#111A15; --paper-soft:#4E5B53; --paper-rule:rgba(17,26,21,.16);
  --dark:#0C1511;  --dark-ink:#E7EBE1;  --dark-soft:#9AA79D;  --dark-rule:rgba(231,235,225,.16);
  --green:#2FA968; --green-paper:#17663F; --green-dark:#5BDB8E;
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans JP","IBM Plex Sans","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mincho:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gutter:clamp(1.15rem,4.5vw,4rem); --measure:62ch;
  --strip:3rem; --lean:0px;
  --ink:var(--paper-ink); --soft:var(--paper-soft); --rule:var(--paper-rule); --gt:var(--green-paper);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--dark);color:var(--dark-ink);font-family:var(--sans);font-size:1.02rem;line-height:1.62;font-feature-settings:"palt" 1;overflow-x:hidden}
html[lang="en"] body{font-feature-settings:normal}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--gt)}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
b,strong{font-weight:600}
p{margin:0 0 1em;max-width:var(--measure)}
h1,h2,h3{margin:0;font-weight:600;line-height:1.2;text-wrap:balance}
.skip{position:absolute;left:-200vw;top:0}
.skip:focus{left:var(--gutter);top:calc(var(--strip) + .5rem);z-index:50;background:var(--paper);color:var(--paper-ink);padding:.5rem .8rem}

/* language ------------------------------------------------------------ */
html[lang="en"] [data-ja]{display:none!important}
html[lang="ja"] [data-en]{display:none!important}

/* the two grounds ------------------------------------------------------ */
.paper{--ink:var(--paper-ink);--soft:var(--paper-soft);--rule:var(--paper-rule);--gt:var(--green-paper);color:var(--ink)}
.dark{--ink:var(--dark-ink);--soft:var(--dark-soft);--rule:var(--dark-rule);--gt:var(--green-dark);color:var(--ink)}
.ground.paper{background:var(--paper)}
.ground.dark{background:var(--dark)}
.soft{color:var(--soft)}

/* type ----------------------------------------------------------------- */
.d{font-family:var(--serif);font-weight:400;letter-spacing:-.005em}
html[lang="ja"] .d{font-family:var(--mincho);font-weight:700;letter-spacing:.01em;line-height:1.35}
.mono{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
html[lang="ja"] .mono{letter-spacing:.12em;text-transform:none}
.mono.lc{text-transform:none;letter-spacing:.02em}
.h1{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.1}
.h2{font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.22}
.h3{font-size:1.12rem;line-height:1.35;font-weight:600}
.lede{font-size:1.1rem;line-height:1.6}
.small{font-size:.86rem;line-height:1.55}
.tnum{font-variant-numeric:tabular-nums}
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}

/* the dateline strip: itself split at the seam --------------------------- */
.strip{position:fixed;inset:0 0 auto 0;height:var(--strip);z-index:40;display:grid;grid-template-columns:1fr 1fr;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.strip>div{display:flex;align-items:center;gap:1.4rem;padding:0 var(--gutter);white-space:nowrap;overflow:hidden}
.strip .l{background:var(--paper);color:var(--paper-ink);justify-content:flex-start}
.strip .r{background:var(--dark);color:var(--dark-ink);justify-content:flex-end}
.strip .house{text-decoration:none;font-weight:500}
.strip .house b{font-weight:500}
.strip .house span.s{color:var(--paper-soft);margin-left:.6rem}
.strip .cat{color:var(--paper-soft)}
.strip a{text-decoration:none}
.strip a:hover,.strip button:hover{color:var(--green-dark)}
.strip .tongue{display:inline-flex;gap:.2rem}
.strip .tongue button{background:none;border:0;color:var(--dark-soft);font:inherit;letter-spacing:inherit;padding:.3rem .45rem;cursor:pointer}
.strip .tongue button[aria-pressed="true"]{color:var(--dark-ink);text-decoration:underline;text-underline-offset:.35em}
html[lang="ja"] .strip{letter-spacing:.1em}
@media (max-width:860px){
  .strip .cat,.strip .house span.s{display:none}
  .strip>div{gap:.9rem}
}

/* the split stage --------------------------------------------------------- */
.split{position:relative;isolation:isolate;--seam-at:50%}
.split>.paper-ground{position:absolute;inset:0;background:var(--paper);z-index:0}
.split>.dark-ground{position:absolute;top:0;bottom:0;left:var(--seam-at);right:0;background:var(--dark);z-index:0;transform:translateX(var(--lean));will-change:transform}
.split>.seam{position:absolute;top:0;bottom:0;left:var(--seam-at);width:2px;margin-left:-1px;background:var(--green);z-index:2;transform:translateX(var(--lean));will-change:transform;pointer-events:none}
.split>.cells{position:relative;z-index:1;display:grid;grid-template-columns:var(--seam-at) 1fr;min-height:100%}
.split .cell{padding:var(--gutter);min-width:0}
.split .cell.paper{padding-right:calc(var(--gutter) + 1rem)}
.split .cell.dark{padding-left:calc(var(--gutter) + 1rem)}
@media (max-width:860px){
  /* on phones each act stacks; the grounds belong to the cells and the seam is the dark cell's top edge */
  .split{--seam-at:50%}
  .split>.paper-ground,.split>.dark-ground,.split>.seam{display:none}
  .split>.cells{grid-template-columns:1fr}
  .split .cell.paper{background:var(--paper)}
  .split .cell.dark{background:var(--dark);border-top:2px solid var(--green)}
  .split .cell.paper,.split .cell.dark{padding:var(--gutter)}
}

/* pins: native sticky, progress in --p --------------------------------------- */
.pin{height:calc(var(--span,3) * 100vh);height:calc(var(--span,3) * 100svh);position:relative}
.pin>.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .pin{height:auto}
  .pin>.stage{position:relative;height:auto;min-height:100svh}
}

/* the yes: the form on the line ------------------------------------------------- */
.yes{display:grid;grid-template-columns:1fr auto;gap:0;width:min(34rem,100%)}
.yes input[type="email"]{font:inherit;font-size:1rem;padding:.85rem 1rem;border:1px solid var(--paper-rule);border-right:0;background:var(--paper);color:var(--paper-ink);min-width:0;border-radius:0}
.yes input[type="email"]::placeholder{color:var(--paper-soft)}
.yes button{font:inherit;font-size:.98rem;font-weight:500;padding:.85rem 1.25rem;border:1px solid var(--dark);background:var(--dark);color:var(--green-dark);cursor:pointer;border-radius:0;white-space:nowrap}
.yes button:hover{color:var(--dark-ink)}
.yes fieldset{grid-column:1/-1;border:0;margin:.55rem 0 0;padding:0;display:flex;gap:1.1rem;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.yes legend{position:absolute;left:-200vw}
.yes fieldset label{cursor:pointer}
.yes fieldset input{margin:0 .35rem 0 0;accent-color:var(--green)}
.micro{font-size:.8rem;line-height:1.5;color:var(--soft);margin:.7rem 0 0;max-width:34rem}
.alt{font-size:.86rem;margin:.5rem 0 0}

/* reading pages (cables, legal, corrections, till) ----------------------------------- */
.page{padding:calc(var(--strip) + 3.5rem) var(--gutter) 5rem;max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto}
.page h1{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:0 0 .5rem}
.page h2{font-size:1.32rem;margin:2.4rem 0 .7rem}
.page h3{font-size:1.06rem;margin:1.8rem 0 .5rem}
.page .env{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;line-height:1.7;color:var(--soft);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.8rem 0;margin:0 0 2rem;display:grid;grid-template-columns:max-content 1fr;column-gap:1.2rem;row-gap:.1rem}
.page .env b{font-weight:500;color:var(--ink)}
.page blockquote{margin:1.4rem 0;padding:0 0 0 1.1rem;border-left:2px solid var(--green);color:var(--ink)}
.page blockquote p{margin:0 0 .4em}
.page pre{font-family:var(--mono);font-size:.8rem;line-height:1.6;white-space:pre-wrap;background:transparent;border:1px solid var(--rule);padding:1rem 1.1rem;margin:1.2rem 0;overflow-x:auto;max-width:var(--measure)}
.page hr{border:0;border-top:1px solid var(--rule);margin:2.2rem 0}
.page ul,.page ol{padding-left:1.2rem;max-width:var(--measure)}
.page li{margin:.3rem 0}
.page .seamline{margin:2.6rem 0 1.2rem;padding:1.1rem 0;border-top:2px solid var(--green);border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:1.08rem}
html[lang="ja"] .page .seamline{font-family:var(--mincho);font-weight:700}
.page .seamline p{margin:0}
.page .seamline a{display:inline-block;margin-top:.5rem;font-family:var(--sans);font-size:.92rem}

/* footer --------------------------------------------------------------------------- */
footer.site{background:var(--dark);color:var(--dark-ink);padding:2.6rem var(--gutter) calc(2.4rem + env(safe-area-inset-bottom));font-size:.86rem;line-height:1.6}
footer.site p{max-width:var(--measure)}
footer.site .house{font-weight:500}
footer.site .legal{display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;margin:1.2rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em}
footer.site .legal a{text-decoration:none;color:var(--dark-soft)}
footer.site .legal a:hover{color:var(--green-dark)}
footer.site .gloss{color:var(--dark-soft);font-size:.8rem}

/* motion floor -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .split>.dark-ground,.split>.seam{transform:none!important}
}