/* ==========================================================================
   home.css — the Home (docs/home-concept.md, prototype docs/home-wireframe.html).
   Hero with slots, 01 Hello, 02 three cards that overlap, 03 the kerning band.
   Loaded on every page (Barba keeps one <head>), after shell.css.

   Units: inside .home, 1em is the prototype's em (the site's em x --shell-k), so the
   spec's sizes are used as written at every breakpoint. Column math uses --about-col
   and --about-pad, which are absolute. The column lines come from the shell overlay:
   nothing here draws its own on paper.
   ========================================================================== */

.home {
  /* "WALK PAST." + a gap fills exactly 10 of the 12 columns (see the hero below), unless the window is too
     short for that: then the three lines (2.58 of their em), the header, the gaps and the lead fit in the
     first screen and the title simply stops short of the right edge. Resolved on the title (parent em). */
  --home-hero: min(19.1em, calc((81svh - var(--home-header) - 5em) / 2.58));
  --home-statement: 4em;
  --home-body-l: 2.1em;
  --home-label: 0.95em;
  --home-header: 72px; /* the fixed header bar (its height does not scale) */
  --home-rule: color-mix(in srgb, var(--dark-brown) 22%, var(--sand));

  font-size: calc(1em * var(--shell-k));
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .home {
    --home-hero: min(13.2em, calc((81svh - var(--home-header) - 5em) / 2.58));
    --home-statement: 3.4em;
    --home-body-l: 1.8em;
    --home-label: 1em;
    --home-header: 60px;
  }
}

@media screen and (max-width: 767px) {
  .home {
    /* Four lines on phones (WALK / PAST.): "SCROLL." (3.66 of the type's em) runs the full six columns, so the
       type is as big as the width allows. The three windows move out of the type into a row below it. */
    --home-hero: calc(5.92 * var(--about-col) / 3.66);
    --home-statement: 1.95em;
    --home-body-l: 1.2em;
    --home-label: 0.72em;
    --home-header: 60px;
  }
}

/* --- Shared -------------------------------------------------------------------------------- */
.home-section {
  position: relative;
  padding-block: 18vh;
}

.home-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--about-cols), minmax(0, 1fr));
  padding-inline: var(--about-pad);
}

.home-label {
  margin: 0;
  font-family: "Office Code Pro", monospace;
  font-size: max(10px, var(--home-label));
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-label__num {
  margin-right: 0.9em;
  opacity: 0.66; /* the spec's 40% is 2.5:1 on paper; 66% clears 4.5:1 on paper and on every case tone */
}

.home-statement {
  margin: 0;
  font-size: var(--home-statement);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: pretty;
}

.home-body-l {
  margin: 0;
  font-size: var(--home-body-l);
  line-height: 1.18;
  letter-spacing: -0.025em;
}

/* Placeholder art until the real photos arrive: a tone and the outline of the surface it stands for */
.home-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--tone, var(--dark-brown));
  background-image:
    radial-gradient(
      60% 55% at 50% 38%,
      rgb(255 255 255 / 14%),
      transparent 70%
    ),
    radial-gradient(70% 45% at 50% 105%, rgb(0 0 0 / 45%), transparent 70%);
}

/* Real work inside a placeholder layer (hero slots) or a card: it covers its frame, the tone shows while it loads */
.home-ph--img > img,
.home-card__image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-ph i {
  display: block;
  border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent);
}

.home-ph[data-surface="screen"] i {
  width: 30%;
  aspect-ratio: 9 / 19;
  border-radius: 0.9em;
}

.home-ph[data-surface="screen"][data-form="web"] i {
  width: 72%;
  aspect-ratio: 16 / 10;
  border-radius: 0.2em;
}

.home-ph[data-surface="print"] i {
  width: 56%;
  aspect-ratio: 85 / 55;
  background-color: color-mix(in srgb, var(--sand) 10%, transparent);
  box-shadow: 0.6em 0.8em 0 -0.1em rgb(0 0 0 / 18%);
  transform: rotate(-6deg);
}

.home-ph[data-surface="print"][data-form="poster"] i {
  width: 40%;
  aspect-ratio: 5 / 7;
  transform: rotate(3deg);
}

.home-ph[data-surface="space"] {
  place-items: end center;
}

.home-ph[data-surface="space"] i {
  width: 70%;
  height: 46%;
  border-bottom: 0;
  border-radius: 0.3em 0.3em 0 0;
}

/* --- 1. Hero --------------------------------------------------------------------------------
   Three lines of caps that never wrap, with photo windows set inside the type. Locked to the grid:
   the type size is set so "WALK PAST." and a small gap fill 10 columns and its slot the last two, so
   the title runs edge to edge; every slot starts and ends on a column line (HOLD.'s at c7, SCROLL.'s at
   c3 with the word starting on c5's line). Phones: the same on 6 columns (c4, c2, c6).
   The words are measured in the type's own em (HOLD. 2.63, SCROLL. 3.66, WALK PAST. 4.94): a change of
   copy or typeface means new sizes here.                                                        */
.home-hero {
  padding-block: calc(var(--home-header) + 9vh) 12vh;
}

.home-hero__title {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--home-hero);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

.home-hero__line {
  position: relative;
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.home-hero__line--indent {
  margin-left: calc(2 * var(--about-col));
  padding-left: calc(
    2 * var(--about-col) + 0.12em
  ); /* the slot, then the word */
}

/* A word in its mask (the intro lifts it) */
.home-word {
  display: inline-block;
  margin: -0.1em -0.12em -0.08em -0.05em; /* room all round for the tracking and the accents, taken back */
  padding: 0.1em 0.12em 0.08em 0.05em;
  overflow: hidden;
  vertical-align: top;
}

.home-word > span {
  display: inline-block;
}

/* Photo slot: cap-height tall, exactly two columns wide (one on phones), placed on the column lines */
.home-slot {
  --at: 0; /* columns from the start of its line */

  position: absolute;
  top: 0.1186em; /* sits on the baseline, as the inline slot did */
  left: calc(var(--at) * var(--about-col));
  display: block;
  width: calc(2 * var(--about-col));
  height: 0.7em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  vertical-align: baseline;
  cursor: pointer;
}

.home-hero__line:nth-child(1) .home-slot {
  --at: 6;
}

.home-hero__line:nth-child(3) .home-slot {
  --at: 10;
}

.home-slot .home-ph i {
  scale: 0.55;
}

/* Static state: the first application shows, the rest wait under it (js/home/slots.js cycles them) */
.home-slot .home-ph:first-child {
  z-index: 1;
}

.home-mark {
  position: relative;
  display: inline-block;
  isolation: isolate;
  vertical-align: top;
}

/* The underline (images/underlines/underline-03, a long sweep with one pass back) sits under "PAST.", just
   below the baseline (it never crosses the letters), from the P to the period. Shared styles: .mz-underline. */
.home-mark .mz-underline {
  left: -1%;
  top: calc(100% - 0.005em);
  width: 102%;
}

.home-hero__sub {
  align-items: end;
  row-gap: 1.4em;
  margin-top: 6vh;
}

.home-hero__cue {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  gap: 0.8em;
  align-items: center;
}

.home-hero__cue i {
  width: 1px;
  height: 2.4em;
  background-color: currentcolor;
  transform-origin: 50% 0;
}

.home-hero__lead {
  grid-column: 7 / 12;
  grid-row: 1;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .home-hero__lead {
    grid-column: 6 / 13;
  }
}

/* Tablet held upright (768 to 991 wide, taller than wide): the type already runs edge to edge, so the screen is
   mostly empty height. The hero becomes the first screen, the title a little lower, the lead and the cue at its
   foot: nothing floats in the middle (the phones do the same below). */
@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  .home-hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-block: calc(var(--home-header) + 12vh) 5vh;
  }

  .home-hero > .home-grid:first-child {
    flex: none;
  }

  .home-hero__sub {
    margin-top: auto;
    padding-top: 8vh;
  }
}

@media screen and (max-width: 767px) {
  /* The hero is the first screen: the title and its three windows at the top, the lead and the cue at the foot.
     The windows are 2 columns wide, 4:5, in a row under the type (print, screen, space: left to right, as the
     words read). They sit on the column lines. */
  .home-hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    padding-block: calc(var(--home-header) + 4vh) 4vh;
  }

  .home-hero > .home-grid:first-child {
    flex: none;
  }

  .home-hero__title {
    position: relative;
    /* room for the row of windows (2.5 columns tall) and a gap above it */
    padding-bottom: calc(3 * var(--about-col));
    --win: calc(2 * var(--about-col));
  }

  .home-hero__sub {
    margin-top: auto;
    padding-top: 5vh;
  }

  .home-hero__line--indent {
    margin-left: 0;
    padding-left: 0;
  }

  /* WALK / PAST.: the third line breaks after its first word */
  .home-hero__line:nth-child(3) {
    white-space: normal;
  }

  .home-hero__line:nth-child(3) .home-mark {
    display: block;
    width: fit-content;
  }

  /* The lines stop being the slots' frame: the title is */
  .home-hero__line {
    position: static;
  }

  .home-slot {
    --win-h: 2.5; /* columns tall */

    top: auto;
    bottom: 0;
    box-sizing: border-box;
    width: var(--win);
    height: calc(var(--win-h) * var(--about-col));
  }

  /* The photos are landscape and the windows are portrait: each layer can choose what stays in frame (--focus) */
  .home-slot .home-ph--img > img {
    object-position: var(--focus, 50% 50%);
  }

  /* A paper hairline between neighbours, inside the slot so each still starts on its column line */
  .home-hero__line:nth-child(n + 2) .home-slot {
    border-left: 3px solid var(--sand);
  }

  /* Short phones (SE, small Androids): the same row, a little lower, so the lead and the cue stay in the first screen */
  @media (max-height: 700px) {
    .home-hero {
      padding-block: calc(var(--home-header) + 2vh) 3vh;
    }

    .home-hero__title {
      padding-bottom: calc(2.5 * var(--about-col));
    }

    .home-slot {
      --win-h: 2;
    }

    .home-hero__sub {
      padding-top: 3vh;
    }
  }

  /* Taller phones have the room: 2:3 windows */
  @media (min-height: 780px) {
    .home-hero__title {
      padding-bottom: calc(3.6 * var(--about-col));
    }

    .home-slot {
      --win-h: 3;
    }
  }

  .home-hero__line:nth-child(1) .home-slot {
    --at: 0;
  }

  .home-hero__line:nth-child(2) .home-slot {
    --at: 2;
  }

  .home-hero__line:nth-child(3) .home-slot {
    --at: 4;
  }

  .home-hero__lead {
    grid-column: 1 / -1;
  }

  .home-hero__cue {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* --- 2. 01 Hello: the sentence, drawn (docs/hello-spec.md) ------------------------------------
   One continuous line drawn as you scroll (js/home/hello.js): a pencil test, a sign over a door, a
   label on a can, a screen in someone's hand. It starts loose and graphite and ends steady and ink;
   when it closes the phone, the screen lights orange, the only orange in the section.             */
.home-hello {
  padding-block: 16vh 18vh;
}

.home-hello__top {
  row-gap: 3.2em;
}

.home-hello__label {
  grid-column: 1 / 4;
}

.home-hello__lead {
  grid-column: 1 / 10;
  max-width: 17ch;
}

.home-hello__stage {
  position: relative;
  height: 30em;
  margin: 7vh var(--about-pad) 0;
}

.home-hello__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* graphite → ink, along the line (the gradient's axis is set by the script) */
.home-hello__ink--graphite {
  stop-color: var(--light-stone);
}

.home-hello__ink--mid {
  stop-color: color-mix(in srgb, var(--dark-brown) 70%, var(--light-stone));
}

.home-hello__ink--ink {
  stop-color: var(--dark-brown);
}

.home-hello__path {
  fill: none;
  stroke: url(#hello-line-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-hello__tip {
  fill: var(--main);
  opacity: 0;
}

.home-hello__screen {
  fill: var(--main);
  fill-opacity: 0;
  transition: fill-opacity var(--d-smooth) var(--e-smooth);
}

.home-hello__stage.is-lit .home-hello__screen {
  fill-opacity: 1;
}

/* Under each object; placed by the script, on once the line has finished that object */
.home-hello__tag {
  position: absolute;
  top: 0;
  left: 0;
  color: color-mix(in srgb, var(--dark-brown) 62%, var(--sand)); /* ≥ 4.5:1 */
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity var(--d-smooth) var(--e-smooth),
    transform var(--d-smooth) var(--e-smooth);
}

.home-hello__tag.is-on {
  opacity: 1;
  transform: none;
}

.home-hello__bottom {
  row-gap: 1.4em;
  margin-top: 9vh;
}

.home-hello__text {
  grid-column: 7 / 13;
  max-width: 34ch;
  margin: 0;
  font-size: max(
    14px,
    1.45em
  ); /* the site's em gets small around 1024 and on tablet: body copy keeps a floor */
  line-height: 1.32;
  letter-spacing: -0.012em;
}

.home-hello__text--muted {
  color: color-mix(
    in srgb,
    var(--dark-brown) 62%,
    var(--sand)
  ); /* ≥ 4.5:1; light-stone is 2.4:1 */
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .home-hello__lead {
    grid-column: 1 / 12;
  }

  .home-hello__stage {
    height: 24em;
  }

  .home-hello__text {
    grid-column: 6 / 13;
  }
}

@media screen and (max-width: 767px) {
  .home-hello__label,
  .home-hello__lead,
  .home-hello__text {
    grid-column: 1 / -1;
  }

  .home-hello__stage {
    height: 36em;
    margin-top: 5vh;
  }

  .home-hello__bottom {
    margin-top: 6vh;
  }

  .home-hello__text {
    font-size: max(14px, 1.1em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hello__screen,
  .home-hello__tag {
    transition: none;
  }
}

/* --- 3. 02 A few things I've made -----------------------------------------------------------
   Three cards that overlap: each sticks to the same line and the next slides up over it and
   covers it completely. No offsets, no shadow, no dimming, no scale: paper over paper.      */
.home-work {
  /* The cards stick 1.2em from the top. The site's header is fixed and comes back on scroll up: while it is
     there it pushes them down by its own height (js/header.js drives --header-hidden, 0 shown to 1 hidden). */
  --card-gap: 1.2em;
  --card-top: calc(
    var(--home-header) + (var(--card-gap) - var(--home-header)) *
      var(--header-hidden, 0)
  );

  padding-top: 12vh;
}

.home-work__head {
  margin-bottom: 6vh;
}

.home-work__label {
  grid-column: 1 / 7;
}

.home-stack {
  position: relative;
  padding-bottom: 12vh;
}

.home-card {
  position: sticky;
  top: var(--card-top);
  display: flex;
  flex-direction: column;
  /* The height never follows the header: if it did, the three cards would change height every time the header
     comes and goes, the page would get shorter and longer under the visitor's scroll, and it would jump.
     Only the sticky line moves (top); while the header is there the card runs a little past the bottom edge. */
  height: calc(100vh - 2 * var(--card-gap));
  height: calc(100svh - 2 * var(--card-gap));
  margin-inline: var(--about-pad);
  border-top: 1px solid var(--home-rule);
  background-color: var(--sand);
}

.home-card:nth-child(2) {
  z-index: 2;
}

.home-card:nth-child(3) {
  z-index: 3;
}

.home-card + .home-card {
  margin-top: 22vh;
}

.home-card:focus-visible {
  outline-offset: -2px;
}

.home-card__band {
  --band: 6.6em;

  display: grid;
  flex: none;
  grid-template-columns: repeat(var(--about-cols), minmax(0, 1fr));
  align-items: center;
  height: var(--band);
}

.home-card__name {
  grid-column: 1 / 8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card__name > span,
.home-card__line > span {
  display: block;
}

.home-card__line {
  grid-column: 9 / 13;
  max-width: 30ch;
  margin: 0;
  font-size: max(13px, 1.15em);
  line-height: 1.3;
}

.home-card__line--below {
  display: none;
}

.home-card__image {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background-color: var(--dark-brown);
}

/* Hover: the art comes 3% closer. `scale` is its own property, so it never fights the entrance (transform). */
@media (hover: hover) and (pointer: fine) {
  .home-card__image .home-ph,
  .home-card__image img {
    transition: scale var(--d-smooth) var(--e-smooth);
  }

  .home-card:hover .home-card__image .home-ph,
  .home-card:hover .home-card__image img {
    scale: 1.03;
  }
}

.home-work__end {
  margin-top: 4vh;
}

/* One line, full width, ruled top and bottom. The fill rises on hover (browser transition). */
.home-all {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  gap: 1em;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.42em 0.3em 0.5em;
  border-block: 1px solid var(--home-rule);
  overflow: hidden;
  isolation: isolate;
  color: inherit;
  font-size: var(--home-statement);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-decoration: none;
}

.home-all::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--main);
  transform: scaleY(
    0
  ); /* grows from the bottom, leaves upwards: see .line-btn in shell.css */
  transform-origin: 50% 0;
}

.home-all__arrow {
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  .home-all::before {
    transition: transform var(--d-smooth) var(--e-smooth);
  }

  .home-all__arrow {
    transition: transform var(--d-smooth) var(--e-smooth);
  }

  .home-all:hover::before,
  .home-all:focus-visible::before {
    transform: none;
    transform-origin: 50% 100%;
  }

  .home-all:hover .home-all__arrow {
    transform: translateX(0.12em);
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .home-card__band {
    --band: 5.8em;
  }

  .home-card__line {
    grid-column: 8 / 13;
    font-size: max(13px, 1.2em);
  }
}

@media screen and (max-width: 767px) {
  .home-work {
    --card-gap: 0.8em;
  }

  .home-work__head {
    margin-bottom: 4vh;
  }

  .home-work__label {
    grid-column: 1 / -1;
  }

  .home-card__band {
    --band: 3.6em;
  }

  .home-card__name {
    grid-column: 1 / -1;
  }

  .home-card__band .home-card__line {
    display: none;
  }

  .home-card__line--below {
    display: block;
    grid-column: auto;
    max-width: 34ch;
    padding-bottom: 0.9em;
    font-size: 0.95em;
  }

  .home-card + .home-card {
    margin-top: 20vh;
  }
}

/* --- 4. 03 The boring part (dark band): the line, demonstrated, then handed over --------------
   docs/kern-spec.md. "I sweat the / kerning / so you don't have to."
   Act 1 (scroll): the word arrives spaced by the grid and closes into the kerned word.
   Act 2 (your turn): every letter can be dragged (or moved with the arrows); the type metrics draw
   in while you touch it, changed pairs show how far they are from the real kerning, "Put it back"
   springs it home. js/home/kerning.js sizes the kerned word to c1–c9 (c1–c10 tablet, m1–m6) and
   writes that size into --kern; the em values below are the starting point it measures from.
   Without the script the word is simply set and kerned.                                          */
.home-details {
  --kern: 21em;
  --kern-muted: color-mix(
    in srgb,
    var(--sand) 66%,
    transparent
  ); /* ≥ 4.5:1 on the dark band */

  overflow: hidden;
  background-color: var(--dark-brown);
  color: var(--sand);
}

/* The shell's lines are ink: on the dark band the section draws them in paper tone (System colour in System
   view; js/system.js adds a .sys-lines-copy here to light them up with its scan) */
.home-details {
  --band-line: color-mix(in srgb, var(--sand) 9%, transparent);
}

html[data-sys-lines] .home-details,
.home-details > .sys-lines-copy {
  --band-line: var(--sys-line);
}

.home-details::before,
.home-details > .sys-lines-copy {
  content: "";
  position: absolute;
  inset: 0 var(--about-pad);
  border-right: 1px solid var(--band-line);
  background-image: linear-gradient(
    to right,
    var(--band-line) 1px,
    transparent 1px
  );
  background-size: calc(100% / var(--about-cols)) 100%;
  pointer-events: none;
}

.home-details__top,
.home-details__bottom {
  align-items: end;
}

.home-details__label {
  grid-column: 1 / 4;
}

.home-details__a {
  grid-column: 6 / 13;
  margin-bottom: 0.2em;
}

/* Page padding lives on the wrapper: inside the word an em is the giant type's */
.home-details__wrap {
  position: relative;
  padding-inline: var(--about-pad);
}

.home-details__word {
  position: relative;
  margin: 0.02em 0 0.06em;
  font-size: var(--kern);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.055em;
  white-space: nowrap;
}

/* js/home/kerning.js splits the word: letters it moves, a counting tag between each pair, a baseline probe */
.home-kern__letter {
  position: relative;
  display: inline-block;
  touch-action: pan-y; /* a horizontal drag moves the letter, a vertical one still scrolls */
  transition: color var(--d-smooth) var(--e-smooth);
}

.home-details.is-ready .home-kern__letter {
  cursor: ew-resize;
}

.home-details.is-ready .home-kern__letter:hover,
.home-kern__letter.is-grabbed,
.home-kern__letter:focus-visible {
  color: var(--main);
}

.home-kern__letter:focus-visible {
  outline: none; /* the letter turning orange is the focus state */
}

.home-kern__probe {
  display: inline-block;
  width: 0;
  height: 0;
}

.home-kern__tag {
  position: absolute;
  top: -0.2em; /* clears the i's dot */
  color: var(--main);
  font-family: "Office Code Pro", monospace;
  font-size: max(
    10px,
    calc(var(--size-font) * var(--shell-k))
  ); /* page size: an em here is the giant word's */
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}

.home-kern__tag::after {
  content: "";
  position: absolute;
  top: 1.5em;
  left: 50%;
  width: 1px;
  height: 3.2em;
  background-color: var(--main);
  opacity: 0.6;
}

/* Type metrics: four lines across the whole grid, named at c12. On while you touch the word, and in System view */
.home-kern__guides {
  position: absolute;
  top: 0;
  right: var(--about-pad);
  left: var(--about-pad);
  height: 0;
  pointer-events: none;
}

.home-kern__guide {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background-color: color-mix(in srgb, var(--sand) 22%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-smooth) var(--e-smooth) calc(var(--g, 0) * 60ms);
}

.home-kern__guide span {
  position: absolute;
  right: 0;
  bottom: 0.45em;
  color: var(--kern-muted);
  opacity: 0;
  transition: opacity var(--d-smooth) var(--e-smooth)
    calc(var(--g, 0) * 60ms + 120ms);
}

.home-details.is-touching .home-kern__guide,
html[data-view="system"] .home-kern__guide {
  transform: none;
}

.home-details.is-touching .home-kern__guide span,
html[data-view="system"] .home-kern__guide span {
  opacity: 1;
}

/* Clears the descender of the g */
.home-details__bottom {
  margin-top: calc(var(--kern) * 0.2);
}

.home-details__action {
  grid-column: 1 / 6;
  display: grid;
  justify-items: start;
  gap: 2.2em;
}

/* Act 2's line: the hint, then how far you are, then the way back */
/* Two steady lines: what the word says, then the tools. The tools never move when the message changes length. */
.home-details__say {
  display: grid;
  justify-items: start;
  gap: 0.9em;
  color: var(--kern-muted);
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity var(--d-smooth) var(--e-smooth),
    transform var(--d-smooth) var(--e-smooth);
}

.home-details.is-ready .home-details__say {
  opacity: 1;
  transform: none;
}

.home-details__msg {
  min-height: 1.35em;
  margin: 0;
}

.home-details__tools {
  display: flex;
  gap: 1.2em;
  margin: 0;
}

.home-details__say b {
  color: var(--sand);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.home-details__say.is-spot b {
  color: var(--main);
}

.home-details__back {
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--sand);
  cursor: pointer;
}

.home-details__back[hidden] {
  display: none;
}

.home-details__back:focus-visible {
  outline: 2px solid var(--main);
  outline-offset: 3px;
}

.home-details__b {
  grid-column: 8 / 13;
}

/* While the System view is on, the button stays filled (the same orange its hover wipes in) */
html[data-view="system"] .home-details__btn {
  border-color: var(--main);
  color: var(--dark-brown);
}

html[data-view="system"] .home-details__btn::before {
  transform: none;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .home-details {
    --kern: 18.5em;
  }
}

@media screen and (max-width: 767px) {
  .home-details {
    --kern: 5.6em;
  }

  .home-details__label,
  .home-details__a,
  .home-details__action,
  .home-details__b {
    grid-column: 1 / -1;
  }

  .home-details__a {
    margin-top: 2.2em;
    margin-bottom: 1.6em; /* room for the two rows of tags above the word */
  }

  .home-details__bottom {
    row-gap: 2.6em;
  }

  .home-details__b {
    order: -1;
  }

  .home-kern__guide span {
    display: none;
  }

  /* The pairs sit close at this size: every other tag goes one row up, so neighbours never overlap */
  .home-kern__tag--alt {
    top: calc(
      -0.2em - 1.4 * max(10px, calc(var(--size-font) * var(--shell-k)))
    );
  }

  .home-kern__tag--alt::after {
    height: calc(3.2em + 1.4em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-kern__guide,
  .home-kern__guide span,
  .home-details__say {
    transition: none;
  }
}

/* --- Case overlay (js/home/case.js) -----------------------------------------------------------
   Opens along the page columns in the brand's tone, over everything (the navbar sits at the top
   of the stack, so the overlay matches it and comes later in the document).                  */
.case-overlay {
  --case-tone: var(--dark-brown);

  position: fixed;
  inset: 0;
  z-index: 2; /* the page's own level (main is 2 and comes earlier), so the navbar (3) and the grain stay over it */
  color: var(--sand);
}

/* A case is open: the brand tones are dark, so the shell's column lines and the header turn to paper tone.
   The lines switch as soon as it starts opening; the header piece by piece, as each column reaches it. */
html:not([data-sys-lines])
  body[data-case-open]
  .transition__line:not(.sys-lines-copy *),
html:not([data-sys-lines])
  body[data-case-open]
  .transition__line.is--first:not(.sys-lines-copy *) {
  border-color: var(--sand);
}

/* The header bar has a paper ground of its own: over a case it lets the tone through */
body[data-case-open] .navbar,
body[data-case-open] [data-header-bar] {
  background-color: transparent;
  background-image: none;
}

body[data-case-open="open"] [data-header-bar] {
  border-bottom-color: color-mix(in srgb, var(--sand) 14%, transparent);
}

/* js/home/case.js marks each piece of the header the moment its column is covered */
[data-header-bar] > .is-on-dark,
[data-header-bar] > .is-on-dark .nav_text {
  color: var(--sand);
}

/* The toggle's color is also written inline by the menu timeline: the case has the last word here */
body:not([data-menu-status="open"])
  [data-header-bar]
  > [data-underlay-nav-toggle].is-on-dark {
  color: var(--sand) !important;
}

[data-header-bar] > .is-on-dark .logo {
  filter: invert(1);
}

\.case-overlay[hidden] {
  display: none;
}

.case-overlay__cols {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns:
    var(--about-pad) repeat(var(--about-cols), minmax(0, 1fr))
    var(--about-pad);
}

.case-overlay__cols i {
  /* 1px wider than its track: neighbouring columns must never show a hairline of the page between them */
  margin-right: -1px;
  background-color: var(--case-tone);
}

@media screen and (max-width: 767px) {
  .case-overlay__cols i:nth-child(n + 8):not(:last-child) {
    display: none;
  }
}

/* --- Case pages (work/<project>.html): painted in the brand's tone. The layout lives in pages.css. -------- */
/* site.css paints every page container (body [data-main]) in paper: a case page wins with its own tone */
body .case-page[data-main] {
  background-color: var(--case-tone, var(--dark-brown));
  color: var(--sand);
}

/* A page on a dark ground (data-page-tone="dark" on its container, applied by app.js): the header and the
   column lines take the paper tone, like over the case cover.
   The header wears the surface it sits on: on a case, the case's own tone, opaque (never glass: a blur turns
   the photos under it into a muddy band). It hides as you scroll down (js/header.js). While a case cover is
   opening over the page, it lets the cover's columns through. */
body[data-page-tone="dark"] .navbar {
  background-color: transparent;
  background-image: none;
}

body[data-page-tone="dark"] [data-header-bar] {
  background-color: var(--page-tone-bg, var(--dark-brown));
  background-image: none;
}

body[data-page-tone="dark"][data-case-open] [data-header-bar] {
  background-color: transparent;
}

body[data-page-tone="dark"] [data-header-bar] {
  border-bottom-color: color-mix(in srgb, var(--sand) 14%, transparent);
}

body[data-page-tone="dark"] [data-header-bar] > *,
body[data-page-tone="dark"] [data-header-bar] .nav_text,
body[data-page-tone="dark"] [data-header-bar] > [data-underlay-nav-toggle] {
  color: var(--sand);
}

/* (While the menu is open the header goes to paper on every page: shell.css, body[data-menu-shown].) */

body[data-page-tone="dark"] [data-header-bar] .logo {
  filter: invert(1);
}

html:not([data-sys-lines])
  body[data-page-tone="dark"]
  .transition__line:not(.sys-lines-copy *),
html:not([data-sys-lines])
  body[data-page-tone="dark"]
  .transition__line.is--first:not(.sys-lines-copy *) {
  border-color: var(--sand);
}

/* --- Before the script runs -------------------------------------------------------------------
   The hero entrance starts from hidden words, closed slots and an undrawn scribble. With JS on,
   that is also the first paint, so nothing flashes; js/home/hero.js takes over (.is-ready).
   If the script never arrives, everything shows itself after 3 seconds.                      */
.w-mod-js [data-home-hero]:not(.is-ready) .home-word > span {
  transform: translateY(108%);
  animation: home-show 0.01s 3s forwards;
}

.w-mod-js [data-home-hero]:not(.is-ready) .home-slot {
  clip-path: inset(0 100% 0 0);
  animation: home-show 0.01s 3s forwards;
}

.w-mod-js [data-home-hero]:not(.is-ready) .home-mark .mz-underline {
  clip-path: inset(0 100% 0 0);
  animation: home-show 0.01s 3s forwards;
}

.w-mod-js [data-home-hero]:not(.is-ready) .home-hero__sub > * {
  opacity: 0;
  animation: home-show 0.01s 3s forwards;
}

/* The work cards start closed too: the image wiped shut, the art a little large, the name and the line under
   their masks. Back from a case the Home is shown with a card already in view, and the cards are mounted only
   after the columns lift: without this they showed, vanished and played their entrance again.
   js/home/work-cards.js takes over (.is-ready); the same 3 s fallback as the hero. */
.w-mod-js [data-work-card]:not(.is-ready) .home-card__image {
  clip-path: inset(100% 0% 0% 0%);
  animation: home-show 0.01s 3s forwards;
}

.w-mod-js [data-work-card]:not(.is-ready) .home-card__image .home-ph,
.w-mod-js [data-work-card]:not(.is-ready) .home-card__image img {
  transform: scale(1.08);
  animation: home-show 0.01s 3s forwards;
}

.w-mod-js [data-work-card]:not(.is-ready) .home-card__name,
.w-mod-js [data-work-card]:not(.is-ready) .home-card__line {
  clip-path: inset(0% 0% 100% 0%);
  transform: translateY(0.5em);
  animation: home-show 0.01s 3s forwards;
}

@keyframes home-show {
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-home-hero]:not(.is-ready) .home-word > span,
  .w-mod-js [data-home-hero]:not(.is-ready) .home-slot,
  .w-mod-js [data-home-hero]:not(.is-ready) .home-mark .mz-underline,
  .w-mod-js [data-home-hero]:not(.is-ready) .home-hero__sub > *,
  .w-mod-js [data-work-card]:not(.is-ready) .home-card__image,
  .w-mod-js [data-work-card]:not(.is-ready) .home-card__image .home-ph,
  .w-mod-js [data-work-card]:not(.is-ready) .home-card__image img,
  .w-mod-js [data-work-card]:not(.is-ready) .home-card__name,
  .w-mod-js [data-work-card]:not(.is-ready) .home-card__line {
    animation-delay: 0s;
  }

  .home-card__image .home-ph,
  .home-card__image img {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-all::before,
  .home-all__arrow {
    transition: none;
  }
}