/* ==========================================================================
   JAPANESE MINIMALISM — one page. Loaded on a/japanese-minimalism.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A run of voids. Each holds one small block; the placement rotates (p1 to
   p8) so every void has a direction. The placements and the small type are
   our art direction, read from one campaign image (Horizon, 2003), not a
   rule: the demonstration shows a centred frame beside a placed one, both
   seen in the work (Identity Resolution, 2026-09-29). The shell
   (rail, top bar, community drawer) is never restyled: every rule here is
   scoped to .jm-hero or .jm-rec, bar the room ground on main.

   Colour is ours: ink on warm paper, no accent.
   paper #F7F5F0 · ink #1C1C1A (16.1:1) · grey #6F6C66 (4.8:1, labels)
   hair #D9D5CC (lines only, never text) · interval #EEEBE3
   Type is ours: Shippori Mincho 400/600 for reading, Zen Kaku Gothic New
   500 for the small spaced labels. Latin subsets; the page sets no Japanese.
   ========================================================================== */

@font-face {
  font-family: "Shippori JM";
  src: url("fonts/shippori-mincho.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shippori JM";
  src: url("fonts/shippori-mincho-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku JM";
  src: url("fonts/zen-kaku-gothic-new-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

.jm-page {
  --jm-paper: #F7F5F0;
  --jm-ink: #1C1C1A;
  --jm-grey: #6F6C66;
  --jm-hair: #D9D5CC;
  --jm-int: #EEEBE3;
  --jm-serif: "Shippori JM", "Hiragino Mincho ProN", Georgia, serif;
  --jm-sans: "Zen Kaku JM", "Helvetica Neue", Arial, sans-serif;
}
.jm-page main { background: var(--jm-paper); color: var(--jm-ink); overflow-x: hidden; }

/* ---- shared register: both roots, nothing outside them ---------------- */
.jm-hero, .jm-rec { font: 400 15px/1.9 var(--jm-serif); color: var(--jm-ink); }
.jm-hero a, .jm-rec a {
  color: inherit;
  text-decoration: underline 1px var(--jm-hair);
  text-underline-offset: 5px;
}
.jm-hero a:hover, .jm-rec a:hover { text-decoration-color: currentColor; }
.jm-hero :focus-visible, .jm-rec :focus-visible { outline: 1px solid var(--jm-ink); outline-offset: 6px; }
.jm-rec em { font-synthesis: style; }
.jm-rec p { margin: 0 0 12px; }

.jm-lab {
  display: block;
  margin: 0;
  font: 500 12px/1.7 var(--jm-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--jm-grey);
}

/* ---- hero: the title low left, the interval high right ----------------- */
.jm-hero { position: relative; min-height: calc(100vh - 64px); }
.jm-interval {
  position: absolute; right: 16%; top: 20%;
  width: min(22vw, 220px); aspect-ratio: 3 / 4;
  background: var(--jm-int);
}
.jm-hero__t { position: absolute; left: 14%; bottom: 18%; max-width: min(300px, 80vw); }
.jm-h1 { margin: 0 0 8px; font: 400 22px/1.4 var(--jm-serif); letter-spacing: 0.08em; }

/* ---- the record: one block per void ------------------------------------- */
.jm-rec { border-top: 1px solid var(--jm-hair); }
.jm-v { display: flex; min-height: 100vh; }
.jm-b { max-width: min(300px, 80vw); }
.jm-b--w { max-width: min(420px, 86vw); }
.jm-b--ww { max-width: min(560px, 88vw); }
.jm-rec h2 { margin: 0 0 14px; font: 600 15px/1.6 var(--jm-serif); letter-spacing: 0.06em; }
.jm-rec .jm-b > .jm-lab:first-child { margin-bottom: 10px; }

/* The void has a direction: placements rotate round the page. */
.jm-p1 { margin: 22vh 12% 10vh auto; }
.jm-p2 { margin: auto auto 16vh 9%; }
.jm-p3 { margin: auto 22% 16vh auto; }
.jm-p4 { margin: 16vh auto 10vh 18%; }
.jm-p5 { margin: 36vh 10% 10vh auto; }
.jm-p6 { margin: auto auto 12vh 12%; }
.jm-p7 { margin: 18vh 16% 10vh auto; }
.jm-p8 { margin: 30vh auto 10vh 22%; }

.jm-q { list-style: none; margin: 0 0 12px; padding: 0; }
.jm-q li { margin-bottom: 10px; }
.jm-q li > .jm-lab { margin-bottom: 2px; }
.jm-costs li::before { content: "— "; color: var(--jm-grey); }
.jm-dx { font-weight: 600; }
.jm-quiet { font-size: 13px; line-height: 1.8; color: var(--jm-grey); }
.jm-n { font-weight: 400; color: var(--jm-grey); }

/* What carries the look: a quiet definition list, hairlines only. */
.jm-car { margin: 16px 0 0; }
.jm-car > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 16px; padding: 6px 0; border-top: 1px solid var(--jm-hair); }
.jm-car dt a { display: inline-flex; align-items: center; min-height: 44px; }
.jm-car dt .jm-lab { font-size: 11px; letter-spacing: 0.16em; }
.jm-car dd { margin: 0; padding-top: 8px; font-size: 14px; }
.jm-car dd > span { display: block; }
.jm-none { color: var(--jm-grey); }
.jm-tags { display: flex; flex-wrap: wrap; gap: 0 14px; }
.jm-tags a { display: inline-flex; align-items: center; min-height: 44px; }
.jm-swatch { display: flex !important; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 4px; font: 12px/1.6 ui-monospace, Menlo, monospace; }
.jm-swatch span { display: inline-flex; align-items: center; gap: 6px; }
.jm-swatch i { width: 14px; height: 14px; box-shadow: inset 0 0 0 1px var(--jm-hair); }

/* The facts. */
.jm-meta { margin: 0 0 16px; }
.jm-meta > div { display: flex; gap: 16px; padding: 4px 0; }
.jm-meta dt { flex: 0 0 120px; font: 500 12px/2.4 var(--jm-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--jm-grey); }
.jm-meta dd { margin: 0; min-width: 0; }
.jm-tw { overflow-x: auto; margin: 0 0 12px; }
.jm-res { border-collapse: collapse; width: 100%; font-size: 13px; }
.jm-res th, .jm-res td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--jm-hair); text-align: left; font-weight: 400; vertical-align: top; }
.jm-res thead th { font: 500 11px/1.6 var(--jm-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--jm-grey); }

/* Neighbours, rules, exits. */
.jm-nb li > .jm-lab { display: inline; margin-left: 6px; font-size: 11px; letter-spacing: 0.16em; }
.jm-nb li > a, .jm-exits a { display: inline-block; padding-block: 8px; }
.jm-nb li > .jm-lab::after { content: ""; display: block; }
.jm-area { margin-bottom: 18px; }
.jm-area h3 { margin: 0 0 8px; padding-top: 8px; border-top: 1px solid var(--jm-hair); }
.jm-ev { font: 500 11px/1.6 var(--jm-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jm-grey); }

/* ---- the demonstration: one void, two placements ------------------------ */
.jm-demo { padding: 14vh 10% 18vh; }
.jm-demo__in { max-width: 720px; margin-left: auto; }
.jm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 80px); margin-top: 10px; }
.jm-pair figure { margin: 0; }
.jm-frame { position: relative; aspect-ratio: 3 / 4; border: 1px solid var(--jm-hair); }
.jm-frame b { position: absolute; font: 600 13px/1.4 var(--jm-serif); max-width: 60%; }
.jm-frame--c b { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.jm-frame--p b { left: 12%; bottom: 14%; }
.jm-pair figcaption { margin-top: 10px; font-size: 13px; line-height: 1.7; }
.jm-demo .jm-demo__note { max-width: 420px; margin: 28px 0 0; font-size: 13px; line-height: 1.8; }
.jm-demo__note .jm-lab { margin-bottom: 2px; }

/* ---- small screens: the voids shorten, the asymmetry stays -------------- */
@media (max-width: 760px) {
  .jm-hero { min-height: auto; padding: 22vh max(16px, 8%) 18vh; }
  .jm-interval { position: relative; right: auto; top: auto; width: 50%; margin: 0 0 10vh auto; }
  .jm-hero__t { position: static; }
  .jm-v { display: block; min-height: auto; padding: 16vh max(16px, 8%) 12vh; }
  .jm-b, .jm-b--w, .jm-b--ww { max-width: none; margin: 0; }
  .jm-p1, .jm-p3, .jm-p5, .jm-p7 { margin-left: 12%; }
  .jm-demo { padding: 12vh max(16px, 8%) 14vh; }
  .jm-pair { gap: 16px; }
  .jm-car > div { grid-template-columns: 1fr; gap: 0; }
  .jm-car dd { padding-top: 0; padding-bottom: 6px; }
  .jm-meta > div { flex-direction: column; gap: 0; }
  .jm-meta dt { flex: none; line-height: 1.7; }
}
@media (max-width: 400px) {
  .jm-p1, .jm-p3, .jm-p5, .jm-p7 { margin-left: 8%; }
}