/* --- Case study pages -------------------------------------------------------

   The two case studies (/case-studies/burger-king/ and
   /case-studies/hungarian-state-treasury/) share this one stylesheet; only
   the section colours differ, and those come in through the two modifier
   classes at the bottom.

   The layout differs from the homepage in one structural way: the homepage
   grid is LEFT-ALIGNED and hugs the outer margin from 1024, while a case
   study is a CENTRED reading column. Figma: the hero content sits at x=249 in
   a 1280 frame and is 782 wide — (1280 − 782) / 2 = 249 exactly. So this file
   centres its own containers instead of reusing the homepage tracks. The
   footer is the exception: it keeps the full 1184 band at the outer margin,
   the same as the homepage, and reuses css/footer.css wholesale. */

/* --- Hero ---------------------------------------------------------------- */

/* 792px tall in both Figma frames, with the content block vertically centred
   (desktop: content is 392 tall at y=200, and (792 − 392) / 2 = 200; mobile:
   604 at y=94, (792 − 604) / 2 = 94). min-height rather than height, so a
   longer intro can never be clipped. */
.cs-hero {
  --cs-nav-height: 4.25rem;         /* 68px: 24 padding + 20 icon + 24 padding */

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 49.5rem;              /* 792px */
  /* The block padding clears the absolutely positioned nav. 48 would do
     while the content is short, but once it outgrows the hero the centred
     block stops short of the nav: measured at 320px, the title's first line
     ran 20px up under the back arrow. Symmetric on purpose — with equal
     padding the centred content lands exactly where Figma puts it (y=200 at
     1280), which an asymmetric pair shifted by 10px. */
  padding: var(--cs-nav-height) var(--container-pad);
}

/* --- Hero navigation ----------------------------------------------------- */

/* 68px tall, not the homepage's 96: 24 padding + the 20px icon + 24 padding.
   Absolute, so it does not take height off the vertically centred content —
   the hero's block padding is what keeps the two from colliding. */
.cs-nav {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: var(--cs-nav-height);
  padding-inline: var(--container-pad);
}

.cs-nav__back {
  position: relative;
  display: inline-flex;
  color: currentColor;
}

.cs-nav__back svg {
  display: block;
}

/* The icon is 20px, well under the 44px minimum for a touch target, so an
   invisible 48px box is stretched over it — the same device the homepage uses
   for its chevron and copy button. */
.cs-nav__back::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 3rem;
  height: 3rem;
  translate: -50% -50%;
}

/* --- Hero content -------------------------------------------------------- */

.cs-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: var(--cs-measure);
}

/* The title walks the same Display steps as the homepage hero (36 → 44 → 54)
   through --role-hero-*. Figma specifies Display (57) here, but this project
   deliberately runs a 36/44/54 scale — see the note in tokens.css — and 54
   shares the 64px leading with 57, so the step lands where the design put it. */
.cs-hero__title {
  font-family: var(--font-display);
  font-size: var(--role-hero-size);
  line-height: var(--role-hero-leading);
  letter-spacing: var(--role-hero-tracking);
  font-weight: var(--role-hero-weight);
  text-wrap: pretty;
}

.cs-hero__year {
  font-size: var(--title-16-size);
  line-height: var(--title-16-leading);
  letter-spacing: var(--title-16-tracking);
}

.cs-hero__intro {
  font-size: var(--title-20-size);
  line-height: var(--title-20-leading);
  letter-spacing: var(--title-20-tracking);
}

/* Role and Services. A description list is the honest markup for label/value
   pairs; the rows are div-wrapped so each dt/dd stays together as one flex
   item. Two equal columns from 64rem, stacked below it. */
.cs-hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  font-size: var(--title-16-size);
  line-height: var(--title-16-leading);
  letter-spacing: var(--title-16-tracking);
}

.cs-hero__meta > div {
  flex: 1 1 0;
  min-width: 0;
}

.cs-hero__meta dt {
  font-weight: var(--weight-bold);
}

.cs-hero__meta dd {
  margin: 0;
}

/* --- Body ---------------------------------------------------------------- */

/* Light reading section on the page's own dark base — the same arrangement as
   the homepage bio, and the reason that one carries its own background too. */
.cs-body {
  background: var(--color-bg);
  color: var(--color-text);
  /* The outer margin lives here, not on __inner: --cs-measure-wide is the
     CONTENT width Figma specifies (781), so padding inside that box would eat
     into it and the images would come out 96px narrow. Measured before the
     fix: 685 instead of 781. The hero already does it this way. */
  padding: var(--space-48) var(--container-pad);
}

.cs-body__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-72);
  width: 100%;
  max-width: var(--cs-measure-wide);
  margin-inline: auto;
}

/* Heading plus one or two paragraphs, 24 apart (Figma: heading 0–32, first
   paragraph from 56, second from 208 — a uniform 24 gap). */
.cs-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  max-width: var(--cs-measure-text);
}

.cs-block__heading {
  font-size: var(--title-24-size);
  line-height: var(--title-24-leading);
  letter-spacing: var(--title-24-tracking);
  font-weight: var(--title-24-weight);
}

.cs-block p,
.cs-block__list {
  font-size: var(--title-20-size);
  line-height: var(--title-20-leading);
  letter-spacing: var(--title-20-tracking);
}

/* A bulleted alternative to a run-on paragraph, for a block that enumerates.
   The markers sit outside so the text edge stays flush with the paragraphs
   above it, and the indent is one --space-24 rather than the browser's 40. */
.cs-block__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-inline-start: var(--space-24);
}

/* --- Body images --------------------------------------------------------- */

/* The images run wider than the text — the full container, not the 580 text
   measure. 3:2, fixed by aspect-ratio rather than by the file's own height,
   so the clip-path reveal has a stable box to animate against and nothing
   reflows when the picture arrives. */
.cs-figure {
  width: 100%;
  margin: 0;
}

.cs-figure__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.cs-figure__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Measures ------------------------------------------------------------ */

/* Mobile: everything is full width inside the outer margin. The three
   measures only diverge from 64rem, which is where the homepage switches its
   column widths too. */
:root {
  --cs-measure: 100%;
  --cs-measure-wide: 100%;
  --cs-measure-text: 100%;
}

@media (width >= 64rem) {
  .cs-hero__meta {
    flex-direction: row;
  }

  :root {
    /* Figma: hero content 782, body container 781, text column 580. The
       first two are the 8-column track and the third the 6-column one, so
       they are taken from the grid tokens rather than typed in as pixels —
       --w-8-max is 781.3 and --w-6-max is 580. */
    --cs-measure: var(--w-8-max);
    --cs-measure-wide: var(--w-8-max);
    --cs-measure-text: var(--w-6-max);
  }
}

/* --- Section colours ----------------------------------------------------- */

/* Both match the matching works section on the homepage, so arriving from
   there feels continuous. Burger King is dark-on-orange, the Treasury
   light-on-teal — the same contrast decision the homepage sections make. */
.cs-hero--bk {
  background: var(--accent-bk);
  color: var(--grey-12);
}

.cs-hero--mak {
  background: var(--accent-mak);
  color: var(--grey-98);
}

/* --- Canvas colour (iOS rubber-band) -------------------------------------

   iOS Safari paints the strip above and below the page with the CANVAS
   background, which comes from the root element — so this is what shows when
   the page is pulled past either end. On a case study the hero is a colour
   and the footer is #1F1F1F, and the canvas takes only one value at a time,
   so js/main.js moves it with the section on screen: the hero owns it at the
   top of the page, the footer at the bottom.

   These rules are the value for the first paint, before that script runs. A
   page always opens at the top, so the hero's colour is the right starting
   point.

   The class sits on <html> itself, and it has to: the first version keyed off
   :root:has(.cs-hero--bk), which cannot match until the body has been parsed
   and the hero exists. Measured with a probe that reads the root's computed
   background from a script in the <head>: #1F1F1F with :has(), the hero's
   colour with the class. That early value is what iOS appears to sample for
   the status bar strip — it stayed #1F1F1F on a real iPhone while everything
   measurable after load was already correct. (The engine also defers :has()
   invalidation to the end of parsing, so even a reading taken right after the
   hero still came back #1F1F1F.)

   body takes the same colour, because iOS has not always painted that strip
   from the root: some versions use body's background instead. Setting both
   leaves nothing to guess at.

   Nothing inside the page changes. Measured on the live Burger King page, the
   three bands — hero, .cs-body, .site-footer — each paint their own colour
   and together cover 0 to 5160 of a 5164-tall document, so body's own
   background is never visible to the reader. (That is NOT true of the
   homepage, where <main> is transparent and the bio sits on the body colour,
   which is why these rules are scoped to the case studies.) */
.cs-bk,
.cs-bk body {
  background-color: var(--accent-bk);
}

.cs-mak,
.cs-mak body {
  background-color: var(--accent-mak);
}