/* Uyáva Studio — site.
   First screen: the hero from design-hero-handoff (styles in hero/hero.css). The sections below it come from the
   giant-type direction chosen on 2026-10-03 (the other four stay in ../landing as an archive).
   Brand: cream, charcoal, burgundy, gray and their opacities only; Basis Grotesque + Basis Grotesque Mono, Tiempos Headline
   for the hero's italic word; square corners everywhere except the hero's 4px call-to-action. */

/* ---------- fonts ---------- */
/* Basis Grotesque Pro and Basis Grotesque Mono Pro from the brand folder.
   Before publishing, check that the font licence covers web use. */
@font-face { font-family: "Basis Grotesque"; src: url("assets/fonts/basis-grotesque-regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Basis Grotesque"; src: url("assets/fonts/basis-grotesque-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Basis Grotesque"; src: url("assets/fonts/basis-grotesque-bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Basis Grotesque"; src: url("assets/fonts/basis-grotesque-black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Basis Grotesque Mono"; src: url("assets/fonts/basis-grotesque-mono-medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
/* Tiempos Headline: TEST fonts (66 glyphs, no Ē, —, · or →; the browser borrows those from the fallback serif).
   Not for publishing: replace with the licensed web fonts first. */
@font-face { font-family: "Tiempos Headline"; src: url("assets/fonts/tiempos-headline-regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("assets/fonts/tiempos-headline-italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url("assets/fonts/tiempos-headline-light-italic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --cream: #F5F1EB;
  --charcoal: #242424;
  --burgundy: #6B2838;
  --burgundy-deep: #561F2C;
  --burgundy-lit: #A84B61;   /* burgundy lines on charcoal (the service drawings), where #6B2838 would not read */
  --gray: #8D8782;
  /* every frame (buttons, chips, tags, panels) has the call to action's corners (the designer, 2026-10-06) */
  --r: 4px;

  --ink: var(--charcoal);
  --ink-2: rgba(36, 36, 36, .74);
  --line: var(--charcoal);

  --sans: "Basis Grotesque", sans-serif;
  --mono: "Basis Grotesque Mono", monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --pad: clamp(16px, 1.7vw, 26px);
  --gut: clamp(10px, 1.4vw, 20px);
  /* the rhythm (2026-10-06): --sec-y between screens (the top and the bottom of every section), --sec-in from a section's
     title and index row to its content; inside, the components keep their own smaller steps */
  --sec-y: clamp(88px, 12vh, 160px);
  --sec-in: clamp(36px, 4vw, 64px);

  scrollbar-color: var(--charcoal) var(--cream);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* anchors land under the fixed top bar, not behind it */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 92px); overflow-x: clip; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  caret-color: var(--burgundy);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }

::selection { background: var(--charcoal); color: var(--cream); }
.close ::selection { background: var(--cream); color: var(--charcoal); }
:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
.close :focus-visible { outline-color: var(--cream); }

/* ---------- helpers ---------- */
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 14px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; background: var(--charcoal); color: var(--cream); }
.skip:focus { top: 12px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the one arrow of the site: the hero call to action's long thin arrow (#i-arrow), 1.45em wide in text links */
.i { display: inline-block; flex: none; width: 1.45em; height: .55em; vertical-align: .05em; overflow: visible; }
.nw { white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

.index-row, .foot { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* section titles come in letter by letter, the way the hero's headline does: each letter slides in from the right out of
   a horizontal blur and settles crisp (script.js splits the letters and puts the plain text back afterwards) */
.t-in { --t-stagger: 70ms; --t-dur: 1100ms; --t-blur: 8px; }
.js .t-in .tw { display: inline-block; white-space: nowrap; }
.js .t-in .tl { display: inline-block; opacity: 0; transform-origin: 50% 85%; }
.js .t-in.is-in .tl { animation: titleIn var(--t-dur) cubic-bezier(.16, 1, .3, 1) calc(var(--i) * var(--t-stagger)) forwards; }
@keyframes titleIn {
  0% { filter: blur(var(--t-blur)); opacity: 0; transform: translateX(.18em) scaleX(1.12); }
  55% { opacity: 1; }
  100% { filter: blur(0); opacity: 1; transform: none; }
}

/* ---------- even rags ---------- */
/* every block of words runs to one right edge, its column's, and keeps no lone word on its last line (the designer,
   2026-10-09: a word stuck out past the others); only the one-line display words are balanced */
p, li, dd, h1, h2, h3 { text-wrap: pretty; }
.cs-line p, .work-card__name { text-wrap: balance; }

/* ---------- buttons ---------- */
/* one family (2026-10-05): primary = the hero call to action's shape (Basis 500 16 px, 4 px corners, the long arrow),
   filled; secondary (.btn-2) = the same, outlined; text links = mono caps on an underline with the arrow */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 25px;
  justify-content: center;
  border: 0;
  border-radius: 4px;
  background: var(--charcoal);
  color: var(--cream);
  font: 500 16px/1 var(--sans);
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.btn .i { width: 1em; height: .375em; transition: translate .35s var(--ease-out); }
.btn:hover { background: var(--burgundy); }
.btn:hover .i { translate: 4px 0; }
/* the close's Start a project: burgundy like the first screen's, a deeper burgundy on hover, focus and a press
   (the designer, 2026-10-09) */
.btn--light { background: var(--burgundy); color: var(--cream); }
.btn--light:hover, .btn--light:focus-visible, .btn--light:active { background: var(--burgundy-deep); color: var(--cream); }
.btn-2 { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 25px; border: 1px solid currentColor; border-radius: var(--r); font: 500 16px/1 var(--sans); letter-spacing: -0.005em; text-decoration: none; color: inherit; transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.btn-2 .ar { display: inline-block; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn-2 .ar svg { display: block; width: 1em; height: .375em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.7; }
.btn-2:hover, .btn-2:focus-visible { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
.btn-2:hover .ar, .btn-2:focus-visible .ar { transform: translateX(4px); }

/* ---------- index rows ---------- */
.index-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.index-row > * { white-space: nowrap; }
.index-row > :nth-child(1) { grid-column: 1 / span 4; }
.index-row > :nth-child(2) { grid-column: 5 / span 2; }
.index-row > :nth-child(3) { grid-column: 7 / span 2; }
.index-row > :nth-child(4) { grid-column: 9 / span 3; }
.index-row > :nth-child(5) { grid-column: 12; justify-self: end; }
.index-row__title { font: inherit; letter-spacing: inherit; }
/* two notes: one at the start of the line, one at its end (the designer, 2026-10-07) */
.index-row--ends { display: flex; justify-content: space-between; gap: 24px; }
.index-row--ends > * { white-space: normal !important; }
.index-row--ends > :last-child { text-align: right; }

/* ---------- section titles ---------- */
/* the giant black titles of every section (Selected work, Services, Meet the founder, About us): Basis Black, under them
   an index row; they come in letter by letter like the hero's headline (.t-in, script.js) */
.sec-title { margin: 0 0 clamp(24px, 3vw, 44px) -0.045em; font: 900 clamp(3rem, 9.2vw, 11.5rem)/.86 var(--sans); letter-spacing: 0; }

/* ---------- services ---------- */
/* the whole brand and its five parts as a strip of panels (hero/services.js): the page scrolls past it; sideways it moves
   with the arrows under it, a swipe, a trackpad or a mouse drag, and snaps to a panel. Each panel: the number, the name,
   what it is, what is in it, the way in; beside it a work. They alternate cream and charcoal. */
.services { position: relative; z-index: 2; padding: var(--sec-y) 0; background: var(--cream); }
.services > .sec-title, .services > .index-row { margin-left: var(--pad); margin-right: var(--pad); }
.services > .sec-title { margin-left: calc(var(--pad) - 0.045em); }
.svc-car { margin-top: var(--sec-in); }
/* the deck (2026-10-14): the stage holds still for the length of the car while scrolling deals each card onto the pile
   from below (hero/services.js sets each card's place and turn); all cards share one grid cell, so the pile is as tall
   as the tallest card */
.svc-car.is-deck { height: calc(100svh + (var(--svc-n, 6) - 1) * var(--svc-step, 64svh)); }
.svc-car.is-deck .svc-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 64px; }
.svc-car.is-deck .svc-track { display: grid; justify-content: center; overflow: visible; padding: 0 var(--pad); cursor: auto; scroll-snap-type: none; }
.svc-car.is-deck .svc-panel { grid-area: 1 / 1; will-change: transform; transform-origin: 50% 0%; }
/* the deck moves with the scroll, so it needs no switch (the designer: 2026-10-14 on wider screens, 2026-10-15 on phones too) */
.services .svc-bar { display: none; }
/* reduced motion: no deck, the cards stand one under another */
@media (prefers-reduced-motion: reduce) { .svc-track { flex-direction: column; overflow: visible; scroll-snap-type: none; } .svc-panel { width: auto; } }
.svc-track { position: relative; display: flex; gap: clamp(14px, 1.6vw, 26px); padding: 0 var(--pad); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; cursor: grab; }
.svc-track::-webkit-scrollbar { display: none; }
.svc-track:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 4px; }
.svc-track.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.svc-track.is-drag a { pointer-events: none; }
.svc-panel { flex: none; width: min(70vw, 1040px); min-height: clamp(360px, 52vh, 500px); scroll-snap-align: start; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--cream); color: var(--charcoal); border: 1px solid var(--charcoal); border-radius: var(--r); overflow: hidden; }
.svc-panel[data-ground="dark"] { background: var(--charcoal); color: var(--cream); }
.svc-panel__text { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(26px, 3vw, 52px); }
.svc-panel__label { display: flex; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.svc-panel__label .num { color: var(--burgundy); }
.svc-panel[data-ground="dark"] .svc-panel__label .num { color: var(--cream); }
.svc-panel__label span:last-child { opacity: .55; }
.svc-panel__name { margin: auto 0 0 -0.04em; padding-top: clamp(24px, 2.6vw, 40px); font: 900 clamp(2.2rem, 3.8vw, 4.6rem)/.92 var(--sans); letter-spacing: 0; text-wrap: balance; }
.svc-panel__what { margin-top: clamp(22px, 2.2vw, 34px); max-width: 32ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; }
.svc-panel__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(22px, 2.2vw, 34px); max-width: 46ch; }
.svc-panel__list li { padding: 7px 9px 6px; border: 1px solid currentColor; border-radius: var(--r); font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.svc-panel__go { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(28px, 2.8vw, 44px); padding: 8px 0; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--burgundy); }
.svc-panel[data-ground="dark"] .svc-panel__go { color: var(--cream); }
.svc-panel__go .i { transition: translate .35s var(--ease-out); }
.svc-panel__go:hover .i { translate: 4px 0; }
/* no pictures for now (the designer, 2026-10-14): beside the words a line drawing of the service, after the cards of
   awakeagency.dev, in the card's ink with one burgundy accent and the uyáva flower; its lines draw when the card lands
   on the deck (hero/services.js adds .is-in) */
.svc-panel__art { grid-column: 8 / -1; position: relative; display: grid; place-items: center; padding: clamp(18px, 2.4vw, 40px); border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.svc-panel__art svg { width: 100%; height: 100%; max-height: 300px; overflow: visible; }
.svc-panel__art .ln, .svc-panel__art .ac, .svc-panel__art .fl--draw { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .75s cubic-bezier(.3, .7, .2, 1) var(--d, 0s); }
.svc-panel__art .thick { stroke-width: 3; }
.svc-panel__art .nd { fill: var(--burgundy); stroke: var(--burgundy); stroke-width: 1; opacity: 0; transition: opacity .35s ease .55s; }
.svc-panel.is-in .svc-panel__art .nd { opacity: 1; }
.svc-panel__art .fa { opacity: .35; }
/* more burgundy in the drawings (the designer, 2026-10-15: no burgundy grounds, but stronger burgundy accents): the nodes
   are solid burgundy squares, the accents are drawn and then filled with burgundy (a button, a story, a post, a label),
   the flower is burgundy; on charcoal their lines are a lighter burgundy (--burgundy-lit) so they read, on cream the
   main lines are burgundy too, on the card's own cream (the tint behind them was taken out, the designer, 2026-10-15) */
.svc-panel__art { --wine-line: var(--burgundy); }
.svc-panel[data-ground="dark"] .svc-panel__art { --wine-line: var(--burgundy-lit); background: rgba(245, 241, 235, .03); }
.svc-panel:not([data-ground="dark"]) .svc-panel__art .ln { stroke: var(--burgundy); }
/* the tags on cream are warm gray, words and edges (the designer, 2026-10-15) */
.svc-panel:not([data-ground="dark"]) .svc-panel__list li { border-color: var(--gray); color: var(--gray); opacity: 1; }
.svc-panel__art .nd { stroke: var(--wine-line); }
.svc-panel__art .ac { stroke: var(--wine-line); stroke-width: 1.6; fill: var(--burgundy); fill-opacity: 0;
  transition: stroke-dashoffset .75s cubic-bezier(.3, .7, .2, 1) calc(var(--d, 0s) + .1s), fill-opacity .45s ease calc(var(--d, 0s) + .5s); }
.svc-panel__art .fl--draw { stroke: var(--wine-line); stroke-width: 1.6; fill: var(--burgundy); fill-opacity: 0;
  transition: stroke-dashoffset .75s cubic-bezier(.3, .7, .2, 1) .1s, fill-opacity .5s ease .6s; }
.svc-panel__art .dash { stroke-dasharray: .012 .01; stroke-dashoffset: 0; opacity: 0; transition: opacity .5s ease calc(var(--d, 0s) + .05s); }
.svc-panel__art .dot { stroke-width: 4; }
.svc-panel__art .fl:not(.fl--draw) { fill: var(--wine-line); opacity: 0; transition: opacity .45s ease .35s; }
/* a flower on a filled label stays cream */
.svc-panel__art .ac + .fl:not(.fl--draw) { fill: var(--cream); transition-delay: .9s; }
.svc-panel.is-in .svc-panel__art .ln, .svc-panel.is-in .svc-panel__art .ac, .svc-panel.is-in .svc-panel__art .fl--draw { stroke-dashoffset: 0; }
.svc-panel.is-in .svc-panel__art .ac { fill-opacity: 1; }
.svc-panel.is-in .svc-panel__art .fl--draw { fill-opacity: .22; }
/* on charcoal a light fill would not show: the flower there fills solid in the lighter burgundy (the designer, 2026-10-15) */
.svc-panel[data-ground="dark"] .svc-panel__art .fl--draw { fill: var(--burgundy-lit); }
.svc-panel[data-ground="dark"].is-in .svc-panel__art .fl--draw { fill-opacity: 1; }
.svc-panel.is-in .svc-panel__art .dash { opacity: .45; }
.svc-panel.is-in .svc-panel__art .fl:not(.fl--draw) { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .svc-panel__art .ln, .svc-panel__art .ac, .svc-panel__art .fl--draw { stroke-dashoffset: 0; transition: none; } .svc-panel__art .ac { fill-opacity: 1; } .svc-panel__art .fl--draw { fill-opacity: .22; } .svc-panel__art .dash, .svc-panel__art .fl, .svc-panel__art .nd { opacity: 1; transition: none; } }
.svc-panel__pic { grid-column: 7 / -1; position: relative; overflow: hidden; background: var(--charcoal); }
.svc-panel__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1.12; translate: var(--px, 0%) 0; transition: transform 1.2s var(--ease-out); -webkit-user-drag: none; }
/* the whole brand: four works at once */
.svc-panel__pic--mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.svc-panel__pic--mosaic img { position: relative; inset: auto; min-height: 0; scale: 1; translate: none; }
/* the switch: where you are, and the way to the next one */
.svc-bar { display: flex; align-items: center; gap: 18px; margin: clamp(20px, 2.2vw, 32px) var(--pad) 0; }
.svc-meter__count { font: 500 11px/1 var(--mono); letter-spacing: .08em; }
.svc-meter__count b { font-weight: 500; }
.svc-meter__line { position: relative; flex: 1; height: 1px; background: rgba(36, 36, 36, .18); }
.svc-meter__line i { position: absolute; inset: 0; background: var(--charcoal); transform-origin: left; transform: scaleX(0); }
.svc-nav { display: flex; gap: 8px; }
.svc-nav button { display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 1px solid var(--burgundy); border-radius: var(--r); background: var(--burgundy); color: var(--cream); cursor: pointer; transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), color .3s var(--ease-out); }
/* the arrow to press is burgundy (the designer, 2026-10-06); at the end of the strip it fades to an outline */
.svc-nav button:hover:not(:disabled), .svc-nav button:focus-visible { background: var(--burgundy-deep); border-color: var(--burgundy-deep); }
.svc-nav button:disabled { background: transparent; border-color: rgba(36, 36, 36, .2); color: rgba(36, 36, 36, .3); cursor: default; }
.svc-nav .i { width: 1.6em; height: .6em; transition: translate .35s var(--ease-out); }
.svc-nav [data-svc-next]:hover:not(:disabled) .i { translate: 3px 0; }
.svc-nav [data-svc-prev]:hover:not(:disabled) .i { translate: -3px 0; }
.svc-nav [data-svc-prev] .i { transform: scaleX(-1); }
@media (max-width: 760px) {
  .svc-panel { width: 86vw; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .svc-panel__art { grid-column: 1; grid-row: 1; height: 150px; border-left: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
  .svc-panel__art svg { width: auto; max-width: 100%; height: 100%; overflow: hidden; }
  .svc-panel__text { grid-column: 1; grid-row: 2; }
  /* the deck on a phone: compact cards, so the tallest one fits one screen */
  .svc-car.is-deck .svc-stage { padding-top: 60px; }
  .svc-car.is-deck .svc-panel__text { padding: 24px 24px 26px; }
  /* the drawing as big as the screen allows (the designer, 2026-10-15: bigger on the phone), so the tallest card still fits */
  .svc-car.is-deck .svc-panel__art { height: clamp(120px, calc(100svh - 600px), 220px); padding: 12px 14px 6px; }
  /* more air between the blocks (the designer, 2026-10-15) */
  .svc-car.is-deck .svc-panel__what { margin-top: 22px; }
  .svc-car.is-deck .svc-panel__list { margin-top: 28px; }
  .svc-car.is-deck .svc-panel__go { margin-top: 32px; }
  .svc-panel__name { margin-top: 0; padding-top: 30px; font-size: clamp(2.2rem, 10vw, 3.4rem); }
}
/* short phones: a little less padding, so the tallest card still fits the screen with its air */
@media (max-width: 760px) and (max-height: 720px) {
  .svc-car.is-deck .svc-panel__art { height: clamp(104px, calc(100svh - 560px), 150px); padding-top: 8px; }
  .svc-car.is-deck .svc-panel__text { padding: 20px 22px 20px; }
  .svc-car.is-deck .svc-panel__go { margin-top: 26px; }
}

/* ---------- selected work ---------- */
/* on charcoal since 2026-10-05: the page's rhythm is cream studio, dark work, cream services, dark close, and the
   pictures hold better on dark */
/* it starts a screen early and comes up over the studio while the studio holds (the designer, 2026-10-07: that
   transition back, made livelier: the studio's mark and words drift up and away, hero/scroll.js; its corners stay
   square); once its bottom reaches the bottom of the screen it
   sticks, and Services slides up over it */
.works { position: sticky; top: var(--works-stick, 0px); z-index: 1; margin-top: -100vh; padding: var(--sec-y) var(--pad); background: var(--charcoal); color: var(--cream); --line: rgba(245, 241, 235, .3); --ink-2: rgba(245, 241, 235, .7); }
/* its title clears the bar once it lands (the designer, 2026-10-07: the logo sat on it at once); at its foot a runway
   (hero/stack.js) that Services covers first, so the last work stays in view a while */
.works { padding-top: calc(64px + var(--sec-y)); padding-bottom: calc(var(--sec-y) + var(--works-runway, 0px)); }
.works .index-row { margin-bottom: var(--sec-in); }
/* the title and, at its right, the way to every project, seen as soon as the section comes (the designer, 2026-10-06:
   at the foot of the cards it was lost under Services) */
.works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(24px, 3vw, 44px); }
.works__head .sec-title { margin-bottom: 0; }
/* its foot on the title's baseline (the title's box runs about .13 of its size below the letters) */
/* a text link like “Learn more about us” (the designer, 2026-10-09), cream on the charcoal sheet */
.works__more { flex: none; display: inline-flex; align-items: center; gap: 10px; margin-bottom: calc(clamp(3rem, 9.2vw, 11.5rem) * .13); padding: 8px 0; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--cream); }
.works__more .i { transition: translate .35s var(--ease-out); }
.works__more:hover .i, .works__more:focus-visible .i { translate: 4px 0; }
/* on the studio's coloured ground the sheet's top edge breaks into cream rhombi (hero/edge.js draws them; the solid
   cream starts --edge-in under the top) */
.works__edge { position: absolute; left: 0; width: 100%; pointer-events: none; display: none; }
.works.has-edge { background: linear-gradient(var(--cream), var(--cream)) 0 var(--edge-in, 0px) / 100% 100% no-repeat; }
.works.has-edge .works__edge { display: block; }
.works__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(48px, 6vw, 110px); }
/* the zig-zag the designer prefers (back on 2026-10-06): a big card and a small one stepped down, then a small one and
   a big one stepped down, all 4:3 */
.works__item--1 { grid-column: 1 / span 7; }
.works__item--2 { grid-column: 9 / span 4; margin-top: 14vw; }
.works__item--3 { grid-column: 2 / span 4; }
.works__item--4 { grid-column: 7 / span 6; margin-top: 9vw; }
.work-card { display: block; color: inherit; text-decoration: none; }
.work-card__pic { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--charcoal); }
.work-card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
/* the caption in two lines (the designer, 2026-10-09: one line held too much): the name and an arrow that moves on
   hover, as in Services, then the number and the kind in small mono; the whole card is the link */
.work-card__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 12px; padding-top: 18px; }
.work-card__name { grid-column: 1; grid-row: 1; font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 300; font-size: clamp(26px, 2.6vw, 46px); line-height: 1; letter-spacing: -.02em; transition: color .3s var(--ease-out); }
.work-card__go { grid-column: 2; grid-row: 1; display: inline-flex; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .3s var(--ease-out); }
.work-card__go .i { width: 36px; height: 14px; transition: translate .35s var(--ease-out); }
.work-card__meta { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: baseline; gap: 12px; font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.work-card__no { font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--burgundy); }
.works .work-card__no, .wk .work-card__no { color: rgba(245, 241, 235, .6); }
.work-card:hover .work-card__name, .work-card:focus-visible .work-card__name, .work-card:hover .work-card__go, .work-card:focus-visible .work-card__go { color: var(--burgundy); }
.work-card:hover .work-card__go .i, .work-card:focus-visible .work-card__go .i { translate: 6px 0; }
.works .work-card:hover .work-card__name, .works .work-card:focus-visible .work-card__name, .works .work-card:hover .work-card__go, .works .work-card:focus-visible .work-card__go { color: var(--cream); }
/* each card opens upwards as it comes into view (script.js adds .is-in) */
/* each card opens upwards behind a mask as it comes into view (hero/motion.js), the caption rising after it */
.motion .works__item .work-card__cap { opacity: 0; translate: 0 12px; transition: opacity 1.2s ease .5s, translate 1.3s var(--ease-out) .5s; }
.motion .works__item.is-in .work-card__cap { opacity: 1; translate: 0 0; }

/* ---------- founder ---------- */
/* the giant black title, an index row, then the portrait beside the name, a lead line and a few lines of biography */
.founder { padding: var(--sec-y) var(--pad); }
.founder .index-row { margin-bottom: var(--sec-in); }
.founder__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 32px; align-items: end; }
.founder__pic { grid-column: 1 / span 5; position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--charcoal); }
.founder__pic img { width: 100%; height: 100%; object-fit: cover; }
/* the name, the lead close under it, the biography, then air before the link (the designer, 2026-10-09: put in order) */
.founder__text { grid-column: 7 / -1; display: grid; justify-items: start; gap: 0; }
/* one right edge for the column: it is as wide as the name, and the lead and the biography wrap inside it, balanced
   (contain: inline-size keeps them from widening it; the designer, 2026-10-09: a word stuck out past the others) */
.founder__text { width: fit-content; max-width: 100%; }
.founder__lead, .founder__bio { contain: inline-size; width: 100%; max-width: none; }
.founder__name { margin-bottom: clamp(18px, 1.8vw, 26px); color: var(--burgundy); }
.founder__lead { margin-bottom: clamp(26px, 2.6vw, 36px); }
.founder__name { font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 300; font-size: clamp(40px, 4.6vw, 84px); line-height: .95; letter-spacing: -.03em; }
.founder__lead { max-width: 22ch; font-size: clamp(22px, 2.1vw, 34px); font-weight: 500; line-height: 1.18; letter-spacing: -.02em; }
.founder__bio { max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.founder__go { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(36px, 3.6vw, 48px); padding: 8px 0; border-bottom: 1px solid currentColor; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--burgundy); }
.founder__go .i { transition: translate .35s var(--ease-out); }
.founder__go:hover { color: var(--charcoal); }
.founder__go:hover .i { translate: 4px 0; }
/* the portrait opens like the work cards; the words rise after it */
.motion .founder__text { opacity: 0; translate: 0 18px; transition: opacity 1.3s ease .5s, translate 1.5s var(--ease-out) .5s; }
.motion .founder__grid.is-in .founder__text { opacity: 1; translate: 0 0; }

/* ---------- clients: a thin strip moving sideways ---------- */
/* the logos loop (script.js doubles the row), pause under the pointer or focus, and stand still with reduced motion */
.clients { position: relative; z-index: 2; --clients-bg: var(--charcoal); --clients-ink: var(--cream); --logo-h: 34px; --clients-speed: 40s;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(22px, 3vh, 34px) var(--pad); background: var(--clients-bg); color: var(--clients-ink); }
/* the strip opens the dark close (the designer's call, 2026-10-05): one dark block, a cream hairline between */
.clients + .close { border-top: 1px solid rgba(245, 241, 235, .16); }
.clients__title { flex: none; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .7; }
.clients__view { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.clients__track { flex: none; display: flex; align-items: center; gap: clamp(44px, 5vw, 88px); padding-right: clamp(44px, 5vw, 88px); animation: clients var(--clients-speed) linear infinite; }
.clients__item { flex: none; display: flex; }
.clients__item svg, .clients__item img { display: block; width: auto; height: var(--logo-h); fill: currentColor; }
/* the real logos (the designer's files, 2026-10-13), each a mask in the strip's ink: cream, Pantone Warm Gray 1C, never pure white.
   --ar is the trimmed file's width / height; --s evens out how big each one reads (a script mark next to wordmarks) */
.clients__logo { display: block; height: calc(var(--logo-h) * var(--s, 1)); aspect-ratio: var(--ar); background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.clients__logo--bsci { --m: url(assets/clients/boston-scientific.png); --ar: 421 / 144; }
.clients__logo--d2s { --m: url(assets/clients/dare-2-share.png); --ar: 450 / 144; }
.clients__logo--ihi { --m: url(assets/clients/ihi.svg); --ar: 953 / 796; --s: 1.3; }
.clients__logo--kuddly { --m: url(assets/clients/kuddly.png); --ar: 606 / 144; --s: .9; }
.clients__logo--amazon { --m: url(assets/clients/amazon.png); --ar: 478 / 144; --s: .8; }
.clients__logo--ch { --m: url(assets/clients/cooper-hunter.png); --ar: 396 / 144; --s: 1.1; }
.clients__logo--luxus { --m: url(assets/clients/luxus.png); --ar: 614 / 144; --s: .8; }
.clients__logo--sid { --m: url(assets/clients/sid-harvey.png); --ar: 546 / 144; --s: .85; }
.clients__logo--nova { --m: url(assets/clients/nova-wax.png); --ar: 192 / 144; --s: 1.35; }
.clients:hover .clients__track, .clients:focus-within .clients__track { animation-play-state: paused; }
@keyframes clients { to { transform: translateX(-100%); } }

/* ---------- close: brief form + footer ---------- */
.close {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding: var(--sec-y) var(--pad) 0;
  background: var(--charcoal);
  color: var(--cream);
}
.close__title { grid-column: 1 / -1; margin-left: -0.045em; font: 900 clamp(4rem, 17vw, 21rem)/.84 var(--sans); letter-spacing: 0; }
.close__intro {
  grid-column: 1 / span 4;
  align-content: start;
  display: grid;
  justify-items: start;
  gap: 24px;
  margin-top: var(--sec-in);
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(245, 241, 235, .82);
}
.close__body { grid-column: 6 / -1; margin-top: var(--sec-in); }

.brief { display: grid; gap: 30px; }
.brief .btn { justify-self: start; }
.brief__label { display: block; margin-bottom: 12px; font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 241, 235, .74); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(245, 241, 235, .55);
  border-radius: 4px;
  font: 700 15px/1 var(--sans);
  letter-spacing: -0.01em;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.chip:hover span { border-color: var(--cream); }
.chip input:checked + span { background: var(--cream); border-color: var(--cream); color: var(--charcoal); }
.chip input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 2px; }
.brief__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--gut); }
.field input, .field textarea {
  display: block;
  width: 100%;
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(245, 241, 235, .55);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-size: 20px;
  line-height: 1.4;
  caret-color: var(--cream);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--cream); box-shadow: 0 1px 0 var(--cream); }
.field.is-invalid input { border-bottom: 3px solid var(--cream); }
.field__error { margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--cream); }
.field__error::before { content: "— " / ""; }
.brief-done { display: grid; gap: 14px; justify-items: start; font-size: 18px; line-height: 1.5; max-width: 44ch; outline: none; }
.brief-done__title { font: 900 clamp(30px, 3vw, 48px)/1 var(--sans); letter-spacing: 0; }

.foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  margin-top: var(--sec-y);
  padding: 20px 0 28px;
  border-top: 1px solid rgba(245, 241, 235, .3);
}
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__logo { grid-column: 1 / span 2; width: 92px; height: auto; }
.foot__cell:nth-of-type(1) { grid-column: 5 / span 2; }
.foot__cell:nth-of-type(2) { grid-column: 7 / span 2; }
.foot__cell:nth-of-type(3) { grid-column: 9 / span 3; }
.foot__cell--end { grid-column: 12 !important; justify-self: end; text-align: right; }
.foot__base { grid-column: 1 / -1; margin-top: 36px; color: rgba(245, 241, 235, .7); }

/* ---------- about page ---------- */
/* the title and index row under the bar, then the studio statement beside the mark that blooms (hero/motion.js),
   the founder, and the same close as the homepage */
/* a page's top: the bar, then the rhythm's step */
.ab-intro { padding: calc(env(safe-area-inset-top, 0px) + 64px + var(--sec-y)) var(--pad) 0; }
/* the first screen on its own (the designer, 2026-10-07): the title and its row at the top, the statement and the mark
   in the middle of what is left; Meet the founder begins on the next screen */
.ab-first { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-bottom: var(--sec-y); }
.ab-first .ab-studio { flex: 1; align-content: center; }
.ab-studio { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(24px, 3vw, 40px); padding: var(--sec-in) var(--pad) 0; }
.ab-studio__text { grid-column: 1 / span 8; grid-row: 1; font-size: clamp(1.5rem, 2.75vw, 3.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
/* what the studio makes: a mono label and the five parts as tags, like the services' (the designer, 2026-10-09: the long
   grey sentence did not read) */
.ab-studio__more { grid-column: 1 / span 6; grid-row: 2; }
.ab-studio__label { margin: 0 0 16px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ab-studio__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ab-studio__mark { grid-column: 10 / -1; grid-row: 1 / span 2; align-self: start; justify-self: end; width: min(100%, 300px); height: auto; overflow: visible; fill: var(--burgundy); }

/* ---------- motion below the hero (hero/motion.js sets .motion on <html>; nothing moves with reduced motion) ---------- */
/* hairlines draw from the left, like the line after “From” */
.index-row, .foot { position: relative; }
.motion .index-row, .motion .foot { border-top-color: transparent; }
.motion .index-row::before, .motion .foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.7, 0, .2, 1); }
.motion .foot::before { background: rgba(245, 241, 235, .3); }
.motion .index-row.is-in::before, .motion .foot.is-in::before { transform: none; }
/* plain blocks rise softly */
.motion [data-rise] { opacity: 0; translate: 0 20px; transition: opacity 1.3s ease, translate 1.5s var(--ease-out); }
.motion [data-rise].is-in { opacity: 1; translate: 0 0; }
.motion .ab-studio__more[data-rise] { transition-delay: .15s; }
.motion .close__body[data-rise] { transition-delay: .12s; }
/* pictures open upwards behind a mask and settle, then drift a little inside their frame (--py, hero/motion.js) */
.motion [data-reveal] { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s cubic-bezier(.7, 0, .2, 1); }
.motion .is-in [data-reveal] { clip-path: inset(0 0 0 0); }
.motion [data-reveal] img { scale: 1.22; translate: 0 var(--py, 0%); transition: transform 1.2s var(--ease-out), scale 1.8s var(--ease-out); }
.motion .is-in [data-reveal] img { scale: 1.08; }
/* pages change behind a cream curtain (hero/motion.js); .wipe-in covers the first paint of the next page */
.wipe { position: fixed; inset: 0; z-index: 60; background: var(--cream); pointer-events: none; visibility: hidden; transform: translateY(100%); }
.wipe.on, .wipe.lift, .wipe.fade { visibility: visible; }
.wipe.on { transform: none; transition: transform .62s cubic-bezier(.7, 0, .2, 1); }
.wipe.on.still { transition: none; }
.wipe.lift { transform: translateY(-100%); transition: transform .85s cubic-bezier(.7, 0, .2, 1); }
.wipe.fade { transform: none; opacity: 0; transition: opacity .45s ease; }
.wipe-in body::after { content: ""; position: fixed; inset: 0; z-index: 61; background: var(--cream); }

/* ---------- the work page (work.html) ---------- */
/* every project on charcoal, like Selected work: the title, an index row, the filters (hero/work.js), a calm grid */
.wk { padding: calc(env(safe-area-inset-top, 0px) + 64px + var(--sec-y)) var(--pad) var(--sec-y); background: var(--charcoal); color: var(--cream); --line: rgba(245, 241, 235, .3); --ink-2: rgba(245, 241, 235, .7); }
.wk-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 3vw, 44px); }
.wk-filter { display: inline-flex; align-items: flex-start; gap: 6px; min-height: 46px; padding: 12px 16px; border: 1px solid rgba(245, 241, 235, .55); border-radius: var(--r); background: transparent; color: var(--cream); font: 700 15px/1.3 var(--sans); letter-spacing: -0.01em; cursor: pointer; transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out); }
.wk-filter sup { font: 500 10px/1 var(--mono); letter-spacing: .04em; opacity: .7; }
.wk-filter:hover { border-color: var(--cream); }
.wk-filter[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--charcoal); }
.wk-filter:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.wk-count { margin: 18px 0 clamp(40px, 5vw, 72px); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(48px, 5vw, 88px); }
.wk .work-card:hover .work-card__name, .wk .work-card:focus-visible .work-card__name, .wk .work-card:hover .work-card__go, .wk .work-card:focus-visible .work-card__go { color: var(--cream); }
.wk + .clients { border-top: 1px solid rgba(245, 241, 235, .16); }
[data-ground="dark"] .btn-2:hover, [data-ground="dark"] .btn-2:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--charcoal); }

/* ---------- case pages (case-*.html, 2026-10-08) ---------- */
/* one page per case, a composition to fill with the case's own presentation: the name in Tiempos, an index row, the
   idea in one sentence beside the facts, a cover, the brief and the idea, then picture blocks chosen for the kind of
   work (screens for a website, the mark and its system for an identity, the range for packaging, the feed for social),
   one line to remember, what was made, and the next case. Every picture place (.cs-slot) names its number, what goes
   there, its shape and its size until the picture is in; pictures open upwards like the work cards (hero/motion.js). */
.cs-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: calc(env(safe-area-inset-top, 0px) + 64px + var(--sec-y)) var(--pad) var(--sec-y); }
.cs-title { grid-column: 1 / -1; margin: 0 0 clamp(24px, 3vw, 44px) -0.04em; font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 300; font-size: clamp(4rem, 12.5vw, 15.5rem); line-height: .92; letter-spacing: normal; }
.cs-head .index-row { grid-column: 1 / -1; margin-bottom: var(--sec-in); }
.cs-lead { grid-column: 1 / span 8; margin: 0; font-size: clamp(1.5rem, 2.75vw, 3.6rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
.cs-facts { grid-column: 10 / -1; display: grid; gap: 18px; align-content: start; margin: 0; }
.cs-facts dt { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cs-facts dd { margin: 4px 0 0; font-size: 17px; line-height: 1.35; }
/* the brief, the idea, what was made: a mono label, then the words */
.cs-text { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: clamp(36px, 4vw, 64px); padding: var(--sec-y) var(--pad); }
.cs-text__label { grid-column: 1 / span 3; margin: 0; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cs-text__body { grid-column: 5 / span 7; margin: 0; max-width: 46ch; font-size: clamp(19px, 1.7vw, 26px); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.cs-tags { grid-column: 5 / span 7; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cs-tags li, .ab-studio__tags li { padding: 7px 9px 6px; border: 1px solid currentColor; border-radius: var(--r); font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
/* one line to remember, in the work names' Tiempos */
.cs-line { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); padding: var(--sec-y) var(--pad); }
.cs-line p { grid-column: 2 / span 9; margin: 0; font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 300; font-size: clamp(2rem, 4.6vw, 5.8rem); line-height: 1.02; letter-spacing: normal; text-wrap: balance; }
/* picture blocks: one step between them, the page's padding at the sides (a bleed block runs edge to edge) */
.cs-block { display: grid; gap: var(--gut); padding: 0 var(--pad); }
.cs-block + .cs-block { margin-top: var(--gut); }
.cs-bleed { padding: 0; }
.cs-pair { grid-template-columns: 1fr 1fr; }
.cs-pair--wide { grid-template-columns: 7fr 5fr; align-items: end; }
.cs-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-stagger { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
.cs-stagger > :first-child { grid-column: 1 / span 7; }
.cs-stagger > :last-child { grid-column: 9 / span 4; margin-top: 6vw; } /* 14vw left empty holes (the designer, 2026-10-12: tighter, as the leading studios do) */
/* a short caption under a picture, in the index rows' mono */
.cs-cap { margin: 12px 0 0; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cs-band .cs-cap { color: rgba(245, 241, 235, .62); }
.cs-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* a charcoal band for screens, stories and details */
.cs-band { margin: var(--sec-y) 0; padding: var(--sec-y) var(--pad); background: var(--charcoal); color: var(--cream); }
.cs-band .cs-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gut); }
.cs-band__note { display: flex; justify-content: space-between; gap: 24px; margin-top: 18px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 241, 235, .7); }
/* a picture place: its shape from --ar; until the picture is in, its number, what goes there and its size */
.cs-slot { position: relative; margin: 0; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; background: rgba(36, 36, 36, .07); }
.cs-band .cs-slot { background: rgba(245, 241, 235, .08); }
.cs-slot img, .cs-slot video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-slot:not(:has(img))::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(36, 36, 36, .28); border-radius: var(--r); }
.cs-slot:not(:has(img))::after { content: attr(data-slot); position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; text-align: center; white-space: pre-line; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(36, 36, 36, .55); }
.cs-band .cs-slot:not(:has(img))::before { border-color: rgba(245, 241, 235, .3); }
.cs-band .cs-slot:not(:has(img))::after { color: rgba(245, 241, 235, .6); }
/* the next case: its name large, its picture beside it */
.cs-next { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; margin-top: var(--sec-y); padding: var(--sec-y) var(--pad); border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.cs-next__label { grid-column: 1 / -1; margin-bottom: clamp(18px, 2vw, 28px); font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.cs-next__name { grid-column: 1 / span 7; display: flex; align-items: baseline; gap: .3em; font-family: "Tiempos Headline", "Times New Roman", serif; font-style: italic; font-weight: 300; font-size: clamp(3rem, 8vw, 10rem); line-height: .95; letter-spacing: normal; transition: color .3s var(--ease-out); }
.cs-next__name .i { flex: none; width: .5em; height: .19em; transition: translate .35s var(--ease-out); }
.cs-next__pic { grid-column: 9 / -1; aspect-ratio: 4 / 3; overflow: hidden; background: var(--charcoal); }
.cs-next__pic img { width: 100%; height: 100%; object-fit: cover; }
.cs-next:hover .cs-next__name, .cs-next:focus-visible .cs-next__name { color: var(--burgundy); }
.cs-next:hover .cs-next__name .i, .cs-next:focus-visible .cs-next__name .i { translate: 8px 0; }
@media (max-width: 1080px) {
  .cs-lead { grid-column: 1 / -1; }
  .cs-facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--sec-in); }
  .cs-text__label { grid-column: 1 / -1; }
  .cs-text__body, .cs-tags { grid-column: 1 / -1; }
  .cs-line p { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .cs-head, .cs-text, .cs-line, .cs-next { grid-template-columns: minmax(0, 1fr); }
  .cs-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-pair, .cs-pair--wide, .cs-trio { grid-template-columns: minmax(0, 1fr); }
  .cs-stagger { grid-template-columns: minmax(0, 1fr); row-gap: var(--gut); }
  .cs-stagger > :first-child, .cs-stagger > :last-child { grid-column: 1; margin-top: 0; }
  .cs-band .cs-row { grid-template-columns: repeat(var(--nm, var(--n, 3)), minmax(0, 1fr)); } /* three screens stay in a row; four stories go two by two */
  .cs-next__name, .cs-next__pic { grid-column: 1; }
  .cs-next__pic { margin-top: 24px; }
}

/* ---------- SkyMove case (case-skymove.html; recomposed 2026-10-11, rebuilt 2026-10-12) ----------
   After the leading studios' case pages (Koto, Porto Rocha, Pentagram): the brand's own black ground; one narrow,
   even gap everywhere; a few block kinds only — full bleed, full width, and justified rows where every picture keeps
   its own shape and the row shares one height (each figure grows by its ratio, --g = width / height); five
   statements in large type in the right half instead of chapter titles; short captions under key frames; credits at
   the end; motion where it tells the idea (the mark assembles from its two brackets, the pattern runs at 45°, the
   store scrolls on the laptop). No slide carries small text, and no black slide crops anything (its edge is invisible
   on black). */
.sky { --g8: clamp(6px, .6vw, 10px); --sky-bg: #000; --sky-accent: #D9FF00; --sky-accent-ink: #000; padding: 0 0 var(--sec-y); background: var(--sky-bg); color: var(--cream); }
/* the same case system in another brand's clothes: Zillow (2026-10-13), dark blue ground, bright blue accent */
.sky--zillow { --sky-bg: #121A25; --sky-accent: #006BFF; --sky-accent-ink: #fff; }
/* the cases made from the showreel's brands (2026-10-15), each on its own ground with its own accent; each opens with
   its part of the showreel as a silent looping film */
.sky--sub { --sky-bg: #1F2226; --sky-accent: #FFB476; --sky-accent-ink: #1F2226; }
.sky--eiluj { --sky-bg: #1E1D1B; --sky-accent: #E0D7CD; --sky-accent-ink: #1E1D1B; }
.sky--res { --sky-bg: #121212; --sky-accent: #2C80E8; --sky-accent-ink: #fff; }
/* Luxus (2026-10-15, the designer: “the whole case on their warm beige”): the case system on a light ground, navy words,
   orange numbers */
.sky--luxus { --sky-bg: #F6EFE7; --sky-accent: #FF710D; --sky-accent-ink: #000D1E; color: #000D1E; }
.sky--luxus .sky-say__no, .sky--luxus .sky-fig figcaption, .sky--luxus .sky-cap, .sky--luxus .sky-case dt, .sky--luxus .sky-credits dt { color: rgba(0, 13, 30, .6); }
.sky--luxus .sky-case { border-color: rgba(0, 13, 30, .14); }
.sky--luxus .cs-slot { background: rgba(0, 13, 30, .05); }
.sky--luxus .sky-sw { box-shadow: inset 0 0 0 1px rgba(0, 13, 30, .1); }
.sky--luxus :focus-visible { outline-color: #000D1E; }
.sky--luxus .cs-tags li { border-color: rgba(0, 13, 30, .4); }
.sky--luxus .sky-cover--end, .sky--luxus .sky-end { display: none; }
/* the exits carousel of the site, as her own film of it, on its white (the designer, 2026-10-15) */
.lx-run { padding: clamp(18px, 2vw, 32px) 0; background: #fff; }
.lx-run video { display: block; width: 100%; height: auto; }
/* a post as it is on Instagram: its slides, one after the other, the dots under it; it slides by itself in view and
   swipes by hand */
.lx-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) var(--gut); padding: 0 var(--pad); }
.lx-post { margin: 0; }
.lx-post__view { display: flex; aspect-ratio: 4 / 5; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background: rgba(0, 13, 30, .05); box-shadow: 0 18px 40px rgba(0, 13, 30, .12); }
.lx-post__view::-webkit-scrollbar { display: none; }
.lx-post__view img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.lx-post__dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.lx-post__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 13, 30, .22); transition: background-color .3s, transform .3s; }
.lx-post__dots i.on { background: #FF710D; transform: scale(1.25); }
.lx-post figcaption { margin-top: 12px; text-align: center; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 13, 30, .6); }
/* two decks in one style, side by side: one column each */
.lx-decks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); padding: 0 var(--pad); }
.lx-decks__col { display: grid; gap: var(--gut); align-content: start; }
.lx-decks__col h3 { margin: 0 0 4px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 13, 30, .6); }
.lx-decks .cs-slot { box-shadow: 0 14px 34px rgba(0, 13, 30, .14); }
/* the Lunar New Year: the invitation between its two horses, printed things on the page; the Ascot save the date alone */
.lx-lunar { grid-template-columns: 1fr 1.1fr 1fr; align-items: center; gap: clamp(16px, 2.4vw, 40px); max-width: 1180px; margin-inline: auto; }
.lx-lunar > :nth-child(2) .cs-slot, .lx-one .cs-slot { box-shadow: 0 24px 50px rgba(0, 13, 30, .18); }
.lx-one { justify-items: center; }
.lx-one > * { width: min(440px, 100%); }
@media (max-width: 760px) {
  .lx-posts, .lx-decks { grid-template-columns: minmax(0, 1fr); }
  .lx-lunar { grid-template-columns: 1fr 1fr; }
  .lx-lunar > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; width: 78%; justify-self: center; }
}
.sky--nova { --sky-bg: #1C1A24; --sky-accent: #9888C8; --sky-accent-ink: #1C1A24; }
.sky--tre { --sky-bg: #1D0B2A; --sky-accent: #EA4E96; --sky-accent-ink: #1D0B2A; }
.sky--jr { --sky-bg: #0D192B; --sky-accent: #00D0FF; --sky-accent-ink: #0D192B; }
/* JR Partners' live cover (2026-10-15): the J drops in, the R slides into it, then PARTNERS rises letter by letter */
.jr-cover { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; background: #0D192B; }
.jr-cover svg { width: 64%; height: auto; overflow: visible; }
.jr-cover .jr-j { fill: #00D0FF; }
.jr-cover .jr-r, .jr-cover .jr-w path { fill: #fff; }
.motion .jr-cover .jr-j { transform: translateY(-90px); opacity: 0; transition: transform 1.1s var(--ease-out), opacity .6s ease; }
.motion .jr-cover .jr-r { transform: translateX(120px); opacity: 0; transition: transform 1.1s var(--ease-out) .18s, opacity .6s ease .18s; }
.motion .jr-cover .jr-w path { transform: translateY(26px); opacity: 0; transition: transform .8s var(--ease-out) calc(.7s + var(--i) * .05s), opacity .6s ease calc(.7s + var(--i) * .05s); }
.motion .is-in .jr-cover .jr-j, .motion .is-in .jr-cover .jr-r, .motion .is-in .jr-cover .jr-w path { transform: none; opacity: 1; }
.sky ::selection { background: var(--sky-accent); color: var(--sky-accent-ink); }
.sky :focus-visible { outline-color: var(--cream); }
.sky .cs-block { margin-top: var(--g8); gap: var(--g8); }
.sky .cs-slot { background: rgba(245, 241, 235, .05); }
/* the logo boards (SVG) leave white as see-through: they stand on white paper */
.sky .cs-slot--paper { background: #fff; }
.motion .sky [data-reveal] img, .motion .sky [data-reveal] video { translate: none; scale: 1.06; transition: scale 1.8s var(--ease-out); }
.motion .sky .is-in [data-reveal] img, .motion .sky .is-in [data-reveal] video { scale: 1; }
/* justified rows: the figures grow by their ratios, so they share one height and nothing is cropped */
.sky-j { display: flex; align-items: flex-start; }
.sky-j > * { flex: var(--g, 1) 1 0; min-width: 0; }
/* a narrow pair in the middle, for tall things (the TRĒ House pouch, front and back) */
.sky-j--narrow { max-width: min(820px, 100%); margin-inline: auto; }
.sky-fig { margin: 0; }
.sky-fig figcaption, .sky-cap { margin-top: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 241, 235, .62); }
.sky-cap { padding: 0 var(--pad); }
/* a statement: a lime number and a word on the left, the words large in the right half */
.sky-say { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: baseline; padding: var(--sec-y) var(--pad) calc(var(--sec-y) * .7); }
.sky-say__no { grid-column: 1 / span 3; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 241, 235, .62); }
.sky-say__no b { margin-right: 10px; font-weight: 500; color: var(--sky-accent); }
.sky-say__text { grid-column: 7 / -1; margin: 0; max-width: 30ch; font-size: clamp(22px, 2.25vw, 36px); font-weight: 500; line-height: 1.22; letter-spacing: -.015em; text-wrap: pretty; }
.sky-say__text + .sky-say__text { margin-top: .8em; }
.sky-say > .sky-say__text:nth-child(n+3) { grid-column: 7 / -1; }
/* the colours, as page text: a band of six, each as wide as its part in the brand */
.sky-colours { display: flex; min-height: clamp(260px, 30vw, 520px); }
.sky-sw { flex: var(--w, 1) 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: clamp(14px, 1.6vw, 26px); background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(245, 241, 235, .12); }
.sky-sw__name { font: 500 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sky-sw__hex { font: 500 clamp(13px, 1.1vw, 16px)/1.3 var(--mono); letter-spacing: .02em; opacity: .78; }
/* the live cover: the mark assembles from its two brackets, sliding along their own 45 degrees */
.sky-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #D9FF00; }
.sky-cover__logo { position: absolute; left: 5.9%; top: 9%; width: 20.3%; height: auto; }
.sky-cover__mark { position: absolute; left: 35.2%; top: 29.9%; width: 84%; height: auto; fill: #000; overflow: visible; }
.motion .sky-cover__mark polygon { transition: transform 1.5s var(--ease-out), opacity .9s ease; }
.motion .sky-cover__mark .b1 { transform: translate(-150px, 150px); opacity: 0; }
.motion .sky-cover__mark .b2 { transform: translate(150px, -150px); opacity: 0; transition-delay: .12s; }
.motion .is-in .sky-cover__mark polygon { transform: none; opacity: 1; }
/* the end: the cover again, mirrored in colour (lime mark on black), last, so its cropped bottom meets the cream of the
   next case and the crop reads (on black alone it would look cut, the designer 2026-10-12/13) */
.sky-cover--end { background: #000; }
.sky-cover--end .sky-cover__mark { fill: #D9FF00; }
.sky:has(.sky-end) { padding-bottom: 0; }
.sky-end { margin-top: var(--sec-y); }
/* the pattern, live: the marks run up the 45 degrees, black on lime and lime on graphite */
.sky-pattern { display: flex; aspect-ratio: 16 / 9; }
.sky-pattern > i { flex: 1; --t: 8.98vw; background: var(--bg); }
.sky-pattern > i:first-child { --bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg transform='translate(55 20) scale(.13056)' fill='%23000'%3E%3Cpolygon points='0 392.75 391.95 0 613.99 0 537.63 76.52 426.97 76.52 188.04 315.93 569.51 315.93 493.26 392.34 0 392.75'/%3E%3Cpolygon points='919.13 168.38 527.19 561.12 305.14 561.12 381.5 484.6 492.16 484.6 731.09 245.19 349.63 245.19 425.87 168.79 919.13 168.38'/%3E%3C/g%3E%3Cg transform='translate(170 135) scale(.13056)' fill='%23000'%3E%3Cpolygon points='0 392.75 391.95 0 613.99 0 537.63 76.52 426.97 76.52 188.04 315.93 569.51 315.93 493.26 392.34 0 392.75'/%3E%3Cpolygon points='919.13 168.38 527.19 561.12 305.14 561.12 381.5 484.6 492.16 484.6 731.09 245.19 349.63 245.19 425.87 168.79 919.13 168.38'/%3E%3C/g%3E%3Cg transform='translate(-60 135) scale(.13056)' fill='%23000'%3E%3Cpolygon points='0 392.75 391.95 0 613.99 0 537.63 76.52 426.97 76.52 188.04 315.93 569.51 315.93 493.26 392.34 0 392.75'/%3E%3Cpolygon points='919.13 168.38 527.19 561.12 305.14 561.12 381.5 484.6 492.16 484.6 731.09 245.19 349.63 245.19 425.87 168.79 919.13 168.38'/%3E%3C/g%3E%3C/svg%3E") 0 0 / var(--t) var(--t), #D9FF00; }
.sky-pattern > i:last-child { --bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg transform='translate(55 20) scale(.13056)' fill='%23D9FF00'%3E%3Cpolygon points='0 392.75 391.95 0 613.99 0 537.63 76.52 426.97 76.52 188.04 315.93 569.51 315.93 493.26 392.34 0 392.75'/%3E%3Cpolygon points='919.13 168.38 527.19 561.12 305.14 561.12 381.5 484.6 492.16 484.6 731.09 245.19 349.63 245.19 425.87 168.79 919.13 168.38'/%3E%3C/g%3E%3Cg transform='translate(170 135) scale(.13056)' fill='%23D9FF00'%3E%3Cpolygon points='0 392.75 391.95 0 613.99 0 537.63 76.52 426.97 76.52 188.04 315.93 569.51 315.93 493.26 392.34 0 392.75'/%3E%3Cpolygon points='919.13 168.38 527.19 561.12 305.14 561.12 381.5 484.6 492.16 484.6 731.09 245.19 349.63 245.19 425.87 168.79 919.13 168.38'/%3E%3C/g%3E%3Cg transform='translate(-60 135) scale(.13056)' fill='%23D9FF00'%3E%3Cpolygon points='0 392.75 391.95 0 613.99 0 537.63 76.52 426.97 76.52 188.04 315.93 569.51 315.93 493.26 392.34 0 392.75'/%3E%3Cpolygon points='919.13 168.38 527.19 561.12 305.14 561.12 381.5 484.6 492.16 484.6 731.09 245.19 349.63 245.19 425.87 168.79 919.13 168.38'/%3E%3C/g%3E%3C/svg%3E") 0 0 / var(--t) var(--t), #1A1A1A; }
.motion .sky-pattern > i { animation: sky-run 16s linear infinite; }
@keyframes sky-run { to { background-position: var(--t) calc(var(--t) * -1); } }
/* the process, as page text: the steps in order, the last one filled */
.sky-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0 var(--pad); list-style: none; counter-reset: st; }
.sky-steps li { counter-increment: st; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(245, 241, 235, .28); border-radius: 999px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sky-steps li::before { content: counter(st, decimal-leading-zero); color: var(--sky-accent); }
.sky-steps li:last-child { background: var(--sky-accent); border-color: var(--sky-accent); color: var(--sky-accent-ink); }
.sky-steps li:last-child::before { color: inherit; opacity: .7; }
/* the case in short, after the leading studios' case pages: the challenge, the idea, the solution, the result, side by
   side under the cover (2026-10-15, the designer: “a short analysis of the case, the idea and the problem”) */
.sky-case { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 40px; margin: 0; padding: var(--sec-y) var(--pad) calc(var(--sec-y) * .6); border-bottom: 1px solid rgba(245, 241, 235, .14); }
.sky-case > div { display: grid; align-content: start; gap: 16px; }
.sky-case dt { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 241, 235, .62); }
.sky-case dt b { margin-right: 10px; font-weight: 500; color: var(--sky-accent); }
.sky-case dd { margin: 0; max-width: 34ch; font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }
@media (max-width: 1080px) { .sky-case { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sky-case { grid-template-columns: minmax(0, 1fr); row-gap: 30px; } }
/* credits */
.sky-credits { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 26px; padding: var(--sec-y) var(--pad) 0; margin: 0; }
.sky-credits > div { grid-column: span 3; }
.sky-credits dt { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(245, 241, 235, .62); }
.sky-credits dd { margin: 8px 0 0; font-size: 17px; line-height: 1.4; }
.sky-credits .cs-tags { grid-column: 1 / -1; display: flex; }
/* the phone sees the store screen by screen, the laptop sees the screens five to a slide */
.sky-phone-only { display: none; }
.sky .sky-screen > .cs-slot { border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(245, 241, 235, .16); }
.sky .sky-screen > .cs-slot img { border-radius: inherit; }
@media (max-width: 1080px) {
  .sky-say__no { grid-column: 1 / -1; margin-bottom: 18px; }
  .sky-say__text, .sky-say > .sky-say__text:nth-child(n+3) { grid-column: 1 / -1; }
  .sky-credits > div { grid-column: span 6; }
}
@media (max-width: 760px) {
  .sky-j { flex-direction: column; }
  .sky-j > * { flex: none; width: 100%; }
  .sky-j--scroll { flex-direction: row; gap: 10px; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .sky-j--scroll::-webkit-scrollbar { display: none; }
  .sky-j--narrow { flex-direction: row; }   /* the pouch, front and back, stays side by side */
  .sky-j--narrow > * { flex: 1 1 0; width: auto; }
  .sky-j--scroll > * { flex: 0 0 74%; width: auto; scroll-snap-align: center; }
  .sky-say { grid-template-columns: minmax(0, 1fr); }
  .sky-colours { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
  .sky-sw { min-height: 120px; }
  .sky-sw:first-child { grid-column: 1 / -1; min-height: 200px; }
  .sky-pattern { aspect-ratio: 4 / 5; flex-direction: column; }
  .sky-pattern > i { --t: 22vw; }
  .sky-credits > div { grid-column: 1 / -1; }
  .sky-desk-only { display: none; }
  .sky-phone-only { display: flex; }
  p.sky-phone-only { display: block; }
  .sky-j--scroll > .sky-screen { flex-basis: 62%; }
}

/* ---------- safe areas (viewport-fit=cover) ---------- */
.works, .founder, .clients, .close, .ab-intro, .ab-studio, .wk, .cs-head, .cs-text, .cs-line, .cs-band, .cs-next, .cs-block:not(.cs-bleed), .sky-cap, .sky-say, .sky-credits { padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.foot { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .wk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* index rows: four equal columns, the fifth note left out, lines may wrap */
  .index-row > * { white-space: normal; }
  .index-row > :nth-child(1) { grid-column: 1 / span 3; }
  .index-row > :nth-child(2) { grid-column: 4 / span 3; }
  .index-row > :nth-child(3) { grid-column: 7 / span 3; }
  .index-row > :nth-child(4) { grid-column: 10 / span 3; }
  .index-row > :nth-child(n + 5) { display: none; }
  /* the footer: the logo on its own line, then four columns */
  .foot { row-gap: 24px; }
  .foot__logo { grid-column: 1 / -1; }
  .foot__cell:nth-of-type(1) { grid-column: 1 / span 3; }
  .foot__cell:nth-of-type(2) { grid-column: 4 / span 3; }
  .foot__cell:nth-of-type(3) { grid-column: 7 / span 3; }
  .foot__cell--end { grid-column: 10 / span 3 !important; }
  .founder__pic { grid-column: 1 / span 6; }
  .founder__text { grid-column: 7 / -1; }
  .close__intro { grid-column: 1 / -1; }
  .close__body { grid-column: 1 / -1; }
}

@media (min-width: 761px) and (max-width: 1080px) {
  .ab-studio__text { font-size: 3.6vw; }
}

/* services on portrait tablets: each panel's words above its number and list */
@media (min-width: 761px) and (max-width: 1080px) and (orientation: portrait) {
  .svc-panel { width: min(80vw, 720px); min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .svc-panel__art { grid-column: 1; grid-row: 1; height: 150px; border-left: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
  .svc-panel__art svg { width: auto; max-width: 100%; height: 100%; overflow: hidden; }
  .svc-panel__text { grid-column: 1; grid-row: 2; }
  .svc-panel__name { margin-top: 0; padding-top: 28px; font-size: clamp(2.4rem, 6.4vw, 4rem); }
}

@media (max-width: 760px) {
  .wk-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .close, .index-row, .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .works__grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .works__item--1, .works__item--2, .works__item--3, .works__item--4 { grid-column: 1; grid-row: auto; margin-top: 0; }
  .works__head { flex-direction: column; align-items: flex-start; }
  .works__more { margin-bottom: 0; }
  .founder__grid { grid-template-columns: minmax(0, 1fr); }
  .clients { flex-direction: column; align-items: stretch; gap: 14px; }
  .ab-studio__text, .ab-studio__more { grid-column: 1 / -1; grid-row: auto; }
  /* the mark on the words' left edge, as on the homepage's studio screen (the designer, 2026-10-09) */
  .ab-studio__mark { grid-column: 1 / -1; grid-row: 1; justify-self: start; width: 38vw; }
  .ab-studio { row-gap: 36px; }
  .clients { --logo-h: 28px; }
  .founder__pic, .founder__text { grid-column: 1; }

  .index-row > * { grid-column: auto !important; justify-self: start !important; }
  .index-row > :nth-child(n + 3) { display: none; }
  .index-row > :nth-child(1) { grid-column: 1 / span 2 !important; }
  .index-row > :nth-child(2) { grid-column: 3 / span 2 !important; }


  .sec-title { font-size: 18vw; } /* “Selected work” and “Meet the founder” take two lines, like a poster */
  .close__title { font-size: 20.5vw; } /* one line down to 320 px: “Your turn.” is about 4.2em wide */
  .brief__fields { grid-template-columns: 1fr; }

  .foot { row-gap: 20px; }
  .foot__logo { grid-column: 1 / -1; }
  .foot__cell:nth-of-type(n) { grid-column: 1 / -1; }
  .foot__cell--end { grid-column: 1 / -1 !important; justify-self: start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
  .clients__view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}