:root {
  --rasp: #B4233C; --rasp-d: #8F1A2F; --honey: #E2A93B; --paper: #FFF7EA;
  --cocoa: #2E1B14; --grey: #6F6A66; --ink: #2E1B14;
  --serif: "Gloock", Georgia, serif; --sans: "Figtree", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; }

.nav {
  position: fixed; z-index: 10; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 20px;
  background: rgba(255,247,234,.92); backdrop-filter: blur(10px); border-radius: 999px;
  box-shadow: 0 6px 24px rgba(46,27,20,.12); white-space: nowrap;
}
.mark { font: 21px/1 var(--serif); color: var(--grey); text-decoration: none; }
.mark b { font-weight: 400; color: var(--rasp); }
.nav a.link { text-decoration: none; font-weight: 500; font-size: 15px; }
.nav .cta { background: var(--rasp); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9AA39A; }
.badge[data-open="true"]::before { background: #5DBB63; box-shadow: 0 0 0 4px rgba(93,187,99,.2); }

/* Hero: sticky scroll story */
.hero { position: relative; height: 260vh; background: var(--rasp); color: var(--paper); }
.hero .pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; padding: 0 5vw; }
.hero canvas { position: absolute; right: -4vw; top: 0; width: 64vw; height: 100%; }
.copy { position: relative; z-index: 1; max-width: 620px; }
.copy .step { transition: opacity .5s, transform .5s; }
.copy .step:not(.on) { opacity: 0; transform: translateY(16px); pointer-events: none; }
.copy .later { position: absolute; left: 0; top: 50%; translate: 0 -50%; }
h1 { font: clamp(64px, 9.4vw, 152px)/.88 var(--serif); margin: 0 0 28px; letter-spacing: -.02em; }
.hero p.sub { font-size: 19px; max-width: 34ch; margin: 0 0 32px; color: #FBE3E5; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: transform .15s, background .15s; }
.btn.honey { background: var(--honey); color: var(--cocoa); }
.btn.line { box-shadow: inset 0 0 0 1.5px rgba(255,247,234,.6); color: var(--paper); }
@media (hover: hover) { .btn:hover { transform: translateY(-2px); } }
.later h2 { font: clamp(44px, 5.4vw, 84px)/.95 var(--serif); margin: 0 0 16px; }
.later p { font-size: 19px; max-width: 30ch; color: #FBE3E5; margin: 0; }
.strip { position: absolute; left: 5vw; right: 5vw; bottom: 26px; display: flex; gap: 36px; font-size: 14px; color: #F6C9CF; z-index: 1; }
.progress { position: absolute; left: 5vw; bottom: 64px; width: 120px; height: 2px; background: rgba(255,247,234,.25); z-index: 1; }
.progress i { display: block; height: 100%; width: 0; background: var(--honey); }

section.block { padding: 120px 5vw; }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 56px; }
.head h2 { font: clamp(44px, 5.6vw, 88px)/.95 var(--serif); margin: 0; letter-spacing: -.015em; }
.head p { margin: 0; max-width: 42ch; color: #6B564C; }

.case { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.case ul { list-style: none; margin: 0; padding: 0; }
.case h3 { font: 28px var(--serif); margin: 0 0 8px; color: var(--rasp); }
.case li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid #EBD9BF; }
.case li b { font: 26px/1.1 var(--serif); font-weight: 400; }
.case li span { grid-column: 1; font-size: 15px; color: #6B564C; }
.case li em { grid-row: 1; grid-column: 2; font-style: normal; font: 22px var(--serif); }

.breakfast { background: var(--cocoa); color: var(--paper); }
.breakfast .head p { color: #D9C6B6; }
.clock { font: clamp(90px, 15vw, 240px)/.8 var(--serif); color: var(--honey); letter-spacing: -.03em; margin: 0; }
.bgrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; }
.bgrid ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.bgrid li { padding: 10px 0; border-bottom: 1px solid rgba(255,247,234,.15); break-inside: avoid; }

.make { background: var(--honey); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; padding: 80px 5vw; }
.make canvas { width: 100%; aspect-ratio: 1; max-height: 620px; cursor: grab; }
.make h2 { font: clamp(48px, 6vw, 96px)/.92 var(--serif); margin: 0 0 20px; }
.make p { font-size: 19px; max-width: 36ch; margin: 0 0 28px; }
.make .btn { background: var(--cocoa); color: var(--paper); }
.make small { display: block; margin-top: 14px; font-size: 14px; }

.visit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.visit h3 { font: 26px var(--serif); margin: 0 0 10px; }
.visit p { margin: 0; color: #6B564C; }
.quote { font: clamp(34px, 4vw, 56px)/1.08 var(--serif); max-width: 22ch; margin: 0 0 12px; }
.quote + small { color: #6B564C; }
footer { background: var(--rasp); color: var(--paper); padding: 64px 5vw 28px; overflow: hidden; }
footer .big { font: 20.5vw/.8 var(--serif); letter-spacing: -.04em; margin: 0; white-space: nowrap; }
footer .big span { color: #F2A9B4; }
footer .row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; margin-top: 28px; color: #F6C9CF; }

@media (max-width: 900px) {
  .nav .link, .nav .badge { display: none; }
  .hero .pin { grid-template-columns: 1fr; align-items: end; padding-bottom: 110px; }
  .hero canvas { width: 100%; height: 44%; right: 0; top: 7%; }
  .progress { bottom: 96px; }
  .copy .later { top: auto; bottom: 0; translate: 0; }
  h1 { font-size: 64px; }
  .strip { flex-wrap: wrap; gap: 6px 18px; }
  .head, .case, .bgrid, .make, .visit { grid-template-columns: 1fr; }
  .bgrid ul { columns: 1; }
  section.block { padding: 84px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .copy .step { transition: none; } }
footer .row a { color: inherit; }

/* Without WebGL: hide empty canvases, keep the layout readable. */
.no-3d .hero canvas, .no-3d .make canvas { display: none; }
.no-3d .make { grid-template-columns: 1fr; }