/* Quill on Paper
   Layout is authored on the 1512 × 982 Figma frame and scaled to the viewport (--s). */

:root {
  --s: 1;
  --ox: 0px;
  --oy: 0px;
  --gutter: 0px;

  /* Neutrals share the photographs' warm hue (~30°) so type and photos read as one palette.
     Background stays pure white. Contrast on white: ink 17:1, text 9.7:1, muted 5.1:1. */
  --ink: #1e1a16;
  --text: #4a433c;
  --muted: #766c62;
  --rule: #ddd4c8;
  --field-line: #e4ddd3;
  --placeholder: #ada397;
  --error: #9a4b4b;

  /* The Home design's own neutrals (Figma 225:441): header links, hairlines and the pale Q.
     --line is a touch stronger than the hairline so a form field still reads as a field. */
  --nav: #5c5c5c;
  --hair: #dfdfdf;
  --line: #d2d2d2;
  --hint: #a3a3a3;
  --hint-text: #767676;   /* the hint grey for text: 4.5:1 on white (--hint is for lines) */

  /* Photos are graded slightly softer so they sit in the page instead of jumping off it. */
  --photo-grade: saturate(.8) contrast(.88) brightness(1.04);

  --serif: "Corben", "Didot", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", sans-serif;   /* Jost on every device (the designer's choice, 1 Nov), so Apple and Android match */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
a, button, label, input, select, textarea { touch-action: manipulation; }
/* A touch gives its own feedback, since the browser's tap flash is off */
@media (hover: none) {
  .m-head__menu:active, .m-head__back:active, .m-head__mark:active, .m-menu__link:active,
  .site-head .wordmark--home:active, .site-foot a:active, .site-foot button:active, .enquiry__back:active,
  .chapter-tab:active, .check:active, .artist__social a:active, .voice__more:active,
  .file__clear:active, .file__note a:active, .consent__decline:active, .consent__more:active { opacity: .6; }
  body[data-view="home"] .hero:active .hero__slides { opacity: .92; }
}
/* A heading that takes focus when its page opens (js/main.js) shows no ring: it isn't a control */
h1[tabindex="-1"]:focus { outline: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; }

/* ---------- Stage ---------- */

.stage {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: 1512px;
  height: 982px;
  transform: scale(var(--s));
  transform-origin: 0 0;
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}

body[data-view="home"] .view--home,
body[data-view="about"] .view--about,
body[data-view="enquire"] .view--enquire {
  opacity: 1;
  visibility: visible;
  transition: opacity .9s var(--ease) .15s, visibility 0s;
}

/* Desktop: the header, the client belts and the pale Q hold still on every page; only what lies
   between them changes. The phone keeps its own arrangement (see the phone section), with the
   hero photo, the flourishes and the bottom links. */
.flourish,
.hero { display: none; }

.flourish {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transition: opacity .7s var(--ease), visibility 0s linear .7s;
}
.flourish--about { opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 0s linear 1.2s; }
body[data-view="about"] .flourish--q { opacity: 0; visibility: hidden; }
body[data-view="about"] .flourish--about { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease), visibility 0s; }

/* ---------- Logo belt ---------- */

.belt-layer {
  position: absolute;
  left: 0;
  top: var(--oy);
  width: calc(100vw / var(--s));
  height: 982px;
  transform: scale(var(--s));
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 2;
}

.belt {
  position: absolute;
  left: 0;
  right: 0;
  height: 36px;
  overflow: hidden;
  /* Long, eased fades at both ends: logos arrive and leave softly */
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.3) 4%, rgba(0,0,0,.8) 9%, #000 13%, #000 87%, rgba(0,0,0,.8) 91%, rgba(0,0,0,.3) 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,.3) 4%, rgba(0,0,0,.8) 9%, #000 13%, #000 87%, rgba(0,0,0,.8) 91%, rgba(0,0,0,.3) 96%, transparent);
}
.belt--1 { top: 812px; }
.belt--2 { top: 874px; }
/* Enquire needs the whole page for the letter: the belts step out while it's open */
.belt-layer { transition: opacity .9s var(--ease) .15s, visibility 0s; }
body[data-view="enquire"] .belt-layer,
body[data-view="about"] .belt-layer { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
.belt--all { display: none; }

.belt__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  opacity: 0;
  transition: opacity 2s var(--ease);
  animation: belt-left var(--dur, 240s) linear infinite;
}
.belt__track[data-dir="right"] { animation-name: belt-right; }
.belt__track.is-ready { opacity: 1; }

.belt__track img {
  flex: none;
  margin-left: 118px;
  max-width: none;
}

@keyframes belt-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes belt-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- Wordmark ---------- */

.wordmark {
  position: absolute;
  left: 471px;
  top: 403px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 35px;
  letter-spacing: 3.92px;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
}
.wordmark__line { display: block; margin-right: -3.92px; }
.wordmark__line:not(:has(.ch)) { opacity: 0; }   /* until js/main.js sets its letters to write in */

.wordmark .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
}
.is-in .wordmark .ch {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 1.1s var(--ease) calc(var(--i) * 75ms + .25s),
    filter 1.3s var(--ease) calc(var(--i) * 75ms + .25s),
    transform 1.3s var(--ease) calc(var(--i) * 75ms + .25s),
    color .4s;
}
@media (hover: hover) and (pointer: fine) {
  .wordmark:hover .ch { color: var(--muted); }
}

/* ---------- Header (Figma 225:441) ----------
   The ticker, the wordmark and the two links: designed for Home, shared by every page. It sits
   above the pages, so it holds perfectly still while they change beneath it. */
.site-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 1512px;
  height: 140px;
  z-index: 3;
  pointer-events: none;
}
.site-head > * { pointer-events: auto; }

.wordmark--home {
  left: 732px;
  top: 78px;
  font-size: 32.3px;
  line-height: 40px;
  letter-spacing: 4.52px;
}
.wordmark--home .wordmark__line { margin-right: -4.52px; }

.ticker {
  position: absolute;
  left: 180px;
  top: 78px;
  width: 340px;
  height: 30px;
  margin: 0 0 0 -170px;
  overflow: hidden;
  font-size: 12px;
  line-height: 30px;
  letter-spacing: 3.96px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: rgba(93, 93, 93, .5);
}
.ticker__item {
  position: absolute;
  inset: 0;
  padding-left: 3.96px;
  opacity: 0;
  transform: translateY(100%);
}
.ticker__item.is-current,
.ticker__item.is-leaving { transition: transform 1s var(--ease), opacity .9s var(--ease); }
.ticker__item.is-current { opacity: 1; transform: none; }
.ticker__item.is-leaving { opacity: 0; transform: translateY(-100%); }

.top-nav {
  position: absolute;
  left: 1135px;
  top: 81px;
  width: 297px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 3.38px;
  text-transform: uppercase;
  color: var(--nav);
}
.top-nav__rule { width: 1px; height: 15px; background: var(--hair); }
/* The page you're on keeps its underline and the ink colour */
.top-nav .navlink[aria-current="page"] { color: var(--ink); }
.top-nav .navlink[aria-current="page"]::after { opacity: 1; transition-duration: 1.6s; }

/* About and Enquire: the ticker steps aside for a plain arrow home, its tip on the pages' left edge */
.site-back {
  position: absolute;
  left: 122px;
  top: 71px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 44px;
  color: var(--nav);
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease), visibility 0s linear .5s, color .2s ease-out;
}
body:not([data-view="home"]) .site-back { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .15s, visibility 0s, color .2s ease-out; }
body:not([data-view="home"]) .site-head .ticker { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }
.site-back svg { transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .site-back:hover { color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) {
  .site-back:hover svg { transform: translateX(-3px); }
}
.site-back:focus-visible { outline: 1px solid var(--ink); outline-offset: -6px; }

/* The header's reveal: the letters write in, then the ticker and links settle around them */
.site-head .ticker,
.site-head .top-nav { opacity: 0; }
.site-head.is-in .ticker,
.site-head.is-in .top-nav { opacity: 1; transition: opacity 1.4s var(--ease) 1.3s; }

/* ---------- Home ----------
   A row of photos under the pale Q; the client belts along the bottom. */

.strip {
  position: absolute;
  left: 136px;
  top: 196px;
  width: 1193px;
  height: 523px;
  overflow: hidden;
}
.strip__track {
  display: flex;
  gap: 10px;
  height: 100%;
  transition: transform 1.6s cubic-bezier(.65, 0, .35, 1);
}
.strip__track img {
  flex: none;
  color: transparent;
  width: 391px;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: #f2f0ed;
  cursor: zoom-in;
}

/* The pale calligraphic Q. Home's own copy is the one the opening animation draws; Enquire and
   About carry an identical copy in the same place, so it never moves between pages. */
.veil {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.veil--desk,
.veil--copy { left: 111px; top: 22px; width: 1213px; height: 936px; }
.veil--phone,
.hero-dots { display: none; }

/* Home reveal: the photographs settle in, then the Q */
.view--home .strip,
.view--home .veil { opacity: 0; }
.view--home.is-in .strip,
.view--home.is-in .veil { opacity: 1; transition: opacity 1.4s var(--ease); }
.view--home.is-in .strip { transition-delay: .35s; }
.view--home.is-in .veil { transition-delay: .9s; }

/* Laptop Home: the way into the gallery, on the middle photograph near its foot (the designer's
   mockup, 1 Nov), in white with Enter's arrow. A soft shadow keeps it legible on a pale photo. */
.navlink.home-gallery {
  position: absolute;
  left: 732.5px;
  top: 674px;   /* its middle 34px above the photographs' foot */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 2.9px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.navlink.home-gallery::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .navlink.home-gallery:hover { color: #fff; }
}
.navlink.home-gallery:focus-visible { outline-color: #fff; }
.home-gallery__arrow {
  flex: none;
  width: 7.6px;
  height: 7.8px;
  fill: currentColor;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .3));
  transition: transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .home-gallery:hover .home-gallery__arrow { transform: translateX(3px); }
}
.view--home .home-gallery { opacity: 0; }
.view--home.is-in .home-gallery { opacity: 1; transition: opacity 1.4s var(--ease) .7s, color .3s; }


/* ---------- Links ---------- */

.navlink {
  position: relative;
  white-space: nowrap;
  margin-right: -3.38px;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: inherit;
  transition: color .3s;
}
/* The underline: a grey line that comes very slowly out of the white, and goes back a little
   quicker; no sweep (1 Nov 2026) */
.navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 3.38px;
  bottom: -2px;
  height: 1px;
  background: var(--hint);
  opacity: 0;
  transition: opacity .8s ease-out;
}
.navlink::before { content: ""; position: absolute; inset: -9px -6px; }
@media (hover: hover) and (pointer: fine) {
  .navlink:hover { color: var(--ink); }
}
.navlink:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .navlink:hover::after { opacity: 1; transition-duration: 1.6s; }
}


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

.hero {
  position: absolute;
  left: 904px;
  top: 178px;
  width: calc(573px + var(--gutter, 0px));
  height: 768px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f2eee8;
  z-index: 1;
}
.hero__slides,
.hero__slides img {
  position: absolute;
  inset: 0;
  color: transparent;
  width: 100%;
  height: 100%;
}
.hero__slides img {
  object-fit: cover;
  filter: var(--photo-grade);
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.8s ease-in-out, transform 7s linear;
}
.hero__slides img.is-active { opacity: 1; transform: scale(1); }

.hero__btn,
.hero__gallery {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .4s var(--ease), background .3s, transform .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .hero:hover .hero__btn,
  .hero:focus-within .hero__btn { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
  .hero__btn:hover,
  .hero__gallery:hover { background: #fff; }
}
.hero__btn--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.hero__btn--next { right: 18px; top: 50%; transform: translateY(-50%); }
.hero__gallery { right: 18px; top: 18px; opacity: .92; }
@media (hover: hover) and (pointer: fine) {
  .hero__gallery:hover { transform: scale(1.06); }
}

.hero__count {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 5px 9px 5px 11px;
  border-radius: 20px;
  font-size: 10px;
  letter-spacing: 2.6px;
  color: #fff;
  background: rgba(30, 26, 22, .34);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* ---------- Enquire ----------
   One chapter at a time: I About you · II The occasion · III The work · IV A little more.
   Laptop: the index of chapters down the left, the open chapter beside it. The phone section
   turns the index into a row along the top and stacks the fields. */

/* The index: a hairline rail, an ink tick at the open chapter */
.chapters { position: absolute; left: 136px; top: 214px; width: 300px; z-index: 3; }
.chapters__list { position: relative; margin: 0; padding: 0 0 0 26px; list-style: none; border-left: 1px solid var(--hair); }
.chapters__list::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 1px;
  height: 44px;
  background: var(--ink);
  transform: translateY(calc(var(--at, 0) * 44px));
  transition: transform .5s var(--ease);
}
.chapter-tab {
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  width: 100%;
  height: 44px;
  text-align: left;
  color: var(--hint-text);
  transition: color .25s ease-out;
}
.chapter-tab[data-reached] { color: var(--nav); }
.chapter-tab[aria-current="step"] { color: var(--ink); }
/* After a Send with something missing: the chapters that still need it, in the fields' own red */
.chapter-tab[data-missing] { color: var(--error); }
.chapter-tab[data-missing] .chapter-tab__n { text-decoration: underline dotted; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .chapter-tab:hover { color: var(--ink); }
}
.chapter-tab:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.chapter-tab__n { font-family: var(--serif); font-size: 14px; letter-spacing: 1px; }
.chapter-tab__t { font-size: 11px; letter-spacing: 2.9px; text-transform: uppercase; white-space: nowrap; }

/* The open chapter */
.enquiry__form { position: absolute; left: 520px; top: 196px; width: 809px; height: 560px; margin: 0; z-index: 3; }
.enquiry__form[hidden] { display: none; }
.chapter { position: relative; }
.chapter[hidden] { display: none; }
.chapter.is-entering { animation: chapter-in .6s var(--ease) both; }
.chapter.is-leaving { animation: chapter-out .2s ease-in both; }
@keyframes chapter-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes chapter-out { to { opacity: 0; } }
.chapter__title { margin: 36px 0 6px; font-weight: 400; font-size: 30px; line-height: 38px; letter-spacing: .3px; color: var(--ink); outline: none; }
.chapter__lede { margin: 0 0 34px; font-size: 16px; line-height: 24px; color: var(--nav); }
.chapter__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
.chapter__fields .wide { grid-column: 1 / -1; }
.chapter__fields input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.chapter__fields select { height: 40px; font-size: 18px; }
.chapter__fields .file__box,
.chapter__fields .file__clear { height: 40px; }
.chapter__fields .file__box { font-size: 18px; }
.chapter__fields textarea { height: 92px; font-size: 17px; line-height: 23px; }
.chapter .check { min-height: 36px; font-size: 15px; }
.chapter__cond { display: grid; grid-template-columns: 3fr 1fr; gap: 0 40px; }
.chapter__cond--live { grid-template-columns: 1fr 1fr 2fr; }
.chapter__cond[hidden] { display: none; }

.enquiry__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 24px; }
.enquiry__back { font-size: 11px; letter-spacing: 2.9px; margin-right: -2.9px; color: var(--nav); }
.enquiry__back[hidden] { display: inline; visibility: hidden; }
.enquiry__foot .form-error { flex: 1; }

.enquiry__thanks {
  position: absolute;
  left: 136px;
  top: 196px;
  width: 1193px;
  height: 560px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
}
.enquiry__thanks[hidden],
.chapters[hidden] { display: none; }
.enquiry__thanks p { margin: 0; }
.enquiry__thanks-title { margin: 0 0 12px !important; margin-right: -3.38px !important; font-size: 13px; letter-spacing: 3.38px; text-transform: uppercase; color: var(--ink); }

/* Arriving on the page: the index, then the open chapter */
.view--enquire .enquiry > * { opacity: 0; transform: translateY(8px); }
.view--enquire.is-in .enquiry > * {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease) calc(var(--i, 0) * 90ms + .2s), transform 1s var(--ease) calc(var(--i, 0) * 90ms + .2s);
}
@media (prefers-reduced-motion: reduce) {
  .chapter.is-entering { animation-name: chapter-fade; }
  @keyframes chapter-fade { from { opacity: 0; } }
  .chapters__list::before { transition: none; }
}

.field { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }

.label {
  display: block;
  margin: 0 0 3px;
  padding: 0;
  font-size: 10.5px;
  line-height: 14px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nav);
}
.label em {
  margin-left: 7px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: none;
  color: var(--hint-text);
}
.hint {
  margin-left: 12px;
  font-size: 11px;
  letter-spacing: .3px;
  text-transform: none;
  color: var(--hint-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  width: 100%;
  height: 34px;
  padding: 0 0 1px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .2px;
  color: var(--ink);
  outline: none;
  transition-property: border-color, box-shadow;
  transition-duration: .2s;
  transition-timing-function: ease-out;
  -webkit-appearance: none;
          appearance: none;
}
textarea { height: 56px; padding: 7px 0 6px; line-height: 21px; resize: none; }
input::placeholder,
textarea::placeholder { color: var(--hint-text); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  input:hover,
  select:hover,
  textarea:hover { border-bottom-color: #a9a9a9; }
}
/* Focus: the hairline becomes a firm ink line */
input:focus,
select:focus,
textarea:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
input[type="date"]:invalid { color: var(--hint-text); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .4; cursor: pointer; }
input[type="number"]::-webkit-inner-spin-button { opacity: .35; }

.select { position: relative; display: block; }
.select select { padding-right: 22px; cursor: pointer; }
.select select:invalid { color: var(--hint-text); }
@media (hover: hover) and (pointer: fine) {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 100px #fff inset; }
}
.select select option { color: var(--ink); }
.select::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--nav);
  border-bottom: 1px solid var(--nav);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

/* A reference image: drawn as the same hairline field, the picker opens from the whole line */
.file__row { position: relative; display: flex; align-items: flex-end; gap: 18px; }
.file__box {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 0 1px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  letter-spacing: .2px;
  color: var(--hint-text);
  cursor: pointer;
  transition-property: border-color, box-shadow;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .file__box:hover { border-bottom-color: #a9a9a9; }
}
.file__box:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.file__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.file.has-file .file__name { color: var(--ink); }
.file__size { flex: none; margin-left: 8px; color: var(--hint-text); pointer-events: none; }
.file__size:empty { display: none; }
.file__clear {
  position: relative;
  flex: none;
  height: 34px;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--nav);
  transition: color .2s ease-out;
}
.file__clear::before { content: ""; position: absolute; inset: -5px -8px; }
@media (hover: hover) and (pointer: fine) {
  .file__clear:hover { color: var(--ink); }
}
.file__clear:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.file__clear[hidden] { display: none; }
.file.has-error .file__box { border-bottom-color: var(--error); }
.file.has-error .label { color: var(--error); }
.file__error { margin: 7px 0 0; font-size: 11px; line-height: 15px; letter-spacing: .4px; color: var(--error); }
.file__error:empty { display: none; }
.file__note { margin: 12px 0 0; font-size: 13px; line-height: 19px; letter-spacing: .2px; color: var(--muted); text-wrap: pretty; }
.file__note a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .file__note a:hover { text-decoration-color: var(--ink); }
}
.file__note a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* Sending: a hidden frame carries the post; a field only robots fill in */
.enquiry__frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.enquiry__next[disabled] { cursor: progress; opacity: .6; }

/* Choices: square boxes for "check all that apply", round ones for "pick one" */
fieldset.field > legend { float: left; width: 100%; }
.checks { clear: both; display: flex; flex-wrap: wrap; gap: 0 36px; padding-top: 3px; }
[data-group="services"] .checks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 24px; }
.check {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 32px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  transition: color .2s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .check:hover { color: var(--ink); }
}
.check input {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 1px solid #8c8c8c;   /* a box you can see: 3.4:1 */
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: border-color .2s ease-out;
}
.check input[type="radio"] { border-radius: 50%; }
.check input::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--ink);
  transform: scale(0);
  transition: transform .25s var(--ease);
}
.check input[type="radio"]::after { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) {
  .check:hover input { border-color: var(--ink); }
}
.check input:checked { border-color: var(--ink); }
.check input:checked::after { transform: scale(1); }
.check input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

.is-invalid input,
.is-invalid select,
.is-invalid textarea { border-bottom-color: var(--error); }
.is-invalid .label { color: var(--error); }
.is-invalid .label em { color: var(--error); }
.is-invalid .check input { border-color: var(--error); }

.form-error { margin: 0; font-size: 11px; line-height: 15px; letter-spacing: .4px; color: var(--error); text-align: right; text-wrap: balance; }
/* The one button on the site: a hairline outline that fills with ink */
.submit {
  flex: none;
  height: 44px;
  padding: 0 30px 0 33.4px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 3.4px;
  text-transform: uppercase;
  transition-property: background-color, color, transform;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
@media (hover: hover) {
  .submit:hover { background-color: var(--ink); color: #fff; }
}
.submit:active { transform: scale(.96); }
.submit:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---------- About ----------
   Decided 31 Oct 2026 (DECISIONS.md). One story on every screen: her portrait; "Calligraphy was
   never part of the plan." as the header; her introduction as the subhead; a pause; her story. Then
   76 brands and 60 live events, each word laid over its hand-drawn numeral as the page always had
   them. Then every client in the world it comes from, what brands said and, last, what private
   clients said. No moving logos. The laptop sets it in two columns and lets this one page scroll
   (Home and Enquire stay one screen); the phone stacks it. */

.view.is-cut { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
.view--about .veil--copy { z-index: 0; }
/* Read by screen readers, not shown */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The opening */
.artist { position: relative; margin: 0; opacity: 0; transform: translateY(8px); }
.view--about.is-in .artist { opacity: 1; transform: none; transition: opacity 1.4s var(--ease) .1s, transform 1.4s var(--ease) .1s; }
.artist picture { display: contents; }   /* the laptop's portrait choice adds a wrapper; layout ignores it */
.artist__photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 3px; background: #f2f0ed; }
/* A caption, as a gallery would hang it: name and role on the left, her pages on the right */
.artist__caption { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; row-gap: 8px; margin-top: 20px; }
.artist__name { grid-column: 1; font-size: 12px; letter-spacing: 3.12px; text-transform: uppercase; color: var(--ink); }
.artist__role { grid-column: 1; font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--nav); }
.artist__social { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 14px; }
.artist__social a { position: relative; display: grid; place-items: center; width: 17px; height: 17px; color: var(--nav); transition: color .2s ease-out; }
.artist__social a::before { content: ""; position: absolute; inset: -11.5px -7px; }
@media (hover: hover) and (pointer: fine) {
  .artist__social a:hover { color: var(--ink); }
}
.artist__social a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

.bio { font-size: 16.5px; line-height: 27px; color: var(--text); text-wrap: pretty; opacity: 0; transform: translateY(8px); }
.view--about.is-in .bio { opacity: 1; transform: none; transition: opacity 1.4s var(--ease) .25s, transform 1.4s var(--ease) .25s; }
.bio__head { margin: 0; font-weight: 300; color: var(--ink); text-wrap: balance; }
.bio p { margin: 18px 0 0; }
.bio .bio__lede { color: var(--ink); }

/* 76 brands, 60 live events: each word laid over its numeral, placed as a share of the numeral so
   it sits exactly as the page always had it at any size ("brands" 62 / 136 down, "plus live
   events" 54 / 134 down, centred) */
.about-close { display: flex; align-items: flex-start; }
.stat { position: relative; flex: none; margin: 0; }
.num { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.num g { fill: #dedede; opacity: 1; }
.num .ink {
  fill: none;
  stroke: #fff;
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.06;   /* wholly before the stroke starts, round ends too: nothing shows until the pen does */
}
.num.is-drawn path[mask] { mask: none; }   /* drawn: the artwork itself, no mask edges left (js/main.js) */
.stat-label {
  position: absolute;
  left: 50%;
  margin: 0;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 2.9px;
  text-transform: uppercase;
  text-align: center;
  color: var(--nav);
  opacity: 0;
  transform: translate(-50%, 8px);
}
.stat-label--brands { top: 45.6%; margin-left: 2px; white-space: nowrap; }
.stat-label--events { top: 40.3%; width: 82%; margin-left: 1px; }
/* The numbers draw as they come into view (js/main.js); their words follow as the pen settles */
.view--about.seen-76 .stat-label--brands,
.view--about.seen-60 .stat-label--events { opacity: 1; transform: translate(-50%, 0); transition: opacity 1.2s var(--ease) 2.3s, transform 1.2s var(--ease) 2.3s; }

/* QUILL ON PAPER between the numbers, on one line, writing itself in (as the header's does) once seen */
.wordmark--close { position: relative; left: auto; top: auto; flex: none; display: block; transform: none; white-space: nowrap; }
.view--about:not(.seen-mark) .wordmark--close .ch { opacity: 0; filter: blur(8px); transform: translateY(10px); transition: none; }
/* On About the header carries no wordmark: it's found at the close */
body[data-view="about"] .site-head .wordmark--home { opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s linear .4s; }

/* The worlds: a hairline between each, the world's name, then its brands in balanced lines (worked
   out in js/main.js, layoutWorlds, so every browser shows the same lines; no world ends on a lone logo) */
.worlds__table { margin: 0; border-bottom: 1px solid var(--hair); }
.worlds__row { border-top: 1px solid var(--hair); }
.worlds__name { margin: 0; font-size: 16px; line-height: 22px; letter-spacing: .2px; color: var(--ink); }
.worlds__items { margin: 0; }
.worlds__items--logos { display: flex; flex-direction: column; align-items: flex-start; }
.worlds__line { display: flex; align-items: center; }
.worlds__line img { flex: none; max-width: none; }
/* Side by side, every quote's name sits on one line under the longest quote (1 Nov) */
.worlds__row--words .worlds__items { display: grid; align-items: stretch; }
.worlds__quote { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.worlds__quote-text { margin: 0; font-size: 16px; line-height: 26px; color: var(--text); text-wrap: pretty; }
.worlds__quote-text p { margin: 0 0 12px; }
.worlds__quote-text p:last-child { margin-bottom: 0; }
.worlds__quote .voice__more { margin-top: 14px; }
.worlds__quote .voice__by { margin-top: auto; padding-top: 18px; }

/* Their words: "Read in full", then who said it (a company's logo, or the person) */
.voice__more {
  position: relative;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hair);
  font-size: 10.5px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--nav);
  transition-property: color, border-color;
  transition-duration: .2s;
  transition-timing-function: ease-out;
}
.voice__more::before { content: ""; position: absolute; inset: -12px -6px; }
@media (hover: hover) and (pointer: fine) {
  .voice__more:hover { color: var(--ink); border-color: var(--ink); }
}
.voice__more:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.voice__by { display: flex; align-items: center; gap: 16px; }
.voice__logo:empty { display: none; }
.voice__logo img { display: block; }
.voice__logo:not(:empty) + .voice__who { padding-left: 16px; border-left: 1px solid var(--hair); }
.voice__who { display: flex; flex-direction: column; justify-content: center; gap: 7px; min-height: 28px; }
.voice__name { font-size: 12px; letter-spacing: 3.12px; text-transform: uppercase; color: var(--ink); }
.voice__source { font-size: 10.5px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--nav); }

.about-enquire { display: inline-flex; align-items: center; justify-content: center; }
.about-invite { display: none; }   /* the phone's close only (the column section) */

/* The laptop: two columns, and this one page scrolls. (Three queries, nested: together exactly
   "not the column", whose query is in index.html as QOP_PHONE.) */
@media not all and (max-width: 900px) {
@media not all and (max-aspect-ratio: 5/4), not all and (max-width: 1100px) {
@media not all and (max-height: 585px), not all and (pointer: coarse) {
  html.is-scrolling { overflow-x: hidden; overflow-y: auto; overflow-anchor: none; }   /* Read in full opens downward, the page holds still */
  html.is-scrolling body { height: auto; overflow: visible; }

  .view--about {
    bottom: auto;
    height: auto;
    display: grid;
    grid-template-columns: 500px minmax(0, 1fr);
    grid-template-areas:
      "artist bio"
      "worlds worlds"
      "close  close"
      "foot   foot";
    column-gap: 104px;
    padding: 196px 136px 72px;
  }
  .view--about .artist { grid-area: artist; width: 500px; }
  .view--about .artist__photo { height: 750px; object-position: 50% 50%; }
  .view--about .bio { grid-area: bio; padding-top: 64px; }
  .bio__head { max-width: 600px; font-size: 62px; line-height: 66px; letter-spacing: -.6px; }
  .view--about .bio p { max-width: 540px; }
  .view--about .bio .bio__lede { max-width: 590px; margin-top: 30px; font-size: 21px; line-height: 32px; }
  .view--about .bio .bio__lede + p { margin-top: 68px; }   /* a clear pause between her introduction and her story */

  .worlds { grid-area: worlds; margin-top: 140px; }
  .worlds__row { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; padding: 48px 0; }
  /* Room around every mark: 96 px across, 44 px between lines */
  .worlds__items--logos { row-gap: 44px; }
  .worlds__line { column-gap: 96px; }
  .worlds__row--words { align-items: start; }
  .worlds__row--words .worlds__name { padding-top: 3px; }
  .worlds__row--words .worlds__items { gap: 40px 56px; }
  .worlds__row--brands .worlds__items { grid-template-columns: 1.4fr 1fr; }
  .worlds__row--private .worlds__items { grid-template-columns: repeat(3, 1fr); }

  /* The close, as the designer's mockup has it (31 Oct): 60, the wordmark, 76, then Enquire at the
     right edge. Numerals 1.55× their old size; the wordmark sits on the line of their words. */
  .about-close { grid-area: close; margin-top: 52px; }
  .about-close .stat--events { width: 226px; margin-left: -8px; }
  .about-close .wordmark--close { margin: 98px 0 0 71px; font-size: 33.7px; line-height: 40px; letter-spacing: 4.7px; }
  .about-close .wordmark--close .wordmark__line { margin-right: -4.7px; }
  .about-close .stat--brands { width: 220px; margin: 10px 0 0 75px; }
  .about-close .stat-label { font-size: 17px; line-height: 23px; letter-spacing: 4.5px; }
  .about-close .about-enquire { margin: 70px 0 0 auto; }

  /* The footer, at the foot of About and of Enquire (1 Nov 2026): a hairline, then the wordmark and
     the studio on the left, the pages (as the header sets them) and the studio's addresses on the
     right, on the pages' own edges. On Enquire it sits under the form, still on the one screen. */
  body[data-view="about"] .site-foot,
  body[data-view="enquire"] .site-foot {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "mark nav" "where meta";
    align-items: center;
    row-gap: 14px;
    padding-top: 34px;
    border-top: 1px solid var(--hair);
  }
  .view--about .site-foot { grid-area: foot; margin-top: 150px; }
  body[data-view="enquire"] .view--enquire .site-foot { position: absolute; left: 136px; right: 136px; top: 846px; }
  .site-foot__mark { grid-area: mark; justify-self: start; margin-right: -3.4px; font-family: var(--serif); font-size: 17px; line-height: 22px; letter-spacing: 3.4px; color: var(--ink); transition: color .3s; }
  @media (hover: hover) and (pointer: fine) {
    .site-foot__mark:hover { color: var(--muted); }
  }
  .site-foot__where { grid-area: where; margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
  .site-foot__nav { grid-area: nav; display: flex; align-items: center; gap: 21px; font-size: 13px; line-height: 15px; letter-spacing: 3.38px; color: var(--nav); }
  /* The header offers About the artist and Enquire on every page: the footer keeps only what it
     lacks, so no link appears twice on a page (1 Nov 2026) */
  .site-foot [data-nav="about"],
  .site-foot [data-nav="enquire"],
  .site-foot__rule { display: none; }
  .site-foot__meta { grid-area: meta; justify-self: end; display: flex; align-items: center; gap: 30px; }
  .site-foot__social { display: flex; gap: 14px; margin: 0; }
  .site-foot__social a { position: relative; display: grid; place-items: center; width: 17px; height: 17px; color: var(--nav); transition: color .2s ease-out; }
  .site-foot__social a::before { content: ""; position: absolute; inset: -11.5px -7px; }
  @media (hover: hover) and (pointer: fine) {
    .site-foot__social a:hover { color: var(--ink); }
  }
  .site-foot__mail { font-size: 13px; line-height: 19px; color: var(--text); transition: color .2s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .site-foot__mail:hover { color: var(--ink); }
  }
  .site-foot__legal { margin: 0; font-size: 11px; line-height: 15px; letter-spacing: .3px; color: var(--muted); }
  .site-foot__privacy,
  .site-foot__cookies { margin-left: -12px; font-size: 11px; line-height: 15px; letter-spacing: .3px; color: var(--muted); transition: color .2s ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .site-foot__privacy:hover,
    .site-foot__cookies:hover { color: var(--ink); }
  }
  .site-foot .site-foot__cookies[hidden] { display: none; }
  .site-foot a:focus-visible,
  .site-foot button:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

  /* iPads held sideways: QUILL ON PAPER on the opening's closing frame at the size of the
     designer's iPad mockup (1 Nov), about 30% of the width, on the same centre line. */
  @media (hover: none) and (pointer: coarse) {
    .intro-card .intro-card__name { top: 405.2px; font-size: 38.4px; line-height: 47.6px; letter-spacing: 7.9px; }
    .intro-card .intro-card__name > span { margin-right: -7.9px; }
  }
}
}
}

/* ---------- Gallery overlay ---------- */

.gallery {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  background: #fff;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.gallery[hidden] { display: none; }
.gallery:focus { outline: none; }
.gallery.is-open { opacity: 1; }

.gallery__strip {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 76vh;
  padding: 0 50vw;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
.gallery__strip.is-dragging { cursor: grabbing; }
.gallery__strip img {
  flex: none;
  height: 100%;
  width: auto;
  max-width: none;
  border-radius: 4px;
  background: #f2eee8;
  filter: var(--photo-grade);
  opacity: 1;
  transition: opacity .5s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .gallery__strip img:hover,
  .gallery__strip img.is-current { opacity: 1; }
}
.gallery__strip:not(.is-dragging) img { cursor: zoom-in; }

.gallery__close,
.gallery__nav {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}
/* The way out: a plain cross on the white, no circle (1 Nov 2026) */
.gallery__close { top: 26px; right: 30px; border-radius: 50%; color: var(--ink); transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .gallery__close:hover { transform: rotate(90deg); }
}
/* The arrows lie over the photographs: a faint white ring with the photo softly blurred inside it,
   and a white arrow, each with the lightest shadow so they still read on a pale photo (1 Nov 2026).
   No count or instructions beneath: the arrows and the cursor say it. */
.gallery__nav {
  top: 50%;
  margin-top: -24px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .1);
  transition: background-color .3s, border-color .3s;
}
.gallery__nav svg { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3)); }
.gallery__nav path { stroke-width: 1.3; }
@media (hover: hover) and (pointer: fine) {
  .gallery__nav:hover { border-color: #fff; background: rgba(255, 255, 255, .2); }
}
.gallery__nav--prev { left: 30px; }
.gallery__nav--next { right: 30px; }

/* ---------- Opening animation ----------
   The camera travels through the page's own Q (.veil): js/intro.js moves its inner group, then
   holds on the closing frame below until Enter. The rest of Home stays hidden until it arrives.
   Each group's opacity comes from the intro's clock through a custom property. */

html.intro-on,
html.intro-on body { overflow: hidden; }
html.intro-on .site-head .ticker,
html.intro-on .site-head .top-nav,
html.intro-on .m-head { opacity: var(--intro-head, 0) !important; transition: none !important; }
html.intro-on .view--home .strip,
html.intro-on body[data-view="home"] .hero { opacity: var(--intro-photos, 0) !important; transition: none !important; }
html.intro-on .belt-layer,
html.intro-on .hero-dots,
html.intro-on .view--home .home-gallery { opacity: var(--intro-rest, 0) !important; transition: none !important; }
html.intro-on .view--home .veil { opacity: 1 !important; transition: none !important; }
html.intro-on .veil__cam > path { fill-opacity: var(--intro-tone, 0); }   /* the artwork only, not its masks */
html.intro-on .wordmark--home .ch {
  opacity: var(--o, 0) !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
html.intro-on .m-head,
html.intro-on .belt-layer,
html.intro-on .site-head a,
html.intro-on .hero { pointer-events: none; }
.veil__cam { will-change: auto; }

/* The closing frame (Figma 236:593 laptop, 236:584 phone): the Q at rest in its own composition,
   QUILL ON PAPER across it and, below, the way in. The intro holds here until Enter is chosen.
   Laid out on the 1512 × 982 frame like the stage; js/intro.js sets the letters' --o and --intro-enter. */
.intro-card { position: fixed; inset: 0; z-index: 55; pointer-events: none; }
.intro-card[hidden] { display: none; }
.intro-card__frame {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: 1512px;
  height: 982px;
  transform: scale(var(--s));
  transform-origin: 0 0;
}
.intro-card__name {
  position: absolute;
  left: 756.5px;
  top: 409px;
  margin: 0;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 32.3px;
  line-height: 40px;
  letter-spacing: 6.65px;
  color: var(--ink);
  white-space: nowrap;
}
.intro-card__name > span { display: block; margin-right: -6.65px; }
.intro-card__name .ch {
  display: inline-block;
  opacity: var(--o, 0);
  filter: blur(calc((1 - var(--o, 0)) * 8px));
  transform: translateY(calc((1 - var(--o, 0)) * 10px));
}
.intro-enter {
  position: absolute;
  left: 756.5px;
  top: 708px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  transform: translate(-50%, calc((1 - var(--intro-enter, 0)) * 6px));
  opacity: var(--intro-enter, 0);
  font-size: 13px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 3.38px;
  text-transform: uppercase;
  color: #a9a9a9;
  pointer-events: auto;
  transition: color .3s ease-out;
}
.intro-enter[disabled] { pointer-events: none; }   /* still fading in: a tap there skips, like anywhere else */
.intro-enter__arrow { flex: none; fill: currentColor; transition: transform .4s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .intro-enter:hover { color: var(--nav); }
}
@media (hover: hover) and (pointer: fine) {
  .intro-enter:hover .intro-enter__arrow { transform: translateX(3px); }
}
.intro-enter:focus { outline: none; }
.intro-enter:focus-visible { outline: 1px solid var(--ink); outline-offset: -4px; }

/* Enter: the Q and the name fade slowly back into the white */
html.intro-on.intro-leaving .view--home .veil,
html.intro-leaving .veil--phone,
html.intro-leaving .intro-card { opacity: 0 !important; transition: opacity 1.2s var(--ease) !important; }

/* Then Home arrives piece by piece: the name writes in, the photographs follow one by one, the
   pale Q settles behind them, then the ticker and links, the dots and the client belts. */
@keyframes qop-arrive { from { opacity: 0; transform: translateY(8px); } }
@keyframes qop-arrive-fade { from { opacity: 0; } }
@keyframes qop-arrive-letter { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }
html.intro-arriving .site-head .wordmark--home .ch { transition: none; animation: qop-arrive-letter 1.3s var(--ease) calc(.15s + var(--i) * 70ms) both; }
html.intro-arriving .strip__track img { transition: none; animation: qop-arrive 1.3s var(--ease) 1.15s both; }
html.intro-arriving .strip__track img:nth-child(1) { animation-delay: .75s; }
html.intro-arriving .strip__track img:nth-child(2) { animation-delay: .95s; }
html.intro-arriving .view--home .veil,
html.intro-arriving .veil--phone { transition: none; animation: qop-arrive-fade 1.8s var(--ease) 1.2s both; }
html.intro-arriving .site-head .ticker,
html.intro-arriving .site-head .top-nav,
html.intro-arriving .m-head { transition: none; animation: qop-arrive-fade 1.3s var(--ease) 1.6s both; }
html.intro-arriving .hero-dots,
html.intro-arriving .view--home .home-gallery { transition: none; animation: qop-arrive-fade 1.1s var(--ease) 1.8s both; }
html.intro-arriving .belt-layer { transition: none; animation: qop-arrive-fade 1.5s var(--ease) 2s both; }

/* Scrubber (?scrub) — a review tool, not part of the site */
.scrub {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(20, 18, 16, .88);
  color: #fff;
  font: 12px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.scrub__play { min-width: 58px; padding: 7px 10px; border-radius: 6px; background: #fff; color: #111; font: inherit; font-weight: 600; }
.scrub__range { width: 100%; accent-color: #fff; }
.scrub__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrub__phase { grid-column: 1 / -1; color: rgba(255, 255, 255, .7); }

/* ---------- Phone, tablet and foldable: the column ----------
   The 1512 × 982 frame is too wide to scale down on a phone, so below 900px, on upright or
   nearly square screens up to 1100px (iPads held upright, foldables opened out), and on touch
   screens too short for the frame (phones turned sideways), the same pieces reflow into one
   scrolling column, with the same type, colours, flourishes, photo grade and motion. */

.m-head,
.m-menu { display: none; }

/* What phone Home scrolls on to, and the footer: shown only where each belongs (the column, where
   the footer ends every page, and the laptop's About and Enquire, further down) */
.home-more,
.site-foot { display: none; }
.site-foot__mark,
.m-head__mark { white-space: nowrap; }   /* QUILL ON PAPER never breaks across two lines */

@media (max-width: 900px), (max-aspect-ratio: 5/4) and (max-width: 1100px), (max-height: 585px) and (pointer: coarse) {
  html,
  body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  body { min-height: 100svh; }   /* never shorter than the screen; the footer ends every page, clear of the home indicator */

  .stage {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: calc(600 * var(--u));
    height: auto;
    margin: 0 auto;
    transform: none;
  }

  .flourish,
  .hero { display: block; }

  /* Only the active page is in the flow */
  .view { position: relative; inset: auto; display: none; }
  body[data-view="home"] .view--home,
  body[data-view="enquire"] .view--enquire { display: block; animation: m-view-in .9s var(--ease) both; }
  body[data-view="about"] .view--about { display: grid; animation: m-view-in .9s var(--ease) both; }
  body[data-view="about"] .belt-layer,
  body[data-view="about"] .hero,
  body[data-view="enquire"] .hero,
  body[data-view="enquire"] .belt-layer { display: none; }

  /* Header: back arrow · Quill on Paper · menu */
  .m-head {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: calc(14px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
  }
  .m-head__back { display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); }
  .m-head__mark {
    justify-self: center;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ink);
  }
  /* Menu: three pale bars, the middle one shorter (Figma 225:431–433) */
  .m-head__menu { grid-column: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(3 * var(--u)); width: 44px; height: 44px; }
  .m-head__menu span { display: block; width: calc(18 * var(--u)); height: max(2px, calc(3 * var(--u))); border-radius: 1px; background: #d9d9d9; transition: transform .4s var(--ease), opacity .3s; }
  .m-head__menu span:nth-child(2) { width: calc(13 * var(--u)); margin-left: calc(5 * var(--u)); }
  .menu-open .m-head__menu span { background: #b9b9b9; }
  .menu-open .m-head__menu span:first-child { transform: translateY(calc(6 * var(--u))) rotate(45deg); }
  .menu-open .m-head__menu span:nth-child(2) { opacity: 0; }
  .menu-open .m-head__menu span:last-child { transform: translateY(calc(-6 * var(--u))) rotate(-45deg); }
  body[data-view="home"] .m-head__back,
  body[data-view="home"] .m-head__mark { visibility: hidden; }
  body.menu-open[data-view] .m-head { position: fixed; top: 0; left: 0; right: 0; }
  .menu-open .m-head__back,
  .menu-open .m-head__mark { visibility: hidden; }

  .m-menu {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;   /* the links' own 44 px rows do the spacing, all of it tappable */
    background: #fff;
    animation: m-view-in .5s var(--ease) both;
  }
  .m-menu[hidden] { display: none; }
  .m-menu__link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 24px; margin-right: -4px; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--text); }
  html.menu-open { overflow: hidden; }   /* on phones it's <html> that scrolls: it holds still under the menu */

  /* One client belt, under the photo */
  body > .belt-layer { display: none; }   /* until it sits under the photo (index.html puts it there before the first paint) */
  .belt-layer {
    position: relative;
    top: auto;
    width: 100%;
    flex: none;
    height: calc(31 * var(--u));
    margin: calc(57 * var(--u)) 0 calc(23 * var(--u));
    transform: none;
    animation: none !important;
  }
  html.intro-arriving .belt-layer { animation: qop-arrive-fade 1.5s var(--ease) 2s both !important; }
  body[data-view="home"] .belt-layer { z-index: 3; height: calc(31 * var(--u)); }
  /* The header row: on phones, Home only (the other pages have the bar with the back arrow).
     Ticker and wordmark in front of the Q, the belt too (as in Figma). */
  .site-head { position: relative; left: auto; top: auto; width: auto; height: auto; z-index: 3; pointer-events: auto; }
  body:not([data-view="home"]) .site-head { display: none; }
  .belt--1,
  .belt--2 { display: none; }
  .belt--all { display: block; top: 50%; height: 36px; margin-top: -18px; transform: scale(var(--u)); transform-origin: 0 50%; width: calc(100% / var(--u)); }

  /* Flourishes */
  .flourish--q { left: -26%; top: -10px; width: 150%; height: auto; }
  .flourish--about { left: -48%; top: -150px; width: 230%; height: auto; }

  /* Home (Figma 225:399): one screen — ticker, wordmark, the photo under its veil, dots, one belt.
     Measured in the design's own units (--u: 1/600 of the phone frame). */
  :root { --u: calc(min(100vw, 600px) / 600); }
  body[data-view="home"] .stage {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100svh;   /* Home scrolls on now: the browser's bar hiding as you scroll mustn't stretch the first screen */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
  }
  body[data-view="home"] .m-head { position: absolute; top: 0; left: 0; right: 0; height: 0; padding: 0; display: block; }
  body[data-view="home"] .m-head__menu {
    position: absolute;
    right: max(calc(41 * var(--u) - 22px), env(safe-area-inset-right));
    top: calc(env(safe-area-inset-top) + 28.5 * var(--u) - 22px);
  }
  .site-head .top-nav,
  .navlink.home-gallery,
  .view--home .strip,
  .veil--desk,
  .veil--copy { display: none; }
  body[data-view="home"] .flourish--q { display: none; }

  .ticker {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: calc(30 * var(--u));
    margin: calc(4 * var(--u)) 0 0;
    font-size: max(7.5px, calc(12 * var(--u)));
    line-height: calc(30 * var(--u));
    letter-spacing: calc(3.96 * var(--u));
  }
  .ticker__item { padding-left: calc(3.96 * var(--u)); }
  .site-head .wordmark--home {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: calc(-2 * var(--u)) auto 0;
    font-size: calc(37.1 * var(--u));
    line-height: calc(46 * var(--u));
    letter-spacing: calc(5.2 * var(--u));
  }
  .site-head .wordmark--home .wordmark__line { margin-right: calc(-5.2 * var(--u)); }

  .hero {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: clamp(240px, 42svh, 400px);
    aspect-ratio: 4 / 5;
    margin: 26px auto 0;
    border-radius: 4px;
  }
  .hero__btn,
  .hero__count { display: none; }
  .hero__gallery { top: 8px; right: 8px; width: 28px; height: 28px; }
  .hero__gallery svg { width: 13px; height: 13px; }

  body[data-view="home"] .hero {
    opacity: 1;
    visibility: visible;
    flex: 1 1 auto;
    width: calc(552 * var(--u));
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    margin: calc(32 * var(--u)) auto 0;
    border-radius: 0;
    cursor: zoom-in;
    touch-action: pan-y pinch-zoom;   /* a sideways swipe changes the photo; the page doesn't drift */
  }
  body[data-view="home"] .hero__slides img { filter: none; }
  body[data-view="home"] .hero__gallery { display: none; }

  body[data-view="home"] .hero-dots {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: calc(3 * var(--u));
    margin-top: calc(23 * var(--u));
  }
  .hero-dots i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #d9d9d9; transition: background .6s var(--ease); }
  .hero-dots i.is-active { background: #939393; }

  .intro-card__frame { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  .intro-card__name {
    left: 50%;
    top: calc(env(safe-area-inset-top) + 427.8 * var(--u));
    font-size: calc(32.9 * var(--u));
    line-height: calc(40.7 * var(--u));
    letter-spacing: calc(6.77 * var(--u));
  }
  .intro-card__name > span { margin-right: calc(-6.77 * var(--u)); }
  .intro-enter {
    left: 50%;
    top: calc(env(safe-area-inset-top) + 641 * var(--u) - 15px);
    gap: .88em;
    padding: 15px 22px;
    font-size: max(11px, calc(13 * var(--u)));
    font-weight: 400;
    letter-spacing: max(2.4px, calc(3.38 * var(--u)));
  }
  html.intro-arriving body[data-view="home"] .hero { transition: none; animation: qop-arrive 1.3s var(--ease) .75s both; }

  body[data-view="home"] .veil--phone {
    display: block;
    z-index: 2;
    left: calc(50% - 497 * var(--u));   /* 197 left of the column */
    top: calc(env(safe-area-inset-top) + 48 * var(--u));
    width: calc(1186 * var(--u));
    height: calc(918 * var(--u));
  }

  /* Below Home's first screen (decided 1 Nov 2026, DECISIONS.md): the work as a row you swipe
     through; 76, the wordmark and 60 stacked, each drawn like a pen as it comes into view; her first
     client to Google; About the artist; a live event and the way to Enquire; then the footer. All on
     the column of Home's photograph. */
  .home-more,
  .site-foot { --col: calc(552 * var(--u)); --gut: calc((100vw - var(--col)) / 2); }
  body[data-view="home"] .home-more { display: block; width: var(--col); margin: 0 auto; padding-top: 76px; }
  html.intro-on .home-more,
  html.intro-on .site-foot { visibility: hidden; }

  /* The row: edge to edge, each photograph settling on the column's left edge, the next one showing */
  .hm-row {
    display: flex;
    gap: 12px;
    margin: -6px calc(-1 * var(--gut)) 0;   /* room for a focus ring above the photos */
    padding: 6px 0 0 var(--gut);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gut);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .hm-row::-webkit-scrollbar { display: none; }
  .hm-row::after { content: ""; flex: 0 0 calc(var(--gut) - 12px); }
  .hm-item { flex: 0 0 calc(var(--col) * .74); margin: 0; scroll-snap-align: start; }
  .hm-item figcaption { margin-top: 12px; font-size: 10.5px; line-height: 14px; letter-spacing: 2.8px; text-transform: uppercase; color: var(--nav); }
  .hm-open { display: block; width: 100%; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
  .hm-open img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #f3f1ee; }
  .hm-open:active img { opacity: .92; }
  .hm-open:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
  .hm-under { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
  .hm-count { margin: 0; font-size: 11px; letter-spacing: 1.2px; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* A link in tracked capitals, with Enter's arrow */
  .hm-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 11px; line-height: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); -webkit-tap-highlight-color: transparent; }
  .hm-link svg { flex: none; width: 7.6px; height: 7.8px; fill: currentColor; transition: transform .3s var(--ease); }
  .hm-link:active svg { transform: translateX(3px); }
  .hm-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

  /* 76 brands over QUILL ON PAPER over 60 live events: About's own artwork, larger than its row */
  .hm-numbers { container-type: inline-size; display: flex; flex-direction: column; align-items: center; margin-top: 112px; }
  .hm-numbers .stat { width: 46cqi; }
  .hm-numbers .stat-label { font-size: max(9px, 2.9cqi); line-height: 1.35; letter-spacing: .22em; }
  .hm-numbers .wordmark--close { margin: 20px 0 22px; font-size: 5cqi; line-height: 1.2; letter-spacing: .16em; cursor: default; }
  .hm-numbers .wordmark--close .wordmark__line { margin-right: -.16em; }
  .hm-numbers.seen-76 .stat-label--brands,
  .hm-numbers.seen-60 .stat-label--events { opacity: 1; transform: translate(-50%, 0); transition: opacity 1.2s var(--ease) 2.3s, transform 1.2s var(--ease) 2.3s; }
  .hm-numbers.seen-mark .wordmark--close .ch {
    opacity: 1;
    filter: blur(0);
    transform: none;
    transition:
      opacity 1.1s var(--ease) calc(var(--i) * 75ms + .25s),
      filter 1.3s var(--ease) calc(var(--i) * 75ms + .25s),
      transform 1.3s var(--ease) calc(var(--i) * 75ms + .25s);
  }
  /* Then her first client to Google, and a little further on, the way to her story */
  .hm-line { max-width: 32ch; margin: 48px auto 0; font-size: 17px; line-height: 27px; text-align: center; color: var(--text); text-wrap: balance; }
  .hm-about { display: flex; justify-content: center; margin: 40px 0 0; }

  /* A live event, its name centred beneath, then the way to Enquire */
  .hm-live { margin: 112px 0 0; text-align: center; }
  .hm-live .hm-open img { aspect-ratio: 1; }
  .hm-live figcaption { margin-top: 14px; }
  .hm-live__name { display: block; padding-left: 3px; font-size: 11px; line-height: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink); }
  .hm-live__what { display: block; margin-top: 3px; font-size: 13px; line-height: 19px; color: var(--muted); }
  .hm-invite { max-width: 15em; margin: 44px auto 0; font-size: 27px; line-height: 33px; font-weight: 300; text-align: center; color: var(--ink); text-wrap: balance; }
  .hm-sub { margin: 10px 0 0; font-size: 15px; line-height: 23px; text-align: center; color: var(--muted); }
  .hm-enquire { display: flex; align-items: center; justify-content: center; width: 84%; height: 48px; margin: 30px auto 0; padding: 0 0 0 3.4px; }

  /* The footer, at the foot of every page: centred, one thing to a line */
  .site-foot {
    display: block;
    width: var(--col);
    margin: 96px auto 0;
    padding: 46px 0 calc(34px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hair);
    text-align: center;
  }
  body[data-view="about"] .site-foot { margin-top: 56px; }   /* About ends in 40 px of its own */
  body[data-view="enquire"] .site-foot { margin-top: 72px; }
  /* Its links: never the page you're on, nor one the page already offers (Home's own section has
     all three; About ends with Enquire), so no link appears twice on a page (1 Nov 2026) */
  body[data-view="home"] .site-foot__nav,
  body[data-view="about"] .site-foot [data-nav="about"],
  body[data-view="about"] .site-foot [data-nav="enquire"],
  body[data-view="enquire"] .site-foot [data-nav="enquire"] { display: none; }
  body[data-view="home"] .site-foot__social { margin-top: 22px; }
  .site-foot__mark { display: inline-block; padding: 12px 0; margin-right: -3.3px; font-family: var(--serif); font-size: 15px; line-height: 20px; letter-spacing: 3.3px; color: var(--ink); }
  .site-foot__where { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--muted); }
  .site-foot__nav { display: flex; flex-direction: column; align-items: center; margin-top: 22px; }
  .site-foot__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin-right: -3.2px; font-size: 11px; letter-spacing: 3.2px; color: var(--nav); }
  .site-foot__link::before { inset: 0; }
  .site-foot__rule { display: none; }
  .site-foot__social { display: flex; justify-content: center; gap: 4px; margin: 12px 0 0; }
  .site-foot__social a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--nav); }
  .site-foot__mail { display: inline-block; margin-top: 4px; padding: 12px 0; font-size: 14px; line-height: 20px; color: var(--text); }
  .site-foot__legal { margin: 14px 0 0; font-size: 11px; line-height: 15px; letter-spacing: .3px; color: var(--muted); }
  .site-foot__privacy,
  .site-foot__cookies { display: inline-flex; align-items: center; min-height: 44px; margin: 0 10px; font-size: 11px; letter-spacing: .3px; color: var(--muted); }
  .site-foot .site-foot__cookies[hidden] { display: none; }
  .site-foot a:focus-visible,
  .site-foot button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

  @media (prefers-reduced-motion: reduce) {
    .hm-numbers .stat-label,
    .hm-numbers .wordmark--close .ch { transition: none !important; }
  }

  /* Enquire: the same four chapters; the index becomes a row of numerals, centred along the top,
     each one opening its chapter */
  .enquiry { position: relative; margin: 26px 20px 0; }
  .chapters {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--hair);
  }
  .chapters__list { display: flex; padding: 0; border-left: 0; }
  .chapters__list::before {
    top: auto;
    bottom: -1px;
    left: 0;
    width: 52px;
    height: 1px;
    transform: translateX(calc(var(--at, 0) * 52px));
  }
  .chapter-tab { display: flex; justify-content: center; width: 52px; height: 48px; }
  .chapter-tab__n { font-size: 17px; }
  .chapter-tab__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .enquiry__form { position: relative; left: auto; top: auto; width: auto; height: auto; padding-top: 40px; }
  .chapter__title { margin: 22px 0 4px; font-size: 27px; line-height: 34px; }
  .chapter__lede { margin-bottom: 28px; font-size: 15px; line-height: 22px; }
  .chapter__fields { gap: 26px 16px; }
  .chapter__fields > *,
  .chapter__cond > * { grid-column: 1 / -1; }
  .chapter__fields > .half,
  .chapter__cond > .half { grid-column: span 1; justify-content: flex-end; }   /* side by side, their lines level even when a label wraps */
  .chapter__cond,
  .chapter__cond--live { grid-template-columns: 1fr 1fr; gap: 26px 16px; }
  /* 16px text stops iPhones zooming into a field when it's tapped */
  .chapter__fields input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .chapter__fields select { height: 44px; font-size: 16px; }
  .chapter__fields .file__box,
  .chapter__fields .file__clear { height: 44px; }
  .chapter__fields .file__box { font-size: 16px; }
  .chapter__fields textarea { height: 120px; padding-top: 10px; font-size: 16px; line-height: 23px; }
  .label { white-space: normal; line-height: 15px; }
  .hint { display: block; margin: 6px 0 0; }
  .checks { gap: 0 24px; }
  [data-group="services"] .checks { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .chapter .check { min-height: 44px; }

  /* Back and Continue share the row equally (1 Nov 2026): Back, its word alone (no outline), centred
     in its half; Continue fills the other half. On the first chapter Back keeps its place, unseen. */
  .enquiry__foot { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 40px; }
  .enquiry__foot .form-error { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; text-align: left; }
  .enquiry__foot .form-error:empty { display: none; }
  .enquiry__back { grid-column: 1; grid-row: 2; justify-self: center; min-height: 48px; padding: 0; }
  .enquiry__back::before { inset: 0 -36px; }   /* a wide finger target; the line stays under the word */
  .enquiry__next { grid-column: 2; grid-row: 2; height: 48px; }
  .enquiry__thanks { position: static; width: auto; height: auto; padding: 100px 0 80px; }

  /* About: the same story as the laptop, stacked: portrait, header, subhead, story, the two
     numbers, the worlds, their words */
  .view--about {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "artist" "bio" "worlds" "close";
    padding: 14px 24px 40px;
  }
  .view--about .artist { grid-area: artist; }
  .view--about .artist__photo { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .artist__social { gap: 2px; }
  .artist__social a { width: 44px; height: 44px; }
  .artist__social a::before { inset: 0; }
  .view--about .bio { grid-area: bio; margin-top: 44px; }
  .bio__head { font-size: 38px; line-height: 42px; letter-spacing: -.3px; }
  .view--about .bio .bio__lede { margin-top: 20px; font-size: 19px; line-height: 28px; }
  .view--about .bio .bio__lede + p { margin-top: 44px; }   /* the same pause, phone-sized */

  /* The worlds, centred: each name, then its logos, balanced on centred lines with room around them */
  .worlds { grid-area: worlds; margin-top: 64px; }
  .worlds__row { padding: 34px 0 38px; text-align: center; }
  .worlds__name { margin-bottom: 40px; font-size: 15px; }   /* real room between a world's name and its logos */
  .worlds__items--logos { align-items: center; row-gap: 24px; }
  .worlds__line { justify-content: center; column-gap: 30px; }
  .worlds__row--words .worlds__items { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .worlds__quote { align-items: center; }
  .worlds__quote .voice__by { justify-content: center; }

  /* The close (1 Nov 2026): Home already shows 76, the wordmark and 60, so on phones About ends with
     the invitation and Enquire alone (the laptop keeps its row) */
  .about-close { grid-area: close; flex-wrap: wrap; justify-content: center; margin-top: 64px; }
  .about-close .stat,
  .about-close .wordmark--close { display: none; }
  .about-close .about-invite { display: block; flex: 1 0 100%; margin: 0 auto; }
  .about-close .about-enquire { flex: 0 0 calc(552 * var(--u) * .84); height: 48px; margin: 30px auto 0; }   /* Home's exactly: centred, a little narrower than the column */

  /* On About the bar carries no wordmark either */
  body[data-view="about"] .m-head__mark { visibility: hidden; }

  /* Upright tablets: the same column, a little larger (QUILL ON PAPER about 40% of the width, as
     the designer's iPad mockup has it, 1 Nov), and the Q let out of the column: centred, up to
     94% of the height and running off both sides, on the opening's closing frame and on Home. */
  @media (min-width: 600.02px) and (min-height: 700px) {
    :root {
      --u: max(1px, 100vw * .4 / 387);
      --q: min(1.2 * var(--u), 94vh / 918);   /* the Q's own unit */
    }
    @supports (height: 100svh) { :root { --q: min(1.2 * var(--u), 94svh / 918); } }
    body[data-view="home"] .stage { max-width: none; }
    body[data-view="home"] .veil--phone {
      left: calc(50% - 497 * var(--q));
      top: calc(50% - 459 * var(--q));
      width: calc(1186 * var(--q));
      height: calc(918 * var(--q));
    }
    .intro-card__name { top: calc(50% - 79.2 * var(--q)); }
    .intro-enter { top: calc(50% + 134 * var(--q) - 15px); }
  }

  /* Short screens turned sideways (phones, foldables under the browser's bars): Home scrolls
     rather than squeezing its photograph into a sliver, and the opening's closing frame is sized
     to the height, the Q, the name and Enter together, so all of it stays on screen. */
  @media (max-height: 600px) and (min-aspect-ratio: 1/1) {
    :root { --q: min(var(--u), 94vh / 918); }
    @supports (height: 100svh) { :root { --q: min(var(--u), 94svh / 918); } }
    body[data-view="home"] .stage { height: auto; overflow: visible; }
    body[data-view="home"] .hero { flex: none; height: auto; aspect-ratio: 3 / 2; }
    body[data-view="home"] .veil--phone {
      left: calc(50% - 497 * var(--q));
      top: calc(50vh - 459 * var(--q));
      top: calc(50svh - 459 * var(--q));
      width: calc(1186 * var(--q));
      height: calc(918 * var(--q));
    }
    .intro-card__name {
      top: calc(50% - 79.2 * var(--q));
      font-size: calc(32.9 * var(--q));
      line-height: calc(40.7 * var(--q));
      letter-spacing: calc(6.77 * var(--q));
    }
    .intro-card__name > span { margin-right: calc(-6.77 * var(--q)); }
    .intro-enter { top: calc(50% + 134 * var(--q) - 15px); }
  }
}
@media (max-width: 360px) {
  /* The narrowest phones: "required" under the label in both halves, so the pair stays level */
  .chapter__fields > .half .label em,
  .chapter__cond > .half .label em { display: block; margin: 2px 0 0; }
}

@keyframes m-view-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .belt__track { animation-play-state: paused; }   /* still, at its designed start */
  .ticker__item,
  .ticker__item.is-leaving { transform: none; }   /* the services fade in place, no rise */
  .hero__slides img { transition: opacity .6s; transform: none; }
}

.gallery__close:focus,
.gallery__nav:focus { outline: none; }
.gallery__close:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }   /* Tab only */
.gallery__nav:focus-visible { border-color: #fff; box-shadow: 0 0 0 2px rgba(30, 26, 22, .55); }
/* The gallery on phones and touch screens: one photo to a screen, edge to edge, on black (iPhone
   Safari tints its bars with it, so they read as the frame, not as white bands); each swipe
   settles on the next photo. Upright: the photo fills the screen. Turned sideways: it shows whole. */
html.gallery-open,
html.gallery-open body { overflow: hidden; }
@media (max-width: 900px), (max-aspect-ratio: 5/4) and (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .gallery { align-items: stretch; background: #000; }
  .gallery__strip {
    height: 100%;
    gap: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    cursor: auto;
  }
  .gallery__strip::-webkit-scrollbar { display: none; }
  .gallery__strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    background: #000;
    color: transparent;
    filter: none;   /* as the phone's Home photo shows them, and the frame stays true black */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    -webkit-touch-callout: none;
  }
  .gallery__strip:not(.is-dragging) img { cursor: auto; }
  .gallery__nav { display: none; }
  /* A soft shade in the top-right corner only (no circle, no panel), so the cross reads on the palest photos */
  .gallery::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 180px;
    height: 150px;
    background: radial-gradient(farthest-side at 100% 0, rgba(0, 0, 0, .34), rgba(0, 0, 0, .14) 55%, rgba(0, 0, 0, 0));
    pointer-events: none;
  }
  /* The way out: a small white cross, shadowed just enough to read on a pale photo */
  .gallery__close {
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #fff;
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .6)) drop-shadow(0 0 6px rgba(0, 0, 0, .38));
    transition: opacity .2s ease-out;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .gallery__close svg { width: 18px; height: 18px; }
  .gallery__close path { stroke-width: 2; }
  @media (hover: hover) and (pointer: fine) {
    .gallery__close:hover { background: none; transform: none; }
  }
  .gallery__close:active { opacity: .7; }
  .gallery__close:focus-visible { outline: 1px solid #fff; outline-offset: -8px; }
}
@media (max-width: 900px) and (orientation: landscape), (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .gallery__strip img { object-fit: contain; }
}

/* ---------- Cookies (js/consent.js) ----------
   Asked only once Google Analytics is set up: a small card in the corner in the site's own hand,
   Accept as the one button, Decline as words, and the privacy note beside them. */
.consent {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 40;
  width: 400px;
  max-width: calc(100% - 56px);
  padding: 22px 24px 18px;
  border: 1px solid var(--hair);
  background: #fff;
  box-shadow: 0 14px 34px rgba(30, 26, 22, .07);
  font-size: 14px;
  line-height: 21px;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.consent[hidden] { display: none; }
.consent.is-in { opacity: 1; transform: none; }
.consent__text { margin: 0; text-wrap: pretty; }
.consent__row { display: flex; align-items: center; gap: 24px; margin-top: 16px; }
.consent__accept { height: 40px; padding: 0 22px 0 25.4px; }
.consent__decline { font-size: 11px; letter-spacing: 3.4px; color: var(--nav); }
.consent__more { margin-left: auto; font-size: 12px; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .consent__more:hover { color: var(--ink); }
}
.consent__more:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .consent { transform: none; transition: opacity .3s; }
}
/* Phones and upright tablets: across the foot of the screen, clear of the home indicator */
@media (max-width: 900px), (max-aspect-ratio: 5/4) and (max-width: 1100px), (max-height: 585px) and (pointer: coarse) {
  .consent { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
  .consent__accept { height: 44px; }
  .consent__decline { min-height: 44px; }
}