/* A · Ma 間 — the interval is the design.
   Pure white. The reading column is narrow and pushed right; the wide left
   margin is left empty on purpose, carrying only the section name. Red is
   rationed to the mark and one drawn thread per transition. */

:root {
  --bg: #FFFFFF;
  --fg: #0B0B0B;
  --muted: #47474C;   /* EB Garamond thin strokes read greyer than the value suggests */
  --faint: #6E6E74;
  --rule: #E8E8E8;
  --wrap: 1220px;
  --label-col: 15rem;
  --gutter: 5rem;
  --measure: 57ch;
  --measure-wide: 46rem;
  --step: clamp(4rem, 7vw, 6.5rem);
  --font-display: 'EB Garamond', 'Zen Old Mincho', 'Garamond Fallback', Georgia, serif;
  --font-jp: 'Zen Old Mincho', serif;
  --font-ui: 'Instrument Sans', 'Zen Old Mincho', system-ui, sans-serif;
  --font-ui-ja: 'Instrument Sans', 'Zen Old Mincho', system-ui, sans-serif;
}

body { font-size: 18.5px; }

/* Type stays small and wide-tracked, the way Japan House does it. Confidence
   here reads as restraint, not scale. */
.headline {
  font-size: clamp(1.85rem, 3.1vw, 2.5rem);
  line-height: 1.24;
  letter-spacing: -0.008em;
  font-weight: 400;
}
html[lang='ja'] .headline { font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.6; }

/* Section headings stay serif and sentence case. Setting every h2 as small
   tracked caps turns the whole page into a column of labels, which is the
   eyebrow tell wearing an h2. The hero kicker is the only tracked caps here. */
h2 {
  font-size: clamp(1.5rem, 1.9vw, 1.7rem);
  font-weight: 400; letter-spacing: -0.008em;
  color: var(--fg);
  margin-bottom: 1.4rem;
}
html[lang='ja'] h2 { font-size: clamp(1.15rem, 1.5vw, 1.32rem); letter-spacing: 0; }

.standfirst { font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--muted); }

/* The spine already draws this line. A second hairline at the same x painted a
   duplicate red mark beside the travelling tip on page heads, and an invisible
   grey-on-grey mark everywhere else. */
.col-label { position: relative; min-height: 1px; }
.slabel { padding-left: 1.1rem; }

.site { border-bottom: 0; }
.site-inner { min-height: 4.75rem; }
.mark { font-size: 1.7em; }

/* contained like the plates: full bleed contradicts a concept built on margin */
.thread { background: transparent; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.thread span { background: var(--accent); opacity: .8; }

/* ---- the spine ----
   The concept's one signature. A hairline living at the label column, with a red
   segment that travels down it as the page scrolls: the 絆 tether drawn through the
   document, and the reader's progress along it. Grey line is the resting state, so
   nothing is lost without support or with reduced motion. */
main { position: relative; }
.spine {
  position: absolute; top: 0; bottom: 0;
  left: max(1.25rem, calc((100% - var(--wrap)) / 2));
  width: 1px; background: var(--rule);
  pointer-events: none;
}
.spine-tip { position: absolute; inset: 0 auto auto 0; width: 1px; height: 2.5rem; background: var(--accent); }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1101px) {
    .spine-tip {
      animation: spine-travel linear both;
      animation-timeline: scroll(root);
    }
    /* `top` in percent, not translateY: a transform percentage resolves against the
       element's own 2.5rem height, so the segment would move 2.5rem and stop. `top`
       resolves against .spine, which is the full height of main. The element is
       out of flow and 1px wide, so this costs nothing to lay out. */
    @keyframes spine-travel {
      from { top: 0; }
      to   { top: calc(100% - 2.5rem); }
    }
  }
}
@media (max-width: 1100px) { .spine { display: none; } }

/* Row headings are the display serif here, sentence case. With the margin labels
   restored, caps on these as well turned the page into a column of shouting. */
.row { border-top: 0; padding: 0 0 2.4rem; }
.row h3 {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--fg); margin-bottom: .35rem;
}
html[lang='ja'] .row h3 { font-size: 1.05rem; }
.rows { border-top: 1px solid var(--rule); padding-top: 2.2rem; }

/* Plates are contained, not full-bleed: full bleed contradicts a concept built on
   margin. The image starts at the spine and runs to the body column's right edge,
   the one element allowed to underlap the margin.

   Shown whole, at the frame's own proportions, rather than cropped into a band.
   Paul's adviser asked for room around the rope, and a band crop takes back
   exactly the margin the picture was recomposed to have: object-fit: cover on a
   21rem strip throws away the top and bottom third of every plate. These frames
   are high key and mostly empty, so at full height they read as air, not weight. */
.b-plate { padding-block: 0; }
.plate {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.plate img { height: auto; }
/* Showing the frame whole makes the picture bigger at every width except the one that
   matters most: at 390 the box goes from 243px to 193px while the subject inside it
   shrinks faster. Hold a floor on small screens; the frame is cropped rather than the
   composition lost, and these plates have margin to spare. */
@media (max-width: 600px) {
  .plate img { height: clamp(15rem, 52vw, 18rem); object-fit: cover; }
}

/* Hero: the headline was floating small in a large void. */
.b-hero { padding-block: calc(var(--step) * 0.9) var(--step); }
.b-hero .headline { font-size: clamp(2rem, 3.4vw, 2.85rem); }
html[lang='ja'] .b-hero .headline { font-size: clamp(1.55rem, 2.8vw, 2.1rem); }

.signals li { border-bottom: 0; padding-block: .8rem; --signal-nudge: 12px; }
.signals li::before { width: 1.9rem; opacity: .75; }

.service { border-top: 1px solid var(--rule); }
.insight { border-top: 1px solid var(--rule); }
.tl { border-top: 1px solid var(--rule); }

.coverage li { font-family: var(--font-display); letter-spacing: -0.01em; }

.btn {
  background: transparent; color: var(--fg);
  border: 1px solid var(--fg);
}
.btn:hover { background: var(--fg); border-color: var(--fg); color: #fff; }


.b-cta { border-top: 1px solid var(--rule); }


@media (max-width: 1000px) {
  
  .slabel { padding-left: 0; }
}

/* The margin note is a note, not an eyebrow: display serif, sentence case, readable.
   This is what takes ma's labelling system out of the tracked-caps count. */
.slabel {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--muted); line-height: 1.45;
}
html[lang='ja'] .slabel { font-size: 14.5px; }