/* ==========================================================================
   THAVER & CO — Design tokens v2
   Ink / cream / burnt terracotta / deep sea teal. Big serif display, grain.
   ========================================================================== */

:root{
  --ink:         #131110;
  --ink-soft:    #2B2622;
  --cream:       #F7F1E4;
  --paper:       #EDE3CD;
  --paper-dark:  #DECBA7;
  --rust:        #A7462B;
  --rust-light:  #C97648;
  --teal:        #1F4645;
  --teal-light:  #3D6E6C;
  --white:       #FFFFFF;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;

  --max-width: 1280px;
  --nav-height: 74px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }

/* Links: explicit everywhere. iOS/Safari auto-styles tel: and mailto: anchors
   its own way regardless of inherited color unless given a real rule, so
   every link in this file gets an explicit color, never just "inherit". */
a{ color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
}
p{ line-height: 1.7; margin: 0 0 1em; color: var(--ink-soft); }
.container{ max-width: var(--max-width); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px){ .container{ padding: 0 20px; } }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 14px;
  display: inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background: var(--rust); }

/* Subtle film-grain texture, used over dark + accent sections */
.grain{ position:relative; isolation:isolate; }
.grain::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.5;
  mix-blend-mode: overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.grain > *{ position:relative; z-index:1; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding: 16px 30px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:pointer;
  border: 1px solid transparent;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.btn-primary{ background: var(--rust); color: var(--cream); }
.btn-primary:hover{ background: var(--rust-light); transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(167,70,43,0.55); }
.btn-outline{ background: transparent; border-color: rgba(247,241,228,0.4); color: var(--cream); }
.btn-outline:hover{ background: rgba(247,241,228,0.1); border-color: var(--cream); }
.btn-outline.dark{ border-color: var(--ink); color: var(--ink); }
.btn-outline.dark:hover{ background: var(--ink); color: var(--cream); }
.btn-arrow{ transition: transform .3s ease; }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ---------------- Marquee ticker ---------------- */
.marquee{
  background: var(--rust);
  color: var(--cream);
  overflow:hidden;
  white-space:nowrap;
  padding: 10px 0;
}
.marquee-track{
  display:inline-block;
  animation: scroll-left 26s linear infinite;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.marquee-track span{ margin: 0 28px; }
@keyframes scroll-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------------- Nav ---------------- */
.site-nav{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 500;
  height: var(--nav-height);
  display:flex;
  align-items:center;
  background: rgba(19,17,16,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(247,241,228,0.12);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ flex-shrink:0; margin-right: 40px; }
.nav-links{ margin-left:auto; }
.brand{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 23px;
  color: var(--cream);
  letter-spacing: 0.01em;
  display:flex; align-items:baseline; gap:8px;
}
.brand .amp{ color: var(--rust-light); font-style: normal; }
.nav-links{ display:flex; gap: 38px; list-style:none; margin:0; padding:0; }
.nav-links a{
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); position:relative; padding-bottom: 6px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--rust-light); transition: width .3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--cream); }
.nav-toggle{ display:none; }

@media (max-width: 780px){
  .nav-links{
    position: fixed; top: var(--nav-height); left:0; right:0;
    background: var(--ink); flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    border-bottom: 1px solid rgba(247,241,228,0.12);
  }
  .nav-links.open{ max-height: 320px; }
  .nav-links li{ border-top: 1px solid rgba(247,241,228,0.08); }
  .nav-links a{ display:block; padding: 17px 32px; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px; }
  .nav-toggle span{ width:22px; height:1.5px; background: var(--cream); }
}

/* ---------------- Page header (interior pages) ---------------- */
.page-header{
  background: var(--ink);
  color: var(--cream);
  padding: calc(var(--nav-height) + 96px) 0 88px;
  position: relative;
  overflow:hidden;
}
.page-header h1{
  color: var(--cream);
  font-size: clamp(42px, 6vw, 68px);
  max-width: 760px;
  line-height: 1.02;
}
.page-header p.lede{ color: var(--paper); max-width: 520px; font-size: 18px; margin-top:18px; }
.page-header .index-no{
  position:absolute; right:32px; top:calc(var(--nav-height) + 30px);
  font-family: var(--font-mono); font-size: 12px; color: rgba(247,241,228,0.4);
  letter-spacing: 0.1em;
}

/* ---------------- Sections ---------------- */
.section{ padding: 108px 0; }
.section-tight{ padding: 72px 0; }
.section-paper{ background: var(--paper); }
.section-ink{ background: var(--ink); color: var(--cream); }
.section-ink p{ color: var(--paper); }
.section-ink h2, .section-ink h3{ color: var(--cream); }
.section-teal{ background: var(--teal); color: var(--cream); }
.section-teal p{ color: rgba(247,241,228,0.85); }
.section-teal h2, .section-teal h3{ color: var(--cream); }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items:center; }
@media (max-width: 860px){ .grid-2{ grid-template-columns: 1fr; gap: 44px; } }

.divider{ width: 60px; height: 2px; background: var(--rust); margin: 22px 0 30px; }

/* ---------------- Big display statement ---------------- */
.statement{
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 920px;
}
.statement em{ font-style: italic; color: var(--rust); }

/* ---------------- Placeholder imagery (swap for real photos) ---------------- */
.ph-panel{
  position:relative;
  aspect-ratio: 4/3;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding: 22px;
  background:
    linear-gradient(155deg, var(--teal) 0%, #16302F 45%, var(--rust) 145%);
}
.ph-panel::before{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 30px);
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.ph-panel:hover::before{ transform: scale(1.15) rotate(2deg); }
.ph-panel .ph-label{
  position:relative; z-index:2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cream);
  background: rgba(19,17,16,0.55); padding: 8px 12px;
}
.ph-panel.square{ aspect-ratio: 1/1; }
.ph-panel.tall{ aspect-ratio: 3/4; }
.ph-panel.rust{ background: linear-gradient(155deg, var(--rust) 0%, #7C331E 100%); }

/* ---------------- Cards ---------------- */
.listing-card{
  background: var(--cream);
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.listing-card:hover{ transform: translateY(-6px); }
.listing-card .body{ padding: 20px 4px 6px; }
.listing-card h4{ font-size:20px; margin-bottom:4px; }
.listing-card .meta{ font-family: var(--font-mono); font-size:12px; color: var(--ink-soft); }
.listing-card .price{ font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--rust); margin-top:8px; }

.tag{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); background: var(--teal); padding: 5px 10px; display:inline-block;
}

/* ---------------- Footer / Contact ---------------- */
.site-footer{ background: var(--ink); color: var(--paper); padding: 0; }
.footer-cta{
  padding: 96px 0 72px;
  border-bottom: 1px solid rgba(247,241,228,0.12);
}
.footer-cta .eyebrow{ color: var(--rust-light); }
.footer-cta .eyebrow::before{ background: var(--rust-light); }
.footer-cta a.big-link{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(34px, 6vw, 68px);
  color: var(--cream);
  display:inline-flex; align-items:center; gap:20px;
  border-bottom: 1px solid rgba(247,241,228,0.25);
  padding-bottom: 14px;
  transition: gap .3s ease, color .3s ease, border-color .3s ease;
}
.footer-cta a.big-link:hover{ color: var(--rust-light); gap:32px; border-color: var(--rust-light); }
.footer-cta a.big-link .arrow{ font-family: var(--font-body); font-style:normal; }

.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px;
  padding: 56px 0 40px;
}
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{
  color: var(--rust-light); font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-grid p{ font-size: 14px; color: var(--paper); margin-bottom: 8px; }
.footer-grid a{
  font-size: 14px; color: var(--paper) !important; margin-bottom: 8px; display:block;
  transition: color .2s ease;
}
.footer-grid a:hover{ color: var(--rust-light) !important; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 22px 0 32px; font-size: 12px; color: rgba(247,241,228,0.45);
  flex-wrap: wrap; gap: 12px;
  border-top: 1px solid rgba(247,241,228,0.08);
}
.map-embed{ width:100%; height: 260px; border:0; filter: grayscale(0.4) sepia(0.2) contrast(1.05); margin-top: 16px; }

/* ---------------- Utility / reveal ---------------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-delay-1.in{ transition-delay: .1s; }
.reveal-delay-2.in{ transition-delay: .2s; }
.reveal-delay-3.in{ transition-delay: .3s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}