/*
 * Layout study for 竜骨虚構群集. Existing palette and font families are untouched.
 * Lism reference: token rhythm and composable container / stack / grid rules.
 * Refero Structured reference: editorial spacing, hairline divisions, flat controls.
 * Deliberately use the source stylesheet's brand values rather than reference colors/fonts.
 */
:root {
  --lh-body: 1.75;
  --gap-line: 0em;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 104px;
  --space-7: 168px;
  --page-max: 1200px;
  --gutter: clamp(24px, 4.5vw, 64px);
  --reading-max: 44em;
  --section-gap: clamp(56px, 6vw, 80px);
  --radius-control: 2px;
}
body { line-height: var(--lh-body); }
.wrap {
  max-width: calc(var(--page-max) + var(--gutter) * 2);
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
.bar { backdrop-filter:none; -webkit-backdrop-filter:none; }
.bar-in { max-width:calc(var(--page-max) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
.brand { gap:var(--space-2); }
.brand span { font-size:22px; letter-spacing:.12em; }
.bar nav { gap:var(--space-3); }
.bar nav a { font-size:14px; letter-spacing:.06em; }

/* The opening's poem, scale, spacing, and original rhythm remain as authored. */
.title { min-height:88svh; padding-block:64px 72px; }
.title-in {
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  align-items:center;
  justify-content:center;
  text-align:center;
}
.title .logo { height:clamp(190px, 30svh, 280px); width:auto; }
.title .kind { font-size:clamp(14px,2.2vw,17px); letter-spacing:.32em; gap:14px; }
.kind::before,.kind::after { display:block; width:clamp(24px,6vw,56px); }
.title h1 { font-size:clamp(34px,7.4vw,68px); letter-spacing:.24em; margin-right:-.24em; line-height:1.2; }
.title .status { margin:6px 0 0; font-size:var(--fs-cap); letter-spacing:.24em; }

section.block { padding-block:var(--section-gap); }
h2 { margin-bottom:var(--space-4); font-size:var(--fs-h2); letter-spacing:.1em; line-height:1.75; }
.prose, .prose.lines, .tenets p, .faq .a, .legend dt, .legend dd,
.faq summary, .field textarea, .field input, .map-note, .letter-status {
  line-height:var(--lh-body);
}
.prose.lines { font-size:var(--fs-body); }
.prose.lines p + p { margin-top:var(--space-4); }
.prose.lines span + span, .tenets p span + span, .faq .a p span + span { margin-top:0; }
.prose, .tenets p, .faq .a { max-width:var(--reading-max); }

/* The map is the one full-width exhibit. The rest follows a common reading axis. */
.map-head { gap:var(--space-3); align-items:center; scroll-margin-top:var(--space-3); }
.map-head h2 { flex:1 1 auto; text-indent:var(--map-title-inset,0px); }
.touch { height:48px; padding-inline:var(--space-3); border-radius:var(--radius-control); letter-spacing:.08em; }
.touch.lure::after { content:'↗'; padding-left:var(--space-2); font-family:var(--sans); }
.find { flex:0 1 300px; max-width:300px; height:48px; padding-inline:12px; gap:8px; background:var(--ground-2); border:1px solid var(--line); border-radius:4px; }
.find > svg { flex:none; }
.find input { padding:0; font-family:var(--serif); font-size:15px; font-weight:400; line-height:1.4; letter-spacing:0; }
.find:has(input:disabled) { opacity:1; }
.find-results, .find-results button { border-radius:var(--radius-control); }
.map-frame { margin-top:var(--space-4); height:clamp(400px, 72svh, 760px); }
.map-over { top:var(--space-3); }
.map-over .wrap { display:flex; align-items:flex-start; }
.count { padding:8px 14px; border-radius:var(--radius-control); }
.exit { border-radius:var(--radius-control); }
.root-touch { position:absolute; z-index:1; appearance:none; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; touch-action:manipulation; }
.root-touch:focus-visible { outline:2px solid var(--ember); outline-offset:3px; }
.legend { max-width:648px; margin:var(--space-4) auto 0; column-gap:var(--space-4); row-gap:var(--space-2); }
.legend dt { font-size:var(--fs-ui); }
.legend .legend-symbol { display:block; width:56px; height:32px; }
.map-key { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-3); max-width:648px; margin:var(--space-4) auto 0; padding:0; list-style:none; font-family:var(--serif); font-size:var(--fs-ui); line-height:var(--lh-body); color:var(--ink-2); }
.map-key li { display:flex; align-items:center; gap:var(--space-1); }
.map-key svg { display:block; flex:none; }
.map-key + .legend { margin-top:var(--space-2); }
.legend dd { font-size:var(--fs-ui); }
.map-note { max-width:648px; margin:var(--space-3) auto 0; }

/* A centered reading column: headings and text share the same left edge. */
#about > .wrap, #faq > .wrap, #letters > .wrap {
  display:block;
  max-width:calc(648px + var(--gutter) * 2);
}
#about > .wrap > h2, #faq > .wrap > h2, #letters .letters-head {
  margin:0 0 var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--line-2);
}
#about > .wrap > .prose, #about > .wrap > .tenets,
#faq > .wrap > .faq, #letters > .wrap > .prose,
#letters > .wrap > .letter-status, #letters > .wrap > .letter { grid-column:2; }
#about > .wrap > .prose, #letters > .wrap > .prose { border-top:0; padding-top:0; }
.tenets { margin-top:var(--space-4); gap:var(--space-4); }
.tenets > div { border-top:1px solid transparent; padding-top:var(--space-3); }
#faq > .wrap > h2 { border-top-color:transparent; }
.tenets h3 { line-height:1.75; margin-bottom:var(--space-2); }
.tenets h3 .tip { font-style:italic; }
.tenets p { padding-left:0; }
.faq { margin:0; padding-top:0 !important; max-width:100%; }
.faq summary { padding-block:var(--space-3); grid-template-columns:1.2em 1fr 12px; gap:var(--space-2); }
.faq .a { gap:var(--space-2); padding-bottom:var(--space-3); }
.faq .a::before { line-height:1.75; }
.faq .a p + p { margin-top:var(--space-2); }
.faq .a li + li { margin-top:var(--space-1); }
.letters-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:var(--space-3); }
.letters-head h2 { font-size:clamp(23px,2.3vw,32px); white-space:nowrap; }
.follow { height:auto; padding:0 0 var(--space-1); font-size:13px; border:0; border-bottom:1px solid var(--line-2); border-radius:0; }
.letter { margin-top:var(--space-4); gap:var(--space-3); }
.kind-row { gap:var(--space-1); }
.kind-row span { border-radius:var(--radius-control); min-width:64px; padding-inline:var(--space-2); justify-content:center; }
.field textarea, .field input { border-radius:var(--radius-control); padding:var(--space-2); line-height:1.75; }
.field textarea { min-height:210px; }
.send { height:48px; padding-inline:var(--space-4); border-radius:var(--radius-control); }
.send-row { gap:var(--space-3); }
.foot { padding-block:var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom,0px)); }
.foot .wrap { gap:var(--space-3); }
.foot .name { font-size:18px; }
.foot .st { line-height:1.75; letter-spacing:.08em; }

@media (max-width:1000px) {
  .letters-head h2 { font-size:23px; white-space:normal; }
}
@media (max-width:760px) {
  :root { --gutter:20px; --section-gap:64px; }
  .bar-in { gap:8px; padding-inline:16px; }
  .brand { gap:8px; }
  .brand span { font-size:16px; letter-spacing:.025em; }
  .bar nav { gap:12px; }
  .bar nav a { font-size:12px; letter-spacing:0; }
  .title h1 { white-space:nowrap; }
  #about > .wrap, #faq > .wrap, #letters > .wrap { display:block; }
  #about > .wrap > h2, #faq > .wrap > h2, #letters .letters-head { margin-bottom:32px; padding-top:16px; }
  #about > .wrap > .prose, #faq .faq, #letters > .wrap > .prose { border-top:0; padding-top:0; }
  .prose.lines { font-size:15px; }
  .prose.lines p + p { margin-top:32px; }
  h2 { font-size:26px; line-height:1.75; }
  .map-head { gap:16px; }
  .map-head h2 { flex:1 1 auto; font-size:26px; }
  .touch { height:44px; font-size:14px; padding-inline:14px; }
  .find { flex-basis:100%; max-width:none; height:44px; }
  .map-frame { margin-top:24px; }
  .map-key { margin-top:32px; }
  .legend { max-width:100%; grid-template-columns:72px minmax(0,1fr); gap:16px; margin-top:32px; }
  .legend dd { margin:0; padding-left:0; }
  .map-note { max-width:100%; }
  .tenets { margin-top:40px; gap:32px; }
  .tenets h3 { font-size:18px; }
  .faq { border-top:1px solid var(--line) !important; }
  .faq summary { gap:10px; padding-block:20px; }
  .faq .a { gap:10px; font-size:14px; }
  .letters-head { flex-direction:column; align-items:flex-start; gap:16px; }
  .letters-head h2 { font-size:26px; }
  .kind-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); }
  .kind-row span { min-width:0; width:100%; padding-inline:8px; }
  .field > label small { display:block; margin-top:4px; }
  .foot .st { margin-left:0; width:100%; }
}
@media (max-width:360px) {
  :root { --gutter:20px; }
  .bar nav { gap:10px; }
  .brand span { font-size:15px; }
  .map-head { gap:12px; }
  .map-head h2 { font-size:24px; }
  .touch { padding-inline:10px; }
  .touch.lure::after { padding-left:8px; }
}
@media (max-width:560px) {
  .map-over .wrap { padding-inline:14px; }
  .count { font-size:11px; gap:2px; padding:8px 4px; }
  .count b { font-size:19px; }
}