/* 1. Design tokens */
:root {
  --color-page: #f4f2ed; --color-surface: #fff; --color-surface-alt: #eeece6;
  --color-text: #252824; --color-muted: #697068; --color-border: #d5d4ce;
  --color-accent: #566557; --color-accent-soft: #e7ebe5; --color-warm: #756a59;
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --space-1: .4rem; --space-2: .75rem; --space-3: 1.1rem; --space-4: 1.75rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 5rem;
  --max-width: 1100px; --nav-height: 3.25rem; --radius: 3px;
}

/* 2. Base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 1.5rem); }
body { margin: 0; background: var(--color-page); color: var(--color-text); font-family: var(--font-sans); font-size: 16px; line-height: 1.75; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.container { width: min(calc(100% - 3rem), var(--max-width)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .6rem 1rem; background: var(--color-text); color: #fff; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid #395c86; outline-offset: 3px; }

/* 3. Header and navigation */
.page-header { padding: var(--space-6) 0 var(--space-5); border-top: 5px solid var(--color-accent); background: var(--color-surface); }
.header-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); column-gap: var(--space-6); }
.document-label { grid-column: 1 / -1; margin: 0 0 var(--space-4); color: var(--color-muted); font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
h1 { grid-column: 1 / -1; margin: 0; font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.25; }
.subtitle { grid-column: 1 / -1; margin: .65rem 0 0; color: var(--color-warm); font-size: .85rem; letter-spacing: .08em; }
.intro { grid-column: 1 / -1; max-width: 45rem; margin: var(--space-3) 0 0; color: #4d534d; font-size: .95rem; }
.mobile-break { display: none; }
.section-nav { position: sticky; z-index: 20; top: 0; height: var(--nav-height); background: rgba(244, 242, 237, .97); border-block: 1px solid var(--color-border); }
.nav-scroll { display: flex; height: 100%; overflow-x: auto; scrollbar-width: thin; white-space: nowrap; }
.section-nav a { display: flex; align-items: center; padding: 0 .95rem; border-right: 1px solid var(--color-border); color: #4d534d; font-size: .8rem; font-weight: 600; text-decoration: none; }
.section-nav a:first-child { border-left: 1px solid var(--color-border); }
.section-nav a:hover, .section-nav a:focus-visible { background: var(--color-surface); color: var(--color-text); }

/* 4. Sections and typography */
.primary-section { padding: var(--space-7) 0; border-bottom: 1px solid var(--color-border); }
.section-heading { margin-bottom: var(--space-5); }
.section-heading h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.section-heading div > p { margin: .15rem 0 0; color: var(--color-muted); font-size: .75rem; letter-spacing: .1em; }
.subsection { margin-top: var(--space-6); }
.subsection > h3 { margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-text); font-size: 1.15rem; }
h4 { margin: 0; font-size: 1rem; }
.notice { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-accent); background: var(--color-accent-soft); color: #414941; font-size: .88rem; }
.notice.warning { border-left-color: var(--color-warm); background: #eeebe5; }
.value-pending { color: var(--color-muted); }

/* 5. Facts and tables */
.facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; border-top: 1px solid var(--color-border); }
.facts-grid > div { display: grid; grid-template-columns: 9.5rem 1fr; min-width: 0; border-bottom: 1px solid var(--color-border); }
.facts-grid > div:nth-child(odd) { border-right: 1px solid var(--color-border); }
dt, dd { margin: 0; }
.facts-grid dt { padding: .9rem 1rem; background: var(--color-surface-alt); color: var(--color-muted); font-size: .78rem; font-weight: 600; }
.facts-grid dd { padding: .85rem 1rem; background: var(--color-surface); font-size: .92rem; }
.compact-list { margin: var(--space-4) 0 0; border-top: 1px solid var(--color-border); }
.compact-list > div { display: grid; grid-template-columns: 15rem 1fr; border-bottom: 1px solid var(--color-border); }
.compact-list dt, .compact-list dd { padding: .8rem 1rem; }
.compact-list dt { color: var(--color-muted); font-size: .82rem; font-weight: 600; }
.compact-list dd { background: var(--color-surface); }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--color-border); background: var(--color-surface); }
table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .78rem 1rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
thead th { background: var(--color-surface-alt); color: var(--color-muted); font-size: .75rem; letter-spacing: .04em; white-space: nowrap; }
tbody th { width: 33%; font-weight: 600; }
tbody tr:last-child > * { border-bottom: 0; }

/* 6. Media placeholders */
.media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 22rem; padding: var(--space-5); border: 1px dashed #a8aaa5; background: #e9e8e3; text-align: center; }
.media-placeholder strong { font-size: 1rem; font-weight: 600; }
.media-placeholder small { max-width: 40rem; margin-top: .4rem; color: var(--color-muted); }
.placeholder-kicker { margin-bottom: .6rem; color: var(--color-accent); font-size: .7rem; font-weight: 700; letter-spacing: .15em; }
.map-embed iframe { display: block; width: 100%; height: 28rem; border: 0; }
.map-embed p { margin: .5rem 0 0; text-align: right; font-size: .85rem; }
.video-placeholder { min-height: 19rem; }
.play-mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border: 1px solid #8a8f89; border-radius: 50%; color: var(--color-accent); text-indent: .15rem; }
figure { margin: 0; }
figcaption { margin-top: .7rem; color: var(--color-muted); font-size: .82rem; }

/* 7. Land and photo content */
.plot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.plot-grid article { padding: var(--space-5); background: var(--color-surface); }
.plot-number { margin: 0 0 1rem; color: var(--color-accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.plot-grid h3 { margin: 0; font-size: 1.1rem; }
.plot-area { margin: 1rem 0 0; font-size: 1.65rem; font-weight: 500; }
.plot-note { max-width: 32rem; margin: .8rem 0 0; color: var(--color-muted); font-size: .88rem; }
.site-plan-image { width: 100%; height: auto; border: 1px solid var(--color-border); background: var(--color-surface); }
.site-plan-figure figcaption { line-height: 1.8; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.photo-grid a { display: block; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--color-border); object-fit: cover; }
.photo-grid figcaption { color: var(--color-text); }

/* 8. Status and requirements */
.status-legend { display: flex; gap: .5rem; margin: 0 0 var(--space-3); }
.status { display: inline-block; padding: .18rem .55rem; border: 1px solid; border-radius: 99px; font-size: .7rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.confirmed { border-color: #78887b; background: #e5ece5; color: #405444; }
.checking { border-color: #9c8c6c; background: #f2ede2; color: #665839; }
.unresearched { border-color: #999; background: #ededeb; color: #656762; }
.status-table { min-width: 850px; }
.status-table th:first-child { width: 17%; }
.status-table td:nth-child(2) { width: 12%; }
.lettered > h3 { display: flex; align-items: center; gap: .7rem; }
.lettered > h3 span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: .8rem; }
.plain-list { columns: 2; column-gap: var(--space-5); margin: 0; padding-left: 1.25rem; }
li { margin-bottom: .45rem; }
.requirement-block { padding: var(--space-4); border: 1px solid var(--color-border); background: var(--color-surface); }
.requirement-block h4 { margin-bottom: var(--space-3); color: #404840; }
.requirement-block ul { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
.editable-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.editable-grid > div { border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.editable-grid dt { padding: .5rem .7rem; background: var(--color-surface-alt); color: var(--color-muted); font-size: .72rem; }
.editable-grid dd { padding: .65rem .7rem; }
.requirement-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-3); }

/* 9. Resources and footer */
.page-footer { padding: var(--space-5) 0; background: #30332f; color: #d9dcd7; font-size: .78rem; }
.page-footer .container { display: flex; justify-content: space-between; gap: var(--space-4); }
.page-footer p { margin: 0; }

/* 10. Responsive adjustments */
@media (max-width: 850px) {
  .header-inner { grid-template-columns: 1fr; }.intro { margin-top: var(--space-4); max-width: 45rem; }
  .facts-grid { grid-template-columns: 1fr; }.facts-grid > div:nth-child(odd) { border-right: 0; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }.editable-grid { grid-template-columns: repeat(2, 1fr); }
  .page-footer .container { display: grid; gap: .35rem; }
}
@media (max-width: 600px) {
  :root { --space-6: 3rem; --space-7: 3.75rem; }
  .container { width: min(calc(100% - 2rem), var(--max-width)); }
  .page-header { padding-top: var(--space-5); }.mobile-break { display: block; }
  .section-nav a { padding-inline: .8rem; }
  .facts-grid > div, .compact-list > div { grid-template-columns: 1fr; }
  .facts-grid dt, .compact-list dt { padding-bottom: .25rem; }.facts-grid dd, .compact-list dd { padding-top: .25rem; }
  .plot-grid, .requirement-grid { grid-template-columns: 1fr; }
  .photo-grid { gap: .8rem; }.plain-list { columns: 1; }.media-placeholder { min-height: 17rem; padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .section-nav, .skip-link { display: none; } body { background: #fff; font-size: 11pt; }
  .primary-section { break-before: page; padding: 2rem 0; }.page-header { border-top: 0; }.table-wrap { overflow: visible; }
}