/* ═══════════════════════════════════════════════════════════════════════════
   IQRA IDRISHI — PORTFOLIO
   Visual world: Japanese architectural planning. The kiwari module is drawn,
   not implied; the shoji lattice is the component grammar; the tokonoma alcove
   is the one frame every project is presented in. Ink landscape is shakkei —
   borrowed scenery seen THROUGH structure, never printed as wallpaper.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── FACES ───────────────────────────────────────────────────────────────── */
/* Self-hosted and character-subsetted so the page holds up offline and from
   file://. Shippori Mincho B1 is a mincho named after washi paper; Zen Kaku
   Gothic New is the Japanese gothic workhorse; Yuji Syuku is brush-written and
   appears exactly twice, on the seal and the signature. */

@font-face{font-family:Shippori;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/shippori-500-latin.woff2) format('woff2')}
@font-face{font-family:Shippori;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/shippori-700-latin.woff2) format('woff2')}
@font-face{font-family:Shippori;font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/shippori-800-latin.woff2) format('woff2')}
@font-face{font-family:ShipporiJP;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/shippori-700-jp.woff2) format('woff2')}
@font-face{font-family:Zen;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/zenkaku-400-latin.woff2) format('woff2')}
@font-face{font-family:Zen;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/zenkaku-500-latin.woff2) format('woff2')}
@font-face{font-family:Zen;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/zenkaku-700-latin.woff2) format('woff2')}
@font-face{font-family:ZenJP;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/zenkaku-500-jp.woff2) format('woff2')}
@font-face{font-family:Yuji;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/yuji-jp.woff2) format('woff2')}
@font-face{font-family:YujiLatin;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/yuji-latin.woff2) format('woff2')}

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root{
  /* Pigments, named for the material they come from. Vermilion is RATIONED:
     it means authorship and appears only on seals and signature marks. */
  --sumi:#171310;          /* ink: text, joinery lines */
  --sumi-soft:#3b332c;
  --shoji:#e6e1d3;         /* lit paper: the ground */
  --shoji-hi:#f0ecdf;      /* paper catching direct light */
  --shoji-lo:#d8d2c1;      /* paper in shadow */
  --kigara:#8a6a45;        /* timber: frame members, posts */
  --kigara-lo:#6b5033;
  --kigara-hi:#a98559;
  --tatami:#414a37;        /* rush floor: the craft field */
  --tatami-hi:#55603f;
  --aizuri:#1c3350;        /* indigo: the work field */
  --aizuri-hi:#274465;
  --aizuri-lo:#12233a;
  /* Deep cinnabar. Real seal paste is darker than a signal red, and #c2352a
     measured only 4.2:1 on paper; this clears AA for the seal's lettering. */
  --beni:#a82a1f;          /* vermilion: authorship only */
  --beni-ink:#8f2317;      /* vermilion dark enough for small text on paper */

  /* The module. Real kiwari dimensions a building from the ken (6 shaku).
     Every measure on this page is a multiple of --ken, and the lattice draws it. */
  --ken:clamp(52px,5.2vw,84px);
  --han:calc(var(--ken)/2);
  --bu:calc(var(--ken)/6);
  --gutter:clamp(20px,4.4vw,var(--ken));
  --measure:66ch;
  --hair:1px;

  /* Type. Display is mincho; UI and body are gothic. */
  --face-display:Shippori,ShipporiJP,'Hiragino Mincho ProN','Yu Mincho',serif;
  --face-body:Zen,ZenJP,'Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
  --face-jp:ShipporiJP,Shippori,serif;
  --face-brush:Yuji,YujiLatin,serif;

  --t-mega:clamp(3.4rem,11.5vw,9.5rem);
  --t-xl:clamp(2.3rem,5.6vw,4.6rem);
  --t-lg:clamp(1.6rem,3vw,2.5rem);
  --t-md:clamp(1.14rem,1.5vw,1.4rem);
  --t-sm:.95rem;
  --t-xs:.8rem;
  /* Functional labels. These are read, not decoration — a recruiter checks role
     and dates here — so they sit above the 11px floor, not below it. */
  --t-label:.74rem;
  /* small prose (descriptions, colophon) is read as sentences, so it clears the
     body floor rather than sharing the uppercase label size. */
  --t-fine:.86rem;

  --ease:cubic-bezier(.16,1,.3,1);      /* exponential ease-out */
  --ease-rail:cubic-bezier(.22,1,.28,1); /* the fusuma travel */
  --dur:.72s;

  color-scheme:light;
}

/* ── RESET ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,li){text-wrap:pretty}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── BROWSER SURFACES ────────────────────────────────────────────────────── */
/* The parts nobody draws still carry the design. */
::selection{background:color-mix(in srgb,var(--beni) 26%,transparent);color:var(--sumi)}
:root{caret-color:var(--beni);accent-color:var(--beni)}
html{scrollbar-width:thin;scrollbar-color:var(--kigara-lo) var(--shoji-lo)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--shoji-lo)}
::-webkit-scrollbar-thumb{background:var(--kigara-lo);border:3px solid var(--shoji-lo);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--sumi-soft)}

/* The ring colour rides an inherited custom property, so any control inside a dark
   field gets the light ring with no specificity contest. Vermilion measured 1.84:1 on
   indigo, 1.33:1 on tatami and 2.65:1 on ink — invisible exactly where the page's most
   important controls live — so it is no longer the focus colour. */
:root{--ring:var(--sumi)}
.field-ai,.field-tatami,.field-ink{--ring:var(--shoji-hi)}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

a:not([class]){text-decoration-thickness:from-font;text-underline-offset:.22em}

/* ── PAPER ───────────────────────────────────────────────────────────────── */
/* Washi is fibre suspended in pulp. Two layers: a fine tooth from turbulence,
   and long kozo fibres as sparse streaks. Without these the ground is a swatch. */
body{
  margin:0;
  background:var(--shoji);
  color:var(--sumi);
  font-family:var(--face-body);
  font-weight:400;
  font-size:var(--t-md);
  line-height:1.72;
  font-feature-settings:"palt" 1;
  overflow-x:clip;
}
.paper-tooth{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .075 0 0 0 0 .06 0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}
.paper-fibre{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.34;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg stroke='%237a6a52' stroke-opacity='.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M12 34 L96 30' stroke-width='.7'/%3E%3Cpath d='M148 62 L268 68' stroke-width='.6'/%3E%3Cpath d='M300 22 L372 34' stroke-width='.5'/%3E%3Cpath d='M40 138 L134 130' stroke-width='.65'/%3E%3Cpath d='M206 158 L318 150' stroke-width='.55'/%3E%3Cpath d='M60 222 L162 232' stroke-width='.6'/%3E%3Cpath d='M244 250 L358 242' stroke-width='.5'/%3E%3Cpath d='M20 306 L112 300' stroke-width='.6'/%3E%3Cpath d='M180 338 L296 346' stroke-width='.55'/%3E%3Cpath d='M312 380 L390 372' stroke-width='.5'/%3E%3Cpath d='M96 372 L188 380' stroke-width='.45'/%3E%3C/g%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ── TYPE ────────────────────────────────────────────────────────────────── */
.display{font-family:var(--face-display);font-weight:700;line-height:.98;
  letter-spacing:-.022em}
.jp{font-family:var(--face-jp);font-weight:700;font-feature-settings:"palt" 1}
.brush{font-family:var(--face-brush);font-weight:400}

/* tategaki: real vertical Japanese setting, the page's one genuinely
   non-Latin typographic move */
.tate{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--face-jp);line-height:1.5;letter-spacing:.24em;
}

.lede{font-size:clamp(1.2rem,1.9vw,1.62rem);line-height:1.62;max-width:none;
  font-weight:400}
.prose{max-width:var(--measure)}
.prose p+p{margin-top:1.1em}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1}

/* ── THE DRAWN MODULE ────────────────────────────────────────────────────── */
/* Donation from the brick-instruction book: the grid is drawn, not implied.
   Every element on the page aligns to these lines and you can see them. */
.module-lines{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.24;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--kigara) 26%,transparent) 0 var(--hair),
      transparent var(--hair) var(--ken));
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
}
.field-ai .module-lines,.field-ink .module-lines,.field-tatami .module-lines{
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--shoji) 13%,transparent) 0 var(--hair),
    transparent var(--hair) var(--ken));
  opacity:.4;
}

/* ── SHOJI LATTICE ───────────────────────────────────────────────────────── */
/* The component grammar. Every rule, divider and frame edge on this page is
   lattice; there is no plain CSS border anywhere in the design. */
.lattice{
  --lat:color-mix(in srgb,var(--kigara) 62%,transparent);
  background-image:
    repeating-linear-gradient(90deg,var(--lat) 0 1.5px,transparent 1.5px calc(var(--ken)/3)),
    repeating-linear-gradient(180deg,var(--lat) 0 1.5px,transparent 1.5px calc(var(--ken)/3));
}
.field-ai .lattice,.field-ink .lattice{--lat:color-mix(in srgb,var(--shoji) 30%,transparent)}

/* a kumiko rule: the divider, drawn as lattice rather than a border */
.rule-kumiko{
  height:calc(var(--bu)*1.5);border:0;margin:0;
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--kigara) 55%,transparent) 0 1.5px,
      transparent 1.5px calc(var(--ken)/3)),
    linear-gradient(180deg,transparent 45%,
      color-mix(in srgb,var(--kigara) 40%,transparent) 45% calc(45% + 1px),transparent 0);
}
.field-ai .rule-kumiko,.field-ink .rule-kumiko{
  background-image:
    repeating-linear-gradient(90deg,
      color-mix(in srgb,var(--shoji) 26%,transparent) 0 1.5px,
      transparent 1.5px calc(var(--ken)/3)),
    linear-gradient(180deg,transparent 45%,
      color-mix(in srgb,var(--shoji) 20%,transparent) 45% calc(45% + 1px),transparent 0);
}

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */
.bay{width:min(100% - var(--gutter)*2,1560px);margin-inline:auto}
.bay-narrow{width:min(100% - var(--gutter)*2,1140px);margin-inline:auto}
section{position:relative}
.field{padding-block:calc(var(--ken)*1.5)}

.field-paper{background:var(--shoji);color:var(--sumi)}
.field-ai{background:var(--aizuri);color:var(--shoji)}
.field-tatami{background:var(--tatami);color:var(--shoji)}
.field-ink{background:var(--sumi);color:var(--shoji)}

/* Fields meet on a timber threshold (nageshi), the horizontal member that in a
   real room runs where two surfaces change. Never a raw background switch. */
.field-ai,.field-tatami,.field-ink{
  box-shadow:
    inset 0 3px 0 color-mix(in srgb,var(--kigara) 78%,transparent),
    inset 0 5px 14px -4px rgb(0 0 0/.5),
    inset 0 -3px 0 color-mix(in srgb,var(--kigara) 62%,transparent);
}

/* secondary text tinted from the field's own hue, never grey */
.field-paper .quiet{color:color-mix(in srgb,var(--sumi) 78%,var(--shoji))}
.field-ai .quiet{color:color-mix(in srgb,var(--shoji) 76%,var(--aizuri-hi))}
.field-tatami .quiet{color:color-mix(in srgb,var(--shoji) 76%,var(--tatami-hi))}
.field-ink .quiet{color:color-mix(in srgb,var(--shoji) 70%,var(--sumi-soft))}

/* ── SKIP LINK ───────────────────────────────────────────────────────────── */
.skip{
  position:absolute;left:var(--gutter);top:-100px;z-index:99;
  background:var(--sumi);color:var(--shoji);padding:.7em 1.2em;
  font-size:var(--t-sm);font-weight:700;transition:top .2s var(--ease);
}
.skip:focus{top:var(--bu)}

/* ── NAV: the nageshi rail ───────────────────────────────────────────────── */
.rail{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--shoji) 88%,transparent);
  backdrop-filter:blur(9px) saturate(1.1);
  box-shadow:
    inset 0 -1px 0 color-mix(in srgb,var(--kigara) 46%,transparent),
    0 2px 12px -6px rgb(23 19 16/.30);
}
.rail-in{
  display:flex;align-items:center;justify-content:space-between;gap:var(--han);
  min-height:calc(var(--ken)*.82);
}
.mark{display:flex;align-items:center;gap:.62em;text-decoration:none}
.mark-name{font-family:var(--face-display);font-weight:700;font-size:1.06rem;
  letter-spacing:.01em;white-space:nowrap}
.mark-role{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--sumi) 76%,var(--shoji))}
.rail-nav{display:flex;align-items:center;gap:clamp(.7rem,1.9vw,1.9rem)}
.rail-nav a{
  position:relative;text-decoration:none;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;padding:.5em 0;
  color:color-mix(in srgb,var(--sumi) 74%,var(--shoji));
  transition:color .3s var(--ease);
}
.rail-nav a .g{font-family:var(--face-jp);font-size:1.16em;margin-right:.42em;
  letter-spacing:0;opacity:.62;transition:opacity .3s var(--ease)}
/* the underline is lattice, not a border */
.rail-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background-image:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 6px);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease);
}
.rail-nav a:hover,.rail-nav a:focus-visible,.rail-nav a[aria-current=true]{color:var(--sumi)}
.rail-nav a:hover .g,.rail-nav a[aria-current=true] .g{opacity:1}
.rail-nav a:hover::after,.rail-nav a:focus-visible::after,
.rail-nav a[aria-current=true]::after{transform:scaleX(1)}

/* the one boxed control on the page — a pill-free, sharp-edged frame consistent with the
   site's joinery grammar (a lattice-style border, never a rounded corner) */
.rail-nav a.rail-cta{
  padding:.62em 1.3em;letter-spacing:.14em;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--kigara) 70%,transparent);
  display:inline-flex;align-items:center;gap:.55em;
  transition:background-color .3s var(--ease),color .3s var(--ease);
}
.rail-nav a.rail-cta::after{content:none}
.rail-nav a.rail-cta:hover{
  background-color:color-mix(in srgb,var(--kigara) 12%,transparent);
  color:var(--sumi);
}

/* ── THE SEAL (hanko) ────────────────────────────────────────────────────── */
/* Vermilion is rationed to two meanings on this page: the sun in the borrowed
   landscape, and authorship. This is authorship. */
.seal{
  width:var(--seal-size,68px);height:var(--seal-size,68px);flex:none;
  color:var(--beni);transform-origin:52% 56%;
  transition:transform .42s var(--ease),filter .42s var(--ease);
}
.seal-press{background:none;border:0;padding:0;line-height:0;border-radius:2px}
.seal-press:hover .seal,.seal-press:focus-visible .seal{
  transform:rotate(-3.2deg) scale(1.055);
  filter:saturate(1.22) drop-shadow(0 3px 7px color-mix(in srgb,var(--beni) 34%,transparent));
}
.seal-press:active .seal{transform:rotate(-1.4deg) scale(.975);filter:saturate(1.4)}

/* ── THE TOKONOMA ALCOVE ─────────────────────────────────────────────────── */
/* Donation from the CD-ROM console: one fixed frame at one proportion that
   honours whatever sits inside it, repeated for every project — never a
   decorated card. The frame frames; it never overlays the work. */
.alcove{
  position:relative;isolation:isolate;
  background:
    linear-gradient(178deg,var(--shoji-lo),color-mix(in srgb,var(--shoji-lo) 84%,var(--kigara)));
  padding:calc(var(--bu)*1.5);
  padding-left:calc(var(--bu)*2.1);
  padding-bottom:calc(var(--bu)*2.1);
  /* the recess: real offsets and soft blur, never a zero-offset halo */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--kigara) 40%,transparent),
    inset 5px 7px 22px -8px rgb(23 19 16/.44),
    inset -3px -4px 16px -8px rgb(23 19 16/.24),
    0 18px 40px -26px rgb(23 19 16/.5);
}
/* toko-bashira: the signature asymmetric timber post down the alcove's left edge.
   In a real alcove it is the one member left closest to the raw tree. It is paired
   with the floor sill below, so the two members read as a frame rather than one
   stray bar floating beside the plate. */
.alcove::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--bu)*.95);
  background:
    linear-gradient(90deg,var(--kigara-lo),var(--kigara-hi) 38%,var(--kigara) 62%,var(--kigara-lo));
  box-shadow:2px 0 9px -3px rgb(23 19 16/.44);
  z-index:2;
}
.alcove::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--bu)*.72);
  background:
    linear-gradient(180deg,var(--kigara-hi),var(--kigara) 40%,var(--kigara-lo));
  box-shadow:0 -2px 9px -3px rgb(23 19 16/.4);
  z-index:2;
}
.field-ai .alcove{
  background:linear-gradient(178deg,var(--aizuri-lo),color-mix(in srgb,var(--aizuri-lo) 78%,#000));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--kigara) 46%,transparent),
    inset 5px 7px 26px -8px rgb(0 0 0/.66),
    inset -3px -4px 16px -8px rgb(0 0 0/.4),
    0 20px 48px -26px rgb(0 0 0/.62);
}
.alcove-plate{position:relative;z-index:1;display:block;width:100%;height:auto}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.jo{
  position:relative;overflow:hidden;
  min-height:calc(100svh - var(--ken)*.82);
  display:grid;align-content:center;
  padding-block:calc(var(--ken)*.6);
}
.jo-grid{
  display:grid;gap:var(--han) calc(var(--ken)*.6);
  grid-template-columns:minmax(0,1fr) auto minmax(0,1.02fr);
  align-items:center;
}
/* the one genuinely non-Latin typographic move on the page: a real vertical
   column, set in the gutter where a scroll's marginal note would sit. Reads
   "the work of design". */
.jo-tate{
  align-self:center;
  font-size:clamp(.86rem,1.06vw,1.06rem);
  letter-spacing:.34em;
  color:color-mix(in srgb,var(--sumi) 70%,var(--shoji));
  max-height:62%;
}
.jo-name{font-size:var(--t-mega);line-height:.92;margin:0}
.jo-name .ln{display:block}
.jo-name .ln2{margin-left:.09em;color:color-mix(in srgb,var(--sumi) 88%,var(--kigara))}
.jo-role{
  display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;
  margin-top:calc(var(--bu)*2.4);
  font-size:var(--t-sm);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
}
.jo-role .jpr{font-family:var(--face-jp);letter-spacing:.1em;text-transform:none;
  font-size:1.05rem;color:color-mix(in srgb,var(--sumi) 76%,var(--shoji))}
.jo-lede{margin-top:calc(var(--bu)*3.4)}
/* same quiet-text treatment already used for the sign line below the seal, so this
   reads as one consistent voice rather than a new style being introduced */
.jo-explore{
  margin-top:calc(var(--bu)*2.6);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;line-height:1.55;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--sumi) 88%,var(--shoji));
}
.jo-sign{display:flex;align-items:center;gap:calc(var(--bu)*1.5);
  margin-top:calc(var(--bu)*3.6)}
.jo-sign-txt{font-size:var(--t-xs);line-height:1.55;
  color:color-mix(in srgb,var(--sumi) 76%,var(--shoji))}

/* the shakkei alcove: the landscape is seen THROUGH structure */
.shakkei{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  background:linear-gradient(184deg,var(--shoji-hi) 6%,var(--shoji) 52%,var(--shoji-lo));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--kigara) 46%,transparent),
    inset 6px 8px 30px -10px rgb(23 19 16/.4),
    0 22px 50px -30px rgb(23 19 16/.55);
}
.shakkei-post{position:absolute;left:0;top:0;bottom:0;width:calc(var(--bu)*1.3);z-index:4;
  background:linear-gradient(90deg,var(--kigara-lo),var(--kigara-hi) 40%,var(--kigara) 66%,var(--kigara-lo));
  box-shadow:3px 0 12px -4px rgb(23 19 16/.5)}
.shakkei-land{
  position:absolute;inset:0;z-index:1;
  /* height stays `auto` so the source art's own proportions are preserved — only the
     WIDTH is set, never both, so the mountains are cropped to fit the now-square frame
     rather than stretched to fill it. */
  background:url(ink/ridges.svg) center 88%/148% auto no-repeat;
  will-change:transform;
}
.shakkei-sun{position:absolute;z-index:2;right:14%;top:9%;width:17%;aspect-ratio:1;
  color:var(--beni)}
/* the shoji lattice the landscape is read through: the muntins sit IN FRONT of the
   view, which is what makes it borrowed scenery instead of a picture. Vertical
   muntins run closer than horizontal, as they do in a real screen, and the bottom
   rail is heavier because it carries the panel. */
.shakkei-grid{
  --mun:color-mix(in srgb,var(--kigara) 54%,transparent);
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:
    /* the heavier outer frame and bottom rail */
    linear-gradient(180deg,transparent calc(100% - 9px),
      color-mix(in srgb,var(--kigara) 76%,transparent) calc(100% - 9px)),
    /* vertical muntins */
    repeating-linear-gradient(90deg,var(--mun) 0 1.6px,transparent 1.6px calc(100%/9)),
    /* horizontal muntins */
    repeating-linear-gradient(180deg,var(--mun) 0 1.6px,transparent 1.6px calc(100%/6));
  box-shadow:
    inset 0 0 0 5px color-mix(in srgb,var(--kigara) 70%,transparent),
    inset 0 0 46px -8px rgb(23 19 16/.26);
}
.shakkei-cap{
  position:absolute;z-index:5;right:calc(var(--bu)*1.2);bottom:calc(var(--bu)*1.1);
  font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--sumi) 74%,var(--shoji));
}

/* ── SECTION HEADS ───────────────────────────────────────────────────────── */
.head{display:grid;gap:calc(var(--bu)*1.4);margin-bottom:calc(var(--ken)*.92)}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--han);flex-wrap:wrap}
.head h2{font-family:var(--face-display);font-weight:700;font-size:var(--t-xl);
  line-height:1;letter-spacing:-.02em}
.head-jp{font-family:var(--face-jp);font-weight:700;font-size:clamp(2rem,3.6vw,3.1rem);
  line-height:1;letter-spacing:.16em;opacity:.3}
.head p{max-width:52ch}
/* This is the one section heading long enough to wrap. Left to flex-wrap it dropped
   its kanji onto a line of its own, reading as a stray glyph rather than a mark on
   the heading, so the row holds and the heading wraps inside itself instead. */
#illus .head-row{flex-wrap:nowrap}
#illus .head-row h2{min-width:0}

/* ── WORK ────────────────────────────────────────────────────────────────── */
.work{display:grid;gap:calc(var(--ken)*1.5)}
.piece{display:grid;gap:calc(var(--han)*1.1)}
.piece-head{display:grid;gap:calc(var(--bu)*1.1)}
/* The kind line now sits BELOW its heading as a standfirst. Above it, it was an
   eyebrow, which the craft floor bans outright and no brief earns back. */
.piece-kind{
  font-size:var(--t-sm);letter-spacing:.03em;font-weight:700;text-transform:none;
  display:flex;align-items:center;gap:.85em;
}
.piece-kind::before{
  content:"";width:calc(var(--ken)*.3);height:2px;flex:none;
  background-image:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 5px);
  opacity:.55;
}
.piece-title{font-family:var(--face-display);font-weight:700;
  font-size:clamp(1.9rem,4vw,3.3rem);line-height:1;letter-spacing:-.022em}

/* The title row holds the visit link out to the far edge, so the one thing a
   visitor is most likely to click sits on the same baseline as the project name
   instead of being buried under the fact plate. The row gap is the tighter of the
   two: when the pill wraps under a long title, a full --han of air read as a
   detached button. */
.piece-head-in{display:flex;align-items:flex-end;justify-content:space-between;
  gap:calc(var(--bu)*1.7) var(--han);flex-wrap:wrap}
.piece-name{display:grid;gap:calc(var(--bu)*1.1);min-width:0}

/* Reachable by a screen reader, absent from the page. Five links reading only
   "View in Figma" are ambiguous when tabbed through out of context, so each one
   carries its project name and a new-tab warning here. The visible words stay a
   leading substring of the full name, which is what WCAG 2.5.3 asks for. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ── THE PIECE BODY ──────────────────────────────────────────────────────── */
/* One composition, repeated for every project. The left column carries the whole
   written argument top to bottom (standfirst prose, then the ruled fact plate);
   the right column carries the capture, spanning both rows.
   Before this, the prose sat in a full-width row ABOVE the body at a 44ch measure
   inside a 1500px band: half the width was empty, and the capture was pushed down
   into a row of its own, reading as a detached image with a hole beside it. There
   is now one field, and the fact plate is bottom-set so the written column and the
   capture terminate on the same line. */
.piece-body{
  display:grid;
  gap:calc(var(--han)*1.15) calc(var(--ken)*.82);
  grid-template-rows:auto 1fr;
  grid-template-areas:"say art" "fact art";
}
.piece-say{grid-area:say;display:grid;gap:calc(var(--bu)*1.6);align-content:start}
/* Bottom-set. When the capture is the taller of the two, the fact plate drops to sit
   on the capture's bottom edge, so the written column has a real bottom rule instead
   of trailing off and leaving a hole under it.
   The cap keeps the plate at a table width rather than a column width: stretched to
   700-900px, a two-word value like "Figma" sat alone in a half-empty row, and the
   plate read wider than every other plate on the page. */
.piece-fact{grid-area:fact;align-self:end;max-width:39rem}
/* Stretched. When the WRITTEN column is the taller of the two, the alcove grows to
   the same height and the capture is matted inside it, centred. An alcove deeper
   than the object it holds is what a tokonoma actually is, and matting a print
   inside its frame is normal; a frame that stops short of the column beside it is
   just a hole. Nothing is cropped and nothing is stretched: the capture keeps its
   own pixels and the ground moves. */
.piece-art{grid-area:art;align-self:stretch;min-width:0;display:grid}
.piece-art>.alcove{display:grid;align-content:center;min-height:0}
/* 62ch is the ceiling, not the target. In most of the five the grid sets the measure
   and the cap never binds; it exists so the two widest columns cannot run a
   standfirst out to eighty characters. */
.piece-one{font-size:clamp(1.06rem,1.3vw,1.25rem);line-height:1.68;max-width:62ch}

/* Ratios are read off each capture's real pixel width so that nothing is upscaled:
   a 782px landing (wide), a four-phone rank that needs room (tall), a three-shot row
   (trio), a 772px card (tight) and a 533px portrait capture (shot), which is the one
   artefact narrower than the words beside it and so takes the smaller share. */
.piece-wide .piece-body{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.piece-tall .piece-body{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
.piece-trio .piece-body{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
.piece-tight .piece-body{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.piece-shot .piece-body{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
/* Two captures are taller than the words beside them once their column is wide enough
   for the standfirst to fill: the portrait pizza capture, and the DualSense card,
   whose fact plate is short. Both are sized by the height of the written column
   rather than by the column width, and matted left and right inside a full-width
   alcove. Widening either to fill its alcove pushes the frame well below the fact
   plate and reopens exactly the hole this layout closes. The matting is the same
   device the other three use, turned ninety degrees. */
.piece-shot .alcove-plate{width:auto;max-width:min(100%,400px);margin-inline:auto}
.piece-tight .alcove-plate{width:auto;max-width:min(100%,600px);margin-inline:auto}

/* the phone rank: columns sized to the captures' real resolutions, so the two
   lower-resolution screens are never upscaled into softness */
.rank{display:grid;grid-template-columns:1.13fr 1.15fr .82fr .85fr;gap:var(--bu);
  align-items:end}
.rank figure{margin:0;display:grid;gap:calc(var(--bu)*.7)}
.rank img{width:100%;height:auto;
  box-shadow:0 12px 26px -14px rgb(0 0 0/.6),0 0 0 1px rgb(0 0 0/.34)}
.rank figcaption{font-size:var(--t-label);letter-spacing:.15em;text-transform:uppercase;
  text-align:center}
.rank-a{margin-bottom:calc(var(--bu)*2.1)}
.rank-b{margin-bottom:0}

/* the trio: one row, three columns, nothing cover-cropped. Stacking two of them
   beside a single tall capture left the alcove with a dead quarter, and cropping a
   screenshot to tidy a grid destroys the work the page exists to show. */
.trio{display:grid;gap:var(--bu);grid-template-columns:.92fr 1.12fr 1.04fr;
  align-items:start}
.trio figure{margin:0}
.trio img{width:100%;height:auto;
  box-shadow:0 10px 22px -14px rgb(23 19 16/.5)}

/* ── GAKU: THE ILLUSTRATION PLATES ───────────────────────────────────────── */
/* 額, a hung frame. Four drawings with four different grounds, so each keeps its own
   alcove instead of being butted into one strip that would read as a single broken
   image. Every plate is boxed to the same 3:4 opening and the artwork is CONTAINED,
   never cropped — trimming a drawing to tidy a row destroys the work the row exists
   to show, which is the same rule the project captures follow. */
.gaku{display:grid;gap:var(--han);grid-template-columns:repeat(4,minmax(0,1fr))}
.gaku>li{display:grid;gap:calc(var(--bu)*.95);align-content:start}
.gaku .alcove-plate{
  aspect-ratio:3/4;object-fit:contain;object-position:50% 50%;
}
.gaku-cap{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;
  line-height:1.55}
@media (max-width:1000px){
  .gaku{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:430px){
  .gaku{grid-template-columns:minmax(0,1fr)}
}

/* ── LATTICE FRAME ───────────────────────────────────────────────────────── */
/* The structural frame around a panel is joinery, so it is drawn as lattice. The rules
   BETWEEN rows inside a fact plate stay continuous, because that is paper ruling and a
   recruiter scanning a record is helped by an unbroken line — two different things doing
   two different jobs. The footer copy says exactly this rather than overclaiming. */
.framed{position:relative}
.framed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  --lat:color-mix(in srgb,var(--kigara) 60%,transparent);
  background-image:
    repeating-linear-gradient(90deg,var(--lat) 0 1.6px,transparent 1.6px 7px),
    repeating-linear-gradient(90deg,var(--lat) 0 1.6px,transparent 1.6px 7px),
    repeating-linear-gradient(180deg,var(--lat) 0 1.6px,transparent 1.6px 7px),
    repeating-linear-gradient(180deg,var(--lat) 0 1.6px,transparent 1.6px 7px);
  background-size:100% 1.6px,100% 1.6px,1.6px 100%,1.6px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
}
.field-ai .framed::after,.field-ink .framed::after,.field-tatami .framed::after{
  --lat:color-mix(in srgb,var(--shoji) 34%,transparent)}

/* ── THE FACT PLATE ──────────────────────────────────────────────────────── */
/* Donation from the wax-pack card back: hard facts as a ruled table with hairline rules
   and tabular numerals, not prose. This is the part a recruiter verifies at a glance, so
   it never hides behind an interaction. */
.plate{
  --pl:color-mix(in srgb,var(--kigara) 34%,transparent);
  display:grid;gap:0;
}
.field-ai .plate{--pl:color-mix(in srgb,var(--shoji) 24%,transparent)}
.plate-row{
  display:grid;grid-template-columns:minmax(88px,.42fr) minmax(0,1fr);
  gap:calc(var(--bu)*.8);
  padding:calc(var(--bu)*.92) calc(var(--bu)*1.15);
  box-shadow:inset 0 -1px 0 var(--pl);
}
.plate-row:last-child{box-shadow:none}
.plate-k{font-size:var(--t-label);letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  padding-top:.24em}
.plate-v{font-size:var(--t-sm);line-height:1.56;
  font-variant-numeric:tabular-nums lining-nums}
.plate-v .jpk{font-family:var(--face-jp);opacity:.55;margin-left:.5em;font-size:.92em}

/* ── THE VISIT LINK ──────────────────────────────────────────────────────── */
/* The one outbound target per project. It borrows the fusuma pull's frame so the
   two controls on a piece read as one pair, and it is filled rather than outlined
   so it stays the louder of the two: the case study is optional reading, the live
   work is the thing a visitor came for. Underline is omitted deliberately; the
   frame plus the travelling arrow already carry the affordance.
   Ink is aizuri-lo, not aizuri: on the kigara-hi fill, aizuri measures 3.8:1, and a
   12px bold label is normal-size text under WCAG, so it needs 4.5:1. aizuri-lo
   gives 4.7:1. The hover state lightens rather than darkens for the same reason —
   darkening to kigara dropped it to 3.2:1. */
.piece-visit{
  display:inline-flex;align-items:center;gap:.8em;flex:none;
  padding:calc(var(--bu)*.82) calc(var(--bu)*1.35);
  font-size:var(--t-label);letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;text-decoration:none;
  color:var(--aizuri-lo);background:var(--kigara-hi);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--kigara) 70%,transparent),
             0 10px 22px -16px rgb(0 0 0/.7);
  transition:background-color .2s ease;
}
.piece-visit .arrow{
  position:relative;width:18px;height:1px;flex:none;background:currentColor;
  transition:transform .2s ease;
}
.piece-visit .arrow::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);transform-origin:100% 0;
}
.piece-visit:hover,.piece-visit:focus-visible{
  background:color-mix(in srgb,var(--kigara-hi) 80%,var(--shoji));
}
.piece-visit:hover .arrow,.piece-visit:focus-visible .arrow{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .piece-visit,.piece-visit .arrow{transition:none}
}

/* ── THE FUSUMA ──────────────────────────────────────────────────────────── */
/* The signature interaction. A sliding panel that travels on the module's own
   rail: the case study is behind it, never in front of the work. It spans the
   whole piece, because trapping long prose in the plate's narrow column left a
   dead half-page open and gave the writing a 30-character measure. */
.fusuma{margin-top:calc(var(--bu)*.5)}
.fusuma-pull{
  display:inline-flex;align-items:center;gap:.85em;
  padding:calc(var(--bu)*.85) calc(var(--bu)*1.4);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--kigara) 52%,transparent);
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--kigara) 15%,transparent) 0 1.5px,transparent 1.5px 14px);
  transition:background-color .34s var(--ease),box-shadow .34s var(--ease);
}
.field-ai .fusuma-pull{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--shoji) 30%,transparent);
  background-image:repeating-linear-gradient(90deg,
    color-mix(in srgb,var(--shoji) 12%,transparent) 0 1.5px,transparent 1.5px 14px)}
.fusuma-pull:hover{background-color:color-mix(in srgb,var(--kigara) 15%,transparent)}
.field-ai .fusuma-pull:hover{background-color:color-mix(in srgb,var(--shoji) 11%,transparent)}
/* the handle glyph: a panel that slides on its rail as the state flips */
.fusuma-pull .handle{
  position:relative;width:22px;height:13px;flex:none;
  box-shadow:inset 0 0 0 1px currentColor;overflow:hidden;
}
.fusuma-pull .handle::after{
  content:"";position:absolute;inset:1px;width:9px;background:currentColor;opacity:.72;
  transition:transform .5s var(--ease-rail);
}
.fusuma-pull[aria-expanded=true] .handle::after{transform:translateX(10px)}

.fusuma-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .58s var(--ease-rail);
}
.fusuma-pull[aria-expanded=true]+.fusuma-panel{grid-template-rows:1fr}
.fusuma-inner{
  overflow:hidden;min-height:0;
  transform:translateX(calc(var(--bu)*2.2));opacity:0;
  transition:transform .58s var(--ease-rail),opacity .44s var(--ease) .06s;
}
.fusuma-pull[aria-expanded=true]+.fusuma-panel .fusuma-inner{
  transform:translateX(0);opacity:1}
.fusuma-body{
  padding-top:calc(var(--bu)*1.8);
  display:grid;gap:calc(var(--bu)*1.9) var(--ken);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,38ch),1fr));
  align-items:start;
}
.fusuma-body>.draft{grid-column:1/-1}
/* SPLIT: for a case whose middle block is a long list and whose outer two are short
   prose. Auto-fit rows left a dead quarter-column under the first block, because a
   grid row is as tall as its tallest cell. Here the list takes the right column for
   both rows, so the closing block rides straight up under the opening one and reading
   order (open → decisions → close) is untouched. Assumes exactly three children. */
.fusuma-body.split{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"a b" "c b";
  align-content:start;
}
.fusuma-body.split>:nth-child(1){grid-area:a}
.fusuma-body.split>:nth-child(2){grid-area:b}
.fusuma-body.split>:nth-child(3){grid-area:c}
@media (max-width:900px){
  .fusuma-body.split{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c"}
}
.fusuma-body h4{
  font-size:var(--t-label);letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  margin-bottom:.6em;padding-bottom:.5em;
  /* the heading rule is lattice, like every other divider on the page */
  background-image:repeating-linear-gradient(90deg,
    currentColor 0 1.5px,transparent 1.5px 7px);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 1.5px;
}
.fusuma-body p{font-size:var(--t-sm);line-height:1.74;max-width:64ch}
/* Consecutive paragraphs in a case had no separation at all, so two arguments ran
   together as one block of text. .prose carries this rule; the case body never did. */
.fusuma-body p+p{margin-top:1em}
.fusuma-body ul{display:grid;gap:.85em;font-size:var(--t-sm);max-width:64ch}
/* Hanging indent, NOT a grid li. A grid li promotes every inline child to its own
   grid item, which tore a leading <b> out of its own sentence and stacked it in a
   second column. The tick is absolute so the sentence stays one text flow. */
.fusuma-body li{position:relative;padding-left:calc(11px + .8em);line-height:1.68}
/* the list bullet is a drawn kumiko tick, not a unicode glyph */
.fusuma-body li::before{
  content:"";position:absolute;left:0;top:.82em;
  width:11px;height:1px;
  background:currentColor;opacity:.5;
}
.draft{
  font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:.42em .8em;align-self:start;justify-self:start;
  box-shadow:inset 0 0 0 1px currentColor;opacity:.62;
}

/* ── SEIGAIHA THRESHOLD ──────────────────────────────────────────────────── */
/* 青海波. The user's references pinned indigo wave bands, and the work field IS aizuri
   indigo, so the authored tile belongs on the page rather than sitting unused in the
   asset folder. It runs as a threshold band where the indigo and ink fields begin —
   the place a printed textile would carry its border. */
.wave-band{
  position:absolute;left:0;right:0;top:0;height:calc(var(--bu)*3.4);
  z-index:1;pointer-events:none;opacity:.17;
  background:url(ink/seigaiha.svg) repeat-x center top;
  background-size:auto calc(var(--bu)*3.4);
  mask-image:linear-gradient(180deg,#000,transparent);
}

/* ── CRAFT (tatami field) ────────────────────────────────────────────────── */
.tatami-weave{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.3;
  background-image:
    repeating-linear-gradient(90deg,rgb(0 0 0/.22) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(180deg,rgb(255 255 255/.05) 0 2px,transparent 2px 9px);
}
/* Six same-size icon + heading + text cells is the craft floor's banned card grid, and
   at 390px it became a 2x3 of identical boxes — the one region that looked assembled
   rather than authored. Re-laid as a ruled record, the same grammar as the plates. */
.tools{display:grid;gap:0;position:relative;z-index:1}
.tool{
  display:grid;grid-template-columns:auto minmax(0,7.5rem) minmax(0,1fr);
  gap:calc(var(--bu)*1.4);align-items:center;
  padding:calc(var(--bu)*1.15) calc(var(--bu)*1.4);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--shoji) 18%,transparent);
  transition:background-color .34s var(--ease);
}
.tool:last-child{box-shadow:none}
.tool:hover{background-color:color-mix(in srgb,var(--shoji) 7%,transparent)}
.tool svg{width:26px;height:26px;opacity:.9}
.tool-n{font-size:var(--t-sm);font-weight:700;letter-spacing:.03em}
.tool-d{font-size:var(--t-fine);line-height:1.55}

/* the ascending record: her process as visible courses of work, each course
   naming what it produces */
.courses{display:grid;gap:0;position:relative;z-index:1;counter-reset:c}
.course{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:calc(var(--bu)*1.5);align-items:baseline;
  padding:calc(var(--bu)*1.5) 0;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--shoji) 20%,transparent);
}
.course:last-child{box-shadow:none}
.course-k{font-family:var(--face-jp);font-size:1.5rem;line-height:1;opacity:.5}
.course-t{font-family:var(--face-display);font-weight:700;
  font-size:clamp(1.24rem,2.1vw,1.72rem);line-height:1.14;letter-spacing:-.015em}
.course-d{font-size:var(--t-sm);line-height:1.6;margin-top:.34em;max-width:56ch}
.course-o{font-size:var(--t-label);letter-spacing:.19em;text-transform:uppercase;font-weight:700;
  text-align:right;white-space:nowrap;padding-top:.4em}

/* ── ABOUT ───────────────────────────────────────────────────────────────── */
.hito{display:grid;gap:var(--ken);grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:start}
.hito-left{display:grid;gap:calc(var(--ken)*1.05)}
.hito-prose p{font-size:clamp(1.06rem,1.42vw,1.24rem);line-height:1.76}
.hito-prose p+p{margin-top:1.05em}

/* ── SKETCHBOOK ──────────────────────────────────────────────────────────── */
/* Her own paper practice, surfaced beside the bio rather than filed under a
   bullet. Same tokonoma alcove used to hold the project screens — timber post
   and sill, prints ranked on one baseline — so the hand-drawn work reads as
   part of the same body, not a bolted-on aside. */
.sketchbook-tag{font-family:var(--face-jp);font-size:1.5rem;color:var(--beni-ink);
  line-height:1;margin-bottom:.25em}
.sketchbook-label{font-family:Yuji,var(--face-display);font-style:italic;
  font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--beni-ink);margin-bottom:1.1em;
  letter-spacing:.01em}
/* the alcove is normally scoped to a dark (field-ai) section; kept here in
   case it's reused elsewhere, but the sketchbook now uses its own mosaic */
.alcove-dark{
  background:linear-gradient(178deg,var(--aizuri-lo),color-mix(in srgb,var(--aizuri-lo) 78%,#000));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--kigara) 46%,transparent),
    inset 5px 7px 26px -8px rgb(0 0 0/.66),
    inset -3px -4px 16px -8px rgb(0 0 0/.4),
    0 20px 48px -26px rgb(0 0 0/.62);
}
.sketchbook-grid{display:grid;gap:calc(var(--bu)*1.05);
  grid-template-columns:1.08fr 1fr 1fr;grid-template-rows:1fr 1fr}
.sketchbook-grid figure{margin:0}
.sketchbook-grid img{display:block;width:100%;height:100%;object-fit:cover;
  border-radius:14px;
  box-shadow:0 14px 30px -16px rgb(23 19 16/.55),
    inset 0 0 0 1px color-mix(in srgb,var(--kigara) 30%,transparent)}
.sk-feature{grid-row:1/3;grid-column:1/2}
.sk-feature img{min-height:clamp(360px,32vw,480px)}
.sketchbook-grid figure:nth-child(2){grid-column:2/3;grid-row:1/2}
.sketchbook-grid figure:nth-child(3){grid-column:3/4;grid-row:1/2}
.sketchbook-grid figure:nth-child(4){grid-column:2/3;grid-row:2/3}
.sketchbook-grid figure:nth-child(5){grid-column:3/4;grid-row:2/3}
.sketchbook-grid figure:not(.sk-feature) img{min-height:clamp(170px,15vw,225px)}

.dl-ledger{display:grid;gap:0}
.dl-row{padding:calc(var(--bu)*1.35) calc(var(--bu)*1.4);
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--kigara) 26%,transparent)}
.dl-row:last-child{box-shadow:none}
.dl-row dt{display:flex;align-items:center;gap:.55em;
  font-size:var(--t-label);letter-spacing:.21em;text-transform:uppercase;font-weight:700;
  margin-bottom:.5em}
.dl-icon{width:1.05em;height:1.05em;flex:none;fill:var(--kigara-lo);
  color:var(--kigara-lo)}
.dl-row dd{margin:0;font-size:var(--t-sm);line-height:1.62}
.dl-row dd b{font-weight:700}
.dl-row ul{display:grid;gap:.42em}
.dl-row li{position:relative;padding-left:calc(9px + .65em);line-height:1.55}
.dl-row li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;
  background:currentColor;opacity:.45}

/* ── CLOSE (ink field) ───────────────────────────────────────────────────── */
.kyu{position:relative;overflow:hidden}
.kyu-in{display:grid;gap:var(--ken);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:end;position:relative;z-index:1}
.kyu-say{font-family:var(--face-display);font-weight:700;
  font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:-.024em}
.kyu-sub{margin-top:calc(var(--bu)*1.8);max-width:40ch;font-size:var(--t-md)}
.contacts{display:grid;gap:0}
.contacts a,.contacts .cx{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:calc(var(--bu)*1.2);align-items:center;
  padding:calc(var(--bu)*1.25) calc(var(--bu)*1.4);
  text-decoration:none;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--shoji) 17%,transparent);
  transition:background-color .34s var(--ease);
}
.contacts>:last-child{box-shadow:none}
.contacts a:hover,.contacts a:focus-visible{
  background-color:color-mix(in srgb,var(--shoji) 9%,transparent)}
/* the row's content steps aside on the module's axis. Animating padding here
   thrashes layout; a transform on the text does the same thing on the compositor. */
.contacts a .cx-k,.contacts a .cx-v{
  transition:transform .34s var(--ease)}
.contacts a:hover .cx-k,.contacts a:focus-visible .cx-k,
.contacts a:hover .cx-v,.contacts a:focus-visible .cx-v{
  transform:translateX(calc(var(--bu)*.6))}
.cx-k{font-size:var(--t-label);letter-spacing:.21em;text-transform:uppercase;font-weight:700;
  min-width:5.4em;opacity:.72}
.cx-v{font-size:var(--t-sm);word-break:break-word;
  font-variant-numeric:tabular-nums lining-nums}
.cx-go{width:16px;height:16px;opacity:.5;transition:transform .34s var(--ease),opacity .34s}
.contacts a:hover .cx-go{transform:translateX(3px);opacity:1}

.rakkan{display:flex;align-items:center;gap:calc(var(--bu)*1.6);
  margin-top:calc(var(--ken)*.9)}
.rakkan-txt{font-family:var(--face-brush);font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.2;letter-spacing:.06em}

.colophon{
  position:relative;z-index:1;
  margin-top:calc(var(--bu)*2.2);padding-top:calc(var(--bu)*1.6);
  display:flex;gap:var(--han);justify-content:space-between;flex-wrap:wrap;
  font-size:var(--t-fine);letter-spacing:.02em;line-height:1.7;
}
.kyu{padding-bottom:calc(var(--ken)*.85)}

/* ── THE AUTHORED MOMENT ─────────────────────────────────────────────────── */
/* Content is visible by default and the reveal only settles it: ink darkening
   and a short travel along the module's axis. Nothing fades in from nothing,
   so the page is complete with JS off and before any script runs. */
.settle{
  opacity:.999;
  transition:opacity .8s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
.js .settle:not(.is-in){
  opacity:.12;transform:translateY(calc(var(--bu)*1.5));filter:blur(3px)}
.js .settle.is-in{opacity:1;transform:none;filter:none}
.js .settle-d1:not(.is-in){transition-delay:.07s}
.js .settle-d2:not(.is-in){transition-delay:.14s}
.js .settle-d3:not(.is-in){transition-delay:.21s}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

/* The hero fills the screen on load; only scrolling reveals Selected Work. This band
   used to compact the hero because the (now-removed) project-thumbnail strip needed to
   clear the fold — that constraint is gone, so the hero simply stays full height and
   the content spacing is tuned within it instead. */
@media (max-height:1100px) and (min-width:901px){
  .jo-name{font-size:clamp(3rem,8.4vw,6.6rem)}
  .jo-lede{margin-top:calc(var(--bu)*1.5)}
  .jo-sign{margin-top:calc(var(--bu)*1.7)}
  .shakkei{aspect-ratio:1/1}
}

/* 1366x768 is one of the most common laptop sizes and the block above still left the
   project index 86px below the fold there. Short viewports get a genuinely compact hero. */
@media (max-height:830px) and (min-width:901px){
  .jo{padding-block:calc(var(--ken)*.32)}
  .jo-name{font-size:clamp(2.5rem,6.2vw,4.5rem)}
  .jo-role{margin-top:calc(var(--bu)*1.5)}
  .jo-lede{margin-top:calc(var(--bu)*1.1);font-size:1.02rem}
  .jo-sign{margin-top:calc(var(--bu)*1.2)}
  .shakkei{aspect-ratio:1/1}
  .seal{--seal-size:56px}
}

@media (max-width:1180px){
  /* One column: prose, then the capture, then the facts. The capture is deliberately
     kept ABOVE the fact plate here, because on a narrow screen a visitor should meet
     the work before the metadata. */
  .piece-wide .piece-body,.piece-tall .piece-body,
  .piece-trio .piece-body,.piece-tight .piece-body,
  .piece-shot .piece-body{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:"say" "art" "fact";
  }
  .piece-fact{align-self:start}
  /* Stacked, a capture has the full column to itself and no longer needs to be sized
     against a written column beside it. */
  .piece-shot .alcove-plate{max-width:min(100%,533px)}
  .piece-tight .alcove-plate{max-width:min(100%,772px)}
  .hito,.kyu-in{grid-template-columns:minmax(0,1fr)}
  .kyu-in{align-items:start}
}
@media (max-width:640px){
  .sketchbook-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:calc(var(--bu)*.7)}
  .sk-feature{grid-column:1/3;grid-row:1/2}
  .sk-feature img{min-height:0;aspect-ratio:16/11;object-position:50% 22%}
  .sketchbook-grid figure:nth-child(2){grid-column:1/2;grid-row:2/3}
  .sketchbook-grid figure:nth-child(3){grid-column:2/3;grid-row:2/3}
  .sketchbook-grid figure:nth-child(4){grid-column:1/2;grid-row:3/4}
  .sketchbook-grid figure:nth-child(5){grid-column:2/3;grid-row:3/4}
  .sketchbook-grid figure:not(.sk-feature) img{min-height:0;aspect-ratio:1/1}
}
@media (max-width:900px){
  :root{--ken:clamp(44px,8vw,62px)}
  .jo-grid{grid-template-columns:minmax(0,1fr);gap:var(--han)}
  .jo-tate{display:none}
  .jo{min-height:calc(100svh - var(--ken)*.82);padding-block:calc(var(--ken)*.7)}
  .jo-name{font-size:clamp(3rem,15vw,5.6rem)}
  .shakkei{aspect-ratio:1/1}
  .rail-nav{gap:.9rem}
  .rail-nav a{font-size:var(--t-label);letter-spacing:.13em}
  .course{grid-template-columns:auto minmax(0,1fr);gap:calc(var(--bu)*1.1)}
  .course-o{grid-column:2;text-align:left;padding-top:.7em}
}
@media (max-width:680px){
  /* On a phone the pill stops competing with the title for the row. Left to wrap, it
     landed at the right edge behind short titles and at the left edge behind long ones,
     because a single item on a wrapped flex line ignores space-between. Stacked, it
     always sits under the kind line on the text's own left margin. */
  .piece-head-in{flex-direction:column;align-items:flex-start}
  /* The label used to be clipped to 1px here, leaving four unlabelled kanji: a screen
     reader heard them, but a sighted recruiter on a phone had no way to tell which one
     was contact. Cramming words beside the wordmark forced them to 9px, under the
     legibility floor, so the rail takes a second row and the words get real size. */
  .rail-in{flex-direction:column;align-items:stretch;gap:calc(var(--bu)*.6);
    min-height:0;padding-block:calc(var(--bu)*.7)}
  .rail-nav{gap:.4rem;width:100%;justify-content:space-between}
  .rail-nav a{display:grid;justify-items:center;gap:.15em;line-height:1.15;
    padding:.25em .35em}
  .rail-nav a .g{margin-right:0;font-size:1.1rem;opacity:.85}
  .rail-nav a .lbl{font-size:var(--t-label);letter-spacing:.04em}
  .mark{justify-content:flex-start}
  .mark-role{display:none}
  /* the work strip must still break the fold at 390x844 */
  .jo{min-height:calc(100svh - 84px);padding-block:calc(var(--ken)*.5)}
  .jo-name{font-size:clamp(2.6rem,13vw,4.4rem)}
  .jo-lede{margin-top:calc(var(--bu)*1.4);font-size:1.06rem}
  .jo-sign{margin-top:calc(var(--bu)*1.5)}
  .shakkei{aspect-ratio:1/1}
  .rank{grid-template-columns:repeat(2,1fr);gap:calc(var(--bu)*1.2)}
  .rank-a,.rank-b{margin-bottom:0}
  .trio{grid-template-columns:1fr}
  /* one row, not two: at 390 a 2x2 index pushed itself 140px below the fold, which is
     the very thing this band exists to avoid. Name only; the kind line is redundant when
     the project sections are one tap away. */
  .plate-row{grid-template-columns:minmax(0,1fr);gap:.3em}
  .tool{grid-template-columns:auto minmax(0,1fr);gap:calc(var(--bu)*1.1) calc(var(--bu)*1.2)}
  .tool-d{grid-column:2}
  .contacts a,.contacts .cx{grid-template-columns:minmax(0,1fr) auto;
    gap:.3em calc(var(--bu)*1.2)}
  .cx-k{grid-column:1;grid-row:1}
  .cx-v{grid-column:1;grid-row:2}
  .cx-go{grid-column:2;grid-row:1/3}
  .colophon{flex-direction:column;gap:calc(var(--bu)*1.2)}
}

/* A 360x740 phone is short enough that a mega name, a lede, a landscape window and a
   four-up index cannot all fit at full size. The window gives up the most height, since
   it is ornament and the index is the point. */
@media (max-width:680px) and (max-height:875px){
  .jo{padding-block:calc(var(--ken)*.26)}
  .jo-name{font-size:clamp(2.1rem,10.2vw,3rem)}
  .jo-role{margin-top:calc(var(--bu)*1.2)}
  .jo-lede{margin-top:calc(var(--bu)*1);font-size:.97rem;line-height:1.5}
  .jo-sign{margin-top:calc(var(--bu)*1)}
  .shakkei{aspect-ratio:1/1}
  .seal{--seal-size:46px}
}

/* 360x640 is the shortest phone still in use; the window letterboxes further rather than
   disappearing, because it is the page's signature image. */
@media (max-width:680px) and (max-height:680px){
  .jo-name{font-size:2.3rem}
  .jo-lede{font-size:.92rem;margin-top:calc(var(--bu)*.8)}
  .jo-sign{margin-top:calc(var(--bu)*.8)}
  .shakkei{aspect-ratio:1/1}
  .seal{--seal-size:42px}
}

/* Portrait tablet stacks the hero, which ran the index 347px below the fold at 768x1024.
   The window takes most of the reduction; it is ornament and the index is the point. */
@media (min-width:681px) and (max-width:900px){
  .jo{padding-block:calc(var(--ken)*.34)}
  .jo-name{font-size:clamp(2.6rem,9vw,3.4rem)}
  .jo-role{margin-top:calc(var(--bu)*1.3)}
  .jo-lede{margin-top:calc(var(--bu)*1.1);font-size:1.02rem}
  .jo-sign{margin-top:calc(var(--bu)*1.2)}
  .shakkei{aspect-ratio:1/1}
  .seal{--seal-size:54px}
}

/* ── REDUCED MOTION ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .settle:not(.is-in){opacity:1;transform:none;filter:none}
  .shakkei-land{transform:none!important}
}

/* ── PRINT ───────────────────────────────────────────────────────────────── */
/* A recruiter printing this to a PDF gets the whole thing, panels open. Every
   field-tinted colour is re-declared: inheriting them onto white paper dropped
   secondary text to below 2:1. */
@media print{
  .rail,.paper-tooth,.paper-fibre,.module-lines,.tatami-weave,
  .fusuma-pull,.skip{display:none}
  body{background:#fff;color:#000}
  .field-ai,.field-tatami,.field-ink,.field-paper{
    background:#fff;color:#000;box-shadow:none}
  .field-paper .quiet,.field-ai .quiet,.field-tatami .quiet,.field-ink .quiet,
  .jo-sign-txt,.shakkei-cap,.mark-role,.cx-k,.colophon{color:#333}
  .field-ai .plate,.plate,.contacts,.dl-ledger{box-shadow:inset 0 0 0 1px #999}
  .plate-row,.dl-row,.contacts a,.contacts .cx{box-shadow:inset 0 -1px 0 #bbb}
  .course{box-shadow:inset 0 -1px 0 #bbb}
  .alcove{box-shadow:inset 0 0 0 1px #999;background:#fff}
  .alcove::before,.alcove::after{background:#777}
  .fusuma-panel{grid-template-rows:1fr!important}
  .fusuma-inner{transform:none!important;opacity:1!important;overflow:visible}
  .piece,.hito,.kyu-in{break-inside:avoid}
  a{text-decoration:underline}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REFERENCE HERO — editorial desktop composition
   The navigation above is intentionally untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

@media screen and (min-width:901px){
  .jo{
    height:calc(100svh - var(--ken)*.82);
    min-height:0;
    padding:0;
    display:grid;
    align-items:center;
    overflow:hidden;
  }

  .jo > .bay{
    width:min(100% - clamp(40px,7.6vw,116px),1400px);
    height:100%;
    display:flex;
    align-items:center;
  }

  .jo-grid{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(500px,.92fr);
    gap:clamp(42px,5.2vw,82px);
    align-items:center;
  }

  /* Large editorial name, matching the reference hierarchy. */
  .jo-name{
    font-size:clamp(4.7rem,8.35vw,8rem);
    line-height:.9;
    letter-spacing:-.045em;
    max-width:620px;
  }

  /* Small vermilion editorial mark under the name. */
  .jo-name::after{
    content:"";
    display:block;
    width:136px;
    height:2px;
    margin-top:clamp(28px,2.3vw,36px);
    background:
      radial-gradient(circle at 100% 50%,var(--beni) 0 2px,transparent 2.5px),
      linear-gradient(90deg,var(--beni) 0 64%,
        color-mix(in srgb,var(--beni) 28%,transparent) 64% 100%);
  }

  .jo-lede{
    max-width:535px;
    margin-top:clamp(28px,2.2vw,36px);
    font-size:clamp(1.08rem,1.32vw,1.28rem);
    line-height:1.72;
  }

  .jo-explore{
    margin-top:clamp(34px,3vw,46px);
    font-size:clamp(.72rem,.78vw,.82rem);
    letter-spacing:.13em;
  }

  .jo-sign{
    margin-top:clamp(30px,2.8vw,44px);
    gap:18px;
  }

  .jo-sign-txt{
    font-size:.9rem;
    line-height:1.65;
  }

  /* Move the Japanese vertical text to the far-right margin like the reference. */
  .jo-tate{
    position:absolute;
    z-index:8;
    top:50%;
    right:clamp(18px,2.1vw,32px);
    transform:translateY(-50%);
    max-height:none;
    font-size:clamp(.82rem,1vw,1rem);
    letter-spacing:.32em;
  }

  /* Portrait frame instead of the current square frame. */
  .shakkei{
    width:min(100%,585px);
    height:min(80vh,642px);
    aspect-ratio:auto;
    justify-self:end;
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb,var(--kigara) 46%,transparent),
      inset 6px 8px 30px -10px rgb(23 19 16/.4),
      0 22px 50px -30px rgb(23 19 16/.55);
  }

  .shakkei-grid{
    background-image:
      linear-gradient(180deg,transparent calc(100% - 9px),
        color-mix(in srgb,var(--kigara) 76%,transparent) calc(100% - 9px)),
      repeating-linear-gradient(90deg,var(--mun) 0 1.6px,
        transparent 1.6px calc(100%/7)),
      repeating-linear-gradient(180deg,var(--mun) 0 1.6px,
        transparent 1.6px calc(100%/6));
  }

  .shakkei-land{
    background-size:148% auto;
    background-position:center 88%;
  }
}

/* 1366×768 and other short laptop screens: scale the hero down instead
   of creating a second viewport. */
@media screen and (min-width:901px) and (max-height:830px){
  .jo > .bay{
    width:min(100% - 72px,1280px);
  }

  .jo-grid{
    grid-template-columns:minmax(0,1fr) minmax(430px,.82fr);
    gap:44px;
  }

  .jo-name{
    font-size:clamp(4rem,7.4vw,6.3rem);
  }

  .jo-name::after{
    margin-top:24px;
  }

  .jo-lede{
    margin-top:24px;
    font-size:1.05rem;
    max-width:500px;
  }

  .jo-explore{
    margin-top:26px;
  }

  .jo-sign{
    margin-top:25px;
  }

  .shakkei{
    width:min(100%,500px);
    height:min(76vh,560px);
  }
}

/* Tablet/mobile: keep the existing navigation behavior and stack the hero. */
@media screen and (max-width:900px){
  .jo{
    height:auto;
    min-height:calc(100svh - var(--ken)*.82);
  }

  .jo-name::after{
    content:"";
    display:block;
    width:110px;
    height:2px;
    margin-top:24px;
    background:
      radial-gradient(circle at 100% 50%,var(--beni) 0 2px,transparent 2.5px),
      linear-gradient(90deg,var(--beni) 0 64%,
        color-mix(in srgb,var(--beni) 28%,transparent) 64% 100%);
  }

  .jo-tate{
    display:none;
  }
}