/* =========================================================================
   Portfolio Templates — shared design system
   Reuses the approved home page's visual language (fonts, colors, header).
   One system for all pages. No per-page visual styles.
   ========================================================================= */

:root {
  --paper: #f7f3ea;
  --paper-soft: #fbf8f1;
  --ink: #23231f;
  --muted: #69675f;
  --green: #254b3d;
  --green-soft: rgba(33, 71, 53, 0.18);
  --line: #d8d0c1;
  --accent: #b85c38;   /* terracotta — page-scoped accent, opt-in via body[data-accent="terra"] */

  /* layout scale */
  --frame: 1180px;   /* page content frame */
  --measure: 760px;  /* max body text width  */
  --media: 1100px;   /* max image area width */
  --pad: clamp(20px, 4vw, 72px);
  --section-gap: clamp(28px, 3.5vh, 44px);   /* tightened — was 40-64 */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* trap horizontal trackpad gestures inside the page so macOS swipe-back
     navigation can't pull the page sideways. Must be on the actual scroll
     container (html), and html must remain a scroll container — so we use
     overscroll-behavior alone, NOT overflow-x: clip (which would disable
     scroll-container status). */
  overscroll-behavior-x: contain;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.75;
  overscroll-behavior-x: contain;
}

a { color: inherit; }

img { display: block; max-width: 100%; }

h1, h2, h3, p { margin-top: 0; }

/* ---- Typography scale -------------------------------------------------- */
.eyebrow {
  margin: 0;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 4.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.section-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0;
}

/* ---- Header (identical language to home) ------------------------------- */
.site-header {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 4px var(--pad) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 78px;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #214735;
  color: var(--paper);
  font-family: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
  font-family: "Source Sans 3", "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.site-nav a {
  color: #4A4742;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* ---- Page frame -------------------------------------------------------- */
.frame {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* =========================================================================
   1. CATEGORY INDEX  (sample: Design Works)
   ========================================================================= */

/* ---- Page hero — contained editorial panel (NOT full-bleed) -----------
   Same horizontal container as the site-header (left aligns with logo,
   right aligns with Contact nav). Aspect ~3.4:1, height clamp 300–380px,
   so the Projects section peeks below the fold on a typical desktop.
   --------------------------------------------------------------------- */
.page-hero-frame {
  width: 100%;
  max-width: 1440px;
  margin: 24px auto 0;          /* 24px gap below site-header */
  padding-left: clamp(32px, 4vw, 72px);
  padding-right: clamp(32px, 4vw, 72px);
}

.page-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 38vw, 540px);
  display: flex;
  align-items: center;          /* vertically center the mark + text  */
  overflow: hidden;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(18, 34, 26, 0.34) 0%, rgba(15, 30, 22, 0.54) 100%);
}

/* Page-hero tone variants — shift the bg image hue + overlay color so each
   category page can have a distinct atmosphere while using the same texture
   image. Mark-box stays paper/inverse, h1/p stay white. */
.page-hero--plant-tone .page-hero-bg {
  filter: hue-rotate(70deg) saturate(0.85) brightness(0.95);
}
.page-hero--plant-tone::after {
  background: linear-gradient(180deg, rgba(20, 56, 64, 0.32) 0%, rgba(14, 38, 46, 0.56) 100%);
}
/* Hero mark adopts the tone: white plate with teal ink for Plant-Tech */
.page-hero--plant-tone .page-hero-mark { color: #1f5763; }

.page-hero--field-tone .page-hero-bg {
  /* Base image (hero-design-v2.png) is yellow+green.
     Shift hue slightly negative to push green → yellow-orange while
     keeping the existing yellow warm, then lift brightness. */
  filter: hue-rotate(-22deg) saturate(1.05) brightness(1.08);
}
.page-hero--field-tone::after {
  /* darker burnt-amber overlay so white h1/lead stays legible */
  background: linear-gradient(180deg, rgba(96, 52, 14, 0.42) 0%, rgba(58, 30, 8, 0.64) 100%);
}
/* Hero mark adopts the tone: white plate with deep-amber ink for Field */
.page-hero--field-tone .page-hero-mark { color: #a86a18; }

/* White mark plate — contained rectangle anchored to left, vertically
   centered inside the panel. Tall-rectangle proportion (≈240×300),
   notch at bottom-right. */
.page-hero-mark {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: clamp(190px, 18vw, 240px);
  height: clamp(240px, 23vw, 300px);
  display: flex;
  align-items: flex-end;
  padding: 24px 24px 32px;
  background: var(--paper);
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

.page-hero-text {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 0 clamp(32px, 4vw, 64px);
  max-width: 1440px;            /* wide enough to hold the lead on one line */
  color: var(--paper);
}
.page-hero-text h1 {
  /* PAGE-level title — clearly larger than section h2 (≈40px) */
  margin: 0 0 18px;
  color: var(--paper);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(3rem, 5vw, 4.4rem);     /* 48 → 70px */
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.page-hero-text p {
  /* PAGE-level lead — serif, subtitle weight, single line on desktop */
  margin: 0;
  max-width: none;
  white-space: nowrap;
  color: rgba(247, 243, 234, 0.95);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(16px, 1.3vw, 19px);     /* sweet spot around 18px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

/* page-hero mark label — bigger than section mark label */
.page-hero-mark {
  font-size: 1.02rem;             /* ≈ 16.3px, was 0.92rem */
}

/* First .about-section / .proj-section right after a hero gets a tighter
   top padding (56–72px) so the section starts close to the hero. */
main > .about-section:first-child,
main > .proj-section:first-child {
  padding-top: clamp(36px, 5vh, 52px);
}

/* ---- Phone frame (iOS-style bezel for app screenshots) ---------------
   Black rounded body, dynamic island on top, image fills the inner area.
   Two variants: full (top + bottom bezels) and --cutoff (no bottom, used
   for hero where the device "comes up from below"). */
.phone-frame {
  position: relative;
  width: 100%;
  max-width: 220px;
  padding: 5px 5px;
  background: #1a1a1c;
  border-radius: 32px;
  margin: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
}
.phone-island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 18px;
  background: #000;
  border-radius: 10px;
  z-index: 2;
  pointer-events: none;
}
/* Cutoff variant — top bezels only, bottom is cropped flat. The image is
   shown at its natural width and clipped to ~top 2/3 by container height. */
.phone-frame--cutoff {
  max-width: 340px;
  padding: 6px 6px 0;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
}
.phone-frame--cutoff img {
  border-radius: 32px 32px 0 0;
  /* image is taller than container — overflow clipped, top portion shown */
}
.phone-frame--cutoff .phone-island {
  top: 18px;
  width: 88px;
  height: 22px;
  border-radius: 12px;
}

/* ---- Verdant-style split hero (text + phone visual) ------------------
   Custom hero layout: left = bare-style mark + title + subtitle + lead;
   right = phone frame with cutoff top. Used when the project IS the
   thing being shown (apps, web products). */
.page-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 64px);
  background: transparent;
  height: auto;
  min-height: 0;
  padding: clamp(32px, 5vh, 56px) 0 0;
}
.page-hero--split::after { display: none; }
.page-hero--split .page-hero-mark--bare {
  /* small page mark — same dims as page-hero--bare's mark */
  background: var(--green);
  color: var(--paper);
  width: clamp(150px, 14vw, 160px);
  height: clamp(140px, 13vw, 160px);
  padding: 18px 20px 22px;
  font-size: 0.9rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
}
.page-hero--split .page-hero-mark--bare[data-tone="plant"] { background: #1f5763; }

/* Left column: top group (mark + title) and middle group (tagline + lead).
   space-between keeps the tagline visually centered between the top group
   and the bottom of the phone visual. */
.split-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(64px, 10vh, 110px);
  padding-bottom: clamp(32px, 5vh, 56px);
}
.split-hero-head {
  display: flex;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;     /* title group vertically centered against mark */
}
.split-hero-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.split-hero-title h1 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.2rem, 3.6vw, 3rem);   /* was 2.6→3.6rem, felt heavy */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.005em;
}
.split-hero-subtitle {
  margin: 0;
  color: var(--muted);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(14px, 1.1vw, 16px);    /* shrunk so subtitle stays on one line */
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* Middle group: tagline + lead, sits roughly centered between top and bottom */
.split-hero-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 520px;
}
.split-hero-tagline {
  margin: 0;
  color: #1f5763;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 500;
  line-height: 1.55;
}
.split-hero-lead {
  margin: 0;
  color: #34332d;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
}
.split-hero-visual {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  align-self: end;
}

@media (max-width: 980px) {
  .page-hero--split { grid-template-columns: 1fr; }
  .split-hero-text { padding-bottom: 32px; gap: 32px; }
  .split-hero-visual { justify-content: flex-start; }
  .phone-frame--cutoff { max-width: 280px; }
}

/* ---- App flow (4 phones in a row with labels below) ------------------ */
.app-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 32px);
  margin-top: clamp(28px, 4vh, 48px);
  align-items: start;
}
.app-flow-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.app-flow-step .phone-frame {
  margin: 0 auto;
}
.app-flow-meta {
  display: grid;
  gap: 6px;
  text-align: left;
  max-width: 220px;          /* match phone-frame width so block lines up */
  margin: 0 auto;
  justify-items: start;
}
.app-flow-meta .num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.app-flow-meta h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}
.app-flow-meta p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .app-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-flow-meta p { font-size: 0.85rem; white-space: normal; overflow: visible; }
}
@media (max-width: 600px) {
  .app-flow { grid-template-columns: 1fr; }
}

/* ---- Demo card — refined editorial card -----------------------------
   3 cols: icon+tagline | wordmark+desc+button | QR+caption.
   Stronger card surface (#fff) + soft drop shadow against page paper bg,
   so the card stands forward as a distinct surface. */
.demo-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 44px);
  margin-top: clamp(28px, 4vh, 48px);
  background: #ffffff;
  border: 1px solid rgba(31, 87, 99, 0.10);
  box-shadow: 0 14px 36px rgba(18, 32, 36, 0.08), 0 2px 6px rgba(18, 32, 36, 0.04);
  align-items: start;
}

/* Left + right sides share a small vertical stack */
.demo-side { display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Left: icon + tagline. Icon matches QR width (148px column). */
.demo-icon { margin: 0; width: 100%; }
.demo-icon img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 22px;
  box-shadow: 0 3px 10px rgba(18, 32, 36, 0.10);
}
.demo-tagline {
  margin: 6px 0 0;
  width: 100%;
  text-align: center;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #77826E;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Middle: wordmark + descriptions + button */
.demo-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-wordmark {
  margin: 0 0 8px;
  font-family: "Lora", Georgia, "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 3.6vw, 3.4rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: #2E2E2B;
}
.demo-desc {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", "Lora", serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.01em;
}
/* second sentence sits close to the CTA */
.demo-desc--tight { margin-top: 2px; margin-bottom: 6px; }

/* CTA row — second desc sentence + small button on the same line */
.demo-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.demo-desc--inline { margin: 0; flex: 0 1 auto; }

/* Button — clearly a clickable affordance: pill, teal, arrow, hover lift */
.demo-button {
  justify-self: start;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: #1f5763;
  color: #ffffff;
  border-radius: 999px;
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(31, 87, 99, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.demo-button svg { width: 14px; height: 14px; transition: transform 180ms ease; }
.demo-button:hover {
  background: #174853;
  box-shadow: 0 10px 22px rgba(31, 87, 99, 0.34);
  transform: translateY(-1px);
}
.demo-button:hover svg { transform: translateX(3px); }

/* ~50% button — inline-pill alongside body copy */
.demo-button--sm {
  padding: 6px 14px;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 8px rgba(31, 87, 99, 0.24);
}
.demo-button--sm svg { width: 11px; height: 11px; stroke-width: 1.8; }
.demo-button--sm:hover { box-shadow: 0 5px 12px rgba(31, 87, 99, 0.30); }

/* Ink-coloured small button — used when teal would clash with nearby
   mark-boxes / colored elements. Neutral but high contrast. */
.demo-button--ink {
  background: #2e2e2b;
  box-shadow: 0 3px 8px rgba(30, 28, 24, 0.24);
}
.demo-button--ink:hover {
  background: #1a1a17;
  box-shadow: 0 5px 12px rgba(30, 28, 24, 0.32);
}

/* Right: QR + caption */
.demo-qr {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.demo-qr img {
  width: 100%;
  height: auto;
  border: 1px solid rgba(31, 87, 99, 0.12);
  background: #fff;
  padding: 6px;
  display: block;
}
.demo-qr figcaption {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Caption below the card — no wrap as requested */
.demo-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .demo-card { grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 24px; padding: 24px; }
  .demo-note { white-space: normal; }
}
@media (max-width: 720px) {
  .demo-card { grid-template-columns: 1fr; }
  .demo-side { flex-direction: row; justify-content: flex-start; gap: 16px; }
  .demo-icon { width: 96px; }
  .demo-qr { max-width: 160px; }
}

/* ---- Contact page ----------------------------------------------------
   Minimal labeled blocks: small tracked eyebrow → large editorial value
   → muted note. Three blocks stacked with generous breathing room. */
.contact-section {
  display: grid;
  gap: clamp(44px, 6vh, 72px);
  max-width: 720px;
  padding-top: clamp(28px, 4vh, 44px);
}
.contact-block {
  display: grid;
  gap: 10px;
}
.contact-label {
  margin: 0 0 4px;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.contact-primary {
  justify-self: start;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.98rem;          /* match body-size — was clamp(20-25px) */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 180ms ease;
}
.contact-primary:hover { color: var(--green); }
.contact-note {
  margin: 6px 0 0;
  max-width: 56ch;
  color: var(--muted);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.85;
}
.contact-interests {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
}
.contact-interests li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.98rem;
  line-height: 1.5;
}
.contact-interests li::before {
  content: "—";
  color: var(--green);
  font-weight: 500;
}

/* Closing remark — sits outside the Current Interests block, separated
   by extra vertical space. Hero-subtitle voice: Noto Serif JP at 15px,
   slightly heavier color than body. */
.contact-closing {
  margin: clamp(48px, 7vh, 80px) 0 0;
  color: #2e2d28;                    /* heavier than --muted, slightly */
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

/* ---- Scope list (simple bullet list with editorial styling) ---------- */
/* ---- Field Experience hero variant ----------------------------------
   Long Japanese titles need a smaller h1 to stay one line; structure
   (mark + h1 + subtitle p) stays identical to other detail page heros. */
.page-hero-text--field h1 {
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1.1;
  margin-bottom: 14px;
}

/* ---- Page lead — single intro paragraph just below the hero ----------
   Sits before the first section, slightly elevated body copy. */
.page-lead {
  max-width: 72ch;
  margin: clamp(28px, 4vh, 44px) 0 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: 0.01em;
}
/* Variant: lead's right edge matches the Overview text column of a
   `.proj-grid--text-wide` (image col + gap subtracted). Use on pages
   where the lead sits directly above a text-wide overview. */
.page-lead--align-text-wide {
  max-width: calc(100% - clamp(260px, 28%, 340px) - clamp(28px, 3vw, 48px));
}
/* Variant: force the lead to a single line — never wrap */
.page-lead--nowrap {
  max-width: none;
  white-space: nowrap;
}

/* ---- proj-grid aligned variant — text col stacks prose + link tight
   Double-class selector ensures modifier wins over base .proj-grid rule
   defined later in the file. */
.proj-grid.proj-grid--aligned {
  align-items: start;
  /* widen text col by ~30% vs base proj-grid (1fr / 2fr) */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
}
.proj-grid.proj-grid--aligned .proj-aside--bare {
  justify-self: center;        /* image centered inside its column */
}

/* Wider-text variant — text col fills remaining space, image col sizes
   to the image itself (no wasted whitespace), vertically centered. */
.proj-grid.proj-grid--text-wide {
  grid-template-columns: minmax(0, 1fr) clamp(260px, 28%, 340px);
  align-items: center;
}
.proj-grid.proj-grid--text-wide .proj-aside.proj-aside--bare {
  justify-self: stretch;
  width: 100%;
}
.proj-grid.proj-grid--text-wide .proj-aside.proj-aside--bare img,
.proj-grid.proj-grid--text-wide .proj-aside.proj-aside--bare > a:not(.zoom-hint) img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  border: none;
}
.proj-grid-text {
  display: flex;
  flex-direction: column;
  gap: 28px;                   /* breathing room between prose and ext-link */
}
.proj-grid-text .prose { margin: 0; }

/* Spaced prose — visible gap between paragraphs */
.prose--spaced p { margin: 0 0 14px; }
.prose--spaced p:last-child { margin-bottom: 0; }

/* ---- proj-aside bare — image is the container; thin border only,
   shrink to the image's natural width so the figure hugs the artwork. */
/* Double-class selectors throughout — the base .proj-aside img rule
   (with max-height: 320px) is defined LATER in the file at the same
   single-class specificity. To win regardless of order, bump these
   to (0,2,1). */
.proj-aside.proj-aside--bare {
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  background: transparent;
}
.proj-aside.proj-aside--bare img {
  background: transparent;
  border: 1px solid var(--line);
  filter: none;
  max-height: none;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.proj-aside.proj-aside--bare figcaption {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
/* When the image is wrapped in a zoom-link anchor, the anchor must
   be block + 100% wide, otherwise it shrinks to the image's natural
   size and the figure column shows whitespace around it. */
.proj-aside.proj-aside--bare > a:not(.zoom-hint) {
  display: block;
  width: 100%;
  line-height: 0;
}
.proj-aside.proj-aside--bare > a:not(.zoom-hint) img {
  width: 100%;
  height: auto;
  max-height: none;
  display: block;
}

/* ---- External reference link — small, distinct from body copy -------- */
.ext-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  color: #5e4a26;              /* field tone — matches mark */
  font-family: "Manrope", "Inter", system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 180ms ease, gap 180ms ease;
}
.ext-link svg { width: 11px; height: 11px; transition: transform 180ms ease; }
.ext-link:hover { color: var(--ink); gap: 10px; }
.ext-link:hover svg { transform: translate(2px, -2px); }

/* ---- In-section field figure (on-site photo) ------------------------
   Compact, capped height — used in Field Experience detail pages where
   one supporting photo follows a principle list. */
.field-figure {
  margin: clamp(28px, 4vh, 48px) 0 0;
  display: grid;
  gap: 12px;
}
.field-figure img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
}
.field-figure figcaption {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ---- Field gallery — 3 photos in a row beneath a principle list ----- */
.field-gallery {
  margin: clamp(28px, 4vh, 48px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.field-gallery figure { margin: 0; }
.field-gallery img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border: 1px solid var(--line);
  display: block;
}
.field-gallery figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
@media (max-width: 720px) {
  .field-gallery { grid-template-columns: 1fr; }
  .field-gallery img { height: auto; }
}

/* ---- did-grid: principle-list left + supporting photo right (~1/3) ---- */
.did-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 0.8fr);
  gap: clamp(28px, 3vw, 48px);
  align-items: center;
  margin-top: clamp(20px, 3vh, 32px);
}
/* Side variant of field-figure — uncropped, fits the narrow right column */
.field-figure--side {
  margin: 0;
  justify-self: center;
  max-width: 100%;
}
.field-figure--side img {
  width: 100%;
  max-height: none;
  height: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .did-grid { grid-template-columns: 1fr; }
}

/* Palette grid variant — wider image column (≈ 460px), so the planting
   plan can read at a comfortable size next to the plant list. */
.proj-grid.proj-grid--palette {
  grid-template-columns: minmax(0, 1fr) clamp(210px, 24%, 285px);
}
.proj-grid.proj-grid--palette .proj-aside.proj-aside--bare {
  justify-self: stretch;
  width: 100%;
  /* Top-align with the .plant-list-label on the left column.
     The label has margin-top: clamp(24px, 3vh, 32px), so match it. */
  margin-top: clamp(24px, 3vh, 32px);
  /* Shift the image visually 100px to the left without rejigging the grid */
  transform: translateX(-100px);
}
.proj-grid.proj-grid--palette .proj-aside.proj-aside--bare img,
.proj-grid.proj-grid--palette .proj-aside.proj-aside--bare > a:not(.zoom-hint) img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  border: none;
}
/* zoom-hint sits left-aligned under the image, not centered/floated */
.proj-grid.proj-grid--palette .proj-aside.proj-aside--bare .zoom-hint {
  display: block;
  margin-left: 0;
}

/* Section sub-label that introduces the plant list inside Palette,
   sits above the list with a thin green divider line. */
.plant-list-label {
  margin: clamp(24px, 3vh, 32px) 0 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(31, 87, 99, 0.32);
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.scope-list {
  list-style: none;
  padding: 0;
  margin: clamp(16px, 2vh, 24px) 0 0;
  display: grid;
  gap: 10px;
  max-width: var(--measure);
  counter-reset: scope;
}
/* Plain variant — no numbers, no markers (used for the plant list
   under a Palette section). Tightens to align with the label above. */
.scope-list--plain { margin-top: 12px; counter-reset: none; }
.scope-list--plain li { counter-increment: none; gap: 0; }
.scope-list--plain li::before { display: none; content: none; }
.scope-list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: var(--ink);
  font-size: 0.97rem;
  line-height: 1.5;
  counter-increment: scope;
}
.scope-list li::before {
  content: counter(scope, decimal-leading-zero);
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  flex-shrink: 0;
  transform: none;
  color: #1f5763;
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  min-width: 1.8em;
}

/* ---- BARE page hero (project detail pages: no bg image) --------------
   Compact: mark plate is small (≈160×160) — page-level identifier, not
   visual centerpiece. Title is the focus. */
.page-hero--bare {
  background: transparent;
  height: auto;
  min-height: 0;
  padding: clamp(32px, 5vh, 56px) 0;
  gap: clamp(40px, 4vw, 56px);     /* visual gap between mark and title group */
}
.page-hero--bare::after { display: none; }
.page-hero--bare .page-hero-mark {
  background: var(--green);
  color: var(--paper);
  width: clamp(150px, 14vw, 160px);
  height: clamp(140px, 13vw, 160px);
  padding: 18px 20px 22px;
  font-size: 0.9rem;               /* scale down for the smaller plate */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
/* tone variants for bare hero mark (match section mark-box tone scheme) */
.page-hero--bare .page-hero-mark[data-tone="plant"] { background: #1f5763; }
.page-hero--bare .page-hero-mark[data-tone="field"] { background: #5e4a26; }
.page-hero--bare .page-hero-text {
  padding-left: 0;                 /* gap is on .page-hero, not text */
  color: var(--ink);
}
.page-hero--bare .page-hero-text h1 { color: var(--ink); }
.page-hero--bare .page-hero-text p { color: var(--muted); }

/* Full-width project hero render image, sits inside .page-hero-frame */
.page-hero-frame > .proj-hero,
.page-hero-frame > figure.proj-hero {
  max-width: none;
  width: 100%;
  margin: 24px 0 0;
}
.page-hero-frame > .proj-hero img {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98);
}
.page-hero-frame > .proj-hero figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;          /* compact image caption */
  line-height: 1.7;
}

/* Variant: preserve original image aspect (no crop). Use when the image
   contains readable text/labels that must not be cropped. */
.page-hero-frame > .proj-hero.proj-hero--natural img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* Lead paragraph placed BELOW the hero figure (before main sections).
   Slightly larger serif body — sets the project's tone. */
.proj-lead {
  max-width: 760px;
  margin: clamp(48px, 6vh, 72px) 0 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.8;
}

/* Question / hypothesis statement — used in Research Question style
   sections. Sits at h3 typographic level, serif, ink color. */
.proj-question {
  margin: 0 0 18px;
  max-width: var(--measure);
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.55;
}

/* ---- Info rows (Overview metadata) — home direction-row aesthetic
   without numbers/arrows. Large-label + value, with green-soft dividers. */
.info-rows {
  margin: 0;
  padding: 0;
}
.info-row {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: 10px 0;
  border-top: 1px solid var(--green-soft);
  align-items: baseline;
  transition: background 180ms ease;
}
.info-row:first-child { border-top: none; padding-top: 2px; }
.info-row dt {
  margin: 0;
  color: var(--muted);
  /* Mincho-style label — matches the page's serif headings (h1/h2/h3) */
  font-family: "Noto Serif JP", serif;
  font-size: 0.84rem;             /* ≈13.4px label */
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.info-row dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* ---- Two-column prose + aside-image (image ≈ 2/3 width on the right) */
.proj-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(28px, 3vw, 48px);
  margin-top: clamp(28px, 4vh, 48px);
  align-items: start;
}
.proj-grid .prose { max-width: none; }
.proj-aside { margin: 0; }
.proj-aside img {
  width: 100%;
  /* cap image height to match text column; object-fit:contain preserves
     the floor plan aspect — image renders centered inside this box */
  max-height: 320px;
  object-fit: contain;
  background: var(--paper-soft);
  filter: saturate(0.9) contrast(0.98);
  border: 1px solid var(--line);
}
.proj-aside figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.85;
}

/* ---- Numbered Principle List ------------------------------------------
   Editorial alternative to prose paragraphs for sections like "Design
   Approach". Each principle gets a numbered row with title + body. */
.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.principle-list li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: 16px 20px;
  border-top: 1px solid var(--green-soft);
  align-items: baseline;
}
.principle-list li:first-child {
  border-top: none;
  padding-top: 4px;
}
.principle-list .num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.principle-list h3 {
  margin: 0 0 4px;
  font-family: "Noto Serif JP", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}
.principle-list p {
  margin: 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.72;
}

/* ---- Reflection block --------------------------------------------------
   Intro prose at reading width + a numbered Key Takeaways list. */
.reflection-intro {
  max-width: 840px;
  margin-bottom: clamp(32px, 4vh, 56px);
}
.reflection-intro p {
  margin: 0 0 14px;
  color: #34332d;
  font-size: 1rem;
  line-height: 1.8;
}
.reflection-intro p:last-child { margin-bottom: 0; }
.takeaways-label {
  margin: 0 0 18px;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.takeaway-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 840px;
  display: grid;
  gap: 14px;
}
.takeaway-list li {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 20px;
  padding: 0;
  align-items: baseline;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}
.takeaway-list .num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 650;
}

/* ---- Drawings (3-level presentation: main / analysis-row / zoom) -------
   1) Main drawing: contained inside viewport, object-fit: contain so the
      whole plan reads. 2) Analysis rows: image left 55%, text right 45%,
      one per row so labels stay legible. 3) Click image → opens full-res
      in new tab for label reading. */
.drawings-intro {
  max-width: 760px;
  margin: 0 0 clamp(28px, 4vh, 48px);
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.78;
}

/* Shared: drawing number + title row */
.drawing-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 16px;
}
.drawing-num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.drawing-header h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Drawing image link (clickable for full-res) */
.drawing-link {
  display: block;
  text-decoration: none;
  transition: filter 180ms ease;
}
.drawing-link img {
  display: block;
  width: 100%;
  object-fit: contain;
  background: var(--paper-soft);
  border: 1px solid var(--green-soft);
}
.drawing-link:hover { filter: brightness(0.97); }

.zoom-hint {
  display: inline-block;
  margin-top: 10px;
  color: var(--green);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.zoom-hint:hover { text-decoration: underline; }
.zoom-hint::before {
  content: "＋ ";
  font-weight: 700;
}

/* 1) Main drawing — contained inside viewport */
.drawing-main {
  margin: 0 0 clamp(28px, 4vh, 48px);
}
.drawing-main .drawing-link img {
  max-height: 70vh;
}
.drawing-caption {
  margin: 12px 0 0;
  max-width: 880px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.75;
}

/* Wrapper for a series of .drawing-row items (no list markers) */
.drawing-row-list {
  list-style: none;
  padding: 0;
  margin: clamp(24px, 4vh, 36px) 0 0;
}
/* Compact image-frame for drawings inside a drawing-row */
.drawing-figure {
  margin: 0;
}
.drawing-figure > a {
  display: block;
  line-height: 0;
}
.drawing-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--green-soft);
  background: transparent;
}
/* Shrink the image to 80% of figure width, centered, with the zoom
   hint left-aligned to the image's left edge (not centered text). */
.drawing-figure--small {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.drawing-figure--small > a:not(.zoom-hint) {
  display: block;
  width: 80%;
  line-height: 0;
}
.drawing-figure--small > a:not(.zoom-hint) img {
  width: 100%;
  height: auto;
  display: block;
}
.drawing-figure--small .zoom-hint {
  display: block;
  width: 80%;
  margin: 10px 0 0;
  text-align: left;
}

/* Reversed drawing row — image left, text right. Use the SAME column
   ratio as the base row (0.9 / 1.1) so the text in col 2 starts at
   the same x as the image in col 2 of the row above — aligning the
   reading edge. Vertically center so text sits at image midline. */
.drawing-row.drawing-row--reversed {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
/* Variant that keeps base column order (text left, image right) but
   vertically centers the row, so the text block sits at the image's
   midline (used when text block is much shorter than image). */
.drawing-row.drawing-row--vcenter {
  align-items: center;
}

/* ---- 3-up drawing grid: 1 large left + 2 stacked right -----------
   No fixed row heights — articles use natural height so text hugs
   the image tightly (no flex:1 whitespace around the figure). */
.drawing-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  column-gap: clamp(20px, 2vw, 32px);
  row-gap: clamp(20px, 2vw, 32px);
  margin-top: clamp(24px, 4vh, 36px);
  align-items: start;
}
.drawing-grid-3__main   { grid-column: 1; grid-row: span 2; }
.drawing-grid-3__top    { grid-column: 2; grid-row: 1; }
.drawing-grid-3__bottom { grid-column: 2; grid-row: 2; }

.drawing-grid-3 article {
  display: flex;
  flex-direction: column;
  gap: 6px;            /* uniform tight gap between num / h3 / figure / caption */
}
.drawing-grid-3 .drawing-num {
  display: block;
  margin: 0;
}
.drawing-grid-3 h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}
.drawing-grid-3 .drawing-figure {
  margin: 0;
}
.drawing-grid-3 .drawing-figure > a {
  display: block;
  width: 100%;
  line-height: 0;
}
/* Drawings have NO border / NO background — bare drawing on cream.
   Natural-height image so text wraps tightly above and below. */
.drawing-grid-3 .drawing-figure img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  border: none;
}
.drawing-grid-3 p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.75;
}

/* On 02 / 03 (right column items), num + h3 sit inline on one row.
   On 01 (main left), num stays stacked above h3 (see default flex
   column behavior of the article). */
.drawing-grid-3-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.drawing-grid-3-head h3 { margin: 0; }
.drawing-grid-3-head .drawing-num { display: inline-block; margin: 0; }

/* ---- Plant Palette detail page components ------------------------- */

/* Concept: problem-grid set to 3 columns instead of base 4 */
.problem-grid.problem-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tool Preview — wordmark + intro + button on left, screenshot on right */
.tool-preview {
  display: grid;
  /* image column +15%: was 1 / 1.4 (image 58%), now 1 / 1.7 (image 63%) */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(24px, 4vh, 40px);
  align-items: center;
}
.tool-preview-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tool-wordmark {
  margin: 0;
  font-family: "DM Serif Display", "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);   /* was 2.4-3.4rem, shrunk ~30% */
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: #2e2e2b;
}
.tool-preview-desc {
  margin: 0;
  max-width: 38ch;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.85;
}
.tool-preview-text .demo-button { align-self: flex-start; margin-top: 6px; }
.tool-preview-image {
  margin: 0;
}
.tool-preview-image > a {
  display: block;
  line-height: 0;
}
.tool-preview-image img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(31, 87, 99, 0.18);
  box-shadow: 0 10px 28px rgba(18, 32, 36, 0.10);
}
@media (max-width: 900px) {
  .tool-preview { grid-template-columns: 1fr; }
}

/* Database flow — 6 horizontal steps with arrows between */
.db-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap: 4px clamp(8px, 1.2vw, 16px);
  align-items: stretch;
  margin-top: clamp(28px, 4vh, 44px);
}
.db-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 8px;
  border: 1px solid rgba(31, 87, 99, 0.18);
  background: var(--paper-soft);
  text-align: center;
  min-height: 110px;
}
/* Result cell — subtly distinguished from the others by a denser
   tinted background, no inverted color block */
.db-flow-step--result {
  background: rgba(31, 87, 99, 0.10);
  border-color: rgba(31, 87, 99, 0.32);
}
.db-flow-step--result .db-flow-action { color: #1f5763; }
.db-flow-num {
  display: block;
  color: #1f5763;
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 650;
  line-height: 1;
}
.db-flow-label {
  display: block;
  color: #5d7e85;                /* desaturated teal — paired with the number */
  font-family: "Noto Serif JP", serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.db-flow-action {
  display: block;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}
.db-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.2rem;
  font-family: "Newsreader", serif;
  font-weight: 500;
}
@media (max-width: 900px) {
  .db-flow {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }
  .db-flow-arrow:nth-of-type(2n) { transform: rotate(90deg); }
}

/* How-it-works flow — input tags / "→ 交差検索 →" center / output pools.
   3-col block centered inside the card with equal gaps; vertically the
   three columns center-align so 条件 sits at the same midline as the
   交差検索 label and the 候補池 list. */
.example-flow {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: clamp(40px, 5vw, 80px);
  row-gap: clamp(16px, 2vh, 24px);
  justify-content: center;
  align-items: center;
  margin-top: clamp(28px, 4vh, 44px);
  padding: clamp(22px, 2.4vw, 32px) clamp(28px, 3vw, 44px);
  background: var(--paper-soft);
  border: 1px solid rgba(31, 87, 99, 0.12);
}
.example-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.example-side--in { width: clamp(220px, 24vw, 320px); }
.example-side--out { min-width: 130px; }
.example-side-label {
  margin: 0;
  color: #1f5763;
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Left column: condition tags — emphasised input chips */
.example-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.example-tags li {
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid rgba(31, 87, 99, 0.32);
  border-radius: 999px;
  color: #1f5763;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Right column: candidate pools — quieter, thin dashed outline */
.example-pools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.example-pools li {
  padding: 6px 12px;
  border: 1px dashed rgba(31, 87, 99, 0.32);
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.98rem;
  line-height: 1.4;
  align-self: flex-start;
}

/* Middle column: → 交差検索 → on one row */
.example-middle {
  align-self: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  color: #1f5763;
  white-space: nowrap;
}
.example-arrow {
  color: #1f5763;
  font-family: "Newsreader", serif;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 500;
  line-height: 1;
}
.example-middle-label {
  font-family: "Noto Serif JP", serif;
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* In-card closing note — spans all 3 columns, centered at the bottom */
.example-card-note {
  grid-column: 1 / -1;
  margin: clamp(12px, 1.6vh, 18px) 0 0;
  padding-top: clamp(12px, 1.6vh, 18px);
  border-top: 1px solid rgba(31, 87, 99, 0.16);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
  text-align: center;
}

@media (max-width: 720px) {
  .example-flow {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
  .example-side--in { width: auto; }
}

/* Current Focus + Next Step side-by-side */
.status-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(28px, 4vh, 40px);
}
.status-pair ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.status-pair li {
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}
.status-pair li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1f5763;
}
@media (max-width: 720px) {
  .status-pair { grid-template-columns: 1fr; }
}

/* ---- Hero plan figure — used directly below the page lead -----------
   80% width centered on the page, no border, no background.
   Adds explicit margin-bottom so the next .proj-section reads as a
   normal section break, not a tight follow-on. */
.hero-plan {
  margin: clamp(24px, 4vh, 40px) auto clamp(32px, 5vh, 60px);
  max-width: 80%;
}
.hero-plan > a {
  display: block;
  line-height: 0;
}
.hero-plan img {
  width: 100%;
  height: auto;
  display: block;
  background: transparent;
  border: none;
}
.hero-plan figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .drawing-grid-3 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .drawing-grid-3__main,
  .drawing-grid-3__top,
  .drawing-grid-3__bottom { grid-column: 1; grid-row: auto; }
}

/* 2) Analysis row — image left, text right, one per row */
.drawing-row {
  display: grid;
  /* analysis diagrams are reference material, not heroes: image slightly
     smaller than the explanatory text */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 48px);
  margin: 0 0 clamp(24px, 4vh, 40px);
  align-items: start;
}
/* Reversed variant — text on left, image on right (creates reading rhythm
   shift for render/illustration rows). Renders are more visual, so the
   image can be slightly larger than in the analysis variant. */
.drawing-row--text-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.drawing-row:last-child { margin-bottom: 0; }
.drawing-row .drawing-body { padding-top: 4px; }
.drawing-row .drawing-body p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.78;
}
.drawing-row .drawing-body p:last-child { margin-bottom: 0; }
.drawing-row .drawing-num {
  display: block;
  margin-bottom: 8px;
}
.drawing-row h3 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
}

/* ---- Strata (planting palette layered view) ---------------------------
   Vertical layers read from top (canopy) to bottom (water), echoing the
   project's planting design hierarchy. Each layer: level label / plant
   group + list / role description. */
.palette-intro {
  max-width: 760px;
  margin: 0 0 clamp(24px, 3.5vh, 40px);
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.78;
}
.palette-intro > p { margin: 0 0 14px; }
.palette-intro > p:last-child { margin-bottom: 0; }
.strata {
  display: grid;
}
.strata-layer {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(28px, 3vw, 56px);
  padding: 18px 0;
  border-top: 1px solid var(--green-soft);
  align-items: start;
}
.strata-layer:first-child { border-top: none; padding-top: 0; }

.strata-level {
  margin: 0;
  padding-top: 6px;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.strata-plants h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
}
.strata-plants ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.strata-plants li {
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
}

.strata-role {
  margin: 0;
  padding-top: 4px;
  max-width: 38ch;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.75;
}

/* ---- Problem grid (4-col horizontal icon cards) ----------------------
   For "judgment scenarios" or "pain points" — these are parallel, NOT
   sequential, so no arrows/flow lines. Each card has a number + minimal
   line icon top-right, title, and a question-style one-liner. */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  margin-top: clamp(24px, 4vh, 40px);
}
.problem-card {
  /* full border (distinct from quote block which uses only horizontal lines) */
  display: grid;
  gap: 14px;
  padding: 16px 18px 18px;
  border: 1px solid var(--green-soft);
}
/* Top label row: number + topic tightly grouped on left, icon top-right.
   "01 状態判断" reads as a menu label, the question below is the main copy. */
.problem-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.problem-card .num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.problem-card h3 {
  /* small topic label, tightly bound to the number */
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
}
.problem-card .icon {
  width: 20px;
  height: 20px;
  margin-left: auto;       /* push to top-right corner */
  color: var(--green);
  display: block;
  flex-shrink: 0;
}
[data-tone="plant"] .problem-card .icon,
.problem-grid[data-tone="plant"] .problem-card .icon { color: #1f5763; }
/* The question sentence — main content of the card (menu-style emphasis) */
.problem-card-question {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.92rem;       /* was 1.08rem — felt shouty */
  font-weight: 500;         /* was 700 */
  line-height: 1.75;
}

/* ---- Data flow (3-stage: INPUT → VISUALIZE → SUPPORT) ----------------
   Three-stage diagrammatic flow. Each stage uses different SHAPE +
   visual weight to encode its role:
     INPUT (26%)    — light data-source note: minimal, transparent-ish
     VISUALIZE (38%) — central dashboard window: wider, near-white, shadow
     SUPPORT (26%)  — decision panel: light sage fill, action emphasis */
.data-flow {
  display: grid;
  grid-template-columns: 0.26fr 28px 0.38fr 28px 0.26fr;
  align-items: stretch;
  gap: 0;
  margin: clamp(28px, 4vh, 48px) 0 0;
}
.data-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 20px;
  min-width: 0;
}
.data-stage header {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--green-soft);
}
.data-stage .step {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.16em;
}
.data-stage h4 {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

/* Stage 1 — INPUT: source note with left line, minimal frame */
.data-stage--input {
  background: rgba(31, 87, 99, 0.03);
  border-left: 1.5px solid rgba(31, 87, 99, 0.4);
  padding-left: 16px;
}
.data-stage--input header {
  border-bottom-color: rgba(31, 87, 99, 0.18);
}
.field-tree {
  list-style: none;
  margin: 0;
  padding: 4px 0 0 12px;
  border-left: 1px solid rgba(31, 87, 99, 0.32);
  font-size: 0.88rem;
  color: var(--ink);
}
.field-tree li {
  position: relative;
  padding: 5px 0 5px 14px;
  line-height: 1.4;
}
.field-tree li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  width: 10px;
  height: 1px;
  background: rgba(31, 87, 99, 0.32);
}
.field-tree li::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(31, 87, 99, 0.55);
}
.field-tree ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid rgba(31, 87, 99, 0.22);
}
.field-tree ul li { font-size: 0.84rem; color: var(--muted); }

/* Stage 2 — VISUALIZE: dashboard window — near-white, soft shadow,
   header strip for window/browser feel. The central focus. */
.data-stage--visualize {
  background: #fbfaf4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  padding: 0 18px 20px;
}
.data-stage--visualize header {
  margin: 0 -18px 14px;
  padding: 14px 18px 10px;
  background: rgba(31, 87, 99, 0.05);
  border-bottom: 1px solid rgba(31, 87, 99, 0.15);
}
.data-stage--visualize .step { color: var(--green); }
.data-stage--visualize h4 { color: var(--ink); }
.mini-dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mini-tile {
  background: var(--paper);
  border: 1px solid var(--green-soft);
  padding: 8px 10px;
  display: grid;
  gap: 6px;
}
.mini-tile-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.mini-tile svg {
  display: block;
  width: 100%;
  height: 24px;
}
.mini-tile-value {
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.85rem;
  font-weight: 700;
}
.stage-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Stage 3 — SUPPORT: decision panel — light sage fill, action emphasis */
.data-stage--support {
  background: rgba(31, 87, 99, 0.07);
}
.data-stage--support header { border-bottom-color: rgba(38, 75, 61, 0.22); }
.action-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.action-tags li {
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid rgba(38, 75, 61, 0.4);
  font-size: 0.82rem;
  color: var(--green);
  font-weight: 600;
}
.support-conclusion {
  margin: auto 0 0;        /* push to bottom of flex column */
  padding-top: 12px;
  border-top: 1px solid rgba(38, 75, 61, 0.2);
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Connector arrows between stages */
.data-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  font-size: 1.1rem;
  opacity: 0.45;
}

/* Body text below the 3-stage flow — uses the same prose typography as
   other paragraphs in this section. Sits LOWER (closer to the next
   image, further from the data-flow above) because it semantically
   introduces the dashboard mockup below. */
.data-flow-caption {
  max-width: var(--measure);
  margin: clamp(48px, 6vh, 72px) 0 0;
  color: #34332d;
  font-size: 1rem;
  line-height: 1.78;
}
/* When a caption immediately precedes the dashboard frame, tighten the
   gap between them so they read as one unit (intro + image). */
.data-flow-caption + .dashboard-frame {
  margin-top: clamp(14px, 2vh, 20px);
}

/* ---- Layer sub-section (for "PROTOTYPE", "SYSTEM", etc. that benefit
   from layered presentation rather than side-by-side equal columns) ------
   Pattern: small "Layer 0X" label + Japanese title + intro + figure.
   Use .figure for the dominant/spatial layer, .layer-figure for the
   secondary/system layer (lighter container, smaller image inside). */
.layer {
  margin-top: clamp(36px, 5vh, 56px);
}
.layer-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.layer-num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.layer-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}
.layer-intro {
  margin: 0 0 clamp(18px, 2.5vh, 26px);
  max-width: var(--measure);
  color: #34332d;
  font-size: 0.97rem;
  line-height: 1.78;
}
/* Primary/spatial layer (uses .figure) — slightly smaller than full-frame */
.layer .figure { max-width: 770px; }

/* Secondary/system layer — small image in a lighter container */
.layer-figure {
  max-width: 520px;
  margin: 0;
  padding: clamp(16px, 1.6vw, 24px);
  background: var(--paper-soft);
  border: 1px solid rgba(38, 75, 61, 0.12);
}
.layer-figure img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: auto;
  object-fit: contain;
}
.layer-figure figcaption {
  margin: 12px auto 0;
  max-width: 460px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* ---- Dashboard frame (wraps a UI mockup image) -----------------------
   Lightweight floating container — slightly lighter ivory, subtle border,
   soft shadow. Tiny "DASHBOARD CONCEPT" label sits inside the frame. */
.dashboard-frame {
  margin: clamp(32px, 4vh, 56px) 0 0;
  padding: clamp(20px, 2vw, 28px);
  background: var(--paper-soft);
  border: 1px solid rgba(38, 75, 61, 0.15);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  display: grid;
  gap: 14px;
}
.dashboard-frame-label {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.dashboard-frame img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
}

/* Mobile collapse — 3-stage stacks vertically, arrows rotate */
@media (max-width: 900px) {
  .data-flow {
    grid-template-columns: 1fr;
  }
  .data-flow-arrow {
    height: 24px;
    transform: rotate(90deg);
  }
}

/* ---- Starting-question (quote block) ---------------------------------
   Lightweight callout for "出発点となる問い" type statements. Two-line
   visual: small label + thin green divider + serif statement, slightly
   offset to break out of regular prose without forming its own section. */
.starting-question {
  margin: clamp(36px, 5vh, 56px) 0 clamp(28px, 4vh, 40px);
  max-width: var(--measure);
  display: grid;
  gap: 12px;
}
/* Label and question share the same font-size — reads as a two-line quote
   with a thin lighter-green divider sitting between them. */
.starting-question .label,
.starting-question .question {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
}
.starting-question .label {
  color: var(--green);
  font-weight: 600;
}
.starting-question .question {
  color: var(--ink);
  font-weight: 700;
  padding-left: clamp(20px, 3vw, 40px);   /* slight stagger */
}
.starting-question .divider-line {
  display: block;
  height: 1px;
  /* shorter than the question line below it; lighter than text green */
  width: clamp(260px, 50%, 440px);
  background: rgba(38, 75, 61, 0.35);
}

/* ---- System tree (HTML-styled flow diagram) ---------------------------
   For "system architecture / data flow" visualizations. Renders an
   indented tree with subtle connector lines, plus arrow-connected stages
   below for downstream flow. */
.system-tree {
  margin: clamp(28px, 4vh, 48px) 0;
  max-width: 720px;
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, sans-serif;
}
.system-tree .tree-node {
  display: inline-block;
  padding: 8px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--green-soft);
  font-size: 0.95rem;
  font-weight: 600;
}
.system-tree .tree-node--accent {
  background: rgba(31, 87, 99, 0.06);
  border-color: rgba(31, 87, 99, 0.32);
}
.system-tree .tree-branches {
  margin: 10px 0 12px;
  padding: 0 0 0 24px;
  list-style: none;
  border-left: 1px solid var(--green-soft);
}
.system-tree .tree-branches li {
  position: relative;
  padding: 5px 0 5px 14px;
  font-size: 0.94rem;
}
.system-tree .tree-branches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 10px;
  height: 1px;
  background: var(--green-soft);
}
.system-tree .tree-branches ul {
  margin: 4px 0 0;
  padding-left: 16px;
  list-style: none;
  border-left: 1px solid var(--green-soft);
}
.system-tree .tree-arrow {
  margin: 8px 0;
  color: var(--green);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

/* =========================================================================
   PROGRESS / CURRENT STATUS COMPONENTS — reusable for any in-progress
   project page. Includes: progress-snapshot, progress-focus, process-gallery.
   ========================================================================= */

/* Progress snapshot — two rows (names / statuses) with a single continuous
   line between them. Subtle ivory tint binds the whole strip into one unit.
   Marker shape encodes state: filled = done, ring = active/future. */
.progress-snapshot {
  margin: clamp(20px, 3vh, 32px) 0 0;
  padding: 16px 20px;
  background: rgba(31, 87, 99, 0.035);
}
.progress-names,
.progress-statuses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
}
.progress-names {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--green-soft);
}
.progress-statuses {
  padding-top: 14px;
}
.progress-names .name {
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
}
.progress-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
}
.progress-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;  /* default: filled (used for done) */
  flex-shrink: 0;
}
/* Ring marker for active / next — visually = "not yet a finished thing" */
.progress-status[data-state="active"]::before,
.progress-status[data-state="next"]::before {
  background: transparent;
  border: 1.5px solid currentColor;
  width: 7px;
  height: 7px;
}
/* state colors — green for done/active, yellow for next-stage */
.progress-status[data-state="done"],
.progress-status[data-state="active"] { color: var(--green); }
.progress-status[data-state="next"]   { color: #a87f33; }

/* Sub-headings within Current Status (Current focus / Next step / etc.) */
.progress-focus {
  margin-top: clamp(24px, 3.5vh, 36px);
  max-width: var(--measure);
}
.progress-subhead {
  margin: 0 0 8px;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.progress-focus p {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
}

/* Process gallery — grouped image sub-sections (01 / 02 / 03 ...) */
.process-gallery {
  margin-top: clamp(32px, 4.5vh, 56px);
  display: grid;
  gap: clamp(24px, 4vh, 40px);
}
.process-gallery > .progress-subhead { margin-bottom: 8px; }
.process-group { display: grid; gap: 12px; }
.process-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.process-group-head .num {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.85rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.process-group-head h4 {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.process-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  gap: clamp(12px, 1.5vw, 18px);
}
.process-photos figure { margin: 0; }
.process-photos figure > a {
  display: block;
  text-decoration: none;
  transition: filter 180ms ease;
}
.process-photos figure > a:hover { filter: brightness(0.97); }
.process-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98);
}
.process-photos figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Mobile collapse for progress components */
@media (max-width: 900px) {
  .progress-snapshot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .progress-snapshot { grid-template-columns: 1fr; }
}

/* ---- Status list (inline label/value sublist for "Current Status") --- */
.status-list {
  margin: clamp(16px, 2.5vh, 24px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 560px;
}
.status-list li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  font-size: 0.94rem;
}
.status-list li strong {
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
}
.status-list li span {
  color: var(--green);
  font-weight: 500;
}

/* ---- Photo grid (process / making photos, 2-3 wide) ------------------ */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  margin: clamp(24px, 4vh, 40px) 0 0;
}
.photo-grid figure { margin: 0; }
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98);
}
.photo-grid figcaption {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Mobile collapse for the new components */
@media (max-width: 980px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .status-list li { grid-template-columns: 1fr; gap: 2px; }
  .system-tree { max-width: none; }
  .info-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .info-row dt { font-size: 0.78rem; }
  .proj-grid { grid-template-columns: 1fr; }
  .principle-list li { grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
  .takeaway-list li { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 0; }
  .strata-layer { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .strata-level { padding-top: 0; }
  .drawing-row { grid-template-columns: 1fr; gap: 20px; }
  .drawing-main .drawing-link img { max-height: none; }
}

/* ---- Project rows ---------------------------------------------------- */
.project-rows {
  display: grid;
  padding-bottom: var(--section-gap);
}

.project-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  column-gap: clamp(28px, 3vw, 44px);
  align-items: center;
  /* horizontal padding insets year + arrow so hover bg has room around them */
  padding: 18px 20px;
  border-top: 1px solid var(--green-soft);
  text-decoration: none;
  color: inherit;
  transition: background 180ms ease;
}
.project-row:first-child { border-top: none; }
.project-row:hover { background: rgba(33, 71, 53, 0.045); }
.project-row h3 { transition: color 180ms ease; }
.project-row:hover h3 { color: var(--green); }

.project-row .year {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 1.05rem;
  font-weight: 650;
}

.project-row h3 {
  margin: 0 0 4px;
  font-family: "Noto Serif JP", serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
}

.project-row .tags {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.005em;
}

.project-row .desc {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* end group: thumb + arrow live in one flex slot so the arrow sits next to
   the thumbnail (click affordance), and neither flies past the row edge. */
.project-row .end {
  display: flex;
  align-items: center;
  gap: 14px;
}
.project-row .thumb {
  width: 138px;
  height: 92px;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.97);
}
/* Hairline frame for photo thumbnails — matches the .thumb--wordmark
   border so framed photos sit consistently next to wordmark cards.
   box-sizing: border-box keeps the 138x92 outer size, no layout shift. */
.project-row .thumb--framed {
  border: 1px solid rgba(31, 87, 99, 0.18);
}
/* Placeholder when a project thumbnail isn't ready yet — keeps row layout
   consistent while subtly signaling "image pending". */
.project-row .thumb--placeholder {
  width: 138px;
  height: 92px;
  background: rgba(31, 87, 99, 0.05);
  border: 1px dashed rgba(31, 87, 99, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-row .thumb--placeholder span {
  color: rgba(31, 87, 99, 0.7);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Wordmark thumbnail — white card with the product wordmark centered,
   used for tool projects where a single screenshot doesn't read at
   thumb size. */
.project-row .thumb--wordmark {
  width: 138px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(31, 87, 99, 0.18);
  color: #2e2e2b;
  font-family: "DM Serif Display", "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 1;
  text-align: center;
  filter: none;
}
.project-row .arrow {
  color: var(--green);
  font-size: 1.2rem;
  opacity: 0.5;
  transition: transform 180ms ease, opacity 180ms ease;
}
.project-row:hover .arrow { opacity: 1; transform: translateX(4px); }

/* =========================================================================
   2. PROJECT DETAIL  (sample: 蓮影の回遊庭)
   ========================================================================= */

.proj-header {
  padding: clamp(40px, 6vh, 72px) 0 clamp(28px, 4vh, 40px);
}

.proj-header .eyebrow { margin-bottom: 16px; }

.proj-header h1 {
  max-width: 22ch;
  margin: 0 0 18px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.28;
}

.proj-header .summary {
  max-width: var(--measure);
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
}

/* Hero render — used with restraint (one per project) */
.proj-hero {
  margin: clamp(20px, 3vh, 36px) auto 0;
  max-width: var(--media);
}
.proj-hero img {
  width: 100%;
  max-height: 70vh;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98);
}
.proj-hero figcaption,
.figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* Each section: unified label + title — no dividing lines (mark-box +
   generous padding provide the rhythm, like About). */
.proj-section {
  padding: var(--section-gap) 0;
}

.proj-section > .eyebrow { margin-bottom: 14px; }

.proj-section .section-title { max-width: 24ch; margin: 0 0 28px; }

/* Body text constrained to the reading measure */
.prose { max-width: var(--measure); }
.prose p {
  margin: 0 0 18px;
  color: #34332d;
  font-size: 1rem;
}
.prose p:last-child { margin-bottom: 0; }

/* Meta grid (project overview key/value) */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: var(--measure);
  margin: 0 0 36px;
  background: var(--green-soft);
  border: 1px solid var(--green-soft);
}
.meta-grid div {
  background: var(--paper);
  padding: 16px 20px;
}
.meta-grid dt {
  margin: 0 0 4px;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.meta-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
}

/* Body text inside .prose */
.prose p {
  line-height: 1.78;
}
/* Bullet list inside prose */
.prose ul {
  max-width: var(--measure);
  margin: 0 0 18px;
  padding-left: 1.2em;
  color: #34332d;
}
.prose li { margin-bottom: 6px; }

/* Figures — every image gets a caption */
.figure {
  max-width: var(--media);
  margin: 36px 0 0;
}
.figure img {
  width: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98);
  border: 1px solid var(--line);
}

/* Two-up figure alternation (fig, text rhythm) */
.figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: var(--media);
  margin-top: 36px;
}
.figure-pair .figure { margin-top: 0; max-width: none; }

/* Planting palette as simple grouped lists, not a dense table */
.palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  max-width: var(--measure);
}
.palette section { margin: 0; }
.palette h3 {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--green-soft);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 1.05rem;
}
.palette ul {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  columns: 2;
  color: var(--ink);
  font-size: 0.92rem;
}
.palette p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* back link */
.back-link {
  display: inline-block;
  margin-top: clamp(40px, 6vh, 72px);
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-weight: 650;
  text-decoration: none;
}
.back-link:hover { text-decoration: underline; }

/* =========================================================================
   3. ABOUT  (refined: clearer hierarchy, stronger sections)
   ========================================================================= */

/* ---- Hero: editorial profile opener ----------------------------------
   Left column (text, max ~620px) carries the visual weight via the name.
   Right column (portrait, 300–360px) sits aligned with the name area,
   not floating. Lead is small body type; metadata is a 2-col label/value
   grid, not a list.
   --------------------------------------------------------------------- */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 58fr) minmax(260px, 32fr);
  column-gap: clamp(48px, 8%, 112px);
  /* text block is taller than portrait; vertically center the portrait to it */
  align-items: center;
  padding: clamp(28px, 4vh, 52px) 0 clamp(32px, 5vh, 60px);
}
.about-hero-text { max-width: 620px; }
.about-hero .eyebrow { margin-bottom: 14px; }
/* Group 1 — name + tagline read as one unit */
.about-hero h1 {
  margin: 0 0 14px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.about-hero h1 .alt {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: 0.01em;
}
.identity-line {
  margin: 0 0 22px;             /* was 38 — tightened */
  color: var(--green);
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.1rem, 1.25vw, 1.2rem);  /* ≈ 18-19px */
  font-weight: 500;             /* not too heavy */
  line-height: 1.55;
  letter-spacing: 0.005em;
}
/* Group 2 — lead paragraph: body size, calm reading rhythm */
.about-lead {
  max-width: 560px;
  margin: 0 0 24px;             /* was 38 — tightened */
  color: #34332d;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}
/* Group 3 — metadata: compact two-column profile card */
.profile-meta {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  row-gap: 8px;                 /* was 10 */
  column-gap: 20px;
  /* label (12px serif) and value (14.5px sans) have different intrinsic
     baselines; explicit baseline alignment keeps the rows visually level */
  align-items: baseline;
  margin: 0;
  padding: 14px 0 0;            /* was 20 */
  border-top: 1px solid var(--green-soft);
  max-width: 560px;
}
.profile-meta dt {
  margin: 0;
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  align-self: baseline;
  line-height: 1.5;
}
.profile-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  line-height: 1.5;
}

.about-profile {
  margin: 0;
  width: 100%;
  max-width: 270px;            /* was 300 — 10% smaller */
  justify-self: start;
  align-self: center;
  padding-top: 0;
}
.about-profile img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(0.98);
}

/* ---- Section frame ---------------------------------------------------- */
/* No divider lines — mark-box + tight padding provide the rhythm. */
.about-section {
  padding: clamp(48px, 6vh, 72px) 0;
}

/* =========================================================================
   SECTION HEAD — reusable component (used across About / category / detail)

   Layout:  [ MARK BOX ]   [ TITLE / INTRO ]
   Specs:   mark 180×130 vertical block, bottom-right notch, bottom-left
            anchored uppercase label; right side title (large serif) + intro
            (muted body). Variants by background color via .mark-box[data-tone].
   ========================================================================= */
.section-head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: clamp(32px, 3vw, 44px);
  /* stretch so mark-box bottom aligns with title/intro bottom — one block */
  align-items: stretch;
  margin-bottom: clamp(28px, 4vh, 40px);
}

.mark-box {
  width: 180px;
  min-height: 100px;
  padding: 16px 22px 20px;
  display: flex;
  align-items: flex-end;       /* text anchored vertically centered-toward-bottom */
  justify-content: flex-start; /* text left-aligned */
  background: var(--green);
  color: var(--paper);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.74rem;          /* section-level: smaller than page-hero mark (1.02rem) */
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
  /* bottom-right corner notch — slightly larger */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}
/* color variants — same shape, different ink */
.mark-box[data-tone="plant"] { background: #1f5763; }
.mark-box[data-tone="field"] { background: #c97a1c; }
.mark-box[data-tone="ink"]   { background: var(--ink); }

/* Width / font modifiers for long labels (e.g. "Data Visualization").
   Apply --wide + --small-text together; section-head--compact's grid
   auto-widens via :has(). Plate kept close to default 140 width so h2
   position stays consistent with other sections. */
.mark-box--wide { width: 160px; }
.mark-box--small-text {
  font-size: 0.58rem;
  letter-spacing: 0.05em;
}
.section-head--compact:has(.mark-box--wide) {
  grid-template-columns: 160px minmax(0, 1fr);
}

.section-head h2 {
  margin: 0 0 12px;
  font-family: "Noto Serif JP", serif;
  /* compact: clearly smaller than page-hero h1, comparable to row h3 × 1.5 */
  font-size: clamp(1.5rem, 2.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}
.section-head p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.7;
}
/* keep .eyebrow fallback inside .section-head (for sections not yet migrated) */
.section-head > .eyebrow { padding-top: 10px; }

/* Compact section header — for sections that have title only (no intro).
   Mark plate becomes shorter so it visually matches the title height. */
.section-head--compact {
  align-items: center;
  grid-template-columns: 140px minmax(0, 1fr);
  /* tighter gap than default — mark and title read as one unit */
  gap: clamp(14px, 1.4vw, 20px);
  margin-bottom: clamp(14px, 2vh, 22px);
}
.section-head--compact .mark-box {
  width: 140px;
  min-height: 64px;
  height: auto;
  padding: 12px 18px 14px;
  /* smaller notch matches the smaller plate */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
/* h2 margin-bottom (22px) was designed for title→intro gap; without intro
   it throws off vertical centering — zero it in compact mode. */
.section-head--compact h2 { margin-bottom: 0; }

/* ---- Timeline: selective images, ZEXY row featured -------------------- */
/* No outer borders — only internal row dividers. Use border-top on each
   row (except first) so the first/last edges stay clean. */
.timeline {
  display: grid;
  /* 2-col outer grid: vertical phase pill column / article column.
     Articles still use their own inner grid (date / body / figure). */
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: clamp(8px, 1vw, 14px);   /* tightened — phase pill sits closer to date col */
  row-gap: 0;
  max-width: 1020px;
}

/* Phase pill column */
.timeline > .phase {
  grid-column: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dashed connector that runs through the phase cell vertically.
   Middle phases extend top:0 → bottom:0 (joining adjacent phases).
   First / last phases clip the dash so it doesn't hang off the ends. */
.timeline > .phase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed rgba(33, 71, 53, 0.40);
  transform: translateX(-0.5px);
  z-index: 0;
}
.timeline > .phase--first::before { top: 50%; }
.timeline > .phase--last::before  { bottom: 50%; }

.phase-pill {
  position: relative;
  z-index: 1;
  display: inline-block;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 14px 6px;
  background: var(--paper);
  border: 1px solid var(--green);
  border-radius: 999px;
  color: var(--green);
  font-family: "Noto Serif JP", serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.05;
  white-space: nowrap;
}

/* Articles now live in column 2 of the outer grid; their internal
   3-col grid (date / body / figure) is unchanged. */
.timeline > article { grid-column: 2; }

.timeline article {
  display: grid;
  /* left col matches section-head's 180px mark + clamp(32-44) gap,
     so middle-col text starts at the same x as the section subtitle,
     making the right edges line up naturally via shared 58ch measure.
     Body min-width prevents the figure from squeezing text. */
  grid-template-columns: 180px minmax(280px, 1fr) 200px;
  column-gap: clamp(32px, 3vw, 44px);   /* matches section-head col gap exactly */
  row-gap: 0;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--green-soft);
}
.timeline article:first-child {
  border-top: none;
  padding-top: 0;
}
.timeline article.featured { padding: 22px 0; }
.timeline article.featured:first-child { padding-top: 0; }
.timeline .when {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 0.92rem;          /* was 1.02 */
  font-weight: 650;
  text-align: right;           /* push year toward the middle column */
}
.timeline .when small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.76rem;          /* was 0.82 */
  font-weight: 400;
}
/* NEXT row — future-tense entry. Same column position, italic uppercase
   keyword instead of a year range to mark it as forward-looking. */
.timeline .when--next {
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-style: italic;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline .body h3 {
  margin: 0 0 6px;
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;             /* was 1.08 */
  font-weight: 700;
  line-height: 1.35;
}
.timeline .body p {
  max-width: 58ch;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.88rem;          /* was 0.95 */
  line-height: 1.75;
}
.timeline .body p:last-child { margin-bottom: 0; }
.timeline .body .lead-line {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: "Noto Serif JP", serif;
  font-size: 0.95rem;          /* was 1.05 */
}
.timeline .body .lead-line strong { font-weight: 700; }

.timeline figure {
  margin: 0;
  transform: translateX(-20px);    /* gentle pull-left so figures don't drift to the right edge — was -49 and overlapped body text */
}
@media (max-width: 980px) {
  /* On narrower viewports the body column shrinks; drop the transform
     so the image can't overlap text. */
  .timeline figure { transform: none; }
}
.timeline figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.85) contrast(0.97);
}
.timeline figure figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

/* ---- Beyond Work: identity row + photos + bigger video ---------------- */
.identity-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin: 0 0 clamp(40px, 6vh, 64px);
  padding: 24px 0;
  list-style: none;
  border-top: 1px solid var(--green-soft);
  border-bottom: 1px solid var(--green-soft);
}
.identity {
  display: grid;
  gap: 4px;
}
.identity strong {
  color: var(--green);
  font-family: "Newsreader", "Noto Serif JP", serif;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.identity span {
  color: var(--muted);
  font-size: 0.88rem;
}

/* Observation grid — kept, 4-up mixed orientation */
.observation-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.observation-grid figure { margin: 0; grid-column: span 6; }
.observation-grid figure.tall { grid-column: span 4; }
.observation-grid figure.wide { grid-column: span 8; }
.observation-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.98);
}
.observation-grid figure.tall img { aspect-ratio: 3 / 4; }
.observation-grid figcaption {
  display: block;
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.75;
}
.observation-grid figcaption::before {
  content: "●";
  margin-right: 10px;
  color: var(--green);
  font-size: 0.58em;
  vertical-align: 2px;
}

/* Video card — light card fills the frame; thumbnail enlarged;
   text wrapping stays constrained so the right side reads like before. */
.video-card {
  display: grid;
  grid-template-columns: 460px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 56px);
  /* stretch so right column matches thumbnail height for vertical balance */
  align-items: stretch;
  max-width: none;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--paper-soft);
  text-decoration: none;
  transition: background 180ms ease;
}
.video-card:hover { background: rgba(33, 71, 53, 0.04); }
.video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(0.86);
}
/* right column: title group floats up, Watch link drops down — balanced */
.video-card .meta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  max-width: 460px;
  padding: 4px 0;
}
.video-card .meta-top { display: grid; gap: 12px; }
.video-card strong {
  font-family: "Noto Serif JP", serif;
  font-size: 1.2rem;
  line-height: 1.3;
}
.video-card small {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.75;
}
.video-card em {
  margin-top: 4px;
  color: var(--green);
  font-family: "Newsreader", serif;
  font-style: normal;
  font-weight: 650;
  font-size: 0.95rem;
}

/* ---- Skills 2x2 matrix: explanation blocks, not nav ------------------- */
.skills-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.5vw, 40px) clamp(32px, 4vw, 64px);
}
.skill-block h3 {
  margin: 0 0 6px;
  color: var(--green);
  font-family: "Noto Serif JP", serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.skill-block p {
  margin: 0;
  max-width: 42ch;
  color: #34332d;
  font-size: 0.94rem;
  line-height: 1.75;
}

/* =========================================================================
   Mobile rules — single column, preserve reading order
   ========================================================================= */
@media (max-width: 980px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 18px;
  }
  .site-nav { justify-content: flex-start; }

  .project-row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    column-gap: 24px;
  }
  .project-row .thumb { display: none; }

  /* page hero stacks vertically on narrow widths */
  .page-hero { flex-direction: column; height: auto; }
  .page-hero-mark {
    width: auto;
    max-width: 200px;
    min-height: 80px;
    padding: 14px 18px;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }
  .page-hero-text {
    padding: 24px 20px 32px;
    align-self: flex-start;
  }
  .page-hero-text h1 { font-size: clamp(2.2rem, 7vw, 2.8rem); }

  .figure-pair,
  .palette,
  .meta-grid,
  .skills-matrix,
  .about-hero,
  .section-head,
  .identity-row { grid-template-columns: 1fr; }

  .section-head { gap: 18px; margin-bottom: 40px; }
  .section-head > .eyebrow { padding-top: 0; }
  /* Section mark-box on narrow widths: width flex, but keep a real
     block height so it doesn't look like a flat horizontal pill */
  .mark-box {
    width: auto;
    max-width: 240px;
    min-height: 60px;
    padding: 14px 18px 16px;
    align-items: flex-end;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  }

  /* hero: portrait moves BELOW the text on narrow widths (between hero
     and the Timeline section that follows) */
  .about-hero { row-gap: 32px; }
  .about-profile { max-width: 320px; padding-top: 0; order: 1; }
  .about-hero h1 { font-size: clamp(2.1rem, 6vw, 2.8rem); }
  .profile-meta { grid-template-columns: 130px minmax(0, 1fr); }

  .identity-row { gap: 14px; padding: 18px 0; }

  .timeline article { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
  .timeline figure { grid-column: 1 / -1; max-width: 360px; margin-top: 8px; }

  .video-card { grid-template-columns: 240px minmax(0, 1fr); }

  .observation-grid figure,
  .observation-grid figure.tall,
  .observation-grid figure.wide { grid-column: span 6; }
}

@media (max-width: 640px) {
  :root { --pad: 22px; }   /* was 16, bumped for half-char breathing room */

  .project-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    column-gap: 16px;
  }

  .timeline article { grid-template-columns: 1fr; gap: 6px; }
  .timeline img { max-width: 100%; }

  .video-card { grid-template-columns: 1fr; }
  .video-card em { grid-column: auto; }

  .observation-grid { grid-template-columns: 1fr; }
  .observation-grid figure,
  .observation-grid figure.tall,
  .observation-grid figure.wide { grid-column: auto; }

  .palette ul { columns: 1; }
  .problem-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBILE FIXES — comprehensive pass for ≤720px
   Resolves: subtitle wrap / category mark height / all proj-grid variants
   stacking / page-lead width / Family Garden reversed row stack /
   global side padding breathing room
   ========================================================================== */
@media (max-width: 720px) {
  /* === Global breathing room — add ~half-char of side padding === */
  :root { --pad: 24px; }
  .page-hero-frame {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  /* === Hero subtitle: allow wrap (was white-space: nowrap, overflowed) === */
  .page-hero-text p {
    white-space: normal;
    max-width: none;
  }

  /* === Hero stacks vertically AND pins mark to the top-left.
     Without this, .page-hero's default align-items: center would
     horizontally center the mark plate when columns become column. */
  .page-hero,
  .page-hero--bare {
    align-items: flex-start;
    gap: 18px;       /* tightened from desktop clamp(40, 4vw, 56px) */
  }
  .page-hero-mark { align-self: flex-start; }

  /* === On category pages (hero with bg image), the mark plate
     competes with the photo and adds clutter on mobile. Hide it
     entirely. Bare detail pages keep their mark since it carries
     the project-type label. === */
  .page-hero .page-hero-bg ~ .page-hero-mark {
    display: none;
  }
  /* Category hero: fixed 4:3 aspect via height = 75% of width;
     title block absolutely positioned and translated to the vertical
     midpoint of the photo. Absolute positioning is used because the
     flex justify-content path was being overridden by an earlier
     980px-block rule somewhere in the cascade. */
  .page-hero:not(.page-hero--bare) {
    position: relative;
    display: block;
    height: 75vw;             /* 4:3 → height = 0.75 × width */
    min-height: 320px;
    max-height: 520px;
    overflow: hidden;
  }
  .page-hero:not(.page-hero--bare) .page-hero-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 24px;
    width: 100%;
  }
  .page-hero:not(.page-hero--bare) .page-hero-text h1 {
    font-size: clamp(1.9rem, 6.5vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 10px;
  }
  .page-hero:not(.page-hero--bare) .page-hero-text p {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.65;
  }

  /* === Bare detail hero mark: compact === */
  .page-hero--bare .page-hero-mark {
    width: auto;
    max-width: 180px;
    height: auto;
    min-height: 52px;
    padding: 10px 14px 12px;
    align-items: flex-end;
  }
  /* hero text pulls closer to the mark on mobile */
  .page-hero--bare .page-hero-text { padding: 4px 0 24px; }

  /* page-lead with nowrap variant (Family Garden) — wrap on mobile */
  .page-lead--nowrap { white-space: normal; }
  /* Bare hero h1 wraps freely; allow longer wraps for Japanese titles */
  .page-hero-text--field h1,
  .page-hero-text h1 { word-break: keep-all; overflow-wrap: anywhere; }

  /* === All .proj-grid variants collapse to single column ============= */
  .proj-grid,
  .proj-grid.proj-grid--aligned,
  .proj-grid.proj-grid--text-wide,
  .proj-grid.proj-grid--palette {
    grid-template-columns: 1fr;
    align-items: start;
  }
  /* Palette image had margin-top + transform: translateX(-100px) on desktop
     — reset both so it sits naturally below the plant list */
  .proj-grid.proj-grid--palette .proj-aside.proj-aside--bare {
    margin-top: clamp(20px, 3vh, 28px);
    transform: none;
    justify-self: start;
  }
  /* proj-aside--bare may have been fit-content + justify-self: end on
     desktop — stretch to full width on mobile */
  .proj-aside.proj-aside--bare {
    justify-self: stretch;
    width: 100%;
  }

  /* === page-lead--align-text-wide: the calc shrinks lead to a sliver
     on mobile (subtracting a desktop image-col). Remove that cap. */
  .page-lead--align-text-wide { max-width: 100%; }

  /* === did-grid (Expo "What I Did") stacks vertically === */
  .did-grid { grid-template-columns: 1fr; }
  .field-figure--side {
    margin: clamp(20px, 3vh, 28px) 0 0;
    justify-self: start;
    max-width: 100%;
  }

  /* === Family Garden #02 reversed row: undo reversed order so it
     matches #01 visually (text above, image below). drawing-row's
     own ≤900 media query already sets 1fr; here we force the
     reversed variant to put body first via flex order. */
  .drawing-row.drawing-row--reversed {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vh, 24px);
  }
  .drawing-row.drawing-row--reversed > .drawing-body { order: 0; }
  .drawing-row.drawing-row--reversed > .drawing-figure { order: 1; }

  /* === Drawing-figure--small: stop centering at 80%, fill row === */
  .drawing-figure--small > a:not(.zoom-hint) { width: 100%; }
  .drawing-figure--small .zoom-hint { width: 100%; }

  /* === drawing-grid-3 already collapses at 900px — make sure it's
     comfortable here too (gap reduction) === */
  .drawing-grid-3 { row-gap: clamp(20px, 3vh, 32px); }

  /* === Hero-plan (Family Garden CAD) — relax 80% cap so it shows
     more usable area on small screens === */
  .hero-plan { max-width: 100%; }

  /* === Section padding bottom on first item right after hero — bumped
     up so cards aren't flush with hero plate === */
  main > .proj-section:first-child { padding-top: clamp(28px, 4vh, 40px); }

  /* === Split hero (Verdant / Plant Palette) — already collapses at
     980px but tighten the phone visual area === */
  .phone-frame--cutoff { max-width: 240px; }

  /* === Contact subtitle === */
  .contact-section { padding-top: clamp(20px, 3vh, 28px); }

  /* === info-rows breath on mobile === */
  .info-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
}

/* =========================================================================
   ACCENT (terracotta) — page-scoped, opt-in via body[data-accent="terra"]
   Applied to: small numeric labels, year ranges, NEXT marker, nav
   current-page underline, external-link affordances, sub-page entry arrows.
   Does NOT affect: mark-box section tones, body text, dividers, section
   eyebrow labels (.takeaways-label, .starting-question .label stay green).
   ========================================================================= */
body[data-accent="terra"] .principle-list .num,
body[data-accent="terra"] .takeaway-list .num,
body[data-accent="terra"] .problem-card .num,
body[data-accent="terra"] .timeline .when,
body[data-accent="terra"] .timeline .when--next,
body[data-accent="terra"] .project-row .year,
body[data-accent="terra"] .identity strong,
body[data-accent="terra"] .observation-grid figcaption::before {
  color: var(--accent);
}

/* Nav current-page underline (hover stays green — transient state) */
body[data-accent="terra"] .site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* External links — ext-link (公式サイト) + contact email/github.
   Border uses currentColor so the underline follows. */
body[data-accent="terra"] .ext-link,
body[data-accent="terra"] .contact-primary {
  color: var(--accent);
}
body[data-accent="terra"] .ext-link:hover,
body[data-accent="terra"] .contact-primary:hover {
  color: var(--ink);
}

/* Sub-page entry arrow on category (second-level) pages */
body[data-accent="terra"] .project-row .arrow {
  color: var(--accent);
}

/* =========================================================================
   SITE FOOTER (global, all pages)
   ========================================================================= */
.site-footer {
  width: 100%;
  margin-top: clamp(60px, 8vh, 100px);
}
.site-footer-inner {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 22px var(--pad) clamp(36px, 5vh, 56px);
  text-align: left;
}
.site-footer-tag,
.site-footer-copy {
  margin: 0;
  font-family: "Noto Sans", "Noto Sans JP", system-ui, sans-serif;
  font-weight: 400;
  color: var(--ink);
}
.site-footer-tag {
  font-size: 14px;
  opacity: 0.75;
  margin-bottom: 6px;
}
.site-footer-copy {
  font-size: 12px;
  opacity: 0.5;
}
.site-footer-tag .tag-mobile { display: none; }
@media (max-width: 720px) {
  .site-footer-inner {
    padding: 56px 40px 72px;
  }
  .site-footer-tag {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(51, 51, 48, 0.72);
    opacity: 1;
    max-width: 420px;
    margin-bottom: 0;
  }
  .site-footer-copy {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(51, 51, 48, 0.55);
    opacity: 1;
  }
  .site-footer-tag .tag-desktop { display: none; }
  .site-footer-tag .tag-mobile { display: inline; }
}