/*
 * Home-page-only styles: the centred field hero, the before/after scroll flow and
 * the proof strip. That is the whole home page - hero, one argument, three doors.
 *
 * Everything the five content pages can also see lives in styles.css, because they
 * load that file and not this one.
 *
 * The liquid-glass card that used to live here is gone, and it is worth saying why
 * rather than leaving a hole. The refraction filter bent a 40px grid seen through a
 * 20px-radius card, and both of those are gone: the radius is 2px sitewide, and the
 * field is now the hero image rather than the ground running under every section.
 * A refracting card below the hero would have been a window onto blank paper - the
 * effect would still run, cost the most expensive filter on the page, and show
 * nothing. The argument it made ("before is closed, after is open to the
 * mathematics under the site") survives in two places instead: the hero, where the
 * mathematics is now the thing you land on rather than something you peep at, and
 * the split below, where the routine side is an opaque panel and the task side is
 * the paper itself.
 */

/* ==================================================================== the hero */
/*
 * Centred, and light. The field is no longer a dark image with text scrimmed over
 * it - it is a pale contour graphic sitting on the paper, the way the reference
 * puts its line-art behind a white hero. That means the headline is dark ink on
 * paper (16.3:1) and the scrim is gone entirely rather than tuned.
 */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--gutter) * 6) var(--gutter) var(--section);
  overflow: hidden;
  background: var(--paper);
  text-align: center;
}

.hero__field {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
}

/*
 * A soft vignette rather than a scrim: it fades the field out at the edges so the
 * hero joins the rest of the page instead of ending on a hard line, and lifts the
 * paper back under the centre where the headline sits.
 */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(237, 239, 243, 0.86) 0%, rgba(237, 239, 243, 0) 70%),
    linear-gradient(to bottom, rgba(237, 239, 243, 0) 55%, var(--paper) 100%);
}

.hero__inner {
  width: 100%;
  max-width: 54rem;
  margin: 0 auto;
}

.hero__title {
  font-family: var(--face-display);
  font-size: var(--t-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--ink);
  /*
   * `pretty`, not `balance`. The headline already carries a hard <br>, so balance has
   * nothing useful to do at full width and actively hurts on a phone: it evens out the
   * two halves of "Routine problems in," and leaves "in," orphaned on its own line.
   * `pretty` only pulls a word down to avoid exactly that.
   */
  text-wrap: pretty;
}

/*
 * The display clamp floors at 2.75rem, which is wider than a 390px screen can hold
 * for "Routine problems in," so the line broke and left "in," alone. Scaled here
 * rather than by lowering --t-display, which every other display heading also uses.
 */
@media (max-width: 30rem) {
  .hero__title {
    font-size: clamp(1.75rem, 7.8vw, 2.75rem);
  }
}

/*
 * The second half of the headline in blue. --accent-deep, not --accent: the brand
 * blue measures 2.60:1 on this paper, which fails even the large-text threshold,
 * and a headline is the last place to be clever about contrast.
 */
.hero__title em {
  font-style: normal;
  color: var(--accent-deep);
}

.hero__lede {
  max-width: 40rem;
  margin: 1.5rem auto 0;
  font-size: var(--t-lede);
  line-height: var(--lh-body);
  color: var(--ink-62);
}

.hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.25rem;
}

.hero__eyebrow {
  display: inline-flex;
  margin-bottom: 1.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--panel);
}

/* The scroll cue, the way the reference closes its hero. */
.hero__more {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(3rem, 7vh, 5rem);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-62);
}

.hero__more svg { animation: nudge 2.4s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* ======================================================= the modelling cycle */
/*
 * Moved to styles.css. The diagram is used by the method page, which links
 * styles.css and not this file - so for as long as these rules lived here the
 * partial rendered with no styling at all on the one page that shows it: default
 * text-anchor, so the longer labels ran out of their boxes, and the small-screen
 * fallback list visible on a desktop. A component used by a content page belongs
 * in the stylesheet every page loads.
 */

/* ============================================================== the scroll flow */
/*
 * Four before/after pairs, moved through sideways.
 *
 * Native overflow with scroll-snap rather than a JavaScript pager. A pager needs a
 * dot hunted for, only advances one step per click, and stops working the moment its
 * script fails; a scroll container answers a trackpad, a touch swipe, shift-wheel and
 * the arrow keys, and it degrades to a plain row of readable cards with no script at
 * all. tabindex="0" on the container is what gives keyboard users the arrow keys.
 */
/*
 * A stack, not a sideways scroller.
 *
 * These four pairs are the single most important thing on the site: they are the
 * whole claim, that the mathematics is unchanged and only the decisions moved. As a
 * horizontal carousel a visitor saw two and a half cards and had to discover a
 * sideways scroll to reach the rest, so three quarters of the argument was
 * effectively invisible. Vertical costs nothing but height, and height is free.
 */
.flow {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.flow__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--hairline);
  overflow: hidden;
}

@media (min-width: 640px) { .flow__card { grid-template-columns: 1fr 1fr; } }

/*
 * The material distinction that survived the glass card: the routine side is an
 * opaque panel, a closed box printed flat, and the task side is the paper itself -
 * the side that lets the ground through. Before is closed; after is not.
 */
.flow__side { padding: clamp(1.25rem, 2.5vw, 2rem); }
.flow__side--routine { background: var(--panel); }
.flow__side--task { background: var(--paper); }

.flow__label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--ink-62);
}

.flow__title {
  margin-top: 0.875rem;
  font-family: var(--face-display);
  font-size: 1.125rem;
  font-weight: var(--w-display);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.flow__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: var(--ink-72);
}


/* =================================================================== the proof */
/* Three plain columns. No numbers and no borders: the proof strip below already
   uses that shape, and repeating it twice on one page makes both read as filler. */
.does {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 768px) { .does { grid-template-columns: repeat(3, 1fr); } }

.does__title {
  font-family: var(--face-display);
  font-size: 1.25rem;
  font-weight: var(--w-display);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.does__title::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-bottom: 1rem;
  background: var(--accent-deep);
}

.does__text {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: var(--lh-body);
  color: var(--ink-72);
}

/* The quiet line for people who arrived with a participant code. */
.hero__aside {
  margin-top: 1.25rem;
  font-size: var(--t-small, 0.875rem);
  color: var(--ink-62);
}

.hero__aside a {
  color: var(--accent-deep);
  text-underline-offset: 3px;
}

.proof {
  display: grid;
  gap: 1px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: var(--hairline);
  overflow: hidden;
}

@media (min-width: 768px) { .proof { grid-template-columns: repeat(3, 1fr); } }

.proof__item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.proof__item:hover { background: var(--accent-wash); }

.proof__n {
  font-family: var(--face-display);
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: var(--w-display);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

.proof__n sup {
  font-size: 0.24em;
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  vertical-align: super;
  margin-left: 0.25em;
  color: var(--ink-62);
}

.proof__t {
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink);
}

.proof__go {
  margin-top: auto;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* The proof strip is the last thing before the footer, so it does not need a full
   section's worth of padding under it - that reads as a dead screen. */
#proof { padding-bottom: clamp(3rem, 6vw, 5rem); }