/* ============================================================
   山崎事務所 Static Prototype — 白黒帯トーン版
   （旧: 黒フルブリードHero版からの置き換え。同一content/構造・新visual）
   ============================================================ */
:root{
  --paper:   #FFFFFF;
  --ink:     #1C1C1A;
  --band:    #0D0D0C;
  --on-band: #FFFFFF;
  --grey:    #8E8B85;
  --hairline:#E3E3E3;
  --ease:    cubic-bezier(.77, 0, .18, 1);
  --ease-soft: cubic-bezier(.45, 0, .2, 1);
  /* 2026-07-10, owner review: shared "normal body prose" measure, replacing
     ~16 independently-chosen per-page max-width values (20em-52em) that
     caused visibly inconsistent line lengths across pages and, in Evidence's
     own "登壇・コミュニティ運営" paragraph, an orphaned trailing clause
     ("磨かれてきた" / "ものです。" split across lines). 48rem was derived
     empirically (not guessed): it's the narrowest value that resolves that
     paragraph to one line, and re-verified across every other page's normal
     body paragraphs (Home/Engagement/Judgment Lineage/Evidence/Thinking/
     Profile/Contact) with zero regressions (line counts only ever stayed the
     same or improved). Uses `rem` (root-relative), not `em`, specifically so
     every selector below resolves to the exact same 768px ceiling regardless
     of that selector's own local font-size — true pixel consistency, not
     just similar-looking values. Headings, short "lede"/thesis statement
     lines, card/teaser copy, and Evidence's 3-column theme cards are
     deliberately EXCLUDED — those are short-line-by-design, not the
     "prose reads too narrow" problem this variable fixes. */
  --prose: 52rem;
  /* 2026-07-10, owner review: shared "must-be-read" muted-text color,
     replacing var(--grey) (#8E8B85) on selectors that carry actual content
     (descriptions, captions, list hints, index numbers meant to register as
     a count) rather than pure decoration. var(--grey) itself is untouched
     and still used by genuinely decorative labels/bullets/hover-states —
     see the individual selectors below for which category each is in. */
  --muted: #777;
  /* 2026-07-10, Evidence renewal (ADR-008): first non-paper/ink/band
     background this site uses. Needed for "6つのケースに共通するもの"'s
     "ごく薄いニュートラル背景の全幅band" (owner spec — explicitly not
     --band/black, not an accent color, not pure --paper white either, since
     it needs to read as a distinct section break from the white theme list
     above and below it). Warm off-white, matching --grey's own warm
     undertone rather than a cool/blue-grey, so it reads as "this site's own
     quiet neutral" rather than a generic UI grey. */
  --wash: #F5F4F2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho",
              "Noto Serif JP","Noto Serif CJK JP",serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  /* Sticky-footer pattern (2026-07-11, 404 page/Issue #62): every other page's
     content already exceeds typical viewport heights, so this was never
     visible before — .notfound's shorter content exposed a gap of bare
     background below .footer on tall viewports. flex:1 0 auto on <main>
     below is a no-op once content already exceeds min-height, so this has no
     visible effect on any of the other 13 pages. */
  display:flex;
  flex-direction:column;
  min-height:100svh;
}
main{ flex:1 0 auto; }
/* Scoped to 404 only, not the shared `main` rule above — evidence.html has
   multiple sibling <section>s inside <main>, and making that flex too would
   stop their margins from collapsing the way block layout does (a real
   spacing-regression risk on that page). .main--center opts a single page's
   <main> into vertically centering its one child, so main's own flex:1 0 auto
   stretch (above) is followed by the content actually filling that space
   centered, rather than staying top-anchored with the extra room piling up
   below it. */
.main--center{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
::selection{background:var(--band);color:var(--on-band)}

/* ---- 帯 (.band) ----
   isolation:isolate + ::before z-index:-1 なので、内側テキストは
   position:relative な子要素(.band-text)を必要とせず常に黒背景の上に出る。 */
.band{
  position:relative;
  isolation:isolate;
  display:inline-block;
  padding:.13em .3em .15em;
  font-weight:600;
  color:var(--on-band);
}
.band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--band);
}
.band:hover{ letter-spacing:.08em; transition:letter-spacing .5s var(--ease); }

/* ---- 境界線 (.rule): Contactページの結びで一度だけ使用 ---- */
.rule{
  position:relative;
  width:1px;
  height:clamp(52px,10vh,110px);
  background:var(--ink);
  transform-origin:top;
}
.rule::before,
.rule::after{
  content:"";
  position:absolute;
  left:50%;
  width:13px;
  height:1px;
  background:var(--ink);
  transform:translateX(-50%) scaleX(0);
}
.rule::before{top:0}
.rule::after{bottom:0}

@media (hover:hover) and (pointer:fine){
  .settled .rule{cursor:crosshair}
  .settled .rule:hover{animation:redraw .6s var(--ease-soft) forwards}
  .settled .rule:hover::before,
  .settled .rule:hover::after{animation:tick .3s var(--ease-soft) .28s forwards}
}

.js .rule{transform:scaleY(0)}
.js .rule::before,.js .rule::after{transform:translateX(-50%) scaleX(0)}

.is-loaded .rule{
  animation:
    draw .85s var(--ease) .3s forwards,
    breathe 5.5s var(--ease-soft) 1.8s infinite;
}
.is-loaded .rule::before{animation:tick .3s var(--ease-soft) .95s forwards}
.is-loaded .rule::after{animation:tick .3s var(--ease-soft) 1.03s forwards}

@keyframes draw{to{transform:scaleY(1)}}
@keyframes tick{to{transform:translateX(-50%) scaleX(1)}}
@keyframes breathe{
  0%,100%{opacity:1}
  50%{opacity:.62}
}
@keyframes redraw{
  0%{transform:scaleY(1)}
  38%{transform:scaleY(.1)}
  100%{transform:scaleY(1)}
}

.settled .rule{
  transform:scaleY(1);
  animation:breathe 5.5s var(--ease-soft) infinite;
}
.settled .rule::before,
.settled .rule::after{
  transform:translateX(-50%) scaleX(1);
  animation:none;
}

.contact__rule-wrap .rule{ margin-inline:0; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rule{transform:scaleY(1)!important}
  .js .rule::before,.js .rule::after{
    animation:none!important;
    transform:translateX(-50%) scaleX(1)!important;
  }
  .rule:hover{animation:none!important}
}

/* ============================================================
   既存 :root トークンへの追加（上書きしない。新規プロパティのみ）
   ============================================================ */
:root{
  --font-serif: "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --font-gothic: "Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
  --nav-h: 4.5rem;
  --nav-h-mobile: 3.75rem;
  --z-nav: 100;
}

/* アンカージャンプの土台。sticky nav の下に隠れないよう全idに余白を確保 */
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top: calc(var(--nav-h-mobile) + .5rem); }
@media(min-width:860px){ [id]{ scroll-margin-top: calc(var(--nav-h) + .5rem); } }

/* ---- 共有ナビゲーション ---- */
.nav{
  position:sticky;
  top:0;
  z-index:var(--z-nav);
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
  transition:border-color .6s var(--ease-soft);
}
/* スクロールすると罫線が濃くなる=帯の thicken と同じ「線が意思を持つ」文法をナビに適用 */
.nav[data-scrolled]{ border-bottom-color:var(--ink); }

.nav__inner{
  max-width:1180px;
  margin-inline:auto;
  height:var(--nav-h-mobile);
  padding-inline:1.25rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
@media(min-width:860px){ .nav__inner{ height:var(--nav-h); padding-inline:2.5rem; } }

.nav__links{
  position:relative;
  display:none;
  align-items:center;
  gap:2rem;
}
@media(min-width:860px){ .nav__links{ display:flex; } }

.nav__link{
  position:relative;
  font-family:var(--font-gothic);
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--ink);
  text-decoration:none;
  padding-block:.4rem;
  opacity:.72;
  transition:opacity .35s var(--ease-soft);
}
.nav__link:hover,
.nav__link[aria-current="page"]{ opacity:1; }

/* Contactのみ、DesignSync_共通仕様.mdの既定CTA（輪郭線・ホバー反転・角丸なし）を適用 */
.nav__link--cta{
  opacity:1;
  border:1px solid var(--ink);
  border-radius:0;
  padding:.5rem 1.1rem;
  transition:background-color .35s var(--ease-soft), color .35s var(--ease-soft);
}
.nav__link--cta:hover{ background:var(--ink); color:var(--paper); }

.nav__indicator{
  position:absolute;
  bottom:0;
  left:0;
  height:1px;
  background:var(--ink);
  width:0;
  transform:translateX(0);
  transition:transform .5s var(--ease), width .5s var(--ease);
}

.nav__toggle{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--ink);
  padding:.4rem 0;
}
@media(min-width:860px){ .nav__toggle{ display:none; } }
.nav__toggle-label{
  font-family:var(--font-gothic);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.nav__toggle-icon{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:22px; }
.nav__toggle-bar{ height:1px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav__panel{
  display:grid;
  grid-template-rows:0fr;
  background:var(--paper);
  border-bottom:0 solid var(--hairline);
  transition:grid-template-rows .5s var(--ease-soft);
}
.nav__panel-inner{ overflow:hidden; }
.nav[data-open] .nav__panel{ grid-template-rows:1fr; border-bottom-width:1px; }
.nav__panel-link{
  display:block;
  padding:1.1rem 1.25rem;
  border-top:1px solid var(--hairline);
  font-family:var(--font-gothic);
  font-size:.95rem;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
}
.nav__panel-link--cta{ font-weight:600; }
@media(min-width:860px){ .nav__panel{ display:none; } }

/* ---- 共有フッター ---- */
/* 2026-07-10, owner review (Issue #59): the horizontal inset moved off
   .footer itself and onto .footer__inner/.footer__meta (below), mirroring
   how .nav has no inset of its own and .nav__inner carries it instead —
   same padding-inline values, same 860px breakpoint, so the header's and
   footer's content columns share one left/right baseline instead of the
   inset living on two structurally different levels. */
.footer{
  background:var(--band);
  color:var(--on-band);
  padding:5rem 0 2.5rem;
}
@media(min-width:860px){ .footer{ padding:6.5rem 0 2.5rem; } }

/* 2026-07-10, owner review (Issue #59): footer lightened — the sitemap nav
   re-list (.footer__links, previously a 3rd grid column) is removed
   entirely (the primary nav already lists every page; this was pure
   duplication), so .footer__inner goes back to a 2-column layout (brand +
   social). .footer__links' own rules are removed as dead code — grepped
   the whole prototype/ tree first, confirmed no other page/class reused
   them. */
.footer__inner{
  max-width:1180px;
  margin-inline:auto;
  display:grid;
  gap:3rem;
  grid-template-columns:1fr;
  padding-inline:1.25rem;
}
@media(min-width:700px){ .footer__inner{ grid-template-columns:1.3fr 1fr; gap:2rem; } }
/* padding-inline follows .nav__inner's own breakpoint (860px), not the
   700px grid-column switch above — this is what keeps .footer__brand's
   left edge and .footer__external's right edge lined up with the nav
   wordmark and Contact button at every width, not just >=860px. */
@media(min-width:860px){ .footer__inner{ padding-inline:2.5rem; } }

/* 2026-07-10, owner review (Issue #59), same-day follow-up: kamon + email
   moved from a stacked column onto one row (gap.85em, matching the nav
   wordmark's own icon+text gap) so the brand signature reads as a single
   line — pairing with .footer__external's own single-line icon row instead
   of stacking taller than it. */
.footer__brand{ display:flex; flex-direction:row; align-items:center; gap:.85em; }
/* 2026-07-10, owner review (Issue #59): kamon crest only, replacing the full
   vertical-company-name signature (see the removed .wordmark--full/--inverse
   block's own comment above for why). kamon-inverse.svg is a white-fill
   variant of the nav's own kamon.svg (same path data — see that file's
   comment); opacity here (not a baked rgba fill) keeps this in the same
   .72-muted-white family as every other footer link/icon, controlled from
   one place rather than a second hardcoded value. */
.footer__kamon{
  display:block;
  flex:none;
  width:2rem;
  height:2rem;
  opacity:.72;
}
.footer__contact{
  font-family:var(--font-gothic);
  font-size:.85rem;
  color:var(--on-band);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  width:fit-content;
  padding-bottom:.15em;
  transition:border-color .3s var(--ease-soft);
}
.footer__contact:hover{ border-color:var(--on-band); }

/* 2026-07-10: now holds the 4 external-profile links (LinkedIn/note/GitHub/
   Facebook), replacing the single Qorum Method repo link this class used to
   hold (that reference still lives in Thinking's own body copy, which links
   to the same repo in context — nothing was lost, just de-duplicated from
   the footer). Row layout (not the stacked column the single link used) —
   short marks read lighter as one line than four. Explicit color here is
   what keeps these from ever rendering as default browser blue/purple.
   Same-day follow-up: 3 of the 4 (LinkedIn/GitHub/Facebook) are now inline
   SVG marks (Simple Icons-sourced path data, single-color, no brand-color
   fills) instead of text labels — aria-label/title carry the name for a11y/
   tooltip since the icon itself has no visible text. note has no icon here
   (no confident source for an accurate official mark) — kept as a small
   text wordmark per the owner's own explicit fallback instruction, styled
   to sit on the same baseline as the icons rather than looking like a
   leftover text link. */
.footer__external{ display:flex; flex-direction:row; flex-wrap:wrap; gap:1.25rem; align-items:center; }
/* 2026-07-10, owner review (Issue #59): the icon group itself must right-align
   within its own grid column — .footer__external's column already ends flush
   with the nav Contact button's right edge (see the padding-inline fix above),
   but flex with no justify-content left-packs the icons inside that column,
   so the *visible* Facebook-rightmost icon sat well short of that edge. Only
   at >=700px, where .footer__inner is actually 2 columns — below that the
   icon row is full-width and stays left-aligned like the rest of the mobile
   stack. */
@media(min-width:700px){ .footer__external{ justify-content:flex-end; } }
.footer__external a{
  display:inline-flex;
  align-items:center;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  transition:color .3s var(--ease-soft);
}
.footer__external a:hover{ color:var(--on-band); }
.footer__external a:focus-visible{ outline:1px solid var(--on-band); outline-offset:4px; }
.footer__external-icon{ display:block; }
.footer__external-note{
  font-family:var(--font-gothic);
  font-size:.82rem;
  letter-spacing:.02em;
}
.footer__external a[data-pending-link]{ opacity:.4; pointer-events:none; }

.footer__meta{ max-width:1180px; margin:3.5rem auto 0; padding-inline:1.25rem; }
@media(min-width:860px){ .footer__meta{ padding-inline:2.5rem; } }
.footer__hairline{
  height:1px;
  background:rgba(255,255,255,.18);
  margin-bottom:1.5rem;
  animation:breathe 7s var(--ease-soft) infinite;
}
.footer__meta p{
  font-family:var(--font-gothic);
  font-size:.72rem;
  letter-spacing:.04em;
  color:rgba(255,255,255,.5);
}
/* 2026-07-10: the privacy-policy link inside .footer__meta p had no explicit
   color rule of its own — it was inheriting plain browser default link blue
   against the dark footer background, exactly the "青/紫のデフォルト" the
   owner flagged. Explicit color + underline now, matching the muted-white
   footer link treatment used everywhere else in the footer. */
.footer__meta p a,
.footer__meta p a:visited{
  color:rgba(255,255,255,.72);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.35);
  transition:color .3s var(--ease-soft);
}
.footer__meta p a:hover{ color:var(--on-band); }

/* ============================================================
   .nowrap-jp — 2026-07-10, line-break polish (Issue #59): Japanese text has
   no space-delimited word boundaries, so the browser's default line-breaking
   is free to wrap between ANY two characters — including inside a katakana
   loanword (メール→メー/ル) or a short functional compound (から→か/ら).
   Wrap a short at-risk run in this class to make it one atomic unit that
   moves to the next line as a whole instead of splitting internally. Keep
   these runs short (a few characters) — this is a targeted exception, not a
   general no-wrap tool; long spans would themselves cause horizontal overflow.
   ============================================================ */
.nowrap-jp{ white-space:nowrap; }

/* ============================================================
   .reveal — スクロールで画面に入ったら fade-in + slide-up する共有ユーティリティ
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  /* 兄弟要素を少しずつ遅らせたい場合、要素に style="--reveal-i:1" 等を付ける */
  transition-delay:calc(var(--reveal-i, 0) * 90ms);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---- reduced motion: Heroと同じ姿勢で、追加分も静的表示に倒す ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .wordmark__rule,
  .divider__rule{ animation:none!important; }
  .divider__rule{ transform:scaleX(1)!important; }
  .divider__rule::before,
  .divider__rule::after{ transform:translateY(-50%) scaleY(1)!important; }
  .divider--vertical .divider__rule{ transform:scaleY(1)!important; }
  .nav__panel{ transition:none; }
  .nav__toggle-bar{ transition:none; }
}
/* 依存: SHARED_CSS_ADDITIONS の --font-serif / --font-gothic / --ease / --ease-soft、
   および Hero既存CSSの @keyframes breathe / draw / tick / redraw をそのまま使う。
   ここでは再定義しない。 */

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  text-decoration:none;
  color:var(--ink);
  line-height:1;
}
/* 2026-07-09: kamon crest, header nav — per direction, the mark's one legitimate
   home is beside the "山崎事務所" wordmark it has always accompanied on paper, not as
   free-floating Hero/Profile decoration. assets/img/logo/kamon.svg (traced from the
   company's real crest, prototype/assets/img/logo/ロゴ家紋.ai via potrace — that .ai
   file itself only embeds a raster image, no vector source existed, hence the trace).
   2026-07-10: the footer now also carries the mark on its own (see .footer__kamon
   below, using kamon-inverse.svg — a separate white-fill file, not this element/
   class) — the "not used in the footer" framing above is specifically about the
   old .wordmark--full/--inverse full-signature treatment (vertical company name +
   drawn rule + EN subtitle), which the footer no longer uses at all, not about the
   crest mark itself. */
.wordmark__mark{
  flex:none;
  display:block;
  width:1.7rem;
  height:1.7rem;
}
@media(min-width:860px){
  .wordmark__mark{ width:1.9rem; height:1.9rem; }
}
.wordmark__ja{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.14em;
  font-feature-settings:"palt" 1;
  white-space:nowrap;
}
.wordmark__en{
  display:flex;
  flex-direction:column;
  gap:.18em;
  font-family:var(--font-gothic);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.22em;
  color:var(--grey);
}
.wordmark__en-line{ white-space:nowrap; }

/* ロゴ内の境界線＝.rule の縮小版。ナビは常在なので最初から定常状態(breathe)で描く。 */
.wordmark__rule{
  position:relative;
  flex:none;
  width:1px;
  height:1.9em;
  background:var(--ink);
  transform:scaleY(1);
  animation:breathe 5.5s var(--ease-soft) infinite;
}
.wordmark__rule::before,
.wordmark__rule::after{
  content:"";
  position:absolute;
  left:50%;
  width:7px;
  height:1px;
  background:var(--ink);
  transform:translateX(-50%) scaleX(1);
}
.wordmark__rule::before{ top:0; }
.wordmark__rule::after{ bottom:0; }

@media (hover:hover) and (pointer:fine){
  .wordmark:hover .wordmark__rule{ cursor:crosshair; animation:redraw .6s var(--ease-soft) forwards; }
  .wordmark:hover .wordmark__rule::before,
  .wordmark:hover .wordmark__rule::after{ animation:tick .3s var(--ease-soft) .18s forwards; }
  .wordmark:hover .wordmark__en{ color:var(--ink); }
}

/* 2026-07-10, owner review (Issue #59): the footer's "フル形（署名形）" full-
   signature wordmark treatment (.wordmark--full/.wordmark--inverse — vertical
   company name + drawn rule + EN subtitle) is removed. The footer now carries
   only the kamon crest (.footer__kamon below) — nav's own wordmark plus the
   footer's copyright line already establish the company name, so a second,
   more elaborate signature in the footer was redundant. Confirmed via
   repo-wide grep that .wordmark--full/.wordmark--inverse have no remaining
   callers before deleting their CSS (this was their only usage site). ---- */

/* ==================== Home ==================== */
/* =========================================================
   Home section — additional CSS
   Depends on shared tokens (--paper/--ink/--band/--on-band/
   --grey/--hairline/--ease/--ease-soft), shared fonts
   (--font-serif/--font-gothic), shared components (.band,
   .rule, keyframes breathe/draw/tick/redraw), and the shared
   .reveal scroll-in behavior. None of those are redefined here.
   ========================================================= */

.home{
  background:var(--paper);
  color:var(--ink);
}

.home :is(.hero,.challenges,.who,.proof,.profile-teaser,.contact-teaser){
  font-feature-settings:"palt" 1;
}

/* ---------- shared inner-wrapper rhythm ---------- */
.challenges__inner,
.who__inner,
.proof__inner,
.profile-teaser__inner,
.contact-teaser__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:5rem 1.25rem;
}
@media(min-width:860px){
  .challenges__inner,
  .who__inner,
  .proof__inner,
  .profile-teaser__inner,
  .contact-teaser__inner{
    padding:6.5rem 2.5rem;
  }
}

/* white content sections are separated by a static hairline —
   the same "boundary line" vocabulary as .rule, without its
   animated tick-mark behavior (that stays reserved for Hero
   and the page dividers). */
.challenges,
.who,
.proof,
.profile-teaser{
  border-top:1px solid var(--hairline);
}


/* =========================================================
   1. Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:calc(100svh - var(--nav-h-mobile));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:var(--paper);
  padding:1rem 1.25rem 1.25rem;
  text-align:center;
}
@media(min-width:860px){
  .hero{ min-height:calc(100svh - var(--nav-h)); }
}

/* position:relative so .hero__boundary (the line + dots overlay) can span this whole
   block — headline AND the closing/sub texts below it — per the rough: the boundary
   line runs from the top of the vertical text straight down through/past
   "その境界線を設計する。" to the final "山崎事務所は、その境界線を設計します。". */
.hero__inner{
  position:relative;
  max-width:1100px;
  width:100%;
}

/* ---- the boundary overlay: absolutely covers all of .hero__inner, so the 1px line's
   100% height automatically ends exactly at the sub-close's bottom edge, whatever the
   text content's rendered height turns out to be (no guessed fixed heights — the same
   lesson as the previous pass's grid-stretch fix, now applied to the taller span). ---- */
.hero__boundary{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.hero__boundary-dots{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
/* Dots start pale — unresolved issues, all sizes (r varies per dot in the markup).
   Their wander/converge animation (below) carries them to grey as they land. */
.hero__dot{ fill:#D8D6D1; }
/* 2026-07-09: line extended past .hero__inner's own top/bottom edges — "もっと線を
   長く". .hero__boundary is position:absolute (out of flow), so this overhang doesn't
   push close/sub/cue down or cost anything against the first-viewport fit budget;
   it's purely visual, the boundary now visibly continuing past the content it frames. */
.hero__boundary-line{
  width:1px;
  height:calc(100% + 3rem);
  margin-top:-2rem;
  background:var(--ink);
  transform-origin:top;
}

.hero__headline{ margin:0 0 1rem; }

.hero__vertical{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(3.5rem,11vw,8rem);
}
.hero__vtext{
  margin:0;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.5rem,5.2vw,2.15rem);
  letter-spacing:.08em;
  color:var(--ink);
}
/* The human clause carries the reference image's black-band treatment — a tight
   vertical black box around only its own characters ("これが重要なのでここのトンマナで").
   Reuses the sitewide .band component; only the padding is tuned for vertical writing. */
.hero__vtext .band{
  display:inline-block;
  padding:.36em .15em;
}

/* No position:relative here (unlike earlier passes) — the boundary overlay paints
   above the closing/sub texts, so the 1px line visibly passes through them on its way
   to the bottom, exactly as drawn in the owner's rough. */
.hero__close{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.15rem,3vw,1.6rem);
  letter-spacing:.04em;
  color:var(--ink);
  text-align:center;
  margin:0 0 .5rem;
}

.hero__sub{
  font-family:var(--font-serif);
  font-size:clamp(.95rem, 1.6vw, 1.05rem);
  line-height:1.4;
  color:var(--muted);
}
.hero__sub-line{ margin:0 0 .35em; }
.hero__sub-line--band{ margin-block:.5em; }
.hero__sub-line--band .band{
  display:inline-block;
  padding:.08em .5em;
  font-size:1.02em;
}
.hero__sub-close{
  margin-top:1.1em;
  margin-bottom:0;
  color:var(--ink);
  font-weight:600;
  letter-spacing:.06em;
}

.hero__cue{
  position:absolute;
  left:50%;
  bottom:2rem;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.hero__cue-line{
  width:1px;
  height:34px;
  background:var(--ink);
  animation:breathe 5.5s var(--ease-soft) infinite;
}
.hero__cue-text{
  font-family:var(--font-gothic);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grey);
}

/* =========================================================
   Hero — entrance sequence (fires on page load, not on scroll;
   Hero is above-the-fold so it must not wait for IntersectionObserver).
   2026-07-09, established in the 3rd pass and still true as of the 5th (current):
   the thesis itself (.hero__vtext, both clauses) is NEVER hidden/gated behind
   JS/animation state — it is real, static
   HTML/CSS content, visible on the very first rendered frame, with or
   without JS. Only the axis (dots + vertical line) and the two elements
   that follow it (.hero__close, .hero__sub) are progressively revealed.
   This directly fixes a verified real bug in the previous pass: the
   entire headline stayed opacity:0 for 2+ seconds, which reads as a
   blank page on first paint (confirmed via Web Animations API freeze-
   frame screenshots, not a reduced-motion artifact). The reduced-motion
   media query below is now nearly redundant with the default state —
   which is exactly the point: normal and reduced motion should look
   almost identical at rest, differing only in whether the axis animates
   or appears instantly.
   Reuses the .js -> .is-loaded gating pattern from main.js (unconditional
   on every page already; no JS changes needed here) and the exact
   line+tick-mark vocabulary of .rule (see .rule's own comment above),
   scoped to new selectors under #hero rather than redefining .rule itself.

   2026-07-09, later same day: .hero__vtext gained a COLOR-only loop animation
   synced to the boundary line's own beats ("これもアニメーションにしませんか" — owner
   direction). 2026-07-10, owner review: that synced color-loop read as the thesis
   being "subordinate to the line" (same grammar/beats as the boundary), and the
   pale starting color didn't match the intended image. Replaced with an unrelated,
   one-shot CLIP-PATH reveal (see "2b" below) — the thesis is now presented on its
   own independent timing, decoupled from the dots/line's infinite loop, with each
   clause appearing top-to-bottom in sequence (AI clause first, human clause second).
   This still does NOT weaken the "never gated" invariant above: the clip-path
   animation is scoped to `.is-loaded` only (no `.js`-scoped pre-hidden state), so
   the default/fallback rendering (no JS, or JS not yet resolved) is always the
   plain, fully-visible, unclipped paragraph — exactly as it always was. The reveal
   is purely an enhancement layered on top of an already-safe default, not a new
   hiding mechanism.
   ========================================================= */

/* ---- pre-load hidden state: boundary line + close line + sub-lines only.
   .hero__vtext is intentionally absent — both clauses are real, static, always-visible
   HTML/CSS, exactly like .hero__side-text was in the previous pass. Without JS, .js is
   never added, so the Hero renders fully static (dots scattered, line undrawn but still
   occupying its layout space, close/sub text simply visible). ---- */
.js #hero .hero__boundary-line{ transform:scaleY(0); }
.js #hero .hero__close,
.js #hero .hero__sub-line{
  opacity:0;
  transform:translateY(10px);
}
.js #hero .hero__cue{
  opacity:0;
  transform:translateX(-50%) translateY(10px);
}
.js #hero .hero__sub-line--band .band::before{
  transform:scaleX(0) scaleY(.08);
}

/* ---- 1/2. dots + line now loop forever: scattered pale issues wander, converge into
   a line that draws grey then resolves to solid ink, holds, then retracts and scatters
   again — "収束して実線からまた散らばる" repeating. Infinite CSS animations only honor
   animation-delay once, before the very first iteration (a positive delay does NOT
   repeat each lap) — so per-dot stagger is done via NEGATIVE delay instead, which
   starts each dot already partway into its own cycle, an offset that then repeats
   every lap. --x0/--y0 mirror each dot's own cx/cy (set in the markup) so the
   keyframe's 100% can explicitly return to the same position the implicit 0%/"from"
   state starts from, for a seamless loop rather than a jump-cut. Convergence target
   is cx:320 (center of the widened 0 0 640 640 viewBox). ---- */
.is-loaded #hero .hero__dot{
  animation:hero-dot-loop 9s var(--ease-soft) infinite;
  animation-delay:calc(.15s - (var(--dot-i, 0) * 0.3s));
}

.is-loaded #hero .hero__boundary-line{
  animation:hero-boundary-loop 9s var(--ease) infinite;
}

/* ---- 2b. 2026-07-10 owner review: the thesis is now its own one-shot presentation,
   fully decoupled from the dots/line's infinite loop (separate mechanism, separate
   timing, no shared beats). Each clause reveals top-to-bottom via clip-path — a
   "curtain drops away" wipe (inset() shrinking from fully-covering the bottom edge
   to none), not a fade/color-cycle — reading as "the decision target is being
   presented" rather than "the text is obeying the line." AI clause reveals first;
   the human clause's animation-delay starts it just before the AI reveal finishes,
   a tight relay rather than a dead pause. Both are one-shot (animation-fill-mode:
   both, no `infinite`) — once revealed, the thesis simply stays fully visible,
   it does not loop/re-hide like the boundary line does. Scoped to `.is-loaded`
   only (see the big comment block above for why this doesn't reintroduce the old
   blank-first-paint bug): default rendering is always the plain, unclipped
   paragraph, with or without JS.
   2026-07-10, same-day follow-up: first pass (.6s/.5s delay) read as too fast —
   slowed to roughly 2x (1.2s per clause, human's delay still just short of the
   AI reveal's own duration so the relay stays tight, not a dead pause). ---- */
.is-loaded #hero .hero__vtext--ai{
  animation:hero-vtext-reveal 1.2s var(--ease) both;
}
.is-loaded #hero .hero__vtext--human{
  animation:hero-vtext-reveal 1.2s var(--ease) 1s both;
}

/* ---- 3. the closing line settles once the boundary first resolves — a one-shot
   entrance, not part of the dots/line loop above (real text shouldn't flicker). ---- */
.is-loaded #hero .hero__close{
  animation:hero-line-in .55s var(--ease-soft) 4.4s forwards;
}

/* ---- 4. sub-lines follow with a tight stagger ---- */
.is-loaded #hero .hero__sub-line{
  animation:hero-line-in .45s var(--ease-soft) forwards;
}
.is-loaded #hero .hero__sub-line:nth-child(1){ animation-delay:4.8s; }
.is-loaded #hero .hero__sub-line:nth-child(2){ animation-delay:4.92s; }
.is-loaded #hero .hero__sub-line:nth-child(3){ animation-delay:5.04s; }
.is-loaded #hero .hero__sub-line:nth-child(4){ animation-delay:5.16s; }

.is-loaded #hero .hero__sub-line--band .band::before{
  animation:hero-band-fill .35s var(--ease) 5.3s forwards;
}

/* ---- 5. scroll cue: appears last, once everything else has settled ---- */
.is-loaded #hero .hero__cue{
  animation:hero-cue-in .45s var(--ease-soft) 5.65s forwards;
}

/* Wander out to the waypoint, converge onto the line's x fading to nothing, hold
   hidden through the line's solid-black phase, then drift back out to the dot's own
   start position (--x0/--y0) as the line retracts — completing one lap. */
@keyframes hero-dot-loop{
  0%{ cx:var(--x0); cy:var(--y0); fill:#D8D6D1; opacity:.95; }
  38%{ cx:var(--x1, 320px); cy:var(--y1); fill:#BBB8B2; opacity:.9; }
  58%{ cx:320px; cy:var(--y1); fill:var(--grey); opacity:.25; }
  64%{ cx:320px; cy:var(--y1); opacity:0; }
  88%{ cx:320px; cy:var(--y1); opacity:0; }
  100%{ cx:var(--x0); cy:var(--y0); fill:#D8D6D1; opacity:.95; }
}
/* Undrawn while dots wander, draws grey once they converge, resolves to solid ink,
   holds, then retracts back to undrawn as dots scatter away again. */
@keyframes hero-boundary-loop{
  0%{ transform:scaleY(0); background:#C9C7C2; }
  38%{ transform:scaleY(0); background:#C9C7C2; }
  58%{ transform:scaleY(1); background:#C9C7C2; }
  72%{ transform:scaleY(1); background:var(--ink); }
  88%{ transform:scaleY(1); background:var(--ink); }
  100%{ transform:scaleY(0); background:#C9C7C2; }
}
/* Top-to-bottom reveal, shared by both vtext clauses (each gets its own
   animation-delay, not its own keyframe — see the 2b rule above). inset()'s
   bottom offset shrinks from 100% (fully covered/hidden) to 0% (fully shown),
   uncovering the box from its top edge downward — a physical top-to-bottom
   wipe regardless of the text's own vertical-rl internal writing direction. */
@keyframes hero-vtext-reveal{
  0%{ clip-path:inset(0 0 100% 0); }
  100%{ clip-path:inset(0 0 0% 0); }
}
@keyframes hero-line-in{
  to{ opacity:1; transform:none; }
}
@keyframes hero-cue-in{
  to{ opacity:1; transform:translateX(-50%); }
}
@keyframes hero-band-fill{
  0%{ transform:scaleX(0) scaleY(.08); }
  1%{ opacity:1; }
  55%{ transform:scaleX(1) scaleY(.08); }
  100%{ transform:scaleX(1) scaleY(1); opacity:1; }
}

/* ---- reduced motion: same override pattern as .rule's own block.
   .hero__vtext was never gated (opacity/position), so nothing needs un-hiding for it —
   but as of the vtext color-loop above, it now needs the same animation:none + resolved-
   color treatment as the line/dots, so it doesn't sit mid-cycle grey when motion is off. ---- */
@media (prefers-reduced-motion:reduce){
  .js #hero .hero__dot{ opacity:0!important; }
  .js #hero .hero__boundary-line{ transform:none!important; }
  .js #hero .hero__close,
  .js #hero .hero__sub-line{
    opacity:1!important;
    transform:none!important;
  }
  .js #hero .hero__cue{
    opacity:1!important;
    transform:translateX(-50%)!important;
  }
  .js #hero .hero__sub-line--band .band::before{
    transform:none!important;
  }
  .is-loaded #hero .hero__dot,
  .is-loaded #hero .hero__boundary-line,
  .is-loaded #hero .hero__vtext--ai,
  .is-loaded #hero .hero__vtext--human,
  .is-loaded #hero .hero__close,
  .is-loaded #hero .hero__sub-line,
  .is-loaded #hero .hero__cue,
  .is-loaded #hero .hero__sub-line--band .band::before{
    animation:none!important;
    clip-path:none!important;
  }
}


/* =========================================================
   2. Management challenge checklist
   ========================================================= */
.challenges__heading{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing:.05em;
  line-height:1.7;
  margin:0 0 2.75rem;
  max-width:26em;
}

.challenges__list{
  list-style:none;
  margin:0 0 3rem;
  padding:0;
  max-width:var(--prose);
}
.challenges__item{
  font-family:var(--font-serif);
  font-size:1.05rem;
  line-height:1.9;
  padding:1.05em 0;
  border-top:1px solid var(--hairline);
}
.challenges__item:last-child{ border-bottom:1px solid var(--hairline); }

.challenges__close{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.1rem, 2.2vw, 1.35rem);
  letter-spacing:.05em;
  line-height:1.8;
  margin:0;
}


/* =========================================================
   3. Who this is
   ========================================================= */
.who__heading{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.3rem, 2.8vw, 1.7rem);
  letter-spacing:.04em;
  line-height:1.7;
  margin:0 0 2.5rem;
  max-width:24em;
}

.who__lede{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.5rem, 3.6vw, 2.15rem);
  line-height:1.8;
  letter-spacing:.03em;
  margin:0 0 1.1em;
  max-width:20em;
}
.who__lede-sub{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.2rem, 2.6vw, 1.5rem);
  letter-spacing:.04em;
  margin:0 0 4.5rem;
}

.who__body{
  font-family:var(--font-serif);
  font-size:1.02rem;
  line-height:2.05;
  color:var(--ink);
  max-width:var(--prose);
  margin:0 0 1.75rem;
}
.who__body--final{
  font-weight:600;
  margin-bottom:0;
}

.who__scope{
  margin:2.5rem 0 2.75rem;
  padding:2rem 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  max-width:var(--prose);
}
.who__scope-text{
  font-family:var(--font-serif);
  font-size:1.02rem;
  line-height:2.05;
  margin:0;
}


/* =========================================================
   4/5. Entry points + Proof — 2026-07-09: merged into one quiet
   index (was 5 separate card-links: 3 entry-point cards + 2 proof/
   theme cards). Same copy/home.md §"3つの入口"/§"実績（Evidence抜粋）"
   text, zero new copy — only the presentation changed, from a
   bordered card-grid (reads as a document index) to a plain
   <dl> list (reads as supporting text within one narrative section),
   ending in a single "Evidence" link (bare label + arrow, matching
   the exact link style this page already used elsewhere — not a
   new UI string). See index.html's own comment at this section for
   the full rationale.
   ========================================================= */
.entry-points__heading{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing:.05em;
  margin:0 0 2.25rem;
}

.proof__list{
  margin:0 0 4rem;
  max-width:var(--prose);
}
.proof__row{
  padding:1.5rem 0;
  border-top:1px solid var(--hairline);
}
.proof__list:last-of-type .proof__row:last-child{
  border-bottom:1px solid var(--hairline);
}
.proof__row-title{
  display:flex;
  align-items:baseline;
  gap:.75em;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.03em;
  margin:0 0 .5em;
}
/* 2026-07-10: each row's title is now its own link to the row's page (owner
   review, Issue #59 — "3つの入口" previously showed 2 unlinked rows plus a
   detached third). Reuses .proof__cta-arrow (unchanged) for the same
   label+arrow affordance .proof__cta itself used to provide as a single
   standalone CTA — .proof__cta is now removed as dead code, its one caller
   (the old separate "実績" sub-section) was deleted in the same change. */
.proof__row-link{
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  color:var(--ink);
  text-decoration:none;
}
/* 2026-07-10: 01/02/03 index, owner review — same light-serif-numeral
   vocabulary as Evidence's .case-item__index (renamed from .case-row__index
   in the same-day Evidence renewal, Issue #59), kept deliberately smaller for
   Home (a quiet count marker, not a case-list index) — no icon/
   illustration, per the owner's explicit "no doors/paths/people"
   instruction. Color follow-up same day: the original pale #C9C7C2 read as
   too close to disabled/invisible once the owner saw it live — moved to
   the shared var(--muted) token (same tier as the row description right
   below it). Hierarchy vs. the row title is now carried by size and weight
   alone (.85rem/300 vs. the title's 1.05rem/600), not by color. */
.proof__row-index{
  flex:none;
  font-family:var(--font-serif);
  font-weight:300;
  font-size:.85rem;
  letter-spacing:.05em;
  color:var(--muted);
}
.proof__row-desc{
  font-family:var(--font-serif);
  font-size:.92rem;
  line-height:1.9;
  /* 2026-07-10: owner review — var(--grey) (#8E8B85) read as disabled/inactive
     text for entry-point descriptions. First fix darkened this selector only
     (hardcoded #777); same-day follow-up promoted that value to the shared
     var(--muted) token and applied it sitewide to every other genuinely
     "must-be-read" muted selector (captions, list hints, index numbers,
     table headers, etc.) — see :root's comment for the full rationale.
     Still clearly lighter than --ink (#1C1C1A) body text. */
  color:var(--muted);
  margin:0;
}

.proof__cta-arrow{
  font-family:var(--font-gothic);
  transition:transform .3s var(--ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .proof__row-link:hover .proof__cta-arrow{ transform:translateX(.3em); }
  .proof__row-link:hover{ opacity:.65; }
}


/* =========================================================
   6. Profile teaser
   ========================================================= */
/* 2026-07-09: centered (was left) — owner direction after seeing the portrait live:
   a left-set body/link block read unbalanced against the now-centered portrait above
   it. `.profile-teaser__body`'s own max-width needs margin-inline:auto to follow (a
   constrained-width paragraph doesn't center from text-align alone); the link is
   inline-flex, so it centers from text-align with no extra rule needed. */
.profile-teaser__inner{ text-align:center; }
.profile-teaser__heading{
  font-family:var(--font-gothic);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--grey);
  margin:0 0 1.5rem;
}
/* "Profile" is a structural label carried in the DOM for a11y/outline purposes
   only (see markup comment) — visually hidden, never rendered as on-page text.
   Standard clip-based visually-hidden pattern; does not affect layout flow. */
.profile-teaser__heading--visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* 2026-07-09: dashed "写真：準備中" placeholder replaced with the illustration set's
   suit/full-body variant (owner's JPG, no crop/frame). Rendered at the JPG's own native
   resolution (119×305) rather than upscaled — even 120px (barely a scale at all) read
   as soft; owner: "画質があらいJPGそのままのサイズでいいよ". Do not size this above
   119px wide without a higher-resolution source asset. */
.profile-teaser__portrait{
  display:block;
  width:119px;
  height:auto;
  margin:0 auto 2rem;
}

/* 2026-07-09: font-size trimmed slightly and centered (margin-inline:auto — max-width
   alone doesn't center a block) to balance against the portrait above it (now rendered
   at its native 119px — see .profile-teaser__portrait's own comment above). */
.profile-teaser__body{
  font-family:var(--font-serif);
  font-size:clamp(1rem, 2.1vw, 1.25rem);
  line-height:1.95;
  color:var(--ink);
  max-width:var(--prose);
  margin:0 auto 2rem;
}
.profile-teaser__link{
  display:inline-flex;
  align-items:baseline;
  gap:.55em;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:.2em;
  border-bottom:1px solid var(--ink);
}
.profile-teaser__arrow{
  font-family:var(--font-gothic);
  transition:transform .3s var(--ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .profile-teaser__link:hover .profile-teaser__arrow{ transform:translateX(.3em); }
}


/* =========================================================
   7. Contact teaser — closes Home on the Hero's dark register.
   Reuses --band/--on-band as a full section wash (not the
   inline .band phrase-highlight component).
   ========================================================= */
.contact-teaser{
  background:var(--band);
  color:var(--on-band);
}
.contact-teaser__inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-block:6rem;
}
@media(min-width:860px){
  .contact-teaser__inner{ padding-block:8rem; }
}
.contact-teaser__body{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.3rem, 3.2vw, 1.9rem);
  line-height:1.85;
  letter-spacing:.03em;
  max-width:var(--prose);
  margin:0 0 2.75rem;
}
.contact-teaser__cta{
  display:inline-block;
  font-family:var(--font-gothic);
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--on-band);
  text-decoration:none;
  padding:1em 2.4em;
  border:1px solid var(--on-band);
  transition:opacity .3s var(--ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .contact-teaser__cta:hover{ opacity:.62; }
}


/* ==================== Engagement ==================== */
/* 依存: :root トークン(--paper/--ink/--band/--on-band/--grey/--hairline/--ease/--ease-soft)、
   --font-serif/--font-gothic、共有 .band / .reveal は既存実装をそのまま利用し、ここでは再定義しない。 */

.engagement__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem 5rem;
}
@media(min-width:860px){
  .engagement__inner{ padding:5.5rem 2.5rem 6.5rem; }
}

/* ---- lead ---- */
.engagement__lead{ max-width:52em; }

/* ---- page title (h1) ----
   Restored per prototype/engagement.html: the page carries its own real
   <h1> ("関与のかたち（Engagement Model）"), separate from the lede
   statement below it. Sized as the dominant element on the page (not an
   eyebrow label) and closed with a hairline rule, reusing the system's
   boundary-line motif rather than inventing a new title treatment. */
/* 2026-07-09: this block is now the SHARED page-title spec — every menu page's opening
   H1 (Engagement / Evidence / Judgment Lineage / Thinking / Contact) uses these exact
   values so heading font/size/weight and the hairline underline are identical across
   the site (owner: 「見出しのフォントや、本文の幅、位置などメニューごとにバラバラだよ」).
   If you change one, change all five. Shared prose width is 42em, same rule. */
.engagement__title{
  margin:0 0 2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  line-height:1.45;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}
.engagement__headline-break{ display:inline; }
@media(min-width:640px){
  .engagement__headline-break{ display:block; content:""; }
}

/* ---- body typography (shared across blocks) ----
   :not(.band) is required: .band already sets color:var(--on-band) (white
   on black) and a bare `.engagement__inner p{color:var(--ink)}` rule has
   higher specificity (0,1,1 vs .band's 0,1,0) and would silently repaint
   that text ink-on-black, i.e. invisible. Caught by rendering a QA build
   before finalizing — see NOTES. */
.engagement__inner p:not(.band){
  max-width:var(--prose);
  margin:0 0 1.4em;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:2;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}
.engagement__inner p:not(.band):last-child{ margin-bottom:0; }

/* ---- headline (the opening lede statement) ----
   Reconciliation note: this element moved from <h2> to <p> so the page
   could carry a real <h1> above it (prototype/engagement.html treats
   this line as a plain lede paragraph, not a heading). Because it's now
   a <p>, the generic `.engagement__inner p:not(.band)` rule above would
   otherwise win the cascade — its selector carries two class-level
   matches (.engagement__inner, plus .band referenced inside :not()),
   which ties this rule's single-class specificity. Re-declaring the
   headline's typography here, after the generic rule in source order,
   is what makes it win that tie. */
.engagement__inner p.engagement__headline{
  max-width:none;
  margin:0 0 1.75rem;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.15rem);
  line-height:1.65;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}

.engagement__statement{
  margin:1.85rem 0 2.1rem;
  font-size:1.05rem;
  line-height:1.9;
  letter-spacing:.04em;
}

/* ---- comparison module (Issue #59): 顧問/コンサル/役員採用 vs 山崎事務所, shown
   with rule + typography only (no illustration). Same-day follow-up:
   dropped every rule around/between the three options (they read as a
   table/grid otherwise) — the three now sit side by side as centered,
   evenly-spaced options separated only by whitespace (gap), with no
   cell borders at all. The ONE rule that carries meaning is
   .engagement-map__answer's own 2px ink border-top (the same "厚くなっ
   た罫線=意味を持つ" language as .nav's scroll-thickened border) — it's
   the single boundary between "the three options" and "the answer
   outside them", not one of several grid lines. No second .band, which
   would duplicate the .band statement immediately below it. */
.engagement-map{
  margin:2.2rem 0 2.4rem;
  max-width:var(--prose);
}
.engagement-map__options{
  display:flex;
  flex-wrap:wrap;
  gap:1.75rem;
}
.engagement-map__option{
  flex:1 1 0;
  min-width:8em;
  text-align:center;
}
.engagement-map__label{
  display:block;
  font-family:var(--font-gothic);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ink);
  margin-bottom:.6em;
}
.engagement-map__role{
  display:block;
  font-family:var(--font-serif);
  font-size:.88rem;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  color:var(--muted);
}
.engagement-map__answer{
  margin-top:2.4rem;
  padding-top:1.6rem;
  border-top:2px solid var(--ink);
  text-align:center;
}
.engagement-map__answer-label{
  display:block;
  font-family:var(--font-gothic);
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:.85em;
}
/* This is a <p>, so the generic `.engagement__inner p:not(.band)` rule
   above (0,2,1 specificity) would otherwise win over a plain single-class
   selector here — same tie-breaking approach as .engagement__headline's
   own rule above: match its specificity exactly and rely on this rule
   coming later in source order to win the tie. */
.engagement__inner p.engagement-map__answer-text{
  max-width:none;
  margin:0;
  font-family:var(--font-serif);
  font-size:1.2rem;
  font-weight:600;
  line-height:1.7;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}
@media(max-width:640px){
  .engagement-map__options{ flex-direction:column; gap:1.4rem; }
  .engagement-map__role{ font-size:.85rem; }
  .engagement-map__answer-text{ font-size:1.1rem; }
}

.engagement__transition{
  color:var(--muted);
  font-size:.92rem;
  letter-spacing:.08em;
}

/* ---- section blocks ---- */
.engagement__block{ margin-top:4.5rem; max-width:var(--prose); }
@media(max-width:640px){
  .engagement__block{ margin-top:3.25rem; }
}
.engagement__block--conduct{ max-width:none; }

.engagement__h3{
  margin:0 0 1.5rem;
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  line-height:1.6;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}

/* ---- 7つの作法: accordion ----
   Native <details>/<summary> — no bespoke JS needed for open/close state,
   keyboard/AT semantics come free. The disclosure indicator reuses the
   system's only graphic vocabulary (1px lines: a "+" that loses its
   vertical stroke to become "−"), not a new icon shape. */
.conduct{
  max-width:var(--prose);
  border-top:1px solid var(--hairline);
}
.conduct__item{ border-bottom:1px solid var(--hairline); }

.conduct__item summary.conduct__summary{
  display:flex;
  align-items:center;
  gap:1.5rem;
  padding:1.65rem 0;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.conduct__item summary.conduct__summary::-webkit-details-marker{ display:none; }
.conduct__item summary.conduct__summary::marker{ content:""; }
.conduct__item summary.conduct__summary:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:6px;
}

.conduct__number{
  flex:none;
  width:1.7rem;
  font-family:var(--font-gothic);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--muted);
}
.conduct__title{
  flex:1 1 auto;
  font-family:var(--font-serif);
  font-size:1.02rem;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
  transition:color .3s var(--ease-soft);
}
.conduct__item summary.conduct__summary:hover .conduct__title{ color:var(--grey); }

.conduct__toggle{
  position:relative;
  flex:none;
  width:14px;
  height:14px;
}
.conduct__toggle::before,
.conduct__toggle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
}
.conduct__toggle::before{ width:14px; height:1px; }
.conduct__toggle::after{
  width:1px; height:14px;
  transition:transform .45s var(--ease-soft), opacity .45s var(--ease-soft);
}
.conduct__item[open] .conduct__toggle::after{
  transform:translate(-50%,-50%) scaleY(0);
  opacity:0;
}

/* Override the UA default (details:not([open]) > *:not(summary){display:none})
   so the wrapper stays in the render tree and grid-template-rows can be
   transitioned. Specificity of .conduct__item > .conduct__body-wrap is
   (0,2,0), which already beats the UA rule's (0,1,2); !important kept as a
   safety margin since a miss here means the accordion silently never opens.
   Verified working (open/close via native details toggle) in a throwaway
   QA render — see NOTES. */
.conduct__item > .conduct__body-wrap{
  display:grid !important;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-soft);
}
.conduct__item[open] > .conduct__body-wrap{
  grid-template-rows:1fr;
}
.conduct__body-inner{
  overflow:hidden;
  min-height:0;
  visibility:hidden;
  transition:visibility 0s linear .5s;
}
.conduct__item[open] .conduct__body-inner{
  visibility:visible;
  transition-delay:0s;
}
.conduct__body{
  margin:0 0 1.75rem;
  font-size:.95rem;
  line-height:1.95;
}

@media(prefers-reduced-motion:reduce){
  .conduct__item > .conduct__body-wrap,
  .conduct__toggle::after{ transition:none; }
}

/* ---- close / CTA ----
   The closing line reads as plain text (no active link) per
   prototype/engagement.html — see the UNDECIDED comment inline in the
   markup. .engagement__cta-line is kept for its own top-spacing; the
   former .engagement__cta-link anchor styling was removed since no
   element in the markup uses it. */
.engagement__cta-line{ margin-top:.25rem; }
.engagement__link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.2em;
  text-decoration-thickness:1px;
  transition:color .3s var(--ease-soft);
}
.engagement__link:hover{ color:var(--grey); }
.engagement__link:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }


/* ==================== JudgmentLineage ==================== */
/* 2026-07-09: unified with Engagement/Evidence/Thinking/Profile's shared open-page
   frame (1180px wide, left-aligned, 4rem/5.5rem top padding) — this page previously
   used its own 640px margin:0-auto column, which read as a separate "centered with
   large margins" layout next to those four. .jl-inner no longer auto-centers inside
   the viewport — it starts flush against the same left edge every other page's
   content starts at.
   2026-07-10, owner review (site-wide prose unification): .jl-inner's reading width
   itself now also follows the shared --prose measure (see :root), superseding the
   note above about a narrower 640px column "benefiting" this page's stage prose —
   that reasoning predated the direct comparison against Evidence's own wrapping
   problems and the owner's broader instruction to reduce per-page divergence. */
#judgment-lineage{
  background: var(--paper);
  color: var(--ink);
  font-family: "Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  font-feature-settings: "palt" 1;
  max-width: 1180px;
  margin-inline: auto;
  padding: 4rem 1.25rem 5rem;
}
@media(min-width:860px){
  #judgment-lineage{ padding: 5.5rem 2.5rem 6.5rem; }
}
#judgment-lineage .jl-inner{
  max-width: var(--prose);
  margin: 0;
}
#judgment-lineage p{
  margin: 0;
  font-size: 1rem;
  line-height: 2;
}
/* 2026-07-09: was a small letter-spaced eyebrow label — restyled to the shared
   page-title spec (identical to .engagement__title, see its comment) so this page's
   opening no longer reads as a different grammar from Engagement/Evidence. */
#judgment-lineage .jl-eyebrow{
  margin: 0 0 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.7rem,3.6vw,2.4rem);
  line-height: 1.45;
  letter-spacing: .03em;
  font-feature-settings: "palt" 1;
  color: var(--ink);
}
#judgment-lineage .jl-intro p + p{ margin-top: 1.7em; }
#judgment-lineage .jl-intro .jl-axis{
  margin-top: 3.2em;
  margin-bottom: 3.2em;
}
#judgment-lineage .jl-band-line{ line-height: 1; }
#judgment-lineage .jl-band-row{ display: block; }
#judgment-lineage .jl-band-row + .jl-band-row{ margin-top: 0.4em; }
#judgment-lineage .jl-band-intro{
  margin-top: 2.6em;
  font-size: clamp(1rem, 2.4vw, 1.4375rem);
}
#judgment-lineage .jl-band-close{
  margin-top: 2.2em;
  font-size: clamp(1.125rem, 2.6vw, 1.625rem);
}
#judgment-lineage .jl-stages{
  list-style: none;
  margin: 5.5rem 0 0;
  padding: 0;
}
/* 2026-07-10, owner review (Issue #59), full redesign: previously the line
   was .jl-stage's own `border-left`, and the marker was a `::before`
   positioned via `left:-3.5px` — a sub-pixel value that only worked
   because it happened to cancel out the 1px border's own box-model offset
   (position:absolute's `left` resolves against the *padding* edge, which
   a border-left pushes inward from where the border itself paints). That
   was flagged as a magic number, correct by arithmetic cancellation, not
   because the two elements shared a real reference frame.
   Removed border-left entirely. The line is now .jl-stage's own ::before
   (a real 1px div-equivalent, not a border), and the marker is ::after —
   both positioned at the exact same `left:0; transform:translateX(-50%)`
   (or translate(-50%,-50%) for the marker, which also centers vertically).
   Since .jl-stage carries no border anymore, `left:0` is an unambiguous,
   single reference point for both — centering is now structural (both
   pseudo-elements anchored to the same coordinate), not a coincidence of
   two numbers cancelling out. */
#judgment-lineage .jl-stage{
  position: relative;
  margin: 0;
  padding: 0 0 5.5rem 40px;
}
#judgment-lineage .jl-stage:last-child{ padding-bottom: 0; }
/* The line: full height of this Stage's own block, so it auto-adapts to
   each Stage's own body-copy length and chains seamlessly stage-to-stage
   (this is why it's per-.jl-stage rather than one continuous element on
   the <ol> — a single OL-level line would need to know every previous
   Stage's cumulative height in advance, which varies with copy length).
   :first-child starts at the marker's own top:12.8px instead of the very
   top of the block, so the line doesn't visibly extend above the first
   marker into empty space. :last-child stops at that same 12.8px instead
   of running the full block height, so the line doesn't run past the
   final marker into Stage 5's own body copy. */
#judgment-lineage .jl-stage::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  transform: translateX(-50%);
}
#judgment-lineage .jl-stage:first-child::before{ top: 12.8px; }
#judgment-lineage .jl-stage:last-child::before{
  bottom: auto;
  height: 12.8px;
}
/* The marker: top:12.8px is empirically measured (centers on .jl-stage-
   label's own vertical center — verified via getBoundingClientRect with
   .reveal transitions forced off so the measurement isn't caught mid-
   fade — see the label rule below), now serving as the single source both
   the line's first/last trim above and this marker share, rather than two
   independently-tuned numbers. No more per-Stage color distinction (grey
   1-4, ink 5) — all 5 are var(--ink), matching the line.
   2026-07-10, chapter-divider follow-up: was briefly 32px while the
   chapter-head panel wrapped label+title+meta together and pushed
   .jl-stage-label down by ~19px; reverted to 12.8px once the black
   background moved to .jl-stage-title alone (label is back to sitting
   at the Stage's own top edge). */
#judgment-lineage .jl-stage::after{
  content: "";
  position: absolute;
  left: 0;
  top: 12.8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
/* 2026-07-10, owner review (Issue #59), chapter-divider redesign, narrowed
   to the title only: the black panel originally wrapped all of
   .jl-stage-head (STAGE N/5 + title + company/period). Owner review found
   the label/meta reading as reversed-out UI chrome rather than plain
   copy — only the title itself should carry the black "chapter title"
   treatment. .jl-stage-head is back to a plain, unstyled wrapper. Only
   .jl-stage-title itself gets background:var(--band) (the same black
   .band's own inline highlights use — no new black token) + color:
   var(--on-band) + its own padding, so the black band is sized to the
   title copy's own box, not the whole header.
   Same-day follow-up: .jl-stage-label / .jl-stage-meta were first set to
   var(--muted) (#777) — the owner found this read as a light/greyed-out
   tone next to the page's normal body copy. Changed to var(--ink)
   (#1C1C1A), the same solid black every other running-text element on
   this page uses (see e.g. .jl-block dd), so STAGE N/5 and company/
   period read as normal, fully legible black text, not muted metadata. */
#judgment-lineage .jl-stage-label{
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink);
}
/* font-size is a fixed rem (not the previous clamp(...,2.8vw,...)) per
   instruction — this text sits on a fixed-size dark band, not a fluid
   body-copy column, so it shouldn't rescale continuously with viewport
   width the way running prose does. */
#judgment-lineage .jl-stage-title{
  display: block;
  margin: 0;
  padding: 0.9rem 1.5rem;
  background: var(--band);
  color: var(--on-band);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.4;
  box-sizing: border-box;
}
#judgment-lineage .jl-stage-meta{
  margin: 0.9rem 0 0;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}
#judgment-lineage .jl-blocks{ margin: 2.5rem 0 0; }
#judgment-lineage .jl-blocks dd{ margin: 0; }
#judgment-lineage .jl-block + .jl-block{ margin-top: 2.6rem; }
#judgment-lineage .jl-block-label{
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--muted);
}
#judgment-lineage .jl-kernel{ font-weight: 500; }
/* Stage 5 now uses the standard prose block pattern. */
#judgment-lineage .jl-close{
  margin-top: 6rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--hairline);
}
#judgment-lineage .jl-close-heading{
  margin: 0 0 2.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  color: var(--grey);
}
#judgment-lineage .jl-close p + p{ margin-top: 0; }
@media (max-width: 639px){
  #judgment-lineage .jl-stage{
    padding-left: 0;
  }
  #judgment-lineage .jl-stage::before,
  #judgment-lineage .jl-stage::after{
    display: none;
  }
}


/* ==================== EvidenceIndex ==================== */
/* 依存: :root の --paper/--ink/--band/--on-band/--grey/--hairline/--ease/--ease-soft、
   共有トークンの --font-serif/--font-gothic、共有 .band / .reveal（再定義しない） */

.evidence{ background:var(--paper); color:var(--ink); }

.evidence__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem 4rem;
}
@media(min-width:860px){ .evidence__inner{ padding:5.5rem 2.5rem 6rem; } }

/* Shared page-title spec — keep identical to .engagement__title (see its comment). */
.evidence__title{
  margin:0 0 2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  line-height:1.45;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}

.evidence__lead{
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:2;
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
  margin:0 0 3.5rem;
}
.evidence__caveat{ color:var(--muted); font-size:.92em; }

/* ---- セクション見出し（4つの経営テーマ / 共通するもの / 登壇 / Qorum の各節）----
   2026-07-10, Issue #59 Owner Review (ADR-008): "第1層/第2層" という内部アーキテクチャ
   用語を訪問者向け表示から撤去したため、旧 .layer-heading（第1層/第2層の2本を
   連続配置する専用コンポーネント）は不要になった。4つの見出し（4つの経営テーマ/
   6つのケースに共通するもの/登壇・コミュニティ運営/Qorum Method）は全て同じ
   .evidence__subheading 1クラスで統一する — 見出しレベルはH2/H3で使い分けるが
   （4つの経営テーマ=H2、各テーマ=H3、他3節=H2で親H2に戻る、スキップなし）、
   視覚的な重みは4節とも揃える。 */
.evidence__subheading{
  font-family:var(--font-serif);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  margin:0 0 1.25rem;
}

/* ---- 4つの経営テーマ：縦積み（Vault DesignSync指示、2列grid廃止）----
   旧 .theme-grid（700px以上で2列、nth-child odd/evenでborder-right/padding切替）を
   撤去。カード化（角丸・影・背景色分け）はもともとしていなかったため、この変更で
   増える差分は「2列→1列」のみ。テーマ間は引き続きborder-top 1本＋paddingの余白で
   区切る（罫線＋余白、カードではない）。縦積みで単調にならないよう、paddingを
   2列時より広めに取り、各テーマの内部（見出し→本文→関連Case一覧）にも呼吸を持たせる。 */
.theme-list{ margin-top:.5rem; }

.theme-card{
  position:relative;
  border-top:1px solid var(--hairline);
  padding:2.75rem 0 3rem;
}
.theme-list > .theme-card:last-child{ padding-bottom:0; }

.theme-card__mark{
  position:absolute;
  top:2rem;
  right:1.25rem;
  font-family:var(--font-serif);
  font-weight:300;
  font-size:2.5rem;
  line-height:1;
  color:var(--hairline);
  user-select:none;
}

.theme-card__label{
  font-family:var(--font-gothic);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--muted);
  margin:0 0 1rem;
}

.theme-card__assertion{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.15rem;
  line-height:1.7;
  font-feature-settings:"palt" 1;
  max-width:30em;
  margin:0 0 1rem;
}

.theme-card__body{
  font-family:var(--font-serif);
  font-size:.92rem;
  line-height:1.95;
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
  margin:0 0 1.5rem;
}

/* ---- 関連Case：常時表示の行＋インライン展開アコーディオン ----
   2026-07-10, Issue #59 Owner Review (ADR-008): 旧実装は「（詳細ケース: Case02・
   Case06）」という小さいsummaryを開くと、別ページへのリンクの"リスト"が現れるだけ
   だった（テーマの<details>の中にケース<details>を入れ子にする二重開閉構造）。
   新実装は二重<details>を解消し、各Caseを独立した<details>としてテーマ直下に
   フラットに並べる（テーマ自体は開閉しない、常に展開状態）。Case番号・タイトル・
   引用文・開閉記号は常時表示（<summary>自体がこれらを含む）— 開くとCase本文全文が
   その場にインライン展開される。
   アコーディオンの土台（grid-template-rows:0fr→1fr のトランジション、visibility+
   transition-delayでcontentをDOMに残しつつ閉時はtab順から外す）はEngagementの
   .conduct（7つの作法アコーディオン）と同一パターンを再利用 — 新規パターンを
   増やさない。summaryのpadding（1.65rem 0）もconductと揃え、タップ領域を
   コンテンツ量に依存させない（44px要件を安定して満たす）。 */
.case-list{
  margin-top:1.75rem;
  border-top:1px solid var(--hairline);
}
.case-item{ border-bottom:1px solid var(--hairline); }

.case-item__summary{
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  padding:1.65rem 0;
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.case-item__summary::-webkit-details-marker{ display:none; }
.case-item__summary::marker{ content:""; }
.case-item__summary:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:6px;
}

.case-item__index{
  flex:none;
  width:2.25rem;
  font-family:var(--font-serif);
  font-weight:300;
  font-size:1.4rem;
  line-height:1.5;
  color:var(--muted);
}

.case-item__head{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.case-item__title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1rem;
  line-height:1.5;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}
.case-item__quote{
  font-family:var(--font-serif);
  font-size:.86rem;
  color:var(--muted);
  font-feature-settings:"palt" 1;
}
/* 引用符は装飾のみ。テキストコンテンツ自体には「」を含めない */
.case-item__quote::before{ content:"「"; }
.case-item__quote::after{ content:"」"; }

/* 開閉記号：色だけに頼らない +/− グリフ（Engagement .conduct__toggle と同一パターン） */
.case-item__toggle{
  position:relative;
  flex:none;
  width:14px;
  height:14px;
  margin-top:.45em;
}
.case-item__toggle::before,
.case-item__toggle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
}
.case-item__toggle::before{ width:14px; height:1px; }
.case-item__toggle::after{
  width:1px; height:14px;
  transition:transform .45s var(--ease-soft), opacity .45s var(--ease-soft);
}
.case-item[open] .case-item__toggle::after{
  transform:translate(-50%,-50%) scaleY(0);
  opacity:0;
}

/* UA既定（details:not([open]) > *:not(summary){display:none}）を上書きし、
   grid-template-rowsをトランジションできるようにする。仕様は.conduct__item と同一
   （main.css内 "7つの作法: accordion" コメント参照）。 */
.case-item > .case-item__body-wrap{
  display:grid !important;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-soft);
}
.case-item[open] > .case-item__body-wrap{
  grid-template-rows:1fr;
}
.case-item__body-inner{
  overflow:hidden;
  min-height:0;
  visibility:hidden;
  transition:visibility 0s linear .5s;
}
.case-item[open] .case-item__body-inner{
  visibility:visible;
  transition-delay:0s;
}

.case-item__body{
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  margin:.25rem 0 1.75rem;
}
.case-item__body p{
  margin:0;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:2;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}
.case-item__body p.case-item__closing{
  padding-top:1.25rem;
  border-top:1px solid var(--hairline);
  font-size:1.05rem;
  line-height:2.1;
}

/* 個別ページで開く → 低い視覚的重みのリンク。「詳しく読む」的な強いCTAトーンには
   しない（.case-item__title自体が既に主要な操作対象のため）。10.88px(.68rem)だった
   旧.theme-card__ref/.case-row__ctaの反省を踏まえ、.8125rem(13px)に設定 —
   .case-item__quote(.86rem)と.case-item__title(1rem)の間の刻みで、新規サイズを
   増やさない。 */
.case-item__open-link{
  display:inline-block;
  margin-bottom:1.75rem;
  font-family:var(--font-gothic);
  font-size:.8125rem;
  letter-spacing:.04em;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  padding-bottom:.15em;
  transition:color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.case-item__open-link:hover{ color:var(--ink); border-color:var(--ink); }
.case-item__open-link:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

@media(prefers-reduced-motion:reduce){
  .case-item > .case-item__body-wrap,
  .case-item__toggle::after{ transition:none; }
}

/* ---- 共通するもの：3原則（境界線モチーフの反復） ---- */
.principle-list{
  list-style:none;
  margin:0 0 2.5rem;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
@media(min-width:700px){
  .principle-list{ grid-template-columns:repeat(3,1fr); gap:0; }
  .principle{ border-left:1px solid var(--hairline); padding:0 1.75rem; }
  .principle:first-child{ border-left:none; padding-left:0; }
}

.principle{ display:flex; flex-direction:column; gap:.65rem; }
.principle__index{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:1.4rem;
  color:var(--muted);
}
.principle__text{
  font-family:var(--font-serif);
  font-size:.92rem;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  margin:0;
}

/* ---- 6つのケースに共通するもの：全幅band（section） ----
   2026-07-10, Issue #59 Owner Review (ADR-008): 旧実装は.evidence__inner
   (max-width:1180px)の内側に入れ子のdivとして存在していたため、"全幅band"に
   できなかった（Home末尾の.contact-teaserと同じ「<main>直下の独立<section>＋
   自前の__inner」構造に変更し、初めて背景色を画面幅いっぱいに敷けるようになった）。
   背景はvar(--wash)（ごく薄いニュートラル。黒・アクセントカラーは使わない）。 */
.evidence-summary{
  background:var(--wash);
}
.evidence-summary__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem;
}
@media(min-width:860px){ .evidence-summary__inner{ padding:5rem 2.5rem; } }

.summary__lead{
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  margin:0 0 2rem;
}

.summary__closing{
  font-family:var(--font-serif);
  font-size:1.05rem;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
}

/* ---- 登壇・コミュニティ運営：独立section（背景は変えない、控えめな扱いのまま）---- */
.evidence-speaking__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem;
}
@media(min-width:860px){ .evidence-speaking__inner{ padding:4.5rem 2.5rem; } }

.speaking__lead{
  font-family:var(--font-serif);
  font-size:.95rem;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
  margin:0 0 1.5rem;
}
.speaking-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.speaking-list li{
  position:relative;
  padding-left:1.1em;
  font-family:var(--font-serif);
  font-size:.9rem;
  font-feature-settings:"palt" 1;
}
.speaking-list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--grey);
}

/* ---- Qorum Method：全幅の濃色section（ページ末尾）----
   2026-07-10, Issue #59 Owner Review (ADR-008): .evidence-summaryと同じ理由で
   独立<section>化。背景はvar(--band)/文字色var(--on-band) — Home末尾の
   .contact-teaserが既に確立した「黒帯でページを締める」語彙をそのまま再利用し、
   新規の黒トークンは作らない。.evidence__subheadingは明示colorを持たないため、
   ここに置くだけで自動的に白文字になる。 */
.evidence-qorum{
  background:var(--band);
  color:var(--on-band);
}
.evidence-qorum__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem;
}
@media(min-width:860px){ .evidence-qorum__inner{ padding:5.5rem 2.5rem; } }

.qorum__body{
  font-family:var(--font-serif);
  font-size:.94rem;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
  margin:0 0 1rem;
}
/* 濃色背景上のリンク。旧実装はvar(--ink)決め打ちで、黒背景に置くと事実上不可視
   になる不具合があった（今回section化して初めて顕在化）ため var(--on-band) に修正。 */
.qorum__link{
  color:var(--on-band);
  text-decoration-thickness:1px;
  text-underline-offset:.2em;
  transition:opacity .3s var(--ease-soft);
}
.qorum__link:hover{ opacity:.6; }
.qorum__link:focus-visible{ outline:1px solid var(--on-band); outline-offset:4px; }

/* お問い合わせ：本文中の小リンクではなく独立したoutline CTA（owner spec）。
   Home末尾の.contact-teaser__ctaと同一の見た目（濃色背景上のアウトラインボタン）を
   再利用 — Evidence独自のボタン意匠を新設しない。本文の「→ お問い合わせ」という
   文言自体はcopy/evidence.md通りそのまま残す（コピー変更なし）。実際にクリック可能な
   「お問い合わせ」はこの独立ボタンのみとし、本文中の同じ文字列は非リンクの地の文
   に変更した（`<strong>`のまま、装飾のみ変更・文言は不変）。 */
.qorum__more{
  font-family:var(--font-gothic);
  font-size:.82rem;
  letter-spacing:.02em;
  margin:0 0 1.75rem;
}

.qorum__cta{
  display:inline-block;
  margin-top:.75rem;
  font-family:var(--font-gothic);
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--on-band);
  text-decoration:none;
  padding:1em 2.4em;
  border:1px solid var(--on-band);
  transition:opacity .3s var(--ease-soft);
}
@media (hover:hover) and (pointer:fine){
  .qorum__cta:hover{ opacity:.62; }
}
.qorum__cta:focus-visible{ outline:1px solid var(--on-band); outline-offset:4px; }


/* ==================== EvidenceCase ==================== */
/* Case 01 — Evidence 第2層（詳細ケース）。
   共通トークン(--paper/--ink/--band/--on-band/--grey/--hairline/--ease/--ease-soft)、
   .band / .reveal / font-feature-settings:"palt" 1 はHero既存CSSに準拠し再定義しない。
   このブロックでは case-detail__ 名前空間のレイアウト専用ルールのみを追加する。 */

.case-detail{
  padding:6rem 1.25rem 7rem;
  background:var(--paper);
  color:var(--ink);
}
@media(min-width:860px){
  .case-detail{ padding:8rem 2.5rem 9rem; }
}

.case-detail__inner{
  /* 2026-07-10: was a standalone 760px (close to but not identical to --prose's
     768px) — now shares the site-wide prose measure like every other page. */
  max-width:var(--prose);
  margin-inline:auto;
}

/* テーマタグ（第1層 Evidence への帰属を示すeyebrow。evidence.html#theme-d へのリンク） */
.case-detail__eyebrow{
  margin:0 0 3rem;
  padding-bottom:1.75rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-gothic);
}
.case-detail__eyebrow-link{
  display:inline-flex;
  align-items:baseline;
  text-decoration:none;
  color:inherit;
  border-bottom:1px solid transparent;
  padding-bottom:.15em;
  transition:border-color .3s var(--ease-soft);
}
.case-detail__eyebrow-link:hover{
  border-color:var(--grey);
}
.case-detail__eyebrow-index{
  font-size:.72rem;
  letter-spacing:.18em;
  font-weight:600;
  color:var(--ink);
}
.case-detail__eyebrow-text{
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--muted);
  font-feature-settings:"palt" 1;
}

/* Caseラベル（Case番号＋ケースタイトル）。<title>/meta が正本のため見出し要素ではなく
   非見出しのeyebrow的ラベルとして残す（<p>。h2ではない）。 */
.case-detail__title{
  margin:0 0 2rem;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.4rem;
  line-height:1.7;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
}
@media(min-width:640px){
  .case-detail__title{ font-size:1.75rem; }
}
.case-detail__title-index{
  font-family:var(--font-gothic);
  font-size:.72rem;
  letter-spacing:.16em;
  font-weight:500;
  color:var(--muted);
}

.case-detail__sep{
  color:var(--grey);
  margin:0 .35em;
  font-weight:400;
}

/* リード（ページの唯一の<h1>。見出し直下のアフォリズム。帯強調1/2） */
.case-detail__lead{
  margin:0 0 3rem;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.9;
  font-feature-settings:"palt" 1;
}
@media(min-width:640px){
  .case-detail__lead{ font-size:1.6rem; }
}

/* 本文（証拠段落） */
.case-detail__body{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
.case-detail__body p{
  margin:0;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:2;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}

/* 締め（結論。帯強調2/2）。上に細いhairlineを引き、本文と一拍分離する */
.case-detail__closing{
  margin-top:.5rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
  font-size:1.05rem;
  line-height:2.1;
}

/* 前後のケース nav */
.case-detail__nav{
  margin-top:3.5rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}
@media(min-width:640px){
  .case-detail__nav{
    flex-direction:row;
    justify-content:space-between;
    gap:2rem;
  }
}
.case-detail__nav-link{
  display:block;
  text-decoration:none;
  color:var(--ink);
  max-width:320px;
}
@media(min-width:640px){
  .case-detail__nav-link--next{
    text-align:right;
    margin-left:auto;
  }
}
.case-detail__nav-link-label{
  display:block;
  margin-bottom:.4em;
  font-family:var(--font-gothic);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--muted);
}
.case-detail__nav-link-title{
  display:block;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.7;
  font-feature-settings:"palt" 1;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.case-detail__nav-link:hover .case-detail__nav-link-title{
  border-color:var(--ink);
}

/* Evidenceへ戻る */
.case-detail__back{
  display:inline-block;
  margin-top:2.5rem;
  font-family:var(--font-gothic);
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  padding-bottom:.2em;
  transition:border-color .3s var(--ease-soft), opacity .3s var(--ease-soft);
}
.case-detail__back:hover{
  border-color:var(--ink);
}

/* 共有リンク */
.case-detail__share{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.25rem;
}
.case-detail__share-btn{
  font-family:var(--font-gothic);
  font-size:.8rem;
  letter-spacing:.06em;
  color:var(--ink);
  background:none;
  border:1px solid var(--ink);
  padding:.65em 1.4em;
  cursor:pointer;
  transition:background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.case-detail__share-btn:hover{
  background:var(--ink);
  color:var(--paper);
}
.case-detail__share-feedback{
  font-family:var(--font-gothic);
  font-size:.78rem;
  color:var(--muted);
}
.case-detail__share-feedback:not(:empty){
  color:var(--ink);
}


/* ==================== Thinking ==================== */
/* 依存: 共有 --paper / --ink / --grey / --hairline / --ease / --ease-soft、
   共有コンポーネント .band / .reveal（本ブロックでは再定義しない）、
   共有トークン var(--font-serif) / var(--font-gothic)（divider CSS が既に依存している前提を継承）。 */

#thinking{
  background:var(--paper);
  color:var(--ink);
}

.thinking__container{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem 3rem;
}
@media(min-width:860px){
  .thinking__container{ padding:5.5rem 2.5rem 4rem; }
}

/* ---- 冒頭: ページ見出し(h1) + 命題(帯) + リード文 ---- */
.thinking__opening{
  padding-bottom:2.75rem;
  margin-bottom:2.75rem;
  border-bottom:1px solid var(--hairline);
}
@media(min-width:860px){
  .thinking__opening{ padding-bottom:3.5rem; margin-bottom:3.5rem; }
}

/* ページの実 h1。視覚的には控えめな eyebrow ラベルとして表示しつつ、
   意味的にはページ見出しとして機能させる（OLD prototype の <h1>Thinking</h1> と等価）。 */
/* 2026-07-09: was a small gothic eyebrow label — restyled to the shared page-title
   spec (identical to .engagement__title, see its comment) for cross-page consistency. */
.thinking__eyebrow{
  display:block;
  margin:0 0 2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  line-height:1.45;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}

.thinking__thesis{
  margin:0 0 1.75rem;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.5rem,3.6vw,2.375rem);
  line-height:1.7;
  letter-spacing:.06em;
  font-feature-settings:"palt" 1;
}
.thinking__thesis .band{ display:inline-block; }

.thinking__lead{
  max-width:var(--prose);
  margin:0;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:2;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
}

/* ---- 動機の自問 / 個別記事 共通ブロック ---- */
.thinking__section{
  position:relative;
  padding:2.75rem 0;
  border-top:1px solid var(--hairline);
}
.thinking__section:first-of-type{
  padding-top:0;
  border-top:none;
}
@media(min-width:860px){
  .thinking__section{ padding:3.5rem 0; }
  .thinking__section:first-of-type{ padding-top:0; }
}

/* 「個別記事」段の3ブロックにのみ付く通し番号。動機の自問(なぜ公開するのか)には付けない */
.thinking__section-index{
  display:block;
  margin-bottom:1rem;
  font-family:var(--font-gothic);
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--muted);
}

.thinking__heading{
  margin:0 0 1.75rem;
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.375rem;
  letter-spacing:.06em;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}
@media(min-width:860px){
  .thinking__heading{ font-size:1.5rem; }
}

.thinking__section > p{
  max-width:var(--prose);
  margin:0 0 1.5rem;
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:2;
  letter-spacing:.03em;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}
.thinking__section > p:last-child{ margin-bottom:0; }
.thinking__section > p strong{ font-weight:600; }
.thinking__section > p .band{ display:inline; }

/* ---- Qorum Method explanatory figure (owner-provided editorial illustration, PNG only) ---- */
.thinking__figure{
  margin:2rem 0 2.25rem;
}
.thinking__figure img{
  display:block;
  width:min(100%, 760px);
  height:auto;
  aspect-ratio:760/377;
}
@media(max-width:600px){
  .thinking__figure{ display:flex; justify-content:center; }
  .thinking__figure img{ width:min(100%, 280px); aspect-ratio:280/590; }
}

.thinking__link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.2em;
  text-decoration-thickness:1px;
  transition:color .3s var(--ease-soft);
}
.thinking__link:hover{ color:var(--grey); }
.thinking__link:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }

/* ---- 3チャネル比較表 ---- */
.thinking__table-wrap{
  max-width:var(--prose);
  margin:0 0 1.75rem;
  overflow-x:auto;
  border-top:1px solid var(--ink);
}

.thinking__table{
  width:100%;
  min-width:640px;
  table-layout:fixed;
  border-collapse:collapse;
  font-family:var(--font-serif);
  font-feature-settings:"palt" 1;
}

.thinking__table th,
.thinking__table td{
  padding:1.1rem 1.5rem 1.1rem 0;
  text-align:left;
  vertical-align:top;
}

.thinking__table thead th{
  font-family:var(--font-gothic);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--muted);
  border-bottom:1px solid var(--hairline);
  white-space:nowrap;
}

.thinking__table tbody td{
  font-size:.95rem;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--ink);
  border-bottom:1px solid var(--hairline);
}
.thinking__table tbody tr:last-child td{ border-bottom:1px solid var(--ink); }

.thinking__table td:first-child,
.thinking__table th:first-child{
  font-weight:600;
  white-space:nowrap;
  padding-right:2rem;
}
.thinking__table td:first-child strong,
.thinking__table th:first-child strong{
  font-weight:600;
}
.thinking__table td:last-child,
.thinking__table th:last-child{
  color:var(--muted);
  padding-right:0;
}

@media(max-width:539px){
  .thinking__section > p{ font-size:.95rem; }
  .thinking__table tbody td{ font-size:.9rem; }
}

/* ==================== Thinking — editorial marginalia (additive) ====================
   CSS-only "annotated manuscript" treatment for the existing Thinking page structure.
   No new elements, no new copy — pure ::before/::after hung off already-existing
   .thinking__opening / .thinking__section / .thinking__section-index / .thinking__eyebrow
   (none of which currently declare pseudo-elements, so nothing here is overridden).
   Echoes the site's own margin-rule + tick vocabulary — same pattern already used at
   #judgment-lineage .jl-stage (var(--hairline) line + var(--grey) tick) — at a quieter,
   fully static scale. No animation is introduced, so no additional
   prefers-reduced-motion handling is required beyond what already exists in main.css.
   Gated to min-width:1040px: below that, .thinking__container's padding gutter (2.5rem
   from 860px, 1.25rem below) isn't wide enough to hold the offset margin line cleanly. */

@media(min-width:1040px){
  .thinking__opening{ position:relative; } /* .thinking__section already has this from its own rule */

  .thinking__opening::before,
  .thinking__section::before{
    content:"";
    position:absolute;
    top:.35rem;
    bottom:.35rem;
    left:-1.75rem;
    width:1px;
    background:var(--hairline);
  }
  .thinking__opening::after,
  .thinking__section::after{
    content:"";
    position:absolute;
    top:.35rem;
    left:calc(-1.75rem - 4px);
    width:9px;
    height:1px;
    background:var(--grey);
  }
}

/* footnote-style tick before the existing 01/02/03 section marks (aria-hidden, decorative already) */
.thinking__section-index::before{
  content:"";
  display:inline-block;
  width:9px;
  height:1px;
  margin-right:.65em;
  background:var(--grey);
  vertical-align:middle;
}

/* (2026-07-09: the quiet tick that used to sit beside the eyebrow label was removed
   when the eyebrow became the shared full-size page title — a marginalia accent
   belongs to a small label, not to the page's H1.) */


/* ==================== Profile ==================== */
/* 依存: :root トークン(--paper/--ink/--band/--on-band/--grey/--hairline/--ease/--ease-soft)、
   var(--font-serif)/var(--font-gothic)、.band / .reveal は既存グローバル定義をそのまま使用。
   本ブロックは Profile セクション専用のレイアウト・タイポグラフィのみを追加する。 */

.profile{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem 4.5rem;
}
@media(min-width:860px){
  .profile{ padding:5.5rem 2.5rem 6rem; }
}

/* ---- intro ---- */
/* 2026-07-09: reverted the kamon+wordmark signature block (PR #46) back to a plain
   placeholder — the crest is not a portrait substitute; per direction it belongs only
   in the header wordmark now. Same placeholder pattern as Home's
   .profile-teaser__portrait (dashed frame, tinted fill, small caption) so the two
   "photo: pending" treatments read as one shared component, not two inventions. */
/* 2026-07-09: shrunk from 220px (was the first-view lead visual on an executive-advisor
   credibility page) to a small, clearly-secondary note beneath the name/title/statement
   — same dashed/tinted placeholder pattern, just no longer competing with the copy for
   attention. */
/* 2026-07-09: dashed placeholder box replaced with the illustration set's own portrait
   image, the owner's original JPG used directly (no crop/trace/frame — a potrace SVG
   trace attempt didn't reproduce the artwork accurately and was dropped; "枠をつけず
   基本このまま使って欲しい" either way). Sits between the name and role, not after the
   statement — the whole intro block is centered to match (see .profile__intro--centered
   below), since a line-broken image/heading block reads better centered than left-set. */
.profile__portrait{
  display:block;
  width:82px;
  height:96px;
  margin:1.5rem auto;
}

/* 2026-07-09: intro block centered (eyebrow/name/portrait/role/statement) to match the
   portrait's own centered placement — a left-aligned name sitting beside a centered
   image read as a layout mistake, not a choice. */
.profile__intro--centered{
  text-align:center;
}
.profile__intro--centered .profile__name{
  align-items:center;
}
.profile__intro--centered .profile__statement{
  margin-inline:auto;
}

.profile__eyebrow{
  font-family:var(--font-gothic);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--grey);
  margin:0 0 1.25rem;
}

.profile__name{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin:0 0 .25rem;
}
.profile__name-ja{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(2rem,5vw,3.1rem);
  letter-spacing:.06em;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}

.profile__role{
  font-family:var(--font-gothic);
  font-size:.85rem;
  letter-spacing:.03em;
  color:var(--muted);
  margin:0 0 2.25rem;
}

.profile__statement{
  font-family:var(--font-serif);
  font-size:1.08rem;
  line-height:2;
  max-width:var(--prose);
  color:var(--ink);
  font-feature-settings:"palt" 1;
}
.profile__statement .band{ margin-inline:.05em; }

/* ---- shared block rhythm ---- */
.profile__block{
  margin-top:3.25rem;
  padding-top:2.25rem;
  border-top:1px solid var(--hairline);
}

.profile__heading{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.15rem;
  letter-spacing:.06em;
  color:var(--ink);
  margin:0 0 1.5rem;
  font-feature-settings:"palt" 1;
}

.profile__text{
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.95;
  color:var(--ink);
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
}

/* ---- career list (2026-07-11, owner review: replaces the old 3-column <table>) ----
   The table's min-width:640px inside an overflow-x:auto wrapper forced horizontal
   scroll on any mobile viewport narrower than that. This stacked list has no minimum
   width, so it reflows to any viewport with no scroll — each record keeps the same 3
   facts (period / company / role description) the table showed, one per line instead
   of one per column. */
.profile__career{
  list-style:none;
  margin:0;
  padding:0;
}
.profile__career-item{
  padding:1.5rem 0;
  border-top:1px solid var(--hairline);
}
.profile__career-item:first-child{
  padding-top:0;
  border-top:none;
}
.profile__career-period{
  font-family:var(--font-gothic);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--muted);
  margin:0 0 .5rem;
}
.profile__career-company{
  font-family:var(--font-serif);
  font-size:.98rem;
  font-weight:600;
  color:var(--ink);
  font-feature-settings:"palt" 1;
  margin:0 0 .5rem;
}
.profile__career-desc{
  font-family:var(--font-serif);
  font-size:.94rem;
  line-height:1.85;
  color:var(--ink);
  font-feature-settings:"palt" 1;
  max-width:var(--prose);
  margin:0;
}

.profile__support{
  margin-top:2rem;
  font-family:var(--font-gothic);
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--ink);
  /* 2026-07-10 capped this at --prose (832px), 2026-07-11 briefly uncapped to match
     the career table's own width. Now that the table is gone (replaced by
     .profile__career, itself capped at --prose like every other body-copy element
     on this page), reverted back to --prose for a single consistent measure across
     the whole page. */
  max-width:var(--prose);
}
.profile__tags{
  color:var(--muted);
  letter-spacing:.03em;
}

/* ---- lists ---- */
.profile__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  max-width:var(--prose);
}
.profile__list li{
  position:relative;
  padding-left:1.5em;
  font-family:var(--font-serif);
  font-size:.98rem;
  line-height:1.85;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}
.profile__list li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--grey);
}

.profile__note{
  margin-top:1.25rem;
  font-family:var(--font-gothic);
  font-size:.82rem;
  line-height:1.9;
  color:var(--muted);
  max-width:var(--prose);
}
/* .profile__note is shared with Privacy's "最終更新日" line (prototype/privacy.html),
   so the base rule above is left untouched — changing it there would be an unrelated,
   unrequested change to a different page. This modifier opts in only About's own
   登壇 line.
   2026-07-11 (career-alignment PR): uncapped to match the career table's own width,
   fixing a mid-word split in "国内外のカンファレンス...".
   2026-07-11 (owner review, follow-up): the table is gone (replaced by
   .profile__career) and every other body-copy element on this page reverted to
   --prose, but this one sentence is long enough (866px of glyphs at .82rem) that even
   --prose's 832px wasn't quite enough room, and at real desktop widths narrower than
   ~1024px it still wrapped — the owner asked for no wrap at all rather than a cleaner
   wrap point. Kept uncapped (so it can use the full column at wide viewports) and
   dropped the font-size slightly (.82rem → .76rem, still comfortably legible — smaller
   than the career/support text but larger than the site's smallest label text at
   .66rem/.7rem) to fit within about a 900px-viewport / 820px-container width with
   margin to spare; verified empirically down to that width. Below the nav's own 860px
   breakpoint this still wraps, same as any other body copy on a narrow viewport — not
   chased further, since mobile wrapping here is normal and expected. */
.profile__note--wide{
  max-width:none;
  font-size:.76rem;
}

/* ---- expertise definition grid ---- */
.profile__expertise{
  display:grid;
  grid-template-columns:minmax(140px,220px) 1fr;
  column-gap:2.5rem;
  row-gap:0;
  margin:0;
}
.profile__expertise dt,
.profile__expertise dd{
  padding:1rem 0;
  border-top:1px solid var(--hairline);
}
.profile__expertise dt:first-of-type,
.profile__expertise dd:first-of-type{
  border-top:none;
  padding-top:0;
}
.profile__expertise dt{
  font-family:var(--font-gothic);
  font-size:.78rem;
  letter-spacing:.08em;
  color:var(--muted);
}
.profile__expertise dd{
  margin:0;
  font-family:var(--font-serif);
  font-size:.98rem;
  line-height:1.9;
  color:var(--ink);
  font-feature-settings:"palt" 1;
}

@media(max-width:640px){
  .profile__expertise{ grid-template-columns:1fr; }
  .profile__expertise dt{ padding-bottom:.35rem; }
  .profile__expertise dd{ border-top:none; padding-top:0; }
}

/* ---- closing ---- */
.profile__closing{
  margin-top:3.25rem;
  padding-top:2.25rem;
  border-top:1px solid var(--hairline);
}
.profile__closing-text{
  font-family:var(--font-serif);
  font-size:1.05rem;
  line-height:2;
  max-width:var(--prose);
  color:var(--ink);
  font-feature-settings:"palt" 1;
}
.profile__cta{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:1.5rem;
  font-family:var(--font-gothic);
  font-size:.85rem;
  letter-spacing:.08em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:.2em;
  transition:opacity .3s var(--ease-soft);
}
.profile__cta:hover{ opacity:.6; }

/* ---- contact ---- */
.profile__contact-link{
  font-family:var(--font-gothic);
  font-size:1rem;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:border-color .3s var(--ease-soft);
}
.profile__contact-link:hover{ border-color:var(--ink); }

/* ---- utility ---- */
.profile__sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


/* ==================== Contact ==================== */
/* Contact — closing CTA section.
   依存（再定義しない・グローバル前提）:
   - :root トークン（--paper/--ink/--band/--on-band/--grey/--hairline/--ease/--ease-soft）
   - var(--font-serif) / var(--font-gothic)（divider CSS が既に無定義利用している前提を継承）
   - .band / .rule（Hero探索アーティファクトのコンポーネント。内部構造・アニメーションは無改変で
     クラス付与のみ。.rule はHero側の .js/.is-loaded/.settled 起点アニメーションに乗るため、
     スクロールで到達した時点では既に「呼吸」定常状態で表示される想定）
   - .reveal（共有JSのIntersectionObserver fade-in+slide-up。個別実装はしない）

   Note: 見出しランクは h1（.contact__heading）/ h2（.contact__block-title）。
   クラスセレクタのみで要素セレクタは使っていないため、タグ変更によるCSS影響はない。
*/

.contact{
  background:var(--paper);
  color:var(--ink);
  font-feature-settings:"palt" 1;
}

/* 2026-07-09: widened from 880px to the shared 1180px frame used by every other page
   (was reading as a separately-centered narrow column, same inconsistency as
   #judgment-lineage below) — also gives .contact__grid's two-column layout proper
   room instead of being squeezed into 880px. */
.contact__inner{
  max-width:1180px;
  margin-inline:auto;
  padding:4rem 1.25rem 6rem;
}
@media(min-width:860px){
  .contact__inner{ padding:5.5rem 2.5rem 8rem; }
}

/* ---- Head ---- */

/* Shared page-title spec -- keep identical to .engagement__title (see its comment). */
.contact__heading{
  margin:0 0 2rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  line-height:1.45;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  color:var(--ink);
}

.contact__lede{
  font-family:var(--font-serif);
  font-size:clamp(1rem, .92rem + .35vw, 1.2rem);
  line-height:2;
  max-width:var(--prose);
  margin:0;
}

/* 2026-07-10, P0 display-bug fix: this rule previously set `display:inline`,
   overriding .band's own `display:inline-block`. For a short one-line phrase
   that's visually identical, but for a long phrase that wraps across lines
   (Contact's lede second sentence) it breaks .band's ::before{position:absolute;
   inset:0} background box — an absolutely-positioned pseudo-element on a
   *fragmented* plain-inline element resolves against a single fragment's
   geometry, not the full wrapped block, so the black background collapsed to
   a narrow box and most of the text rendered white-on-white (invisible).
   .band is inline-block specifically so multi-line content stays one atomic
   box; no override needed here at all — this rule intentionally left empty
   of a `display` declaration. Do not reintroduce `display:inline`. */
.contact__band{}

/* ---- Boundary rule ----
   .rule 自体のCSSは再定義しない。中央寄せのための外側ラッパーのみ用意する
   （.rule の display/width を直接上書きしない）。 */
.contact__rule-wrap{
  display:flex;
  justify-content:center;
  margin:3.5rem 0;
}

/* ---- Grid: 依頼事項 / 連絡先 ---- */

.contact__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}
@media(min-width:860px){
  .contact__grid{
    grid-template-columns:1.15fr .85fr;
    gap:4rem;
    align-items:start;
  }
}

.contact__block-title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.1em;
  margin:0 0 1.1rem;
}

.contact__block-lead{
  font-family:var(--font-serif);
  font-size:.95rem;
  line-height:1.9;
  color:var(--ink);
  margin:0 0 1.25rem;
}

.contact__list{
  list-style:none;
  margin:0 0 1.5rem;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.contact__list li{
  display:flex;
  align-items:baseline;
  gap:.9em;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--hairline);
}
.contact__list li:last-child{
  border-bottom:none;
  padding-bottom:0;
}
.contact__list-index{
  flex:none;
  font-family:var(--font-gothic);
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--muted);
}
.contact__list-text{
  font-family:var(--font-serif);
  font-size:1rem;
  line-height:1.7;
}
.contact__list-hint{
  display:inline;
  color:var(--muted);
  font-size:.9em;
}

.contact__block-note{
  font-family:var(--font-serif);
  font-size:.95rem;
  line-height:1.9;
  color:var(--ink);
  margin:0;
}
.contact__block-note a,
.contact__block-note a:visited{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.2em;
  text-decoration-thickness:1px;
  transition:color .3s var(--ease-soft);
}
.contact__block-note a:hover{ color:var(--grey); }
.contact__block-note a:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; }

/* ---- Address block ---- */

.contact__block--address{
  border-top:1px solid var(--hairline);
  padding-top:2rem;
}
@media(min-width:860px){
  .contact__block--address{
    border-top:none;
    padding-top:0;
  }
}

.contact__mail{
  display:inline-flex;
  align-items:baseline;
  gap:.65em;
  text-decoration:none;
  color:var(--ink);
  font-family:var(--font-gothic);
  font-size:clamp(1.05rem, .92rem + .6vw, 1.3rem);
  letter-spacing:.01em;
  padding-bottom:.4em;
  border-bottom:1px solid var(--ink);
  transition:opacity .3s var(--ease), border-color .3s var(--ease);
}
.contact__mail-arrow{
  font-family:var(--font-gothic);
  transition:transform .3s var(--ease-soft);
}
@media(hover:hover) and (pointer:fine){
  .contact__mail:hover{ opacity:.55; }
  .contact__mail:hover .contact__mail-arrow{ transform:translateX(.3em); }
}

/* ---- Foot ---- */

.contact__foot{
  margin-top:5rem;
  max-width:38rem;
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
}
/* Unframed (no circle/border — owner direction), left-set: it sits beside the closing
   text on the same line/row, not on its own line, so it follows the container's
   left alignment rather than being centered. */
.contact__foot-avatar{
  flex:none;
  width:40px;
  height:47px;
  margin-top:.2em;
}

.contact__closing{
  font-family:var(--font-serif);
  font-size:clamp(1rem, .93rem + .3vw, 1.15rem);
  line-height:2;
  margin:0;
}
.contact__closing-note{
  color:var(--muted);
}

/* ==================== React Islands (shared scaffold) ====================
   Base treatment for any `<div class="react-island" data-react-mount="…">`
   mount point (see assets/js/react-islands.js for the JS-side contract).
   Islands are decorative/supplementary — the content they visualize already
   exists as real HTML elsewhere on the page — so the only shared behavior
   here is a quiet fade-in once a component has actually mounted into the
   container, echoing the .reveal fade-in grammar already used sitewide.
   Positioning/layout specific to one island (a sticky rail, a grid diagram)
   is scoped CSS its own component script adds separately; nothing
   structural is assumed here. Depends on existing --ease-soft token; does
   not redefine any existing selector. */
.react-island{
  opacity:0;
  transition:opacity .6s var(--ease-soft);
}
.react-island[data-react-state="mounted"]{ opacity:1; }
/* React/ReactDOM failed to load from the CDN, or the mount callback threw —
   the island stays empty. The equivalent content already reads fine
   elsewhere on the page without it, by design. */
.react-island[data-react-state="unavailable"],
.react-island[data-react-state="error"]{ display:none; }

@media (prefers-reduced-motion:reduce){
  .react-island{ transition:none; }
}

/* ==================== NextStep (shared "quiet next-step" closing link) ====================
   Reusable, page-agnostic component: a single restrained forward-link placed at the very end
   of a page's main content, after its last content block. Not a hard CTA — deliberately reuses
   the same quiet visual language already established for closing links elsewhere in the site
   (see .profile__cta's "判断の系譜を読む →" on Profile: font-gothic, small size, underline,
   opacity-only hover — no color inversion, no fill, no badge). The .next-step wrapper reuses
   the same "hairline border-top separates a new closing beat" rhythm already used by
   .profile__block / .engagement__block / .evidence__speaking / .evidence__qorum.
   依存（既存定義の再利用、ここでは再定義しない）: :root トークン(--ink/--hairline/--ease-soft)、
   var(--font-gothic)、共有 .reveal（IntersectionObserverによるscroll-in、main.jsは変更不要 —
   querySelectorAll('.reveal') が初期DOMにある新規要素も自動的に拾う）。 */
.next-step{
  margin-top:3.25rem;
  padding-top:2.25rem;
  border-top:1px solid var(--hairline);
}
.next-step__link{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:var(--font-gothic);
  font-size:.85rem;
  letter-spacing:.08em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:.2em;
  transition:opacity .3s var(--ease-soft);
}
.next-step__link:hover{ opacity:.6; }

/* ==================== JudgmentLineage — horizontal timeline rail (React island) ====================
   Progressive enhancement layered on top of the existing per-Stage boundary
   line (#judgment-lineage .jl-stage — defined above under
   "==================== JudgmentLineage ===================="). That
   existing spine remains the real, always-present navigation aid and is
   not touched by any rule here.

   2026-07-10, owner review (Issue #59), full redesign: previous versions
   kept the tick and the year as two separately-positioned elements (first
   two lists synced by `justify-content:space-between` in each, which
   measurably misaligned — a 1px tick and wide year text compute different
   space-between centers; then nth-child-matched absolute positions across
   two sibling containers, which worked but the owner flagged as fragile
   ("別コンテナのnth-childで同期しない")). This version renders number, dot,
   and year as ONE node per checkpoint (.jl-rail__checkpoint, in
   judgment-lineage-rail.js) — there is nothing left to keep in sync between
   separate containers, since all three live in the same box.
   The 5 checkpoint nodes are still positioned via explicit left values
   (not flexbox space-between) so spacing is exact regardless of text
   width: checkpoint 1 at a fixed 28px inset from the track's left edge,
   checkpoint 5 at a fixed 28px inset from the right edge, checkpoints 2-4
   linearly interpolated between those two anchors (so 5 nodes stay evenly
   spaced even though the endpoints mix a px inset with a % position).
   .jl-rail__line spans the track's full 0%-100% width, meaning it extends
   exactly 28px past checkpoint 1 and 5 — a visible line-continues-past-the-
   first/last-point read, not ticks flush with the line's own ends.
   Scroll-driven active/current styling and the IntersectionObserver that
   drove it are removed entirely (not just neutered) — this is a static
   page, and a highlighted "current position" would need a real interaction
   spec the owner didn't ask for; no dead state left in
   judgment-lineage-rail.js. All 5 checkpoints render identically: same 8px
   var(--ink) dot, same var(--muted) number/year (legible but visibly
   quieter than body text, matching this page's existing --muted
   convention for supporting text).
   Still aria-hidden — the numbers (1-5) and years are the same information
   already in each Stage's own .jl-stage-label / .jl-stage-meta text, so
   this stays an echo of always-accessible content, not a second source of
   it (see judgment-lineage.html — the mount point itself carries
   aria-hidden="true").
   Depends on the shared .react-island base rules (added separately by the
   react-islands scaffold patch to this stylesheet — not redefined here)
   plus existing :root tokens (--paper/--ink/--muted/--ease-soft/--nav-h/
   --nav-h-mobile). Stays empty/inert if react-islands.js or its
   React/ReactDOM dependency doesn't load — see
   .react-island[data-react-state] rules. */
.jl-rail{
  position:sticky;
  top:var(--nav-h-mobile);
  z-index:5;
  padding:.85rem 0;
  background:var(--paper);
}
@media(min-width:860px){ .jl-rail{ top:var(--nav-h); } }

/* Below the breakpoint where the existing per-Stage rail itself collapses
   (see "#judgment-lineage .jl-stage{ ... }" inside the file's own
   "@media (max-width: 639px)" block above), this decorative echo is
   hidden too — narrow viewports keep just the plain, always-real Stage
   content with no extra chrome. */
@media(max-width:639px){ .jl-rail{ display:none; } }

.jl-rail__track{ position:relative; }
.jl-rail__line{
  position:absolute;
  left:0;
  right:0;
  top:20.8px; /* empirically centers on .jl-rail__dot's own vertical center — verified via getBoundingClientRect */
  height:1px;
  background:var(--ink);
}
.jl-rail__checkpoints{ position:relative; }
.jl-rail__checkpoint{
  position:absolute;
  top:0;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}
.jl-rail__checkpoint:nth-child(1){ left:28px; }
.jl-rail__checkpoint:nth-child(2){ left:calc(25% + 14px); }
.jl-rail__checkpoint:nth-child(3){ left:50%; }
.jl-rail__checkpoint:nth-child(4){ left:calc(75% - 14px); }
.jl-rail__checkpoint:nth-child(5){ left:calc(100% - 28px); }
.jl-rail__number{
  font-family:var(--font-gothic);
  font-size:.68rem;
  line-height:1;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.jl-rail__dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink);
}
.jl-rail__year{
  font-family:var(--font-gothic);
  font-size:.68rem;
  line-height:1;
  letter-spacing:.02em;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ==================== 404 (Issue #62) ====================
   Reuses .profile / .profile__intro--centered / .profile__statement / .reveal /
   .next-step__link as-is (same "simple centered page" scaffold Privacy already
   reuses) — only the 4 rules below are new. Illustration is decorative only
   (alt=""): the heading, lede, and actions below it fully stand on their own if
   the image fails to load. */
.notfound__code{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(3.4rem,9vw,5.2rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  margin:0 0 .75rem;
}
.notfound__lede{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.15rem,2.6vw,1.4rem);
  color:var(--ink);
  font-feature-settings:"palt" 1;
  margin:0 0 1.25rem;
}
/* Native 90x290 (no upscale — same "export at final display size" lesson as
   .profile-teaser__portrait/.profile__portrait). Kept small and placed after
   the copy, not before it, so the bowing figure reads as a quiet aside rather
   than the page's lead visual. No Home/Contact CTA here — the sticky nav
   above already covers both. */
.notfound__portrait{
  display:block;
  width:90px;
  height:290px;
  margin:1.75rem auto 0;
}