/* ================================================================== *
 * The homepage.
 *
 * Loaded only by pages/home.html, after tyd.css, and it is allowed to
 * disagree with it. The marketing page argues; every screen behind the
 * login reports. They were never meant to look the same, and a single
 * stylesheet serving both meant that matching the homepage to its approved
 * design edited rules the portal depends on.
 *
 * The masthead and colophon are deliberately absent: base.html renders them
 * on every page, so they are styled once in tyd.css and the header does not
 * change as a student moves from here into their class.
 *
 * This file is the mock in marketing/mock/ with the chrome removed. Keeping
 * it a copy rather than a translation is the point — the previous approach
 * hand-carried rules across and hoisted a set of mobile overrides out of
 * their media query, so production rendered the phone layout on a desktop.
 * ================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.prose { max-width: var(--measure); }

section { padding: 4.5rem 0; }

section + section { border-top: 1px solid var(--grey-2); }

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }

h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.75rem; }

h3 { font-size: 1.125rem; }

p { margin: 0 0 1.25rem; }

a { color: var(--ink); text-underline-offset: 0.2em; }

a:hover { text-decoration-thickness: 2px; }

.lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--grey-1);
}

.label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-1);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}

.btn:hover { background: var(--paper); color: var(--ink); }

.btn--ghost { background: var(--paper); color: var(--ink); }

.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.hero { padding: 6rem 0 4rem; }

.hero h1 { max-width: 18ch; margin-bottom: 1.5rem; }

.hero__points {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem;
  max-width: var(--measure);
}

.hero__points li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--grey-3);
}

.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem 0 1rem;
}

.attribution {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey-1);
  padding-top: 2rem;
  margin-top: 3rem;
  border-top: 1px solid var(--grey-2);
}

.figures {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  margin: 0;
}

.figures div { margin: 0; }

.figures dd {
  font-family: var(--mono);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  margin: 0 0 0.35rem;
  font-variant-numeric: tabular-nums;
}

.figures dt { order: 2; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--grey-2);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  color: var(--grey-1);
  font-size: 0.875rem;
  padding-top: 0.3rem;
}

.steps h3 { margin-bottom: 0.25rem; }

.steps p { margin: 0; color: var(--grey-1); }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
}

.topics { list-style: none; padding: 0; margin: 0; max-width: 34rem; }

.topics li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--grey-2);
}

.topics span:last-child {
  font-family: var(--mono);
  color: var(--grey-1);
  font-variant-numeric: tabular-nums;
}

.instructor {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 3.5rem;
  align-items: start;
}

.instructor img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%) contrast(1.15);
}

.paytable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  max-width: 44rem;
}

.paytable td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--grey-3);
  font-size: 1.0625rem;
}

.paytable td:last-child {
  text-align: right;
  font-family: var(--mono);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.paytable tr:last-child td { border-bottom: 1px solid var(--ink); }

.footnote {
  color: var(--grey-1);
  font-size: 0.9375rem;
  max-width: var(--measure);
  margin-top: 1.5rem;
}

.firms {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--grey-1);
  line-height: 2;
  max-width: 52rem;
  margin: 1.5rem 0 0;
}

.offers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin: 2.5rem 0;
}

.offers .amt {
  font-family: var(--mono);
  font-size: 2.25rem;
  line-height: 1;
}

.offers .who {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0.5rem 0 0.75rem;
}

.offers p { margin: 0; color: var(--grey-1); font-size: 0.9375rem; }

.domains {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 44rem;
}

.domains li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--grey-3);
}

.domains span:last-child {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey-1);
  text-align: right;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  padding: 4.5rem 0;
  border-top: 1px solid var(--grey-3);
}

.split img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  display: block;
}

.split--line img {
  object-fit: contain;
  filter: none;
  max-height: 280px;
}

.plate {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.plate img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  object-position: top;
  filter: grayscale(1) contrast(1.08);
  display: block;
}

.plate div {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--grey-1);
  line-height: 1.6;
}

.plate strong { display: block; color: var(--ink); font-size: 0.875rem; }

.split h3 { margin-top: 0; }

.split p { color: var(--grey-1); max-width: 30rem; }

.split .credit {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--grey-2);
  margin-top: 0.5rem;
}

.split--flip .txt { order: 2; }

.metrics { list-style: none; padding: 0; margin: 2rem 0 0; counter-reset: m; }

.metrics li {
  counter-increment: m;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--grey-3);
}

.metrics li::before {
  content: counter(m, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey-1);
  padding-top: 0.15rem;
}

.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2.5rem;
}

.shot { border: 1px solid var(--grey-2); }

/* ------------------------------------------------------------------ *
 * Real screenshots of the platform.
 *
 * These replaced a set of hand-drawn HTML mocks. The mocks existed because
 * a screenshot of a dense screen is unreadable in a phone-width column —
 * which is true, and is why these are not simply dropped into the grid at
 * `width: 100%`. Each sits in the same scrolling plate the cutaway drawings
 * use: full height, scrolled sideways, legible at its own size rather than
 * shrunk to a smear. The plate's mobile rules are further down this file.
 *
 * `.shot .cap` still styles the caption underneath, so the two sets agree
 * about the strip below the picture; only what is above it changed.
 * ------------------------------------------------------------------ */

/* One per row, at the full measure of the page, rather than two up.
 *
 * Two up gives each card 504px, and these are 990–1153px wide. Scaled to
 * 44% the interface is still recognisable and the small print — the verdict
 * line, the complexity box, the sentence under each mark — is not, and that
 * small print is the entire reason to show a screenshot rather than a
 * drawing. At the page's full 1040px every one of them lands within ten per
 * cent of its own size, which is to say legible.
 *
 * It makes the section taller. That is the right trade: this is the part of
 * the page that shows the product actually exists. */
.shots--real {
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

.shots--real .shot {
  display: flex;
  flex-direction: column;
}

.shots--real .figure-line__plate { flex: 1; }

.shots--real img {
  display: block;
  width: 100%;
  height: auto;
  /* Screenshots of a black-on-white interface. `multiply` is what the line
     drawings use to sit on the page ground; a screenshot already carries its
     own white, and blending it makes the greys muddy. */
  mix-blend-mode: normal;
}

/* The hint belongs to the plate, not to the caption strip, so it sits inside
   the card's padding rather than against its edge. */
.shots--real .figure-line__hint { margin: 0.6rem 1rem 0.75rem; }

.shot .cap {
  border-top: 1px solid var(--grey-2);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
}

.feat {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2.5rem;
}

.feat td {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--grey-3);
  font-size: 1rem;
  vertical-align: top;
}

.feat td:first-child {
  font-family: var(--mono);
  font-size: 0.875rem;
  width: 9rem;
  padding-right: 2rem;
}

.feat td:last-child { color: var(--grey-1); }

.pull {
  font-size: 1.5rem;
  line-height: 1.4;
  max-width: 36rem;
  margin: 3rem 0 0;
  padding-left: 1.5rem;
  border-left: 2px solid var(--ink);
}

@media (max-width: 50rem) {
  .split, .instructor, .shots, .offers, .domains { grid-template-columns: 1fr; }
  .split--flip .txt { order: 0; }
  .instructor img { max-width: 16rem; }
}

/* ------------------------------------------------------------------ *
 * Additions for the second brief: hero with the mark alongside, the
 * line-drawing partitions, and the topic list.
 * ------------------------------------------------------------------ */

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 4rem;
  align-items: center;
}

.hero__mark { width: 100%; height: auto; color: var(--ink); }

/* The summary strip that replaced the rotating attribution line. */
.summary {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--grey-2);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3.5rem;
  max-width: 56rem;
}

.summary p { margin: 0; color: var(--grey-1); font-size: 0.9375rem; line-height: 1.65; }

.summary strong { color: var(--ink); font-weight: 500; }

/* Under the batch-size note, which leaves that cell short of its neighbour. */
.summary .summary__social { margin-top: 1.25rem; }
.summary__social span { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
.summary__social a { color: var(--ink); }

.summary .topics-inline {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Line drawings sit on the page rather than in a photographic frame:
   no crop, no grayscale filter, nothing behind them. */
.plate--wide img { width: 100%; height: auto; max-height: none; filter: none; }

.figure-line { margin: 0; }

.figure-line img {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
  mix-blend-mode: multiply;
}

.figure-line figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--grey-1);
  margin-top: 0.75rem;
  line-height: 1.7;
}

.systems { list-style: none; padding: 0; margin: 2rem 0 0; max-width: 40rem; }

.systems li {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--grey-3);
}

.systems span:last-child {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey-1);
  text-align: right;
  flex: 0 0 auto;
}

.letter { max-width: 34rem; }

.letter p { margin: 0 0 1.1rem; }

.letter p:last-child { margin-bottom: 0; }

.letter .sign {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--grey-1);
  margin-top: 1.75rem;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__mark { max-width: 12rem; }
  .summary { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * Second-brief revisions: a plain numbered list, a large portrait,
 * a full-width plate, and the credit that names the six programmers.
 * ------------------------------------------------------------------ */

/* The eight domains, set as given — numbered, nothing in the margin. */
.plainlist {
  margin: 1.5rem 0 0;
  padding-left: 1.35rem;
  max-width: var(--measure);
}

.plainlist li { padding: 0.4rem 0; font-size: 1.0625rem; }

/* Turing carries this section, so the portrait is set at the width of
   the column rather than as a thumbnail beside the text. */
.split img.portrait {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: fill;
  display: block;
  filter: grayscale(1) contrast(1.08);
}

/* The machine gets the full measure of the page under the argument. */
.band { margin: 0 0 4.5rem; }

.band img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.06);
}

.band figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--grey-1);
  margin-top: 0.65rem;
}

.names {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--grey-1);
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--grey-3);
}

.names strong {
  display: block;
  color: var(--ink);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* Headline-weight titles inside the partitions, for the two sections
   whose titles were written as headings rather than labels. */
.section-title {
  font-family: var(--sans);
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 0 0 1.25rem;
  max-width: 24ch;
}

/* ================================================================== *
 * Phones.
 * ================================================================== */

/* --- The aircraft drawings ------------------------------------------ *
 *
 * These are 2000–2500px technical drawings with annotation text. Fitted to
 * a 342px column they become grey texture: the Russian labels and the
 * numbered callouts land under a pixel each, so the page downloads 400KB to
 * render something nobody can read.
 *
 * So they are not fitted. On a phone each drawing is set to a fixed height
 * and allowed to be wider than the screen, inside its own scroll box — the
 * way a newspaper prints a schematic across a fold. The cutaway ends up
 * about three screens wide, which is legible, and swiping along it is a
 * better way to look at a cutaway than seeing all of it at once.
 *
 * The scroll box is a wrapper rather than the <figure>, so the caption and
 * the swipe hint stay put while the drawing moves under them. The page body
 * never scrolls sideways; only this box does.
 */
.figure-line__plate { margin: 0; }

.figure-line__hint { display: none; }

@media (max-width: 860px) {
  .figure-line__plate {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .figure-line__plate img {
    /* Every one of these has to be said. The partition rule these sit inside
       sets width, max-width, max-height and object-fit for photographs, and
       a drawing that is allowed to be wider than the screen has to opt out
       of all four rather than only the two that look relevant. */
    height: 58vh;
    width: auto;
    max-width: none;
    max-height: none;
    object-fit: fill;
  }

  /* The scroll box holds the drawing, but it does not stop the column being
     measured against it: a `1fr` track takes its minimum from the item's
     content, so the two partitions carrying a cutaway came out 909px and
     1061px wide and took the page with them — 1084px of sideways scroll on
     a 375px screen, which is the one thing the plate exists to prevent.
     min-width:0 lets the track be the column it was asked for, and the
     overflow goes back to being the box's business. */
  .split > * { min-width: 0; }

  .figure-line__hint {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-1);
    margin-top: 0.6rem;
  }

  /* Photographs are not diagrams: they carry no small print and read fine at
     column width, so they keep the partition rule's fitting behaviour. There
     is deliberately no rule for them here — an earlier one said
     `.split img { max-width: 100% }`, which also caught the drawings sitting
     inside the same partitions and quietly undid the whole idea. */

  /* Screenshots are diagrams in this respect — every one of them has small
     print that is the whole point of showing it. But they are wide and short
     where a cutaway is tall, so 58vh would crop them to a band. Held at a
     readable width instead and scrolled sideways, which is what the plate is
     for. */
  .shots { grid-template-columns: 1fr; gap: 2.5rem; }

  /* The same trap the cutaways fell into, and the same fix. A `1fr` track
     takes its minimum from its content, so a card holding an 860px image is
     measured at 860px and drags the page with it — 511px of sideways scroll
     on a 375px screen, which is the one thing the plate exists to prevent.
     min-width:0 lets the card be the column it was asked for, and the
     overflow goes back to being the plate's business.

     `.split > *` further down does this for the partitions; the shots are
     their own grid and need saying separately. */
  .shots > * { min-width: 0; }

  .shots--real .figure-line__plate img {
    height: auto;
    width: 860px;
    max-width: none;
    max-height: none;
    object-fit: fill;
  }

  /* --- Everything else ---------------------------------------------- */

  /* Two columns of a table inside 342px left 198px for a sentence and made
     the rows 186px tall. Stacked, the label reads as a heading over its own
     description, which is what it always was. */
  .feat, .feat tbody, .feat tr, .feat td { display: block; width: auto; }
  .feat tr { padding: 1.1rem 0; border-bottom: 1px solid var(--grey-3); }
  .feat tr:last-child { border-bottom: 0; }
  .feat td { border: 0; padding: 0; }
  .feat td:first-child {
    width: auto;
    padding-right: 0;
    margin-bottom: 0.4rem;
    color: var(--ink);
  }

  /* 12px reads as a quiet label on a monitor at arm's length and as small
     print in a hand. One step up, no larger — they are still labels. */
  .label { font-size: 0.8125rem; }
  .credit, .figure-line figcaption, .names { font-size: 0.75rem; }

  /* The salary rows wrap to two lines anyway at this width; giving the
     figure its own line is tidier than letting it wrap under itself. */
  .paytable td { padding: 0.7rem 0; }

  /* --- The hero ------------------------------------------------------- *
   *
   * The mark is 192px square here, sitting under the two buttons: a quarter
   * of the first screen spent redrawing the logo that is already in the
   * masthead six centimetres above it. On a monitor it balances the
   * headline across the grid; stacked on a phone it balances nothing, and
   * pushes the summary strip — which is the argument — below the fold.
   */
  .hero__mark { display: none; }

  .hero { padding: 2.5rem 0 3rem; }

  /* Both buttons at their desktop size come to 375px of a 327px column, so
     they wrap and the hero ends in a stack of two black slabs. The second
     one was never a peer of the first: it goes down the page rather than to
     the enrolment form. Set as a link it says so, and the row fits. */
  .hero .hero__actions { align-items: center; gap: 1rem; }

  /* Narrower side padding, so the pair comes to 312px and clears a 360px
     screen on one row; the tap target is set by the 44px height either way.
     Below that the row is allowed to wrap rather than be squeezed — a 320px
     screen puts the link under the button, which is still a button and a
     link, not two slabs. The label itself never breaks. */
  .hero .hero__actions .btn { padding-inline: 1.1rem; white-space: nowrap; }

  .hero .hero__actions .btn--ghost {
    border: 0;
    padding: 0;
    background: none;
    color: var(--grey-1);
    font-family: var(--mono);
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  .hero .hero__actions .btn--ghost::after { content: " \2192"; }

  /* Under the fees, though, the two are peers — enrol, or ask first — and
     there is no headline for them to sit beside. Full width and stacked is
     the easier thing to hit with a thumb. */
  #fees .hero__actions { display: grid; gap: 0.75rem; }

  #fees .hero__actions .btn { text-align: center; }

  /* --- The programme in numbers --------------------------------------- *
   *
   * Four figures in a wrapping flex row land 3 + 1 at this width, and the
   * orphan reads as a footnote to the three above it rather than the fourth
   * of a set. Two by two keeps them a set. */
  .figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  /* 72px of air above and below every rule is 144px between one section and
     the next — most of a phone screen of nothing, eleven times down the
     page. The rule already says where the break is. */
  section { padding: 3.25rem 0; }
}