:root {
  color-scheme: light;
  --paper: #f4f1df;
  --paper-light: #fbf8e9;
  --ink: #354b39;
  --ink-soft: #6d775f;
  --line: #8b9277;
  --accent: #9a7049;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--paper); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 10%, rgb(231 232 199 / 50%), transparent 40%),
    radial-gradient(ellipse at 90% 90%, rgb(217 229 194 / 38%), transparent 36%),
    repeating-linear-gradient(112deg, rgb(132 142 109 / 2%) 0 1px, transparent 1px 8px),
    var(--paper);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
}
button { font: inherit; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.seasonal-module {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: clamp(22px, 4vw, 52px) clamp(18px, 5vw, 72px) 18px;
  overflow: hidden;
}
.seasonal-module::before {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgb(89 105 75 / 48%);
  content: "";
  pointer-events: none;
}
.module-header, .state-heading, .section-heading, .module-footer { position: relative; z-index: 1; }
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgb(89 105 75 / 28%);
}
.eyebrow { margin: 0 0 8px; color: var(--ink-soft); font-size: 12px; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(24px, 3vw, 38px); font-weight: 500; letter-spacing: .08em; }
.english-title { margin: 6px 0 0; color: var(--ink-soft); font-family: Georgia, serif; font-size: 12px; letter-spacing: .17em; }
.season-switch { display: flex; gap: 8px; flex: 0 0 auto; }
.season-switch button {
  min-height: 42px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: rgb(251 248 233 / 60%);
  cursor: pointer;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.season-switch button[aria-pressed="true"] { border-color: var(--ink); color: var(--paper-light); background: var(--ink); }
.season-switch button:hover { border-color: var(--ink); }

.season-view { display: grid; grid-template-rows: auto minmax(230px, 1fr) auto minmax(150px, .68fr) auto; gap: 12px; width: min(100%, 1480px); margin: 18px auto 12px; flex: 1; }
.state-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.state-heading h2 { margin: 0; font-size: clamp(17px, 2vw, 23px); font-weight: 500; letter-spacing: .09em; }
.auto-note { color: var(--ink-soft); font-size: 12px; }
.field-plan { position: relative; min-height: 250px; overflow: hidden; border: 1px solid rgb(82 100 73 / 50%); background: rgb(252 249 233 / 75%); box-shadow: 0 4px 18px rgb(64 71 51 / 7%); }
.plan-layer { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(12px, 2vw, 28px); padding: clamp(12px, 2vw, 26px); opacity: 0; clip-path: inset(0 0 0 100%); pointer-events: none; }
.plan-layer.is-current { z-index: 1; opacity: 1; clip-path: inset(0); pointer-events: auto; transition: opacity 950ms ease, clip-path 1200ms cubic-bezier(.4, 0, .2, 1); }
.plan-layer.is-leaving { z-index: 2; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 900ms ease, clip-path 1100ms cubic-bezier(.4, 0, .2, 1); }
.plan-layer figure { position: relative; min-width: 0; min-height: 0; margin: 0; overflow: hidden; }
.field-photo { background: #d9ddc3; }
.field-photo img { display: block; width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
.field-photo figcaption, .parcel-map figcaption { position: absolute; right: 0; bottom: 0; left: 0; width: fit-content; padding: 6px 11px; color: var(--ink); background: rgb(248 245 223 / 90%); font-size: 12px; }
.parcel-map { display: grid; place-items: center; border: 1px solid rgb(110 120 91 / 35%); background: rgb(244 241 223 / 70%); }
.parcel-map img { display: block; width: 100%; height: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.section-heading { display: flex; align-items: center; gap: 14px; color: var(--ink-soft); font-size: 12px; letter-spacing: .16em; }
.section-rule { height: 1px; flex: 1; background: rgb(89 105 75 / 30%); }
.cross-section { position: relative; display: grid; min-height: 150px; overflow: hidden; place-items: center; }
.section-layer { grid-area: 1 / 1; display: block; width: min(100%, 1180px); max-height: 250px; object-fit: contain; opacity: 0; clip-path: inset(0 0 0 100%); }
.section-layer.is-current { z-index: 1; opacity: 1; clip-path: inset(0); transition: opacity 950ms ease, clip-path 1200ms cubic-bezier(.4, 0, .2, 1); }
.section-layer.is-leaving { z-index: 2; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity 900ms ease, clip-path 1100ms cubic-bezier(.4, 0, .2, 1); }
.season-caption { width: min(100%, 980px); min-height: 2.2em; margin: 0 auto; color: var(--ink-soft); text-align: center; font-size: clamp(13px, 1.45vw, 16px); line-height: 1.8; transition: opacity 300ms ease; }
.season-caption.is-changing { opacity: .2; }
.module-footer { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid rgb(89 105 75 / 25%); color: var(--ink-soft); font-size: 11px; letter-spacing: .1em; }
.footer-ornament { font-size: 18px; }

@media (max-width: 700px) {
  .seasonal-module { min-height: 100svh; padding: 26px 18px 14px; }
  .seasonal-module::before { inset: 8px; }
  .module-header { align-items: start; flex-direction: column; gap: 18px; padding-bottom: 14px; }
  .season-switch { width: 100%; }
  .season-switch button { flex: 1; }
  .season-view { grid-template-rows: auto minmax(310px, 42vh) auto minmax(170px, 24vh) auto; gap: 10px; margin: 16px auto 10px; }
  .state-heading { align-items: start; flex-direction: column; gap: 2px; }
  .field-plan { min-height: 310px; }
  .plan-layer { grid-template-columns: 1fr; grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; padding: 9px; }
  .field-photo img { min-height: 0; }
  .cross-section { min-height: 170px; }
  .section-layer { max-height: 24vh; }
  .season-caption { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; }
}