/* ============================================================
   Obscura Café, Bournemouth — shared stylesheet
   Palette: marine teal / brass / cream paper / deep ink
   Type: Fraunces (display) + Public Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --ink:        #16211F;
  --cream:      #F3ECDC;
  --cream-2:    #EAE0C9;
  --marine:     #123C42;
  --marine-2:   #0C2A2E;
  --brass:      #B8863B;
  --brass-2:    #8F6A2C;
  --seafoam:    #8FB6AC;
  --brick:      #8C3B2E;
  --line:       rgba(22,33,31,0.14);
  --max: 74rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Public Sans', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  font-weight:500;
  line-height:1.08;
  margin:0 0 0.4em;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.4rem, 5vw, 4rem); font-weight:500; }
h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
h3{ font-size:1.25rem; font-weight:600; font-family:'Public Sans',sans-serif; }
p{ margin:0 0 1em; max-width:62ch; }
.eyebrow{ display:none; } /* explicitly avoiding tracked-out eyebrow labels */

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

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--brass);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:4.6rem;
}
.brand{
  display:flex; align-items:center; gap:0.6rem;
  text-decoration:none; color:var(--ink);
}
.brand svg{ width:2.1rem; height:2.1rem; flex:none; }
.brand-word{
  font-family:'Fraunces', serif; font-size:1.28rem; font-weight:500;
  letter-spacing:-0.01em;
}
.brand-word small{ display:block; font-family:'Public Sans',sans-serif; font-size:0.62rem; font-weight:600; letter-spacing:.09em; color:var(--marine); }

nav.primary{ display:flex; gap:1.7rem; }
nav.primary a{
  text-decoration:none; font-size:0.92rem; font-weight:600; color:var(--marine-2);
  padding:0.3rem 0; border-bottom:2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
  border-bottom-color:var(--brass);
}
.nav-toggle{ display:none; }

@media (max-width: 780px){
  nav.primary{
    position:absolute; top:4.6rem; left:0; right:0;
    background:var(--cream); border-bottom:1px solid var(--line);
    flex-direction:column; gap:0; padding:0.5rem 1.75rem 1.2rem;
    display:none;
  }
  nav.primary.open{ display:flex; }
  nav.primary a{ padding:0.65rem 0; border-bottom:1px solid var(--line); }
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:2.4rem; height:2.4rem; border:1px solid var(--line); background:none;
    border-radius:2px; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:''; display:block; width:1.1rem; height:2px; background:var(--ink); position:relative;
  }
  .nav-toggle span::before{ position:absolute; top:-6px; }
  .nav-toggle span::after{ position:absolute; top:6px; }
}

/* ---------- Buttons / chips ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.7rem 1.25rem; border-radius:2px;
  font-weight:600; font-size:0.94rem; text-decoration:none;
  border:1px solid var(--ink); color:var(--ink);
}
.btn.solid{ background:var(--marine); border-color:var(--marine); color:var(--cream); }
.btn.solid:hover{ background:var(--marine-2); }
.btn.ghost:hover{ background:rgba(22,33,31,0.06); }

.chip{
  display:inline-flex; align-items:center; gap:0.5rem;
  border:1px solid var(--line); background:var(--cream-2);
  padding:0.4rem 0.85rem; border-radius:999px; font-size:0.85rem; font-weight:600;
}
.chip .dot{ width:0.5rem; height:0.5rem; border-radius:50%; background:var(--brass); }

/* ---------- Aperture ring divider (recurring motif) ---------- */
.ring-divider{
  display:flex; align-items:center; gap:1rem; margin:3.5rem 0 2.5rem; color:var(--brass-2);
}
.ring-divider::before, .ring-divider::after{
  content:''; flex:1; height:1px; background:var(--line);
}
.ring-divider svg{ width:1.6rem; height:1.6rem; flex:none; }

/* ---------- Hero ---------- */
.hero{ padding:3.2rem 0 2.4rem; }
.hero .wrap{
  display:grid; grid-template-columns: 1.15fr 0.85fr; gap:3rem; align-items:center;
}
.hero-art{ justify-self:center; }
.hero-art svg{ width:100%; max-width:340px; height:auto; }
.hero h1{ margin-bottom:0.5rem; }
.hero .lede{ font-size:1.12rem; max-width:42ch; color:#2B3735; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:1.4rem 0 1.6rem; }
.hero-ctas{ display:flex; gap:0.8rem; flex-wrap:wrap; }

@media (max-width: 820px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-art{ order:-1; }
  .hero-art svg{ max-width:220px; }
}

/* ---------- Facts strip ---------- */
.facts-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--cream-2);
}
.facts-strip .wrap{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.fact{ padding:1.6rem 1.4rem; border-right:1px solid var(--line); }
.fact:last-child{ border-right:none; }
.fact .num{ font-family:'Fraunces',serif; font-size:1.7rem; display:block; color:var(--marine); }
.fact .label{ font-size:0.86rem; color:#4A5654; }
@media (max-width: 780px){
  .facts-strip .wrap{ grid-template-columns:1fr 1fr; }
  .fact{ border-bottom:1px solid var(--line); }
}

/* ---------- Generic section / two-col ---------- */
section.block{ padding:3.2rem 0; }
.two-col{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:3rem; align-items:start; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }

.card{
  border:1px solid var(--line); background:#fff; padding:1.6rem 1.6rem;
}
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:820px){ .card-grid{ grid-template-columns:1fr; } }

/* ---------- Tables (hours, menu) ---------- */
table.plain{ width:100%; border-collapse:collapse; }
table.plain th, table.plain td{
  text-align:left; padding:0.7rem 0.5rem; border-bottom:1px solid var(--line);
}
table.plain th{ font-size:0.85rem; color:#4A5654; font-weight:600; }

/* ---------- Menu list ---------- */
.menu-group{ margin-bottom:2.6rem; }
.menu-group h3{ display:flex; align-items:baseline; gap:0.6rem; margin-bottom:1rem; color:var(--marine-2); }
.menu-item{
  display:flex; justify-content:space-between; gap:1rem;
  padding:0.6rem 0; border-bottom:1px dashed var(--line);
}
.menu-item .desc{ font-size:0.88rem; color:#4A5654; margin-top:0.15rem; }
.menu-item .name{ font-weight:600; }

.note-box{
  border-left:3px solid var(--brass); background:var(--cream-2);
  padding:1rem 1.2rem; font-size:0.94rem; color:#3C4744;
}

/* ---------- Timeline (history) ---------- */
.timeline{ position:relative; margin-left:0.6rem; padding-left:1.6rem; border-left:2px solid var(--line); }
.tl-item{ position:relative; padding-bottom:2.1rem; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:''; position:absolute; left:-1.85rem; top:0.35rem;
  width:0.65rem; height:0.65rem; border-radius:50%; background:var(--brass);
  box-shadow:0 0 0 4px var(--cream);
}
.tl-item .yr{ font-family:'Fraunces',serif; color:var(--marine); font-size:1.15rem; }

/* ---------- Review cards ---------- */
.review-card{
  border:1px solid var(--line); background:#fff; padding:1.5rem;
  display:flex; flex-direction:column; gap:0.8rem;
}
.review-card a.btn{ align-self:flex-start; }
.stars{ color:var(--brass); font-size:1.1rem; letter-spacing:0.1em; }

/* ---------- Company info ---------- */
dl.info{ display:grid; grid-template-columns:12rem 1fr; gap:0.7rem 1rem; margin:0; }
dl.info dt{ font-weight:600; color:var(--marine-2); }
dl.info dd{ margin:0; }

/* ---------- Map page ---------- */
.map-embed{ border:1px solid var(--line); width:100%; height:420px; }
.directions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.6rem; }
@media (max-width:820px){ .directions-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer.site{
  border-top:1px solid var(--line); background:var(--marine); color:var(--cream);
  padding:2.6rem 0 2rem; margin-top:3rem;
}
footer.site a{ color:var(--cream); text-decoration:none; }
footer.site a:hover{ text-decoration:underline; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer-grid h4{ font-family:'Public Sans',sans-serif; font-weight:700; font-size:0.85rem; letter-spacing:0.02em; color:var(--seafoam); margin-bottom:0.7rem; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.45rem; font-size:0.92rem; }
.footer-bottom{ margin-top:2.2rem; padding-top:1.3rem; border-top:1px solid rgba(243,236,220,0.18); font-size:0.82rem; color:var(--seafoam); }
@media (max-width:780px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Page header (non-home pages) ---------- */
.page-head{ padding:2.6rem 0 1rem; border-bottom:1px solid var(--line); }
.page-head p.lede{ max-width:56ch; color:#3C4744; }