/*
 * The redesign: tall pictures, few words, and the mascot doing the talking.
 *
 * Helgi, 2026-09-17: "i feel like a full redesign of the website is in order.
 * I hate it." Asked what was worst: "its just boring. text everywhere, too many
 * periods (.) and not enough character and its just bleh. maybe use meshy and
 * incorporate our mascot somewhere idk".
 *
 * THE MASCOT ALREADY EXISTED and nothing on the website used him. marketing/
 * holds a finished character: a stone-grey Icelandic troll in a lopapeysa, a
 * canonical render, a character sheet with three expressions, and seven film
 * stills that between them tell the whole product story. An exhausted operator
 * at his desk at eleven at night. Vaki at a wall of old monitors answering in
 * every language. The guest who got an answer. So no new art was commissioned
 * and no 3D generator was paid: the site is built around what was already made.
 *
 * WHY BANDS RATHER THAN A LONG COLUMN. Every one of those stills is 9:16.
 * Cropping a portrait into a full-bleed banner throws away the picture and
 * leaves a letterbox, so the page is built the other way round: full-height
 * pictures beside very few words, alternating side. It suits the source, it
 * gives the page a rhythm it did not have, and on a phone it stacks into
 * picture, words, picture, words, which is how a phone wants to read anyway.
 *
 * WHAT THIS FILE DOES NOT TOUCH. The nav, the language row, the buttons, the
 * price tiers and the FAQ all still come from vertical.css. This is layout for
 * the new sections only, loaded after it, so a mistake here cannot take the
 * navigation or the pricing table with it.
 */

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

/*
 * Type first, picture second, and the type is allowed to be enormous.
 *
 * clamp() rather than breakpoints: the heading is sized against the viewport so
 * it fills the same proportion of a phone and a desktop, which is most of what
 * makes a page look designed rather than assembled.
 */
.band-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  /* The three verticals sit in their own full-width row at the top. They have
     to live INSIDE the hero: tests/site-verticals.test.ts holds that, because
     outside it they end up at a different height on each of the three pages,
     which is what they used to do and what that row was built to stop. */
  grid-template-rows: auto 1fr;
  align-items: stretch;
  /* The language bar and the three verticals sit above this, so a plain 92vh
     pushed the headline below the middle of the fold and left a screen of dead
     black above it. Measured on a 900px viewport: 167px is spoken for before
     the hero starts. */
  min-height: min(calc(100svh - 72px), 880px);
  background: var(--ground);
  position: relative;
}
.band-hero > .verticals { grid-column: 1 / -1; }
.band-hero .say {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 6vw, 96px);
  padding-right: clamp(20px, 4vw, 64px);
}
.band-hero h1 {
  font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(2.3rem, 4.4vw, 4.1rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0.16em 0 0.34em;
  text-wrap: balance;
}
.band-hero .standfirst {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 34ch;
  margin: 0 0 1.8rem;
}
.band-hero .eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--key);
  margin: 0;
}

/* The picture, bled to the edge of the page on its own side. */
.band-hero .shot {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}
/*
 * TAKEN OUT OF THE LAYOUT, and that is the whole reason the hero has a height.
 *
 * `height: 100%` against a parent whose height is itself decided by its
 * contents resolves to nothing, so the image fell back to its intrinsic size.
 * The source is 1536x2752, so at a 684px column it asked for 1226px of height,
 * the grid row obeyed, and the hero came out 1354px tall on a 900px screen with
 * the headline pushed below the fold. Measured, because on screen it looked
 * like the min-height rule was simply not applying.
 *
 * Absolute positioning means the picture contributes no height at all and the
 * row is sized by the words and by min-height, which is what was intended.
 */
.band-hero .shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source is 1536x2752 and the mascot stands in the lower third of it, so
     a centred crop is a photograph of sky. */
  object-position: center 72%;
  display: block;
}
/*
 * A wash toward the type side so the seam between picture and page is a fade
 * rather than a hard edge. Left to CSS rather than baked into the file, the
 * same decision the hero photographs were given in 3df5d06: the picture stays
 * whole and how far it darkens is one line anybody can change.
 */
.band-hero .shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ground) 0%, rgba(0, 0, 0, 0) 38%);
  pointer-events: none;
}

/* ------------------------------------------------------------- the bands */

/*
 * One picture, one thought. The picture is tall, the words are few, and the
 * side alternates so the eye is pulled across the page rather than down one
 * gutter. `.band.flip` puts the picture on the left.
 */
.band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 72px);
  padding: clamp(48px, 9vw, 140px) clamp(20px, 5vw, 90px);
  position: relative;
}
.band.flip .shot { order: -1; }
.band .shot {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.band .shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.band .say { max-width: 46ch; }
.band h2 {
  font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.band p {
  font-size: clamp(1.02rem, 1.25vw, 1.18rem);
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 1rem;
}
.band .kicker {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--key);
  margin: 0 0 0.9rem;
}

/* A band that sits on the raised surface, to break the run of dark. */
.band.lift { background: var(--surface); }

/*
 * The one number worth shouting. Used once per page at most: a figure this
 * size stops being emphasis the second there are two of them.
 */
.band .huge {
  font-family: var(--display, "Bricolage Grotesque", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--key);
  margin: 0 0 0.1em;
  display: block;
}

/* --------------------------------------------------------------- phones */

@media (max-width: 860px) {
  .band-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Picture first on a phone: it is the thing that makes somebody keep
     scrolling, and a screen of type above it would not. */
  .band-hero .shot {
    order: -1;
    aspect-ratio: 4 / 5;
    max-height: 62vh;
  }
  .band-hero .shot::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--ground) 100%);
  }
  .band-hero .say { padding: 28px 20px 40px; }

  .band {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 56px 20px;
  }
  .band.flip .shot { order: 0; }
  .band .shot { aspect-ratio: 4 / 5; }
  .band .say { max-width: none; }
}

/* Somebody who asked their machine for less movement gets a still page, and
   the shadows come down too: a heavy drop shadow is motion's cousin. */
@media (prefers-reduced-motion: reduce) {
  .band .shot { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
}

/* -------------------------------------------------------- a band with no picture

 * "i could never use these pictures mate theyre very ai" (2026-09-17). The
 * generated stills came straight back out, and rather than fill the hole with
 * something else chosen without him, a band with no picture is simply one
 * column: bigger type, centred measure, and room around it.
 *
 * This is not a placeholder. A type-led band between two picture bands is a
 * change of pace the page wants anyway, and it is the layout that survives
 * whatever we end up putting back.
 */
.band.solo {
  grid-template-columns: minmax(0, 62ch);
  justify-content: center;
  text-align: left;
  padding-block: clamp(56px, 10vw, 150px);
}
.band.solo .say { max-width: none; }
.band.solo h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
.band.solo p { font-size: clamp(1.08rem, 1.4vw, 1.3rem); max-width: 52ch; }

/* ------------------------------------------------------- smooth scrolling

 * Only once site/anim.js has actually created the smoother. The class is added
 * by JavaScript, not assumed by the stylesheet, so a load where the plugin is
 * missing leaves an ordinary sticky bar above an ordinary page instead of a
 * fixed bar sitting on top of the first paragraph.
 */
.smoothing nav { position: fixed; left: 0; right: 0; top: 0; }
.smoothing #smooth-wrapper { position: fixed; inset: 0; overflow: hidden; }

/* A list that is a list of statements, not a bulleted list. Used on the
   homepage's "what happens next", where three bullets read as small print and
   three lines read as three things. */
.band .plain{list-style:none;margin:0 0 1.2rem;padding:0}
.band .plain li{font-size:clamp(1.05rem,1.3vw,1.24rem);line-height:1.55;
                color:var(--ink);padding:14px 0;border-bottom:1px solid var(--hairline)}
.band .plain li:first-child{border-top:1px solid var(--hairline)}

/* The three cards inside a band keep their row, because three short parallel
   things are the one shape a row of cards is actually right for. */
.band .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
             gap:14px;margin-top:22px}
@media (max-width:860px){ .band .cards{grid-template-columns:1fr} }

/*
 * A FIGURE THAT IS A PHRASE, not a numeral.
 *
 * `.huge` is for "13". The homepage's equivalent line is "About 2.5 million ISK
 * a month", which is a sentence, and a sentence at six rem is not emphasis, it
 * is a wall. Large enough to be the first thing read in its band, small enough
 * to still be a sentence.
 */
.band .figure{
  font-family:var(--display,"Bricolage Grotesque",system-ui,sans-serif);
  font-weight:800;
  font-size:clamp(1.5rem,2.6vw,2.3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--key);
  margin:0 0 .5em;
  max-width:20ch;
}