/* Native, the letterhead. Every colour comes from one cloth colour (grid.js
   sets them): --bg the cloth, --lo its grid lines, --text and --soft the
   lighter tones the words are set in. */
@font-face {
  font-family: "Edict Text";
  src: url("assets/fonts/EdictTextTrial-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Items Text";
  src: url("assets/fonts/ItemsTextTrial-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* The colours are registered so they can fade from one to the next: picking
   a case study turns the whole site slowly to its colour. */
@property --bg { syntax: "<color>"; inherits: true; initial-value: var(--e-ink); }
@property --lo { syntax: "<color>"; inherits: true; initial-value: #2a2915; }
@property --text { syntax: "<color>"; inherits: true; initial-value: #dfe5cf; }
@property --soft { syntax: "<color>"; inherits: true; initial-value: #a9ad8a; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #a3a35c; }
/* The same colour arriving later, at the foot of the screen: while the
   colour changes, a soft gradient runs down the page, then settles flat. */
@property --bg-trail { syntax: "<color>"; inherits: true; initial-value: var(--e-ink); }

:root {
  transition: --bg 1.9s ease, --lo 1.9s ease, --text 1.9s ease, --soft 1.9s ease, --bg-trail 3.7s cubic-bezier(0.5, 0, 0.3, 1), --accent 1.9s ease;

  --bg: var(--e-ink);
  --lo: #2a2915;
  --text: #dfe5cf;
  --soft: #a9ad8a;
  /* The letterhead's narrow margins: 0.4 of its 9 parts across, each side. */
  --margin: calc(100% * 0.4 / 9);
  --pad: clamp(14px, 1.5vw, 24px);
  --font-title: "Times New Roman", Times, serif;
  --font-text: "Items Text", "Edict Text", Georgia, serif;
}
/* Leaving the white opening for the first case (or coming back to it), the
   colour comes slowly: the top settles over a few seconds and the rest of
   the page follows well behind it, so it never drops straight to dark. */
:root.dusk { transition: --bg 4.1s cubic-bezier(0.45, 0, 0.35, 1), --lo 4.1s cubic-bezier(0.45, 0, 0.35, 1), --text 3.1s ease, --soft 3.1s ease, --bg-trail 7s cubic-bezier(0.55, 0, 0.3, 1), --accent 4.1s ease; }
:root.still { transition: none; }
/* The case studies glow a plain grey, not in their own colours. */
:root { --case-glow: #a3a3a3; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg) linear-gradient(var(--bg), var(--bg-trail)) fixed;
  color: var(--text);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}
/* The page colour is painted once, on html, so the wash can sit between it and the words. */
body { background: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* A stamp: an image's shape filled with a colour (any file colour works). */
.stamp {
  display: block;
  width: 100%;
  background: var(--text);
  -webkit-mask: var(--mask) center / contain no-repeat;
  mask: var(--mask) center / contain no-repeat;
}

/* The grid. Hairlines along the right and foot of each cell, so
   neighbouring cells share one line. */
.grid { display: grid; overflow-x: clip; }
.cell { position: relative; min-width: 0; padding: var(--pad); }
.cell::before, .cell::after { content: ""; position: absolute; z-index: 1; pointer-events: none; background: var(--lo); }
.cell::before { top: 0; bottom: 0; right: 0; width: 1px; }
.cell::after { left: 0; right: 0; bottom: 0; height: 1px; }

/* The letterhead's uneven columns, out of 9 parts across (its inches, with the
   first column widened from 2 to 2.5). */
.grid.letter-page {
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 2.5fr) minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.4fr);
  grid-template-rows: 3vh minmax(20vh, auto);
  grid-auto-rows: auto;
}
/* The other pages: the same columns, inside the two margins, with the
   margin's line carried down beside them (each cell draws only its right
   edge, so the first column's left edge needs its own). */
.grid.letter-grid {
  position: relative;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1fr);
  padding: 0 var(--margin);
}
.grid.letter-grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--margin); width: 1px; background: var(--lo); }

/* The logo, at the left of its cell, in line with the words under it. */
.lp-logo-cell { display: flex; align-items: center; }
.lp-logo { display: block; width: 78%; }
/* The tagline set from the right, against the margin. */
/* The top of the letterhead stays at the top as the page scrolls under it. */
.lp-head { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.grid.lp-head { grid-template-columns: minmax(0, 0.4fr) minmax(0, 2.5fr) minmax(0, 3.3fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.4fr); }
.grid.lp-head { grid-template-rows: auto; }
/* One row, no boxes: no lines between its parts, only one along its foot. */
.lp-head .cell::before, .lp-head > .cell:first-child::after, .lp-head .cell:not(:first-child)::after { display: none; }
.lp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--lo); }
.lp-pages { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2.2vw, 2.2rem); font-family: var(--font-title); font-size: 0.92rem; }
.lp-pages a { color: var(--soft); text-box: trim-both cap alphabetic; transition: color 0.4s ease, text-shadow 0.4s ease; }
.lp-pages a:hover, .lp-pages a[aria-current="page"] { color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--text) 35%, transparent); }
.lp-head .lp-jump { justify-content: center; }
.lp-head .cell { padding-top: calc(var(--pad) * 0.55); padding-bottom: calc(var(--pad) * 0.55); }
/* The logo and the way to the work sit a little below the band above them. */
.lp-head .lp-logo-cell, .lp-head .lp-jump, .lp-head .lp-pages-cell { padding-top: calc(var(--pad) * 1.1); padding-bottom: calc(var(--pad) * 1.1); }
/* The pages in the middle of the top. */
.lp-head .lp-pages-cell { grid-column: 1 / -1 !important; position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0; display: flex; align-items: center; justify-content: center; }
.lp-head .lp-logo { width: min(60%, 180px); }
/* On the home page the logo is drawn growing into its shape (grid.js). */
.lp-logo-grow { display: block; width: 100%; height: auto; aspect-ratio: 671 / 142; }
/* Companies we've worked with: six places in a row, each
   changing from one company's mark and name into another's. */
.grid.lp-clients { grid-template-rows: auto auto; }
.lp-clients-h { padding-top: calc(var(--pad) * 3); }
/* Its own band, apart from the work above and the foot below: open space on
   either side, no lines inside it, only one line along its top and its foot. */
.grid.lp-clients { position: relative; margin: 16vh 0; }
/* With no lines inside, the six places can be the same width, so every
   mark is drawn at the same size. */
.grid.letter-page.lp-clients { grid-template-columns: minmax(0, 0.4fr) repeat(6, minmax(0, 1.3fr)) minmax(0, 0.4fr); }
.lp-clients .lp-client-morph { width: min(100%, 15vw); }
.lp-clients .cell::before, .lp-clients .cell::after { display: none; }
.grid.lp-clients::before, .grid.lp-clients::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--lo); }
.grid.lp-clients::before { top: 0; }
.grid.lp-clients::after { bottom: 0; }
.lp-slot { padding-bottom: calc(var(--pad) * 3); }
.lp-clients-h h2 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); line-height: 1.15; text-box: trim-both cap alphabetic; }
.lp-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 30vh; }
.lp-client-morph { display: block; width: 100%; height: auto; aspect-ratio: 520 / 220; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--case-glow) 45%, transparent)); }
.lp-slot-name { color: var(--soft); font-family: var(--font-title); font-size: 0.9rem; opacity: var(--fade, 1); }
.snap .lp-clients { scroll-snap-align: center; }
/* The foot: the bottom edge of the page is the ground. The whole logo, the
   tree and the name, grows up out of it as one with the ground (drawn in the
   same shape, grid.js), casting a soft shade; beside it plants come up,
   joined to it, and keep changing into others. */
.lp-footer { position: relative; height: max(56vh, 28rem); overflow: hidden; }
.lp-footer::before { content: ""; position: absolute; left: 50%; bottom: 0; width: min(96vw, 84rem); height: 40%; translate: -50% 40%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--text) 14%, transparent), transparent); opacity: var(--shade, 0); pointer-events: none; }
.lp-sprouts { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 240; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--soft) 30%, transparent)); }
.lp-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; margin-top: 2.4rem; font-family: var(--font-title); font-size: 1rem; }
.lp-foot-links a { color: var(--soft); transition: color 0.4s ease, text-shadow 0.4s ease; }
.lp-foot-links a:hover { color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--text) 40%, transparent); }
/* Home: the tree and the words held in the middle of the screen while the
   steps scroll under them. */
.lp-run { position: relative; }
.lp-hero { position: sticky; top: var(--head-h, 12vh); z-index: 1; height: calc(100vh - var(--head-h, 12vh)); margin-bottom: calc(var(--head-h, 12vh) - 100vh); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 3vh, 2.2rem); padding: 0 var(--pad); pointer-events: none; }
.lp-emblem { display: block; width: min(34vh, 30vw); height: auto; aspect-ratio: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text) 45%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--soft) 35%, transparent)); }
.lp-say { width: min(100%, 40rem); min-height: 9.5em; display: flex; align-items: flex-start; justify-content: center; text-align: center; transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-say.out { opacity: 0; }
/* The two forms: the shape over "two forms" steps down in size and a row
   opens under it, writing on the left and design on the right, so the three
   make a triangle. Each form fades and grows in on its own. */
.lp-hero > .lp-emblem { transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-hero > .lp-say { transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-hero.forms > .lp-emblem { width: min(15vh, 14vw); }
.lp-hero.forms > .lp-say { min-height: 0; }
.lp-forms { display: grid; grid-template-rows: 0fr; width: min(100%, 64rem); margin-top: calc(-1 * clamp(1rem, 3vh, 2.2rem)); transition: grid-template-rows 0.9s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.forms .lp-forms { grid-template-rows: 1fr; margin-top: clamp(0.5rem, 2vh, 1.5rem); }
.lp-forms-in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.lp-form { display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 2.4vh, 1.6rem); text-align: center; opacity: 0; transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-form.on { opacity: 1; }
.lp-form-shape { width: min(13vh, 12vw); }
.lp-form-say { width: min(100%, 27rem); min-height: 6.5em; }
.lp-form-say .lp-line { font-size: clamp(1rem, 0.8rem + 0.6vw, 1.35rem); }
/* A sentence, written in letter by letter: each letter's fade long against
   the step between letters, so a dozen or so fade at once, a soft edge
   sweeping through the sentence. */
.lp-line { margin: 0; font-family: var(--font-title); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem); line-height: 1.18; text-wrap: balance; text-shadow: 0 0 18px color-mix(in srgb, var(--text) 18%, transparent); }
.lp-line.writing span { opacity: 0; will-change: opacity; animation: letter-in 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: calc(var(--c, 0) * 14ms); }
@keyframes letter-in { to { opacity: 1; } }
.lp-step { min-height: 60vh; }
/* The first sentence's stretch starts a little down, so it's the one
   across the middle of the screen when the page opens. */
.lp-hero + .lp-step { margin-top: 20vh; }
/* The case studies float up past the middle, one at a time, to either side:
   a small picture, the company's mark and its line under it. The picture
   is always tinted in the page's colour; only opened is it in its own. */
/* Each with a screen and a half to itself, so one has gone off the top
   before the next comes in at the foot: only one is ever in view. */
.lp-float { position: relative; z-index: 2; height: 150vh; }
.lp-block { position: absolute; top: 50%; left: var(--x); translate: 0 -50%; width: min(25vw, 380px); padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.lp-pic { position: relative; display: block; isolation: isolate; }
.lp-pic > img, .lp-pic > video { display: block; width: 100%; height: auto; }
.lp-pic::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: color; transition: opacity 1.1s ease; pointer-events: none; }
.lp-pic-name { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 1.2rem; font-family: var(--font-title); font-size: 1.3rem; line-height: 1.15; text-align: center; color: var(--soft); background: color-mix(in srgb, var(--text) 6%, transparent); }
.lp-cap { display: block; margin-top: 0.8rem; }
.lp-cap .lp-mark { display: block; width: 11rem; height: auto; aspect-ratio: 520 / 220; margin: 0 0 0.3rem -0.6rem; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text) 30%, transparent)); }
.lp-cap .line { display: block; color: var(--soft); font-size: 0.98rem; line-height: 1.45; text-wrap: pretty; transition: color 1.1s ease; }
.lp-float[data-here] .lp-pic-name { color: var(--text); }
.lp-float[data-here] .line, .lp-block:hover .line { color: var(--text); }
.lp-float:last-child { margin-bottom: 20vh; }
/* To compare (hero=top): the shape and the words held small at the top,
   under the pages, the work floating up beneath them and passing out of
   sight under a fade of the page's colour. The blocks can use the middle. */
.hero-top .lp-hero { --hero: clamp(19rem, 46vh, 26rem); height: var(--hero); margin-bottom: calc(-1 * var(--hero)); justify-content: flex-start; gap: 1.1rem; padding-top: clamp(4rem, 14vh, 8rem); }
.hero-top .lp-emblem { width: clamp(4.6rem, 12vh, 7rem); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--text) 45%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--soft) 35%, transparent)); }
.hero-top .lp-say { width: min(100%, 34rem); min-height: 0; }
.hero-top .lp-line { font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); line-height: 1.3; }
.hero-top .lp-float { z-index: 0; }
.hero-top .lp-block { top: calc(50% + 9vh); left: 50%; translate: calc(-50% + var(--nudge, 0px)) -50%; width: auto; display: grid; grid-template-columns: min(38vw, 600px) 22rem; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
/* Every picture in the same frame (3 by 2), whole within it, so the blocks
   line up one after another. */
.hero-top .lp-pic { aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; }
.hero-top .lp-pic > img, .hero-top .lp-pic > video { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.hero-top .lp-pic::after { inset: auto; width: 100%; height: 100%; }
.hero-top .lp-pic-name { width: 100%; height: 100%; aspect-ratio: auto; }
/* Beside the work, no box: the company's mark large, growing in, glowing
   grey once it's the one across the middle, and its line under it. */
.hero-top .lp-cap { margin-top: 0; padding: 0; text-align: left; }
.hero-top .lp-float[data-here] .lp-cap .lp-mark { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--case-glow) 70%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--case-glow) 45%, transparent)); }
.hero-top .lp-cap .line { font-size: 1.15rem; line-height: 1.5; }
.hero-top .lp-cap .lp-mark { width: 100%; margin: 0 0 1.4rem; translate: var(--shift, 0px) 0; scale: 1.22; transform-origin: 50% 50%; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--case-glow) 40%, transparent)); transition: filter 1.1s ease; }
.hero-top .lp-float[data-here] .lp-pic { box-shadow: none; }
.hero-top .lp-flip .lp-block { grid-template-columns: 22rem min(38vw, 600px); }
.hero-top .lp-flip .lp-cap { order: -1; }
/* At the top the two forms come in under the words without anything above
   them moving or changing size: each form's shape and sentence are the same
   size as the ones above. */
.hero-top .lp-hero.forms > .lp-emblem { width: clamp(4.6rem, 12vh, 7rem); }
/* The tree and the last sentence stay just where they are once the work comes;
   the case studies float up over them, and only the colours change. */
.hero-top .lp-float { z-index: 2; }
/* …and they fade away as the case studies come up (and stay gone through
   the companies). */
.lp-hero { opacity: calc((1 - var(--leave, 0)) * (1 - var(--rise, 0))); }
.hero-top .lp-hero > .lp-emblem { transition: none; }
.hero-top .lp-form-say { min-height: 0; }
/* The row under the words is always in place, so nothing moves when the
   forms come: each only fades and grows in where it already sits. */
.hero-top .lp-forms { grid-template-rows: 1fr; margin-top: clamp(0.5rem, 2vh, 1.5rem); transition: none; }
/* On the white of the opening the glow is a soft green haze, not a shadow. */
.on-light .lp-emblem { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 18%, transparent)); }
.on-light .lp-line { text-shadow: none; }
/* On a narrow screen the blocks are wider, kept inside the edge. */
/* On a narrow screen there's no room beside the words, so they're held
   small at the top (as with hero=top) and each block passes up the middle. */
@media (max-width: 900px) {
  .lp-hero { --hero: clamp(19rem, 46vh, 26rem); height: var(--hero); margin-bottom: calc(-1 * var(--hero)); justify-content: flex-start; gap: 1.1rem; padding-top: clamp(4rem, 14vh, 8rem); }
  .lp-emblem { width: clamp(4.6rem, 12vh, 7rem); }
  .lp-hero.forms > .lp-emblem { width: clamp(4.6rem, 12vh, 7rem); }
  .lp-form-say .lp-line { font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); line-height: 1.3; }
  .lp-say { min-height: 0; }
  .lp-line { font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); line-height: 1.3; }
  .lp-float { z-index: 0; }
  .lp-block, .hero-top .lp-block { display: block; left: 50%; translate: -50% -50%; width: min(78vw, 420px); }
  .hero-top .lp-cap { margin-top: 0.8rem; }
  .hero-top .lp-flip .lp-cap { order: 0; }
}
/* The home page scroll comes to rest on each sentence, and a quick flick
   can't carry it past one; the case studies have resting points too. */
html.snap { scroll-snap-type: y mandatory; scroll-padding-top: var(--head-h, 20vh); }
html.snap.gliding { scroll-snap-type: none; }
/* Among the case studies the page scrolls freely,
   so no case can hold the page in place. */
html.snap.at-work, html.snap.work-index { scroll-snap-type: none; }
.snap .lp-step, .snap .lp-float { scroll-snap-align: center; }
.snap .lp-step:not(.lp-step-end) { scroll-snap-stop: always; }
.snap .lp-footer { scroll-snap-align: end; }
.lp-head .lp-logo-cell { justify-content: center; }
.lp-head .lp-logo { width: min(72%, 240px); }
/* The pages, each in its own block of the top. */
.lp-page { display: flex; align-items: center; justify-content: center; font-family: var(--font-title); }
.lp-page a { color: var(--soft); text-box: trim-both cap alphabetic; }
.lp-page a:hover, .lp-page a[aria-current="page"] { color: var(--text); }
/* The way to the work: a pill outlined in the light tone of the colour,
   its glow breathing slowly. */
.lp-jump { display: flex; align-items: center; justify-content: center; }
.lp-to-work { white-space: nowrap; padding: 0.45em 0.95em; border: 1px solid color-mix(in srgb, var(--text) 70%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); font-family: var(--font-title); font-size: 0.85rem; cursor: pointer; box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); transition: box-shadow 0.4s ease, background-color 0.4s ease; animation: breathe 3.6s ease-in-out infinite; }
.lp-to-work:hover, .lp-to-work:focus-visible { background: color-mix(in srgb, var(--text) 9%, transparent); box-shadow: 0 0 11px color-mix(in srgb, var(--accent) 34%, transparent); outline: none; }
@keyframes breathe { 50% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); } }
/* Down the first column: the pages, then the case studies. */
/* The pages in a row. */
.lp-nav ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.lp-nav a { display: block; color: var(--soft); font-family: var(--font-title); }
.lp-nav a:hover, .lp-nav a[aria-current="page"] { color: var(--text); }
/* A case study opened: over the page in its colour, all its pictures one
   under another in a column, scrolling. */
.lp-open { position: fixed; inset: var(--head-h, 12vh) 0 0; z-index: 4; background: var(--bg); opacity: 0; transition: opacity 0.5s ease; }
.lp-open.in { opacity: 1; }
html.opened { overflow: hidden; }
.lp-close { position: absolute; top: calc(var(--pad) * 0.6); right: calc(var(--pad) * 1.6); z-index: 1; padding: 0.4em 0; border: 0; background: none; color: var(--soft); font-family: var(--font-title); font-size: 0.9rem; cursor: pointer; }
.lp-close:hover { color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--text) 40%, transparent); }
.lp-open .lp-shown:not(.lp-essay) { padding: calc(var(--pad) * 3) max(var(--pad), (100% - 980px) / 2); }
/* Its pictures in rows of one height, packed edge to edge with a hairline
   of space, each as wide as its shape: a row grows to fill the width, and
   the last row keeps its height rather than stretching. */
.lp-open .lp-shown.lp-works { padding: 7vh 2.5vw 14vh; }
.lp-gallery { display: flex; flex-wrap: wrap; gap: 4px; max-width: 1240px; margin: 0 auto; }
.lp-gallery::after { content: ""; flex: 1000 1 0; }
/* Up to three pictures fill the row across, side by side. */
.lp-gallery:not(:has(figure:nth-of-type(4)))::after { display: none; }
.lp-gallery figure { flex: var(--r) 1 calc(var(--r) * clamp(9rem, 24vh, 15rem)); aspect-ratio: var(--r); min-width: 0; margin: 0 !important; overflow: hidden; }
.lp-gallery img, .lp-gallery video { display: block; width: 100%; height: 100%; object-fit: cover; }
.lp-open .lp-shown .lp-works-info { width: min(100%, 30rem); margin: 16vh auto 0; }
.lp-works-info h2 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); }
.lp-works-info p { margin: 1rem 0 0; color: var(--soft); font-size: 1.12rem; line-height: 1.5; }
.lp-shown { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lp-shown > img, .lp-shown > video { display: block; width: 100%; height: auto; }
.lp-shown:not(.lp-essay) > * + * { margin-top: calc(var(--pad) * 2); }
/* Written work in the stage: the title large in the middle of the stage,
   then the text below it in the reading column, scrolling up into view. */
.lp-essay { padding: 0 calc(var(--pad) * 2) calc(var(--pad) * 6); }
.lp-essay h2 { display: block; max-width: 13em; margin: 0 auto; padding: calc(var(--pad) * 2) 0 calc(var(--pad) * 2.2); text-shadow: 0 0 18px color-mix(in srgb, var(--text) 22%, transparent); font-family: var(--font-title); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); line-height: 1.06; text-align: center; text-wrap: balance; }
.lp-essay p { max-width: 34em; margin: 0 auto 1.15em; font-size: 1.15rem; line-height: 1.66; }
.lp-essay-source { margin-top: 2.4em !important; font-family: var(--font-title); }
.lp-essay-source a { color: var(--soft); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lp-essay-source a:hover { color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--text) 40%, transparent); }
.lp-shown .well { height: 100%; display: flex; align-items: center; justify-content: center; }
.lp-shown .mark { width: min(240px, 60%); }
.lp-shown .mark-name { font-family: var(--font-title); font-size: clamp(1.6rem, 1rem + 2vw, 3rem); color: var(--soft); }

.lp-foot { display: flex; align-items: flex-end; font-family: var(--font-title); }
.lp-foot a { color: var(--soft); }
.lp-foot a:hover, .lp-foot a[aria-current="page"] { color: var(--text); }

/* Writing, Media and Contact: a heading row as tall as the logo's, then
   the pieces as rows. */
.wr-lh, .wr-lh-intro { min-height: 20vh; display: flex; align-items: flex-end; }
.wr-lh h1 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(2rem, 1.2rem + 2vw, 3.2rem); line-height: 1.05; }
.wr-lh-intro p { margin: 0; max-width: 34em; color: var(--soft); line-height: 1.45; }
.wr-lh-intro .stack h1 { margin: 0 0 0.6rem; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.8rem, 1rem + 1.8vw, 3rem); line-height: 1.1; }
.wr-back a { color: var(--soft); font-family: var(--font-title); }
.wr-back a:hover { color: var(--text); }
.wr-row { display: contents; color: inherit; }
.wr-row .cell { display: flex; align-items: center; line-height: 1.4; }
/* A piece in the list glows softly while the pointer is on it. */
.wr-row .cell > * { transition: color 0.5s ease, text-shadow 0.5s ease; }
.wr-row:hover .cell > *, .wr-row:focus-visible .cell > * { color: var(--text); text-shadow: 0 0 1px color-mix(in srgb, var(--text) 60%, transparent), 0 0 14px color-mix(in srgb, var(--text) 45%, transparent), 0 0 30px color-mix(in srgb, var(--soft) 30%, transparent); }
.grid.letter-grid > .cell:empty { min-height: 4.5rem; }
.lw-name { display: flex; align-items: center; }
.wr-title { font-family: var(--font-title); line-height: 1.2; }
.lw-row { display: flex; align-items: center; line-height: 1.4; }
.soft { color: var(--soft); }
.wr-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; color: var(--soft); }
.wr-lh-intro .wr-meta { margin-top: 1rem; }
/* A piece: its sections in the first column, staying in view beside the text. */
.wr-nav { font-family: var(--font-title); }
.wr-nav-in { position: sticky; top: calc(var(--head-h, 20vh) + var(--pad)); padding-left: 2.1rem; }
/* The small emblem beside the sections, sliding to the one being read. */
.wr-mark { position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; margin-top: -0.75rem; transition: transform 0.35s cubic-bezier(0.3, 0, 0.2, 1); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--text) 18%, transparent)); }
/* The section being read: a touch heavier, with a faint glow close round
   the letters; no shadow or tint spread behind it. */
.wr-nav li a { color: var(--soft); -webkit-text-stroke: 0 currentColor; transition: color 0.5s ease, text-shadow 0.5s ease, -webkit-text-stroke-width 0.5s ease; }
.wr-nav li a.is-here { color: var(--text); -webkit-text-stroke-width: 0.35px; text-shadow: 0 0 5px color-mix(in srgb, var(--text) 16%, transparent); }
.wr-nav ul { margin: 0; padding: 0; list-style: none; }
.wr-nav li + li { margin-top: 0.55rem; }
.wr-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* A piece, set to be read: one column near the middle of the page, the
   title and its line on the same column above the text. Generous lines, a
   clear space between paragraphs, quotes set in and in the softer tone. */
/* Its title block, on the same column: the title large with its lines
   balanced, the standfirst under it, then the date and byline. */
.wr-lh-intro .stack { width: min(100%, 36em); margin: 0 auto; padding: calc(var(--pad) * 3) 0 calc(var(--pad) * 0.5); font-size: 1.15rem; }
.wr-lh-intro .stack h1 { margin: 0; max-width: 15em; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.8rem); line-height: 1.06; text-wrap: balance; }
.wr-lh-intro .stack p { max-width: 30em; }
.wr-lh-intro .stack h1 + p { margin-top: 1.1em; color: var(--soft); font-size: 1.25rem; line-height: 1.4; text-wrap: pretty; }
.wr-lh-intro .stack .wr-meta { margin-top: 1.6em; font-size: 0.9rem; letter-spacing: 0.01em; }
.wr-body { padding-top: calc(var(--pad) * 3); padding-bottom: calc(var(--pad) * 6); font-size: 1.15rem; line-height: 1.66; }
.wr-body > * { max-width: 36em; margin-left: auto; margin-right: auto; }
.wr-body p { margin-top: 0; margin-bottom: 1.15em; }
.wr-body strong { font-weight: 600; }
.wr-body h2 { margin-top: 2.2em; margin-bottom: 0.7em; font-family: var(--font-title); font-weight: 400; font-size: 1.75rem; line-height: 1.2; scroll-margin-top: calc(var(--head-h, 20vh) + var(--pad) * 2); }
.wr-body h3 { margin-top: 1.8em; font-family: var(--font-title); font-weight: 400; font-size: 1.3rem; }
.wr-body img { display: block; width: 100%; max-width: 36em; height: auto; margin: 2em auto 0.7em; }
.wr-body .article-banner { margin-top: 0; }
/* Pictures in a piece, tinted in the site's colour (a colour blend over them
   on screen; the files are untouched); pointed at, they fade back to their own. */
.wr-body .tint { position: relative; display: block; max-width: 36em; margin: 2em auto 0.7em; }
.wr-body .tint img { margin: 0; }
.wr-body .tint::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: color; pointer-events: none; transition: opacity 0.7s ease; }
.wr-body .tint:hover::after { opacity: 0; }
.wr-body .caption { color: var(--soft); font-size: 0.88rem; line-height: 1.45; }
.wr-body blockquote, .wr-body aside { margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1.6em; color: var(--soft); font-size: 1.08rem; }
.wr-body blockquote p:last-child, .wr-body aside p:last-child { margin-bottom: 0; }
.wr-body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wr-body a:hover { color: var(--text); text-shadow: 0 0 12px color-mix(in srgb, var(--text) 40%, transparent); }

/* One text size: everything but the headings (the tagline and each page's
   title), the case studies' lines and a piece's text at 1rem. */
.lp-nav a, .lp-case .name, .lp-foot, .wr-row .cell, .wr-title, .lw-row,
.wr-lh-intro p, .wr-meta, .wr-back a, .wr-nav { font-size: 1rem; }

/* Alignment: each line of text trimmed to its capitals and baseline, so
   text centred in a row is centred by its letters, a description sits
   level with its name, and text set at a cell's edge starts exactly the
   cell's padding in. */
.t { display: block; text-box: trim-both cap alphabetic; }
.wr-lh h1, .wr-lh-intro p, .wr-lh-intro .stack h1, .lw-name .wr-title,
.lp-nav a, .lp-case .name, .lp-foot a, .wr-back a { text-box: trim-both cap alphabetic; }
.lp-foot a, .wr-back a { display: block; }
/* A piece: its date and byline on the same baseline as All writing, and
   its sections starting level with the text beside them. */
.wr-lh-intro .wr-meta span { display: block; text-box: trim-both cap alphabetic; }
.wr-nav li:first-child a { display: block; text-box: trim-start cap alphabetic; }

/* Moving between pages: each cell fades up in turn (--i, set by grid.js),
   its lines drawing out from the corner as it comes. */
@media (prefers-reduced-motion: no-preference) {
  .enter .cell { animation: cell-in 560ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .enter .cell::after { transform-origin: left; animation: line-across 760ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .enter .cell::before { transform-origin: top; animation: line-down 760ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .enter .grid.letter-grid::before { transform-origin: top; animation: line-down 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .enter .lp-head.still .cell, .enter .lp-head.still .cell::before, .enter .lp-head.still .cell::after { animation: none; }
}
@keyframes cell-in { from { opacity: 0; translate: 0 6px; } }
@keyframes line-across { from { transform: scaleX(0); } }
@keyframes line-down { from { transform: scaleY(0); } }

/* The colour picker: a tool, not part of the design. */
.controls {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 10;
  width: 300px;
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: #151515;
  color: #eee;
  font: 12px/1.35 -apple-system, system-ui, sans-serif;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.controls[hidden] { display: none; }
.controls[data-closed] { width: auto; padding: 0; overflow: hidden; }
.controls[data-closed] .c-body { display: none; }
.c-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 2px 0 6px; border: 0; background: none; text-align: left; font-weight: 600; cursor: pointer; }
.c-toggle .c-hide { padding: 2px 8px; border: 1px solid #3a3a3a; border-radius: 6px; font-weight: 400; color: #bbb; }
.controls[data-closed] .c-toggle { padding: 8px 12px; }
.controls[data-closed] .c-title, .controls:not([data-closed]) .c-show { display: none; }
.c-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 4px; }
.c-swatches button { aspect-ratio: 1; border: 2px solid transparent; border-radius: 5px; cursor: pointer; }
.c-swatches button[aria-pressed="true"] { border-color: #fff; }
.c-note { margin: 6px 0 0; color: #9a9a9a; }
.c-copy { width: 100%; margin-top: 12px; padding: 6px; border: 1px solid #3a3a3a; border-radius: 6px; background: #222; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .lp-line.writing span { animation: none; }
  .lp-to-work { animation: none; }
}

@media (max-width: 800px) {
  .controls { width: calc(100% - 28px); max-height: 50vh; }
}

/* Trying the page without its grid: no lines anywhere. The case study
   being looked at keeps its glowing outline. */
.cell::before, .cell::after,
.grid.letter-grid::before, .lp-head::after,
.grid.lp-clients::before, .grid.lp-clients::after { display: none; }

/* About's parts: the clients, team, services and places. */
.ab { position: relative; z-index: 1; width: min(100% - 2 * var(--pad), 38rem); margin: 0 auto; padding: 12vh 0 16vh; }
.ab-said { margin: 2.6rem 0 0; color: var(--soft); font-size: 1.12rem; line-height: 1.6; }
.ab section { margin-top: 3.4rem; }
.ab h2 { margin: 0 0 0.8rem; color: var(--soft); font-family: var(--font-title); font-weight: 400; font-size: 0.85rem; }
.ab ul { margin: 0; padding: 0; list-style: none; font-size: 1.12rem; line-height: 1.6; }
.ab ul .soft, .ab p.soft { color: var(--soft); }
.ab-team li + li { margin-top: 1rem; }
.ab-team .soft { display: block; }
.ab-team .soft + .soft { margin-top: 0.6em; }
/* Locations: a small native glyph, the city, and the time there now. */
.ab-places { display: inline-flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.ab-places li { display: grid; grid-template-columns: 1.6rem 5rem 4.6rem; align-items: center; gap: 0.75rem; text-align: left; }
.ab-places time { justify-self: end; }
.ab-place-g { width: 1.6rem; aspect-ratio: 1; }
.ab-places time { font-variant-numeric: tabular-nums; }
.ab p.soft { margin: 0; font-size: 1.12rem; }
.ab-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 1rem; }
.ab-row .lp-slot { min-height: 0; gap: 0.5rem; }
.ab-row .lp-client-morph { width: min(100%, 12rem); margin: 0 auto; }
.ab-row .lp-slot-name { font-size: 0.75rem; text-align: center; }
/* On a narrow screen the pages go under the logo, in a row of their own. */
@media (max-width: 900px) {
  .grid.lp-head { grid-template-rows: auto auto; }
  .lp-head .cell.lp-pages-cell { position: relative; translate: none; left: auto; grid-column: 2 / 7 !important; grid-row: 2 !important; justify-content: center; padding-top: 0; }
  .lp-pages { gap: 1.2rem; font-size: 0.85rem; }
}

/* The pages along the very top: one thin row spread edge to edge, small
   and in a faded grey of the page's colour, held there as the page
   scrolls; the one pointed at or open comes up in the full tone. */
.lp-top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; align-items: baseline; padding: 0.7rem calc(var(--pad) * 1.2); font-family: var(--font-title); font-size: 0.8rem; pointer-events: none; }
.lp-side { display: contents; }
.lp-top a { padding: 0; border: 0; background: none; color: color-mix(in srgb, var(--text) 40%, var(--bg)); font: inherit; cursor: pointer; pointer-events: auto; transition: color 0.4s ease; }
.lp-top a:hover, .lp-top a[aria-current="page"] { color: var(--text); }
/* Media isn't open yet: it stays in the faded tone and can't be followed. */
.lp-top .lp-soon { color: color-mix(in srgb, var(--text) 40%, var(--bg)); cursor: default; }
/* A page's own shape, above its heading, the same size as the home page's. */
.pg-emblem { display: block; width: clamp(4.6rem, 12vh, 7rem); height: auto; aspect-ratio: 1; margin: 0 auto 1.6rem; }
/* About's parts under its heading, centred in the same column. */
.ab.ab-in { width: auto; margin: 0; padding: 0; text-align: center; }
.ab-in section { margin-top: 3.2rem; }
.ab-in .ab-row .lp-slot { padding-bottom: 0; }

/* Writing, Media and Contact: one centred column, as the home page's words
   are: the heading small at the top, under the menu, then each piece. */
.wr-list { width: min(100% - 2 * var(--pad), 38rem); margin: 0 auto; padding: clamp(6rem, 16vh, 9rem) 0 16vh; text-align: center; }
.wr-head h1 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.2; }
.wr-head p { max-width: 30em; margin: 1rem auto 0; color: var(--soft); line-height: 1.5; }
.wr-item { display: block; margin-top: 3.2rem; color: inherit; }
.wr-item .wr-title { display: block; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem); text-box: none; transition: color 0.5s ease, text-shadow 0.5s ease; }
.wr-item .wr-dek { display: block; margin-top: 0.5rem; color: var(--soft); line-height: 1.45; }
.wr-item .wr-meta { justify-content: center; margin-top: 0.6rem; font-size: 0.85rem; }
a.wr-item:hover .wr-title, a.wr-item:focus-visible .wr-title { text-shadow: 0 0 1px color-mix(in srgb, var(--text) 60%, transparent), 0 0 14px color-mix(in srgb, var(--text) 45%, transparent), 0 0 30px color-mix(in srgb, var(--soft) 30%, transparent); }
/* A piece's sections stay in view below the menu button. */
.wr-nav-in { top: 5.5rem; }
/* A piece: the same centred column, the sections beside it at the left. */
.wr-piece { display: grid; grid-template-columns: minmax(0, 1fr) min(100% - 2 * var(--pad), 38rem) minmax(0, 1fr); padding: clamp(6rem, 16vh, 9rem) 0 16vh; }
.wr-piece .wr-nav { grid-column: 1; padding: 0 var(--pad) 0 calc(var(--pad) * 2); }
.wr-piece .wr-nav-in { position: sticky; top: 5.5rem; }
.wr-piece .wr-back { display: block; margin: 0 0 1.6rem -2.1rem; color: var(--soft); font-family: var(--font-title); text-box: none; }
.wr-piece .wr-back:hover { color: var(--text); }
.wr-article { grid-column: 2; }
.wr-article .wr-head { text-align: center; }
.wr-article .wr-meta { justify-content: center; margin-top: 0.8rem; font-size: 0.85rem; }
.wr-article .wr-body { padding-top: 3.2rem; }
.wr-article .wr-body > *, .wr-article .wr-body img, .wr-article .wr-body .tint { max-width: none; }
@media (max-width: 900px) {
  .wr-piece { grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad); }
  .wr-piece .wr-nav { display: none; }
}
/* On a phone the menu's companies sit three to a row, so each mark has room. */
@media (max-width: 600px) {
    .lp-forms-in { grid-template-columns: 1fr; gap: 1.4rem; }
  .lp-form-shape, .hero-top .lp-form-shape { width: 3.6rem; }
  .lp-form { gap: 0.6rem; }
  .lp-gallery figure { flex-basis: calc(var(--r) * 7.5rem); }
  .lp-open .lp-shown.lp-works { padding: 5vh 3vw 12vh; }
}

/* To compare (work=columns): the case studies in two columns of uneven
   boxes, the right column set lower, scrolled through freely; each fades
   up into view as it comes. */
.work-cols .lp-floats { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: clamp(2rem, 5vw, 5rem); width: min(100% - 2 * var(--pad), 68rem); margin: 0 auto; padding: 12vh 0 24vh; }
.work-cols .lp-col + .lp-col { padding-top: 30vh; }
.work-cols .lp-float { height: auto; padding-bottom: clamp(4rem, 12vh, 8rem); opacity: 0; translate: 0 2.5rem; transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work-cols .lp-float.seen { opacity: 1; translate: none; }
.work-cols .lp-block, .work-cols.hero-top .lp-block { position: static; translate: none; display: block; width: 100%; }
.work-cols .lp-cap, .work-cols.hero-top .lp-cap { margin-top: 1rem; text-align: left; }
.work-cols.hero-top .lp-cap .lp-mark { width: 11rem; margin: 0 0 0.5rem -0.5rem; }
.work-cols.hero-top .lp-flip .lp-cap { order: 0; }
.work-cols .lp-float:last-child { margin-bottom: 0; }
html.snap.work-cols { scroll-snap-type: y proximity; }
.work-cols .lp-float { scroll-snap-align: none; }
@media (max-width: 600px) { .work-cols .lp-floats { grid-template-columns: 1fr; } .work-cols .lp-col + .lp-col { padding-top: 0; } }

/* To compare (flow=para): no tree, no forms; the sentences as one small
   paragraph (a little larger than the pages along the top), each fading in with its shape after it, the ones before
   greying out but staying. */
.flow-para .lp-hero > .lp-emblem, .flow-para .lp-forms { display: none; }
/* flow=para-tree: the paragraph with the one changing shape above it. */
.flow-para.flow-tree .lp-hero > .lp-emblem { display: block; }
.flow-para .lp-say { min-height: 0; }
.lp-para { margin: 0; font-family: var(--font-title); font-size: 1.1rem; line-height: 1.65; text-align: center; text-wrap: pretty; }
.pl { color: color-mix(in srgb, var(--text) 32%, var(--bg)); transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.pl.now { color: var(--text); }
/* At the end the earlier sentences fade into the page, then step aside, and
   the last one glides to the middle. */
.lp-para { transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-para.ending .pl:not(:last-child) { color: var(--bg); }
.lp-para.ending .pl:not(:last-child) .pl-mark { filter: opacity(0); }
.lp-para.ended .pl:not(:last-child) { display: none; }
/* The shapes after the earlier sentences grey out with them. */
.pl-mark { transition: filter 1.2s ease; }
.pl:not(.now) .pl-mark { filter: opacity(0.32); }
.pl > span { opacity: 0; animation: letter-in 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; animation-delay: calc(var(--c, 0) * 14ms); }
.pl-mark { display: inline-block; width: 1.7em; height: 1.7em; vertical-align: -0.5em; margin-left: 0.1em; }

.lp-ttl { display: none; }
/* To compare (work=split): two columns. The tree and the changing words are
   held at the top left; the case studies run down the right, each with its
   name above the picture and its line under it, fading in as they come. */
@media (min-width: 901px) {
  .hero-top.work-split .lp-hero { top: 0; width: 34vw; align-items: center; text-align: left; padding: clamp(5rem, 14vh, 8rem) var(--pad) 0 calc(var(--pad) * 2); }
  /* The pages stacked down the bottom left corner. */
  .work-split .lp-top { top: auto; right: auto; bottom: calc(var(--pad) * 1.5); left: calc(var(--pad) * 2); flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.35rem; width: auto; padding: 0; }
  .work-split .lp-hero::before { display: none; }
  .hero-top.work-split .lp-hero > .lp-emblem { width: clamp(4rem, 10vh, 6rem); }
  .work-split .lp-say, .work-split .lp-line { text-align: left; }
  .work-split .lp-say { width: min(100%, 24rem); }
  .work-split .lp-forms { justify-content: start; }
  .work-split .lp-floats { margin-left: 38vw; width: calc(62vw - 2 * var(--pad)); padding: 14vh 0 20vh; }
  .work-split .lp-float { height: auto; padding-bottom: clamp(4rem, 12vh, 8rem); opacity: 0; translate: 0 2.5rem; transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); scroll-snap-align: none; }
  .work-split .lp-float.seen { opacity: 1; translate: none; }
  .work-split .lp-block, .hero-top.work-split .lp-block, .hero-top.work-split .lp-flip .lp-block { position: static; translate: none; display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; gap: 0; }
  .work-split .lp-ttl { display: block; margin: 0 0 0.9rem; font-family: var(--font-title); font-size: clamp(1.2rem, 0.9rem + 0.6vw, 1.6rem); line-height: 1.2; color: var(--text); }
  .work-split .lp-pic { width: 100%; border-radius: 14px; overflow: hidden; }
  .work-split .lp-pic > img, .work-split .lp-pic > video, .work-split .lp-pic::after { border-radius: inherit; }
  .work-split .lp-ttl { text-align: left; }
  .work-split .lp-cap, .hero-top.work-split .lp-cap, .hero-top.work-split .lp-flip .lp-cap { order: 0; margin-top: 1rem; max-width: 34rem; text-align: left; }
  /* The case's morphing logo is its title, above the picture; the line stays under it. */
  .work-split .lp-ttl { display: none; }
  .work-split .lp-cap, .hero-top.work-split .lp-cap, .hero-top.work-split .lp-flip .lp-cap { display: contents; }
  .work-split .lp-cap .lp-mark, .hero-top.work-split .lp-cap .lp-mark { order: -1; display: block; width: clamp(10rem, 16vw, 15rem); margin: 0 0 0.6rem -1.1rem; translate: none; scale: 1; }
  .work-split .lp-cap .line { margin-top: 1rem; max-width: 34rem; }
  .work-split .lp-float:last-child { margin-bottom: 0; }
  html.snap.work-split { scroll-snap-type: y proximity; }
}

/* The pages' glyphs: shown with the pages stacked in the corner (work=split). */
.nav-g { display: none; }
@media (min-width: 901px) {
  .work-split .lp-top a, .work-split .lp-top .lp-soon { display: inline-flex; align-items: center; gap: 0.55em; }
  .work-split .lp-top .nav-g { display: inline-block; flex: none; width: 1.5em; height: 1.5em; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
  .work-split .lp-top { gap: 0.45rem; }
}

/* The pages along the top: three each side of an open middle. */
@media (min-width: 901px) {
  /* Three pages each side, spread evenly across their half. */
  .lp-top:not(.x) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 30vw) minmax(0, 1fr); align-items: baseline; }
  .lp-top .lp-side { display: flex; justify-content: space-between; align-items: baseline; }
  .lp-top .lp-side + .lp-side { grid-column: 3; }
  .work-split .lp-top .lp-side { display: contents; }
  .work-split .lp-top:not(.x) { display: flex; }
}

/* A case's link to its own site, under its line. */
.lp-visit { display: inline-block; margin-top: 1rem; font-size: 0.95rem; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer; }
.lp-visit:hover { text-decoration-thickness: 2px; }
.lp-cap .lp-visit { display: block; width: fit-content; }

/* A written case (an essay) laid out like a printed page: well below the
   pages along the top, one narrow column, the title set just above the
   text in the same column, the paragraphs close and even. */
.lp-open .lp-close { top: 3rem; }
.lp-essay { width: min(100% - 2 * var(--pad), 36rem); margin: 0 auto; padding: clamp(6rem, 16vh, 9rem) 0 calc(var(--pad) * 6); }
.lp-essay h2 { max-width: none; margin: 0 0 1.1rem; padding: 0; text-shadow: none; font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); line-height: 1.15; text-align: left; }
.lp-essay p { max-width: none; margin: 0 0 0.9em; font-size: 1.05rem; line-height: 1.6; text-align: left; hyphens: auto; }


/* The essays' titles kept large, on the column's left edge. */
.lp-essay h2 { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 4rem); line-height: 1.06; text-wrap: balance; }

/* No scroll bar showing, anywhere on the site; the page still scrolls. */
html, body, .lp-open, .lp-open * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .lp-open::-webkit-scrollbar, .lp-open *::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Essays in a wider column. */
.lp-essay { width: min(100% - 2 * var(--pad), 46rem); }

/* The pictures start below Close and the pages along the top. */
@media (min-width: 901px) { .lp-open .lp-shown.lp-works { padding-top: 6.5rem; } }

/* The font tester (fonts-tool.js), at the bottom left, styled like the colour panel. */
.f-tool { position: fixed; left: 14px; bottom: 14px; z-index: 40; width: 300px; max-height: calc(100vh - 28px); display: flex; flex-direction: column; padding: 10px 12px 12px; border-radius: 10px; background: #151515; color: #eee; font: 12px/1.35 -apple-system, system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.f-tool button { font: inherit; color: inherit; }
.f-toggle { display: flex; width: 100%; padding: 2px 0 6px; border: 0; background: none; text-align: left; font-weight: 600; cursor: pointer; }
.f-head { display: flex; justify-content: space-between; width: 100%; }
.f-x { padding: 2px 8px; border: 1px solid #3a3a3a; border-radius: 6px; font-weight: 400; color: #bbb; }
.f-tool[data-closed] { width: auto; padding: 0; }
.f-tool[data-closed] .f-toggle { padding: 8px 12px; }
.f-tool[data-closed] .f-body, .f-tool[data-closed] .f-head, .f-tool:not([data-closed]) .f-open { display: none; }
.f-body { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.f-roles { display: flex; gap: 4px; }
.f-roles button { flex: 1; padding: 5px 0; border: 1px solid #3a3a3a; border-radius: 6px; background: none; cursor: pointer; }
.f-roles button[aria-selected="true"] { background: #eee; color: #151515; }
.f-now { margin: 0; color: #bbb; }
.f-find { padding: 6px 8px; border: 1px solid #3a3a3a; border-radius: 6px; background: #0e0e0e; color: #eee; font: inherit; }
.f-list { flex: 1; min-height: 0; max-height: 46vh; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.f-list button { display: block; width: 100%; padding: 6px 4px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; }
.f-list button:hover { background: #222; }
.f-list button[aria-pressed="true"] { background: #2d2d2d; }
.f-name { font-size: 18px; }
.f-style { color: #999; }
.f-reset { padding: 6px 0; border: 1px solid #3a3a3a; border-radius: 6px; background: none; cursor: pointer; }

/* The foot: the page's colour eases back to the light paper over a long
   stretch, and the whole logo, tree and name, sits along the bottom in dark
   green, as wide as the page. */
.lp-footer { min-height: 70vh; display: flex; align-items: flex-end; padding: 0 var(--pad) calc(var(--pad) * 1.2); }
.lp-footer::before { display: none; }
/* The tree's place (576 of the logo's 2684 across) holds a canvas a little
   larger than it, since each shape is drawn inside a margin of its square;
   the name beside it stays as it is. */
.lp-foot-logo { display: flex; align-items: flex-end; width: 100%; aspect-ratio: 2684 / 568; }
.lp-foot-tree { flex: none; width: calc(21.46% * 100 / 72); aspect-ratio: 1; margin: 0 calc(-21.46% * 14 / 72) calc(-21.46% * 16 / 72); }
.lp-foot-word { flex: none; width: 74.33%; margin-left: 4.21%; aspect-ratio: 1995 / 568; background: var(--e-nav); -webkit-mask: url("assets/brand/native-wordmark-foot.png") center bottom / contain no-repeat; mask: url("assets/brand/native-wordmark-foot.png") center bottom / contain no-repeat; }

/* The work as an index (work=index): one row each, the name and its line,
   the picture coming up at the end of the row when pointed at. */
.lp-index { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(100% - 2 * var(--pad), 68rem); margin: 0 auto; padding: 42vh 0 24vh; }
.lp-row { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.3fr) 4rem; gap: 2rem; align-items: center; padding: clamp(1.1rem, 2.6vh, 1.8rem) 0; border: 0; background: none; color: var(--soft); text-align: left; cursor: pointer; transition: color 0.4s ease; }
.lp-row:hover, .lp-row:focus-visible { color: var(--text); outline: none; }
.lp-row-name { font-family: var(--font-title); font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); line-height: 1.15; }
/* Each company's logo grows in to the left of its name as the row comes up. */
.lp-row-name { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.lp-row-mark { flex: none; width: clamp(4.5rem, 7vw, 6.5rem); height: auto; aspect-ratio: 520 / 220; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--text) 25%, transparent)); }
.lp-row-line { font-size: 1rem; line-height: 1.5; }
/* In the index a row shows no picture: pointed at, it says View. */
.lp-row-view { justify-self: end; font-size: 1rem; text-decoration: underline; text-underline-offset: 0.25em; opacity: 0; transition: opacity 0.4s ease; }
.lp-row:hover .lp-row-view, .lp-row:focus-visible .lp-row-view { opacity: 1; }
.work-index .lp-hero { opacity: calc((1 - var(--leave, 0)) * (1 - var(--rise, 0))); }
@media (max-width: 700px) { .lp-row { grid-template-columns: 1fr; gap: 0.4rem; } .lp-row-view { display: none; } }
/* The switch between the two, plain words along the bottom middle. */
.lp-view { position: fixed; left: 50%; bottom: calc(var(--pad) * 1.2); z-index: 30; translate: -50% 0; display: flex; gap: 1.6rem; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; font-family: var(--font-title); font-size: 0.85rem; }
.work-near .lp-view { opacity: 1; pointer-events: auto; }
.lp-view button { padding: 0.3rem 0; border: 0; background: none; color: color-mix(in srgb, var(--text) 40%, var(--bg)); font: inherit; cursor: pointer; transition: color 0.4s ease; }
.lp-view button:hover, .lp-view button[aria-pressed="true"] { color: var(--text); }
.f-group { padding: 8px 4px 2px; color: #999; font-size: 11px; }


/* An essay's own section headings: in the title face, a step up from the text, with room above. */
.lp-essay h3 { margin: 2em 0 0.6em; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem); line-height: 1.2; text-align: left; }
/* With a case open, the pages along the top sit on the page colour so the
   text scrolls away under them, and the Scroll / Index switch steps aside. */
.opened .lp-view { opacity: 0; pointer-events: none; }
/* The essay as it was: the title large and centred, and the text in one
   wide column centred under it. */
.lp-essay h2 { max-width: 14em; margin: 0 auto clamp(2rem, 5vh, 3.2rem); text-align: center; text-wrap: balance; font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); line-height: 1.06; text-shadow: 0 0 18px color-mix(in srgb, var(--text) 22%, transparent); }
.lp-essay { width: min(100% - 2 * var(--pad), 44rem); }
/* An essay's paragraphs and headings rise a little and come up out of the
   page colour (a change of tone) as they scroll into view. */
.lp-essay p, .lp-essay h3 { color: var(--bg); translate: 0 0.9rem; transition: color 1.1s cubic-bezier(0.4, 0, 0.2, 1), translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp-essay p.in, .lp-essay h3.in { color: var(--text); translate: none; }
.lp-essay .lp-essay-source a { transition: color 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-essay .lp-essay-source:not(.in) a { color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .lp-essay p, .lp-essay h3 { color: var(--text); translate: none; transition: none; } }
/* The snapshot of an essay in a case's picture spot: a page in a lighter
   tone of the site's colour, the title large and centred with its glow, the
   first lines in one column under it, running off the foot of the page. */
.lp-snap { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; aspect-ratio: 3 / 2; overflow: hidden; padding: 9% 14% 0; background: color-mix(in srgb, var(--text) 7%, var(--bg)); color: var(--text); text-align: left; container-type: inline-size; }
.lp-snap-t { display: block; max-width: 14em; margin-bottom: 5cqi; font-family: var(--font-title); font-size: 6.4cqi; line-height: 1.06; text-align: center; text-wrap: balance; text-shadow: 0 0 2cqi color-mix(in srgb, var(--text) 22%, transparent); }
.lp-snap-p { display: block; width: 100%; margin-bottom: 1.6cqi; font-family: var(--font-text); font-size: 2.05cqi; line-height: 1.6; color: color-mix(in srgb, var(--text) 85%, var(--bg)); }
.lp-snap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, color-mix(in srgb, var(--text) 7%, var(--bg))); }
.lp-read { cursor: pointer; }
.lp-open .lp-shown { -webkit-mask: linear-gradient(transparent 0, transparent 2.4rem, #000 5.5rem); mask: linear-gradient(transparent 0, transparent 2.4rem, #000 5.5rem); }
.lp-essay-fig { margin: 2.2em 0; }
.lp-essay-figs { display: flex; gap: 0.6rem; }
.lp-essay-figs img { display: block; flex: 1; min-width: 0; width: 100%; height: auto; }
.lp-essay figcaption { margin-top: 0.6em; color: var(--soft); font-size: 0.88rem; line-height: 1.45; }
.lp-essay .lp-essay-fig { opacity: 0; translate: 0 0.9rem; transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1), translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp-essay .lp-essay-fig.in { opacity: 1; translate: none; }
/* Room under the name for the shapes that reach lower than the tree. */
.lp-foot-logo { margin-bottom: calc((100vw - 2 * var(--pad)) * 0.2146 * 14 / 72); }

/* Clients: their own dark ground, the heading in the middle, and the
   morphing logos set out as a hexagon of rows, 2, 3, 2. */
.lp-hex { --text: var(--e-cream); --soft: var(--e-cream-soft); position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(2rem, 6vh, 4rem); min-height: 260vh; margin: 0; padding: 92vh var(--pad); background: linear-gradient(to bottom, color-mix(in srgb, var(--e-clay) 0.0%, transparent) calc(var(--fade, 100vh) * 0.000), color-mix(in srgb, var(--e-clay) 0.4%, transparent) calc(var(--fade, 100vh) * 0.042), color-mix(in srgb, var(--e-clay) 1.7%, transparent) calc(var(--fade, 100vh) * 0.083), color-mix(in srgb, var(--e-clay) 3.8%, transparent) calc(var(--fade, 100vh) * 0.125), color-mix(in srgb, var(--e-clay) 6.7%, transparent) calc(var(--fade, 100vh) * 0.167), color-mix(in srgb, var(--e-clay) 10.3%, transparent) calc(var(--fade, 100vh) * 0.208), color-mix(in srgb, var(--e-clay) 14.6%, transparent) calc(var(--fade, 100vh) * 0.250), color-mix(in srgb, var(--e-clay) 19.6%, transparent) calc(var(--fade, 100vh) * 0.292), color-mix(in srgb, var(--e-clay) 25.0%, transparent) calc(var(--fade, 100vh) * 0.333), color-mix(in srgb, var(--e-clay) 30.9%, transparent) calc(var(--fade, 100vh) * 0.375), color-mix(in srgb, var(--e-clay) 37.1%, transparent) calc(var(--fade, 100vh) * 0.417), color-mix(in srgb, var(--e-clay) 43.5%, transparent) calc(var(--fade, 100vh) * 0.458), color-mix(in srgb, var(--e-clay) 50.0%, transparent) calc(var(--fade, 100vh) * 0.500), color-mix(in srgb, var(--e-clay) 56.5%, transparent) calc(var(--fade, 100vh) * 0.542), color-mix(in srgb, var(--e-clay) 62.9%, transparent) calc(var(--fade, 100vh) * 0.583), color-mix(in srgb, var(--e-clay) 69.1%, transparent) calc(var(--fade, 100vh) * 0.625), color-mix(in srgb, var(--e-clay) 75.0%, transparent) calc(var(--fade, 100vh) * 0.667), color-mix(in srgb, var(--e-clay) 80.4%, transparent) calc(var(--fade, 100vh) * 0.708), color-mix(in srgb, var(--e-clay) 85.4%, transparent) calc(var(--fade, 100vh) * 0.750), color-mix(in srgb, var(--e-clay) 89.7%, transparent) calc(var(--fade, 100vh) * 0.792), color-mix(in srgb, var(--e-clay) 93.3%, transparent) calc(var(--fade, 100vh) * 0.833), color-mix(in srgb, var(--e-clay) 96.2%, transparent) calc(var(--fade, 100vh) * 0.875), color-mix(in srgb, var(--e-clay) 98.3%, transparent) calc(var(--fade, 100vh) * 0.917), color-mix(in srgb, var(--e-clay) 99.6%, transparent) calc(var(--fade, 100vh) * 0.958), color-mix(in srgb, var(--e-clay) 100.0%, transparent) calc(var(--fade, 100vh) * 1.000), color-mix(in srgb, var(--e-clay) 100.0%, var(--e-white)) calc(100% - var(--fade, 100vh) * 1.000), color-mix(in srgb, var(--e-clay) 99.6%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.958), color-mix(in srgb, var(--e-clay) 98.3%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.917), color-mix(in srgb, var(--e-clay) 96.2%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.875), color-mix(in srgb, var(--e-clay) 93.3%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.833), color-mix(in srgb, var(--e-clay) 89.7%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.792), color-mix(in srgb, var(--e-clay) 85.4%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.750), color-mix(in srgb, var(--e-clay) 80.4%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.708), color-mix(in srgb, var(--e-clay) 75.0%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.667), color-mix(in srgb, var(--e-clay) 69.1%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.625), color-mix(in srgb, var(--e-clay) 62.9%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.583), color-mix(in srgb, var(--e-clay) 56.5%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.542), color-mix(in srgb, var(--e-clay) 50.0%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.500), color-mix(in srgb, var(--e-clay) 43.5%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.458), color-mix(in srgb, var(--e-clay) 37.1%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.417), color-mix(in srgb, var(--e-clay) 30.9%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.375), color-mix(in srgb, var(--e-clay) 25.0%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.333), color-mix(in srgb, var(--e-clay) 19.6%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.292), color-mix(in srgb, var(--e-clay) 14.6%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.250), color-mix(in srgb, var(--e-clay) 10.3%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.208), color-mix(in srgb, var(--e-clay) 6.7%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.167), color-mix(in srgb, var(--e-clay) 3.8%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.125), color-mix(in srgb, var(--e-clay) 1.7%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.083), color-mix(in srgb, var(--e-clay) 0.4%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.042), color-mix(in srgb, var(--e-clay) 0.0%, var(--e-white)) calc(100% - var(--fade, 100vh) * 0.000)); color: var(--text); }
/* The dark comes up out of the page above and goes back to the white foot
   below over a long stretch each way (a full screen), eased gently at both ends of
   each stretch so no line shows where it starts or settles. */
.lp-hex .lp-clients-h { padding: 0; }
.lp-hex .lp-clients-h { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem); line-height: 1.1; color: var(--text); }
.lp-hexgrid { display: flex; flex-direction: column; align-items: center; gap: clamp(0.6rem, 2vh, 1.4rem); }
.lp-hexrow { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.lp-hex .lp-slot { width: clamp(8rem, 15vw, 15rem); min-height: 0; padding: 0; gap: 0.5rem; }
.lp-hex .lp-client-morph { width: 100%; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--e-cream) 45%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--e-cream) 20%, transparent)); }
.lp-hex .lp-slot-name { font-size: 0.78rem; text-align: center; }
@media (max-width: 700px) { .lp-hexrow { gap: 0.6rem; } .lp-hex .lp-slot { width: 21vw; } .lp-hex .lp-slot-name { font-size: 0.62rem; } }
/* The foot: all white, the logo and the pages in dark green under it. */
.lp-footer { position: relative; z-index: 3; height: auto; overflow: visible; flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(1.4rem, 4vh, 2.6rem); background: #fefefc; }
.lp-foot-nav { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-title); font-size: 0.8rem; }
.lp-foot-nav a, .lp-foot-nav .lp-soon { color: var(--e-nav); text-decoration: none; }
.lp-foot-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The pages along the top in dark green wherever the page is light. */
.on-light .lp-top a, .on-light .lp-top .lp-soon, .at-foot .lp-top a, .at-foot .lp-top .lp-soon { color: var(--e-nav); }
.at-foot .lp-view { opacity: 0; pointer-events: none; }
.lp-hexrow { gap: clamp(1.6rem, 5vw, 5rem); }
.lp-hexgrid { gap: clamp(1rem, 3vh, 2.2rem); }
/* The page ends with the foot's row of links: nothing below it. */
.lp-footer { min-height: 0; justify-content: flex-end; padding-top: 16vh; }

/* Glyphs from where you are from: asked first, on a plain square card in
   the middle of the screen, over a light veil the page shows faintly through;
   the glyph on it keeps changing, to show what is meant. */
.lp-place { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: var(--pad); background: color-mix(in srgb, var(--e-paper) 72%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: var(--e-nav); font-family: var(--font-text); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }
.lp-place.on { opacity: 1; pointer-events: auto; }
.lp-place-in { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(26rem, 100%); aspect-ratio: 1; padding: 2.4rem; background: var(--e-card); box-shadow: none; translate: 0 0.8rem; transition: translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lp-place.on .lp-place-in { translate: none; }
.lp-place-g { display: block; width: clamp(6rem, 11vw, 8.5rem); aspect-ratio: 1; margin: 0 auto 1.8rem; }
.lp-place-say { margin: 0; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem); line-height: 1.25; text-wrap: balance; }
.lp-place-do { display: flex; justify-content: center; gap: 2rem; margin-top: 1.4rem; }
/* Once allowed: the seven glyphs they'll see, each with its name under it. */
.lp-place-in.shown { width: min(44rem, 100%); aspect-ratio: auto; padding: clamp(2rem, 5vw, 3.2rem); }
.lp-place-set { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 1.4rem; margin: 1.8rem 0 0.4rem; padding: 0; list-style: none; }
.lp-place-set li { width: 7.5rem; opacity: 0; translate: 0 0.5rem; animation: lp-place-set 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--i) * 110ms); }
.lp-place-set canvas { display: block; width: 4.6rem; aspect-ratio: 1; margin: 0 auto 0.6rem; }
.lp-place-set span { display: block; font-size: 0.9rem; line-height: 1.25; }
@keyframes lp-place-set { to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) { .lp-place-set li { animation: none; opacity: 1; translate: none; } }
.lp-place button { padding: 0.3rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: 1rem; cursor: pointer; text-decoration: underline transparent; text-underline-offset: 0.25em; transition: text-decoration-color 0.3s ease; }
.lp-place button:hover, .lp-place button:focus-visible { text-decoration-color: currentColor; outline: none; }
html.asking { overflow: hidden; }
.asking .f-tool, .asking .controls { opacity: 0; pointer-events: none; }


/* Along the top: on a wide screen only where the viewer is and the time
   there, in the open middle between the two halves of the pages. On a phone
   a row of three: the tree (home) at the left, that place and time in the
   middle, and Menu with its changing glyph at the right; the pages open
   under it in a plain column on the page's colour. */
.lp-bar { display: contents; }
.lp-home, .lp-menu { display: none; }
.lp-where { display: inline-flex; gap: 0.9em; justify-content: center; align-items: baseline; color: inherit; pointer-events: none; font-variant-numeric: tabular-nums; }
.lp-where[hidden] { display: none; }
.lp-top { color: color-mix(in srgb, var(--text) 40%, var(--bg)); }
.on-light .lp-top, .at-foot .lp-top { color: var(--e-nav); }
@media (min-width: 901px) {
  .lp-top .lp-side { grid-row: 1; }
  .lp-top .lp-side:first-of-type { grid-column: 1; }
  .lp-top .lp-where { grid-column: 2; grid-row: 1; }
}
@media (max-width: 700px) {
  .lp-top { flex-direction: column; align-items: stretch; padding: 1.1rem calc(var(--pad) * 1.3); font-size: 0.95rem; }
  .lp-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 1.4rem; }
  .lp-top .lp-side { display: none; }
  .lp-home { display: block; justify-self: start; width: 1.55rem; aspect-ratio: 144 / 142; background: currentColor; -webkit-mask: url("assets/brand/native-logo-trim.png") left center / auto 100% no-repeat; mask: url("assets/brand/native-logo-trim.png") left center / auto 100% no-repeat; pointer-events: auto; }
  .lp-where { justify-content: flex-start; }
  .lp-menu { display: inline-flex; margin-left: auto; align-items: center; gap: 0.55rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; pointer-events: auto; }
  .lp-menu canvas { display: block; width: 1.15rem; height: 1.15rem; }
  .lp-home, .lp-menu { color: var(--text); }
  .lp-where { color: var(--text); }
  .lp-top .lp-home { background-color: currentColor; color: var(--text); }
  /* Open: only the glyph stays, at the top right; the pages are set in two
     small groups, left-aligned, starting a third of the way down. */
  .menu-open .lp-top { bottom: 0; gap: 0; justify-content: flex-start; background: var(--bg); pointer-events: auto; font-size: 1.1rem; }
  .menu-open .lp-bar { font-size: 0.95rem; }
  .menu-open .lp-where { visibility: hidden; }
  .menu-open .lp-top .lp-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-left: 12vw; line-height: 1.3; }
  .menu-open .lp-top .lp-side:first-of-type { margin-top: 28vh; }
  .menu-open .lp-top .lp-side + .lp-side { margin-top: 2.6rem; }
  .menu-open .lp-top a, .menu-open .lp-top .lp-soon { color: var(--text); }
  html.menu-open { overflow: hidden; }
}
.on-light .lp-menu, .at-foot .lp-menu, .on-light .lp-home, .at-foot .lp-home, .on-light .lp-where, .at-foot .lp-where { color: var(--e-nav); }

/* On a phone each case reads top to bottom, centred: the company's logo
   (a little smaller), its line under it, then the picture of the work. */
@media (max-width: 700px) {
  .lp-block, .hero-top .lp-block { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
  .lp-block .lp-cap, .hero-top .lp-cap, .hero-top .lp-flip .lp-cap { order: -1; margin: 0; text-align: center; }
  .lp-block .lp-pic { width: 100%; aspect-ratio: auto; height: calc(min(78vw, 420px) / 1.5); display: flex; align-items: center; justify-content: center; }
  .lp-block .lp-pic > img, .lp-block .lp-pic > video { width: auto; max-width: 100%; max-height: 100%; }
  .lp-cap .lp-visit { display: table; margin-left: auto; margin-right: auto; }
  .hero-top .lp-cap .lp-mark, .lp-cap .lp-mark { width: 84%; margin: 0 auto 0.9rem; scale: 1; translate: none; }
  .hero-top .lp-cap .line { font-size: 1.02rem; }
}

/* Written case studies: the title a step smaller, still centred; on a phone
   the text sits in from the edges with more room either side. */
.lp-essay h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.6rem); text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
  .lp-essay { width: calc(100% - 3.4rem); margin-left: auto; margin-right: auto; }
  .lp-essay h2 { font-size: 1.85rem; line-height: 1.12; }
}

/* On a phone the work is the index alone (no Scroll / Index switch), each
   company set in the middle: its logo, its name under it, then its line. */
@media (max-width: 700px) {
  .lp-view { display: none; }
  .lp-row { justify-items: center; text-align: center; gap: 0.5rem; }
  .lp-row-name { flex-direction: column; gap: 0.7rem; }
  .lp-row-mark { width: 9.5rem; }
  .lp-row-view { display: block; justify-self: center; opacity: 1; margin-top: 0.3rem; }
}

/* Clients & Collaborators: a small title, and the logos scattered loosely
   over the dark rather than set out in rows. */
.lp-scatter .lp-clients-h { font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem); }
.lp-scattered { position: relative; width: min(92vw, 78rem); height: clamp(30rem, 74vh, 46rem); }
.lp-scattered .lp-slot { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; width: clamp(7rem, 11.5vw, 12rem); }
@media (max-width: 700px) {
  .lp-scattered { width: calc(100vw - 2 * var(--pad)); height: 118vh; max-height: 64rem; }
  .lp-scattered .lp-slot { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: 34vw; }
  .lp-scatter .lp-hex .lp-slot-name, .lp-scattered .lp-slot-name { font-size: 0.68rem; }
}

/* About: the home page's sentences again, in three paragraphs. */
.ab-page .wr-head p + p { margin-top: 1em; }

/* On a phone every line of text is one size (headings, sentences, lines
   under the work, essays, menus), and the foot has no row of pages. */
@media (max-width: 700px) {
  body, body h1, body h2, body h3, body h4, body h5, body p, body li, body a, body button, body span, body time, body figcaption, body blockquote, body input, body div, body .lp-line, body .line, body .lp-row-name, body .lp-essay h2 { font-size: 0.95rem !important; }
  body .wr-body *, body .lp-essay * { line-height: 1.6; }
  /* Titles (pages, essays, their sections, the companies' names): one size,
     a step above the text, the same everywhere. */
  body h1, body h2, body h3, body .lp-row-name, body .lp-essay h2, body .lp-essay h3, body .wr-head h1, body .lp-row-name span, body .wr-title, body .lp-works-info h2 { font-size: 1.35rem !important; line-height: 1.2; }
  body .lp-clients-h, body .ab h2, body .ab-clients h2 { font-size: 0.95rem !important; }
  .lp-foot-nav { display: none; }
}

/* A case opened: its pictures large in a single row, side by side, swiped or scrolled through
   (each comes to rest in the middle), and under them, in the middle, its
   name with its line. */
.lp-open .lp-shown.lp-works { padding-left: 0; padding-right: 0; }
.lp-open .lp-shown .lp-works-info { width: min(100% - 2 * var(--pad), 34rem); margin: clamp(2.5rem, 8vh, 5rem) auto 0; text-align: center; }
.lp-works-info p { margin-left: auto; margin-right: auto; }
.lp-gallery, .lp-gallery:not(:has(figure:nth-of-type(4))) { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: clamp(0.6rem, 1.2vw, 1rem); max-width: none; margin: 0; padding: 0 max(var(--pad), 8vw) 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 max(var(--pad), 8vw); overscroll-behavior-x: contain; scrollbar-width: none; }
.lp-gallery::-webkit-scrollbar { display: none; }
.lp-gallery::after { display: none; }
.lp-gallery figure { flex: 0 0 auto; width: min(78vw, calc(var(--r) * min(64vh, 44rem))); height: auto; aspect-ratio: var(--r); scroll-snap-align: center; }
.lp-gallery:has(figure:only-of-type) { justify-content: center; }
@media (max-width: 700px) {
  .lp-gallery figure { width: min(84vw, calc(var(--r) * 58vh)); }
}

/* Services: the writing and the design, each under its own small label. */
.ab-service + .ab-service { margin-top: 1.4rem; }
.ab-service-h { margin: 0 0 0.4rem; color: var(--soft); }
.ab-service ul { margin: 0; }

/* An opened case's name always in the page's own ink; on a phone, room
   above it for Close. */
.lp-works-info h2 { color: var(--text); }
@media (max-width: 700px) {
  .lp-open .lp-shown.lp-works { padding-top: 4.2rem; }
  .lp-open .lp-close { top: 0.9rem; right: auto; left: calc(var(--pad) * 1.3); }
}

@media (min-width: 701px) { .lp-open .lp-shown.lp-works { padding-top: clamp(5rem, 12vh, 8rem); } }

/* The row of pages at the foot is laid out just as the one at the top:
   three each side of an open middle, spread evenly across each half. */
@media (min-width: 901px) {
  .lp-foot-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(24rem, 30vw) minmax(0, 1fr); align-items: baseline; padding: 0 calc(var(--pad) * 1.2 - var(--pad)); }
  .lp-foot-nav .lp-side { display: flex; justify-content: space-between; align-items: baseline; }
  .lp-foot-nav .lp-side + .lp-side { grid-column: 3; }
}

/* With the ground kept still, the foot is that same tinted paper, and the
   dark of the companies fades back into it. */
.bg-still .lp-footer { background: var(--e-paper); }
.bg-still .lp-hex { background: linear-gradient(to bottom, color-mix(in srgb, var(--e-clay) 0.0%, transparent) calc(var(--fade, 100vh) * 0.000), color-mix(in srgb, var(--e-clay) 0.4%, transparent) calc(var(--fade, 100vh) * 0.042), color-mix(in srgb, var(--e-clay) 1.7%, transparent) calc(var(--fade, 100vh) * 0.083), color-mix(in srgb, var(--e-clay) 3.8%, transparent) calc(var(--fade, 100vh) * 0.125), color-mix(in srgb, var(--e-clay) 6.7%, transparent) calc(var(--fade, 100vh) * 0.167), color-mix(in srgb, var(--e-clay) 10.3%, transparent) calc(var(--fade, 100vh) * 0.208), color-mix(in srgb, var(--e-clay) 14.6%, transparent) calc(var(--fade, 100vh) * 0.250), color-mix(in srgb, var(--e-clay) 19.6%, transparent) calc(var(--fade, 100vh) * 0.292), color-mix(in srgb, var(--e-clay) 25.0%, transparent) calc(var(--fade, 100vh) * 0.333), color-mix(in srgb, var(--e-clay) 30.9%, transparent) calc(var(--fade, 100vh) * 0.375), color-mix(in srgb, var(--e-clay) 37.1%, transparent) calc(var(--fade, 100vh) * 0.417), color-mix(in srgb, var(--e-clay) 43.5%, transparent) calc(var(--fade, 100vh) * 0.458), color-mix(in srgb, var(--e-clay) 50.0%, transparent) calc(var(--fade, 100vh) * 0.500), color-mix(in srgb, var(--e-clay) 56.5%, transparent) calc(var(--fade, 100vh) * 0.542), color-mix(in srgb, var(--e-clay) 62.9%, transparent) calc(var(--fade, 100vh) * 0.583), color-mix(in srgb, var(--e-clay) 69.1%, transparent) calc(var(--fade, 100vh) * 0.625), color-mix(in srgb, var(--e-clay) 75.0%, transparent) calc(var(--fade, 100vh) * 0.667), color-mix(in srgb, var(--e-clay) 80.4%, transparent) calc(var(--fade, 100vh) * 0.708), color-mix(in srgb, var(--e-clay) 85.4%, transparent) calc(var(--fade, 100vh) * 0.750), color-mix(in srgb, var(--e-clay) 89.7%, transparent) calc(var(--fade, 100vh) * 0.792), color-mix(in srgb, var(--e-clay) 93.3%, transparent) calc(var(--fade, 100vh) * 0.833), color-mix(in srgb, var(--e-clay) 96.2%, transparent) calc(var(--fade, 100vh) * 0.875), color-mix(in srgb, var(--e-clay) 98.3%, transparent) calc(var(--fade, 100vh) * 0.917), color-mix(in srgb, var(--e-clay) 99.6%, transparent) calc(var(--fade, 100vh) * 0.958), color-mix(in srgb, var(--e-clay) 100.0%, transparent) calc(var(--fade, 100vh) * 1.000), color-mix(in srgb, var(--e-clay) 100.0%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 1.000), color-mix(in srgb, var(--e-clay) 99.6%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.958), color-mix(in srgb, var(--e-clay) 98.3%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.917), color-mix(in srgb, var(--e-clay) 96.2%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.875), color-mix(in srgb, var(--e-clay) 93.3%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.833), color-mix(in srgb, var(--e-clay) 89.7%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.792), color-mix(in srgb, var(--e-clay) 85.4%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.750), color-mix(in srgb, var(--e-clay) 80.4%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.708), color-mix(in srgb, var(--e-clay) 75.0%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.667), color-mix(in srgb, var(--e-clay) 69.1%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.625), color-mix(in srgb, var(--e-clay) 62.9%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.583), color-mix(in srgb, var(--e-clay) 56.5%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.542), color-mix(in srgb, var(--e-clay) 50.0%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.500), color-mix(in srgb, var(--e-clay) 43.5%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.458), color-mix(in srgb, var(--e-clay) 37.1%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.417), color-mix(in srgb, var(--e-clay) 30.9%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.375), color-mix(in srgb, var(--e-clay) 25.0%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.333), color-mix(in srgb, var(--e-clay) 19.6%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.292), color-mix(in srgb, var(--e-clay) 14.6%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.250), color-mix(in srgb, var(--e-clay) 10.3%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.208), color-mix(in srgb, var(--e-clay) 6.7%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.167), color-mix(in srgb, var(--e-clay) 3.8%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.125), color-mix(in srgb, var(--e-clay) 1.7%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.083), color-mix(in srgb, var(--e-clay) 0.4%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.042), color-mix(in srgb, var(--e-clay) 0.0%, var(--e-paper)) calc(100% - var(--fade, 100vh) * 0.000)); }

/* An opened case fits its pictures and its name and line on one screen,
   the words well clear of the bottom edge. */
.lp-gallery figure { width: min(78vw, calc(var(--r) * min(54vh, 40rem))); }
.lp-open .lp-shown .lp-works-info { margin-top: clamp(1.8rem, 5vh, 3.2rem); }
@media (min-width: 701px) { .lp-open .lp-shown.lp-works { padding-top: clamp(4rem, 9vh, 6rem); padding-bottom: 16vh; } }
@media (max-width: 700px) {
  .lp-gallery figure { width: min(84vw, calc(var(--r) * 46vh)); }
  .lp-open .lp-shown.lp-works { padding-top: 3.6rem; padding-bottom: 18vh; }
  .lp-open .lp-shown .lp-works-info { margin-top: 1.6rem; }
}

/* The pages along the top float over everything with no ground of their
   own: an opened case or essay fills the whole screen and scrolls up
   underneath them. */
.lp-open { inset: 0; }
.lp-open .lp-shown { -webkit-mask: none; mask: none; }
.lp-open .lp-shown.lp-essay { padding-top: clamp(5rem, 12vh, 8rem); }
.lp-top { background: none; }

/* Over the dark of Trusted by the pages along the top turn a glowing white,
   easing over as the ground darkens and back as it lightens. */
.lp-top a, .lp-top .lp-soon, .lp-where { transition: color 0.9s ease, text-shadow 0.9s ease; }
.nav-dark .lp-top a, .nav-dark .lp-top .lp-soon, .nav-dark .lp-where, .nav-dark .lp-top .lp-menu { color: var(--e-cream); text-shadow: 0 0 10px color-mix(in srgb, var(--e-cream) 55%, transparent), 0 0 22px color-mix(in srgb, var(--e-cream) 25%, transparent); }
.nav-dark.menu-open .lp-top a, .nav-dark.menu-open .lp-top .lp-soon { color: var(--text); text-shadow: none; }

/* Earth palette: a warm sand paper, umber ink, terracotta glyphs, a deep
   clay ground for Trusted by with cream logos, and an ochre haze round the
   glyphs. No green anywhere. */
.bg-still .lp-emblem, .bg-still.on-light .lp-emblem { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--e-haze) 28%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--e-haze) 16%, transparent)); }
.bg-still .lp-visit { text-decoration-color: color-mix(in srgb, var(--e-haze) 90%, transparent); }

/* The palette, as variables, so the colours can be swapped in one place
   (and live, from the palette explorer: add ?palettes to the address). */
:root { --e-paper: #e7eaf3; --e-ink: #0c0e11; --e-ink-soft: #3a4353; --e-nav: #12151a; --e-glyph: #0a0d12; --e-clay: #0c1116; --e-cream: #e7eaf3; --e-cream-soft: #b5bccb; --e-haze: #9aa6c4; --e-card: #f4f6fa; --e-white: #fefefc; }

/* The palette explorer (?palettes): a small panel at the bottom left. */
.pal-tool { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; width: 15rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: 0.9rem 1rem; background: var(--e-card); color: var(--e-ink); font: 0.8rem/1.3 var(--font-text); box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.12); }
.pal-h { display: block; margin: 0 0 0.5rem; padding: 0; border: 0; background: none; color: var(--e-ink-soft); font: inherit; cursor: pointer; }
.pal-tool[data-folded] { width: auto; }
.pal-tool[data-folded] > :not(.pal-h) { display: none; }
.pal-tool[data-folded] .pal-h { margin: 0; }
.pal-list { margin: 0; padding: 0; list-style: none; }
.pal-list button, .pal-do button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.3rem 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pal-list button:hover, .pal-do button:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.pal-sw { display: inline-flex; flex: none; }
.pal-sw i { width: 0.8rem; height: 0.8rem; border-radius: 50%; margin-right: -0.2rem; box-shadow: 0 0 0 1.5px var(--e-card); }
.pal-do { margin-top: 0.7rem; }
.pal-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.6rem; margin-top: 0.7rem; }
.pal-pick label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.pal-pick input { width: 1.4rem; height: 1.4rem; padding: 0; border: 0; background: none; cursor: pointer; }

/* The morphing logos (case studies, index, Trusted by, About) and the
   glyphs: only the faintest glow, close in, no shadow spreading behind. */
.lp-cap .lp-mark, .hero-top .lp-cap .lp-mark, .hero-top .lp-float[data-here] .lp-cap .lp-mark, .lp-row-mark, .lp-client-morph { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--case-glow, var(--text)) 18%, transparent)); }
.lp-hex .lp-client-morph { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--e-cream) 30%, transparent)); }
.bg-still .lp-emblem, .bg-still.on-light .lp-emblem, .hero-top .lp-emblem { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--e-haze) 14%, transparent)); }

/* The opening folded away once the work is reached: the sentences go, and
   above the work sit the first sentence and a link to play them again. Skip
   sits along the bottom while the sentences play. */
.lp-fold { display: none; }
.folded .lp-hero, .folded .lp-step { display: none; }
.folded .lp-fold { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; width: min(100% - 2 * var(--pad), 34rem); margin: 0 auto; padding: calc(var(--head-h, 12vh) + 16vh) 0 0; text-align: center; }
.lp-fold p { margin: 0; color: var(--text); font-size: 1.12rem; line-height: 1.55; }
.lp-replay, .lp-skip { padding: 0.3rem 0; border: 0; background: none; color: var(--soft); font-family: var(--font-title); font-size: 0.85rem; cursor: pointer; transition: color 0.4s ease, opacity 0.6s ease; }
.lp-replay:hover, .lp-skip:hover { color: var(--text); }
.folded .lp-index { padding-top: 14vh; }
.folded .lp-floats { padding-top: 10vh; }
.lp-skip { position: fixed; left: 50%; bottom: calc(var(--pad) * 1.2); z-index: 30; translate: -50% 0; opacity: 0; pointer-events: none; }
.can-skip .lp-skip { opacity: 1; pointer-events: auto; }
.menu-open .lp-skip, .asking .lp-skip { opacity: 0; pointer-events: none; }
@media (max-width: 600px) { .lp-fold p { font-size: 0.95rem; } }

/* A written case study's square: the pulled line large in the middle, the
   piece's title small under it. */
.lp-snap.lp-quote { justify-content: center; gap: 5cqi; padding: 8% 10%; text-align: center; }
.lp-snap.lp-quote::after { display: none; }
.lp-quote-q { display: block; max-width: 22em; font-family: var(--font-text); font-size: 6.6cqi; line-height: 1.25; text-wrap: balance; color: var(--text); }
.lp-quote-t { display: block; max-width: 30em; font-family: var(--font-title); font-size: 3.4cqi; line-height: 1.3; text-wrap: balance; color: var(--soft); }

/* Inquire, above the footer's logo and as wide as it: a heading and one
   line to write an email on. */
.lp-ask { width: 100%; margin: 0 0 clamp(4rem, 12vh, 8rem); }
.lp-ask-h { display: block; margin-bottom: 1.2rem; font-family: var(--font-title); font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.8rem); line-height: 1.2; color: var(--text); }
.lp-ask-line { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--text); }
.lp-ask input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font-family: var(--font-text); font-size: 1.12rem; outline: none; }
.lp-ask input::placeholder { color: var(--soft); }
.lp-ask button { padding: 0; border: 0; background: none; color: var(--soft); font-family: var(--font-title); font-size: 0.95rem; cursor: pointer; transition: color 0.4s ease; }
.lp-ask button:hover, .lp-ask input:focus + button { color: var(--text); }
.lp-ask-bad .lp-ask-line { border-bottom-color: var(--e-clay, var(--text)); }
@media (max-width: 600px) { .lp-ask-h { font-size: 1.35rem; } .lp-ask input { font-size: 0.95rem; } }

/* About: the same narrow column, the words set from the left. */
.ab-page, .ab-page .wr-head, .ab-page .ab.ab-in { text-align: left; }
.ab-page .ab-places { display: flex; }
.ab-page .wr-head p { margin-left: 0; margin-right: 0; }
.ab-page .pg-emblem { margin-left: 0; }
/* About's words set square: both edges straight, hyphenated where needed. */
.ab-page .wr-head p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; }

/* About: the shape and title in the middle, the words set square under them. */
.ab-page .pg-emblem { margin-left: auto; }
.ab-page .wr-head h1 { text-align: center; }

/* Writing: the shape and title in the middle; the pieces as an index in the
   same narrow column, each with its title and date on the left and a line
   pulled from it, then its description, on the right. */
.wr-index { margin-top: 1.4rem; text-align: left; }
.wr-item.wr-row-i { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0 2rem; margin-top: 3rem; }
.wr-row-i .wr-side { display: flex; flex-direction: column; gap: 0.5rem; }
.wr-row-i .wr-title { font-size: 1.05rem; }
.wr-row-i .wr-meta { display: flex; flex-direction: column; gap: 0.15rem; justify-content: flex-start; margin: 0; font-size: 0.8rem; }
.wr-row-i .wr-main { display: flex; flex-direction: column; gap: 0.6rem; }
.wr-quote { font-family: var(--font-text); font-size: 1.25rem; line-height: 1.35; color: var(--text); text-wrap: pretty; }
.wr-row-i .wr-dek { margin: 0; font-size: 0.95rem; }
@media (max-width: 600px) {
  .wr-item.wr-row-i { grid-template-columns: 1fr; gap: 0.7rem; margin-top: 2.6rem; }
  .wr-row-i .wr-meta { flex-direction: row; gap: 0.2rem 0.8rem; }
  .wr-quote { font-size: 1.1rem !important; }
}
.lp-ask-place { display: block; margin-top: 1.4rem; padding: 0; border: 0; background: none; color: var(--soft); font-family: var(--font-title); font-size: 0.95rem; cursor: pointer; transition: color 0.4s ease; }
.lp-ask-place:hover { color: var(--text); }
/* Ten glyphs in the card: two rows of five on a wide screen. */
.lp-place-set { max-width: 44rem; margin-left: auto; margin-right: auto; gap: 1.4rem 1rem; }
.lp-place-set li { width: 7.2rem; }
.lp-fold-tree { display: block; width: clamp(4.6rem, 12vh, 7rem); height: auto; aspect-ratio: 1; }

/* Home in the top left: the tree, small, in the links' colour. */
.lp-home { display: inline-flex; align-items: center; text-box: none !important; }
.nav-home { display: block; width: 1.9rem; height: 1.9rem; margin: -0.5rem 0; translate: 0 0.72rem; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.menu-open .nav-home { width: 2.6rem; height: 2.6rem; margin: 0; }
.lp-place-in.shown { width: min(49rem, 100%); }
.lp-place-set { max-width: 42rem; }
.menu-open .nav-home { translate: none; }
.ab-page .wr-head p { margin-left: auto; margin-right: auto; }
.nav-home { flex: none; } .lp-home { min-width: 1.9rem; overflow: visible; } .menu-open .lp-home { min-width: 2.6rem; }

/* About: who to write to. */
.ab-mail { margin: 0; padding: 0; list-style: none; }
.ab-mail li + li { margin-top: 0.4rem; }
.ab-mail a { color: var(--text); }

/* Writing: each piece's pulled line large above its row, with room around. */
.wr-item.wr-row-i { display: block; margin-top: 5rem; }
.wr-index .wr-item.wr-row-i:first-child { margin-top: 3.4rem; }
.wr-row-i .wr-quote { display: block; margin-bottom: 1.6rem; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.85rem); line-height: 1.28; text-wrap: balance; }
.wr-row-b { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0 2rem; }
@media (max-width: 600px) {
  .wr-item.wr-row-i { margin-top: 3.6rem; }
  .wr-row-i .wr-quote { font-size: 1.35rem !important; margin-bottom: 1.1rem; }
  .wr-row-b { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* The light and dark dot, bottom right. */
.lp-mode { position: fixed; right: var(--pad); bottom: calc(var(--pad) * 1.2); z-index: 31; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; }
.nav-mode { display: block; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; transition: rotate 0.6s ease; }
.lp-mode:hover .nav-mode { rotate: 30deg; }
.nav-dark .lp-mode { color: var(--e-cream); }
.asking .lp-mode, .menu-open .lp-mode { opacity: 0; pointer-events: none; }

/* Dark mode: the glyphs a little aglow. */
.dark .lp-emblem, .dark .lp-mark, .dark .lp-client-morph, .dark .lp-foot-tree, .dark .lp-place-g, .dark .lp-place-set canvas, .dark .ab-place-g, .dark .lp-row-mark {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--e-glyph) 55%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--e-glyph) 25%, transparent));
}
.dark .nav-home, .dark .nav-mode, .dark .lp-menu canvas { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--text) 40%, transparent)); }

/* Close, as a crossed glyph. */
.lp-close { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; color: var(--text); }
.x-g { display: block; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--x-g) center / contain no-repeat; mask: var(--x-g) center / contain no-repeat; transition: rotate 0.5s ease; }
.lp-close:hover .x-g { rotate: 90deg; }
.dark .x-g { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--text) 40%, transparent)); }
/* In dark mode Trusted by is light, so the links over it go dark, unlit. */
.dark.nav-dark .lp-top a, .dark.nav-dark .lp-where, .dark.nav-dark .lp-top .lp-menu { text-shadow: none; }

/* The light and dark dot at the top, just before the place and time. */
.lp-mid { display: inline-flex; align-items: center; gap: 0.8em; pointer-events: auto; }
@media (min-width: 901px) { .lp-top .lp-mid { grid-column: 2; grid-row: 1; justify-self: center; } }
.lp-mode { position: static; width: 1.4rem; height: 1.4rem; margin: -0.3rem 0; color: inherit; }
.nav-mode { width: 0.95rem; height: 0.95rem; }
.nav-dark .lp-mode { color: inherit; }
.asking .lp-mode { opacity: 1; pointer-events: auto; }
@media (max-width: 700px) {
  .lp-mid { color: var(--text); }
  .menu-open .lp-mid .lp-mode { visibility: hidden; }
}
@media (min-width: 901px) { .lp-top .lp-mid { translate: 0 0.25rem; } }

/* The place card: a fine border with a soft glow round it. */
.lp-place-in { border: 1px solid color-mix(in srgb, var(--e-glyph) 35%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--e-haze) 45%, transparent), 0 0 46px color-mix(in srgb, var(--e-haze) 25%, transparent); }

/* The place and time at the top open the card again. */
.lp-where { pointer-events: auto; cursor: pointer; }
.lp-where:hover { color: var(--text); }

/* The footer glyph's name, above it, and a line about it when clicked. */
.lp-foot-logo { position: relative; }
.lp-foot-name { position: absolute; left: 0; width: calc(21.46% * 100 / 72); bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.055); padding: 0; border: 0; background: none; color: var(--text); font-family: var(--font-title); font-size: 1.05rem; text-align: center; cursor: pointer; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.lp-foot-name.on { opacity: 1; pointer-events: auto; }
.lp-foot-tree.lp-foot-live { cursor: pointer; }
.lp-glyph-info { position: absolute; left: 0; bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.055 + 2.6rem); z-index: 2; width: min(24rem, 100%); padding: 1.6rem 1.8rem 1.7rem; background: var(--e-card); color: var(--e-ink); text-align: left; opacity: 0; translate: 0 0.5rem; transition: opacity 0.4s ease, translate 0.4s ease;
  border: 1px solid color-mix(in srgb, var(--e-glyph) 35%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--e-haze) 45%, transparent), 0 0 46px color-mix(in srgb, var(--e-haze) 25%, transparent); }
.lp-glyph-info.on { opacity: 1; translate: none; }
.lp-glyph-info h3 { margin: 0 2rem 0.6rem 0; font-family: var(--font-title); font-weight: 400; font-size: 1.2rem; }
.lp-glyph-info p { margin: 0; color: var(--e-ink-soft); font-size: 0.95rem; line-height: 1.5; }
.lp-glyph-info .lp-close { position: absolute; top: 0.7rem; right: 0.7rem; }
@media (max-width: 700px) { .lp-foot-name { font-size: 0.85rem; } .lp-glyph-info { width: 100%; } }
/* Room between Inquire and the footer glyph for its name and note. */
@media (min-width: 701px) { .lp-ask { margin-bottom: clamp(6rem, 14vh, 9rem); } }
@media (max-width: 700px) { .lp-ask { margin-bottom: 6rem; } }

/* Writing: a wider column for the index; the heading stays narrow. */
.wr-list:has(.wr-index) { width: min(100% - 2 * var(--pad), 64rem); }
.wr-list:has(.wr-index) .wr-head p { max-width: 30em; }
.wr-row-b { grid-template-columns: 14rem minmax(0, 1fr); gap: 0 3rem; }
.wr-row-i .wr-quote { max-width: 34em; }
.wr-row-i .wr-dek { max-width: 36em; }
@media (max-width: 600px) { .wr-row-b { grid-template-columns: 1fr; gap: 0.6rem; } }
/* The glyph's note opens as a small card in the middle of the screen. */
.lp-glyph-info { position: fixed; left: 50%; top: 50%; bottom: auto; z-index: 60; width: min(26rem, calc(100vw - 2 * var(--pad))); translate: -50% calc(-50% + 0.5rem); }
.lp-glyph-info.on { translate: -50% -50%; }
/* In the index, a written case study's pulled line, larger, above its description. */
.lp-row-quote { display: block; margin-bottom: 0.6rem; color: var(--text); font-family: var(--font-text); font-size: 1.25rem; line-height: 1.35; text-wrap: balance; }
@media (max-width: 700px) { .lp-row-quote { font-size: 1.1rem !important; } }



/* The footer glyph's snapshot: on pointing at it (a tap on a phone), a small
   glowing card just above it. */
.lp-glyph-info { position: absolute; left: 1%; top: auto; bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.02); translate: 0 0.5rem; width: min(22rem, 92%); padding: 1.3rem 1.5rem 1.4rem; }
.lp-glyph-info.on { translate: none; }
.lp-glyph-info h3 { margin: 0 0 0.5rem; }
.lp-glyph-why { margin-top: 0.7rem !important; color: var(--e-ink) !important; }
.lp-glyph-go { margin-top: 0.9rem; padding: 0; border: 0; background: none; color: var(--e-ink); font-family: var(--font-title); font-size: 0.95rem; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.lp-foot-tree { cursor: pointer; }

.lp-hex > * { position: relative; z-index: 1; }
.lp-glyph-info { left: calc(21.46% * 100 / 72 + 0.5rem); bottom: 38%; }
@media (max-width: 700px) { .lp-glyph-info { left: 0; bottom: calc(100% + 1rem); width: 100%; } }

/* The pulled lines in the Writing index, a size down. */
.wr-row-i .wr-quote { font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem); margin-bottom: 1.2rem; }
@media (max-width: 600px) { .wr-row-i .wr-quote { font-size: 1.1rem !important; } }


/* Images keep the page's tint until pointed at, everywhere: the work, the
   opened cases and the written case studies. */
.lp-block:hover .lp-pic::after, .lp-block:focus-visible .lp-pic::after { opacity: 0; }
.lp-gallery figure, .lp-essay-figs { position: relative; isolation: isolate; }
.lp-gallery figure::after, .lp-essay-figs::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: color; pointer-events: none; transition: opacity 0.9s ease; }
.lp-gallery figure:hover::after, .lp-essay-figs:hover::after { opacity: 0; }

/* The footer glyph's name above it, written in as each glyph comes. */
.lp-foot-name { position: absolute; left: 0; width: calc(21.46% * 100 / 72); bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.05); color: var(--text); font-family: var(--font-title); font-size: 1.05rem; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.lp-foot-name.on { opacity: 1; }
.lp-foot-name span { display: inline-block; white-space: pre; opacity: 0; filter: blur(6px); }
.lp-foot-name.on span { animation: foot-name 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--c) * 40ms); }
@keyframes foot-name { to { opacity: 1; filter: none; } }
@media (max-width: 700px) { .lp-foot-name { font-size: 0.85rem; } }

/* A small card behind Scroll and Index, for contrast. */
.lp-view { padding: 0.35rem 1.1rem; background: color-mix(in srgb, var(--e-card) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* The top bar: a veil of the paper behind it and one thin line under it. */
.lp-top { background: color-mix(in srgb, var(--e-paper) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent); transition: background-color 0.9s ease, border-color 0.9s ease; }
.nav-dark .lp-top { background: color-mix(in srgb, var(--e-clay) 60%, transparent); border-bottom-color: color-mix(in srgb, var(--e-cream) 16%, transparent); }
.menu-open .lp-top { border-bottom: 0; }
.lp-foot-name { bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.012); }
@media (max-width: 700px) { .lp-foot-name { bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.02); } }
.lp-foot-name { width: max-content; translate: -50% 0; white-space: nowrap; }

.main { position: relative; z-index: 1; }

/* The footer name, written in over the morph (as long as the glyph takes to change). */
.lp-foot-name { transition: opacity 0.5s ease, left 1.5s cubic-bezier(0.4, 0, 0.2, 1), bottom 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-foot-name.on span span { animation-duration: 1.2s; animation-delay: calc(var(--c) * 28ms); }

/* Writing index: wide, a thin line between pieces and under each pulled line. */
.wr-list:has(.wr-index) { width: min(100% - 2 * var(--pad), 72rem); }
.wr-item.wr-row-i, .wr-index .wr-item.wr-row-i:first-child { margin-top: 0; padding: 2.6rem 0 2.8rem; border-top: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.wr-index { margin-top: 3rem; border-bottom: 1px solid color-mix(in srgb, var(--text) 16%, transparent); }
.wr-row-i .wr-quote { max-width: none; padding-bottom: 1.3rem; margin-bottom: 1.3rem; border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
@media (max-width: 600px) { .wr-item.wr-row-i, .wr-index .wr-item.wr-row-i:first-child { padding: 2rem 0 2.2rem; } }

/* Writing index, one line per piece: title at the left, who wrote it in the
   middle, the date at the right, under its pulled line. */
.wr-line3 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1.5rem; }
.wr-line3 .wr-title { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem) !important; color: var(--text); }
.wr-line3 .wr-by { color: var(--soft); font-size: 0.95rem; text-align: center; }
.wr-line3 .wr-date { color: var(--soft); font-size: 0.95rem; text-align: right; }
.wr-row-i .wr-quote { color: var(--soft); font-size: clamp(1.05rem, 1rem + 0.2vw, 1.18rem); padding-bottom: 1rem; margin-bottom: 1rem; }
.wr-item.wr-row-i, .wr-index .wr-item.wr-row-i:first-child { padding: 1.8rem 0 1.9rem; border-top-color: color-mix(in srgb, var(--e-glyph) 30%, transparent); }
.wr-index { border-bottom-color: color-mix(in srgb, var(--e-glyph) 30%, transparent); }
a.wr-item.wr-row-i:hover .wr-quote { color: var(--text); }
@media (max-width: 600px) { .wr-line3 { grid-template-columns: 1fr; gap: 0.3rem; } .wr-line3 .wr-by, .wr-line3 .wr-date { text-align: left; font-size: 0.85rem; } .wr-row-i .wr-quote { font-size: 1rem !important; } }
/* The footer name holds still: centred over the glyph's square, just above it. */
.lp-foot-name { left: calc(21.46% * 100 / 72 / 2) !important; bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.018) !important; transition: opacity 0.5s ease; }
@media (max-width: 700px) { .lp-foot-name { bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.03) !important; } }
/* The footer name centred on the glyph's own square (which starts a little
   left of the logo box), just inside its top. */
.lp-foot-name { left: calc(21.46% * 100 / 72 / 2 - 21.46% * 14 / 72) !important; bottom: calc(100% - (100vw - 2 * var(--pad)) * 0.004) !important; }
@media (max-width: 700px) { .lp-foot-name { bottom: calc(100% + (100vw - 2 * var(--pad)) * 0.004) !important; } }
/* The word at the foot printed in the glyphs' flecked ink. */
.lp-foot-word { -webkit-mask: url("assets/brand/native-wordmark-foot.png") center bottom / contain no-repeat, var(--fleck) 0 0 / 256px repeat; -webkit-mask-composite: source-in; mask: url("assets/brand/native-wordmark-foot.png") center bottom / contain no-repeat, var(--fleck) 0 0 / 256px repeat; mask-composite: intersect; }
.dark .lp-foot-word { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--e-glyph) 55%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--e-glyph) 25%, transparent)); }

/* Top bar: the tree small, and all seven (tree, Work, About, sun, Writing, Media, Contact) evenly spaced in one row. */
@media (min-width: 901px) {
  html:not(.work-split) .lp-top:not(.x) { display: flex; justify-content: space-between; align-items: center; }
  html:not(.work-split) .lp-top .lp-side { display: contents; }
  html:not(.work-split) .lp-top .lp-mid { order: 3; translate: none; }
  html:not(.work-split) .lp-top .lp-side + .lp-side > * { order: 4; }
  .lp-top .nav-home { width: 1rem; height: 1rem; margin: 0; translate: 0 -0.05rem; }
  .lp-top .lp-home { min-width: 0; }
}

/* Phone: the logos scattered over about one screen, not a long column. */
@media (max-width: 700px) {
  .lp-scattered { height: 160vw; max-height: 42rem; }
  .lp-scattered .lp-slot { width: 27vw; }
}

/* Phone: the About sentences smaller, in a narrower square under the title. */
@media (max-width: 700px) {
  body .ab-page .wr-head p { max-width: 19rem; margin-left: auto; margin-right: auto; font-size: 0.82rem !important; line-height: 1.6; }
}
.nav-dark .lp-top .lp-mode { color: var(--e-cream); }
.nav-dark.menu-open .lp-top .lp-mode { color: inherit; }

/* ===================================================================
   2026-11: the reading room (Writing) and the seal (Inquire).
   =================================================================== */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --wide: min(100% - 2 * var(--pad) * 2.2, 84rem); }

/* Writing, the reading room ------------------------------------------- */
.wr-room { width: var(--wide); margin: 0 auto; padding: calc(var(--head-h, 50px) + clamp(3rem, 9vh, 6rem)) 0 16vh; }
.wr-mast { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: baseline; padding-bottom: clamp(2rem, 6vh, 3.6rem); }
.wr-mast h1 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1; }
.wr-mast p { max-width: 34em; margin: 0; color: var(--soft); font-size: 1.02rem; line-height: 1.55; }
.wr-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: start; }

/* The stage: held still at the left while the list scrolls past it. */
.wr-stage { position: sticky; top: calc(var(--head-h, 50px) + 4vh); display: flex; flex-direction: column; gap: clamp(1.2rem, 3vh, 2rem); min-height: min(68vh, 36rem); padding: clamp(1.6rem, 2.6vw, 2.6rem); border-radius: 3px; background: color-mix(in srgb, var(--e-paper) 88%, var(--e-haze)); color: var(--text); text-decoration: none; overflow: hidden; isolation: isolate; }
.wr-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 80% at 20% 0%, color-mix(in srgb, var(--e-card) 75%, transparent), transparent 65%); }
.wr-stage-g { width: clamp(4.4rem, 7vw, 6.4rem); height: auto; aspect-ratio: 1; }
.wr-stage-q { display: block; margin-top: auto; font-family: var(--font-title); font-size: clamp(1.6rem, 0.9rem + 1.9vw, 2.9rem); line-height: 1.12; text-wrap: balance; }
.wr-stage-q span { display: inline; opacity: 0; filter: blur(6px); animation: wr-ink 0.9s var(--ease-out) forwards; animation-delay: calc(var(--c) * 16ms); }
@keyframes wr-ink { to { opacity: 1; filter: none; } }
.wr-stage-src { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1.4rem; font-size: 0.9rem; color: var(--soft); transition: opacity 0.4s ease; }
.wr-stage-t { color: var(--text); font-family: var(--font-title); font-size: 1rem; }
.wr-stage.out .wr-stage-q, .wr-stage.out .wr-stage-src { opacity: 0; transition: opacity 0.3s ease; }
.wr-stage:hover .wr-stage-t { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

/* The list: each piece a title and its date on one line, its line (dek)
   and who wrote it under; the one on stage in full ink, a mark beside it. */
.wr-toc { display: flex; flex-direction: column; }
.wr-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; row-gap: 0.3rem; padding: clamp(0.95rem, 2.1vh, 1.35rem) 0 clamp(0.95rem, 2.1vh, 1.35rem) 0; color: var(--soft); text-decoration: none; transition: color 0.45s ease, padding-left 0.6s var(--ease-out); }
.wr-entry::before { content: ""; position: absolute; left: 0; top: calc(clamp(0.95rem, 2.1vh, 1.35rem) + 0.8em); width: 1.2rem; height: 1px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale 0.6s var(--ease-out); }
.wr-entry.on, .wr-entry:hover, .wr-entry:focus-visible { color: var(--text); padding-left: 2rem; outline: none; }
.wr-entry.on::before, .wr-entry:focus-visible::before { scale: 1 1; }
.wr-e-title { font-family: var(--font-title); font-size: clamp(1.3rem, 0.95rem + 0.95vw, 1.95rem); line-height: 1.15; }
.wr-e-date { font-size: 0.85rem; white-space: nowrap; color: var(--soft); }
.wr-e-year { margin-left: 0.4em; }
.wr-e-dek { grid-column: 1; max-width: 40em; font-size: 0.95rem; line-height: 1.45; color: var(--soft); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--ease-out), opacity 0.5s ease; }
.wr-entry.on .wr-e-dek { max-height: 4.5em; opacity: 1; }
.wr-e-by { grid-column: 2; grid-row: 2; align-self: start; font-size: 0.85rem; color: var(--soft); text-align: right; opacity: 0; transition: opacity 0.5s ease; }
.wr-entry.on .wr-e-by { opacity: 1; }
.wr-e-quote { display: none; }

@media (max-width: 860px) {
  .wr-mast, .wr-split { grid-template-columns: 1fr; row-gap: 1rem; }
  .wr-stage { display: none; }
  .wr-entry { padding-left: 0 !important; }
  .wr-entry::before { display: none; }
  .wr-e-dek { max-height: none; opacity: 1; }
  .wr-e-quote { display: block; grid-column: 1 / -1; order: -1; margin-bottom: 0.4rem; font-family: var(--font-title); font-size: 1.05rem; line-height: 1.35; color: var(--text); }
  .wr-e-by { opacity: 1; grid-column: 1; grid-row: auto; text-align: left; }
}
@media (max-width: 700px) {
  .wr-mast h1, .wr-e-title { font-size: 1.35rem; }
  .wr-mast p, .wr-e-quote, .wr-e-dek { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) { .wr-stage-q span { animation: none; opacity: 1; filter: none; } }
.wr-e-date, .wr-e-by { justify-self: end; text-align: right; }
.wr-entry { padding-top: clamp(0.8rem, 1.8vh, 1.15rem); padding-bottom: clamp(0.8rem, 1.8vh, 1.15rem); }
.wr-entry::before { top: calc(clamp(0.8rem, 1.8vh, 1.15rem) + 0.8em); }
.wr-stage-g { width: clamp(6.5rem, 10.5vw, 9.5rem); }
.wr-stage { min-height: min(64vh, 34rem); }
.pl-cap { padding-right: 2px; }
@media (max-width: 860px) { .wr-e-by { justify-self: start; text-align: left; } }
.wr-e-date, .wr-e-by { justify-self: end; text-align: right; }
.wr-entry { padding-top: clamp(0.8rem, 1.8vh, 1.15rem); padding-bottom: clamp(0.8rem, 1.8vh, 1.15rem); }
.wr-entry::before { top: calc(clamp(0.8rem, 1.8vh, 1.15rem) + 0.8em); }
.wr-stage-g { width: clamp(6.5rem, 10.5vw, 9.5rem); }
.wr-stage { min-height: min(64vh, 34rem); }
@media (max-width: 860px) { .wr-e-by { justify-self: start; text-align: left; } }

/* Inquire: the address set large as it's typed, sent with a seal that
   carries the visitor's glyph, its edge reading Send, turning slowly. The
   seal inks in once the address is whole, and is pressed on Send. */
.lp-ask-h { margin-bottom: clamp(0.6rem, 2vh, 1.2rem); font-size: 0.95rem; color: var(--soft); }
.lp-ask-line { position: relative; align-items: center; gap: clamp(1rem, 3vw, 3rem); padding-bottom: clamp(0.6rem, 1.6vh, 1rem); border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.lp-ask-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--text); transform-origin: left; scale: 0 1; transition: scale 1.1s var(--ease-out); }
.lp-ask:focus-within .lp-ask-line::after, .lp-ask-ready .lp-ask-line::after { scale: 1 1; }
.lp-ask input { font-family: var(--font-title); font-size: clamp(2rem, 1rem + 4.4vw, 5.4rem); line-height: 1.05; caret-color: var(--text); text-overflow: ellipsis; }
.lp-ask input::placeholder { color: color-mix(in srgb, var(--soft) 55%, transparent); transition: color 0.6s ease; }
.lp-ask input:focus::placeholder { color: color-mix(in srgb, var(--soft) 30%, transparent); }
.lp-ask .lp-seal { position: relative; flex: 0 0 auto; width: clamp(4.6rem, 7vw, 6.6rem); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; transition: scale 0.5s var(--ease-out); }
.lp-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: lp-seal-turn 24s linear infinite; }
.lp-seal-ring text { fill: currentColor; font: 8.6px var(--font-title); letter-spacing: 0.08em; }
.lp-seal-disc { position: absolute; inset: 19%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); background: transparent; transition: background-color 0.6s var(--ease-out), border-color 0.6s ease, scale 0.6s var(--ease-out); }
.lp-seal-g { position: absolute; inset: 29%; width: 42%; height: 42%; opacity: 0.55; transition: filter 0.6s ease, opacity 0.6s ease, rotate 0.8s var(--ease-out); }
.lp-seal:hover .lp-seal-ring, .lp-seal:focus-visible .lp-seal-ring { animation-duration: 7s; }
.lp-seal:hover .lp-seal-g { rotate: -8deg; opacity: 0.85; }
.lp-seal:focus-visible { outline: none; }
.lp-seal:focus-visible .lp-seal-disc { border-color: var(--text); border-width: 2px; }
.lp-ask-ready .lp-seal-disc { background: var(--text); border-color: var(--text); }
.lp-ask-ready .lp-seal-g { opacity: 1; filter: invert(1); }
.dark .lp-ask-ready .lp-seal-g { filter: invert(1) brightness(0.9); }
.lp-ask-sent .lp-seal { animation: lp-seal-press 0.65s cubic-bezier(0.3, 1.5, 0.5, 1); }
.lp-ask-sent .lp-seal-ring { animation-duration: 1.4s; }
.lp-ask-bad .lp-ask-line { border-bottom-color: color-mix(in srgb, var(--text) 18%, transparent); }
.lp-ask-bad input { animation: ct-nope 0.5s var(--ease-out); }
.lp-ask-bad .lp-ask-line::after { scale: 1 1; height: 2px; }
@keyframes lp-seal-turn { to { rotate: 360deg; } }
@keyframes lp-seal-press { 0% { scale: 1; } 35% { scale: 0.86; } 100% { scale: 1; } }
@media (max-width: 700px) {
  .lp-ask input { font-size: 1.35rem; }
  .lp-ask .lp-seal { width: 3.8rem; }
  .lp-seal-ring text { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) { .lp-seal-ring { animation: none; } }
.lp-ask input { line-height: 1.3; padding: 0.05em 0 0.12em; }
.lp-ask .lp-seal { width: clamp(5.6rem, 8.4vw, 8rem); }
.lp-seal-ring text { font-size: 10.5px; letter-spacing: 0.04em; }
@media (max-width: 700px) { .lp-ask .lp-seal { width: 4.4rem; } .lp-seal-ring text { font-size: 11px; } }
@keyframes ct-nope { 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -3px 0; } 80% { translate: 2px 0; } }

/* Written case studies as covers: the case's own dark colour, its mark at
   the head, the pulled line large in the middle, the title at the foot, all
   on the centre line, like a book jacket. The line writes itself in, letter
   by letter, as the case comes into view. */
.lp-snap.pl-cover { justify-content: space-between; gap: 3cqi; padding: 7cqi 8cqi; background: var(--case); color: var(--e-cream); text-align: center; }
.lp-snap.pl-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--e-cream) 9%, transparent), transparent 60%), var(--fleck) 0 0 / 256px repeat; opacity: 0.55; mix-blend-mode: soft-light; }
.lp-snap.pl-cover { isolation: isolate; }
.lp-pic:has(.pl-cover)::after { display: none; }
.pl-cover-mark { width: auto; height: 8.5cqi; aspect-ratio: 520 / 220; flex: 0 0 auto; filter: invert(1) brightness(1.6) contrast(0.9); opacity: 0.92; }
.pl-q { display: block; max-width: 20ch; font-family: var(--font-title); font-size: clamp(1.05rem, 6.4cqi, 2.6rem); line-height: 1.14; text-wrap: balance; }
.pl-q span { opacity: 0; filter: blur(5px); transition: opacity 0.8s ease, filter 0.8s ease; }
.lp-float.seen .pl-q span, .work-index .pl-q span { opacity: 1; filter: none; transition-delay: calc(300ms + var(--c) * 14ms); }
.pl-cover-t { max-width: 34ch; font-family: var(--font-text); font-size: clamp(0.7rem, 2.9cqi, 0.95rem); line-height: 1.4; color: var(--e-cream-soft); }
.lp-block:hover .pl-cover, .lp-block:focus-visible .pl-cover { box-shadow: 0 1.4rem 2.6rem -1.4rem color-mix(in srgb, var(--case) 80%, transparent); }
/* In dark mode the palette turns round (cream becomes the dark ground), so
   the covers take the light ink instead. */
.dark .pl-cover { color: var(--e-ink); }
.dark .pl-cover-t { color: color-mix(in srgb, var(--e-ink) 70%, var(--case)); }
.dark .pl-cover-mark { filter: none; }
.dark .lp-snap.pl-cover::before { background: radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--e-ink) 8%, transparent), transparent 60%), var(--fleck) 0 0 / 256px repeat; }
@media (prefers-reduced-motion: reduce) { .pl-q span { opacity: 1; filter: none; transition: none; } }
/* Sized to the cover's own width: the line large, the longest a size down. */
.lp-snap.pl-cover { padding: 6cqi 7cqi 5.5cqi; }
.lp-snap .pl-cover-mark { height: 13cqi; margin-top: -2cqi; }
.lp-snap .pl-q { max-width: 24ch; font-size: clamp(1.05rem, 7.4cqi, 3rem); }
.lp-snap .pl-q.pl-q-long { max-width: 30ch; font-size: clamp(0.95rem, 5.6cqi, 2.3rem); }
.lp-snap .pl-cover-t { font-size: clamp(0.72rem, 2.7cqi, 0.95rem); }

/* Writing: the title a step smaller; the glyph larger, at the top middle
   just above the quote; more room between the quote and its title. */
.wr-mast h1 { font-size: clamp(1.9rem, 1.1rem + 2.3vw, 3.3rem); }
.wr-stage .wr-stage-g { align-self: center; width: clamp(7.4rem, 12vw, 10.8rem); margin-top: auto; }
.wr-stage .wr-stage-q { margin-top: clamp(0.4rem, 1.4vh, 1rem); }
.wr-stage .wr-stage-src { margin-top: clamp(1.4rem, 4vh, 2.6rem); margin-bottom: auto; }

/* Inquire: "Your email" just above its line, and the whole line lower. */
.lp-ask-h { margin-bottom: clamp(2.6rem, 8vh, 5rem); }
.lp-ask-line { padding-bottom: 0.2rem; }
.lp-ask input { line-height: 1; padding: 0; }

/* The footer glyph's name, glowing a little more. */
.lp-foot-name { text-shadow: 0 0 6px color-mix(in srgb, currentColor 70%, transparent), 0 0 16px color-mix(in srgb, currentColor 50%, transparent), 0 0 32px color-mix(in srgb, currentColor 30%, transparent); }

/* Only the piece on the stage stands out; pointing at another just lifts its colour until it is picked. */
.wr-entry:hover:not(.on) { padding-left: 0; }
.wr-e-dek { transition: max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
.wr-entry { transition: color 0.45s ease, padding-left 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

/* Inquire and its line both a little lower; Writing's title and its line centred on each other. */
.lp-ask { margin-top: clamp(3rem, 9vh, 6rem); }
.lp-ask-h { margin-bottom: clamp(3.4rem, 10vh, 6.4rem); }
.wr-mast { align-items: center; }

/* The light/dark button closer to the place name. */
.lp-mid { gap: 0.35em; }

/* Trial (work=stagger): the case studies in three loose columns, the middle
   one set lower, each a picture at its own width with its line under it. */
.st-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--pad) * 2.4); width: calc(100% - 2 * var(--pad)); max-width: 92rem; margin: 18vh auto 22vh; align-items: start; }
.st-col { display: flex; flex-direction: column; gap: 9rem; }
.st-col:nth-child(2) { padding-top: 16rem; }
.st-col:nth-child(3) { padding-top: 4rem; }
.st-item { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.st-col:nth-child(2) .st-item { align-items: center; }
.st-col:nth-child(3) .st-item { align-items: flex-end; }
.st-pic { display: block; width: var(--w, 86%); }
.st-pic img, .st-pic video { display: block; width: 100%; height: auto; }
.st-pic .lp-snap { aspect-ratio: 4 / 5; }
.st-cap { display: block; width: var(--w, 86%); max-width: 24rem; font-family: var(--font-text, inherit); font-size: 0.85rem; line-height: 1.4; color: var(--soft); text-align: left; text-wrap: pretty; }
.st-name { color: var(--text); }
.st-pic { position: relative; isolation: isolate; }
.st-pic::after { content: ""; position: absolute; inset: 0; background: var(--bg); mix-blend-mode: color; pointer-events: none; transition: opacity 0.9s ease; }
.st-item:hover .st-pic::after, .st-item:focus-visible .st-pic::after { opacity: 0; }
html.snap.work-stagger { scroll-snap-type: none; }

/* Send: "Send" small, right above a fish native to the visitor's place,
   facing right like an arrow. Faint until the address is a whole one. */
.lp-ask .lp-seal.lp-send { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; width: clamp(5.4rem, 8vw, 7.6rem); aspect-ratio: auto; border-radius: 0; }
.lp-send-w { font-family: var(--font-title); font-size: 0.8rem; color: var(--soft); transition: color 0.5s ease; }
.lp-send .lp-seal-g { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 1; margin: -18% 0; opacity: 0.45; filter: none; rotate: none; transition: opacity 0.6s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.lp-send:hover .lp-seal-g, .lp-send:focus-visible .lp-seal-g { translate: 8% 0; rotate: none; opacity: 0.8; }
.lp-send:hover .lp-send-w, .lp-ask-ready .lp-send-w { color: var(--text); }
.lp-ask-ready .lp-send .lp-seal-g { opacity: 1; filter: none; }
.dark .lp-ask-ready .lp-send .lp-seal-g { filter: none; }
.lp-ask-sent .lp-send { animation: none; }
.lp-ask-sent .lp-send .lp-seal-g { animation: lp-fish-go 0.9s cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes lp-fish-go { 0% { translate: 0 0; } 45% { translate: 40% 0; opacity: 0; } 55% { translate: -30% 0; opacity: 0; } 100% { translate: 0 0; opacity: 1; } }
@media (max-width: 700px) { .lp-ask .lp-seal.lp-send { width: 4.6rem; } }

/* work=stagger, closer to the reference: three columns from the same top,
   pictures centred at about three quarters of the column, the line under
   each as a paragraph across the column, in the text colour. */
.st-cols { gap: 0 clamp(1.6rem, 3vw, 3.4rem); max-width: 100rem; margin-top: 14vh; }
.st-col { gap: clamp(5rem, 12vh, 8rem); }
.st-col:nth-child(2), .st-col:nth-child(3) { padding-top: 0; }
.st-item, .st-col:nth-child(2) .st-item, .st-col:nth-child(3) .st-item { align-items: stretch; gap: clamp(1.2rem, 3vh, 2rem); }
.st-pic { align-self: center; width: min(var(--w, 78%), 80%); }
.st-cap { width: 100%; max-width: none; font-size: clamp(0.98rem, 0.82rem + 0.36vw, 1.2rem); line-height: 1.42; color: var(--text); }

/* work=stagger: the written cases as Jihad's covers, across the column. */
.st-pic:has(.pl-cover) { width: 100%; }
.st-pic .lp-snap.pl-cover { aspect-ratio: 6 / 5; border-radius: 3px; }
.st-pic:has(.pl-cover)::after { display: none; }
.st-item.seen .pl-q span { opacity: 1; filter: none; transition-delay: calc(300ms + var(--c) * 14ms); }
.st-pic .lp-snap.pl-cover { aspect-ratio: 5 / 6; }
.st-pic .lp-snap .pl-q { font-size: clamp(0.8rem, 8cqi, 2.4rem); }
.st-pic .lp-snap .pl-q.pl-q-long { font-size: clamp(0.72rem, 6.2cqi, 1.9rem); }
.st-pic .lp-snap .pl-cover-t { font-size: clamp(0.62rem, 3.6cqi, 0.95rem); }

/* The footer glyph's name: a softer glow. */
.lp-foot-name { text-shadow: 0 0 5px color-mix(in srgb, currentColor 40%, transparent), 0 0 14px color-mix(in srgb, currentColor 22%, transparent); }

/* The foot: the glyph starts at the page's margin (a long fish no longer runs
   off the edge), its name centred over it; and the Inquire line closer to the
   word, so the whole foot fits on the screen without Inquire going under the
   bar. */
.lp-foot-tree { margin-left: 0; margin-right: calc(-21.46% * 28 / 72); }
.lp-foot-name { left: calc(21.46% * 100 / 72 / 2) !important; }
.lp-ask { margin-top: clamp(2rem, 6vh, 4rem); margin-bottom: clamp(2.4rem, 7vh, 4.6rem); }
@media (min-width: 701px) { .lp-ask { margin-bottom: clamp(2.4rem, 7vh, 4.6rem); } }
.lp-ask-h { margin-bottom: clamp(1.6rem, 5vh, 3.2rem); }
.lp-foot-tree { margin-left: calc(-21.46% * 7 / 72); margin-right: calc(-21.46% * 21 / 72); }
.lp-foot-name { left: calc(21.46% * 100 / 72 / 2 - 21.46% * 7 / 72) !important; }
/* The foot glyph a little smaller and centred in the room before the word,
   so the space from the margin to it and from it to the N is the same. */
.lp-foot-tree { width: 23%; margin-left: 1.335%; margin-right: -2.875%; }
.lp-foot-name { left: 12.835% !important; }
.lp-foot-tree { margin-bottom: -3.3%; }

/* The word at the foot: its shape fills its box exactly, and the box's very
   edge is trimmed, so no hairline of the speckle shows along it. */
.lp-foot-word { -webkit-mask-size: 100% 100%, 256px auto; mask-size: 100% 100%, 256px auto; -webkit-mask-position: 0 0, 0 0; mask-position: 0 0, 0 0; clip-path: inset(0.5px); }

/* Writing: the stage a plain card, one colour, no glow. */
.wr-stage::before { display: none; }

/* Writing: the list scrolls in its own box, as tall as the card beside it,
   so the card holds still while the pieces pass; at the list's end the page
   carries on. The line under the title on one line. */
@media (min-width: 861px) {
  .wr-split { --room-h: min(64vh, 34rem); align-items: stretch; }
  .wr-stage { position: relative; top: auto; height: var(--room-h); min-height: 0; }
  .wr-toc { height: var(--room-h); overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; padding-right: 0.4rem; }
  .wr-toc::-webkit-scrollbar { display: none; }
  .wr-entry:first-child { padding-top: 0; }
  .wr-entry:first-child::before { top: 0.8em; }
}
@media (min-width: 1100px) { .wr-mast p { max-width: none; white-space: nowrap; } }
@media (min-width: 861px) { .wr-toc { padding-bottom: calc(var(--room-h) - 5rem); } }

/* Clients & Collaborations (wide screens): larger logos in a calm three,
   four, three across the middle, a little further below the title and
   further apart; their names larger and clearer. */
@media (min-width: 701px) {
  .lp-scattered { width: min(70vw, 80rem); height: clamp(36rem, 88vh, 56rem); margin-top: clamp(3rem, 8vh, 5.5rem); }
  .lp-scattered .lp-slot { width: clamp(8.5rem, 12.5vw, 14rem); gap: 1.1rem; }
  .lp-scatter .lp-hex .lp-slot-name, .lp-scattered .lp-slot-name { font-size: clamp(0.82rem, 0.7rem + 0.25vw, 1rem); color: color-mix(in srgb, var(--e-cream) 82%, transparent); }
}

/* The footer glyph opens nothing: no pointer, no card. */
.lp-foot-tree, .lp-foot-tree.lp-foot-live { cursor: default; }
.lp-glyph-info { display: none !important; }
/* The work in columns by default: they start close under the opening. */
.st-cols { margin-top: 10vh; }

/* Writing: the card no longer filled, only a thin border; the list marked
   above and below with a faint line where its scrolling begins and ends. */
.wr-stage { background: none; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); box-shadow: none; }
@media (min-width: 861px) {
  .wr-toc { border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); padding-top: 1.1rem; }
  .wr-entry:first-child::before { top: calc(0.8em); }
}

/* The covers in the columns: padding set by the card itself (not the
   window), so the mark, the line and the title fill it. */
.st-pic .lp-snap.pl-cover { padding: 9% 8% 8%; }
.st-pic .lp-snap .pl-cover-mark { height: 15cqi; margin-top: 0; }
.st-pic .lp-snap .pl-q { max-width: 100%; font-size: clamp(0.95rem, 9.2cqi, 2.8rem); line-height: 1.12; }
.st-pic .lp-snap .pl-q.pl-q-long { font-size: clamp(0.85rem, 7.2cqi, 2.2rem); }
.st-pic .lp-snap .pl-cover-t { max-width: 100%; font-size: clamp(0.72rem, 4.2cqi, 1.05rem); }

/* The line under each case centred under its picture, in a measure a little
   narrower than the column. */
.st-cap { align-self: center; width: min(100%, 27rem); text-align: center; text-wrap: balance; }

/* About: Writing and Design side by side under Services, the two places in
   one row and the two addresses in one row, all on the same two columns. */
@media (min-width: 701px) {
  .ab-page section:has(> .ab-service) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .ab-page section:has(> .ab-service) > :first-child { grid-column: 1 / -1; }
  .ab-page .ab-service + .ab-service { margin-top: 0; }
  .ab-page .ab-places, .ab-page .ab-mail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4rem); row-gap: 0.7rem; width: 100%; }
  .ab-page .ab-mail li + li { margin-top: 0; }
}

/* The line under the top bar: a faint track, with the way down the page
   drawn over it from the left as the visitor scrolls (as the email's line
   draws in). */
.lp-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--text); transform-origin: left; scale: var(--read, 0) 1; transition: scale 0.5s var(--ease-out); pointer-events: none; }
.nav-dark .lp-top::after { background: var(--e-cream); }
.menu-open .lp-top::after { display: none; }

/* Case studies, evened out like the reference: every picture the same width
   in its column, the same space from picture to its line and from one case
   to the next. */
.st-pic, .st-pic:has(.pl-cover) { width: 80%; }
.st-col { gap: clamp(5.5rem, 11vw, 9rem); }
.st-item, .st-col:nth-child(2) .st-item, .st-col:nth-child(3) .st-item { gap: clamp(1.4rem, 2.4vw, 2rem); }
.st-cap { width: 80%; }

/* About: the second column (Design, Toronto, the second address) set to end
   flush with the right edge of the text above, so the block is squared on
   both sides, as the sentences are. */
@media (min-width: 701px) {
  .ab-page section:has(> .ab-service), .ab-page .ab-places, .ab-page .ab-mail { grid-template-columns: auto auto; justify-content: space-between; }
  .ab-page .ab-service:last-of-type, .ab-page .ab-places li:last-child, .ab-page .ab-mail li:last-child { justify-self: end; }
}
/* The scroll line moved by the page itself, frame by frame: no transition of its own. */
.lp-top::after { transition: background-color 0.9s ease; scale: none; transform: scaleX(var(--read, 0)); will-change: transform; }

/* The foot glyph printed through the same speckle as the word "Native". */
.lp-foot-tree { -webkit-mask: var(--fleck) 0 0 / 256px repeat; mask: var(--fleck) 0 0 / 256px repeat; }

/* The sun, the place and the time evenly spaced: the button no wider than
   its glyph, and one gap between all three. */
.lp-mid { gap: 0.75em; }
.lp-mid .lp-where { gap: 0.75em; }
.lp-mid .lp-mode { width: auto; height: auto; margin: 0; padding: 0; }


/* The written case studies: no filled card, only a thin border; the mark,
   line and title in the text colour with a soft glow; a clear Read on each. */
.lp-snap.pl-cover { background: none; border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); color: var(--text); box-shadow: none; }
.lp-snap.pl-cover::before { display: none; }
.pl-cover .pl-cover-mark { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text) 35%, transparent)); opacity: 1; }
.pl-cover .pl-q, .pl-cover .pl-cover-t { color: var(--text); text-shadow: 0 0 10px color-mix(in srgb, var(--text) 32%, transparent), 0 0 22px color-mix(in srgb, var(--text) 16%, transparent); }
.pl-cover .pl-cover-t { color: var(--soft); }
.pl-read { display: inline-flex; gap: 0.45em; align-items: baseline; margin-top: 0.4em; padding: 0.45em 1em; border: 1px solid color-mix(in srgb, var(--text) 40%, transparent); border-radius: 999px; font-family: var(--font-title); font-size: clamp(0.78rem, 3.2cqi, 0.95rem); color: var(--text); text-shadow: none; transition: background-color 0.4s ease, color 0.4s ease; }
.st-item:hover .pl-read, .lp-block:hover .pl-read { background: var(--text); color: var(--bg); }
.lp-block:hover .pl-cover, .lp-block:focus-visible .pl-cover { box-shadow: none; }
.dark .pl-cover { color: var(--text); }
.dark .pl-cover-mark { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--text) 45%, transparent)); }
.dark .pl-cover .pl-cover-t { color: var(--soft); }
/* Read as plain words, no pill: larger, the arrow moving on when pointed at. */
.pl-read { padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--text) !important; font-size: clamp(0.9rem, 4cqi, 1.1rem); text-shadow: 0 0 10px color-mix(in srgb, var(--text) 30%, transparent); }
.pl-read span { display: inline-block; transition: translate 0.5s var(--ease-out); }
.st-item:hover .pl-read span, .lp-block:hover .pl-read span { translate: 0.3em 0; }


/* Clients & Collaborations (wide screens): the logos a little closer together. */
@media (min-width: 701px) { .lp-scattered { width: min(62vw, 72rem); height: clamp(34rem, 80vh, 50rem); } }


/* A small underline under a nav item when it is pointed at. */
.lp-top a:not(.lp-home) { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: color 0.4s ease, text-decoration-color 0.35s ease; }
.lp-top a:not(.lp-home):hover, .lp-top a:not(.lp-home):focus-visible { text-decoration-color: currentColor; }

/* The written case studies without a border either: only the mark, the line, the title and Read. */
.lp-snap.pl-cover { border: 0; }

/* The specimen card a footer glyph opens: the glyph large in the wordmark's
   ink, its names in a row under a thin rule, and its note. */
.lp-specimen { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--pad); background: color-mix(in srgb, var(--e-paper) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.45s ease; }
.lp-specimen.on { opacity: 1; }
.spec-in { position: relative; width: min(56rem, 100%); padding: clamp(1.6rem, 4vw, 3rem); background: var(--e-paper); box-shadow: 0 1.6rem 4rem -1.6rem color-mix(in srgb, var(--text) 30%, transparent); color: var(--text); translate: 0 0.8rem; transition: translate 0.6s var(--ease-out); }
.lp-specimen.on .spec-in { translate: none; }
.spec-g { display: block; width: clamp(9rem, 22vw, 15rem); height: auto; aspect-ratio: 1; margin: 0 auto clamp(1.2rem, 3vh, 2rem); -webkit-mask: var(--fleck) 0 0 / 256px repeat; mask: var(--fleck) 0 0 / 256px repeat; }
.spec-row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; border-top: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); }
.spec-row div { padding: 0.8rem 0.9rem; text-align: center; }
.spec-row div + div { border-left: 1px solid color-mix(in srgb, var(--text) 14%, transparent); }
.spec-row dt { margin-bottom: 0.45rem; color: var(--soft); font-family: var(--font-title); font-size: 0.78rem; }
.spec-row dd { margin: 0; font-family: var(--font-title); font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem); line-height: 1.25; overflow-wrap: anywhere; }
.spec-note { max-width: 40em; margin: 1.1rem auto 0; color: var(--soft); font-size: 0.95rem; line-height: 1.55; text-align: center; text-wrap: pretty; }
.spec-x { position: absolute; top: 0.9rem; right: 0.9rem; }
.dark .spec-g { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--text) 45%, transparent)); }
@media (max-width: 700px) { .spec-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .spec-row div:nth-child(3) { border-left: 0; } .spec-row div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent); } }



/* Phone: "Your email" a little larger, sitting right on its line, with Inquire close above. */
@media (max-width: 700px) {
  .lp-ask { margin-top: 2rem; }
  .lp-ask-h { margin-bottom: 0.9rem; }
  .lp-ask-line { padding-bottom: 0.1rem; align-items: flex-end; }
  .lp-ask input { font-size: 1.65rem !important; line-height: 1.05; padding: 0; }
}
@media (max-width: 700px) {
  .lp-ask-line { position: relative; padding-right: 4.6rem; }
  .lp-ask .lp-seal.lp-send { position: absolute; right: 0; bottom: 0.2rem; width: 4rem; }
  .lp-send-w { font-size: 0.72rem; }
}

/* The home tree a touch smaller, turning through the native glyphs. */
.lp-home.has-cv .nav-home { display: none; }
.nav-home-cv { display: block; width: 0.95rem; height: 0.95rem; }
.menu-open .nav-home-cv { width: 2.2rem; height: 2.2rem; }
.dark .nav-home-cv { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--text) 40%, transparent)); }

/* The location card scrolls when its glyphs run past the screen (on a phone). */
.lp-place { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) { .lp-place { place-items: start center; padding-top: 4.5rem; padding-bottom: 2rem; } .lp-place-in { margin: auto 0; } }
@media (max-width: 700px) { .spec-row[style*="--n: 3"] div:nth-child(3) { grid-column: 1 / -1; border-left: 0; } }

/* Phone: the sun, place and time drawn closer into the left corner beside the tree. */
@media (max-width: 700px) {
  .lp-top { padding-left: calc(var(--pad) * 0.9); }
  .lp-bar .lp-mid { gap: 0.55em; }
  .lp-bar .lp-mid .lp-where { gap: 0.55em; }
}

/* The straight nav in one row: the tree at the left, Work and About as a pair,
   the sun with the place and time in the middle, Writing and Media as a pair. */
@media (min-width: 901px) {
  html:not(.work-split) .lp-top:not(.x) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  html:not(.work-split) .lp-top .lp-side { display: flex; align-items: center; gap: 1.9rem; }
  html:not(.work-split) .lp-top .lp-side:first-of-type { grid-column: 1; }
  html:not(.work-split) .lp-top .lp-mid { grid-column: 2; grid-row: 1; order: 0; }
  html:not(.work-split) .lp-top .lp-side + .lp-side { grid-column: 3; justify-content: center; }
  html:not(.work-split) .lp-top .lp-side + .lp-side > * { order: 0; }
  html:not(.work-split) .lp-top .lp-side:first-of-type > :nth-child(2) { margin-left: auto; }
  html:not(.work-split) .lp-top .lp-side:first-of-type > :nth-child(3) { margin-right: auto; }
}

/* Phone (no hover), strict: a picture in view shows its true colour. */
@media (hover: none) {
  .in-view::after, .lp-pic.in-view::after { opacity: 0 !important; }
  .in-view img, .in-view video { filter: none !important; }
}

/* Phone menu: the tree small, every item the same distance apart, the words a touch smaller. */
@media (max-width: 700px) {
  .menu-open .lp-top { font-size: 1rem; }
  .menu-open .lp-top .lp-side { gap: 1.15rem; line-height: 1.2; }
  .menu-open .lp-top .lp-side + .lp-side { margin-top: 1.15rem; }
  .menu-open .nav-home, .menu-open .nav-home-cv { width: 1.3rem; height: 1.3rem; }
  .menu-open .lp-home { min-width: 1.3rem; }
}

/* Contact back on the web nav, in the right corner opposite the tree; Writing and Media stay a pair between. Not on a phone. */
@media (min-width: 901px) {
  html:not(.work-split) .lp-top .lp-side + .lp-side { justify-content: flex-start; }
  html:not(.work-split) .lp-top .lp-side + .lp-side > :nth-child(1) { margin-left: auto; }
  html:not(.work-split) .lp-top .lp-side + .lp-side > :nth-child(2) { margin-right: auto; }
}

/* "Location", before a place is allowed: the same look, a little softer. */
.lp-where-unset .lp-where-name { color: var(--soft); }
.lp-where-unset:hover .lp-where-name { color: var(--text); }
/* Phone: the sun, place, time and menu sit lower, near the bar's bottom line, all on one centre line. */
@media (max-width: 700px) { .lp-top { padding-top: 1.45rem; padding-bottom: 0.55rem; } .lp-bar { align-items: center; } }
/* The home link that carries the morphing glyph is not itself masked to the tree (on a phone it was, which held the glyph to the tree's outline). */
.lp-home.has-cv, .lp-top .lp-home.has-cv { -webkit-mask: none !important; mask: none !important; background: none !important; width: auto; aspect-ratio: auto; }

/* Phone Writing, the desktop room stacked: the title, its line, a square card
   with the piece on stage, then the list scrolling in its own box. */
@media (max-width: 860px) {
  .wr-room { padding-top: calc(var(--head-h, 50px) + 2.4rem); }
  .wr-mast { display: block; padding-bottom: 1.4rem; }
  .wr-mast h1 { margin-bottom: 0.6rem; }
  .wr-mast p { white-space: normal; }
  .wr-split { display: flex; flex-direction: column; gap: 1.4rem; }
  .wr-stage { display: flex !important; position: relative; top: auto; width: 100%; aspect-ratio: 1; height: auto; min-height: 0; padding: 1.4rem; }
  .wr-stage .wr-stage-g { width: 34%; }
  .wr-stage .wr-stage-q { font-size: clamp(1.15rem, 5.4vw, 1.6rem) !important; }
  .wr-stage .wr-stage-src { font-size: 0.85rem; margin-top: 1.1rem; }
  .wr-toc { height: 46vh; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: none; padding-top: 0.9rem; padding-bottom: calc(46vh - 4rem); border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
  .wr-toc::-webkit-scrollbar { display: none; }
  .wr-e-quote { display: none !important; }
  .wr-e-dek { max-height: 0; opacity: 0; }
  .wr-entry.on .wr-e-dek { max-height: 4.5em; opacity: 1; }
  .wr-e-by { opacity: 0; }
  .wr-entry.on .wr-e-by { opacity: 1; }
}
@media (max-width: 860px) { .wr-room { padding-top: 6.2rem; } }

/* Phone menu: Contact back, and every item centred on the screen. */
@media (max-width: 700px) {
  .menu-open .lp-top .lp-side { align-items: center; padding-left: 0; text-align: center; }
  .menu-open .lp-top .lp-side:first-of-type { margin-top: calc(50vh - 11rem); }
  .menu-open .lp-top .lp-home { align-self: center; }
}
/* Phone Writing: the list of pieces first, the square with the pull quote under it. */
@media (max-width: 860px) { .wr-split .wr-toc { order: 0; height: 40vh; padding-bottom: calc(40vh - 4rem); } .wr-split .wr-stage { order: 1; } }
/* Phone Writing: the list and a smaller square both fit in one screen, so the pull quote is in view while the list scrolls. */
@media (max-width: 860px) {
  .wr-room { padding-top: 5.2rem; }
  .wr-mast { padding-bottom: 0.9rem; }
  .wr-mast h1 { margin-bottom: 0.35rem; }
  .wr-split { gap: 1rem; }
  .wr-split .wr-toc { height: 30vh; padding-top: 0.6rem; padding-bottom: calc(30vh - 3.4rem); }
  .wr-split .wr-stage { width: min(100%, 36vh); align-self: center; padding: 1rem; gap: 0.5rem; }
  .wr-stage .wr-stage-g { width: 26%; }
  .wr-stage .wr-stage-q { font-size: clamp(0.95rem, 2.3vh, 1.2rem) !important; line-height: 1.2; }
  .wr-stage .wr-stage-src { font-size: 0.75rem; margin-top: 0.6rem; gap: 0.2rem 0.8rem; }
  .wr-stage .wr-stage-t { font-size: 0.8rem; }
}

/* Phone Writing: a simple index. Each piece's own glyph above it (morphing in
   from the tree), its title, then who wrote it and when; a thin line between. */
.wr-e-g { display: none; }
@media (max-width: 860px) {
  .wr-split .wr-stage { display: none !important; }
  .wr-split .wr-toc { height: auto !important; overflow: visible; padding: 0 !important; border-top: 0; border-bottom: 0; }
  .wr-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-items: start; row-gap: 0.4rem; padding: 1.6rem 0 !important; border-top: 1px solid color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
  .wr-entry::before { display: none; }
  .wr-e-g { display: block; grid-column: 1 / -1; justify-self: center; width: 4.6rem; height: 4.6rem; margin-bottom: 0.6rem; -webkit-mask: var(--fleck) 0 0 / 256px repeat; mask: var(--fleck) 0 0 / 256px repeat; }
  .wr-e-title { grid-column: 1 / -1; font-size: 1.35rem !important; }
  .wr-e-dek { display: none !important; }
  .wr-e-by { grid-column: 1; grid-row: auto; opacity: 1 !important; justify-self: start; text-align: left; color: var(--soft); }
  .wr-e-date { grid-column: 2; grid-row: auto; align-self: end; color: var(--soft); }
  .wr-entry .wr-e-by, .wr-entry .wr-e-date { order: 3; }
}
@media (max-width: 860px) {
  .wr-split, .wr-split .wr-toc, .wr-entry { width: 100%; }
  .wr-e-g { grid-row: 1; }
  .wr-e-title { grid-row: 2; }
  .wr-e-by { grid-row: 3 !important; grid-column: 1 !important; }
  .wr-e-date { grid-row: 3 !important; grid-column: 2 !important; align-self: baseline; }
}

/* Articles: the reading column a little narrower and the text a little smaller. */
.wr-article .wr-body { max-width: 35rem; margin-left: auto; margin-right: auto; font-size: 1.08rem; }
@media (max-width: 700px) {
  .wr-article .wr-body { padding-left: 0.9rem; padding-right: 0.9rem; }
  body .wr-article .wr-body p, body .wr-article .wr-body li, body .wr-article .wr-body blockquote { font-size: 0.9rem !important; }
}

/* About: the opening sentences at the same size as the rest of the page's text. */
.ab-page .wr-head p { font-size: 1.12rem; }
@media (max-width: 700px) { body .ab-page .wr-head p { font-size: 0.95rem !important; } }

/* Phone menu: the morphing glyph a little larger. */
@media (max-width: 700px) { .menu-open .nav-home, .menu-open .nav-home-cv { width: 1.6rem; height: 1.6rem; } .menu-open .lp-home { min-width: 1.6rem; } }

/* Case studies: under each picture, the company's logo (for the picture cases),
   its name on a line of its own, then the description under it. */
.st-cap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.st-mark { display: block; width: auto; height: clamp(1.3rem, 1.8vw, 1.8rem); margin-bottom: 0.2rem; }
.st-name { display: block; font-family: var(--font-title); font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.45rem); line-height: 1.15; color: var(--text); }
.st-line { display: block; color: var(--soft); }

/* Web nav: a little more room inside each pair. */
@media (min-width: 901px) { html:not(.work-split) .lp-top .lp-side { gap: 2.9rem; } }

/* About: every section the same width as the opening sentences. */
.ab-page .ab.ab-in { max-width: 33.6rem; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .ab-page .ab.ab-in { max-width: 19rem; } }
.st-mark { width: clamp(6.5rem, 9vw, 8.5rem); height: auto; aspect-ratio: 520 / 220; margin: 0 0 -0.2rem; }

/* Type kept consistent by role, across pages (from a full audit):
   page titles one size; reading text one size (articles and written cases);
   intro lines one size; labels one size; client names one size; section
   headings in a piece one size; small meta text one size. */
.wr-mast h1 { font-size: 1.8rem; }
.st-line { font-size: 1.12rem; }
.wr-mast p, .wr-head p:not(.ab-page .wr-head p), .wr-list .wr-dek { font-size: 1rem; }
.ab-service-h { font-family: var(--font-title); font-size: 0.85rem; color: var(--soft); }
.lp-ask-h { font-size: 0.85rem !important; }
.ab-row .lp-slot-name { font-size: clamp(0.82rem, 0.7rem + 0.25vw, 1rem); }
.lp-essay p, .lp-essay li { font-size: 1.08rem; }
.wr-article .wr-body h2, .lp-essay h3 { font-size: 1.6rem; }
.lp-essay h2 { font-size: 1.875rem; }
.wr-stage .wr-stage-by, .pl-read { font-size: 0.85rem; }
@media (max-width: 700px) {
  body .lp-row-quote { font-size: 0.95rem !important; }
  body .lp-essay p, body .lp-essay li { font-size: 0.9rem !important; }
}
@media (max-width: 700px) {
  body .lp-ask-h { font-size: 0.95rem !important; }
  body .wr-article .wr-body p a, body .wr-article .wr-body p strong, body .wr-article .wr-body p em, body .wr-article .wr-body p span, body .wr-article .wr-body li a, body .lp-essay p a, body .lp-essay p span { font-size: inherit !important; }
}
.wr-article .wr-body p a, .wr-article .wr-body p strong, .lp-essay p a { font-size: inherit; }

/* Footer inquiry form (in place of the single email line): the four areas to
   choose from at the left, the details as single lines at the right, Send
   (the region's fish) under them. */
.lp-inq .inq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 1.6rem; align-items: start; }
.inq-areas { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.inq-areas legend { margin-bottom: 1rem; padding: 0; color: var(--soft); font-family: var(--font-title); font-size: 0.85rem; }
.inq-area { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; font-family: var(--font-title); font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem); color: var(--text); }
.inq-area input { appearance: none; -webkit-appearance: none; flex: none; width: 0.8rem; height: 0.8rem; margin: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.inq-area input:checked { background: currentColor; box-shadow: 0 0 6px color-mix(in srgb, var(--text) 40%, transparent); }
.inq-area input:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.inq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 1.4rem; }
.inq-f { display: block; border-bottom: 1px solid color-mix(in srgb, var(--text) 22%, transparent); transition: border-color 0.4s ease; }
.inq-f:focus-within { border-bottom-color: var(--text); }
.inq-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lp-inq .inq-f input, .lp-inq .inq-f textarea { display: block; width: 100%; padding: 0.3rem 0 0.35rem; border: 0; background: none; color: var(--text); font-family: var(--font-title) !important; font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.6rem) !important; line-height: 1.2 !important; outline: none; resize: none; }
.lp-inq .inq-f input::placeholder, .lp-inq .inq-f textarea::placeholder { color: color-mix(in srgb, var(--soft) 70%, transparent); }
.inq-notes { grid-column: 1 / -1; }
.lp-inq .lp-seal.lp-send { grid-column: 2; justify-self: end; position: static; }
.lp-inq .lp-ask-line { display: none; }
.lp-ask-bad .inq-f:has(input[type="email"]) { border-bottom-color: var(--text); border-bottom-width: 2px; }
@media (max-width: 700px) {
  .lp-inq .inq-grid { grid-template-columns: 1fr; }
  .inq-fields { grid-template-columns: 1fr; }
  .lp-inq .lp-seal.lp-send { grid-column: 1; position: static; width: 4rem; }
  .inq-area { font-size: 0.95rem; }
  .lp-inq .inq-f input, .lp-inq .inq-f textarea { font-size: 1.1rem !important; }
}
.inq-f:has(input[type="email"]) { grid-column: 1 / -1; }
@media (max-width: 700px) { .lp-ask.lp-inq { margin-top: 0.6rem; } .lp-inq .lp-ask-h { margin-bottom: 1.2rem !important; } .lp-inq .inq-grid { row-gap: 1.8rem; } }

/* Form: the words sit directly on each line. */
.lp-inq .inq-f input, .lp-inq .inq-f textarea { padding: 0 0 0.12rem !important; line-height: 1.05 !important; }
.lp-inq .inq-notes textarea { min-height: 2.2em; }

/* The name over the footer glyph a little smaller. */
.lp-foot-name { font-size: 0.85rem; }

/* Audit leftovers: Submit at the label size; the cover's title in the title font at the label size; the phone form's label at the phone text size. */
.lp-send-w { font-size: 0.85rem; }
.pl-cover .pl-cover-t, .st-pic .lp-snap .pl-cover-t { font-family: var(--font-title); font-size: 0.85rem; }
@media (max-width: 700px) { body .inq-areas legend { font-size: 0.95rem !important; } body .lp-send-w { font-size: 0.95rem !important; } }

/* Phone menu: a little more room between the items; the glyph a touch larger, set a little higher above them. */
@media (max-width: 700px) {
  .menu-open .lp-top .lp-side { gap: 1.45rem; }
  .menu-open .lp-top .lp-side + .lp-side { margin-top: 1.45rem; }
  .menu-open .nav-home, .menu-open .nav-home-cv { width: 1.85rem; height: 1.85rem; }
  .menu-open .lp-top .lp-home { margin-bottom: 0.9rem; min-width: 1.85rem; }
}

/* Client logos: each name keeps a fixed two-line space, so nothing shifts as the names change length (About and home, web and phone). */
.lp-slot-name { display: flex; align-items: flex-start; justify-content: center; min-height: 2.6em; line-height: 1.3; text-align: center; text-wrap: balance; }
.ab-row .lp-slot, .lp-scattered .lp-slot { justify-content: flex-start; }
.ab-row .lp-client-morph, .lp-scattered .lp-client-morph { flex: none; }

/* The form's four areas at the size of "Inquire". */
.inq-area { font-size: 0.85rem; gap: 0.6rem; }
.inq-area input { width: 0.7rem; height: 0.7rem; }
@media (max-width: 700px) { body .inq-area { font-size: 0.95rem !important; } }

/* Form fields: no built-in phone styling (iOS adds padding, rounding and shading),
   Notes one line on its rule like the others, growing as it is written in. */
.lp-inq .inq-f input, .lp-inq .inq-f textarea { -webkit-appearance: none; appearance: none; border-radius: 0; box-shadow: none; margin: 0; }
.lp-inq .inq-notes textarea { min-height: 0; height: auto; overflow: hidden; }

/* Phone, dark mode: no glow filter on the drawn glyphs. Safari on iPhone can
   fail to paint a canvas with a drop-shadow filter on it, leaving it blank. */
@media (hover: none), (max-width: 700px) {
  .dark .lp-emblem, .dark .lp-mark, .dark .lp-client-morph, .dark .lp-foot-tree, .dark .lp-place-g, .dark .lp-place-set canvas, .dark .ab-place-g, .dark .lp-row-mark, .dark .nav-home-cv, .dark .spec-g, .dark .wr-stage-g, .dark .wr-e-g, .dark canvas { filter: none !important; }
}

/* Phone: the name over the footer glyph smaller, on one line, above everything, so long names are not covered. */
@media (max-width: 700px) {
  body .lp-foot-name { font-size: 0.68rem !important; white-space: nowrap; z-index: 3; }
}
@media (max-width: 700px) { body .lp-foot-name { left: 0 !important; translate: 0 0 !important; width: auto !important; max-width: calc(100vw - 2 * var(--pad)); text-align: left !important; } }

/* Contact: the inquiry form on its own, on the page's margins, in the middle of the screen. */
.ct-page { min-height: calc(100svh - 6rem); display: flex; flex-direction: column; justify-content: center; padding: clamp(5rem, 14vh, 9rem) var(--pad) clamp(3rem, 10vh, 6rem); }
.ct-page .lp-ask { margin: 0; }

/* Media, for now not a page: "Coming soon" appears underneath it when pointed at
   (wide screens), and sits underneath it in the phone menu. */
.lp-top a.nav-soon { position: relative; cursor: default; text-decoration-color: transparent !important; }
.nav-soon .soon-w { position: absolute; left: 50%; top: 100%; translate: -50% 0; margin-top: 0.45rem; white-space: nowrap; font-size: 0.72rem; color: var(--soft); text-shadow: none; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.nav-soon:hover .soon-w, .nav-soon:focus-visible .soon-w { opacity: 1; }
@media (max-width: 700px) {
  .menu-open .lp-top a.nav-soon { display: flex; flex-direction: column; align-items: inherit; }
  .menu-open .nav-soon .soon-w { position: static; translate: none; margin-top: 0.3rem; opacity: 1; }
}

/* Writing: a very thin bar beside the list of pieces, showing how far it scrolls
   (drawn by the page, since phones and Macs hide their own scroll bars). */
.wr-toc-wrap { position: relative; min-width: 0; }
.wr-bar { display: none; }
@media (min-width: 861px) {
  .wr-bar { display: block; position: absolute; top: 0; right: -0.9rem; width: 2px; height: var(--room-h); pointer-events: none; }
  .wr-bar-t { position: absolute; left: 0; top: 0; width: 2px; height: 30%; border-radius: 2px; background: var(--soft); transition: opacity 0.3s ease; }
  .wr-toc-wrap.no-scroll .wr-bar { display: none; }
}

/* The location card in the site's title face, like the nav, the opening and Skip/Send. */
.lp-place-in, .lp-place-in button { font-family: var(--font-title); }

/* Client logos: in light mode the page shades into the dark band and the logos
   are cream over it; in dark mode there is no band, the logos sit on the page's
   own ground in its light ink. */
/* (Dark mode now has its band too: the page shades into a light band, logos dark over it.) */

/* The studio's line, back in the footer above Inquire. */
.lp-foot-about { max-width: 33.6rem; margin: 0 0 clamp(2.4rem, 7vh, 4.4rem); font-family: var(--font-title); font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem); line-height: 1.35; color: var(--text); text-wrap: pretty; }
@media (max-width: 700px) { .lp-foot-about { font-size: 1.1rem; margin-bottom: 2.4rem; } }

/* Writing on wide screens: the title, its line, the card and the list held
   together in the middle of the screen, below the top bar. */
@media (min-width: 861px) {
  .wr-room { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--head-h, 50px) + clamp(2rem, 5vh, 3.5rem)); padding-bottom: clamp(2rem, 5vh, 3.5rem); box-sizing: border-box; }
}

/* Index on wide screens: every logo in the same, larger box, centred on one
   column, so they line up and read at one size beside the names. */
@media (min-width: 861px) {
  .lp-index .lp-row-mark { width: clamp(7.5rem, 10vw, 9.5rem); }
}

/* The fonts used, in very small type at the very bottom of the footer. */
.lp-foot-fonts { margin: clamp(0.8rem, 2vh, 1.4rem) 0 0; font-family: var(--font-title); font-size: 0.62rem; letter-spacing: 0.01em; color: var(--soft); }
@media (max-width: 700px) { body .lp-foot-fonts { font-size: 0.6rem !important; } }

/* The studio's line across the footer's full width, just above Inquire. */
.lp-foot-about { max-width: none; width: 100%; margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.lp-foot-about + .lp-ask { margin-top: 0; }

/* The name over the footer glyph: no glow, and clickable, opening the same
   specimen card as the glyph. */
.lp-foot-name, .dark .lp-foot-name { text-shadow: none !important; }
.lp-foot-name.on { pointer-events: auto !important; cursor: pointer; }

/* About, Team: each name and title a touch heavier, like a medium weight.
   (Items Text is loaded in Regular only, so its strokes are thickened
   slightly rather than a faked bold.) */
.ab-who { -webkit-text-stroke: 0.35px currentColor; paint-order: stroke fill; }

/* The fonts line centred at the very bottom of the footer. */
.lp-foot-fonts { width: 100%; text-align: center; align-self: center; }
/* ...and set directly under the wordmark. */
.lp-footer .lp-foot-logo { margin-bottom: 0 !important; }
.lp-footer .lp-foot-fonts { margin-top: calc(0.7rem - clamp(1.4rem, 4vh, 2.6rem)); }

/* "Coming soon" under Media in italics (asked for, an exception to no italics);
   on the phone menu, just underneath it. */
.nav-soon .soon-w { font-style: italic; }
@media (max-width: 700px) { .menu-open .nav-soon .soon-w { margin-top: 0.05rem; line-height: 1.1; } }

/* Phone menu, opened over the dark client band: its own ground, not the band's,
   so its dark text keeps full contrast. */
.nav-dark.menu-open .lp-top { background: var(--bg); border-bottom-color: transparent; }
.nav-dark.menu-open .lp-top::after { background: var(--text); }

/* The Scroll / Index switch on the page's own ground, so its words keep contrast in both modes. */
.lp-view { background: color-mix(in srgb, var(--bg) 86%, transparent); }

/* Phone: Inquire and its email line a little closer to the wordmark below. */
@media (max-width: 700px) { .lp-footer .lp-ask { margin-bottom: 1.6rem !important; } }
.lp-view button { color: var(--soft); }
.lp-view button:hover, .lp-view button[aria-pressed="true"] { color: var(--text); }

/* Phone Writing index: the list fills the page's column, so each card's top and
   bottom lines reach the same margin on both sides and the cards sit centred. */
@media (max-width: 860px) {
  .wr-split { display: block; }
  .wr-toc-wrap, .wr-toc { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* An open case's Back link: phones only, at the foot of the case. */
.lp-back-wrap { display: none; }
@media (max-width: 700px) {
  .lp-back-wrap { display: block; margin: 2.4rem 0 3rem; text-align: center; }
  .lp-back { padding: 0.6rem 1rem; border: 0; background: none; color: var(--text); font-family: var(--font-title); font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; cursor: pointer; }
}

/* Above Skip while the sentences play: up to the sentence before, down to
   the next. */
.lp-stepper { position: fixed; left: 50%; bottom: calc(var(--pad) * 1.2 + 1.75rem); z-index: 30; translate: -50% 0; display: flex; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; }
.can-skip .lp-stepper { opacity: 1; pointer-events: auto; }
.menu-open .lp-stepper, .asking .lp-stepper, .opened .lp-stepper { opacity: 0; pointer-events: none; }
.lp-stepper button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; color: var(--soft); cursor: pointer; transition: color 0.4s ease, opacity 0.4s ease; }
.lp-stepper button:hover, .lp-stepper button:focus-visible { color: var(--text); outline: none; }
.lp-stepper button[aria-disabled="true"] { opacity: 0.3; cursor: default; color: var(--soft); }
.lp-stepper svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-stepper [data-dir="-1"]:not([aria-disabled="true"]):hover svg { translate: 0 -2px; }
.lp-stepper [data-dir="1"]:hover svg { translate: 0 2px; }

/* The arrows above Skip as glyphs: an arrowhead leaf (Sagittaria latifolia),
   up for the sentence before, turned down for the next, in the button's colour. */
.lp-stepper .step-g { display: block; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--leaf) center / contain no-repeat; mask: var(--leaf) center / contain no-repeat; transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.lp-stepper .step-g.down { rotate: 180deg; }
.lp-stepper [data-dir="-1"]:not([aria-disabled="true"]):hover .step-g { translate: 0 -2px; }
.lp-stepper [data-dir="1"]:hover .step-g { translate: 0 2px; }
.lp-stepper .step-g { -webkit-mask: var(--leaf) center / contain no-repeat, var(--fleck) 0 0 / 256px repeat; -webkit-mask-composite: source-in; mask: var(--leaf) center / contain no-repeat, var(--fleck) 0 0 / 256px repeat; mask-composite: intersect; }

/* (The footer glyph's ink is pinned to the wordmark's foot as it is drawn, in grid.js; the canvas itself never moves.) */

/* The footer's last row: the fonts in the middle, the X logo at the right. */
.lp-foot-base { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; margin-top: calc(0.7rem - clamp(1.4rem, 4vh, 2.6rem)); }
.lp-footer .lp-foot-base .lp-foot-fonts { margin: 0; }
.lp-foot-x { justify-self: end; display: block; width: 0.95rem; height: 0.95rem; color: var(--text); transition: opacity 0.3s ease; }
.lp-foot-x svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.lp-foot-x:hover { opacity: 0.7; }
/* In the phone menu, the X logo underneath Contact; not in the bar on wide screens. */
.lp-top .lp-x-m { display: none; }
@media (max-width: 700px) {
  .menu-open .lp-top .lp-x-m { display: block; width: 1.05rem; height: 1.05rem; margin-top: 0.6rem; text-decoration: none; }
  .menu-open .lp-top .lp-x-m svg { display: block; width: 100%; height: 100%; fill: currentColor; }
}

/* Phone: "Find your believers", a small filled square floating at the bottom
   right while the visitor scrolls (to Jihad's booking page). Hidden while the
   menu, a case or a card is open. */
.lp-believers { display: none; }
@media (max-width: 700px) {
  .lp-believers { position: fixed; right: var(--pad); bottom: calc(var(--pad) * 1.2 + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: flex-end; width: 5.4rem; height: 5.4rem; padding: 0.6rem; box-sizing: border-box; background: var(--text); color: var(--bg); font-family: var(--font-title); font-size: 0.95rem; line-height: 1.12; text-decoration: none; opacity: 0; translate: 0 0.6rem; pointer-events: none; transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
  .show-believers .lp-believers { opacity: 1; translate: none; pointer-events: auto; }
  .menu-open .lp-believers, .opened .lp-believers, .asking .lp-believers, html:has(.lp-place.on) .lp-believers, html:has(.lp-specimen) .lp-believers { opacity: 0; pointer-events: none; }
}

/* Phone: the client logos dispersed in four staggered rows (3, 2, 3, 2),
   evenly spaced and inside the screen's edges (positions in SCATTER). */
@media (max-width: 700px) {
  .lp-scattered .lp-slot { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: 26vw; }
}
/* Phone: the name over the footer glyph a little smaller. */
@media (max-width: 700px) { body .lp-foot-name { font-size: 0.6rem !important; } }
@media (max-width: 700px) {
  .lp-scattered { height: 150vw; max-height: 40rem; }
  /* Over the dark client band (light mode), the square turns cream so it still stands out. */
  .nav-dark .lp-believers { background: var(--e-cream); color: var(--e-clay); }
}

/* "Find your believers" (phone): a bordered rectangle the width of the screen
   (inside the page margins), its words in the middle. */
@media (max-width: 700px) {
  .lp-believers { left: var(--pad); right: var(--pad); width: auto; height: 3.1rem; padding: 0 1rem; align-items: center; justify-content: center; background: var(--bg); color: var(--text); border: 1px solid var(--text); font-size: 1rem; }
  .nav-dark .lp-believers { background: var(--e-clay); color: var(--e-cream); border-color: var(--e-cream); }
}

/* Phone: no glow filter on any glyph, in either mode. iPhone Safari can fail
   to draw a canvas that has a drop-shadow filter, leaving it blank (the tree
   at the top, the glyphs in the opening). */
@media (hover: none), (max-width: 700px) {
  canvas, .lp-emblem, .lp-fold-tree, .lp-mark, .lp-client-morph, .lp-foot-tree { filter: none !important; }
}

/* Client logos never jump as their names change: each slot is held by its top
   (a longer name grows down, never lifting the logo), and phones keep room for
   a name of three lines, wide screens two. */
.lp-scattered .lp-slot { translate: -50% -2.4rem; }
@media (max-width: 700px) {
  .lp-slot-name { min-height: 3.9em; }
  .lp-scattered .lp-slot { translate: -50% -1.6rem; }
}

/* Phone: room under the footer for the floating "Find your believers", which
   stays on to the very bottom, so the wordmark and its glyph sit above it. */
@media (max-width: 700px) {
  .lp-believers { opacity: 1; }
  html:not(.show-believers) .lp-believers { opacity: 0; }
}
/* The X logo lives only in the phone menu now. */
.lp-foot-x { display: none; }

/* The name over the footer glyph a touch smaller, web and phone. */
.lp-foot-name { font-size: 0.78rem; }
@media (max-width: 700px) { body .lp-foot-name { font-size: 0.56rem !important; } }

/* The opening's words write in a little quicker. */
.lp-line.writing span { animation-duration: 0.75s; animation-delay: calc(var(--c, 0) * 11ms); }

/* Switching light / dark: everything changes at once, no fades. */
:root.mode-snap, .mode-snap *, .mode-snap *::before, .mode-snap *::after { transition: none !important; }

/* About: the group of client logos sits a little further below its title, web and phone. */
.ab-clients .ab-row { margin-top: clamp(1.6rem, 4vh, 2.6rem); }

/* "Find your believers" (phone) in the contrasting colour of where it sits:
   dark on a light ground, light on a dark ground (the client band included). */
@media (max-width: 700px) {
  .lp-believers { background: var(--text); color: var(--bg); border-color: var(--text); }
  .nav-dark .lp-believers { background: var(--e-cream); color: var(--e-clay); border-color: var(--e-cream); }
}

/* Written cases: the text still to come waits faintly in place, so it is
   clear there is more, and fills in as it is reached. */
.lp-essay p:not(.in), .lp-essay h3:not(.in), .lp-essay .lp-essay-source:not(.in) a { color: color-mix(in srgb, var(--text) 20%, var(--bg)); }
/* Skip steps away while a case or the menu is open. */
.opened .lp-skip, .menu-open .lp-skip { opacity: 0; pointer-events: none; }

/* Writing and written cases on a phone: each main title a step larger than the
   headings and lines under it (they had come out the same size). */
@media (max-width: 700px) {
  body .wr-article h1, body .lp-essay h2 { font-size: 1.5rem !important; line-height: 1.2; }
  body .wr-body h2, body .lp-essay h3 { font-size: 1.22rem !important; }
  body .wr-stage .wr-stage-t { font-size: 1.05rem !important; }
}
/* Phone: the client logos a touch smaller. */
@media (max-width: 700px) { .lp-scattered .lp-slot { width: 23vw; } }

/* The top bar keeps pace with the page: over the client band its ground is
   mixed toward the band by exactly as much as the page under it (--band, set
   from the scroll), and its words turn at the midpoint, with no fade lagging
   behind. */
.lp-top, .nav-dark .lp-top { background: color-mix(in srgb, color-mix(in srgb, var(--e-clay) calc(var(--band, 0) * 100%), var(--e-paper)) 72%, transparent); transition: none; }
.lp-top a, .lp-top .lp-soon, .lp-where, .lp-top .lp-menu, .lp-top .lp-mode { transition: none !important; }
.menu-open .lp-top, .nav-dark.menu-open .lp-top { background: var(--bg); }

/* Phone menu: everything in it a little higher. */
@media (max-width: 700px) { .menu-open .lp-top .lp-side:first-of-type { margin-top: calc(50vh - 13.5rem); } }

/* The location card after Allow: the question fades out, the card grows to
   the list's size, and the list's title fades in as the glyphs grow. */
.lp-place-in > * { transition: opacity 0.36s ease; }
.lp-place-in.fading > * { opacity: 0; }
.lp-place-in.growing { transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1), height 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.lp-place-in.shown > .lp-place-say, .lp-place-in.shown > .lp-place-go, .lp-place-in.shown > button { animation: lp-place-fade 0.6s ease 0.25s both; }
@keyframes lp-place-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lp-place-in.growing { transition: none; } .lp-place-in.shown > * { animation: none; } }
.lp-place-in.shown .lp-place-set li { animation-delay: calc(var(--i) * 110ms + 300ms); }
/* (Smoother still: the steps overlap, so the card is never empty.) */
.lp-place-in > * { transition: opacity 0.2s ease; }
.lp-place-in.growing { transition: width 0.62s cubic-bezier(0.22, 1, 0.36, 1), height 0.62s cubic-bezier(0.22, 1, 0.36, 1); }
.lp-place-in.shown > .lp-place-say, .lp-place-in.shown > .lp-place-go, .lp-place-in.shown > button { animation: lp-place-fade 0.5s ease 0.04s both; }
.lp-place-in.shown .lp-place-set li { animation-delay: calc(var(--i) * 90ms + 100ms); }

/* The footer melts into whatever is above it on every page: its top fades
   from clear into its own ground, so there is no hard edge. */
.lp-footer, .bg-still .lp-footer { background: linear-gradient(to bottom, color-mix(in srgb, var(--e-paper) 0%, transparent) 0, var(--e-paper) clamp(7rem, 20vh, 13rem)); }

/* Footer: "Inquire" and "Send" on one line, at the same height, a little
   higher above the email line; the fish stays at the line's end. */
.lp-ask-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: clamp(2rem, 6vh, 4rem); }
.lp-ask-top .lp-ask-h { margin: 0 !important; }
.lp-send-t { padding: 0; border: 0; background: none; color: var(--soft); font-family: var(--font-title); font-size: 0.85rem; cursor: pointer; transition: color 0.3s ease; }
.lp-send-t:hover, .lp-ask-ready .lp-send-t { color: var(--text); }
@media (max-width: 700px) { body .lp-send-t { font-size: 0.95rem !important; } .lp-ask-top { margin-bottom: 1.2rem; } }
.lp-ask .lp-send-t { font-size: 0.85rem; color: var(--soft); }
.lp-ask .lp-send-t:hover, .lp-ask-ready .lp-send-t { color: var(--text); }
@media (max-width: 700px) { body .lp-ask .lp-send-t { font-size: 0.95rem !important; } }

/* The work's last, uneven row centred under the three columns, each case the
   width of one column. */
.st-tail { grid-column: 1 / -1; display: flex; justify-content: center; gap: 0 clamp(1.6rem, 3vw, 3.4rem); }
.st-tail .st-col { width: calc((100% - 2 * clamp(1.6rem, 3vw, 3.4rem)) / 3); }
.st-tail .st-item { align-items: stretch; }
.st-tail { margin-top: clamp(2.4rem, 6vh, 4.4rem); }

/* Writing on wide screens: the description under the title, close beneath it. */
@media (min-width: 861px) {
  .wr-mast { display: block; }
  .wr-mast h1 { margin: 0; }
  .wr-mast p { margin: 0.7rem 0 0; max-width: 40rem; }
}

/* Footer: "Send" back over the fish, close to it ("Inquire" stays at the left). */
.lp-ask .lp-seal.lp-send { gap: 0.05rem; }
.lp-ask .lp-send .lp-send-w { margin: 0; line-height: 1; font-size: 0.85rem; color: var(--soft); }
@media (max-width: 700px) { body .lp-ask .lp-send .lp-send-w { font-size: 0.95rem !important; } }

/* The name over the footer glyph lifted a little, clear of the tallest glyphs. */
@media (min-width: 701px) { .lp-foot-name { bottom: calc(100% - (100vw - 2 * var(--pad)) * 0.004 + 2.6rem) !important; } }

/* Phone: every page's main title one size (About, Writing, articles, written cases). */
@media (max-width: 700px) { body .ab-page .wr-head h1, body .wr-mast h1, body .wr-head h1 { font-size: 1.5rem !important; } }

/* After Allow, one motion: the card grows over 0.8s while the question fades
   over the top and the list comes in. */
.lp-place-in.growing { transition: width 0.65s cubic-bezier(0.22, 1, 0.36, 1), height 0.65s cubic-bezier(0.22, 1, 0.36, 1); }
.lp-place-ghost { opacity: 1; transition: opacity 0.28s ease; }
.lp-place-ghost.out { opacity: 0; }
.lp-place-in.shown > .lp-place-say, .lp-place-in.shown > .lp-place-go, .lp-place-in.shown > button { animation: lp-place-fade 0.45s ease 0.15s both; }
.lp-place-in.shown .lp-place-set li { animation-delay: calc(var(--i) * 50ms + 120ms); }

/* Case study pictures fade in as they arrive rather than popping in. */
.lp-gallery img, .lp-essay-figs img { transition: opacity 0.5s ease; }
.lp-gallery img:not(.in), .lp-essay-figs img:not(.in) { opacity: 0; }

/* Where the opening folds away, the tree and first sentence above the work
   fade in rather than appearing at once. */
.folded .lp-fold { animation: fold-in 0.8s ease both; }
@keyframes fold-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .folded .lp-fold { animation: none; } }

/* After Allow: one slower, even motion. The question fades, the card grows
   (easing in and out) round the list held at its final width, then the title
   and each glyph with its name come in together. */
.lp-place-in.growing { transition: width 0.9s cubic-bezier(0.65, 0, 0.35, 1), height 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.lp-place-ghost { transition: opacity 0.35s ease; }
.lp-place-in.shown > .lp-place-say, .lp-place-in.shown > .lp-place-go, .lp-place-in.shown > button { animation: lp-place-fade 0.6s ease 0.4s both; }
.lp-place-in.shown > .lp-place-do { animation: lp-place-fade 0.6s ease 1.1s both; }
.lp-place-in.shown .lp-place-set li { animation-duration: 0.8s; animation-delay: calc(var(--i) * 80ms + 450ms); }

/* Case studies, one system (2026-11-11). Every case in the grid is the same
   three things: a square frame (its picture held whole inside it at its own
   shape, or, for a written case, its quote alone), its mark under the frame
   at one size with the company's name under it, and at most one line (a picture's description; a written
   case's quote is its line). */
.st-item, .st-col:nth-child(2) .st-item, .st-col:nth-child(3) .st-item { align-items: center; gap: clamp(1.1rem, 1.8vw, 1.6rem); }
.st-pic { position: relative; align-self: center; width: 84%; aspect-ratio: 1; }
.st-pic img, .st-pic video { position: absolute; inset: 0; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: auto; }
/* A quote needs no frame: it takes its own height, the same space above the mark. */
.st-pic:has(.pl-cover) { aspect-ratio: auto; width: 84%; }
.st-pic .lp-snap.pl-cover { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: auto; padding: 0; }
.st-pic .lp-snap .pl-q, .st-pic .lp-snap .pl-q.pl-q-long { max-width: 17em; font-size: clamp(1.1rem, 0.85rem + 0.8vw, 1.75rem); line-height: 1.2; }
.st-cap { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; align-self: center; width: 84%; text-align: center; }
.st-mark { width: clamp(6rem, 8vw, 7.5rem); height: auto; aspect-ratio: 520 / 220; margin: 0; }
.st-name { display: block; margin-top: -0.3rem; font-family: var(--font-title); font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.35rem); line-height: 1.2; color: var(--text); }
.st-line { max-width: 24rem; font-size: clamp(0.98rem, 0.86rem + 0.25vw, 1.1rem); line-height: 1.45; color: var(--soft); text-wrap: balance; }
/* The list (phones, and Index on the web): the mark and name, then the one line. */
.lp-row-name { min-height: 0; }
.lp-row-quote { margin-bottom: 0; }

/* A word set in italics in the opening and About (between asterisks in LINES). */
.lp-line .em, .lp-form-say .em, .pl .em { font-style: italic; }

/* A break between an essay's parts (A Great Lakes Business): a short thin
   rule in the middle of the column, with room around it. */
.wr-body hr { width: 2.5rem; height: 0; margin: 2.8em auto; border: 0; border-top: 1px solid var(--soft); }
/* A tweet the essay quotes: its words as a quote, who and when under them. */
.wr-body blockquote.tweet { font-size: 1.15rem; color: var(--text); }
.wr-body blockquote.tweet .tweet-by { margin-top: 0.6em; font-size: 0.95rem; color: var(--soft); }

/* Change region: every region by name, two columns, the current one marked
   in the text colour; it comes in as the glyph list does. */
.lp-place-regions { columns: 2; column-gap: clamp(1.5rem, 5vw, 3.5rem); margin: 1.4rem 0 0.2rem; padding: 0; list-style: none; text-align: left; }
.lp-place-regions li { break-inside: avoid; }
.lp-place .lp-place-regions button { display: block; padding: 0.32rem 0; font-size: 1rem; line-height: 1.3; text-align: left; color: var(--e-ink-soft); }
.lp-place .lp-place-regions button:hover, .lp-place .lp-place-regions button:focus-visible, .lp-place .lp-place-regions button[aria-current] { color: inherit; }
.lp-place-in.shown > .lp-place-regions { animation: lp-place-fade 0.6s ease 0.35s both; }
@media (max-width: 700px) { .lp-place .lp-place-regions button { font-size: 0.9rem; padding: 0.28rem 0; } }
@media (prefers-reduced-motion: reduce) { .lp-place-in.shown > .lp-place-regions { animation: none; } }


/* Phone: the fades into and out of the clients band are a little over half a
   screen each way (a full screen is a lot of empty scrolling on a phone), and
   the band's padding shrinks with them. grid.js reads the same length for the
   top bar's colour. */
@media (max-width: 700px) { .lp-hex { --fade: 58vh; padding-top: 62vh; padding-bottom: 62vh; min-height: 0; } }

/* Skip and the intro's arrows are out of reach (not just see-through) while
   they aren't showing, so nobody can tab to them; they still fade out first. */
.lp-skip, .lp-stepper { visibility: hidden; transition-property: color, opacity, visibility; transition-duration: 0.4s, 0.6s, 0s; transition-delay: 0s, 0s, 0.6s; }
.can-skip .lp-skip, .can-skip .lp-stepper { visibility: visible; transition-delay: 0s; }
.menu-open .lp-skip, .asking .lp-skip, .menu-open .lp-stepper, .asking .lp-stepper, .opened .lp-stepper { visibility: hidden; transition-delay: 0s, 0s, 0.6s; }