/* ═══════════════════════════════════════════════════════════════════════
   URAMAKI — Pan-Asian Kitchen, Vasant Vihar
   Rebuilt from design_handoff_uramaki_landing. Tokens mirror the handoff.

   Display face: Canela Trial is licensed and not bundled. Fraunces (variable,
   100–900) stands in — high-contrast flared serifs, WONK/SOFT zeroed so it
   reads clean rather than quirky. To swap in real Canela, drop the .woff2
   files into assets/ and uncomment the @font-face block below.
   ═══════════════════════════════════════════════════════════════════════ */

/*
@font-face { font-family:"Canela Trial"; src:url("/assets/CanelaTrial-Light.woff2") format("woff2");   font-weight:300; font-display:swap; }
@font-face { font-family:"Canela Trial"; src:url("/assets/CanelaTrial-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
*/

:root {
  /* Colour */
  --red:          #C31F25;
  --red-deep:     #B01A20;
  --red-hover:    #A5171D;
  --cream:        #FBF3EA;
  --cream-btn:    #FBF2EA;
  --ink:          #2A1210;
  --ink-body:     #231816;
  --ink-muted:    #5A3A36;
  --link-red-a:   #A80000;
  --link-red-b:   #AC0000;
  --hair-ink:     rgba(42,18,16,.14);
  --hair-ink-mid: rgba(42,18,16,.28);
  --hair-cream:   rgba(251,243,234,.55);
  --cream-78:     rgba(251,243,234,.78);
  --cream-72:     rgba(251,243,234,.72);

  /* Type */
  --ui:      "Montserrat", Archivo, Helvetica, Arial, sans-serif;
  --display: "Canela Trial", "Fraunces", Georgia, "Times New Roman", serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Layout */
  --gutter:  20px;
  --prose:   820px;
  --wide:    1040px;
  --section: clamp(64px, 10vw, 96px);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--red);
  color: var(--cream);
  font-family: var(--ui);
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img, picture, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; transition: opacity .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
a:hover { opacity: .82; }

/* Visible keyboard focus everywhere — the design has none, so this adds it. */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--cream); color: var(--red-deep);
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

/* Fraunces stand-in: flatten the whimsy axes so it sits closer to Canela. */
.hero__tagline, .place__headline, .grid-section__head h2,
.grid-section__cta p, .host__left h2 {
  font-variation-settings: "SOFT" 0, "WONK" 0;
}

.wrap { max-width: var(--wide); margin-inline: auto; }

/* ── Shared: eyebrow ──────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--red-deep);
}

/* ── Shared: pills ────────────────────────────────────────────────────── */
.cta-row {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 34px;
}
.cta-row--left { justify-content: flex-start; margin-top: 0; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 15px 28px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
}
.pill--cream          { background: var(--cream);     color: var(--red-deep); }
.pill--cream:hover    { opacity: .88; }
.pill--outline-cream  { background: var(--cream-btn); color: var(--link-red-a); border-color: var(--hair-cream); }
.pill--outline-cream:hover { opacity: .88; }
.pill--red            { background: var(--red);       color: var(--cream); }
.pill--red:hover      { background: var(--red-hover); opacity: 1; }
.pill--outline-ink    { color: var(--ink);             border-color: var(--hair-ink-mid); }
.pill--outline-ink:hover { background: rgba(42,18,16,.06); opacity: 1; }

/* The hero's second/third pills use a hair-different red in the handoff. */
.hero .pill--outline-cream:last-child { color: var(--link-red-b); }

/* ── 1. Marquee ───────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  background: var(--cream); color: var(--red-deep);
  padding: 14px 0;
  font-size: 12px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__list {
  display: flex; align-items: center; gap: 22px;
  padding-right: 22px; white-space: nowrap;
}
.marquee__star { opacity: .45; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── 2. Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  min-height: 88vh;
  padding: clamp(118px, 12vw, 130px) var(--gutter) clamp(150px, 18vw, 220px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}

.hero__roll {
  position: absolute; top: -70px; right: -10vw;
  width: clamp(240px, 38vw, 430px); height: auto;
  transform: rotate(8deg); transform-origin: top right;
  z-index: 2; pointer-events: none;
  filter: drop-shadow(0 50px 70px rgba(80,8,10,.4));
  will-change: transform;
}

.hero__wordmark { position: relative; z-index: 3; }
.hero__wordmark img { width: min(365px, 66vw); height: auto; }

.hero__tagline {
  position: relative; z-index: 3;
  width: min(592px, 92vw); max-width: 620px;
  margin-top: 34px;
  font-family: var(--display); font-weight: 200;
  font-size: clamp(28px, 4.4vw, 44px); line-height: 1.22;
  color: var(--cream); text-wrap: pretty;
}

/* Bottom-anchored and fluid. The handoff's pixel offsets came from a visual
   editor and broke below ~1200px; the large hero bottom padding is what keeps
   this texture clear of the copy at every width. */
.hero__halftone {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 140%; min-width: 900px; margin-left: -20%;
  height: auto;
  opacity: .28; mix-blend-mode: color-burn;
  z-index: 1; pointer-events: none;
}

/* ── 3. Seam bowl ─────────────────────────────────────────────────────── */
.seam {
  position: relative; height: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
}
.seam__bowl {
  width: min(443px, 50vw); height: auto;
  flex: 0 0 auto; object-fit: contain;
  transform: translateY(-50%) rotate(-14deg);
  filter: drop-shadow(0 22px 36px rgba(80,8,10,.34));
  will-change: transform;
}

/* ── 4. The place ─────────────────────────────────────────────────────── */
.place {
  position: relative; z-index: 4;
  margin-top: -24px;
  padding: clamp(180px, 20vw, 230px) var(--gutter) 96px;
  background: var(--cream); color: var(--ink);
  border-radius: 48px 48px 0 0;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.place__inner {
  max-width: var(--prose); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center;
}
.place__headline {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px); line-height: 1.3;
  text-wrap: pretty;
}
.place__body {
  max-width: 620px;
  font-size: 17px; font-weight: 300; line-height: 1.75;
  color: var(--ink-body); text-wrap: pretty;
}
.place__emphasis {
  font-weight: 600; letter-spacing: .04em; color: var(--ink);
}

/* ── 5. Instagram grid ────────────────────────────────────────────────── */
.grid-section { position: relative; padding: var(--section) var(--gutter); }

.grid-section__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px; margin-bottom: 36px;
}
.grid-section__headText { display: flex; flex-direction: column; gap: 10px; }
.grid-section__head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4vw, 44px); line-height: 1.15;
}
.grid-section__head p {
  max-width: 460px;
  font-size: 15px; line-height: 1.6;
  color: var(--cream-78); text-wrap: pretty;
}
.grid-section__head b { font-weight: 600; color: var(--cream); }

.underline-link {
  font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid rgba(251,243,234,.5); padding-bottom: 4px;
}

/* The handoff specified a 330px column floor purely because Instagram's iframe
   embed breaks below ~326px. We serve static images from the feed instead, so
   that floor is gone — and dropping it matters: at 330px the grid collapsed to
   one column on phones, i.e. nine stacked full-width squares. A fixed 3x3 is
   both the Instagram convention and far more compact. */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 14px);
}

/* Fallback state is three tiles, so auto-fit would strand an orphan on a
   second row across a wide band of widths. Pin it: three up, then stacked. */
.ig-grid--fallback { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .ig-grid--fallback { grid-template-columns: 1fr; }
}

.ig-tile {
  position: relative; aspect-ratio: 1 / 1;
  border-radius: 4px; overflow: hidden;
  background-color: var(--red-deep);
  background-image: repeating-linear-gradient(135deg, rgba(251,243,234,.09) 0 8px, transparent 8px 16px);
}
.ig-tile > a, .ig-tile > img { position: absolute; inset: 0; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; }
.ig-tile a { display: block; }
.ig-tile a img { transition: transform .6s var(--ease); }
.ig-tile a:hover { opacity: 1; }
.ig-tile a:hover img { transform: scale(1.04); }

/* Announce the live-feed swap to screen readers without putting a developer
   status line on a marketing page. */
.ig-status {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.grid-section__cta {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; margin-top: 56px; text-align: center;
}
.grid-section__cta p {
  max-width: 520px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.25;
  text-wrap: pretty;
}

/* ── 6. Host with us + contact ────────────────────────────────────────── */
.host {
  padding: var(--section) var(--gutter);
  background: var(--cream); color: var(--ink);
}
.host__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}
.host__left { display: flex; flex-direction: column; gap: 22px; }
.host__left h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 4vw, 42px); line-height: 1.2;
  text-wrap: pretty;
}
.host__left p {
  max-width: 460px;
  font-size: 16px; line-height: 1.75;
  color: var(--ink-muted); text-wrap: pretty;
}

.host__right {
  display: grid; gap: 20px;
  border-left: 1px solid var(--hair-ink);
  padding-left: clamp(0px, 3vw, 32px);
}
.info { display: grid; gap: 6px; }
.info__label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--red-deep);
}
.info__link {
  justify-self: start;
  font-size: 14px; line-height: 1.6;
  border-bottom: 1px solid rgba(42,18,16,.25); padding-bottom: 2px;
}
.info__value { font-size: 14px; line-height: 1.6; justify-self: start; }
.info__value--muted { color: var(--ink-muted); }

/* ── 7. Footer ────────────────────────────────────────────────────────── */
.footer {
  max-width: var(--wide); margin-inline: auto;
  padding: clamp(40px, 7vw, 56px) var(--gutter);
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.footer__mark { width: 150px; height: auto; opacity: .9; }
.footer__links {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-72);
}

/* ── Reduced motion ──────────────────────────────────────────────────────
   Kill the marquee scroll, the parallax and the bowl spin. Reveals are
   neutralised in JS (see prefersReducedMotion in main.js) so content is
   simply present rather than animating in. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; transform: none; }
  .marquee { text-align: center; }
  .marquee__list:last-child { display: none; }

  .place { transition: none !important; }
  .place__inner > * { transition: none !important; }

  .hero__roll, .seam__bowl { will-change: auto; }
  .seam__bowl { transition: none !important; }
  .ig-tile a img { transition: none; }
  .ig-tile a:hover img { transform: none; }
}

/* ── Print ───────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  .marquee, .hero__halftone, .hero__roll, .seam, .ig-grid, .ig-status { display: none; }
  .place, .host { background: #fff; }
}