/* ==========================================================================
   hungry.net.nz — static replica
   The page is a fixed-proportion "canvas": every length is expressed in
   design units (--u), so the whole composition scales with the viewport,
   exactly like the original.
     desktop canvas : 1366 x 1202  (1 unit = 1px at >= 1366px wide)
     mobile canvas  :  475 x 1061
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/montserrat-black.woff2") format("woff2");
}
@font-face {
  font-family: "Brice";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/brice-semiexpanded.woff2") format("woff2");
}
@font-face {
  font-family: "Beachday";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/beachday.woff") format("woff");
}

:root {
  --purple: #7c44d8;
  --ink: #f4f6fc;
  --ink-dark: #101010;
  --gold-mornington: #e1be45;
  --gold-anderson: #deb133;

  /* 1 design unit, capped at 1px so the design never scales past 100% */
  --u: min(1px, calc(100vw / 1366));
  --canvas-w: 1366;
  --canvas-h: 1202;
}

* { box-sizing: border-box; }

html { background: var(--purple); }

body {
  margin: 0;
  background: var(--purple);
  color: var(--ink);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

.stage-wrap {
  display: block;
  width: 100%;
}

.stage {
  position: relative;
  width: calc(var(--u) * var(--canvas-w));
  height: calc(var(--u) * var(--canvas-h));
  margin: 0 auto;
}

/* ---------- hero -------------------------------------------------------- */

.hero {
  position: absolute;
  left: calc(var(--u) * var(--hero-x));
  top: 0;
  width: calc(var(--u) * var(--hero-w));
  height: auto;
  --hero-x: 407.7;
  --hero-w: 599.8;
}

/* ---------- heading ----------------------------------------------------- */

.heading {
  position: absolute;
  left: 0;
  top: calc(var(--u) * var(--heading-y));
  width: 100%;
  margin: 0;
  padding-left: calc(var(--u) * var(--heading-shift));
  text-align: center;
  font-weight: 400;
  --heading-y: 393.3;
  --heading-shift: 10.6;
}

.heading__line {
  display: block;
  font-family: "Beachday", "Comic Sans MS", cursive;
  font-size: calc(var(--u) * 25.8478);
  line-height: calc(var(--u) * 35.2);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: max(1px, calc(var(--u) * 1.4));
  text-underline-offset: calc(var(--u) * 2);
}

/* ---------- restaurant cards -------------------------------------------- */
/* A card is anchored on its white rule; everything else is placed relative
   to that line, matching the original artwork. */

.card {
  position: absolute;
  left: calc(var(--u) * var(--x));
  top: calc(var(--u) * var(--y));
  width: calc(var(--u) * 174.9);
}

.card__rule {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: max(1px, calc(var(--u) * 1));
  background: #fff;
}

.card__logo {
  position: absolute;
  left: calc(var(--u) * var(--lx));
  top: calc(var(--u) * var(--ly));
  z-index: 1;
  width: calc(var(--u) * var(--lw));
  transition: opacity .2s ease;
}

.card__wordmark {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -34.2);
  z-index: 3;
  transform: translateX(-50%);
  color: var(--ink-dark);
  font-family: "Brice", "Montserrat", sans-serif;
  letter-spacing: 0.0784em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.card__wordmark-top {
  display: block;
  font-size: calc(var(--u) * 20.3984);
  line-height: calc(var(--u) * 16);
}

.card__wordmark-bottom {
  display: block;
  margin-top: calc(var(--u) * 0.9);
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 9);
}

.card__name {
  position: absolute;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease;
}

.card__name--mornington {
  top: calc(var(--u) * -26);
  color: var(--gold-mornington);
  letter-spacing: 0.1544em;
  font-size: calc(var(--u) * 13.6461);
  line-height: calc(var(--u) * 19);
}

.card__name--anderson {
  top: calc(var(--u) * -27.7);
  color: var(--gold-anderson);
  letter-spacing: 0.15em;
  font-size: calc(var(--u) * 13.3316);
  line-height: calc(var(--u) * 18);
}

.card__info {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 4.3);
  z-index: 3;
  margin: 0;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: calc(var(--u) * 14.2802);
  line-height: calc(var(--u) * 19.2);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.card__tel {
  text-decoration: none;
  transition: opacity .2s ease;
}

/* card placement — desktop canvas */
.card--asian       { --x: 448.2; --y: 639.3;  --lx: 34.2; --ly: -148.4; --lw: 105.7; }
.card--sushingrill { --x: 734.2; --y: 639.3;  --lx: 0;    --ly: -152.7; --lw: 168.6; }
.card--mornington  { --x: 445.0; --y: 873.0;  --lx: 19.2; --ly: -140.9; --lw: 134.5; }
.card--anderson    { --x: 730.0; --y: 873.0;  --lx: 26.6; --ly: -129.2; --lw: 120.6; }
.card--savoury     { --x: 596.5; --y: 1075.7; --lx: -6.3; --ly: -151.5; --lw: 180.4; }

/* ---------- interaction -------------------------------------------------- */

@media (hover: hover) {
  .card__logo:hover,
  .card__wordmark:hover,
  .card__name:hover,
  .card__tel:hover { opacity: .78; }
}

:focus-visible {
  outline: max(2px, calc(var(--u) * 2)) solid #fff;
  outline-offset: calc(var(--u) * 3);
}

/* ---------- scroll reveal (matches the original's animated heading) ------ */

.js .js-reveal {
  opacity: 0;
  transform: translateY(calc(var(--u) * 26));
  transition: opacity .55s ease, transform .55s ease;
}

.js .js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- mobile canvas ------------------------------------------------ */

@media (max-width: 1023px) {
  :root {
    --u: min(calc(100vw / 475), 1.2px);
    --canvas-w: 475;
    --canvas-h: 1061;
  }

  .hero { --hero-x: 19; --hero-w: 436.6; }

  .heading { --heading-y: 277.4; --heading-shift: 0; }

  .card--asian       { --x: 49.4;  --y: 510.1; }
  .card--sushingrill { --x: 249.3; --y: 510.1; }
  .card--mornington  { --x: 40.5;  --y: 731.5; }
  .card--anderson    { --x: 248.0; --y: 731.5; }
  .card--savoury     { --x: 151.9; --y: 934.0; }
}