/* Way Home Coffee — site styles
   Layout is designed on a 1440×810 stage. On desktop every measurement is
   expressed in --u (one design pixel), so the composition scales with the
   viewport. Under 720px the same markup reflows into a single column. */

:root {
  --ink: #1a120e;
  --cocoa: #4a2a1e;
  --tangerine: #ff6a2b;
  --amber: #e5a03a;
  --apricot: #ffb27a;
  --peach: #ffd9bf;
  --cream: #fff4ea;
  --sand: #e8d3c0;

  /* one design pixel; capped so low-res photos never upscale past 1.15× */
  --u: min(calc(100vw / 1440), 1.15px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; }
ul { list-style: none; }

.serif {
  font-family: 'Fraunces', 'EB Garamond', Georgia, serif;
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  letter-spacing: -0.02em;
  line-height: 1.0;
}

/* wordmark */
.wm { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; display: inline-block; line-height: 1; }
.wm .h { position: relative; display: inline-block; }
.wm .h svg { position: absolute; left: -0.08em; bottom: -0.30em; width: 0.86em; height: 0.34em; overflow: visible; }
.wm .h svg path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(40 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: calc(8 * var(--u));
  font-size: max(12px, calc(13.5 * var(--u))); font-weight: 500; letter-spacing: 0.01em; white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn.sm { height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u)); font-size: max(12px, calc(13 * var(--u))); }
.btn-primary { background: var(--tangerine); color: var(--cream); }
.btn-primary:hover { background: #ff5a14; }
.btn-ghost { border: 1px solid currentColor; background: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

.link { font-size: max(12px, calc(13 * var(--u))); font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--tangerine); padding-bottom: 1px; }
.link:hover { color: var(--tangerine); }
.link.light { color: var(--cream); }
.link.light:hover { color: #fff; }

/* ---------- nav (fixed, transparent over the hero) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; color: var(--ink);
  transition: background-color .25s ease, box-shadow .25s ease; }
.nav-in { width: calc(1440 * var(--u)); max-width: 100%; margin: 0 auto; height: calc(64 * var(--u));
  display: flex; align-items: center; padding: 0 calc(56 * var(--u)); }
.nav .wm { font-size: calc(26 * var(--u)); }
.nav .links { margin-left: auto; display: flex; gap: calc(36 * var(--u)); font-size: max(12px, calc(13.5 * var(--u)));
  font-weight: 500; letter-spacing: 0.01em; margin-right: calc(40 * var(--u)); }
.nav .links a { opacity: 0.9; transition: opacity .18s ease; }
.nav .links a:hover { opacity: 1; color: var(--tangerine); }
.nav.scrolled { background: rgba(255,244,234,0.86); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(26,18,14,0.06); }

/* ---------- stage + sections ---------- */
.stage { width: calc(1440 * var(--u)); max-width: 100%; margin: 0 auto; }
.sec { position: relative; height: calc(810 * var(--u)); overflow: hidden; background: var(--cream); }

.full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fade-cream { position: absolute; left: 0; right: 0; bottom: 0; height: calc(380 * var(--u));
  background: linear-gradient(to top, rgba(255,244,234,0.96) 0%, rgba(255,244,234,0.80) 40%, rgba(255,244,234,0) 100%); }
.fade-cream.tall { height: calc(400 * var(--u)); }
.fade-dark { position: absolute; left: 0; right: 0; bottom: 0; height: calc(300 * var(--u));
  background: linear-gradient(to top, rgba(26,18,14,0.55) 0%, rgba(26,18,14,0.22) 55%, rgba(26,18,14,0) 100%); }

/* two-up: two native-size photos side by side with a hairline of cream between */
.two .l, .two .r { position: absolute; top: 0; height: 100%; object-fit: cover; }
.two .l { left: 0; width: calc(718 * var(--u)); }
.two .r { right: 0; width: calc(718 * var(--u)); }

.copy { position: absolute; left: calc(72 * var(--u)); bottom: calc(52 * var(--u)); color: var(--ink); }
.copy.light { color: var(--cream); }
.copy h1 { font-size: calc(46 * var(--u)); }
.copy h2 { font-size: calc(36 * var(--u)); }
.copy p { margin-top: calc(12 * var(--u)); font-size: max(12px, calc(14 * var(--u))); max-width: calc(420 * var(--u)); opacity: 0.85; }
.copy .ctas { margin-top: calc(22 * var(--u)); display: flex; gap: calc(12 * var(--u)); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 01 hero ---------- */
.hero .copy p { max-width: calc(420 * var(--u)); }

/* ---------- 02 drinks (full-bleed product shot) ---------- */
.drinks .full { top: -8%; height: 108%; } /* lifts the cups clear of the menu list */
.drinks .copy h2 { font-size: calc(38 * var(--u)); }
.menu { position: absolute; right: calc(72 * var(--u)); bottom: calc(44 * var(--u)); text-align: right;
  font-size: max(12px, calc(12.5 * var(--u))); line-height: 1.8; letter-spacing: 0.01em; color: var(--ink); }
.menu.light { color: var(--cream); }
.menu span { display: inline-block; min-width: calc(40 * var(--u)); text-align: right; margin-left: calc(22 * var(--u)); }
.menu .link { display: inline-block; margin-top: calc(14 * var(--u)); }

/* ---------- 03 season (full-bleed product shot) ---------- */
.season .copy { bottom: calc(44 * var(--u)); }
.season .copy h2 { font-size: calc(34 * var(--u)); }
.season .list { margin-top: calc(12 * var(--u)); font-size: max(12px, calc(12.5 * var(--u))); line-height: 1.85; opacity: 0.92; }
.season .list span { display: inline-block; margin-left: calc(16 * var(--u)); }
.season .copy .link { display: inline-block; margin-top: calc(12 * var(--u)); }

/* ---------- 04 diptych: real room + product top-down ---------- */
.diptych .fade-cream.half { right: calc(722 * var(--u)); }
.diptych .cta { position: absolute; right: calc(72 * var(--u)); bottom: calc(56 * var(--u)); color: var(--cream); }

/* ---------- 05 room: two real interiors ---------- */
.room .fade-cream { height: calc(340 * var(--u)); }
.room .hint { margin-top: calc(14 * var(--u)); font-size: max(12px, calc(12.5 * var(--u))); letter-spacing: 0.02em; opacity: 0.8; }
.facts { position: absolute; right: calc(72 * var(--u)); bottom: calc(58 * var(--u)); color: var(--ink);
  display: flex; flex-direction: column; gap: calc(18 * var(--u)); font-size: max(12px, calc(12.5 * var(--u))); letter-spacing: 0.02em; }
.facts li { display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.facts svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 06 order: real counter + hot cup (same 718/722 seam as 04 and 05) ---------- */
.order .fade-cream.half { right: calc(722 * var(--u)); }

/* ---------- 07 visit: exterior photo + address column ---------- */
.visit .ext { position: absolute; left: 0; top: 0; width: calc(1000 * var(--u)); height: calc(732 * var(--u)); object-fit: cover; }
.visit .panel { position: absolute; left: calc(1000 * var(--u)); right: 0; top: 0; height: calc(732 * var(--u));
  padding: 0 calc(56 * var(--u)) 0 calc(60 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.visit .panel h2 { font-size: calc(36 * var(--u)); }
.visit .lines { margin-top: calc(18 * var(--u)); font-size: max(12px, calc(13 * var(--u))); line-height: 1.7; opacity: 0.85;
  display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.visit .panel .btn { align-self: flex-start; margin-top: calc(26 * var(--u)); }
.footer { position: absolute; left: 0; right: 0; bottom: 0; height: calc(78 * var(--u)); display: flex; align-items: center;
  justify-content: space-between; padding: 0 calc(72 * var(--u)); font-size: max(11px, calc(12 * var(--u))); background: var(--cream);
  border-top: 1px solid rgba(26,18,14,0.08); }
.footer .wm { font-size: calc(20 * var(--u)); }
.footer .mid { opacity: 0.7; }

/* =====================================================================
   Mobile: reflow into one column. Photos keep their crop; copy moves below.
   ===================================================================== */
@media (max-width: 720px) {
  :root { --u: 1px; }
  body { font-size: 15px; }
  .stage { width: 100%; }
  .sec { height: auto; overflow: visible; display: flex; flex-direction: column; }
  .btn { height: 44px; padding: 0 20px; font-size: 14px; border-radius: 10px; }
  .btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }

  .nav-in { width: 100%; height: 56px; padding: 0 18px; }
  .nav .wm { font-size: 24px; }
  .nav .links { display: none; }
  .nav .btn.sm { margin-left: auto; }

  .copy, .copy.light { position: static; color: var(--ink); padding: 28px 22px 34px; }
  .copy h1 { font-size: 34px; }
  .copy h2 { font-size: 30px; }
  .copy p { font-size: 15px; max-width: 34ch; }
  .copy .ctas { flex-wrap: wrap; gap: 10px; }
  .fade-cream, .fade-dark { display: none; }
  .link.light { color: var(--ink); }

  /* photos flow in a column at full width, keeping their crops */
  .full, .two .l, .two .r, .visit .ext { position: static; width: 100%; height: auto; }

  /* 01 */
  .hero { padding-top: 56px; }
  .hero .full { height: clamp(420px, 72svh, 640px); object-position: 62% 50%; }

  /* 02 */
  .drinks .copy { padding-bottom: 8px; }
  .menu, .menu.light { position: static; color: var(--ink); text-align: left; padding: 0 22px 36px; font-size: 14px; }
  .menu div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--sand); padding: 4px 0; }
  .menu span { margin-left: 0; }

  /* 03 */
  .season .list { font-size: 14px; }
  .season .list div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--sand); padding: 4px 0; }

  /* 04 */
  .diptych .cta { position: static; color: var(--ink); margin: 0 22px 34px; align-self: flex-start; }

  /* 05 */
  .room .r { order: 3; }
  .room .copy { order: 1; padding-bottom: 6px; }
  .facts { position: static; order: 2; padding: 0 22px 36px; font-size: 14px; gap: 12px; }

  /* 06 */
  .order .r { order: 2; }

  /* 07 */
  .visit .panel { position: static; height: auto; padding: 28px 22px 34px; }
  .visit .panel h2 { font-size: 30px; }
  .visit .lines { font-size: 15px; }
  .footer { position: static; height: auto; padding: 18px 22px; font-size: 12px; flex-wrap: wrap; gap: 8px; }
  .footer .wm { font-size: 18px; }
  .footer .mid { display: none; }
}