/* =========================================================
   site.css — the page sections.

   Rhythm across every page: expressive → clean → clean →
   expressive. Title moments carry the artwork; the reading
   sections go quiet again.
   ========================================================= */

/* =========================================================
   1 · HERO — the poster moment
   ========================================================= */

.hero {
  position: relative;
  padding-block: clamp(18px, 2.6vw, 40px) clamp(36px, 5vw, 72px);
  overflow: hidden;
}

.hero__stage {
  --em: 6.05;            /* PORTFOLIO */
  --cap: 17rem;
  --face-x: 35cqw;       /* the head sits left of centre, not under the middle */
  --face-w: 35cqw;
  --face-top: 3.4cqw;
  --id-top: 19cqw;
  width: calc(100% - var(--gutter) * 2);
  max-width: none;
  margin-inline: auto;
  padding-bottom: 21cqw;
}
.hero__word { color: var(--red-ink); }
.hero__stage .poster__star { right: -1.6em; top: -1.4em; }

/* A gentle nod on the artwork over the word. Two things matter here and
   the first version got both wrong.

   Speed: at nine seconds the movement sat below the rate at which an eye
   reads motion as rhythm, so it kept trying to track it instead of
   settling. Four seconds is slow enough to be calm and quick enough to be
   legible, which is what makes it restful rather than nagging.

   Path: it rises and falls on one axis with the tilt tied to the same
   phase, rather than wandering a figure of eight. A predictable path is
   one the eye can learn in a cycle and then ignore.

   It runs on `translate` and `rotate` rather than `transform`, which
   already carries the centring and the resting angle, so the two compose
   instead of fighting. */
@keyframes heroSway {
  0%, 100% { translate: 0 0;    rotate: -0.5deg; }
  50%      { translate: 0 -9px; rotate: 0.5deg; }
}
.hero__stage .poster__face,
.stkhero__stage .poster__face { animation: heroSway 4s ease-in-out infinite; }

/* the star runs a little quicker and offset, so the two heroes are not in
   lockstep for anyone flipping between the pages */
.stkhero__stage .poster__face { animation-duration: 3.6s; animation-delay: -1.3s; }

@media (prefers-reduced-motion: reduce) {
  .hero__stage .poster__face,
  .stkhero__stage .poster__face { animation: none; }
}

.hero__base {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5) var(--s-6);
  margin-top: clamp(16px, 2.4vw, 40px);
}

.hero__facts {
  flex: 1 1 26rem;
  border-top: 1px solid var(--rule);
}
.hero__facts div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t--1);
}
.hero__facts dt { color: var(--ink-faint); letter-spacing: .1em; text-transform: uppercase; }
.hero__facts dd { margin: 0; font-weight: 600; }

@media (max-width: 900px) {
  .hero__stage { padding-bottom: 0; }
  .hero__base { justify-content: center; }
}

/* =========================================================
   2 · section heads — the quiet way in
   ========================================================= */

/* Both columns start on the same line. Baseline alignment reads as wrong
   here, because the larger supporting line then sits 7px above the eyebrow;
   what has to match is the top of the type, not the baseline. */
/* The same two columns as a project row, with the same gap and the same
   breakpoint. As a flex row with space-between, the supporting line's left
   edge floated with its own width and never lined up with the project text
   underneath it. */
.shead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4.4vw, 68px);
  align-items: start;
  margin-bottom: var(--s-6);
}
.shead__l { position: relative; max-width: 27rem; }

/* a centred head, for sections with nothing in the right column */
.shead--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
/* Wide enough to hold the longest centred title on one line, so the
   quiet bands keep the same single-line rhythm as the rest. */
.shead--center .shead__l { max-width: 54rem; }

@media (max-width: 880px) {
  .shead { grid-template-columns: 1fr; gap: var(--s-4); }
}
/* The display face carries less optical weight than Inter Bold at the same
   pixel size, so a section heading needs a little more than the items under
   it, not the same. */
.shead__title {
  margin-top: .18em;
  font-size: clamp(2.1rem, 1.58rem + 2.3vw, 3.9rem);
}
.shead__star {
  position: absolute;
  left: -2.1em;
  top: 1.7em;
  width: clamp(20px, 2.4vw, 32px);
}
.shead .lede { max-width: none; }

@media (max-width: 760px) {
  .shead__star { display: none; }
}

/* =========================================================
   3 · PROJECTS, as real UI
   ========================================================= */

.projects { display: grid; gap: var(--s-8); }

/* The "browse all work" link centres under the rows rather than sitting in
   the left column, where it left the right half of the line empty. It also
   sits closer to the last project and closer to the rule below, so the two
   sections read as neighbours instead of drifting apart.

   Styled by class, not by #work. The preview bundler stacks all five pages
   in one document and namespaces their ids to keep them unique, so an
   id selector silently stops matching there. */
.work__more { margin-top: var(--s-6); text-align: center; }
.band--work { padding-bottom: var(--s-5); }

.proj {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4.4vw, 68px);
  align-items: start;
}
/* Alternating rows swap sides. The column widths have to swap with them,
   or every second cover is rendered in the narrower column. */
.proj:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.proj:nth-child(even) .proj__media { order: 2; }

.proj__media { position: relative; min-width: 0; }
.proj__shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--card);
  aspect-ratio: 16 / 9;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.proj__shot img { width: 100%; height: 100%; object-fit: cover; }
.proj__shot--mock {
  container-type: inline-size;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 40px);
  background: var(--blue-wash);
}
.proj:has(a):hover .proj__shot { transform: translateY(-4px); box-shadow: 0 18px 44px -28px rgba(25,24,22,.42); }

.proj__body { min-width: 0; }
.proj__no {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink-faint);
}
.proj__no .ca { width: clamp(18px, 2vw, 26px); }

/* The client's mark. Width, not height, is the knob: matching heights
   made the wide TDK wordmark read as twice the size of the Disney one.
   --markw comes from the roster's optical widths, set per row by home.js.
   Room below it too, so it is not sitting on the title. */
.proj__client { margin-top: var(--s-3); margin-bottom: var(--s-4); }
.proj__client img {
  width: var(--markw, 108px);
  max-width: 55%;
  height: auto;
}

.proj__title {
  margin-top: 0;
  font-size: var(--t-3);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.proj__line {
  margin-top: .55em;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 40ch;
}

.meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.meta dt {
  font-size: var(--t--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.meta dd { margin: 4px 0 0; font-size: var(--t-0); font-weight: 600; }

/* work that is live but whose write-up is not */
.tag-soft {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .01em;
}
.tile__tags .tag-soft { text-transform: none; letter-spacing: .01em; padding: 4px 10px; }

/* The same chips as the work grid, so a project reads the same way in
   both places. */
.proj__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.proj__tags .tag-soft { text-transform: none; letter-spacing: .01em; padding: 4px 10px; }

.proj__cta { margin-top: var(--s-5); }

/* One link covers the whole row, so the card is a single tab stop and the
   image and button are not repeated announcements of the same destination. */
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.proj__title a { position: static; }
.proj:focus-within .proj__shot { transform: translateY(-4px); }
.proj__title a:focus-visible { outline-offset: 4px; }

@media (max-width: 880px) {
  .proj { grid-template-columns: 1fr; gap: var(--s-4); }
  .proj:nth-child(even) .proj__media { order: 0; }
  .proj__shot { aspect-ratio: 16 / 9; }
}

/* =========================================================
   4 · DESIGN TOOLKIT
   ========================================================= */

.kit__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 0 clamp(32px, 5vw, 88px);
  max-width: 56rem;
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}
.kit__item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.kit__item b {
  display: block;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -.015em;
}
.kit__item span {
  display: block;
  margin-top: 3px;
  font-size: var(--t--1);
  color: var(--ink-soft);
}

/* =========================================================
   4a · WORKED WITH, the client roster
   ========================================================= */

/* A marquee, not a wall. The roster sits between the line and the work,
   so it has to read as a moving band rather than as a section of its own:
   full bleed, one continuous lane, fading out at both edges.

   Every mark keeps its own colour. That puts ten palettes on one line, so
   the balance is carried by size instead: see the `w` numbers in data.js,
   which are tuned by optical weight rather than a shared cap height. */

.band--clients { padding-block: var(--s-5) var(--s-6); }
.band--clients .shead { margin-bottom: var(--s-6); }

.marquee {
  position: relative;
  overflow: hidden;
  /* the lane fades out rather than being cut off by the viewport edge */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__lane {
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(48px, 6vw, 96px);
  padding-inline: clamp(24px, 3vw, 48px);
}

/* Two identical lanes, so sliding the track exactly half its width lands
   the copy where the original started and the loop never shows a seam. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.client {
  display: grid;
  place-items: center;
  /* larger than the static wall was: this one is moving past you */
  width: calc(var(--w, 120px) * 1.45);
}
.client img {
  display: block;
  width: 100%;
  height: auto;
}

/* Motion off: the lane stops and becomes a normal scrolling strip, so the
   whole roster is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee__track { animation: none; }
  .marquee__lane[aria-hidden="true"] { display: none; }
}

/* Fallback for any entry with no artwork yet. */
.client__name {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}


/* =========================================================
   4b · HOW I WORK, the process strip
   ========================================================= */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--s-5) clamp(20px, 3vw, 44px);
}
.step { padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.step__no {
  display: block;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--red-ink);
}
.step h3 {
  margin-top: .5em;
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -.02em;
}
.step p {
  margin-top: .45em;
  font-size: var(--t--1);
  line-height: 1.6;
  color: var(--ink-soft);
}
.steps__note {
  margin-top: var(--s-6);
  font-size: var(--t-0);
  color: var(--ink-faint);
  max-width: 52ch;
}

/* =========================================================
   5 · FACTS — the short version, as plain data
   ========================================================= */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 5vw, 88px);
  border-top: 1px solid var(--rule);
}
@media (max-width: 700px) { .facts { grid-template-columns: 1fr; } }
.facts > div {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.facts dt {
  font-size: var(--t--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.facts dd { margin: 0; font-size: var(--t-0); font-weight: 600; }
@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================
   6 · WORK INDEX + PLAY GRID
   ========================================================= */

.ptitle {
  position: relative;
  padding-block: clamp(26px, 3.4vw, 54px) clamp(34px, 4.6vw, 68px);
  overflow: hidden;
}
.ptitle__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
}

/* the word is fitted to the left column, not to the page */
.ptitle__lead { min-width: 0; }
/* Page titles fit their column, but the cap keeps a short title from
   towering over a long one on the next page. */
.ptitle__word {
  --cap: 8.5rem;
  text-align: left;
  color: var(--red-ink);
  margin-top: .16em;
}

.ptitle__side { position: relative; min-width: 0; }
.ptitle__face {
  display: block;
  width: min(46%, 176px);
  margin-left: 0;
  transform: rotate(var(--face-rot, 0deg));
  filter: drop-shadow(0 14px 20px rgba(25, 24, 22, .07));
}
.ptitle__side .lede {
  margin-top: var(--s-4);
  font-size: var(--t-0);
  max-width: 40ch;
}
.ptitle__star {
  position: absolute;
  left: min(46%, 176px);
  top: -2%;
  z-index: 2;
  width: clamp(18px, 1.9vw, 26px);
}

@media (max-width: 860px) {
  .ptitle__stage { grid-template-columns: 1fr; gap: var(--s-4); }
  .ptitle__face { width: min(38%, 140px); }
  .ptitle__star { display: none; }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule-soft);
}
.filters__label { margin-right: var(--s-2); }
.chip {
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink-soft);
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-6);
}
.tile { position: relative; display: block; }
.tile__shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--card);
  aspect-ratio: 16 / 9;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile__shot img { width: 100%; height: 100%; object-fit: cover; }
.tile__shot--mock {
  container-type: inline-size;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.6vw, 30px);
  background: var(--blue-wash);
}
a.tile:hover .tile__shot { transform: translateY(-4px); box-shadow: 0 16px 40px -26px rgba(25,24,22,.4); }
.tile__no {
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--ink-faint);
  margin-top: var(--s-3);
}
.tile__title { margin-top: .1em; font-size: var(--t-2); font-weight: 700; letter-spacing: -.025em; }
.tile__line { margin-top: .3em; font-size: var(--t-0); color: var(--ink-soft); max-width: 44ch; }
.tile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.tile__tags span {
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.empty { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-7) 0; }

/* --- play ------------------------------------------------ */

.plays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--s-5);
}
.play {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
}
.play__art { display: grid; place-items: center; height: clamp(96px, 13vw, 140px); }
.play__art .ca { width: auto; max-height: 100%; }
.play h3 { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; }
.play p { font-size: var(--t-0); color: var(--ink-soft); }
.play__tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--paper-warm);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* =========================================================
   7 · ABOUT
   ========================================================= */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.about__photo {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.about__photo img { width: 100%; height: auto; }
.about__ring { position: absolute; z-index: 3; pointer-events: none; }
.about-note-a { left: -6%;  top: 6%; }
.about-note-b { right: -4%; bottom: 12%; }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about-note-a, .about-note-b { position: static; margin-top: var(--s-3); }
}

/* --- a pull quote, for breaking up the longer reading --- */

/* The display face again, but in sentence case, smaller than a section
   title and in the character's hair colour, so the two never read as the
   same thing. */
.pull { position: relative; max-width: 54rem; margin-inline: auto; text-align: center; }

/* The line is written as two sentences and reads as two lines, so the
   break is set rather than left to the measure. Each half still wraps on
   its own when the screen is too narrow to hold it. */
.pull__line { display: block; }
.pull p {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 0.92rem + 1.05vw, 1.85rem);
  line-height: 1.34;
  letter-spacing: .004em;
  color: var(--brown);
  text-wrap: balance;
}

/* a small drawn smiley, for the line that earns one */
.smiley {
  display: inline-block;
  width: .78em;
  height: .78em;
  margin-left: .18em;
  vertical-align: -.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.smiley circle.dot { fill: currentColor; stroke: none; }
.pull__mark {
  position: absolute;
  left: -14%;
  top: 6%;
  width: clamp(34px, 3.6vw, 54px);
}
@media (max-width: 700px) { .pull__mark { display: none; } }

/* --- the quick-facts table --- */

.specs { border-top: 1px solid var(--rule); }
.specs div {
  display: grid;
  grid-template-columns: minmax(0, .26fr) minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.specs dt {
  font-size: var(--t--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.specs dd { margin: 0; font-size: var(--t-1); font-weight: 600; letter-spacing: -.015em; }
@media (max-width: 640px) {
  .specs div { grid-template-columns: 1fr; gap: 4px; }
}

/* --- the small true things --- */

.trues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--s-3) var(--s-6);
}
.trues li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-0);
  color: var(--ink-soft);
  line-height: 1.55;
}
/* one fixed box for every tick, so a row of them reads as a set */
.trues .ca {
  width: 18px;
  height: 20px;
  object-fit: contain;
  object-position: center top;
  margin-top: .25em;
}

.growing {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  max-width: 62ch;
}
.growing h3 { font-size: var(--t-2); font-weight: 700; letter-spacing: -.025em; }
.growing p { margin-top: .6em; font-size: var(--t-1); line-height: 1.6; color: var(--ink-soft); }

/* --- the tools line under the toolkit --- */

.tools {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  text-align: center;
  font-size: var(--t--1);
  color: var(--ink-faint);
}
.tools b {
  display: block;
  margin-bottom: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tools span { color: var(--ink); font-weight: 600; }
.tools span + span::before { content: " · "; color: var(--ink-faint); font-weight: 400; }

/* --- life outside work --- */

.outside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0 clamp(32px, 5vw, 88px);
  border-top: 1px solid var(--rule);
}
.outside > div {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.outside dt {
  font-size: var(--t-1);
  font-weight: 700;
  letter-spacing: -.02em;
}
.outside dd {
  margin: 5px 0 0;
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* The photographs. Columns rather than a grid, because the set mixes
   portrait, landscape and one phone screenshot: masonry lets every photo
   keep its own shape instead of being cropped to fit a cell. */
.gallery {
  columns: 3;
  column-gap: var(--s-4);
  margin-top: var(--s-7);
}
.shotcard {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--s-5);
}
.shotcard img {
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}
.shotcard figcaption {
  margin-top: var(--s-2);
  font-size: var(--t--1);
  color: var(--ink-faint);
}

@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }

/* an editorial two-column list — used for process and principles */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: minmax(0, .38fr) minmax(0, 1fr);
  gap: var(--s-3) var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.row__k { display: flex; align-items: flex-start; gap: var(--s-2); }
.row__k .ca { width: clamp(22px, 2.6vw, 34px); margin-top: 1px; }
.row__k h3 { font-size: var(--t-1); font-weight: 700; letter-spacing: -.02em; }
.row p { color: var(--ink-soft); max-width: 62ch; }
.row__no {
  font-family: var(--f-display);
  font-size: var(--t-2);
  color: var(--red-ink);
  line-height: 1;
}
@media (max-width: 720px) { .row { grid-template-columns: 1fr; } }

/* =========================================================
   8 · CLOSING — the visual echo of the hero
   ========================================================= */

.close {
  position: relative;
  padding-block: clamp(52px, 7vw, 104px) clamp(44px, 6vw, 84px);
  overflow: hidden;
  border-top: 1px solid var(--rule-soft);
}
.close__inner { position: relative; text-align: center; }
.close__stage {
  --cap: 6.4rem;
  width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
}
.close__word { color: var(--red-ink); }
.close__stamp { display: grid; place-items: center; margin-bottom: clamp(8px, 1.4vw, 22px); }
.close .lede { margin: var(--s-5) auto 0; text-align: center; }
.close__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.close__mail {
  display: inline-block;
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color .16s var(--ease);
}
.close__mail:hover { text-decoration-color: var(--ink); }
.close__art > * { position: absolute; pointer-events: none; }
.close__art .close-flower { left: 5%;  top: 14%;   width: clamp(40px, 5vw, 78px);  --rot: -12deg; }
.close__art .close-star   { right: 7%; top: 11%;   width: clamp(28px, 3.4vw, 50px); --rot: 9deg; }
.close__art .close-laptop { right: 3%; bottom: 8%; width: clamp(56px, 7vw, 112px); --rot: 8deg; }
.close__art .close-arrow  { left: 6%;  bottom: 14%; width: clamp(46px, 5.6vw, 86px); --rot: -8deg; }
@media (max-width: 800px) {
  .close__art .close-laptop,
  .close__art .close-arrow { display: none; }
  .close__art .close-flower { left: 2%; top: 5%; }
  .close__art .close-star { right: 3%; top: 4%; }
}

/* =========================================================
   9 · STICKERS, the collection page
   ========================================================= */

/* --- the sticker page's poster hero, on the home page's mechanics --- */

.stkhero__stage {
  --cap: 15rem;
  --face-x: 30cqw;        /* the sticker sits over the word, left of centre */
  --face-w: 15cqw;
  --face-top: 3cqw;
  width: calc(100% - var(--gutter) * 2);
  max-width: none;
  margin-inline: auto;
  padding-bottom: 4cqw;   /* just enough for the sticker to hang below */
}
.stkhero__word { color: var(--red-ink); }
.stkhero__art { filter: drop-shadow(0 16px 24px rgba(25, 24, 22, .12)); }

/* One column under the word, left aligned, each part under the last. The
   home page's two-column hero works because the left side carries a table
   of facts; here there was only a caption on the right, floating. */
.stkhero__intro {
  /* the same edges as the poster stage above it, so the copy starts under
     the S of the word rather than indented from it */
  width: calc(100% - var(--gutter) * 2);
  max-width: none;
  margin-inline: auto;
  margin-top: clamp(20px, 3vw, 44px);
  display: grid;
  justify-items: start;
}
.stkhero__kicker {
  max-width: 46rem;
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.stkhero__intro .lede { margin-top: var(--s-4); max-width: 46rem; }
.stkhero__warn { margin-top: var(--s-5); }
.stkhero__act  { margin-top: var(--s-5); }
.stkhero__note {
  margin-top: var(--s-3);
  font-size: var(--t--1);
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .stkhero__stage { padding-bottom: 0; }
  /* the star is one sticker, not a portrait: it does not need to fill the
     screen */
  .stkhero__art { width: min(38vw, 190px); margin-top: -2vw; }
}

/* The wall follows straight on from the hero; a full section's worth of
   air above it just left a hole. */
.band--wall { padding-block: var(--s-4) var(--s-8); }

/* Every sticker is on the page at once, packed rather than gridded:
   centred flex wrap with sizes and tilts that vary from one to the next,
   so a row never lines up and the block reads like a sheet somebody has
   been picking from. */

.stickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  max-width: 74rem;
  margin-inline: auto;
}

/* Each sticker is a download link. Pointing at one holds it still,
   straightens it, lifts it and shows the arrow, so what you can do with it
   is obvious without a caption under every single one. */
.stk {
  position: relative;
  flex: none;
  display: block;
  width: var(--size, 120px);
  transform: rotate(var(--tilt, 0deg));
  animation: bob var(--bob, 6s) ease-in-out var(--bob-delay, 0s) infinite;
  transition: transform .28s var(--ease);
}
.stk img { width: 100%; height: auto; }

/* The bob rides on the wrapper's own rotation, so a sticker floats without
   ever losing the angle it was placed at. */
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

.stk:hover,
.stk:focus-visible {
  transform: rotate(0deg) scale(1.22);
  animation-play-state: paused;
  z-index: 3;
}
.stk:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 8px; }

.stk__get {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events: none;
}
.stk__get svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stk:hover .stk__get,
.stk:focus-visible .stk__get { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .stk { animation: none; }
  .stk, .stk:hover, .stk__get { transition: none; }
}

/* Nothing in the collection yet. */
.stickers--empty { grid-template-columns: 1fr; }
.stickers__soon {
  max-width: 34rem;
  padding: var(--s-7) var(--s-5);
  border: 1px dashed var(--rule);
  border-radius: var(--r);
  text-align: center;
}
.stickers__soonTitle {
  font-family: var(--f-display);
  font-size: var(--t-2);
  color: var(--brown);
}
.stickers__soonBody {
  margin-top: var(--s-3);
  font-size: var(--t-0);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* the aside under the lede, in the display face like every other aside */
.stickers__aside { margin-top: var(--s-4); }

/* take the lot, or take one */
.stickers__grab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-5);
}
.stickers__grabNote { font-size: var(--t--1); color: var(--ink-faint); }