:root {
  --paper: #f8f8f5;
  --paper-bright: #fff;
  --ink: #171915;
  --muted: #6a6d64;
  --hairline: #cfd1ca;
  --leaf: #84946d;
  --leaf-dark: #536047;
  --utility: "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --reading: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --page-pad: clamp(24px, 4.8vw, 76px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--reading); line-height: 1.9; }
button, a { font: inherit; }
a { color: inherit; }
img { width: 100%; height: 100%; object-fit: cover; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; color: #fff; background: #171915; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.family-page { overflow: clip; background: radial-gradient(circle at 30% 10%, #fff 0, var(--paper) 42%); }
.scene { position: relative; }
.media-frame { margin: 0; overflow: hidden; background: #e8ebe3; }
.media-frame.is-missing { min-height: 180px; border: 1px solid var(--hairline); display: grid; place-items: center; }
.media-frame.is-missing::after { content: "写真を読み込めませんでした"; color: var(--muted); font: 12px/1.6 var(--utility); }
.media-frame.is-missing img { display: none; }

.studio-toggle { position: fixed; z-index: 40; top: 18px; right: 18px; display: flex; align-items: center; gap: 10px; border: 1px solid rgb(23 25 21 / .18); border-radius: 999px; padding: 8px 14px 8px 9px; background: rgb(255 255 255 / .88); color: var(--ink); box-shadow: 0 8px 28px rgb(41 46 34 / .08); backdrop-filter: blur(12px); cursor: pointer; font: 12px/1 var(--utility); }
.studio-toggle span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--leaf-dark); font-size: 10px; letter-spacing: .08em; }
.studio-toggle:focus-visible, .studio-panel button:focus-visible, .studio-panel select:focus-visible, a:focus-visible { outline: 3px solid #3157d5; outline-offset: 4px; }
.studio-panel { position: fixed; z-index: 50; top: 0; right: 0; width: min(390px, 94vw); height: 100dvh; overflow: auto; padding: 24px; border-left: 1px solid #dfe1da; background: #fdfdfb; box-shadow: -24px 0 80px rgb(40 45 34 / .14); font-family: var(--utility); }
.studio-panel__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.studio-panel__head p { margin: 0 0 4px; font-size: 10px; letter-spacing: .16em; }
.studio-panel__head h2 { margin: 0; font: 700 22px/1.3 var(--utility); }
.studio-panel__head button, .studio-panel__actions button { border: 1px solid #cfd1ca; background: #fff; padding: 9px 12px; cursor: pointer; }
.studio-panel__lead { margin: 22px 0; color: #64675f; font-size: 13px; }
.studio-parts { display: grid; gap: 8px; }
.studio-part { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px; border: 1px solid #dedfd9; background: #fff; }
.studio-part strong { display: block; font-size: 13px; }
.studio-part small { display: block; color: #73766e; margin-top: 2px; }
.studio-part__controls { display: flex; gap: 4px; }
.studio-part button { width: 30px; height: 30px; padding: 0; border: 1px solid #d6d8d1; background: #fafbf8; cursor: pointer; }
.studio-panel__actions { position: sticky; bottom: -24px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px -24px -24px; padding: 14px 24px 24px; background: linear-gradient(transparent, #fdfdfb 22%); }
.studio-panel__actions [data-studio-preview] { color: #fff; background: var(--leaf-dark); border-color: var(--leaf-dark); }

.family-hero { height: clamp(620px, 46vw, 760px); display: grid; grid-template-columns: 32% 68%; align-items: stretch; background: #fff; }
.family-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; padding: clamp(54px, 5vw, 78px) 2vw 5vw var(--page-pad); }
.family-hero h1 { width: calc(100% + 8vw); margin: 0; font-size: clamp(46px, 4.4vw, 72px); font-weight: 400; line-height: 1.38; letter-spacing: .07em; }
.family-hero h1 > span { display: block; }
.family-hero__image { height: 100%; }
.family-hero__image img { object-position: 52% center; }
.hero-name { order: 3; margin: 24px 0 0; font-size: 20px; letter-spacing: .12em; }
.hero-name span { font-size: 11px; font-family: var(--utility); letter-spacing: .18em; }
.hero-intro { order: 2; margin: 26px 0 0; color: #4f534c; font-size: clamp(12px, 1vw, 16px); letter-spacing: .08em; line-height: 2.1; }
.family-hero h1 { order: 1; }
.year-rail { color: #666b62; font: 10px/1 var(--utility); letter-spacing: .06em; }
.year-rail i { display: block; width: 1px; height: 42px; margin: 8px 0 8px 10px; background: #9da198; }
.year-rail--hero { position: absolute; z-index: 3; left: calc(var(--page-pad) - 28px); bottom: -240px; }

.constellation { padding: 0 var(--page-pad) 4vw; background: #fff; }
.constellation__grid { display: grid; grid-template-columns: 11% 13% 13% 17% 16% 22%; grid-template-rows: 14vw 10vw 12vw 9vw; gap: clamp(8px, 1vw, 16px); max-width: 1480px; margin: 0 auto; }
.constellation__grandparents { grid-column: 2 / 4; grid-row: 1 / 3; }
.constellation__hands { grid-column: 4 / 5; grid-row: 1 / 2; }
.constellation__run { grid-column: 6 / 7; grid-row: 1 / 5; }
.constellation__window { grid-column: 1 / 2; grid-row: 3 / 5; }
.constellation__home { grid-column: 3 / 6; grid-row: 2 / 3; }
.constellation__note { grid-column: 3 / 6; grid-row: 3 / 5; align-self: center; padding: 2vw; }
.constellation__note p { margin: 0 0 4px; font-size: clamp(15px, 1.5vw, 24px); letter-spacing: .12em; }
.constellation__note span { color: var(--muted); font-size: clamp(11px, .9vw, 14px); letter-spacing: .06em; }

.statement-fold { min-height: 28vw; display: grid; grid-template-columns: 13% 34% 31% 22%; grid-template-rows: 8vw 10vw 8vw; align-items: center; padding: 1vw var(--page-pad); background: #fff; }
.statement-fold h2 { grid-column: 2 / 3; grid-row: 1 / 4; margin: 0; font-size: clamp(46px, 4.7vw, 78px); font-weight: 400; line-height: 1.45; letter-spacing: .13em; }
.statement-fold h2 > span { display: block; }
.statement-fold__copy { grid-column: 3 / 4; grid-row: 2 / 3; font-size: clamp(12px, 1vw, 16px); letter-spacing: .06em; }
.statement-fold__copy p { margin: 0 0 1em; }
.statement-fold__landscape { grid-column: 4 / 5; grid-row: 2 / 3; height: 11vw; }
.year-rail--statement { grid-column: 1 / 2; grid-row: 1 / 4; align-self: stretch; padding-top: 5vw; }
.year-rail--statement i { height: 56px; }

.white-wall { min-height: 34vw; display: grid; place-items: center; background: linear-gradient(120deg, #ececea, #fff 58%, #f1f1ee); }
.white-wall::after { content: ""; position: absolute; inset: 0 0 0 60%; background: radial-gradient(ellipse at 90% 48%, rgb(119 142 88 / .12), transparent 60%); }
.white-wall figure { position: relative; z-index: 1; width: 32%; height: 27vw; max-height: 460px; }
.white-wall__year { position: absolute; left: var(--page-pad); top: 12%; color: var(--muted); font: 10px/1 var(--utility); }

.contact-river { background: #fff; }
.contact-river__strip { display: grid; grid-template-columns: 16% 22% 27% 35%; grid-template-rows: 25vw; gap: 4px; }
.contact-river figure { min-width: 0; }
.strip-child img { object-position: 48% 45%; }
.strip-home img { object-position: 60% center; }
.strip-portrait { z-index: 2; margin: -9vw 0 -7vw; }
.strip-table img { object-position: 58% center; }

.milestone-field { min-height: 20vw; display: grid; grid-template-columns: 64% 36%; grid-template-rows: auto 1fr; align-items: center; padding: 3vw var(--page-pad); color: #fff; background: var(--leaf); clip-path: polygon(0 0, 100% 7%, 96% 82%, 76% 100%, 46% 90%, 19% 100%, 0 84%); }
.milestone-field h2 { grid-column: 2 / 3; grid-row: 1 / 2; align-self: end; margin: 0 0 .7em 48px; padding: 0; font-size: clamp(15px, 1.35vw, 22px); font-weight: 400; letter-spacing: .22em; }
.milestone-field ul { grid-column: 2 / 3; grid-row: 2 / 3; display: grid; gap: .3em; margin: 0; padding: 0; list-style: none; font-size: clamp(18px, 1.85vw, 30px); letter-spacing: .2em; }
.milestone-field li:not(:last-child)::after { content: ""; display: block; width: 1px; height: 18px; margin: 8px 0 0 1em; background: rgb(255 255 255 / .65); }

.paper-workspace { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 4vw; padding: 9vw var(--page-pad) 7vw; background: radial-gradient(circle at 25% 10%, #fff, #f1f1ed 70%); }
.session-ledger__sheet { transform: rotate(-2.4deg); padding: 4vw 3vw 5vw; background: #fff; box-shadow: 0 22px 60px rgb(57 62 48 / .12); }
.session-ledger h2, .workflow-rail h2 { margin: 0 0 2.3em; font-size: clamp(18px, 1.8vw, 29px); font-weight: 400; letter-spacing: .16em; }
.session-ledger dl { margin: 0; }
.session-ledger dl div { margin-bottom: 1.7em; }
.session-ledger dt { font: 11px/1.4 var(--utility); letter-spacing: .12em; }
.session-ledger dd { margin: .45em 0 0; font-size: clamp(14px, 1.25vw, 20px); }
.session-ledger__sheet > p { margin: 2.6em 0 0; font-size: 13px; }
.workflow-rail { padding-top: 6vw; }
.workflow-rail ol { margin: 0; padding: 0; list-style: none; }
.workflow-rail li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; padding: 0 0 20px; border-bottom: 1px solid var(--hairline); }
.workflow-rail li + li { padding-top: 20px; }
.workflow-rail li > span { font: 11px/1.6 var(--utility); }
.workflow-rail h3 { margin: 0; font-size: 16px; font-weight: 400; }
.workflow-rail p { margin: .4em 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.profile-colophon { grid-column: 3 / 4; padding-top: 2vw; }
.profile-colophon figure { height: 14vw; max-height: 220px; }
.profile-colophon__copy { padding: 2vw 0 0; }
.profile-colophon h2 { margin: 0 0 .3em; font-size: clamp(18px, 1.8vw, 28px); font-weight: 400; letter-spacing: .12em; }
.profile-colophon h2 small { font-size: 10px; font-weight: 400; }
.profile-colophon p { margin: .5em 0; font-size: 12px; }
.profile-colophon nav { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 1.8em; font: 11px/1 var(--utility); }
.profile-colophon nav a { text-decoration-thickness: 1px; text-underline-offset: 5px; }

.margin-closing { display: grid; grid-template-columns: 66% 34%; min-height: 20vw; background: #fff; }
.margin-closing figure { height: 20vw; }
.margin-closing__action { display: flex; flex-direction: column; justify-content: center; padding: 3vw; }
.margin-closing__action p { margin: 0 0 .7em; font-size: 15px; letter-spacing: .14em; }
.margin-closing__action h2 { margin: 0; font-size: clamp(30px, 3.3vw, 54px); font-weight: 400; letter-spacing: .12em; }
.margin-closing__action a { display: flex; justify-content: space-between; gap: 20px; margin-top: 2em; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none; font: 13px/1.4 var(--utility); }
.platform-credit { padding: 30px var(--page-pad); color: #6e7169; background: #fff; text-align: right; font: 10px/1.7 var(--utility); letter-spacing: .04em; }
.platform-credit p { margin: 0; }

[data-part-hidden="true"] { display: none !important; }
body.is-studio-open { overflow: hidden; }

@media (max-width: 1100px) {
  .family-hero { grid-template-columns: 38% 62%; }
  .family-hero h1 { font-size: clamp(42px, 4.8vw, 58px); }
  .constellation__grid { grid-template-columns: 12% 15% 15% 18% 14% 20%; }
  .paper-workspace { grid-template-columns: 1fr 1fr; }
  .profile-colophon { grid-column: 1 / 3; display: grid; grid-template-columns: 42% 1fr; gap: 4vw; align-items: end; }
  .profile-colophon figure { height: 28vw; }
}

@media (max-width: 760px) {
  :root { --page-pad: 22px; }
  .studio-toggle { top: 10px; right: 10px; }
  .family-hero { width: 100%; height: auto; min-height: auto; display: block; padding-top: 0; }
  .family-hero__image { height: 64vh; min-height: 480px; }
  .family-hero__image img { object-position: 57% center; }
  .family-hero__copy { min-height: 72vh; justify-content: start; padding: 84px var(--page-pad) 110px; }
  .family-hero h1 { width: 100%; height: auto; font-size: clamp(43px, 13vw, 62px); line-height: 1.48; letter-spacing: .08em; writing-mode: horizontal-tb; }
  .family-hero h1 > span { display: block; }
  .hero-intro { position: static; order: 2; margin: 38px 0 0; font-size: 13px; }
  .hero-name { margin-top: 24px; }
  .year-rail--hero { left: 8px; bottom: -174px; }
  .constellation { padding: 120px var(--page-pad) 70px; }
  .constellation__grid { grid-template-columns: 42% 16% 42%; grid-template-rows: 46vw 28vw 64vw 34vw 42vw; gap: 7px; }
  .constellation__grandparents { grid-column: 1 / 3; grid-row: 1 / 2; }
  .constellation__hands { grid-column: 3 / 4; grid-row: 1 / 2; }
  .constellation__run { grid-column: 2 / 4; grid-row: 2 / 4; }
  .constellation__window { grid-column: 1 / 2; grid-row: 2 / 4; }
  .constellation__home { grid-column: 1 / 4; grid-row: 4 / 5; }
  .constellation__note { grid-column: 1 / 4; grid-row: 5 / 6; padding: 20px 6px; }
  .statement-fold { min-height: auto; display: block; padding: 64px var(--page-pad) 90px 54px; }
  .statement-fold h2 { font-size: clamp(46px, 14vw, 66px); line-height: 1.55; }
  .statement-fold__copy { margin: 54px 0 46px; font-size: 13px; }
  .statement-fold__landscape { width: 54%; height: 28vw; margin-left: auto; }
  .year-rail--statement { position: absolute; left: 8px; top: 60px; }
  .white-wall { min-height: 94vw; }
  .white-wall figure { width: 72%; height: 58vw; }
  .contact-river__strip { grid-template-columns: 28% 24% 48%; grid-template-rows: 52vw 42vw; }
  .strip-child { grid-column: 1 / 2; grid-row: 1 / 2; }
  .strip-home { grid-column: 2 / 4; grid-row: 1 / 2; }
  .strip-portrait { grid-column: 1 / 3; grid-row: 2 / 3; margin: -14vw 0 -8vw; z-index: 2; }
  .strip-table { grid-column: 3 / 4; grid-row: 2 / 3; }
  .milestone-field { min-height: 124vw; grid-template-columns: 1fr; align-content: center; gap: 38px; padding: 24vw 54px; clip-path: polygon(0 3%, 100% 0, 96% 91%, 66% 100%, 33% 94%, 0 100%); }
  .milestone-field h2 { margin: 0; padding: 0; font-size: 16px; }
  .milestone-field ul { font-size: clamp(22px, 7vw, 30px); }
  .paper-workspace { display: block; padding: 100px var(--page-pad) 80px; }
  .session-ledger__sheet { padding: 52px 32px 60px; transform: rotate(-1deg); }
  .workflow-rail { padding: 100px 14px 70px; }
  .profile-colophon { display: block; }
  .profile-colophon figure { height: 66vw; }
  .profile-colophon__copy { padding: 28px 6px 0; }
  .margin-closing { display: block; }
  .margin-closing figure { height: 64vw; }
  .margin-closing__action { padding: 56px var(--page-pad) 68px; }
  .platform-credit { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (forced-colors: active) {
  .milestone-field { clip-path: none; border-block: 1px solid CanvasText; }
}