/* ==========================================================================
   Principles — everything below is derived from these five.
   1  Space is information: every place you can go already exists in the drawing.
   2  One frame language: pointer, focus, touch feedback and legends are crop marks.
   3  Quiet at rest; response grows with intent: rest < near < hover < press < travel.
   4  Read in stillness, move in passage: the camera dwells while words are on screen.
   5  The deeper you go, the smaller the type and the denser the information.
   ========================================================================== */

/* 0 · Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* Palette. The journey interpolates these on <html> while walking through the night room. */
  --paper: #eeede8;
  --ink: #20211f;
  --muted: #5d5f58;
  --blue: #293fe6;
  --alert: #a1261d;
  --line: color-mix(in srgb, var(--ink) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 42%, transparent);

  /* Type */
  --font: Arial, "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --display-1: clamp(52px, min(8.75vw, 17.5svh), 160px);   /* statement */
  --display-2: clamp(48px, min(8.15vw, 16.5svh), 145px);   /* chapters */
  --display-3: clamp(42px, min(6.4vw, 11svh), 116px);      /* information */
  --display-4: clamp(38px, 4.6vw, 84px);                   /* document */
  --text-lead: 16px;
  --text-body: 14px;
  --text-ui: 12px;
  --text-label: 11px;
  --text-caption: 10px;
  --lh-body: 2.15;
  --track-display: -.075em;
  --track-label: .16em;
  --track-ja: .075em;

  /* Space */
  --gutter: clamp(24px, 3.65vw, 72px);
  --edge-l: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  --edge-r: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  --edge-t: calc(31px + env(safe-area-inset-top, 0px));
  --edge-b: calc(31px + env(safe-area-inset-bottom, 0px));
  --panel-top: clamp(96px, 14svh, 155px);
  --panel-bottom: clamp(100px, 15svh, 175px);
  --target: 44px;                                         /* minimum touch target */

  /* Line and frame */
  --lw: 1px;
  --lw-mark: 1.5px;
  --arm: 7px;                                             /* crop-mark arm */
  --frame-pad: 6px;                                       /* gap between a frame and its subject */

  /* Motion: five time scales, three curves. JS derives damping constants from these. */
  --dur-micro: 120ms;     /* press, state flips */
  --dur-hover: 240ms;     /* proximity and hover */
  --dur-reveal: 520ms;    /* layers and content arriving */
  --dur-nav: 900ms;       /* travelling between places */
  --dur-space: 1400ms;    /* the view itself settling */
  --ease-converge: cubic-bezier(.16, 1, .3, 1);   /* focus: fast approach, long settle */
  --ease-pass: cubic-bezier(.65, .05, .36, 1);    /* passage: accelerate, then arrive */
  --ease-release: cubic-bezier(.55, 0, .8, .2);   /* leaving: gather speed, then gone */
  --drift: 28px;          /* panel travel on entry/exit */
  --nudge: 3px;           /* direction preview */
}

@media (min-width: 1600px) {
  :root { --text-lead: 18px; --text-body: 16px; --text-ui: 13px; --text-label: 12px; --text-caption: 11px; }
}

/* 1 · Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scrollbar-gutter: stable;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* The publishing frame resets body to black 14px system text; the site keeps its own ink (which turns light in the
   night room) and type, both set on <html>. */
body { margin: 0; overflow-x: hidden; background: var(--paper); color: inherit; font: inherit; line-break: strict; overflow-wrap: break-word; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
html { word-break: auto-phrase; }
p, li, dd { text-wrap: pretty; }
.profile dd, .cta-mail { overflow-wrap: anywhere; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
::selection { background: var(--blue); color: #fff; }
svg { overflow: visible; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.n { font-variant-numeric: tabular-nums; }

/* 2 · Frame language ------------------------------------------------------- */
/* Keyboard focus, touch press and the pointer all draw the same four crop marks. */
:where(a, button, [role="slider"], .field-choice) { position: relative; }
:focus-visible { outline: none; }
[tabindex="-1"]:focus { outline: none; }
:where(a, button, [role="slider"]):focus-visible::before,
:where(a, button):where(.is-pressed)::before {
  --c: var(--blue);
  content: "";
  position: absolute;
  inset: calc(-1 * var(--frame-pad));
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--arm) var(--lw-mark),
    linear-gradient(var(--c) 0 0) left top / var(--lw-mark) var(--arm),
    linear-gradient(var(--c) 0 0) right top / var(--arm) var(--lw-mark),
    linear-gradient(var(--c) 0 0) right top / var(--lw-mark) var(--arm),
    linear-gradient(var(--c) 0 0) left bottom / var(--arm) var(--lw-mark),
    linear-gradient(var(--c) 0 0) left bottom / var(--lw-mark) var(--arm),
    linear-gradient(var(--c) 0 0) right bottom / var(--arm) var(--lw-mark),
    linear-gradient(var(--c) 0 0) right bottom / var(--lw-mark) var(--arm);
  background-repeat: no-repeat;
  animation: frame-converge var(--dur-hover) var(--ease-converge);
}
:where(a, button):where(.is-pressed)::before { --c: var(--ink); animation-duration: var(--dur-micro); }
@keyframes frame-converge { from { inset: calc(-1 * var(--frame-pad) - 9px); opacity: 0; } }

/* 3 · Stage ---------------------------------------------------------------- */
#space {
  position: fixed; left: 0; top: 0; width: 100%; height: 100lvh;
  pointer-events: none; z-index: 0; display: block;
}
.edge-wash {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, var(--paper), transparent 13%, transparent 86%, var(--paper));
}

/* 4 · Masthead ------------------------------------------------------------- */
.skip-link {
  position: fixed; left: var(--edge-l); top: -100px; z-index: 100;
  padding: 14px 18px; background: var(--ink); color: var(--paper); font-size: var(--text-ui);
}
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.masthead {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 20px;
  padding: calc(var(--edge-t) - 7px) var(--edge-r) 24px var(--edge-l);
  transition: background-color var(--dur-reveal) var(--ease-converge);
}
.wordmark {
  justify-self: start;
  display: inline-flex; align-items: center;
  min-height: var(--target); max-width: 100%;
}
/* 正式SVGの形状と6pxの間隔を保ち、背景の明暗に合わせて色を切り替える。 */
.corporate-logo {
  display: block; width: 145px; height: 24px;
  background-color: currentColor;
  mask: url('/canonicalarc-logo.svg') center / contain no-repeat;
}
.masthead-note {
  justify-self: center;
  font-size: var(--text-caption); letter-spacing: .17em; text-transform: uppercase; white-space: nowrap;
}
.primary-nav { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 30px; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: var(--target);
  font-size: var(--text-ui); color: var(--muted);
  transition: color var(--dur-hover) var(--ease-converge);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-reveal) var(--ease-converge);
}
.primary-nav a:hover, .primary-nav a[aria-current] { color: var(--ink); }
.primary-nav a[aria-current]::after { transform: scaleX(1); }
.doc-mode .masthead { background: var(--paper); }

/* 5 · Stations -------------------------------------------------------------- */
main { display: block; }
main:focus { outline: none; }
.station { position: relative; }
.panel {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  padding: var(--panel-top) var(--edge-r) var(--panel-bottom) var(--edge-l);
  isolation: isolate;
}
.copy { position: relative; width: max-content; max-width: 100%; }
.panel[data-side="left"] .copy { margin-left: 2.7vw; }
.panel[data-side="right"] .copy { margin-left: auto; margin-right: 2.4vw; }

.eyebrow {
  display: flex; align-items: center; gap: 11px; margin: 0 0 clamp(18px, 3.6svh, 33px);
  font-size: var(--text-label); line-height: 1.5; letter-spacing: var(--track-label); text-transform: uppercase;
}
.tiny-dash { flex: none; display: inline-block; width: 19px; height: 1px; background: currentColor; }
.display { font-weight: 400; letter-spacing: var(--track-display); line-height: .985; margin: 0 0 clamp(16px, 3.3svh, 32px); text-wrap: balance; }
.display-1 { font-size: var(--display-1); }
.display-2 { font-size: var(--display-2); }
.display-3 { font-size: var(--display-3); margin-bottom: clamp(14px, 2.6svh, 24px); }
.intro { font-size: var(--text-lead); letter-spacing: .11em; line-height: 1.8; margin: 0 0 30px; }
.body-copy { font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--track-ja); max-width: 36em; }
.body-copy + .body-copy { margin-top: 1em; }
.scene-note {
  position: absolute; bottom: 118px; right: var(--edge-r);
  font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.panel[data-side="right"] .scene-note { left: var(--edge-l); right: auto; }

/* Arrival: the three disciplines are doors to the practice, already visible far down the corridor. */
.disciplines { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: var(--text-ui); letter-spacing: .02em; color: var(--muted); }
.disciplines a {
  display: inline-flex; align-items: center; min-height: 32px; color: var(--muted);
  transition: color var(--dur-hover) var(--ease-converge);
}
.disciplines a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-converge);
}
.disciplines a:hover, .disciplines a:focus-visible { color: var(--ink); }
.disciplines a:hover::after { transform: scaleX(1); }
.disciplines .sep { color: var(--line-strong); }

/* Practice: a legend that maps the list to the drawing. */
.practice-lead { font-size: var(--text-body); letter-spacing: var(--track-ja); line-height: 1.8; margin: 0 0 clamp(12px, 2.6svh, 24px); }
.practice-list { width: min(34rem, 100%); border-bottom: 1px solid var(--line); }
.practice-item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 16px;
  padding: clamp(8px, 1.7svh, 13px) 0 clamp(9px, 1.8svh, 14px); border-top: 1px solid var(--line);
  transition: border-color var(--dur-hover) var(--ease-converge);
}
.legend { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 4px; fill: none; stroke: var(--muted); stroke-width: 1; transition: stroke var(--dur-hover) var(--ease-converge); }
.p-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.p-en { font-size: clamp(19px, 1.65vw, 25px); line-height: 1.22; letter-spacing: -.03em; }
.p-ja { font-size: 12.5px; line-height: 1.75; letter-spacing: .06em; color: var(--muted); transition: color var(--dur-hover) var(--ease-converge); }
.practice-item.is-selected { border-top-color: var(--ink); }
.practice-item.is-selected .legend { stroke: var(--blue); }
.practice-item.is-selected .p-ja { color: var(--ink); }
.business-focus .practice-item { display: block; padding: 0; }
.practice-select { display: grid; grid-template-columns: 20px minmax(0, 1fr) 16px; align-items: center; column-gap: 16px; width: 100%; min-height: 58px; padding: 10px 0; text-align: left; }
.practice-select .legend { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
.practice-select .p-head { grid-column: 2; }
.practice-select .p-ja { grid-column: 2; }
.focus-mark { grid-column: 3; grid-row: 1 / span 2; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.1; color: var(--muted); opacity: .45; transition: opacity var(--dur-hover), color var(--dur-hover); }
.practice-select:hover .focus-mark, .practice-select:focus-visible .focus-mark, .practice-select[aria-pressed="true"] .focus-mark { color: var(--blue); opacity: 1; }
.practice-select[aria-pressed="true"] .p-en { color: var(--blue); }

/* Begin: the call to action says what will happen before it happens. */
.cta-block { margin-top: 32px; width: max-content; max-width: 100%; }
.cta {
  display: grid; grid-template-columns: auto auto; align-items: end; justify-content: space-between; column-gap: 56px;
  min-width: min(300px, 100%); padding: 12px 0 13px; text-align: left;
  border-bottom: 1px solid currentColor;
  transition: border-color var(--dur-micro) linear;
}
.cta-label { font-size: var(--text-body); line-height: 1.3; }
.cta-ja { grid-column: 1; font-size: var(--text-caption); letter-spacing: .1em; color: var(--muted); margin-top: 4px; }
.cta-glyph { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.cta-glyph .g-layer { transition: transform var(--dur-hover) var(--ease-converge); }
.cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-hover) var(--ease-converge);
}
.cta:hover::after, .cta:focus-visible::after { transform: scaleX(1); }
.cta:hover .g-layer, .cta:focus-visible .g-layer { transform: translate(2px, -2px); }
.cta:active { transform: translateY(1px); }
.cta-preview {
  margin-top: 12px; font-size: var(--text-ui); letter-spacing: .06em; line-height: 1.6; color: var(--muted);
  transition: opacity var(--dur-hover) var(--ease-converge), transform var(--dur-hover) var(--ease-converge);
}
@media (hover: hover) {
  .cta-block .cta-preview { opacity: 0; transform: translateY(-4px); }
  .cta-block:hover .cta-preview, .cta-block:focus-within .cta-preview { opacity: 1; transform: none; }
}
.cta-mail { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target); margin-top: 6px; font-size: var(--text-ui); color: var(--muted); }
.cta-mail:hover { color: var(--ink); }
.ext { display: inline-block; transition: transform var(--dur-hover) var(--ease-converge); }
a:hover > .ext, a:focus-visible > .ext { transform: translate(var(--nudge), calc(-1 * var(--nudge))); }

/* 6 · Rule: the corridor in plan. Position, progress and every place you can go. */
.rule {
  position: fixed; z-index: 20;
  left: var(--edge-l); right: var(--edge-r); bottom: var(--edge-b);
  height: 34px;
  transition: opacity var(--dur-reveal) var(--ease-converge), visibility 0s linear 0s;
}
.doc-near .rule { opacity: 0; visibility: hidden; transition: opacity var(--dur-hover) var(--ease-release), visibility 0s linear var(--dur-hover); }
.rule-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.rule-fill { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 55%, transparent); transform: scaleX(0); transform-origin: left; }
.rule-marker { position: absolute; left: 0; top: -6px; width: var(--lw-mark); height: 13px; margin-left: -.75px; background: var(--blue); }
.rule-ticks { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.rule-ticks li { position: absolute; left: calc(var(--at, 0) * 100%); top: 0; }
.rule-ticks a { position: absolute; left: -16px; top: -22px; width: 32px; height: 40px; display: block; }
.tick { position: absolute; left: 50%; top: 18px; width: 1px; height: 9px; margin-left: -.5px; background: var(--line-strong); transition: transform var(--dur-hover) var(--ease-converge), background-color var(--dur-hover) var(--ease-converge); transform-origin: 50% 4px; }
.rule-ticks a[aria-current] .tick { background: var(--ink); transform: scaleY(1.45); }
.rule-ticks a:hover .tick, .rule-ticks a.is-previewed .tick { background: var(--ink); transform: scaleY(1.8); }
.tick-label {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  padding: 3px 6px; white-space: nowrap; background: var(--paper);
  font-size: var(--text-label); letter-spacing: .04em;
  opacity: 0; transform: translate(-50%, 5px); pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease-converge), transform var(--dur-hover) var(--ease-converge);
}
.rule-ticks li:first-child .tick-label { left: 10px; transform: translate(0, 5px); }
.rule-ticks li:last-child .tick-label { left: auto; right: 10px; transform: translate(0, 5px); }
.rule-ticks a:hover .tick-label, .rule-ticks a:focus-visible .tick-label, .rule-ticks a.is-previewed .tick-label { opacity: 1; transform: translate(-50%, 0); }
.rule-ticks li:first-child a:is(:hover, :focus-visible, .is-previewed) .tick-label,
.rule-ticks li:last-child a:is(:hover, :focus-visible, .is-previewed) .tick-label { transform: none; }
.tick-label .n { color: var(--muted); margin-right: 6px; }
.rule-row { position: absolute; left: 0; right: 0; top: 7px; display: flex; align-items: center; justify-content: space-between; }
.rule-current {
  display: inline-flex; align-items: center; gap: 9px; min-height: 30px; padding: 0;
  font-size: var(--text-caption); letter-spacing: .04em; line-height: 1;
}
.rule-current .n { color: var(--muted); }
.index-hint { color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-hover) var(--ease-converge), transform var(--dur-hover) var(--ease-converge); }
.rule-current:hover .index-hint, .rule-current:focus-visible .index-hint { opacity: 1; transform: none; }
.cue {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 22px; min-height: 30px; padding: 0 10px;
  font-size: var(--text-caption); white-space: nowrap;
}
.cue-dest { color: var(--muted); }
.cue-arrow { font-size: 17px; line-height: 1; transition: transform var(--dur-hover) var(--ease-converge); }
.cue:hover .cue-arrow, .cue:focus-visible .cue-arrow { transform: translateY(var(--nudge)); }
.cue[data-dir="up"]:hover .cue-arrow { transform: translateY(calc(-1 * var(--nudge))); }

/* 7 · Document layer: the paper that rises over the model ------------------ */
.document {
  position: relative; z-index: 10;
  --paper: #eeede8; --ink: #20211f; --muted: #5d5f58; --blue: #293fe6;
  background: var(--paper); color: var(--ink);
  border-top: 1px solid var(--line);
}
.sheet {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 6vw;
  padding: clamp(120px, 17svh, 190px) var(--edge-r) clamp(72px, 12svh, 140px) var(--edge-l);
}
.doc-head { align-self: start; position: sticky; top: calc(var(--edge-t) + 96px); }
.doc-title { font-size: var(--display-4); margin-bottom: 18px; }
.doc-title-ja { font-size: var(--text-body); letter-spacing: .12em; color: var(--muted); }
.profile { border-top: 1px solid var(--ink); }
.profile-row {
  display: grid; grid-template-columns: minmax(8.5em, 3fr) minmax(0, 7fr); gap: 4px 28px;
  padding: 17px 0 18px; border-bottom: 1px solid var(--line);
}
.profile-row dt { font-size: var(--text-ui); letter-spacing: .08em; line-height: 1.7; }
.profile-row dt span { display: block; font-size: var(--text-caption); letter-spacing: .06em; color: var(--muted); }
.profile-row dd { font-size: var(--text-body); line-height: 1.8; letter-spacing: .04em; overflow-wrap: anywhere; }
.profile-row dd li + li { margin-top: 2px; }
.unset { color: var(--muted); text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent); text-underline-offset: 5px; }
.provisional { display: inline-block; margin-left: 12px; padding: 1px 6px 2px; border: 1px solid var(--line-strong); font-size: var(--text-caption); letter-spacing: .1em; color: var(--muted); vertical-align: 2px; }
.doc-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.doc-contact .text-button { font-size: var(--text-body); }
.text-button {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--target);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-hover) var(--ease-converge);
}
.text-button:hover { border-bottom-color: currentColor; }
.text-button:disabled { color: var(--muted); }

.colophon {
  position: relative; z-index: 10;
  --paper: #eeede8; --ink: #20211f; --muted: #5d5f58; --blue: #293fe6;
  background: var(--paper); color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding: 18px var(--edge-r) calc(18px + env(safe-area-inset-bottom, 0px)) var(--edge-l);
  border-top: 1px solid var(--line);
  font-size: var(--text-ui);
}
.colophon a, .colophon button { min-height: var(--target); display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }

/* 8 · Dialogs: a layer brought forward; the world behind goes out of focus. */
dialog {
  --paper: #eeede8; --ink: #20211f; --muted: #5d5f58; --blue: #293fe6;
  color: var(--ink); background: var(--paper); border: 0; padding: 0;
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
.contact-dialog.is-scrollable::after {
  content: ""; position: sticky; display: block; left: 0; right: 0; bottom: -28px; height: 30px; margin: -30px -36px -28px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 78%);
  pointer-events: none;
}
dialog::backdrop { background: rgba(21, 23, 33, .42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog[open] { animation: fade-in var(--dur-reveal) var(--ease-converge); }
dialog[open] > :not(.pointer) { animation: rise-in var(--dur-reveal) var(--ease-converge); }
dialog[open]::backdrop { animation: fade-in var(--dur-reveal) var(--ease-converge); }
dialog.is-closing { animation: fade-out var(--dur-hover) var(--ease-release) forwards; }
dialog.is-closing > :not(.pointer) { animation: sink-out var(--dur-hover) var(--ease-release) forwards; }
dialog.is-closing::backdrop { animation: fade-out var(--dur-hover) var(--ease-release) forwards; }
@keyframes rise-in { from { transform: translateY(14px); } }
@keyframes sink-out { to { transform: translateY(8px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
body.has-layer { overflow: hidden; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dialog-head .eyebrow { margin: 0; }
.close-button { display: inline-grid; place-items: center; width: var(--target); height: var(--target); margin: -10px -12px -10px 0; font-size: 27px; font-weight: 300; line-height: 1; }

.contact-dialog { width: min(560px, calc(100% - 32px)); padding: 26px 36px 28px; }
.contact-title { font-size: clamp(34px, min(4.8vw, 5.8svh), 52px); line-height: 1; letter-spacing: -.06em; margin: 18px 0 16px; }
.contact-lead { font-size: var(--text-ui); line-height: 1.9; letter-spacing: .05em; color: var(--muted); max-width: 26rem; }
.notice {
  margin-top: 16px; padding: 12px 14px; font-size: var(--text-ui); line-height: 1.8; letter-spacing: .04em;
  border-left: var(--lw-mark) solid var(--blue); background: color-mix(in srgb, var(--blue) 6%, transparent);
}
.contact-form { margin-top: 8px; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form fieldset:disabled .field label { color: var(--muted); }
.field { margin-top: 16px; }
.field label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--text-ui); letter-spacing: .06em; margin-bottom: 4px; }
.field label span { font-size: var(--text-caption); color: var(--muted); letter-spacing: .08em; }
.field input, .field textarea {
  display: block; width: 100%; padding: 11px 0; border: 0; border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 36%, transparent);
  background: transparent; font-size: 16px; line-height: 1.5; letter-spacing: .02em;
  transition: border-color var(--dur-micro) linear, box-shadow var(--dur-micro) linear;
}
.field textarea { resize: vertical; min-height: 76px; max-height: 280px; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--ink); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.field input:disabled, .field textarea:disabled { border-bottom-style: dashed; }
.field [aria-invalid="true"] { border-bottom-color: var(--alert); box-shadow: 0 1px 0 var(--alert); }
.field-meta { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; margin-top: 6px; font-size: var(--text-caption); line-height: 1.6; color: var(--muted); }
.field-error { color: var(--alert); }
.field-error::before { content: "! "; font-weight: 700; }
.consent { margin-top: 16px; font-size: var(--text-caption); line-height: 1.8; color: var(--muted); letter-spacing: .04em; }
.consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-head { color: var(--ink); font-size: var(--text-label); letter-spacing: .08em; margin-bottom: 6px; }
.consent-list { display: grid; gap: 4px; margin: 0 0 8px; font-size: var(--text-label); line-height: 1.75; }
.consent-list div { display: grid; grid-template-columns: 6.4em minmax(0, 1fr); column-gap: 12px; }
.consent-list dt { color: var(--ink); }
.consent-list dd { margin: 0; }
@media (max-width: 600px) { .consent-list div { grid-template-columns: minmax(0, 1fr); } }
.submit {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  margin-top: 16px; padding: 0 19px; overflow: hidden;
  background: var(--blue); color: #fff; font-size: 13px; letter-spacing: .06em;
  transition: background-color var(--dur-micro) linear;
}
.submit:hover { background: #2333be; }
.submit:active { background: #1d2aa0; }
.submit:disabled { background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--muted); }
.submit .progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.submit[aria-busy="true"] { background: #2333be; color: #fff; }
.submit[aria-busy="true"] .progress { animation: sending 1.6s var(--ease-pass) infinite; }
@keyframes sending { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
.form-status { margin-top: 12px; font-size: var(--text-ui); line-height: 1.8; color: var(--muted); }
.form-status:empty { margin-top: 0; }  /* stays in the accessibility tree so announcements are not lost */
.form-status.is-error { color: var(--alert); }
.contact-done { margin-top: 28px; }
.contact-done h3 { font-size: 22px; font-weight: 400; letter-spacing: .02em; margin-bottom: 10px; }
.contact-done p { font-size: var(--text-ui); line-height: 1.9; color: var(--muted); }
.contact-done:focus { outline: none; }

.index-sheet {
  position: fixed; margin: 0; inset: auto auto calc(var(--edge-b) + 48px) var(--edge-l);
  width: min(400px, calc(100% - 32px)); padding: 24px 28px 20px;
}
.index-list { position: relative; margin-top: 18px; padding-left: 22px; }
.index-list::before { content: ""; position: absolute; left: 4px; top: 22px; bottom: 22px; width: 1px; background: var(--line-strong); }
.index-list a { display: grid; grid-template-columns: 2.4em auto 1fr; align-items: baseline; gap: 8px; min-height: 48px; padding: 14px 0; font-size: 15px; }
.index-list a::after { content: ""; position: absolute; left: -21px; top: 50%; width: 7px; height: 1px; background: var(--line-strong); }
.index-list a[aria-current]::after { left: -22px; width: 9px; height: 9px; margin-top: -4px; background: var(--blue); }
.index-list .n { font-size: var(--text-caption); color: var(--muted); }
.index-list .ja { font-size: var(--text-caption); letter-spacing: .1em; color: var(--muted); justify-self: end; }

/* 9 · Pointer: a frame, not a follower. It locks onto what can be acted on. */
.pointer { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; color: var(--ink); opacity: 0; transition: opacity var(--dur-hover) linear; }
.pointer.is-on { opacity: 1; }
.pointer.is-blue { color: var(--blue); }
.pointer.is-on.is-faint { opacity: .45; }
.pointer.is-text { color: #fff; mix-blend-mode: difference; }
.pf { position: absolute; left: 0; top: 0; will-change: transform; }
.pf i { position: absolute; left: 0; top: 0; width: var(--pa, 5px); height: var(--pa, 5px); border: 0 solid currentColor; will-change: transform; }
.pf .tl { border-top-width: var(--pw, 1px); border-left-width: var(--pw, 1px); }
.pf .tr { border-top-width: var(--pw, 1px); border-right-width: var(--pw, 1px); }
.pf .bl { border-bottom-width: var(--pw, 1px); border-left-width: var(--pw, 1px); }
.pf .br { border-bottom-width: var(--pw, 1px); border-right-width: var(--pw, 1px); }
.pd { position: absolute; left: -1.5px; top: -1.5px; width: 3px; height: 3px; background: currentColor; will-change: transform; transition: opacity var(--dur-micro) linear; }
.pg { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: square; will-change: transform; transition: opacity var(--dur-micro) linear; }
html.pointer-frame, html.pointer-frame * { cursor: none !important; }
html.pointer-frame :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select, [contenteditable]) { cursor: text !important; }
html.pointer-frame :is(input, textarea, select):disabled { cursor: not-allowed !important; }

/* 10 · Layout modes --------------------------------------------------------- */
/* Fixed: panels are scenes in one room; scroll walks between them. */
.layout-fixed .station { height: 150svh; }
.layout-fixed #contact { height: 130svh; }
.layout-fixed .panel {
  position: fixed; inset: 0; height: 100%; min-height: 0; z-index: 4;
  opacity: 0; pointer-events: none; will-change: opacity, transform;
}
.layout-fixed #arrival .panel { opacity: 1; }
.layout-fixed .panel.is-active { pointer-events: auto; }

/* Flow: an ordinary document (reduced motion, content taller than the screen, no JS). */
:is(.layout-flow, .no-js) .station { min-height: 100svh; }
:is(.layout-flow, .no-js) .masthead { background: var(--paper); }
.no-js .eyebrow:has([data-brand]:empty) { visibility: hidden; }
.layout-flow .rule::before { content: ""; position: absolute; left: calc(-1 * var(--edge-l)); right: calc(-1 * var(--edge-r)); top: -14px; bottom: calc(-1 * var(--edge-b)); background: var(--paper); z-index: -1; }
:is(.layout-flow, .no-js) .panel { flex-direction: column; justify-content: center; align-items: stretch; }
:is(.layout-flow, .no-js) .scene-note { position: static; margin-top: 28px; }
:is(.layout-flow, .no-js) .panel[data-side="left"] .scene-note { align-self: flex-start; margin-left: 2.7vw; }
:is(.layout-flow, .no-js) .panel[data-side="right"] .scene-note { align-self: flex-end; margin-right: 2.4vw; }
/* Without a moving camera the night room keeps its own tone instead of turning the whole page. */
html:not(.motion-full) #architect {
  --paper: rgb(24 29 40); --ink: rgb(233 234 227); --muted: rgb(165 173 185); --blue: rgb(120 143 255);
  --line: color-mix(in srgb, var(--ink) 20%, transparent);
  background: var(--paper); color: var(--ink);
}
.motion-reduce #space, .static #space, .no-js #space { display: none; }
.no-js .rule, .no-js .needs-js, .static .rule { display: none; }
html:not(.ready) .needs-ready { visibility: hidden; }

/* Reduced motion: the journey becomes a sequence of plates — the same viewpoints, held still. */
.plate { display: none; }
.motion-reduce.ready .plate {
  display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 62svh;
  border: 1px solid var(--line);
}
.motion-reduce.ready .panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; align-items: center;
}
.motion-reduce.ready .panel .copy { margin: 0; width: auto; }
.motion-reduce.ready .panel[data-side="left"] .plate { grid-column: 2; grid-row: 1; }
.motion-reduce.ready .panel[data-side="right"] .plate { grid-column: 1; grid-row: 1; }
.motion-reduce.ready .panel[data-side="right"] .copy { grid-column: 2; }
.motion-reduce.ready .scene-note { grid-column: 1 / -1; }
.motion-reduce { --dur-micro: 0ms; --dur-hover: 0ms; --dur-reveal: 0ms; --dur-nav: 0ms; --dur-space: 0ms; --drift: 0px; --nudge: 0px; }


/* 12 · Works: three doors inside the Practice scene --------------------------------------------------- */
/* Fixed layout: each entrance is a real link laid exactly over its drawn door (positioned by the renderer).
   At rest it names the work; within reach it says what kind of work; engaged, it says what is inside. */
.entrances { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.layout-fixed .entrance { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; pointer-events: none; }
.layout-fixed .panel.is-active .entrance { pointer-events: auto; }   /* doors take the pointer only in their own scene */
.layout-fixed .entrance[data-object="brand"] { z-index: 3; }
.layout-fixed .entrance[data-object="digital"] { z-index: 2; }
.layout-fixed .entrance[data-object="experience"] { z-index: 1; }
.en-label {
  position: absolute; left: 0; top: calc(100% + 10px);
  width: max-content; max-width: 250px; display: grid; justify-items: start; row-gap: 3px;
  pointer-events: none; transition: opacity var(--dur-hover) var(--ease-converge);
}
.entrance[data-object="experience"] .en-label { left: calc(100% + 14px); top: 0; }
.en-title { font-size: var(--text-label); letter-spacing: .16em; line-height: 1.4; color: var(--ink); transition: color var(--dur-hover) var(--ease-converge); }
.en-type { font-size: var(--text-caption); letter-spacing: .02em; line-height: 1.5; color: var(--muted); }
.en-desc { font-size: var(--text-ui); line-height: 1.75; letter-spacing: var(--track-ja); color: var(--ink); max-width: 240px; margin-top: 5px; }
.en-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--text-caption); letter-spacing: .04em; color: var(--blue); }
.en-go svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.1; }
.layout-fixed .en-type, .layout-fixed .en-desc, .layout-fixed .en-go {
  opacity: 0; transform: translateY(-3px);
  transition: opacity var(--dur-hover) var(--ease-converge), transform var(--dur-hover) var(--ease-converge);
}
.layout-fixed .entrance:is(.is-near, .is-open) .en-type { opacity: 1; transform: none; }
.layout-fixed .entrance.is-open :is(.en-desc, .en-go) { opacity: 1; transform: none; }
.layout-fixed .entrance.is-open .en-title { color: var(--blue); }
.layout-fixed .entrance.is-open .en-label { background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper) 88%, transparent); }
.layout-fixed .entrance:focus-visible::before { inset: -2px; }
/* Practice and works share one place: whichever the visitor engages with comes forward. */
.practice-lead, .practice-item { transition: opacity var(--dur-hover) var(--ease-converge), border-color var(--dur-hover) var(--ease-converge); }
.panel.works-forward :is(.practice-lead, .practice-item:not(.is-selected)) { opacity: .38; }

/* Without the fixed scene (reduced motion, text taller than the screen, no JS): the doors become a short list. */
html:not(.layout-fixed) .entrances { position: static; pointer-events: auto; margin-top: 28px; width: min(34rem, 100%); border-bottom: 1px solid var(--line); }
html:not(.layout-fixed) .panel[data-side="right"] .entrances { margin-left: auto; margin-right: 2.4vw; }
html:not(.layout-fixed) .entrance { display: block; padding: 13px 0 14px; border-top: 1px solid var(--line); }
html:not(.layout-fixed) .en-label { position: static; max-width: none; grid-template-columns: max-content 1fr; column-gap: 14px; align-items: baseline; }
html:not(.layout-fixed) :is(.en-desc, .en-go) { grid-column: 1 / -1; }
html:not(.layout-fixed) a.entrance:hover .en-title { color: var(--blue); }
.motion-reduce.ready .panel .entrances { grid-column: 2; margin: 0; }

/* The work layer: seen through the chosen door, then the whole screen. */
.work-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.work-layer[hidden] { display: none; }
.work-layer.is-live { pointer-events: auto; }
.work-layer.is-fading { opacity: 0; transition: opacity var(--dur-hover) var(--ease-release); }
.work-room { position: absolute; inset: 0; display: block; }
.work-room[hidden] { display: none; }
html.work-active, html.work-active body { overflow: hidden; }
.work-open :is(#space, .edge-wash) { visibility: hidden; }
.site-recede :is(.masthead, .rule, .colophon) { opacity: 0; pointer-events: none; transition: opacity var(--dur-hover) var(--ease-release); }
.site-recede .en-label { opacity: 0; transition-duration: var(--dur-micro); }
.masthead, .colophon { transition: opacity var(--dur-reveal) var(--ease-converge), background-color var(--dur-reveal) var(--ease-converge); }

/* Tall screens: Practice holds longer; the scroll faces one door at a time and its label speaks for it. */
.layout-fixed.composition-vertical #projects { height: 270svh; }
.composition-vertical .entrance[data-object="experience"] .en-label { left: 0; top: calc(100% + 10px); }
.layout-fixed .entrance.en-above .en-label { top: auto; bottom: calc(100% + 10px); }
.layout-fixed .entrance.en-compact .en-desc { display: none; }
.layout-fixed .entrance.en-tight .en-type { display: none; }
.layout-fixed .entrance.en-side .en-label { left: calc(100% + 16px); top: 50%; bottom: auto; transform: translateY(-50%); max-width: 180px; }
.layout-fixed .entrance.en-under .en-label { left: 0; top: calc(100% + 10px); }
.layout-fixed .entrance.en-under.en-above .en-label { top: auto; bottom: calc(100% + 10px); }
.composition-vertical .layout-fixed .entrance.is-faced .en-type,
.layout-fixed.composition-vertical .entrance.is-faced :is(.en-type, .en-desc, .en-go) { opacity: 1; transform: none; }
.layout-fixed.composition-vertical .entrance:not(.is-faced):not(.is-open) .en-label { opacity: 0; }
.layout-fixed.composition-vertical .entrance.is-faced .en-label { background: color-mix(in srgb, var(--paper) 88%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper) 88%, transparent); }

/* foundation opens into its own room; the two planned businesses can still be brought into focus. */
.layout-fixed .entrance.business-pending .en-type { display: block; opacity: 1; transform: none; }
.business-pending { text-align: left; }

/* Pointer: the inner frame appears only at a door. */
.pf-inner { opacity: 0; transition: opacity var(--dur-micro) linear; }
.pf-inner i { width: 5px; height: 5px; }

/* 11 · Composition by aspect and input, not width alone ---------------------- */
/* Tall screens (phones, portrait tablets): words above, the corridor below. */
@media (max-width: 600px), (max-aspect-ratio: 4/5) {
  :root { --panel-top: max(92px, 15svh); --panel-bottom: 120px; }
  .masthead-note { display: none; }
  .panel { align-items: flex-start; }
  .panel[data-side] .copy { margin-left: 0; margin-right: 0; }
  .scene-note { display: none; }
  .motion-reduce.ready .panel { grid-template-columns: minmax(0, 1fr); }
  .motion-reduce.ready .panel[data-side] .plate { grid-column: 1; grid-row: 2; }
  .motion-reduce.ready .panel[data-side] .copy { grid-column: 1; grid-row: 1; }
  .sheet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .masthead-note { display: none; }
  .masthead { grid-template-columns: minmax(0, 1fr) auto; }
  .primary-nav { grid-column: 2; gap: 22px; }
}
@media (max-width: 600px) {
  :root {
    --gutter: 24px;
    --edge-t: calc(24px + env(safe-area-inset-top, 0px));
    --edge-b: calc(20px + env(safe-area-inset-bottom, 0px));
    --display-1: clamp(34px, 12.4vw, 64px);
    --display-2: clamp(32px, 12.1vw, 62px);
    --display-3: clamp(30px, 10.4vw, 54px);
    --text-lead: 14px; --text-body: 13px; --text-ui: 12px; --text-label: 10px; --text-caption: 10px;
    --lh-body: 2;
  }
  .primary-nav a:not([data-keep-mobile]) { display: none; }
  .primary-nav a { font-size: 13px; }
  .eyebrow { gap: 8px; margin-bottom: 22px; letter-spacing: .12em; }
  .tiny-dash { width: 15px; }
  .display { line-height: 1.015; letter-spacing: -.071em; margin-bottom: 22px; }
  .display-3 { margin-bottom: 16px; }
  .intro { letter-spacing: .09em; margin-bottom: 18px; }
  .disciplines a { min-height: var(--target); }
  .practice-lead { margin-bottom: 14px; }
  .practice-item { padding: 10px 0 11px; column-gap: 12px; }
  .layout-fixed .business-focus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-bottom: 0; }
  .layout-fixed .business-focus .practice-item { padding: 0; }
  .layout-fixed .practice-select { display: block; min-height: 62px; padding: 8px 0; }
  .layout-fixed .practice-select :is(.legend, .focus-mark, .p-ja) { display: none; }
  .layout-fixed .practice-select .p-head { display: block; }
  .layout-fixed .practice-select .p-en { font-size: 16px; }
  .p-en { font-size: 19px; }
  .p-ja { font-size: 12px; }
  .cta-block { margin-top: 22px; }
  .cta { column-gap: 48px; }
  .rule { height: 44px; }
  .rule-ticks a { pointer-events: none; }
  .rule-row { top: 4px; }
  .rule-current { min-height: var(--target); font-size: 11px; }
  .index-hint { opacity: 1; transform: none; }
  .cue { position: static; transform: none; min-height: var(--target); padding: 0 0 0 10px; font-size: 11px; gap: 14px; }
  .cue-verb-long { display: none; }
  .contact-dialog { padding: 24px 22px 26px; }
  .index-sheet { inset: auto 0 0 0; width: 100%; max-width: none; max-height: 86dvh; padding: 22px var(--edge-r) calc(22px + env(safe-area-inset-bottom, 0px)) var(--edge-l); }
  .profile-row { grid-template-columns: minmax(0, 1fr); padding: 14px 0 15px; }
  .colophon { flex-direction: column; align-items: flex-start; }
  .edge-wash { background: linear-gradient(to bottom, var(--paper), transparent 12%, transparent 88%, var(--paper)); }
}
/* Short screens (small laptops, phones held sideways): less air, same hierarchy. */
@media (max-height: 640px) and (min-width: 601px) {
  :root { --edge-t: calc(18px + env(safe-area-inset-top, 0px)); --edge-b: calc(16px + env(safe-area-inset-bottom, 0px)); --panel-top: 82px; --panel-bottom: 88px; --text-lead: 13px; --text-body: 12px; --lh-body: 1.85; }
  .masthead { padding-bottom: 10px; }
  .eyebrow { margin-bottom: 14px; }
  .display { margin-bottom: 14px; }
  .intro { margin-bottom: 12px; }
  .scene-note { display: none; }
  .practice-lead { margin-bottom: 10px; }
  .practice-item { padding: 7px 0 8px; }
  .p-en { font-size: 18px; }
  .cta-block { margin-top: 16px; }
}

/* 12 · Environment preferences --------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --muted: #3d3f3a; --line: color-mix(in srgb, var(--ink) 40%, transparent); }
}
@media (forced-colors: active) {
  :where(a, button, [role="slider"]):focus-visible::before { background: none; outline: 2px solid Highlight; inset: -4px; }
  #space, .plate, .edge-wash, .pointer { display: none !important; }
  .rule-marker, .rule-fill, .tick { background: CanvasText; }
}
@media print {
  .masthead, .rule, #space, .edge-wash, dialog, .pointer, .cta-block, .scene-note, .skip-link, .plate { display: none !important; }
  .station, .layout-fixed .station { height: auto; min-height: 0; break-inside: avoid; }
  .panel, .layout-fixed .panel { position: static; height: auto; min-height: 0; opacity: 1 !important; transform: none !important; padding: 24px 0; display: block; }
  .copy, .panel[data-side] .copy { margin: 0; width: auto; }
  .display { font-size: 40px !important; }
  body { padding: 24px; background: #fff; color: #000; }
  .document, .colophon { background: #fff; }
  .sheet { padding: 24px 0; display: block; }
}

/* 日本語の見出しを画面幅に合わせて配置する。 */
@media (max-width: 720px) { .br-wide { display: none; } }
.display-ja { font-size: clamp(26px, min(4.1vw, 8svh), 60px); letter-spacing: .04em; line-height: 1.34; text-wrap: nowrap; }
#arrival-title { font-size: clamp(40px, min(5.2vw, 10svh), 76px); }
.copy { max-width: min(100%, 42rem); }
.contact-title[lang="ja"] { font-size: clamp(28px, 5vw, 46px); letter-spacing: .04em; line-height: 1.4; }
html:not(.layout-fixed) .practice-list { display: none; }
html:not(.layout-fixed) .en-desc { max-width: none; }
@media (max-width: 600px), (max-aspect-ratio: 4/5) { .motion-reduce.ready .panel .entrances { grid-column: 1; } }


/* Review edition: same paper, frames, spatial model and motion language. */
.hero-intro { font-size: 17px; letter-spacing: .055em; margin-bottom: 17px; }
.hero-link { margin-top: 17px; font-size: 12px; color: var(--blue); gap: 30px; }
.masthead-note { text-transform: none; letter-spacing: .07em; }
.display-ja { white-space: normal; text-wrap: balance; }
#arrival-title { font-size:clamp(36px,min(4.6vw,8.8svh),64px); }

.capability-cycle { position:relative; max-width:36em; height:224px; margin-top:24px; }
.cycle-map { position:absolute; inset:0; width:100%; height:224px; color:var(--blue); pointer-events:none; }
.cycle-map g>path { vector-effect:non-scaling-stroke; }
.capability-cycle ol { position:absolute; left:0; right:0; top:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6%; }
.capability-cycle li { display:grid; gap:4px; height:76px; border-top:1px solid var(--line-strong); padding-top:12px; align-content:start; }
.capability-cycle .n { font:10px var(--font-mono); color:var(--blue); }
.capability-cycle strong { font-size:13px; font-weight:400; letter-spacing:.04em; line-height:1.7; }
.capability-cycle li>span:last-child { font-size:11px; line-height:1.7; color:var(--muted); }
.capability-cycle figcaption { position:absolute; left:10%; top:128px; width:80%; display:grid; gap:3px; border-top:1px solid var(--line); padding-top:12px; }
.capability-cycle figcaption strong { color:var(--blue); }
.capability-cycle figcaption>span { color:var(--muted); font-size:11px; line-height:1.8; }
.execution-steps { max-width:36em; margin-top:18px; }
.execution-steps li { display:grid; grid-template-columns:22px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--line); }
.execution-steps .n { font:11px var(--font-mono); color:var(--blue); padding-top:4px; }
.execution-steps h3 { font-size:14px; letter-spacing:.045em; line-height:1.6; }
.execution-steps p { font-size:12px; color:var(--muted); line-height:1.9; margin-top:3px; }
.human-boundary { max-width:39em; padding-top:13px; border-top:1px solid var(--line-strong); font-size:12px; letter-spacing:.035em; line-height:1.95; }
.human-boundary strong { display:block; color:var(--ink); font-weight:400; margin-bottom:3px; }
.shared-foundation { max-width:39em; border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.shared-foundation h3 { display:flex; flex-wrap:wrap; gap:4px 15px; font-size:12px; line-height:1.8; letter-spacing:.035em; }
.shared-foundation h3 [lang="en"] { font-family:var(--font-mono); font-size:12px; color:var(--blue); }
.shared-foundation p { margin-top:6px; font-size:11px; line-height:1.95; color:var(--muted); }
.foundation-link { display:inline-flex; align-items:center; gap:24px; min-height:44px; font-size:11px; color:var(--blue); }
.package-status { color:var(--muted); font-size:11px; line-height:1.8; margin-bottom:14px; max-width:40em; }
.consultation-prompts { margin:20px 0; }
.consultation-prompts li { display:grid; grid-template-columns:24px 1fr; column-gap:12px; border-top:1px solid var(--line); padding:15px 0; font-size:14px; line-height:1.8; }
.consultation-prompts li>span { color:var(--blue); font:11px var(--font-mono); padding-top:5px; }
.practice-select { text-align:left; }
html:not(.layout-fixed) .en-label { grid-template-columns: minmax(0,1fr); }
html:not(.layout-fixed) .en-title { font-size:14px; letter-spacing:.07em; }
html:not(.layout-fixed) .en-type { grid-column:1; margin-top:4px; }
html:not(.layout-fixed) .en-go { min-height:32px; }
@media (max-width: 1100px) { .masthead-note { display:none; } .masthead { grid-template-columns:minmax(0,1fr) auto; } .primary-nav { grid-column:2; gap:20px; } }
@media (max-width: 600px) {
 :root { --text-body:14px; --text-label:11px; --lh-body:2; }
 .display-ja { font-size:clamp(24px,6.9vw,32px); letter-spacing:.015em; line-height:1.42; }
 #arrival-title { font-size:clamp(26px,7.3vw,36px); }
 .hero-intro { font-size:15px; }
 .body-copy { letter-spacing:.035em; }
 .capability-cycle { margin-top:24px; }
 .capability-cycle ol { gap:14px; }
 .capability-cycle li>span:last-child { font-size:10px; letter-spacing:-.02em; }
 .capability-cycle strong { font-size:12px; }
 .execution-steps h3 { font-size:14px; }
 .execution-steps p,.human-boundary { font-size:12px; }
 html:not(.layout-fixed) .panel[data-side="right"] .entrances { margin:24px 0 0; width:100%; }
 .primary-nav a[data-keep-mobile] { font-size:12px; }
 .masthead { gap:12px; }
 .panel { --panel-top:114px; --panel-bottom:116px; }
 .rule-current { font-size:10px; gap:6px; }
 .cue { font-size:10px; gap:10px; }
}
@media print { .capability-cycle,.execution-steps,.human-boundary { break-inside:avoid; } }