/* ============================================================
   NORTH COAST HERITAGE — design tokens
   Palette drawn from the land itself: pine, sandstone, brass,
   heather, mist. No cream/terracotta default; no near-black
   neon default; no broadsheet default.
   ============================================================ */

:root{
  --ink:        #1E2420;   /* Harvieston Ink */
  --ink-soft:   #57614F;   /* muted forest-grey, secondary text */
  --stone:      #F4EFE6;   /* Harvieston Linen, background */
  --stone-dim:  #EAE2D4;   /* deeper linen, section bands */
  --paper:      #FBF8F1;   /* card / panel surface */
  --pine:       #2C3A2C;   /* Harvieston Forest, header/footer */
  --brass:      #B5935A;   /* Harvieston Gold, tag & accent marks */
  --brass-dim:  #D3B88E;   /* lighter gold, hover/border states */
  --sandstone:  #8B7355;   /* Harvieston Warm Oak, CTA */
  --sandstone-dim:#A38F72;
  --heather:    #C8D4C0;   /* Harvieston Mist, secondary accent */
  --line:       #D6CDB8;   /* hairline rule colour, between Linen and Mist */

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', 'Courier New', monospace;

  --max: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
a.inline-link{
  color:var(--sandstone);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
a.inline-link:hover{ color:var(--brass); }
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 0.5em;
  color:var(--pine);
}
h1{ font-size:clamp(2.4rem,5vw,4.2rem); font-weight:500; letter-spacing:-0.01em; }
h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
h3{ font-size:1.35rem; }
p{ margin:0 0 1.1em; color:var(--ink-soft); max-width:62ch; }
.lede{ font-size:1.15rem; color:var(--ink); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gap); }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--sandstone);
  outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ---------------- header ---------------- */
.site-header{
  background:var(--pine);
  color:var(--stone);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(228,225,211,0.15);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:1rem; padding-bottom:1rem;
}
.brand{
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--stone);
  display:flex; flex-direction:column; gap:0.15rem;
}
.brand strong{
  font-family:var(--display);
  font-size:1.3rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  color:#fff;
}
.brand span{ color:var(--brass-dim); }

nav.primary{ display:flex; align-items:center; gap:1.6rem; }
nav.primary a{
  text-decoration:none;
  color:var(--stone);
  font-size:0.92rem;
  letter-spacing:0.02em;
  position:relative;
  padding:0.3rem 0;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{ color:var(--brass-dim); }
nav.primary a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--brass-dim);
}
.tel-pill{
  border:1px solid rgba(228,225,211,0.35);
  border-radius:999px;
  padding:0.4rem 0.9rem;
  font-family:var(--mono);
  font-size:0.82rem !important;
}
.tel-pill:hover{ border-color:var(--brass-dim); }

.nav-toggle{
  display:none;
  background:none; border:1px solid rgba(228,225,211,0.4);
  color:var(--stone); border-radius:6px;
  padding:0.4rem 0.7rem; font-size:1rem; cursor:pointer;
}

@media (max-width: 880px){
  nav.primary{
    position:absolute; top:100%; left:0; right:0;
    background:var(--pine);
    flex-direction:column; align-items:flex-start;
    padding:1rem var(--gap) 1.5rem;
    gap:0.9rem;
    display:none;
    border-bottom:1px solid rgba(228,225,211,0.15);
  }
  nav.primary.open{ display:flex; }
  .nav-toggle{ display:inline-block; }
}

/* ---------------- tag mark (property/page label) ---------------- */
.tag{
  display:inline-flex; align-items:baseline; gap:0.6rem;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--brass);
  border:1px solid var(--brass-dim);
  padding:0.35rem 0.75rem;
  border-radius:4px;
  background:rgba(181,147,90,0.08);
}
.tag b{ color:var(--sandstone); font-weight:700; }

/* ---------------- hero ---------------- */
.hero{
  background:linear-gradient(180deg, var(--pine) 0%, #24352C 100%);
  color:var(--stone);
  padding:5.5rem 0 4.5rem;
}
.hero .tag{ color:var(--brass-dim); border-color:rgba(201,165,103,0.5); background:rgba(201,165,103,0.08); }
.hero h1{ color:#fff; max-width:16ch; }
.hero p.lede{ color:#DCE3D3; max-width:52ch; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }

.page-hero{
  background:var(--pine); color:var(--stone);
  padding:3.6rem 0 3rem;
}
.page-hero h1{ color:#fff; }
.page-hero p.lede{ color:#DCE3D3; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-weight:600;
  font-size:0.95rem;
  text-decoration:none;
  padding:0.85rem 1.6rem;
  border-radius:6px;
  border:1px solid transparent;
  transition:transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(44,58,44,0.18); }
.btn-primary{ background:var(--sandstone); color:#fff; }
.btn-primary:hover{ background:var(--sandstone-dim); }
.btn-ghost{ border-color:rgba(228,225,211,0.5); color:var(--stone); }
.btn-ghost:hover{ border-color:var(--brass-dim); color:var(--brass-dim); }
.btn-dark{ background:var(--pine); color:#fff; }
.btn-dark:hover{ background:#1A241A; }

/* ---------------- sections ---------------- */
section{ padding:4.2rem 0; }
section.band{ background:var(--stone-dim); }
section.pine{ background:var(--pine); color:var(--stone); }
section.pine h2, section.pine h3{ color:#fff; }
section.pine p{ color:#DCE3D3; }
.hr{ height:1px; background:var(--line); border:0; margin:0; }

.eyebrow{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--brass); margin-bottom:0.9rem; display:block;
}
section.pine .eyebrow{ color:var(--brass-dim); }

/* ---------------- grids / cards ---------------- */
.grid{ display:grid; gap:var(--gap); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:980px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .grid-4,.grid-3,.grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:1.6rem;
  box-shadow:0 2px 10px rgba(44,58,44,0.06);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover{ box-shadow:0 10px 24px rgba(44,58,44,0.12); transform:translateY(-2px); }
.card h3{ margin-bottom:0.4rem; }

.property-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 4px 18px rgba(44,58,44,0.08);
  transition:box-shadow 0.2s ease, transform 0.2s ease;
}
.property-card:hover{ box-shadow:0 14px 30px rgba(44,58,44,0.16); transform:translateY(-3px); }
.property-card .imgslot{
  aspect-ratio:4/3;
  border-radius:0;
}
.property-card .body{ padding:1.5rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.property-card .meta{ font-family:var(--mono); font-size:0.78rem; color:var(--brass); letter-spacing:0.05em; }
.property-card .btn{ margin-top:auto; align-self:flex-start; }

/* image placeholder slots — swap background-image / <img> once photography lands */
.imgslot{
  background:
    repeating-linear-gradient(135deg, rgba(27,36,31,0.05) 0 12px, rgba(27,36,31,0.09) 12px 24px),
    var(--stone-dim);
  border:1px dashed var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
  min-height:180px;
}
.imgslot img{ border-radius:7px; }
.imgslot span{ opacity:0.75; }
.imgslot.tall{ aspect-ratio:3/4; }
.imgslot.wide{ aspect-ratio:16/9; }
.imgslot.square{ aspect-ratio:1/1; }

/* ---------------- room list ---------------- */
.room-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:1.4rem;
  align-items:center;
  padding:1.4rem 0;
  border-bottom:1px solid var(--line);
}
.room-row .imgslot{ min-height:88px; aspect-ratio:4/3; }
.room-row h3{ margin-bottom:0.25rem; font-size:1.15rem; }
.room-row .specs{ font-family:var(--mono); font-size:0.78rem; color:var(--ink-soft); }
@media (max-width:640px){
  .room-row{ grid-template-columns:1fr; }
  .room-row .imgslot{ aspect-ratio:16/9; }
}

/* ---------------- stat strip ---------------- */
.stats{ display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:1rem; }
.stat b{ display:block; font-family:var(--display); font-size:2.1rem; color:var(--pine); font-weight:600; }
section.pine .stat b{ color:#fff; }
.stat span{ font-family:var(--mono); font-size:0.75rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass); }

/* ---------------- ledger list (about/company facts) ---------------- */
.ledger{ border-top:1px solid var(--line); }
.ledger dl{ display:grid; grid-template-columns:220px 1fr; gap:0.4rem 1.5rem; margin:0; padding:1rem 0; border-bottom:1px solid var(--line); }
.ledger dt{ font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass); }
.ledger dd{ margin:0; color:var(--ink); }
@media (max-width:640px){ .ledger dl{ grid-template-columns:1fr; } }

/* ---------------- quote / pull ---------------- */
blockquote{
  font-family:var(--display); font-size:1.5rem; font-weight:500;
  color:var(--pine); border-left:3px solid var(--sandstone);
  padding-left:1.4rem; margin:1.6rem 0; max-width:46ch;
}
section.pine blockquote{ color:#fff; }

/* ---------------- forms ---------------- */
form.enquiry{ display:grid; gap:1.1rem; max-width:640px; }
.field{ display:flex; flex-direction:column; gap:0.4rem; }
.field label{ font-family:var(--mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--brass); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:1rem;
  padding:0.75rem 0.9rem;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
}
.field textarea{ resize:vertical; min-height:120px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .two-col{ grid-template-columns:1fr; } }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--pine); color:#C3CDB8; padding:3.5rem 0 2rem; margin-top:4rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
.site-footer h4{ color:#fff; font-family:var(--body); font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:1rem; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.site-footer a{ text-decoration:none; color:#C3CDB8; font-size:0.92rem; }
.site-footer a:hover{ color:var(--brass-dim); }
.footer-legal{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(228,225,211,0.15); font-size:0.8rem; color:#8B9484; display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; justify-content:space-between; }
@media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--sandstone); color:#fff; padding:0.8rem 1.2rem; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }