/* =========================================================================
   Galle Literary Festival: stylesheet

   HOW SIZING WORKS
   The design was made on a 1440px-wide Figma frame. Every size here is
   written in those design pixels and multiplied by --u, which is
   1/1440th of the page width. So the whole page scales to fill any
   window and keeps the Figma proportions.

     calc(24 * var(--u))   =  24px at a 1440px-wide window
                           =  32px at a 1920px-wide window

   To move a piece of artwork, change its --x / --y (design px from the
   top-left of its section). To resize it, change --w.

   SCREEN SIZES
     720px and wider   the 1440px desktop design. Above 1920px it stops
                       growing and sits centred. Text never drops below
                       a readable size (see the max() in the type tokens).
     under 720px       the mobile layout at the end of this file. It has
                       its own 390px-wide frame, so there --u is 1/390th
                       of the page width and sizes are mobile design px.
   ========================================================================= */

/* ---------- Fonts ---------- */

/* Festival display face (development build: has A–Z except X and Z,
   a–z, 0–9 and basic punctuation; no curly quotes or dashes).
   Declared once, in glf-serif.css, linked from index.html. */

/* Body face: variable font, any weight from 100 (thin) to 900 (black) */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/commissioner-variable.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root {
  /* Colours */
  --cream:  #F5ECE8;
  --teal:   #2BBAA5;
  --red:    #E73926;
  --brown:  #73524E;
  --yellow: #FEBD15;

  /* Scale: one Figma pixel, stopping at a 1920px-wide window */
  --u: calc(min(100cqw, 1920px) / 1440);

  /* Type. max() keeps text readable on tablets, where the
     design sizes would shrink below it. */
  --font-display: "GLF Serif", Georgia, serif;
  --font: "Commissioner", system-ui, sans-serif;
  --text-title:  calc(78 * var(--u));
  --leading-title: calc(93 * var(--u));
  --text-body:   max(16px, calc(24 * var(--u)));
  --leading-body: max(24px, calc(34 * var(--u)));
  --text-intro:  clamp(20px, calc(36 * var(--u)), 36px);
  --leading-intro: clamp(28px, calc(46.8 * var(--u)), 46.8px);
  --text-date:   calc(48 * var(--u));
  --text-place:  max(16px, calc(26 * var(--u)));
}

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

html, body { margin: 0; }

body {
  container-type: inline-size;   /* lets --u measure the page width */
  overflow-x: hidden;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font);
  font-weight: 600;                       /* Commissioner SemiBold */
  font-variation-settings: "FLAR" 100;    /* Commissioner flare axis, maxed */
  text-transform: uppercase;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

img { display: block; max-width: none; }
p, h1, h2, figure { margin: 0; }

/* Every section is a positioning box for its artwork */
.section {
  position: relative;
  max-width: 1920px;
  margin-inline: auto;
  overflow-x: clip;   /* artwork may bleed past the sides; never scroll sideways */
}
.section > * { position: relative; }   /* text stacks above artwork */

/* Decorative artwork and photos, placed in design pixels */
.art,
.photo {
  position: absolute;
  left:  calc(var(--x) * var(--u));
  top:   calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.art { height: auto; pointer-events: none; }

/* Parallax: parallax.js nudges these up and down as the page scrolls */
[data-parallax] { will-change: translate; }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(880 * var(--u));
  padding: calc(226 * var(--u)) 0 0 calc(152 * var(--u));
}
.hero__clock  { --x: 622; --y: 0;   --w: 818; aspect-ratio: 818 / 1022; }   /* live clock */
.hero__shapes { --x: 552; --y: 272; --w: 888; aspect-ratio: 888 / 770; overflow: visible; }

.hero__title { margin: 0; width: calc(400 * var(--u)); }
.hero__title img { display: block; width: 100%; height: auto; }

.hero__date {
  margin: calc(16 * var(--u)) 0 0 calc(2 * var(--u));
  color: var(--red);
  line-height: 1.2;
}
/* Dates and place: two lines, two sizes */
.hero__dates,
.hero__place { display: block; }
.hero__dates { font-size: var(--text-date); line-height: 1; }
.hero__place { font-size: var(--text-place); }

/* ---------- Intro ---------- */
.intro {
  /* min-height: calc(720 * var(--u)); */
  padding-top: calc(286 * var(--u));
  padding-bottom: min(calc(100 * var(--u)), 100px);   /* 100px at 1440, no larger */
}
.intro__rooster { --x: 0; --y: 15; --w: 412; }
.intro__deco { display: none; }   /* phones only */

.intro__text {
  width: calc(598 * var(--u));
  margin-left: calc(668 * var(--u));
  text-transform: none;
  font-size: var(--text-intro);
  line-height: var(--leading-intro);
}
/* Same size as the paragraph, only bolder */
.intro__heading {
  margin-bottom: calc(24 * var(--u));
  font-size: calc(var(--text-intro) * 4 / 3);   /* 48px at 1440 wide */
  line-height: 1.3;
  font-weight: 700;
}

/* ---------- Photo collage ---------- */
.collage { height: calc(1100 * var(--u)); }
.collage__shapes { --x: 0; --y: 30; --w: 1402; aspect-ratio: 1402 / 944; overflow: visible; }

.photo {
  aspect-ratio: var(--ratio);
  clip-path: var(--shape);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo::after {                       /* warm yellow wash over the photo */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yellow);
  opacity: 0.28;
  mix-blend-mode: screen;
}

.photo--lighthouse {
  --x: -398.8; --y: -22.8; --w: 1568.4;
  --ratio: 1568.4 / 1045.7;
  --shape: polygon(31.80% 41.66%, 32.14% 53.01%, 54.72% 93.00%, 56.63% 38.13%, 65.48% 65.46%,
                   75.88% 47.51%, 65.76% 21.96%, 81.38% 11.18%, 59.85% 7.05%, 40.95% 19.98%);
}
.photo--grounds {
  --x: 521; --y: 517.5; --w: 803;
  --ratio: 803 / 536;
  --shape: polygon(70.13% 0.02%, 89.13% 44.87%, 81.92% 97.49%, 9.60% 99.11%,
                   19.31% 33.37%, 53.19% 63.33%, 68.77% 32.07%);
}

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(2, calc(530 * var(--u)));
  column-gap: calc(32 * var(--u));
  align-items: start;
  padding: calc(90 * var(--u)) 0 calc(75 * var(--u)) calc(143 * var(--u));
  font-weight: 500;          /* Commissioner Medium */
  text-transform: none;
  /* Text stops growing at 24px on wide windows */
  font-size: min(var(--text-body), 24px);
  line-height: min(var(--leading-body), 34px);
}
.about p + p { margin-top: min(var(--leading-body), 34px); }

/* ---------- Sponsor ---------- */
.sponsor {
  padding: 0 calc(157 * var(--u)) calc(156 * var(--u)) calc(129 * var(--u));
}
.sponsor__wave { width: 100%; height: auto; }

.sponsor__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(30 * var(--u)) calc(27 * var(--u)) calc(30 * var(--u)) calc(41 * var(--u));
}
.sponsor__label { color: var(--teal); }
.sponsor__logo { width: calc(536 * var(--u)); height: auto; }

/* Hidden for now: the sponsor row and the wave above it */
.sponsor__wave:first-child,
.sponsor__row { display: none; }

/* Social links, right below the sponsor belt */
.social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  padding-top: calc(48 * var(--u));
  text-align: center;
}
.social p {
  margin: 0;
  color: var(--brown);
  text-align: center;
  text-transform: none;
}
.social__links {
  display: flex;
  gap: calc(24 * var(--u));
  margin: calc(8 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
}
.social__links a {
  display: block;
  width: max(32px, calc(48 * var(--u)));
  height: max(32px, calc(48 * var(--u)));
  color: var(--brown);
  transition: color 0.2s;
}
.social__links a:hover,
.social__links a:focus-visible { color: var(--red); }
.social__links svg { display: block; width: 100%; height: 100%; }

/* Copyright line at the very bottom */
.legal {
  margin: calc(64 * var(--u)) 0 0;
  font-size: max(12px, calc(14 * var(--u)));
  text-align: center;
  text-transform: none;
}
.legal a { color: inherit; text-decoration: underline; }
.legal a:hover,
.legal a:focus-visible { color: var(--red); }

/* ---------- Mobile (under 720px) ----------
   A single column on a 390px-wide frame: every number below is in
   mobile design px. Text sizes are clamped so a large phone held
   sideways does not get oversized type. */
@media (max-width: 719px) {
  :root {
    --u: calc(100cqw / 390);
    --gutter: calc(24 * var(--u));

    --text-title:   clamp(44px, calc(52 * var(--u)), 72px);
    --leading-title: 1.2;
    --text-date:    clamp(18px, calc(20 * var(--u)), 26px);
    --text-place:   clamp(16px, calc(16 * var(--u)), 18px);
    --text-intro:   clamp(19px, calc(20 * var(--u)), 24px);
    --leading-intro: 1.4;
    --text-body:    clamp(16px, calc(16 * var(--u)), 18px);
    --leading-body: 1.5;
  }

  /* Hero: the clock tower and its shapes fill the top right,
     the title and date sit below them */
  .hero {
    min-height: 0;
    padding: calc(495.4 * var(--u)) var(--gutter) calc(58 * var(--u));   /* 60px gap to the rooster at 402 */
  }
  .hero__clock  { --x: 46; --y: 0;   --w: 344; }
  .hero__shapes { --x: 17; --y: 114; --w: 373; }
  .hero__title { width: calc(240 * var(--u)); }
  .hero__date { margin: calc(16 * var(--u)) 0 0; }
  .hero__dates { line-height: 1.2; }

  /* Intro: the rooster above the text */
  .intro {
    min-height: 0;
    padding: calc(459 * var(--u)) var(--gutter) calc(52 * var(--u));   /* rooster height + 58 */
  }
  .intro__rooster { --x: -39.78; --y: 0; --w: 265.2; }   /* 68vw, 15% of its width off the left */
  /* Beside the rooster: 42vw, 10% of its width off the right */
  .intro__deco { display: block; --x: 242.58; --y: 0; --w: 163.8; aspect-ratio: 145 / 336; }
  .intro__text { width: auto; margin-left: 0; }
  .intro__heading { margin-bottom: calc(11.64 * var(--u)); }   /* 12px at 402 wide */

  /* Collage: the desktop composition, enlarged and cropped at both
     sides so the photos fill the width. Here --u is back to the
     1440 frame, scaled so design x 88 to 1248 spans the screen. */
  .collage {
    --u: calc(100cqw / 1160);
    margin-left: calc(-88 * var(--u));
    height: calc(1100 * var(--u));
  }
  /* The festival grounds photo is 5% larger here, around its own centre. */
  .photo--grounds { --x: 501; --y: 504; --w: 843.2; }

  /* About: one column */
  .about {
    grid-template-columns: 1fr;
    padding: calc(40 * var(--u)) var(--gutter) calc(48 * var(--u));
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
  .about__col + .about__col p:first-child,
  .about p + p { margin-top: 1.5em; }   /* one blank line, as on desktop */

  /* Sponsor: label above the logo */
  .sponsor { padding: 0 var(--gutter) calc(64 * var(--u)); }
  .sponsor__row {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--u));
    padding: calc(24 * var(--u)) 0;
  }
  .sponsor__logo { width: min(calc(240 * var(--u)), 320px); }
  .social { padding-top: calc(32 * var(--u)); }
  .legal { margin-top: calc(40 * var(--u)); }
}