/* ---------- tokens ---------- */
:root {
  --choc: #2E1915;
  --choc-2: #3E261E;
  --cream: #FFEEAC;
  --gold: #FFEEAC;
  --ink: #2E1915;

  --serif: "Inria Serif", Georgia, "Times New Roman", serif;

  /* bar heights scale with width, like the Canva frame (78px on a 1386px-wide page) */
  --header-h: clamp(60px, 5.63vw, 100px);
  --bar-h: clamp(60px, 5.63vw, 100px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--choc);
  color: var(--gold);
  font-family: var(--serif);
  font-style: italic; font-weight: 700;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* TV static over the photos only (drawn by the script in index.html) */
.static {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  opacity: .5;               /* static strength: lower = fainter */
}

/* ---------- page frame ---------- */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: var(--header-h) 1fr auto;
}

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  /* left/right insets measured from Canva: logo 40px, icons 37px in on a 1386px frame */
  padding: 0 2.46vw 0 2.87vw;
  background: var(--choc);
}
.logo { margin: 0; line-height: 1; }
.logo img { width: calc(var(--header-h) * 2.736); height: auto; } /* 213px wide on a 78px bar, as in Canva */
/* icons: 32% opacity; visible glyphs 27px (Instagram) / 23×26px (TikTok), 20px apart (Canva).
   The svg box is larger than the visible glyph, so --icon is sized to hit those glyph sizes. */
.socials { --icon: calc(var(--header-h) * .334);  /* 20% smaller than Canva */ display: flex; gap: calc(var(--icon) * .397); }
.socials a { display: grid; place-items: center; width: var(--icon); height: var(--icon); border-radius: 6px; color: var(--gold); opacity: .32; transition: opacity .2s; }
.socials a:hover, .socials a:focus-visible { opacity: .7; }
.socials svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.socials svg .fill { fill: currentColor; stroke: none; }
.socials--photo { display: none; z-index: 2; }

/* ---------- hero photos ---------- */
.hero { position: relative; min-height: 0; overflow: hidden; }
.photos {
  position: relative;
  height: 100%;
  display: grid;
  /* panel widths measured from the Canva mockup */
  grid-template-columns: 32.79fr 35.5fr 31.71fr;
}

/* Each photo reproduces its Canva crop: --z = zoom (image width as % of panel width),
   --fx/--fy = the point of the image that sits in the centre of the panel,
   --ar = image height ÷ width. If a screen is taller than the mockup, the photo
   grows just enough to still fill the panel, keeping the same focal point. */
.photo {
  position: relative; margin: 0; min-height: 0; overflow: hidden;
  container-type: size;
  background: var(--choc-2);
}
.photo img {
  --w: max(var(--z), calc(100cqh / var(--ar)));
  position: absolute; max-width: none;
  width: var(--w); height: auto;
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--w) * var(--fx)), 0px);
  top: clamp(calc(100cqh - var(--w) * var(--ar)), calc(50cqh - var(--w) * var(--ar) * var(--fy)), 0px);
}
.photo--1 img { --z: 128.6cqw; --fx: .609; --fy: .453; --ar: 1.3333; }
.photo--2 img { --z: 123.7cqw; --fx: .484; --fy: .438; --ar: 1.3258; }
.photo--3 img { --z: 133cqw;   --fx: .378; --fy: .453; --ar: 1.3333; }

/* ---------- signup bar ---------- */
.signup {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: var(--bar-h);
  background: var(--choc);
}
.signup-prompt {
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 20px;
  text-align: center;
  font-style: italic; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(15px, 1.6vw, 22px);
  color: var(--gold);
}
.signup-cta {
  display: flex; align-items: center; justify-content: center; gap: .5em;
  padding: 12px 20px;
  background: var(--cream); color: var(--ink);
  font: italic 700 clamp(15px, 1.6vw, 22px)/1 var(--serif);
  text-transform: uppercase; letter-spacing: .02em;
  text-decoration: none;
  transition: background .2s;
}
.signup-cta span { display: inline-block; transition: transform .2s; }
.signup-cta:hover { background: #FFF6CC; }
.signup-cta:hover span { transform: translateX(4px); }
.signup-cta:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold), inset 0 0 0 5px var(--choc); }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  :root { --header-h: 58px; }
  .photos { grid-template-columns: 1fr; }
  .photo--1 img { --z: 100cqw; --fx: .5; --fy: .5; }
  .photo--2, .photo--3 { display: none; }
  .socials--header { display: none; }
  /* Canva mobile: logo 205px wide on a 390px screen, 13px in; icons 29px glyphs at 32% opacity, 11px from the photo's corner */
  .site-header { padding-left: 12px; }
  .logo img { width: min(52.6vw, 240px); }
  .socials--photo {
    --icon: 28px;  /* 20% smaller than Canva */
    display: flex; position: absolute; right: 9px; bottom: 6px; gap: 2.8px;
  }

  .signup { grid-template-columns: 1fr; padding-bottom: env(safe-area-inset-bottom); }
  .signup-prompt { min-height: 58px; font-size: 14px; }
  .signup-cta { min-height: 59px; font-size: 16px; }
}