/* ==========================================================================
   Example website: "Hearth & Bean Café" (fictional) — warm, editorial café look
   ========================================================================== */
:root{
  --cf-bg:#fbf6ef; --cf-surface:#ffffff; --cf-ink:#2b211b; --cf-muted:#7a6a5d;
  --cf-brand:#8a4f2a; --cf-brand-2:#c9864f; --cf-line:#eadfcf; --cf-sage:#5f7d6b;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--cf-bg); color:var(--cf-ink); font:400 1rem/1.7 'Prompt', system-ui, sans-serif; }
h1, h2, h3{ margin:0; line-height:1.15; }
h1, h2{ font-family:'Fraunces','Prompt', serif; font-weight:600; letter-spacing:-.01em; }
a{ color:inherit; }
img, svg{ display:block; max-width:100%; }

.cf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px; padding:0 1.3rem; border-radius:999px; border:1px solid var(--cf-brand);
  background:var(--cf-brand); color:#fff; font:500 .95rem 'Prompt', sans-serif; text-decoration:none; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.cf-btn:hover{ background:#6f3d1e; transform:translateY(-1px); }
.cf-btn--ghost{ background:transparent; color:var(--cf-brand); }
.cf-btn--ghost:hover{ background:rgba(138,79,42,.08); }
.cf-btn--small{ min-height:40px; padding:0 1rem; font-size:.88rem; }
.cf-kicker{ margin:0 0 .6rem; font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--cf-brand-2); }

/* nav */
.cf-nav{
  position:sticky; top:48px; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  max-width:1180px; margin:0 auto; padding:.9rem 20px;
  background:rgba(251,246,239,.9); backdrop-filter:blur(10px);
}
.cf-logo{ display:inline-flex; align-items:center; gap:.6rem; font:600 1.15rem 'Fraunces', serif; text-decoration:none; }
.cf-logo__mark{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--cf-brand); color:#fff; font-size:.8rem; letter-spacing:.02em; }
.cf-nav__links{ display:flex; gap:1.4rem; margin-left:auto; font-size:.95rem; }
.cf-nav__links a{ text-decoration:none; color:var(--cf-muted); }
.cf-nav__links a:hover{ color:var(--cf-ink); }
@media (max-width:760px){ .cf-nav__links{ display:none; } .cf-nav .cf-btn{ margin-left:auto; } .cf-nav{ top:48px; } }

/* hero */
.cf-hero{ display:grid; gap:2.5rem; align-items:center; max-width:1180px; margin:0 auto; padding:clamp(2rem, 6vw, 5rem) 20px clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width:900px){ .cf-hero{ grid-template-columns:1.05fr 1fr; } }
.cf-hero h1{ font-size:clamp(2.6rem, 7vw, 4.6rem); }
.cf-hero h1 em{ font-style:italic; color:var(--cf-brand); }
.cf-lead{ margin:1.2rem 0 0; max-width:32rem; font-size:1.05rem; color:var(--cf-muted); }
.cf-hero__cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.8rem; }
.cf-hero__facts{ display:flex; flex-wrap:wrap; gap:1.6rem; margin:2rem 0 0; padding:1.2rem 0 0; list-style:none; border-top:1px solid var(--cf-line); }
.cf-hero__facts strong{ display:block; font-size:1rem; }
.cf-hero__facts span{ font-size:.85rem; color:var(--cf-muted); }
.cf-hero__art{ position:relative; aspect-ratio:1 / .9; }
.cf-art{ border-radius:24px; overflow:hidden; }
.cf-art svg{ width:100%; height:100%; }
.cf-art--big{ position:absolute; inset:0 18% 12% 0; box-shadow:0 30px 60px -30px rgba(70,40,20,.45); }
.cf-art--sm1{ position:absolute; right:0; bottom:0; width:42%; aspect-ratio:1; box-shadow:0 24px 50px -24px rgba(70,40,20,.45); border:6px solid var(--cf-bg); }
.cf-art--sm2{ position:absolute; right:4%; top:6%; width:30%; aspect-ratio:1; box-shadow:0 20px 40px -20px rgba(70,40,20,.4); border:6px solid var(--cf-bg); }

/* highlights */
.cf-highlights{ display:grid; gap:1rem; max-width:1180px; margin:0 auto; padding:0 20px; }
@media (min-width:760px){ .cf-highlights{ grid-template-columns:repeat(3, 1fr); } }
.cf-highlights > div{ padding:1.4rem; border-radius:20px; background:var(--cf-surface); border:1px solid var(--cf-line); }
.cf-highlights i{ font-size:1.3rem; color:var(--cf-brand); }
.cf-highlights h2{ margin-top:.7rem; font-family:'Prompt', sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:0; }
.cf-highlights p{ margin:.3rem 0 0; font-size:.9rem; color:var(--cf-muted); }

/* sections */
.cf-section{ max-width:1180px; margin:0 auto; padding:clamp(3.5rem, 8vw, 6rem) 20px 0; }
.cf-section__head{ text-align:center; }
.cf-section h2{ font-size:clamp(2rem, 5vw, 3rem); }
.cf-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:1.6rem 0 2rem; }
.cf-tabs button{ min-height:42px; padding:0 1.1rem; border-radius:999px; border:1px solid var(--cf-line); background:var(--cf-surface); color:var(--cf-muted); font:500 .9rem 'Prompt', sans-serif; cursor:pointer; }
.cf-tabs button.is-active{ background:var(--cf-ink); border-color:var(--cf-ink); color:#fff; }
.cf-menu{ display:grid; gap:1.2rem; }
@media (min-width:600px){ .cf-menu{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:980px){ .cf-menu{ grid-template-columns:repeat(3, 1fr); } }
.cf-item{ overflow:hidden; border-radius:22px; background:var(--cf-surface); border:1px solid var(--cf-line); transition:transform .3s ease, box-shadow .3s ease; }
.cf-item:hover{ transform:translateY(-3px); box-shadow:0 24px 40px -28px rgba(70,40,20,.4); }
.cf-item .cf-art{ border-radius:0; aspect-ratio:4 / 3; }
.cf-item .cf-art svg{ height:100%; width:100%; object-fit:cover; }
.cf-item__body{ padding:1rem 1.2rem 1.2rem; }
.cf-item__row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.cf-item h3{ font-size:1.1rem; font-weight:600; }
.cf-item__price{ font:600 1.15rem 'Fraunces', serif; color:var(--cf-brand); white-space:nowrap; }
.cf-item__en{ margin:.1rem 0 .6rem; font-size:.85rem; color:var(--cf-muted); }
.cf-item__tag{ display:inline-block; padding:.15rem .6rem; border-radius:999px; background:#f3ebe0; font-size:.78rem; color:var(--cf-brand); }
.cf-note{ margin:1.2rem 0 0; text-align:center; font-size:.8rem; color:var(--cf-muted); }

/* about */
.cf-about{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){ .cf-about{ grid-template-columns:1fr 1fr; } }
.cf-about__art{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cf-about__art .cf-art{ aspect-ratio:3 / 4; }
.cf-about__art .cf-art:last-child{ margin-top:3rem; }
.cf-about__art .cf-art svg{ height:100%; width:100%; }
.cf-about__copy p{ color:var(--cf-muted); }

/* visit */
.cf-visit{ display:grid; gap:2rem; align-items:stretch; padding-bottom:clamp(3.5rem, 8vw, 6rem); }
@media (min-width:900px){ .cf-visit{ grid-template-columns:1fr 1fr; } }
.cf-hours{ width:100%; margin-top:1.4rem; border-collapse:collapse; }
.cf-hours th, .cf-hours td{ padding:.8rem 0; border-bottom:1px solid var(--cf-line); text-align:left; font-weight:400; }
.cf-hours td{ text-align:right; font-weight:600; }
.cf-address{ margin:1.2rem 0 0; color:var(--cf-muted); }
.cf-address i{ color:var(--cf-brand); margin-right:.3rem; }
.cf-visit__actions{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.cf-map{ position:relative; min-height:320px; border-radius:24px; overflow:hidden; background:#e8e3d6; border:1px solid var(--cf-line); }
.cf-map__road{ position:absolute; background:#fff; }
.cf-map__road--h{ left:0; right:0; top:55%; height:22px; }
.cf-map__road--v{ top:0; bottom:0; left:38%; width:18px; }
.cf-map__road--d{ left:-10%; width:130%; top:20%; height:12px; transform:rotate(-14deg); }
.cf-map__park{ position:absolute; right:8%; bottom:8%; width:30%; height:28%; border-radius:20px; background:#c9d8b8; }
.cf-map__pin{ position:absolute; left:38%; top:55%; transform:translate(-30%, -110%); display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:999px; background:var(--cf-brand); color:#fff; font-size:.85rem; box-shadow:0 12px 24px -10px rgba(70,40,20,.6); white-space:nowrap; }

/* footer */
.cf-footer{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2.5rem 20px 3rem; background:#2b211b; color:#e9dccd; text-align:center; }
.cf-footer .cf-logo__mark{ background:#c9864f; }
.cf-footer__social{ display:flex; gap:.6rem; }
.cf-footer__social button{ width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:transparent; color:#e9dccd; cursor:pointer; font-size:1rem; }
.cf-footer__social button:hover{ background:rgba(255,255,255,.08); }
.cf-footer p{ margin:0; font-size:.82rem; color:#b9a796; }
.cf-footer a{ color:#fff; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .cf-item, .cf-btn{ transition:none; } }

@media (max-width:599px){ .cf-item .cf-art{ aspect-ratio:16 / 10; } }