/* ============================================================
   THE GROUNDS — CUR8TORIAL
   A survey plate: the estate drawn on vintage paper.
   The buildings are her watercolor drawings, laid out like a
   naturalist's estate map. Time lives in drawn things — a clock
   that keeps real time, seasonal marginalia.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Jost:wght@300;400;500&display=swap');

:root {
  --paper-hi:#F0E8D2; --paper:#EAE2CC; --paper-lo:#D9CCA8; --paper-edge:#C9BA92;
  --ink:#2A2017; --sepia:#5C4F38; --sepia-soft:#7A6A48; --rule:#8A7A54;
  --mustard:#BE9529; --glow:#E8B84B;
  --font-engrave:'Cinzel', Georgia, serif;
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { min-height:100%; }
body {
  font-family:var(--font-body); font-weight:300; color:var(--sepia);
  background:
    radial-gradient(ellipse at 50% 34%, var(--paper-hi) 0%, var(--paper) 55%, var(--paper-lo) 88%, var(--paper-edge) 100%);
  background-attachment:fixed;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(ellipse 300px 200px at 18% 22%, rgba(138,122,84,.05), transparent),
    radial-gradient(ellipse 360px 240px at 82% 70%, rgba(138,122,84,.06), transparent),
    radial-gradient(ellipse 200px 160px at 70% 15%, rgba(138,122,84,.04), transparent),
    repeating-linear-gradient(93deg, transparent 0 3px, rgba(120,100,70,.012) 3px 4px);
}

/* ── the plate's ruled frame ───────────────────────── */
.plate-frame { position:fixed; inset:14px; z-index:0; pointer-events:none; border:1.5px solid var(--rule); }
.plate-frame::after { content:""; position:absolute; inset:5px; border:.6px solid var(--rule); opacity:.8; }

/* ── layout ────────────────────────────────────────── */
.scene {
  position:relative; z-index:1; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; padding:30px 30px 26px;
}
.scene-inner {
  flex:1; width:100%; max-width:1000px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:8px 0 2px;
}
.plate-head { text-align:center; margin-bottom:2px; }
.plate-head .eyebrow {
  font-family:var(--font-engrave); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--mustard);
}
.plate-head h1 {
  font-family:var(--font-display); font-weight:500; font-size:clamp(26px,4.2vw,40px);
  color:var(--ink); margin-top:4px; letter-spacing:.02em; line-height:1;
}
.plate-head .plate-sub {
  font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--sepia-soft); margin-top:5px;
}

/* ── the grounds map ───────────────────────────────── */
.grounds {
  position:relative; width:100%; max-width:920px;
  aspect-ratio:1000 / 600; margin:6px auto 0;
}
.paths { position:absolute; inset:0; width:100%; height:100%; z-index:0; }

/* each building sits on the paper at its map coordinate */
.bldg {
  position:absolute; left:var(--l); top:var(--t); width:var(--w);
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; z-index:1;
}
.bldg img {
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 4px 12px rgba(92,79,56,.22));
  transition:transform .3s ease, filter .3s ease;
}
.bldg-label {
  font-family:var(--font-display); font-style:italic; font-size:clamp(12px,1.5vw,16px);
  color:var(--sepia); text-align:center; line-height:1.15;
  background:rgba(240,232,210,.7); padding:1px 8px; border-radius:2px;
  transition:color .25s ease;
}
.bldg-label em { font-style:normal; font-size:.82em; color:var(--sepia-soft); letter-spacing:.02em; }

/* interactive buildings lift + warm on hover */
a.bldg { cursor:pointer; }
a.bldg:hover img, a.bldg:focus-visible img {
  transform:translateY(-5px) scale(1.02);
  filter:drop-shadow(0 10px 20px rgba(92,79,56,.32)) drop-shadow(0 0 14px rgba(232,184,75,.35));
}
a.bldg:hover .bldg-label, a.bldg:focus-visible .bldg-label { color:var(--mustard); }
a.bldg:focus-visible { outline:none; }
a.bldg:focus-visible img { outline:2px solid var(--mustard); outline-offset:4px; border-radius:3px; }

/* the house breathes a warm glow, inviting entry */
.bldg-house img { animation:housewarm 5s ease-in-out infinite; }
@keyframes housewarm {
  0%,100% { filter:drop-shadow(0 4px 12px rgba(92,79,56,.22)) drop-shadow(0 0 0 rgba(232,184,75,0)); }
  50%     { filter:drop-shadow(0 4px 12px rgba(92,79,56,.22)) drop-shadow(0 0 16px rgba(232,184,75,.30)); }
}
.bldg-house:hover img { animation:none; }

/* the shop (honesty box) — present but not yet a doorway */
.bldg-shop { cursor:default; }
.bldg-shop img { opacity:.94; }

/* ── welcome, in the margin ────────────────────────── */
.welcome {
  margin-top:10px; font-family:var(--font-display); font-style:italic;
  font-size:clamp(18px,2.8vw,24px); color:var(--sepia); text-align:center;
}

/* ── estate legend ─────────────────────────────────── */
.estate-nav { margin-top:12px; text-align:center; }
.estate-nav ul { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; }
.estate-nav a {
  font-family:var(--font-display); font-size:clamp(15px,2.2vw,18px); color:var(--ink);
  text-decoration:none; border-bottom:1px solid rgba(138,122,84,.45); padding-bottom:1px;
  transition:color .25s ease, border-color .25s ease;
}
.estate-nav a:hover, .estate-nav a:focus-visible { color:var(--mustard); border-bottom-color:var(--mustard); outline:none; }

/* ── marginalia: clock + season ────────────────────── */
.margin-clock { position:fixed; top:32px; right:38px; z-index:2; width:62px; text-align:center; }
.margin-clock svg { width:54px; height:54px; }
.margin-clock .mc-label {
  display:block; margin-top:2px; font-family:var(--font-display); font-style:italic;
  font-size:11.5px; color:var(--sepia-soft);
}
.margin-season { position:fixed; bottom:34px; left:40px; z-index:2; width:72px; text-align:center; }
.margin-season svg { width:44px; height:52px; overflow:visible; }
.margin-season .ms-label {
  display:block; margin-top:3px; font-family:var(--font-display); font-style:italic;
  font-size:11.5px; color:var(--sepia-soft);
}
.is-summer-night .ff-glow { filter:drop-shadow(0 0 6px var(--glow)); }
.is-summer-night .ff-glow ellipse { fill:var(--glow); animation:ffpulse 3.2s ease-in-out infinite; }
@keyframes ffpulse { 0%,100%{opacity:.45} 50%{opacity:1} }

/* ── cartouche footer ──────────────────────────────── */
.cartouche {
  position:relative; z-index:1; margin:8px auto 4px;
  border:1px solid var(--rule); background:var(--paper-hi);
  padding:6px 22px 7px; text-align:center; box-shadow:0 2px 8px rgba(92,79,56,.12);
}
.cartouche .c-title {
  font-family:var(--font-engrave); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink);
}
.cartouche .c-sub {
  font-family:var(--font-display); font-style:italic; font-size:12px; color:var(--sepia-soft); margin-top:1px;
}

/* debug */
body.debug .bldg { outline:1px dashed #ff3b6b; }

/* ── responsive: stack the grounds into a column ───── */
@media (max-width:720px) {
  .scene { padding:26px 18px 22px; }
  .grounds {
    aspect-ratio:auto; max-width:340px;
    display:flex; flex-direction:column; align-items:center; gap:26px; margin-top:14px;
  }
  .paths { display:none; }
  .bldg {
    position:static; transform:none; width:auto !important; max-width:74%;
  }
  .bldg-house { max-width:92%; order:1; }
  .bldg-studio { order:2; }
  .bldg-shop { order:3; }
  .bldg-hive { order:4; }
  .bldg-garden { order:5; max-width:82%; }
  .bldg-house img { animation:none; }
  .estate-nav ul { flex-direction:column; gap:9px; }
  .margin-clock { top:22px; right:18px; width:48px; }
  .margin-clock svg { width:42px; height:42px; }
  .margin-season { bottom:22px; left:16px; }
  .plate-frame { inset:9px; }
}

@media (prefers-reduced-motion: reduce) {
  .bldg-house img { animation:none; }
  .bldg img { transition:none; }
  .is-summer-night .ff-glow ellipse { animation:none; opacity:.9; }
}