:root {
  --cream: #f3e9d4;
  --card: #fbf6e8;
  --ink: #2a1f16;
  --mute: #7b6b58;
  --clay: #b9472a;
  --r: 24px;
  --gap: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--cream); color: var(--ink); font-family: "Figtree", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; padding: var(--gap); }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }

/* header floats over the photograph */
.top { position: fixed; z-index: 20; inset: 24px 24px auto 24px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.top > * { pointer-events: auto; }
.disc { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--cream); text-align: center; font-family: "Young Serif", serif; font-size: 13px; line-height: 1.1; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35); transition: transform .4s cubic-bezier(.34, 1.4, .5, 1); }
.disc:hover { transform: rotate(-8deg) scale(1.05); }
.pill { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--cream); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35); }
.pill a { padding: 9px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; transition: background .2s, color .2s; }
.pill a:hover { background: var(--ink); color: var(--cream); }

.btn { display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 500; font-size: 14px; transition: background .2s, transform .2s; }
.btn:hover { background: var(--clay); transform: translateY(-1px); }
.btn--light { background: var(--cream); color: var(--ink); }
.btn--light:hover { background: #fff; }

/* hero: inset, rounded photograph */
.hero { position: relative; height: calc(100svh - var(--gap) * 2); min-height: 480px; border-radius: var(--r); overflow: hidden; background: #2a1f16; }
.hero img { position: absolute; inset: 0; transform: scale(1.05); animation: settle 2.2s cubic-bezier(.2, .7, .2, 1) forwards; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgba(20, 12, 6, .65), transparent); }
@keyframes settle { to { transform: none; } }
.hero-text { position: absolute; z-index: 2; left: clamp(22px, 3vw, 44px); bottom: clamp(22px, 3vw, 40px); color: #fbf3e2; max-width: 30em; }
.hero h1 { font-size: clamp(32px, 4vw, 56px); }
.hero-text p { margin-top: 12px; opacity: .92; max-width: 26em; }
.now { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px !important; padding: 8px 16px; border-radius: 999px; background: rgba(251, 243, 226, .16); backdrop-filter: blur(8px); font-weight: 500; font-size: 14px; opacity: 1 !important; }
.now i { width: 8px; height: 8px; border-radius: 50%; background: #c9b99f; }
.now.open i { background: #5ed17a; animation: soft 2.6s infinite; }
@keyframes soft { 70% { box-shadow: 0 0 0 8px rgba(94, 209, 122, 0); } 0% { box-shadow: 0 0 0 0 rgba(94, 209, 122, .6); } 100% { box-shadow: 0 0 0 0 rgba(94, 209, 122, 0); } }

/* product cards */
.range { padding: clamp(50px, 7vw, 90px) clamp(8px, 2vw, 28px) clamp(36px, 5vw, 60px); }
.range-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 28px; }
.range-head h2 { font-size: clamp(24px, 2.6vw, 36px); }
.range-head p { color: var(--mute); max-width: 26em; font-size: 15px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.card { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 2px 12px; padding: 10px 10px 16px; border-radius: 20px; background: var(--card); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -18px rgba(42, 31, 22, .45); }
.card img { grid-column: 1 / -1; aspect-ratio: 1; height: auto; border-radius: 14px; margin-bottom: 10px; }
.card h3 { font-size: 17px; padding-left: 6px; }
.card p { grid-column: 1; padding-left: 6px; font-size: 14px; color: var(--mute); }
.card b { grid-column: 2; grid-row: 2 / 4; align-self: center; padding-right: 6px; font-weight: 600; font-size: 15px; }

/* two big blocks */
.blocks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.block { display: grid; grid-template-rows: 300px auto; border-radius: var(--r); overflow: hidden; background: var(--card); }
.block img { transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.block:hover img { transform: scale(1.04); }
.block div { padding: 24px 26px 28px; overflow: hidden; background: var(--card); position: relative; }
.block h3 { font-size: 26px; }
.block p { margin: 10px 0 18px; color: #4d4034; max-width: 28em; }
.block .btn { height: 40px; }

/* menu */
.menu { padding: clamp(50px, 7vw, 90px) clamp(8px, 2vw, 28px); }
.menu h2 { font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 22px; }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 5vw, 80px); }
.menu li { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid rgba(42, 31, 22, .2); transition: padding .25s ease, color .25s ease; }
.menu li:hover { padding-left: 8px; color: var(--clay); }
.menu li b { font-weight: 600; }
.menu-note { margin-top: 18px; color: var(--mute); font-size: 14px; }

/* visit */
.visit { display: grid; grid-template-columns: 1.4fr auto auto; gap: 24px clamp(30px, 6vw, 90px); align-items: center; padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px); border-radius: var(--r); background: var(--clay); color: #fbf0de; }
.visit h2 { font-size: clamp(22px, 2.4vw, 34px); }
.visit p { margin-top: 6px; opacity: .8; font-size: 15px; }
.visit table { border-collapse: collapse; font-size: 15px; }
.visit td { padding: 3px 24px 3px 0; }
.visit td:last-child { font-weight: 600; }

.foot { display: flex; justify-content: space-between; gap: 16px; padding: 22px clamp(8px, 2vw, 28px) 10px; font-size: 14px; color: var(--mute); }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .blocks { grid-template-columns: 1fr; }
  .visit { grid-template-columns: 1fr; }
  .range-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .menu-cols { grid-template-columns: 1fr; }
  .pill a:first-child { display: none; }
  .top { inset: 18px 18px auto 18px; }
  .disc { width: 64px; height: 64px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero img { animation: none; transform: none; }
  .now.open i { animation: none; }
  html { scroll-behavior: auto; }
}

/* ───────── subpages ───────── */
.page { padding-top: 110px; min-height: 70vh; }
.pad { padding-left: clamp(8px, 2vw, 28px); }
.ph { padding: 10px clamp(8px, 2vw, 28px) 26px; }
.ph h1 { font-size: clamp(30px, 3.8vw, 52px); }
.ph p { margin-top: 12px; max-width: 34em; color: #4d4034; }
.ph .now { margin-top: 18px; padding: 8px 16px; background: rgba(42, 31, 22, .08); color: var(--ink); }
.ph .now i { background: #c9b99f; }
.ul { border-bottom: 1px solid currentColor; }
.top .pill a { white-space: nowrap; }
.anch { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.anch a { padding: 9px 18px; border-radius: 999px; background: var(--card); font-weight: 500; font-size: 14px; transition: background .2s, color .2s; }
.anch a:hover { background: var(--ink); color: var(--cream); }
.mn { padding: 10px clamp(8px, 2vw, 28px) 36px; scroll-margin-top: 90px; }
.mn h2 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 12px; }
.mn ul { background: var(--card); border-radius: var(--r); padding: 6px 26px; }
.mn li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(42, 31, 22, .12); }
.mn li:first-child { border-top: 0; }
.mn b { font-weight: 600; display: block; }
.mn span { color: var(--mute); font-size: 14px; }
.mn i { font-style: normal; font-weight: 600; white-space: nowrap; }
.menu-note { color: var(--mute); font-size: 14px; padding-bottom: 50px; }

.ord { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); padding: 0 clamp(8px, 2vw, 28px) 60px; align-items: start; }
.ord__list { background: var(--card); border-radius: var(--r); padding: 6px 26px; }
.ord__list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(42, 31, 22, .12); }
.ord__list li:first-child { border-top: 0; }
.ord__list b { font-weight: 600; display: block; }
.ord__list i { font-style: normal; color: var(--mute); font-size: 14px; }
.qty { display: flex; align-items: center; gap: 4px; border: 1px solid rgba(42, 31, 22, .25); border-radius: 999px; padding: 3px; }
.qty button { width: 32px; height: 32px; border-radius: 50%; font-size: 18px; transition: background .2s, color .2s; }
.qty button:hover { background: var(--ink); color: var(--cream); }
.qty output { min-width: 26px; text-align: center; font-weight: 600; }
.ord__form { background: var(--card); border-radius: var(--r); padding: 26px; display: grid; gap: 14px; position: sticky; top: 100px; }
.ord__form h2, #rf h2 { font-size: 24px; }
.ord__form label, #rf label { font-size: 14px; color: var(--mute); display: block; }
.ord__form input, .ord__form select, #rf input, #rf select { display: block; width: 100%; margin-top: 6px; padding: 11px 14px; border: 1px solid rgba(42, 31, 22, .25); border-radius: 12px; background: var(--cream); font: 400 15px "Figtree", sans-serif; color: var(--ink); }
.ord__form input:focus, .ord__form select:focus, #rf input:focus, #rf select:focus { outline: none; border-color: var(--clay); }
.ord__sum { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid rgba(42, 31, 22, .2); font-size: 15px; }
.ord__sum b { font-family: "Young Serif", serif; font-weight: 400; font-size: 26px; }
.btn { border: 0; cursor: pointer; justify-self: start; }
.ok { color: #2d7a43; font-weight: 500; font-size: 14px; }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding: 20px clamp(8px, 2vw, 28px) 50px; }
.about figure { aspect-ratio: 4 / 3.2; border-radius: var(--r); overflow: hidden; }
.about h2 { font-size: clamp(24px, 2.6vw, 36px); margin-bottom: 12px; }
.about p { color: #4d4034; max-width: 30em; margin-bottom: 10px; }
.lst { list-style: none; margin-top: 18px; }
.lst li { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid rgba(42, 31, 22, .2); }
.lst span { color: var(--mute); }
.sup { padding: 10px clamp(8px, 2vw, 28px) 60px; }
.sup h2 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: 16px; }
.sup__g { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.sup__g div { background: var(--card); border-radius: 20px; padding: 22px; color: #4d4034; font-size: 15px; }
.sup__g b { display: block; font-family: "Young Serif", serif; font-weight: 400; font-size: 20px; color: var(--ink); margin-bottom: 4px; }

.evs { padding: 0 clamp(8px, 2vw, 28px) 60px; display: grid; gap: var(--gap); }
.ev { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; background: var(--card); border-radius: var(--r); padding: 24px 28px; }
.ev__d b { font-family: "Young Serif", serif; font-weight: 400; font-size: 30px; color: var(--clay); }
.ev__t h2 { font-size: 24px; margin-bottom: 6px; }
.ev__t p { color: #4d4034; max-width: 36em; }
.ev__t span { display: block; margin-top: 8px; font-size: 14px; color: var(--mute); }
.ev__f { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 14px; border-top: 1px solid rgba(42, 31, 22, .15); }
.ev__f[hidden] { display: none; }
.ev__f input { padding: 11px 14px; border: 1px solid rgba(42, 31, 22, .25); border-radius: 999px; background: var(--cream); font: 400 15px "Figtree", sans-serif; min-width: 220px; }
.ev__f button:disabled { opacity: .5; }

.kt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 clamp(8px, 2vw, 28px) 60px; align-items: start; }
.kt > div, #rf { background: var(--card); border-radius: var(--r); padding: 28px; }
#rf { display: grid; gap: 14px; }
.dl { display: grid; grid-template-columns: 6em 1fr; gap: 10px 14px; }
.dl dt { color: var(--mute); }
.dl a:hover { color: var(--clay); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.foot a:hover { color: var(--clay); }
@media (max-width: 900px) {
  .ord, .about, .kt { grid-template-columns: 1fr; }
  .ord__form { position: static; }
  .sup__g { grid-template-columns: 1fr 1fr; }
  .ev { grid-template-columns: 1fr; gap: 10px; }
  .pill a:nth-child(n+3):not(:last-child) { display: none; }
  .pill a:first-child { display: inline-block !important; }
}