/* Japanese Ma: negative space as the primary material.
   Asymmetric 12-column field, vertical-rl accents, sumi ink on kinari washi, one vermilion seal. */

:root {
  /* primitives */
  --kinari-100: #f6f1e7;
  --kinari-200: #eee7d9;
  --kinari-300: #e2d8c5;
  --kinari-400: #cfc3ac;
  --sumi-900: #1b1a17;
  --sumi-700: #3b3731;
  --sumi-500: #655e53;
  --ai-600: #364f6a;
  --ai-300: #93adc9;
  --shu-600: #a3382a;
  --shu-400: #e0735c;
  --yoru-950: #111214;
  --yoru-900: #17191c;
  --yoru-800: #1f2226;
  --yoru-700: #2d3136;
  --gofun-100: #ede6d8;
  --gofun-300: #c9c0b0;
  --gofun-500: #9d9586;

  /* semantic (light) */
  --bg: var(--kinari-100);
  --bg-deep: var(--kinari-200);
  --surface: #fbf8f2;
  --text: var(--sumi-900);
  --text-body: var(--sumi-700);
  --text-muted: var(--sumi-500);
  --rule: var(--kinari-400);
  --rule-soft: var(--kinari-300);
  --accent: var(--ai-600);
  --seal: var(--shu-600);
  --seal-ink: #fbf5ec;
  --code-bg: #1d1c1a;
  --code-text: #e9e2d3;
  --paper-noise: 0.55;
  --img-filter: saturate(0.72) contrast(0.96);

  --f-display: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.2rem;
  --step-4: clamp(2.4rem, 4.6vw, 3.9rem);
  --step-5: clamp(2.8rem, 7vw, 6.2rem);

  --gutter: clamp(1rem, 3vw, 2.5rem);
  --pause: clamp(5rem, 12vw, 11rem); /* the ma between sections */
  --hashira: 96px;
  --radius: 2px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--yoru-950);
    --bg-deep: var(--yoru-900);
    --surface: var(--yoru-900);
    --text: var(--gofun-100);
    --text-body: var(--gofun-300);
    --text-muted: var(--gofun-500);
    --rule: var(--yoru-700);
    --rule-soft: var(--yoru-800);
    --accent: var(--ai-300);
    --seal: var(--shu-400);
    --seal-ink: #16110f;
    --code-bg: #0b0c0d;
    --paper-noise: 0.22;
    --img-filter: saturate(0.6) brightness(0.88);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: var(--yoru-950);
  --bg-deep: var(--yoru-900);
  --surface: var(--yoru-900);
  --text: var(--gofun-100);
  --text-body: var(--gofun-300);
  --text-muted: var(--gofun-500);
  --rule: var(--yoru-700);
  --rule-soft: var(--yoru-800);
  --accent: var(--ai-300);
  --seal: var(--shu-400);
  --seal-ink: #16110f;
  --code-bg: #0b0c0d;
  --paper-noise: 0.22;
  --img-filter: saturate(0.6) brightness(0.88);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text-body);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.75;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  position: relative;
}
/* washi fibre: CSS-generated noise; assets/washi-texture.jpg layers over it when present */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--paper-noise);
  background-image:
    url("assets/washi-texture.jpg"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.035' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0 0.3  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
  background-size: 1200px auto, 240px 240px;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] body::before { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; } }

body > * { position: relative; z-index: 1; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.25em; text-decoration-thickness: 1px; transition: color 150ms, text-decoration-color 150ms; }
a:hover { color: var(--seal); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 1px; }
::selection { background: var(--seal); color: var(--seal-ink); }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--text); font-weight: 500; line-height: 1.25; letter-spacing: 0.005em; margin: 0; }
p { margin: 0 0 1.1em; }

.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: 0.75rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; }

.mono { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.06em; }
.eyebrow { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.muted { color: var(--text-muted); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── hashira: the fixed vertical pillar ───────── */
.hashira {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--hashira);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 0 1.5rem;
  gap: 2rem;
  z-index: 20;
  background: var(--bg);
}
.hashira .seal { width: 48px; height: 48px; }
.hashira-label {
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}
.hashira-label .kanji { font-size: 2.6rem; line-height: 1; color: var(--text); }
.hashira-label .gloss { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-muted); }
.hashira-foot { writing-mode: vertical-rl; font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.2em; color: var(--text-muted); }

.seal { display: block; color: var(--seal); }
.seal rect { fill: var(--seal); }
.seal text { fill: var(--seal-ink); font-family: var(--f-display); font-weight: 700; }

.page { margin-left: var(--hashira); min-width: 0; }

/* ───────── top bar ───────── */
.bar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
}
.bar.scrolled { border-bottom-color: var(--rule-soft); }
.wordmark { display: flex; flex-direction: column; text-decoration: none; line-height: 1.1; }
.wordmark small { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; }
.wordmark strong { font-family: var(--f-display); font-size: 1.35rem; font-weight: 600; color: var(--text); letter-spacing: 0.04em; }
.wordmark .seal { display: none; width: 40px; height: 40px; }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  text-decoration: none; padding: 0.6rem 0.8rem; font-size: 1rem; color: var(--text-body);
  position: relative; min-height: 44px; display: inline-flex; align-items: center;
}
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; margin-left: -3px;
  background: var(--seal); border-radius: 50%;
}
.nav a.ai-link { font-family: var(--f-display); font-weight: 600; color: var(--seal); }
.tools { display: flex; align-items: center; gap: 0.5rem; }
.search { display: flex; align-items: center; border-bottom: 1px solid var(--rule); }
.search input {
  border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1rem;
  width: 9rem; padding: 0.45rem 0.25rem; min-height: 44px;
}
.search input::placeholder { color: var(--text-muted); }
.search button, .icon-btn {
  border: 0; background: transparent; color: var(--text-body); cursor: pointer; min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center; font: inherit; border-radius: 50%;
}
.icon-btn:hover, .search button:hover { color: var(--seal); }
.icon-btn svg, .search svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
.menu-btn { display: none; }

/* ───────── the field: asymmetric 12-col ───────── */
.field {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 0 var(--gutter);
  max-width: 1400px;
}
.pause { height: var(--pause); }
.pause-sm { height: calc(var(--pause) * 0.5); }

/* Section heading with vertical label in the left margin */
.sect { padding: 0 var(--gutter); max-width: 1400px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.sect-mark {
  grid-column: 1 / span 2;
  display: flex; gap: 0.9rem; align-items: flex-start;
}
.sect-mark .v {
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-size: 1.05rem; letter-spacing: 0.2em; color: var(--text);
  border-left: 1px solid var(--seal);
  padding-left: 0.55rem;
  max-height: 22rem;
}
.sect-mark .n { font-family: var(--f-display); font-size: 1.9rem; color: var(--seal); line-height: 1; writing-mode: vertical-rl; }
.sect-body { grid-column: 3 / span 10; min-width: 0; }
.sect-body.offset { grid-column: 5 / span 8; }
.sect-body.left { grid-column: 3 / span 7; }
.sect-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.sect-head h2 { font-size: var(--step-3); }
.sect-head p { margin: 0.4rem 0 0; color: var(--text-muted); }
.more { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--seal); padding: 0.6rem 0 0.2rem; display: inline-block; }
.more:hover { color: var(--seal); }

/* ───────── hero variants ───────── */
.hero { padding: clamp(3rem, 10vw, 9rem) var(--gutter) 0; max-width: 1400px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); position: relative; }
.hero-copy { grid-column: 2 / span 7; }
.hero h1 { font-size: var(--step-5); line-height: 1.12; font-weight: 500; letter-spacing: -0.01em; }
.hero h1 em { font-style: normal; color: var(--seal); }
.hero .lede { font-size: var(--step-1); line-height: 1.7; max-width: 34ch; color: var(--text-body); margin-top: 2.25rem; }
.hero-aside { grid-column: 9 / span 3; align-self: end; }
.page-hero { padding: clamp(3rem, 9vw, 8rem) var(--gutter) 0; max-width: 1400px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.page-hero .copy { grid-column: 3 / span 7; }
.page-hero h1 { font-size: var(--step-4); line-height: 1.15; }
.page-hero .lede { font-size: var(--step-1); max-width: 40ch; margin-top: 1.5rem; }
.page-hero .v-title {
  grid-column: 11 / span 2; justify-self: end; writing-mode: vertical-rl;
  font-family: var(--f-display); font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; color: var(--text); letter-spacing: 0.1em;
  border-right: 1px solid var(--rule); padding-right: 1rem;
}
.page-hero .v-title span { color: var(--seal); }

.stats { display: flex; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3rem; flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; }
.stat b { font-family: var(--f-display); font-weight: 500; font-size: var(--step-3); color: var(--text); line-height: 1.1; }
.stat span { font-size: 0.95rem; color: var(--text-muted); }

.actions { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; margin-top: 3rem; }
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.7rem 1.4rem;
  background: var(--text); color: var(--bg); text-decoration: none; font-size: 1rem; letter-spacing: 0.04em;
  border: 1px solid var(--text); border-radius: var(--radius); cursor: pointer; font-family: inherit;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.btn:hover { background: var(--seal); border-color: var(--seal); color: var(--seal-ink); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); }
.btn.ghost:hover { color: var(--seal); background: transparent; border-color: var(--seal); }
.link-2 { color: var(--text); text-decoration: underline; text-decoration-color: var(--seal); min-height: 44px; display: inline-flex; align-items: center; }
.link-3 { color: var(--text-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

/* portrait in a window, like a view through a shoji opening */
.window { position: relative; }
.window img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: var(--img-filter); }
.window::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--rule); pointer-events: none; }
.window figcaption { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.08em; margin-top: 0.75rem; }
.fallback-bg { background: linear-gradient(160deg, var(--bg-deep), var(--rule-soft)); }

/* enso */
.enso { position: absolute; pointer-events: none; color: var(--text); opacity: 0.1; }
.enso path { fill: none; stroke: currentColor; stroke-linecap: round; }

/* ───────── index list (writing entries as a quiet ledger) ───────── */
.ledger { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ledger li { border-bottom: 1px solid var(--rule); }
.entry {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.5rem 2rem; padding: 1.6rem 0;
  text-decoration: none; color: inherit; align-items: baseline;
}
.entry time, .entry .when { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.04em; }
.entry h3 { font-size: var(--step-1); line-height: 1.4; transition: color 150ms; }
.entry p { margin: 0.4rem 0 0; color: var(--text-body); max-width: 60ch; }
.entry .kind { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.entry:hover h3 { color: var(--seal); }
.entry:hover .kind { color: var(--seal); }

/* feature entries: one image, lots of air */
.feature {
  display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); column-gap: var(--gutter);
  text-decoration: none; color: inherit; align-items: end;
}
.feature + .feature { margin-top: clamp(4rem, 9vw, 8rem); }
.feature .img { grid-column: 1 / span 5; }
.feature .txt { grid-column: 7 / span 4; padding-bottom: 0.5rem; }
.feature.flip .img { grid-column: 6 / span 5; grid-row: 1; }
.feature.flip .txt { grid-column: 1 / span 4; grid-row: 1; }
.feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: var(--img-filter); transition: filter 400ms; }
.feature:hover img { filter: none; }
.feature h3 { font-size: var(--step-2); line-height: 1.3; margin: 0.75rem 0; }
.feature:hover h3 { color: var(--seal); }
.feature p { color: var(--text-body); }

/* small card grid, used sparingly */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.tile {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.75rem 1.5rem 2rem; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 12rem; transition: background 200ms;
}
.tile:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tile:hover h3 { color: var(--seal); }
.tile h3 { font-size: var(--step-1); }
.tile p { margin: 0; }
.tile .tfoot { margin-top: auto; font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.05em; }
.tile img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: var(--img-filter); margin-bottom: 0.5rem; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; padding: 0; margin: 0; }
.tags a, .tags span { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); text-decoration: none; letter-spacing: 0.04em; }
.tags a::before, .tags span::before { content: "#"; color: var(--seal); margin-right: 0.1em; }
.tags a { min-height: 32px; display: inline-flex; align-items: center; }
.tags a:hover { color: var(--seal); }

.badge { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid currentColor; padding: 0.05rem 0.45rem; color: var(--seal); display: inline-block; line-height: 1.5; }
.badge.quiet { color: var(--text-muted); }

/* ───────── a single calm quote band ───────── */
.kotoba { max-width: 1400px; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.kotoba blockquote { grid-column: 6 / span 6; margin: 0; font-family: var(--f-display); font-size: var(--step-3); line-height: 1.45; color: var(--text); }
.kotoba cite { display: block; margin-top: 1.25rem; font-family: var(--f-mono); font-style: normal; font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.1em; }

/* principles as vertical columns, read right to left */
.tategaki { display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: clamp(1.25rem, 3vw, 2.75rem); overflow-x: auto; padding-bottom: 1rem; }
.tategaki li { writing-mode: vertical-rl; font-family: var(--f-display); font-size: 1.3rem; line-height: 1.7; color: var(--text); max-height: 26rem; list-style: none; border-right: 1px solid var(--rule); padding-right: 0.8rem; }
.tategaki li span { color: var(--seal); font-size: 1rem; margin-bottom: 0.8rem; display: inline-block; }
.tategaki { margin: 0; padding-left: 0; }

/* ───────── footer ───────── */
.foot {
  border-top: 1px solid var(--rule); margin-top: var(--pause);
  padding: 4rem var(--gutter) 2.5rem; max-width: 1400px;
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 3rem;
}
.foot .about { grid-column: 1 / span 4; }
.foot .about p { max-width: 30ch; color: var(--text-muted); margin-top: 1rem; }
.foot nav { grid-column: span 2; }
.foot h2 { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; margin-bottom: 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.foot .news { grid-column: span 4; }
.foot .copy { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); border-top: 1px solid var(--rule-soft); padding-top: 1.5rem; }

.newsform { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; }
.newsform input[type="email"] {
  flex: 1 1 12rem; min-height: 48px; border: 0; border-bottom: 1px solid var(--text-muted); background: transparent;
  color: var(--text); font: inherit; padding: 0.5rem 0.1rem;
}
.newsform input::placeholder { color: var(--text-muted); }
.newsform .status { flex-basis: 100%; margin: 0; font-size: 0.95rem; color: var(--text-muted); min-height: 1.5em; }
.newsform.done .status { color: var(--text); }

/* ───────── article ───────── */
.progress { position: fixed; top: 0; left: 0; height: 2px; background: var(--seal); width: 0; z-index: 40; }
.art-head { padding: clamp(3rem, 8vw, 7rem) var(--gutter) 0; max-width: 1400px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.art-head .crumbs { grid-column: 3 / span 8; font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.1em; color: var(--text-muted); }
.art-head .crumbs a { color: var(--text-muted); }
.art-head h1 { grid-column: 3 / span 8; font-size: var(--step-4); line-height: 1.18; margin-top: 1.5rem; }
.art-head .desc { grid-column: 3 / span 6; font-size: var(--step-1); margin-top: 1.5rem; color: var(--text-body); }
.art-head .meta { grid-column: 3 / span 8; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.5rem; font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.06em; color: var(--text-muted); align-items: center; }
.art-head .meta a { color: var(--text-muted); }
.art-head .v-date {
  grid-column: 12 / span 1; grid-row: 1 / span 4; justify-self: end; writing-mode: vertical-rl;
  font-family: var(--f-display); color: var(--text-muted); letter-spacing: 0.3em; font-size: 1rem; border-right: 1px solid var(--seal); padding-right: 0.6rem;
}
.art-hero { max-width: 1400px; padding: clamp(3rem, 6vw, 5rem) var(--gutter) 0; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.art-hero figure { grid-column: 5 / span 8; margin: 0; }
.art-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; filter: var(--img-filter); }
.art-hero figcaption { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); margin-top: 0.6rem; text-align: right; }

.art-layout { max-width: 1400px; padding: clamp(3rem, 7vw, 6rem) var(--gutter) 0; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--gutter); }
.toc { grid-column: 1 / span 3; }
.toc-inner { position: sticky; top: 6rem; }
.toc h2 { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.16em; font-weight: 400; color: var(--text-muted); text-transform: uppercase; margin-bottom: 1rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc ol a { display: block; padding: 0.45rem 0 0.45rem 1rem; margin-left: -1px; text-decoration: none; font-size: 0.98rem; color: var(--text-muted); border-left: 1px solid transparent; line-height: 1.45; }
.toc ol a:hover { color: var(--text); }
.toc ol a.active { color: var(--text); border-left-color: var(--seal); }
.toc details summary { display: none; }
.toc .tools-inline { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }

.prose { grid-column: 4 / span 6; min-width: 0; font-family: var(--f-display); font-size: 1.1875rem; line-height: 1.9; color: var(--text-body); }
.prose > * + * { margin-top: 1.4em; }
.prose p { margin-bottom: 0; }
.prose h2 { font-size: var(--step-3); margin-top: 3.5em; padding-top: 1.5rem; position: relative; }
.prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 1px; background: var(--seal); }
.prose h2 .no { font-family: var(--f-mono); font-size: var(--step--1); color: var(--seal); letter-spacing: 0.14em; display: block; margin-bottom: 0.6rem; }
.prose a { color: var(--text); text-decoration-color: var(--seal); }
.prose a:hover { color: var(--seal); }
.prose code { font-family: var(--f-mono); font-size: 0.86em; background: var(--bg-deep); padding: 0.1em 0.35em; border-radius: 2px; color: var(--text); }
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--seal); font-family: var(--f-mono); font-size: 0.9em; }
.prose em { font-style: italic; }
.prose blockquote { margin: 2em 0 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--rule); font-family: var(--f-body); font-size: 1.05rem; line-height: 1.75; }
.prose blockquote p { margin: 0; }

/* the article's three recurring callout types, marked by a vertical tab */
.note {
  display: grid; grid-template-columns: 2.5rem minmax(0,1fr); gap: 1rem; margin-top: 2.2em;
  font-family: var(--f-body); font-size: 1.05rem; line-height: 1.75; color: var(--text-body);
}
.note .tab { writing-mode: vertical-rl; font-family: var(--f-display); font-size: 1rem; letter-spacing: 0.25em; color: var(--seal); border-right: 1px solid var(--seal); padding-right: 0.4rem; justify-self: center; align-self: start; }
.note.question .tab { color: var(--accent); border-color: var(--accent); }
.note.skill { background: var(--surface); padding: 1.25rem 1.25rem 1.25rem 0.5rem; border: 1px solid var(--rule-soft); }
.note.skill .tab { color: var(--text); border-color: var(--text); }
.note p { margin: 0; }
.note strong { color: var(--text); }

.code {
  margin: 2.2em 0 0; background: var(--code-bg); color: var(--code-text); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.5rem 0.35rem 1.1rem; border-bottom: 1px solid #ffffff14; font-family: var(--f-mono); font-size: var(--step--1); color: #bfb6a4; letter-spacing: 0.12em; }
.code-head button { background: transparent; color: #e9e2d3; border: 1px solid #ffffff2a; font: inherit; font-size: var(--step--1); padding: 0.3rem 0.8rem; cursor: pointer; min-height: 36px; border-radius: 2px; }
.code-head button:hover { border-color: var(--shu-400); color: #fff; }
.code pre { margin: 0; padding: 1.1rem 1.25rem 1.4rem; overflow-x: auto; font-family: var(--f-mono); font-size: 0.9rem; line-height: 1.7; tab-size: 2; }
.code .c { color: #a79f90; font-style: italic; }
.code .k { color: #e7917b; }
.code .s { color: #b8c98f; }
.code .t { color: #9fbbdc; }

.art-wide { grid-column: 4 / span 8; }

.art-end { grid-column: 4 / span 6; margin-top: 5rem; }
.art-end .row { border-top: 1px solid var(--rule); padding: 2rem 0; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.share { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.share a, .share button { font: inherit; font-size: 0.95rem; background: transparent; color: var(--text); border: 1px solid var(--rule); padding: 0.5rem 1rem; min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; text-decoration: none; border-radius: 2px; }
.share a:hover, .share button:hover { border-color: var(--seal); color: var(--seal); }
.newsletter-card { border: 1px solid var(--rule); background: var(--surface); padding: 2.5rem; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2rem; margin-top: 1rem; }
.newsletter-card h2 { font-size: var(--step-2); }
.newsletter-card p { margin-top: 0.6rem; }

/* series ribbon */
.series { border: 1px solid var(--rule); padding: 1.25rem 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.dots { display: flex; gap: 0.5rem; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--seal); display: inline-block; }
.dots i.on { background: var(--seal); }

/* ───────── projects ───────── */
.proj-feature { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; }
.proj-feature .img { grid-column: 1 / span 6; }
.proj-feature .img img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: var(--img-filter); }
.proj-feature .txt { grid-column: 8 / span 3; }
.proj-feature h3 { font-size: var(--step-3); margin-bottom: 1rem; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); margin-top: 2rem; }
.mini-stats div { padding: 1rem 0; }
.mini-stats b { display: block; font-family: var(--f-display); font-size: var(--step-2); color: var(--text); font-weight: 500; }
.mini-stats span { font-size: 0.95rem; color: var(--text-muted); }

.jump { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding: 0; margin: 2.5rem 0 0; list-style: none; }
.jump a { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-decoration: none; color: var(--text-muted); min-height: 44px; display: inline-flex; align-items: center; }
.jump a:hover { color: var(--seal); }

.stars { font-family: var(--f-mono); font-size: var(--step--1); color: var(--seal); }

/* ───────── patterns ───────── */
.three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--rule); }
.three > div { padding: 1.75rem 1.75rem 1.75rem 0; }
.three > div + div { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
.three h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.three p { margin: 0; }
.three .v { font-family: var(--f-display); color: var(--seal); font-size: 1.6rem; display: block; margin-bottom: 0.5rem; }

.filters { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.filter-search { flex: 1 1 22rem; display: flex; border-bottom: 1px solid var(--text-muted); }
.filter-search input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; min-height: 48px; padding: 0.4rem 0; }
.filter-search input::placeholder { color: var(--text-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.chip { font: inherit; font-size: 0.95rem; background: transparent; color: var(--text-body); border: 1px solid transparent; padding: 0.4rem 0.8rem; min-height: 44px; cursor: pointer; border-radius: 2px; }
.chip:hover { color: var(--seal); }
.chip[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
.result-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 1.5rem; }
.result-line select { font: inherit; background: transparent; color: var(--text); border: 1px solid var(--rule); padding: 0.4rem 0.6rem; min-height: 40px; }
.result-line button { font: inherit; background: none; border: 0; color: var(--text); text-decoration: underline; cursor: pointer; min-height: 40px; }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 3.5rem var(--gutter); }
.pcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pcard .thumb { aspect-ratio: 4/3; border: 1px solid var(--rule); background: var(--surface); display: grid; place-items: center; padding: 1.25rem; margin-bottom: 1.1rem; overflow: hidden; transition: border-color 200ms; }
.pcard:hover .thumb { border-color: var(--seal); }
.pcard:hover h3 { color: var(--seal); }
.pcard .top { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.pcard h3 { font-size: var(--step-1); margin: 0.5rem 0; }
.pcard p { margin: 0 0 0.6rem; }
.pcard .good { font-size: 0.95rem; color: var(--text-muted); }
.pcard .good b { color: var(--text-body); font-weight: 500; }
.empty { border: 1px dashed var(--rule); padding: 3rem; text-align: center; display: none; }
.empty.show { display: block; }

/* thumbnail sketches drawn in CSS */
.sk { width: 100%; height: 100%; display: grid; gap: 1px; }
.sk-strip { grid-template-columns: repeat(4, 1fr); background: var(--rule); border: 1px solid var(--rule); height: 42%; align-self: center; }
.sk-strip i { background: var(--surface); display: block; position: relative; }
.sk-strip i::after { content: ""; position: absolute; left: 18%; top: 55%; width: 45%; height: 12%; background: var(--text); opacity: .7; }
.sk-bars { display: flex; align-items: flex-end; gap: 6%; height: 70%; width: 80%; }
.sk-bars i { flex: 1; background: var(--accent); opacity: .75; display: block; }
.sk-rows { display: flex; flex-direction: column; gap: 10%; width: 80%; height: 60%; justify-content: center; }
.sk-rows i { height: 8px; background: var(--rule); display: block; }
.sk-rows i:nth-child(2) { width: 70%; background: var(--seal); opacity: .8; }
.sk-rows i:nth-child(3) { width: 85%; }
.sk-dots { display: flex; gap: 8px; }
.sk-dots i { width: 14px; height: 14px; border: 1.5px solid var(--text); display: block; }
.sk-dots i:nth-child(odd) { border-radius: 50%; }
.sk-dots i:nth-child(3) { background: var(--seal); border-color: var(--seal); }
.sk-matrix { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); width: 80%; height: 70%; background: var(--rule); border: 1px solid var(--rule); }
.sk-matrix i { background: var(--surface); display: block; }
.sk-matrix i:nth-child(n+11):nth-child(-n+15), .sk-matrix i:nth-child(5n+3) { background: color-mix(in srgb, var(--seal) 18%, var(--surface)); }
.sk-dialog { width: 72%; border: 1px solid var(--text); padding: 10%; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.sk-dialog i { height: 7px; background: var(--rule); display: block; }
.sk-dialog b { align-self: flex-end; width: 36%; height: 16px; background: var(--seal); display: block; }

/* pattern detail */
.back { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-decoration: none; color: var(--text-muted); min-height: 44px; display: inline-flex; align-items: center; }
.uses { columns: 2; column-gap: 2.5rem; padding-left: 1.2em; margin: 1rem 0 0; }
.uses li { margin-bottom: 0.4rem; break-inside: avoid; }
.uses li::marker { color: var(--seal); }

.panes { border: 1px solid var(--rule); background: var(--surface); margin-top: 3rem; }
.panes-bar { display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--rule); padding: 0 0.75rem; }
.panes-tabs { display: flex; flex-wrap: wrap; }
.panes-tabs button { font: inherit; font-size: 0.98rem; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-muted); padding: 0.8rem 0.9rem; min-height: 48px; cursor: pointer; margin-bottom: -1px; }
.panes-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--seal); }
.panes-tabs button:hover { color: var(--text); }
.panes-actions { display: flex; gap: 0.5rem; align-items: center; }
.panes-actions button { font: inherit; font-size: 0.95rem; background: transparent; color: var(--text); border: 1px solid var(--rule); padding: 0.35rem 0.8rem; min-height: 40px; cursor: pointer; border-radius: 2px; }
.panes-actions button:hover { border-color: var(--seal); color: var(--seal); }
.pane { padding: clamp(1.25rem, 3vw, 2.5rem); }
.pane[hidden] { display: none; }
.pane pre { margin: 0; font-family: var(--f-mono); font-size: 0.9rem; line-height: 1.7; overflow-x: auto; color: var(--text); white-space: pre; }
.pane.prompt p { max-width: 68ch; }
.pane .note-css { font-size: 0.98rem; color: var(--text-muted); border-left: 1px solid var(--seal); padding-left: 1rem; margin-bottom: 1.5rem; }

/* live stat-strip demo */
.hss-cap { color: var(--text-muted); margin: 0 0 1rem; }
.hss-strip { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; grid-template-columns: 1fr; }
@container (min-width: 21rem) { .hss-strip { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 42rem) { .hss-strip { grid-template-columns: repeat(4, 1fr); } .hss-strip.five { grid-template-columns: repeat(5, 1fr); } }
.hss-wrap { container-type: inline-size; }
.hss-tile { background: var(--bg); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; text-align: left; font: inherit; color: inherit; border: 0; }
.hss-tile .l { font-family: var(--f-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.hss-tile .f { font-family: var(--f-display); font-size: 1.6rem; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hss-tile .u { font-size: 0.9rem; color: var(--text-muted); }
.hss-tile .f.dim { color: var(--text-muted); }
button.hss-tile { cursor: pointer; min-height: 44px; }
button.hss-tile:hover { background: color-mix(in srgb, var(--seal) 6%, var(--bg)); }
button.hss-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--seal) 14%, var(--bg)); }
button.hss-tile[aria-pressed="true"] .l { color: var(--seal); }
.hss-list { list-style: none; padding: 0; margin: 1rem 0 0; border-top: 1px solid var(--rule); }
.hss-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule-soft); }
.hss-list li span:last-child { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); }
.hss-status { font-size: 0.98rem; color: var(--text-muted); margin-top: 0.75rem; }

/* about */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline > li { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--rule); }
.timeline .period { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.06em; padding-top: 0.35rem; }
.timeline h3 { font-size: var(--step-2); }
.timeline p { margin: 0.6rem 0 0.8rem; }
.timeline .roles { list-style: none; padding: 0; margin: 0; font-size: 0.98rem; color: var(--text-muted); }
.timeline .roles li { padding: 0.15rem 0; }
.timeline .roles b { color: var(--text-body); font-weight: 500; }
.careerbar { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--text); margin: 0 0 1rem; padding: 0; list-style: none; }
.careerbar li { flex: 1 1 8rem; padding: 0.8rem 0.8rem 0.8rem 0; font-size: 0.95rem; }
.careerbar li b { display: block; color: var(--text); font-weight: 500; }
.careerbar li span { font-family: var(--f-mono); font-size: var(--step--1); color: var(--text-muted); }
.disclose { font: inherit; background: none; border: 0; border-bottom: 1px solid var(--seal); color: var(--text); cursor: pointer; padding: 0.5rem 0 0.2rem; min-height: 44px; }
.cap-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3rem var(--gutter); }
.cap-grid h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.cap-grid p { color: var(--text-muted); margin-bottom: 0.8rem; }
.cap-grid ul { list-style: none; padding: 0; margin: 0; }
.cap-grid li { padding: 0.35rem 0; border-top: 1px solid var(--rule-soft); }

/* reveal on load */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 900ms cubic-bezier(.2,.7,.2,1) both; }
  .rise.d1 { animation-delay: 120ms; } .rise.d2 { animation-delay: 260ms; } .rise.d3 { animation-delay: 420ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .enso path { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: brush 2.4s 300ms ease-out forwards; }
  @keyframes brush { to { stroke-dashoffset: 0; } }
}

/* ───────── responsive ───────── */
@media (max-width: 1200px) {
  .prose { grid-column: 4 / span 8; }
  .art-end { grid-column: 4 / span 8; }
  .search input { width: 6.5rem; }
}
@media (max-width: 1080px) {
  :root { --hashira: 0px; }
  .hashira { display: none; }
  .wordmark .seal { display: block; }
  .wordmark { flex-direction: row; align-items: center; gap: 0.75rem; }
  .menu-btn { display: inline-grid; }
  .nav, .bar .search { display: none; }
  .bar.open { flex-wrap: wrap; }
  .bar.open .nav { display: flex; flex-direction: column; align-items: stretch; order: 3; flex-basis: 100%; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
  .bar.open .nav a { font-family: var(--f-display); font-size: 1.4rem; padding: 0.6rem 0; }
  .bar.open .nav a[aria-current="page"]::after { left: auto; right: 0.5rem; top: 50%; bottom: auto; margin-top: -3px; }
  .bar.open .search { display: flex; order: 4; flex-basis: 100%; }
  .bar.open .search input { width: 100%; flex: 1; }
  .toc { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .toc-inner { position: static; }
  .toc details { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .toc details summary { display: flex; justify-content: space-between; min-height: 48px; align-items: center; cursor: pointer; font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); }
  .toc details h2 { display: none; }
  .toc details ol { margin-bottom: 1rem; }
  .toc .tools-inline { display: none; }
  .prose, .art-end, .art-wide { grid-column: 2 / span 10; }
}
@media (max-width: 820px) {
  .field > *, .sect > *, .hero > *, .page-hero > *, .art-head > *, .art-hero > *, .art-layout > *, .kotoba > *, .foot > * { grid-column: 1 / -1 !important; }
  .sect { row-gap: 1.25rem; }
  .sect-mark { flex-direction: row; align-items: center; }
  .sect-mark .v, .sect-mark .n { writing-mode: horizontal-tb; }
  .sect-mark .v { border-left: 0; border-bottom: 1px solid var(--seal); padding: 0 0 0.3rem; font-size: var(--step--1); font-family: var(--f-mono); text-transform: uppercase; }
  .sect-mark .n { font-size: 1.4rem; }
  .hero-aside { margin-top: 3.5rem; max-width: 20rem; justify-self: end; }
  .page-hero .v-title { grid-row: 1; justify-self: start; writing-mode: horizontal-tb; border-right: 0; border-bottom: 1px solid var(--seal); padding: 0 0 0.5rem; margin-bottom: 1.5rem; font-size: 2rem; }
  .art-head .v-date { display: none; }
  .entry { grid-template-columns: 1fr; gap: 0.25rem; }
  .entry .kind { order: -1; }
  .feature, .proj-feature { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .feature .img, .feature .txt, .feature.flip .img, .feature.flip .txt, .proj-feature .img, .proj-feature .txt { grid-column: 1; grid-row: auto; }
  .three { grid-template-columns: 1fr; }
  .three > div, .three > div + div { padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--rule); }
  .timeline > li { grid-template-columns: 1fr; gap: 0.5rem; }
  .cap-grid { grid-template-columns: 1fr; }
  .uses { columns: 1; }
  .newsletter-card { grid-template-columns: 1fr; padding: 1.75rem; }
  .kotoba blockquote { font-size: var(--step-2); }
  .foot .about, .foot nav, .foot .news { grid-column: 1 / -1; }
  .foot { row-gap: 2rem; }
  .tategaki li { max-height: 20rem; font-size: 1.15rem; }
  .prose { font-size: 1.125rem; }
  .enso { display: none; }
}
@media (max-width: 480px) {
  :root { --gutter: 1rem; }
  .code pre { font-size: 0.82rem; }
  .actions { gap: 1rem 1.5rem; }
}

.seal .in { fill: none; stroke: var(--seal-ink); stroke-width: 1; opacity: 0.55; }
.plain { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.plain li { padding: 0.4rem 0; border-top: 1px solid var(--rule-soft); }
.plain li a { text-decoration: none; }
.plain li a:hover { text-decoration: underline; }
.hero-copy { position: relative; }
.enso { z-index: -1; }
.tile .badge { align-self: flex-start; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.sect-mark .n { writing-mode: horizontal-tb; }
.prose .code code { background: none; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }
@media (max-width: 820px) { .sect-mark .v { display: none; } }

.prose-fig { margin: 2em 0 0; }
.prose-fig img { display: block; width: 100%; height: auto; }
.prose blockquote p + p { margin-top: .8em; }
.prose code { overflow-wrap: anywhere; }
.prose a.btn { text-decoration: none; color: var(--bg); }
.prose a.btn:hover { color: var(--bg); background: var(--seal); border-color: var(--seal); }