/* ============================================================
   VILLAGE CORE  ·  shared design system for the Colossus family
   ============================================================ */

:root{
  /* neutrals — shared family base */
  --bg:        #F4EEE3;
  --bg-2:      #EBE2D2;
  --card:      #FCFAF4;
  --ink:       #28211A;
  --ink-soft:  #5C5347;
  --ink-mute:  #8C8273;
  --hair:      rgba(40,33,26,0.10);
  --hair-2:    rgba(40,33,26,0.06);

  /* brand accent — RoostVillage amber default */
  --accent:      #C8842E;
  --accent-soft: #E0A95A;
  --accent-deep: #A8641C;
  --support:     #5F7A4E;
  --amber:       var(--accent);

  /* elevation + shape */
  --shadow-sm: 0 1px 2px rgba(40,33,26,.05), 0 2px 8px rgba(40,33,26,.04);
  --shadow-md: 0 1px 2px rgba(40,33,26,.05), 0 14px 36px rgba(40,33,26,.10);
  --shadow-lg: 0 2px 6px rgba(40,33,26,.06), 0 34px 80px rgba(40,33,26,.16);
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --maxw: 1500px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; max-width:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
.serif{ font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.mono{ font-family:"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--accent); color:#fff; }

/* ───────── Title bar ───────── */
.topbar{
  position:sticky; top:0; z-index:40;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--hair);
  padding-top:env(safe-area-inset-top, 0px);
}
.topbar-inner{ max-width:var(--maxw); margin:0 auto;
  padding:12px max(28px, env(safe-area-inset-right)) 12px max(28px, env(safe-area-inset-left));
  display:flex; align-items:center; gap:22px; }

/* SVG-embedded brand lockup — never reflows */
.brand-svg{ display:inline-flex; align-items:center; }
.brand-svg svg{ height:68px; width:auto; display:block; }
.brand-svg .wm-svg{ font-family:"Geist", system-ui, sans-serif; font-weight:700; font-size:40px; letter-spacing:-0.8px; fill:var(--ink); }
.brand-svg .v-svg{ font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-weight:400; fill:var(--accent); }
.brand-svg .tag-svg{ font-family:"Geist", system-ui, sans-serif; font-weight:600; font-size:13px; letter-spacing:1.3px; fill:var(--ink-mute); }

.topsearch{
  flex:1; max-width:440px; display:flex; align-items:center; gap:10px;
  height:44px; padding:0 16px; background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-pill); color:var(--ink); font-size:14px; box-shadow:var(--shadow-sm);
}
.topsearch input{ flex:1; border:0; background:transparent; outline:0; font:inherit; color:var(--ink); }
.topsearch input::placeholder{ color:var(--ink-mute); }
.topsearch .mono{ font-size:12px; color:var(--ink-mute); }
.topnav{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.topnav a{ padding:8px 14px; border-radius:var(--r-pill); font-size:14px; color:var(--ink-soft); font-weight:500; }
.topnav a:hover{ background:rgba(40,33,26,.05); color:var(--ink); }
.topnav .btn-save{
  display:inline-flex; align-items:center; gap:7px; background:var(--ink); color:var(--bg);
  padding:9px 16px; border:0; border-radius:var(--r-pill); font-size:14px; font-weight:500;
}
.topnav .btn-save:hover{ background:var(--accent-deep); }
.nav-soon{ padding:8px 14px; font-size:14px; color:var(--ink-mute); cursor:default; opacity:.55; }
.hamburger{ display:none; background:none; border:0; font-size:24px; cursor:pointer; padding:8px 12px; color:var(--ink); margin-left:auto; }

/* ───────── Panel ───────── */
.panel{
  background:var(--card); border:1px solid var(--hair);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm);
}
.panel h2{
  font-family:"Geist Mono", monospace; font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--support); margin:0 0 16px;
  display:flex; align-items:center; gap:9px;
}
.panel h2::before{ content:''; width:16px; height:1px; background:var(--support); opacity:.5; }

/* ───────── Tables ───────── */
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--hair-2); font-size:14px; vertical-align:top; }
tr:last-child th, tr:last-child td{ border-bottom:0; }
th{ color:var(--ink-mute); font-weight:500; font-size:13px; padding-right:14px; }
td{ color:var(--ink); font-weight:500; }
.empty{ color:var(--ink-mute); font-style:italic; font-weight:400; font-size:13.5px; }
thead th{ font-family:"Geist Mono", monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; }
.tag-sage{ color:var(--support); font-weight:600; }
.linkish{ color:var(--accent-deep); font-weight:600; }
.linkish:hover{ text-decoration:underline; }

/* ───────── Property detail page ───────── */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:30px 32px 60px; }
.crumb{ font-size:13px; color:var(--ink-mute); margin-bottom:12px; display:flex; gap:7px; flex-wrap:wrap; }
.crumb a:hover{ color:var(--accent); }
.crumb .sep{ color:var(--hair); }
.head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.head h1{ font-size:clamp(34px,4.4vw,56px); font-weight:600; letter-spacing:-0.03em; line-height:1; margin:0; }
.head .sub{ color:var(--ink-soft); font-size:16px; margin-top:12px; }
.head .sub .mono{ font-size:13px; color:var(--ink-mute); }
.head-flags{ display:flex; gap:8px; flex-wrap:wrap; }
.flag{ display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:500; border:1px solid var(--hair); background:var(--card); }
.flag .dot{ width:7px; height:7px; border-radius:50%; }
.flag.occ .dot{ background:var(--support); }
.flag.val .dot{ background:var(--accent); }

/* Bento grid */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.col-hero{ grid-column:span 8; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.col-snap{ grid-column:span 4; }
.col-2{ grid-column:span 8; }
.col-1{ grid-column:span 4; }
.col-third{ grid-column:span 4; }

/* Hero street view */
.hero-frame{ position:relative; aspect-ratio:16/10; background:var(--bg-2); }
.hero-frame iframe{ width:100%; height:100%; border:0; display:block; }
.hero-tag{ position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 13px;
  border-radius:var(--r-pill); background:color-mix(in oklab, var(--ink) 78%, transparent); color:#fff; font-size:12px; font-weight:500;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.hero-tag .pulse{ width:7px; height:7px; border-radius:50%; background:#5BD08A; box-shadow:0 0 0 0 rgba(91,208,138,.6); animation:pulse 2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(91,208,138,0); } 100%{ box-shadow:0 0 0 0 rgba(91,208,138,0); } }
.hero-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; border-top:1px solid var(--hair-2); background:var(--card); }
.hero-foot .cap{ font-size:13px; color:var(--ink-soft); }
.hero-foot .cap b{ color:var(--ink); font-weight:600; }
.cap-hint{ font-family:"Geist Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }

/* Time machine */
.tm-strip{ padding:15px 20px 18px; border-top:1px solid var(--hair-2); background:var(--card); }
.tm-strip-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; }
.tm-strip-head .t{ font-size:13.5px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
.tm-strip-head .t .serif{ color:var(--accent-deep); }
.tm-strip-head .s{ font-family:"Geist Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); }
.tm-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.yr{ position:relative; border:1px solid var(--hair); border-radius:12px; overflow:hidden; cursor:pointer;
  background:var(--card); text-align:left; color:inherit; display:flex; flex-direction:column;
  transition:transform .18s, border-color .18s, box-shadow .18s; text-decoration:none; }
.yr:hover{ transform:translateY(-3px); border-color:var(--accent-soft); box-shadow:var(--shadow-sm); }
.yr.active{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.yr-sky{ height:48px; position:relative; overflow:hidden; }
.yr-sky .sun{ position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; width:22px; height:22px; }
.yr-sky .ground{ position:absolute; left:0; right:0; bottom:0; height:32%; }
.card-thumb{ position:absolute; top:0; left:0; width:100%; height:48px; object-fit:cover; display:none; }
.card-thumb[src]{ display:block; }
.yr-meta{ padding:7px 9px 8px; }
.yr-off{ font-size:11.5px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); line-height:1.15; }
.yr-date{ font-family:"Geist Mono", monospace; font-size:9.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px; }
.yr.active .yr-date{ color:var(--accent-deep); }

/* Snapshot */
.snap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat{ background:var(--bg); border:1px solid var(--hair-2); border-radius:var(--r); padding:14px 15px; }
.stat .label{ font-family:"Geist Mono", monospace; font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); }
.stat .value{ font-size:24px; font-weight:600; letter-spacing:-0.02em; margin-top:5px; line-height:1.05; }
.stat .value .serif{ color:var(--accent); }
.stat .sub{ font-size:11.5px; color:var(--ink-mute); margin-top:4px; line-height:1.35; }
.stat.wide{ grid-column:span 2; }
.snap-cta{ margin-top:14px; display:flex; gap:8px; }
.snap-cta button{ flex:1; height:42px; border-radius:var(--r-pill); border:1px solid var(--hair); background:transparent; color:var(--ink);
  font-size:14px; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.snap-cta button.primary{ background:var(--accent); color:#fff; border-color:transparent; }
.snap-cta button.primary:hover{ background:var(--accent-deep); }
.snap-cta button:not(.primary):hover{ background:rgba(40,33,26,.04); }

/* Media frames */
.media-frame{ border-radius:var(--r); overflow:hidden; border:1px solid var(--hair-2); aspect-ratio:4/3; background:var(--bg-2); }
.media-frame iframe, .media-frame img{ width:100%; height:100%; border:0; display:block; object-fit:cover; }
.media-cap{ font-size:12px; color:var(--ink-mute); margin-top:10px; display:flex; justify-content:space-between; gap:10px; }

.tag-amber{ display:inline-block; padding:3px 9px; border-radius:999px; background:rgba(200,132,46,.13); color:var(--accent-deep); font-size:12px; font-weight:600; }

/* ───────── Index grid (homepage) ───────── */
.idx-wrap{ max-width:1600px; margin:0 auto; padding:32px 32px 80px; }
.idx-hero{ margin-bottom:36px; }
.idx-hero h1{ font-size:clamp(36px,5vw,72px); font-weight:600; letter-spacing:-0.03em; line-height:1; }
.idx-hero h1 .serif{ font-family:"Instrument Serif",serif; font-style:italic; color:var(--accent); font-weight:400; }
.idx-hero p{ font-size:18px; color:var(--ink-soft); margin-top:14px; max-width:680px; }
.idx-count{ font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin:20px 0 14px; }
.idx-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.idx-card{ background:var(--card); border:1px solid var(--hair-2); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:transform .2s,box-shadow .2s,border-color .2s; display:block; }
.idx-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent-soft); }
.idx-card .ph{ aspect-ratio:3/2; background:linear-gradient(180deg,#96C4E0 0%,#E2E0C8 100%); position:relative; overflow:hidden; }
.idx-card .ph .sun{ position:absolute; left:50%; top:30%; transform:translateX(-50%); width:38px; height:38px; background:#FFE096; border-radius:50%; box-shadow:0 0 22px #FFE096; }
.idx-card .ph .ground{ position:absolute; left:0; right:0; bottom:0; height:32%; background:#7A8A5E; }
.idx-card .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.idx-card .body{ padding:16px 18px; }
.idx-card .price{ font-size:21px; font-weight:600; letter-spacing:-0.02em; display:flex; align-items:baseline; gap:8px; }
.idx-card .tag{ font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); font-weight:500; font-family:"Geist Mono",monospace; }
.idx-card .facts{ font-size:13px; color:var(--ink-soft); margin-top:6px; }
.idx-card .addr{ font-size:14px; font-weight:500; margin-top:10px; }
.idx-card .hood{ font-size:12px; color:var(--ink-mute); margin-top:2px; }
.idx-card .lead{ font-size:12px; font-family:"Geist Mono",monospace; color:var(--accent-deep); margin-top:10px; padding-top:10px; border-top:1px solid var(--hair-2); }

/* ───────── Footer ───────── */
.footer{
  max-width:var(--maxw); margin:0 auto; padding:30px 28px 40px; border-top:1px solid var(--hair);
  font-size:13px; color:var(--ink-mute); line-height:1.7;
}
.footer .row1{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.footer .row1 .sun{ width:30px; height:24px; }
.footer a{ color:var(--support); }

/* ───────── Responsive ───────── */
@media (max-width:1100px){ .col-hero,.col-snap,.col-2,.col-1,.col-third{ grid-column:span 12; } }
@media (max-width:920px){
  .topsearch{ display:none; }
  .topnav a, .topnav .nav-soon{ display:none; }
  .hamburger{ display:inline-flex !important; align-items:center; justify-content:center; }
  .topnav.open{ display:flex !important; position:absolute; top:80px; right:0; left:0; background:var(--card); border-top:1px solid var(--hair); padding:16px 24px; flex-direction:column; align-items:flex-start; gap:14px; z-index:90; }
  .topnav.open a, .topnav.open .nav-soon, .topnav.open .btn-save{ display:inline-flex; padding:8px 0; }
}
@media (max-width:700px){
  .topbar-inner{ padding:10px max(16px, env(safe-area-inset-left)); gap:12px; }
  .wrap{ padding:22px 16px 48px; } .bento{ gap:14px; }
  .head h1{ font-size:clamp(28px,8vw,40px); } .snap-grid{ grid-template-columns:1fr 1fr; }
  .panel{ padding:20px; }
  .tm-grid{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100px; overflow-x:auto; scrollbar-width:none; gap:7px; }
  .tm-grid::-webkit-scrollbar{ display:none; } .tm-strip{ padding:14px 16px 16px; }
  .footer{ padding:28px 16px max(34px, env(safe-area-inset-bottom)); }
  .idx-wrap{ padding:24px 16px 60px; }
}