/* ==========================================================================
   ÄÄNIAALTO — shared stylesheet
   --------------------------------------------------------------------------
   The site is a fixed 1728px-wide desktop design (matching the Figma file).
   Every page is a ".stage" canvas of that width, centered on screen, and the
   elements inside are positioned with the same x/y coordinates as in Figma.
   ========================================================================== */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
  --blue:   #1924b9;  /* brand blue        */
  --orange: #f55000;  /* brand orange      */
  --white:  #ffffff;
  --grey:   #eaeaea;  /* light footer band */
  --black:  #000000;

  --font-display: "Anton", sans-serif;   /* big all-caps headings   */
  --font-body:    "Inter", sans-serif;   /* sub-headings + body text */

  --design-width: 1728px;
}

/* 2. Reset & base ----------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--blue);      /* brand blue fills any area around/below the page */
  font-family: var(--font-body);
  color: var(--white);
  overflow-x: hidden;           /* no sideways scroll — the stage is scaled to fit */
}

img { display: block; max-width: none; }
a   { color: inherit; text-decoration: none; }

/* 3. The page canvas -------------------------------------------------------- */
/* Each page wraps its content in <div class="stage">. It is exactly the
   design width and clips anything that bleeds past the edges (like the big
   background textures), just as the Figma frame does. */
.stage {
  position: relative;
  width: var(--design-width);
  margin: 0 auto;
  overflow: hidden;
  background: var(--blue);
}

/* 4. Shared header ---------------------------------------------------------- */
/* ÄÄNIAALTO wordmark on the left, navigation on the right. Sits at the top of
   every page (Figma node "header", top:46 / left:35). */
.site-header {
  position: absolute;
  top: 46px;
  left: 35px;
  width: 1671px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--orange);
}
.site-header .brand { white-space: nowrap; }
.site-header nav {
  display: flex;
  gap: 52px;
}
.site-header nav a { transition: opacity 0.15s ease; }
.site-header nav a:hover,
.site-header nav a.is-active { opacity: 0.55; }

/* 5. Shared blended background textures ------------------------------------- */
/* The hero "flow" and lower "light" photos use mix-blend-mode: exclusion so
   they react with the blue background and the text underneath — this is what
   creates the psychedelic look. pointer-events:none keeps links clickable. */
.blend {
  position: absolute;
  mix-blend-mode: exclusion;
  pointer-events: none;
  object-fit: cover;
}

/* 6. (Footer removed — each page now closes with the Ääniaalto wordmark logo.) */

/* ==========================================================================
   HOMEPAGE  (index.html)
   ========================================================================== */
.home { height: 3977px; }   /* ends at the lower photo section (footer removed) */

/* Hero wordmark "Ääniaalto X / 13-14.6" (node 2:18) */
.home-logo  { position: absolute; left: 503px; top: 348px; width: 792px; }

/* "FESTIVAL OF AUDIOVISUAL ODDITIES" (node 2:16) */
.home-oddities {
  position: absolute;
  left: 604px; top: 828px; width: 523px;
  text-align: center;
  font-weight: 600;
  font-size: 24px;
  line-height: 35px;
}

/* "SMOOTH ALIENATION" in the hero (node 2:17) */
.home-smooth {
  position: absolute;
  left: 663px; top: 932px; width: 402px;
  text-align: center;
  font-weight: 900;
  font-size: 48px;
  line-height: 44px;
}

/* Big hero texture, blended over the header + logo + titles (node 2:66) */
.home-flow { left: -1128px; top: -496px; width: 3985px; height: 2239px; }

/* Intro paragraph, crisp white over the texture (node 2:67) */
.home-intro {
  position: absolute;
  left: 334px; top: 1203px; width: 1060px;
  text-align: center;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
}

/* "register here" link below Free of charge */
.home-register {
  color: var(--orange);
  font-weight: 900;
  font-size: 48px;
  line-height: 44px;
  transition: opacity 0.15s ease;
}
.home-register:hover { opacity: 0.7; }

/* Theme heading block on the solid-blue section (node 2:65) */
.home-theme {
  position: absolute;
  left: 497px; top: 1889px; width: 734px;
  text-align: center;
  font-weight: 900;
  font-size: 48px;
  line-height: 44px;
}

/* Two body columns (nodes 2:13 / 2:14) — set in Inter to match body text */
.home-col {
  position: absolute;
  top: 2349px; width: 777px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
}
.home-col p + p { margin-top: 1em; }
.home-col-left  { left: 46px; }
.home-col-right { left: 897px; }

/* Second wordmark, lower on the page (node 2:68) */
.home-logo-2 { position: absolute; left: 503px; top: 3369px; width: 792px; }

/* Lower "light" texture, blended (node 2:114) */
.home-light { left: -147px; top: 2969px; width: 2023px; height: 1008px; }

/* (no footer — the lower photo + wordmark are the closing section) */


/* ==========================================================================
   SCHEDULE  (schedule.html)
   ========================================================================== */
.schedule { height: 4650px; }   /* ends just below the wordmark (footer removed) */

/* The grey day-band is opaque, so lift the header above it. (The homepage
   keeps the header un-layered on purpose, so its texture can blend over it.) */
.schedule .site-header { z-index: 5; }

/* Light grey bands behind the day titles (nodes 2:199 / 2:171) */
.sch-band {
  position: absolute;
  left: 0;
  width: var(--design-width);
  background: var(--grey);
}
.sch-band-sat { top: 0;      height: 930px; }
.sch-band-sun { top: 2088px; height: 804px; }

/* "SATURDAY" / "SUNDAY" — big blue display titles (nodes 2:201 / 2:172) */
.sch-title {
  position: absolute;
  width: 1080px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 180px;
  line-height: 1;
  color: var(--blue);
}
.sch-title-sat { left: 299px; top: 283px; }
.sch-title-sun { left: 272px; top: 2264px; }

/* Warped "schedule" lettering laid over the titles (nodes 2:202 / 2:175) */
.sch-word { position: absolute; }
.sch-word-sat { left: 390px; top: 409px;  width: 886px; }
.sch-word-sun { left: 363px; top: 2350px; width: 886px; }

/* Day photos — blended over the titles (nodes 2:213 / 2:173) */
.sch-photo-sat { left: 129px; top: 417px;  width: 1118px; height: 745px; }
.sch-photo-sun { left: 614px; top: 2557px; width: 1035px; height: 690px; }

/* The two performance lists. They sit on different x to match the design:
   Saturday is shifted right, Sunday is shifted left. */
.sch-list { position: absolute; }
.sch-list-sat { left: 511px; top: 1071px; width: 1086px; }
.sch-list-sun { left: 128px; top: 3101px; width: 1080px; }

/* One row = a small time above a big artist name. The dividing rule sits at
   the BOTTOM of the name, and the gap above the time equals the gap between
   the time and the name. text-box-trim makes the line boxes hug the glyphs,
   so those two gaps read as visually equal (the technique the Figma file uses). */
.sch-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 24px;                       /* gap: rule above → time      */
  border-bottom: 2px solid var(--white);   /* rule at the name's bottom   */
}

.sch-time {
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 24px;                     /* gap: time → name (same size) */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.sch-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Closing wordmark logo (node 2:122) */
.sch-logo { position: absolute; left: 503px; top: 4183px; width: 792px; }


/* ==========================================================================
   ARTISTS  (artists.html)
   ========================================================================== */
.artists { height: 7300px; }   /* room for the closing wordmark (footer removed) */

/* Yellow/blue texture background, blended over the whole page (node 2:240).
   The blend layer is kept to stage size (so the browser doesn't allocate a
   giant compositing layer); the oversized source image sits inside it,
   positioned to reproduce the exact crop from Figma. */
.art-bg {
  position: absolute;
  left: 0; top: 0;
  width: var(--design-width); height: 7300px;
  overflow: hidden;
  mix-blend-mode: exclusion;
  pointer-events: none;
}
.art-bg img {
  position: absolute;
  left: -7071px; top: -5626px;
  width: 15430px; height: 22454px;
  max-width: none;
}

/* Artist names — Anton, white, all-caps. Each name's position is set inline
   (it's a free scatter, so keeping x/y next to the element reads clearest). */
.art-name {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
}
.art-name.multi { line-height: 50px; }   /* stacked multi-line names */

/* The photos themselves reuse the shared .blend rule (exclusion + cover);
   only their position/size is set inline per artist. */

/* Closing wordmark logo — added for consistency with the other pages,
   centred and laid over the texture (reuses logo.webp) */
.art-logo { position: absolute; left: 468px; top: 6850px; width: 792px; }


/* ==========================================================================
   CONTACT  (contact.html)
   ========================================================================== */
.contact { height: 1268px; }   /* blue background inherited from .stage */

/* Email + social handle, centred (node 24:57) */
.contact-info {
  position: absolute;
  top: 560px;
  left: 50%;
  transform: translateX(-50%);
  width: 734px;
  text-align: center;
  font-weight: 900;                 /* Inter Black */
  font-size: 48px;
  line-height: 44px;
  color: var(--white);
}
.contact-info p + p { margin-top: 44px; }   /* the blank line between the two */
.contact-info a { color: var(--orange); transition: opacity 0.15s ease; }
.contact-info a:hover { opacity: 0.6; }

/* Body text paragraph below contact info */
.contact-body {
  position: absolute;
  top: 354px;
  left: 50%;
  transform: translateX(-50%);
  width: 734px;
  text-align: center;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  color: var(--white);
}

/* Closing wordmark logo (node 24:10) */
.contact-logo { position: absolute; left: 468px; top: 780px; width: 792px; }