/*
  A 计划 · 样式，按参考图 E3「画廊式安静」：奶油纸底、深棕字、DM Serif 大标题（原料名用其斜体）、Jost 全大写小字；
  右侧万寿菊黄壁龛拱门是一张高清实拍图（深度、阳光、平的纹理石地面都在图里，没有台阶）；杯子＋亚麻手帕平铺在这块石面上。

  定位关系（谁跟着谁走）：
    · 页面边距 --gutter：全页唯一的左右边线，屏幕再宽内容也不超过 --page-max（多出来的宽度变成两边留白）。导航、首屏内容区 --container、分隔线、原料卡排都贴着它（用户要左右两条整齐的边界）。
    · 首屏所有尺寸只跟窗口宽度走、不跟高度走（用户定）：拱门宽 W = 右栏宽度能放下的大小，标题字号、间距、原料卡高度都按宽度取值；
      窗口高度只决定能看到多少，矮了就滚动；
      杯子宽、手帕出框量、两侧花样的大小和位置、壁龛内壁厚度全部是 W 或拱高 H 的固定比例。
    · 文字块：左边缘对齐内容区左边，上下居中对准「拱门顶 → 手帕底」这一段。
    · 拱门组（花样＋拱门）：右边缘对齐内容区右边。
    · 分隔线：紧贴在手帕底下；之后各节见 inside.css、sections.css、footer.css。
  屏幕变化：≥1024px 左右两栏（大小只看宽度）；<1024px 改成上下排（文字 → 拱门 → 原料），原料卡在手机上两列。
*/
:root {
  --paper: #FBF4E8;
  --card: #F3E7D3;
  --ink: #2A1A10;
  --ink-soft: rgb(42 26 16 / 0.64);
  --hairline: rgb(196 120 60 / 0.38);
  --terracotta: #D9622B;
  --serif: "DM Serif Display", ui-serif, Georgia, serif;
  --sans: "Jost", ui-sans-serif, system-ui, sans-serif;

  /* page frame */
  --page-max: 88rem;        /* content never gets wider than this; extra width becomes margin */
  --gutter: max(clamp(1.25rem, 7vw, 8rem), (100vw - var(--page-max)) / 2);
  --nav-h: 4.5rem;
  --container: calc(100vw - 2 * var(--gutter));
  --col-gap: clamp(1.5rem, 3vw, 3.5rem);

  /* vertical budget of the first screen */
  --top-gap: 1.2vw;
  --inside-head: 3.6rem;    /* divider + "What's inside" */
  --card-h: clamp(9.5rem, 13vw, 14rem);
  --bottom-gap: 2vw;

  /* arch group proportions: everything follows the arch (W wide, H tall) */
  --arch-ratio: 0.945;      /* H / W of the niche photo's arch (841 / 890 px) */
  --cup-w: 0.81;            /* cup + napkin cut-out width, share of W (mug body = 63.7% of it; mug rim lands at ~0.36 H as in E3) */
  --cup-front: 0.085;       /* napkin front edge below the arch base, share of H (stays on the solid part of the floor) */
  --floor-out: 0.174;       /* photo floor below the arch base down to its faded edge, share of H */
  --orn-h: 0.38;            /* side ornament height, share of H (85% of the previous size) */
  --orn-gap: 0.07;          /* gap between arch edge and ornament, share of W (E3) */
  --orn-aspect: 0.408;      /* ornament image width / height (147 x 360) */
  --stage-span: calc(1 + 2 * (var(--orn-gap) + var(--orn-h) * var(--arch-ratio) * var(--orn-aspect)));
  /* arch height depends on the window WIDTH only (user rule): the right column's share of the content width */
  --arch-h: calc(var(--container) * 0.6 / var(--stage-span) * var(--arch-ratio));
  --arch-w: calc(var(--arch-h) / var(--arch-ratio));
  --stage-h: calc(var(--arch-h) * (1 + var(--floor-out)));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: inherit;
}

.nowrap {
  white-space: nowrap;
}

.eyebrow,
.btn,
.inside__title {
  font-weight: 500;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  gap: 0.55rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Instagram glyph used inside buttons (nav, first screen, footer) */
.icon-ig {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.btn--dark {
  background: var(--ink);
  color: var(--paper);
}

.btn--lg {
  min-height: 3.125rem;
  padding: 0 2.1rem;
  font-size: 0.78rem;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(42 26 16 / 0.18);
}

/* ---------- shared section typography (used by every section below the first screen) ---------- */
.kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.kicker + .section-title {
  margin-top: clamp(0.5rem, 0.9vw, 0.9rem);
}

.section-lead {
  margin-top: clamp(0.75rem, 1.2vw, 1.25rem);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.3vw, 1.3125rem);
  line-height: 1.4;
  color: var(--ink-soft);
}


/* ---------- navigation: pinned to the page gutter ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: rgb(251 244 232 / 0.9);
  border-bottom: 1px solid rgb(42 26 16 / 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* the only nav action; pushed to the right edge */
.nav__cta {
  margin-left: auto;
}

.nav__brand {
  flex: none; /* never squeezed by the order button */
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nav__brand img {
  width: 2.25rem;
  height: auto;
}

/* ---------- hero ---------- */
.hero {
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + var(--top-gap)) 0 var(--bottom-gap);
}

/* copy column | arch group; the row is at least as tall as arch + napkin, the copy centres on it */
.hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(var(--arch-w) * var(--stage-span));
  grid-template-rows: minmax(var(--stage-h), auto);
  column-gap: var(--col-gap);
  width: var(--container);
  margin: 0 auto;
}

.hero__copy {
  align-self: center;
  /* like E3, the copy may extend under the left ornament's column (the ornament sits higher than the lead) */
  margin-right: calc(-1 * (var(--col-gap) + var(--arch-w) * var(--orn-h) * var(--arch-ratio) * var(--orn-aspect) * 0.8));
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}

.hero__title {
  margin-top: clamp(1rem, 1.5vw, 1.75rem);
  font-family: var(--serif);
  font-size: clamp(2.75rem, min(4.85vw, var(--arch-h) * 0.189), 5.25rem); /* scales with the arch, not the window height */
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.012em;
}

.hero__sprig {
  display: inline-block;
  width: 0.72em;
  height: auto;
  margin-left: 0.08em;
  vertical-align: top;
  transform: translateY(-0.04em) rotate(-8deg);
}

.hero__lead {
  max-width: 27em;
  margin-top: clamp(0.875rem, 1.1vw, 1.4rem);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.42vw, 1.375rem);
  line-height: 1.25;
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.25rem;
  margin-top: clamp(1.25rem, 2.15vw, 2.4rem);
}

/* tells people what to put in the DM before they tap */
.hero__hint {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- arch group (all sizes are shares of the arch box) ---------- */
.hero__stage {
  display: flex;
  align-self: end;
  justify-content: center;
  height: var(--stage-h);
}

/* ---- the niche: one HD photo (assets/img/niche.webp, cropped in tools/prepare_assets.py) ----
   .arch is the arch opening's outer box (W x H, measured on the photo: arch 890 x 841 px);
   the photo hangs 46 px (5.17% of W) past each side for the floor fade and runs 17.4% of H below the arch base */
.arch {
  position: relative;
  flex: none;
  width: var(--arch-w);
  height: var(--arch-h);
}

.arch__niche {
  position: absolute;
  top: 0;
  left: -5.17%;
  width: 110.56%;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.arch__ornament {
  position: absolute;
  top: calc((0.55 - var(--orn-h) / 2) * 100%); /* centred at 55% of the arch height, level with the mug body */
  width: auto;
  height: calc(var(--orn-h) * 100%);
}

.arch__ornament--left {
  right: calc(100% + var(--orn-gap) * 100%);
}

.arch__ornament--right {
  left: calc(100% + var(--orn-gap) * 100%);
}

.arch__cup {
  position: absolute;
  left: 50%;
  bottom: calc(var(--cup-front) * -100%);
  z-index: 1;
  width: calc(var(--cup-w) * 100%);
  height: auto;
  max-width: none;
  transform: translateX(-49.4%); /* mug body centre sits at 49.4% of the cut-out (measured) */
  filter: drop-shadow(0 3px 5px rgb(42 26 16 / 0.14));
}

/* ---------- tablet & phone: stacked (copy -> arch -> ingredients) ---------- */
@media (max-width: 1023px) {
  :root {
    --gutter: clamp(1.25rem, 6vw, 3rem);
    --container: calc(100vw - 2 * var(--gutter));
    --arch-w: min(calc(var(--container) / var(--stage-span)), 26rem);
    --arch-h: calc(var(--arch-w) * var(--arch-ratio));
    --card-h: 12rem;
  }

  .hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 2.5rem);
    padding-bottom: 3rem;
  }

  .hero__top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--stage-h);
    row-gap: 2.75rem;
    justify-items: center;
  }

  .hero__copy {
    max-width: 36rem;
    margin-right: 0;
    text-align: center;
  }

  .hero__title {
    font-size: clamp(2.75rem, 8vw, 4.25rem);
  }

  .hero__lead {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__stage {
    width: calc(var(--arch-w) * var(--stage-span));
  }
}

@media (max-width: 599px) {
  :root {
    --nav-h: 4rem;
    --card-h: 11rem;
  }

  .nav__brand {
    font-size: 1.3rem;
  }

  .nav__brand img {
    width: 1.9rem;
  }

  .nav .btn {
    min-height: 2.4rem;
    padding: 0 0.95rem;
    gap: 0.4rem;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  .hero__title {
    font-size: clamp(2.5rem, 11.5vw, 3.25rem);
  }

  .eyebrow {
    letter-spacing: 0.12em; /* keep "That's it." on the line */
  }

  .hero__lead br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

/* ---------- 404 page (site/404.html) ---------- */
.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 100svh;
  padding: 2rem var(--gutter);
  text-align: center;
}