/* ══════════════════════════════════════════
   DESIGN TOKENS — NEUTRALS + AMBER
   ══════════════════════════════════════════ */
:root {
  --ink:        #111210;
  --ink-80:     rgba(17,18,16,0.80);
  --ink-70:     rgba(17,18,16,0.70);
  --ink-60:     rgba(17,18,16,0.60);
  --ink-40:     rgba(17,18,16,0.40);
  --ink-20:     rgba(17,18,16,0.20);
  --ink-10:     rgba(17,18,16,0.10);
  --ink-06:     rgba(17,18,16,0.06);

  --surface-0:  #FAFAF8;
  --surface-1:  #F3F3F0;
  --surface-2:  #EAEAE6;
  --surface-3:  #DDDDD8;

  --accent:        #B8892A;
  --accent-light:  #D4A84B;
  --accent-dim:    rgba(184,137,42,0.10);
  --accent-border: rgba(184,137,42,0.28);

  --nav-glass:  rgba(250,250,248,0.88);
  --nav-bdr:    rgba(17,18,16,0.08);
  --nav-blur:   blur(20px) saturate(180%);

  --cta-bg: #111210;
  --cta-fg: #FAFAF8;

  --sans:  'Outfit', -apple-system, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;

  --sp-xs:  8px;
  --sp-s:   16px;
  --sp-m:   24px;
  --sp-l:   40px;
  --sp-xl:  44px;
  --sp-2xl: 56px;

  --r-s:    6px;
  --r-m:    12px;
  --r-l:    20px;
  --r-pill: 999px;

  --max-w:  1120px;
  --pad:    48px;
  --nav-h:  64px;
}

/* ══════════════════════════════════════════ RESET */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body { font-family: var(--sans); background: var(--surface-0); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { border:none; cursor:pointer; font-family:var(--sans); background:none; }

/* ══════════════════════════════════════════ UTILITIES */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }
.sec-eye { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-s); }
.sec-eye-label { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.sec-eye-rule { flex: 1; height: 1px; background: var(--ink-10); }
.sec-heading { font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 1.75rem); font-weight: 400; color: var(--ink); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--sp-m); }
.sec-heading em { font-style: italic; color: var(--ink-60); }
.body-text { font-size: 15px; font-weight: 400; line-height: 1.8; color: var(--ink-70); }
.divider { height: 1px; background: var(--ink-10); }

/* ══════════════════════════════════════════ ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.65s ease both; }
.fade-up-1 { animation-delay: 0.08s; }
.fade-up-2 { animation-delay: 0.16s; }
.fade-up-3 { animation-delay: 0.24s; }
.fade-up-4 { animation-delay: 0.32s; }
.fade-up-5 { animation-delay: 0.40s; }
.fade-up-6 { animation-delay: 0.48s; }

/* ══════════════════════════════════════════ NAV */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 400; height: var(--nav-h); background: var(--nav-glass); backdrop-filter: var(--nav-blur); -webkit-backdrop-filter: var(--nav-blur); border-bottom: 1px solid var(--nav-bdr); }
.nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.nav-logo { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-link { font-size: 13px; font-weight: 400; color: var(--ink-60); padding: 7px 13px; border-radius: var(--r-s); transition: color 0.2s, background 0.2s; }
.nav-link:hover { color: var(--ink); background: var(--ink-06); }
.nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.btn-nav-ghost { font-size: 13px; font-weight: 500; color: var(--ink-60); padding: 7px 18px; border: 1px solid var(--ink-20); border-radius: var(--r-pill); transition: all 0.2s; }
.btn-nav-ghost:hover { color:var(--ink); border-color:var(--ink-40); }
.btn-nav-solid { font-size: 13px; font-weight: 600; color: var(--cta-fg); padding: 7px 18px; border-radius: var(--r-pill); background: var(--cta-bg); transition: opacity 0.2s; }
.btn-nav-solid:hover { opacity:0.82; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: var(--r-s);
  cursor: pointer;
  background: none;
  border: none;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  background: var(--surface-0);
  border-bottom: 1px solid var(--ink-10);
  z-index: 399;
  padding: var(--sp-s) var(--pad) var(--sp-m);
  flex-direction: column;
  gap: 0;
  box-shadow: 0 8px 24px rgba(17,18,16,0.10);
}
.nav-drawer.is-open { display: flex; }
.nav-drawer .nav-link {
  font-size: 15px;
  padding: 14px 0;
  border-radius: 0;
  color: var(--ink-70);
  border-bottom: 1px solid var(--ink-06);
}
.nav-drawer .nav-link:last-of-type { border-bottom: none; margin-bottom: var(--sp-s); }
.nav-drawer-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 0;
  padding-top: var(--sp-s);
  border-top: 1px solid var(--ink-10);
}
.nav-drawer-actions .btn-nav-ghost,
.nav-drawer-actions .btn-nav-solid {
  flex: 1;
  text-align: center;
  padding: 13px 18px;
  font-size: 14px;
}

/* ══════════════════════════════════════════ BREADCRUMB */
.breadcrumb { padding-top: calc(var(--nav-h) + 28px); padding-bottom: var(--sp-m); padding-left: var(--pad); padding-right: var(--pad); }
.bc-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bc-row a, .bc-row span { font-size: 12px; font-weight: 400; color: var(--ink-40); transition: color 0.15s; }
.bc-row a:hover { color: var(--ink); }
.bc-row .sep { color: var(--ink-20); }
.bc-row .current { color: var(--ink-70); }

/* ══════════════════════════════════════════ FOOTER */
footer { background: var(--ink); padding: var(--sp-2xl) var(--pad) var(--sp-l); }
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px; padding-bottom: var(--sp-2xl); border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: var(--sp-l); }
.footer-logo { font-family: var(--serif); font-size: 1.2rem; color: #fff; margin-bottom: var(--sp-s); }
.footer-tagline { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.30); line-height: 1.75; max-width: 220px; }
.footer-col-head { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); opacity: 0.70; margin-bottom: var(--sp-m); }
.footer-col li { margin-bottom: 11px; }
.footer-col a { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.38); transition: color 0.2s; }
.footer-col a:hover { color: rgba(255,255,255,0.82); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-m); }
.footer-copy { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.18); }
.footer-social { display: flex; gap: 10px; }
.social-pill { font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.30); padding: 5px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-pill); transition: all 0.2s; }
.social-pill:hover { border-color: var(--accent-border); color: var(--accent-light); }

/* ══════════════════════════════════════════ CTA STRIP */
.cta-strip { background: var(--ink); padding: var(--sp-2xl) var(--pad); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-l); }
.cta-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.cta-heading { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 400; color: #fff; line-height: 1.2; letter-spacing: -0.02em; max-width: 500px; }
.cta-sub { font-size: 15px; font-weight: 400; color: rgba(255,255,255,0.45); max-width: 440px; line-height: 1.7; }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-cta-primary { padding: 14px 36px; border-radius: var(--r-pill); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; transition: opacity 0.2s; }
.btn-cta-primary:hover { opacity: 0.88; }
.btn-cta-ghost { padding: 14px 36px; border-radius: var(--r-pill); background: transparent; color: rgba(255,255,255,0.65); border: 1px solid rgba(255,255,255,0.18); font-size: 14px; font-weight: 500; transition: border-color 0.2s, color 0.2s; }
.btn-cta-ghost:hover { border-color: var(--accent-border); color: var(--accent-light); }

/* ══════════════════════════════════════════ NEARBY */
.nearby-wrap { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-2xl) var(--pad); }
.nearby-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-l); gap: var(--sp-m); }
.nearby-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nearby-card { border-radius: var(--r-m); overflow: hidden; cursor: pointer; transition: box-shadow 0.2s; background: var(--surface-0); box-shadow: 0 0 0 1px var(--ink-10); }
.nearby-card:hover { box-shadow: 0 0 0 1px var(--ink-20), 0 6px 24px rgba(17,18,16,0.07); }
.nearby-thumb { height: 160px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.nearby-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.nearby-card:hover .nearby-thumb img { transform: scale(1.04); }
.nearby-thumb-placeholder { font-family: var(--serif); font-size: 1.1rem; color: var(--ink-20); text-align: center; padding: var(--sp-m); }
.nearby-body { padding: var(--sp-m); }
.nearby-name { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.nearby-meta { font-size: 12px; font-weight: 400; color: var(--ink-40); margin-bottom: var(--sp-xs); }
.nearby-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-60); background: var(--surface-2); border-radius: var(--r-pill); padding: 3px 10px; }
.section-link { font-size: 13px; font-weight: 500; color: var(--ink-60); border-bottom: 1px solid var(--ink-20); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; white-space: nowrap; }
.section-link:hover { color: var(--accent); border-color: var(--accent-border); }

/* ══════════════════════════════════════════
   RESPONSIVE — SHARED
   ══════════════════════════════════════════ */

/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {
  :root { --pad: 32px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-l); }
  .nearby-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PHABLET (≤768px) ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .btn-nav-ghost { display: none; }
  .btn-nav-solid { font-size: 12px; padding: 6px 14px; }
  .nav-hamburger { display: flex; }
  .nav-inner { gap: 16px; }
  .bc-row { gap: 5px; }
}

/* ── MOBILE (≤600px) ── */
@media (max-width: 600px) {
  :root { --pad: 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-l); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-s); }
  .cta-strip { padding: var(--sp-xl) var(--pad); }
  .cta-btns { flex-direction: column; width: 100%; }
  .btn-cta-primary,
  .btn-cta-ghost { width: 100%; text-align: center; }
  .nearby-grid { grid-template-columns: 1fr; }
}

/* ── VERY SMALL (≤380px) ── */
@media (max-width: 380px) {
  :root { --pad: 16px; }
  .footer-top { grid-template-columns: 1fr; }
}