/* Clone stylesheet — darcywoottondavies.co.uk
   Layout is expressed on a 1440px reference canvas via --s (1 CSS px = --s),
   matching the source's Readymag 1024px canvas scaled with zoom:1.40625. */

@import url("fonts/fonts.css");

:root {
  --u: calc(100vw / 1440);
  /* Inter Display everywhere — the "display" cut is the base face; Inter
     remains the text fallback if a weight is unavailable. */
  --disp: "Inter Display", "Inter", Arial, sans-serif;
  --light: "Inter Display", "Inter", Arial, sans-serif;
  /* Global negative tracking: characters sit closer without colliding.
     -0.05em is the tuned default; display headlines go tighter (-0.06em). */
  --track: -0.05em;
  --track-display: -0.06em;
  --yellow: #fff707;
  --red: #ff0000;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* body defaults copied verbatim from the original's computed style */
  background: #000;
  color: rgb(40, 40, 40);
  border-color: rgb(40, 40, 40);
  font-family: var(--disp);
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #fff;
}

/* ---------- fixed global header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(44 * var(--u));
  z-index: 100;
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
/* Name lockup: bold name over a thin, wide-tracked discipline line. */
.logo {
  position: absolute;
  left: calc(28 * var(--u));
  top: calc(11 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  font-family: var(--disp);
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.logo-name {
  font-weight: 700;
  font-size: calc(20 * var(--u));
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}
.logo-role {
  font-weight: 300;
  font-size: calc(10 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.logo:focus-visible,
.nav a:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.nav {
  position: absolute;
  /* optical centre of the two-line logo lockup (11u top + 34u tall) = 28u */
  top: calc(19 * var(--u));
  right: calc(57 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(36 * var(--u));
}
.nav a {
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(18 * var(--u));
  letter-spacing: var(--track);
  line-height: 1;
  color: #fff;
  text-decoration: none;
}
.nav a:hover { color: var(--yellow); }

/* ---------- work filters ---------- */
/* Sub-menu above the wall. Reads like the thin nav: lowercase, light by
   default, the single yellow accent when active. */
/* Centred across the work wall. */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: calc(10 * var(--u)) calc(24 * var(--u));
  margin-bottom: calc(16 * var(--u));
}
.filter {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font-family: var(--disp);
  font-weight: 300;
  font-size: calc(15 * var(--u));
  letter-spacing: var(--track);
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 180ms ease;
}
.filter:hover { color: #fff; }
.filter.is-active { color: var(--yellow); font-weight: 700; }
.filter:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
.no-work {
  margin: calc(2 * var(--u)) 0 0;
  font-family: var(--disp);
  font-weight: 300;
  font-size: calc(15 * var(--u));
  letter-spacing: var(--track);
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- work footer ---------- */
.work-footer {
  margin-top: calc(32 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.work-footer p {
  margin: 0;
  font-family: var(--disp);
  font-weight: 300;
  font-size: calc(8 * var(--u));
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- work grid ---------- */
/* Deliberate collage where EVERY thumbnail stays a true 16:9 frame and the
   gutters are identical horizontally and vertically (10u each). Five columns
   of equal width fill the canvas; the row height is the column width x 9/16,
   so a 1x1 cell is exactly 16:9. Five tiles span 2 columns + 2 rows (four
   corner anchors, one centre anchor); because a 2x2 block includes one interior
   gutter, each large tile is given an explicit 16:9 box instead of stretching
   to the block, which keeps it exact and centres the sub-pixel remainder. */
.page-work {
  padding: calc(56 * var(--u)) calc(27 * var(--u)) calc(12 * var(--u));
}
.grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: calc(151.425 * var(--u));
  column-gap: calc(10 * var(--u));
  row-gap: calc(10 * var(--u));
  /* Auto-placed tiles (those without a curated placement) backfill gaps around
     the 2x2 large tiles, so the wall packs without holes. */
  grid-auto-flow: row dense;
}
.tile { position: relative; }
/* Placement map — grid-area: row-start / column-start / row-end / column-end.
   Large (2x2) anchors sit at the four corners and the centre; every other tile
   is a single square, so each box resolves to exactly 16:9 with no cropping. */
.tile[data-tile="11"] { grid-area: 1 / 1 / 3 / 3; }  /* anchor: top-left     */
.tile[data-tile="14"] { grid-area: 1 / 4 / 3 / 6; }  /* anchor: top-right    */
.tile[data-tile="33"] { grid-area: 4 / 2 / 6 / 4; }  /* anchor: centre       */
.tile[data-tile="51"] { grid-area: 7 / 1 / 9 / 3; }  /* anchor: bottom-left  */
.tile[data-tile="55"] { grid-area: 7 / 4 / 9 / 6; }  /* anchor: bottom-right */
.tile[data-tile="12"] { grid-area: 1 / 3 / 2 / 4; }
.tile[data-tile="13"] { grid-area: 2 / 3 / 3 / 4; }
.tile[data-tile="15"] { grid-area: 3 / 1 / 4 / 2; }
.tile[data-tile="21"] { grid-area: 3 / 2 / 4 / 3; }
.tile[data-tile="22"] { grid-area: 3 / 3 / 4 / 4; }
.tile[data-tile="23"] { grid-area: 3 / 4 / 4 / 5; }
.tile[data-tile="24"] { grid-area: 3 / 5 / 4 / 6; }
.tile[data-tile="25"] { grid-area: 4 / 1 / 5 / 2; }
.tile[data-tile="31"] { grid-area: 4 / 4 / 5 / 5; }
.tile[data-tile="32"] { grid-area: 4 / 5 / 5 / 6; }
.tile[data-tile="34"] { grid-area: 5 / 1 / 6 / 2; }
.tile[data-tile="35"] { grid-area: 5 / 4 / 6 / 5; }
.tile[data-tile="41"] { grid-area: 5 / 5 / 6 / 6; }
.tile[data-tile="42"] { grid-area: 6 / 1 / 7 / 2; }
.tile[data-tile="43"] { grid-area: 6 / 2 / 7 / 3; }
.tile[data-tile="44"] { grid-area: 6 / 3 / 7 / 4; }
.tile[data-tile="45"] { grid-area: 6 / 4 / 7 / 5; }
.tile[data-tile="52"] { grid-area: 6 / 5 / 7 / 6; }
.tile[data-tile="53"] { grid-area: 7 / 3 / 8 / 4; }
.tile[data-tile="54"] { grid-area: 8 / 3 / 9 / 4; }
/* Large tiles: fixed 16:9 box derived from their two-column width, so the
   interior gutter of the 2x2 block never distorts the frame. */
.grid .tile[data-size="lg"] { align-self: center; }
.grid .tile[data-size="lg"] .tile-media {
  height: auto;
  aspect-ratio: 16 / 9;
}
/* A tile marked Large without a curated placement still spans 2x2 in the
   default grid, so "Large" reads the same before and after filtering. Mapped
   tiles keep their explicit grid-area (excluded here). */
.grid .tile[data-size="lg"]:not([data-tile]) { grid-column: span 2; grid-row: span 2; }
/* Filtered state: drop the curated placement map and let the matching subset
   auto-flow. The large tiles keep their 2x2 span, so the collage character
   survives the filter; because each large media keeps its own 16:9 box,
   centred in the block, the interior gutter never distorts it. Dense flow
   backfills the singles around them — no holes. Higher specificity than the
   placement map, so no !important is needed. */
.grid.is-filtered { grid-auto-flow: row dense; }
.grid.is-filtered .tile { grid-area: auto; }
/* Place the large tiles first so the 2x2 anchors pack into the top rows and the
   singles fill the gaps around them; otherwise a 2x2 stranded near the end
   leaves a large empty region beside it. */
.grid.is-filtered .tile[data-size="lg"] { grid-column: span 2; grid-row: span 2; order: -1; }
.tile[hidden] { display: none; }

/* Filter flourish: the outgoing tiles fade + shrink away in a short stagger,
   then the survivors re-pack and rise back in. Opt-out honours the OS setting.
   (The transform only affects painting, never the grid box.) */
@media (prefers-reduced-motion: no-preference) {
  .tile { transition: opacity 260ms ease, transform 300ms cubic-bezier(.22, .61, .36, 1); }
  .tile.is-leaving { opacity: 0; transform: scale(.9) translateY(6px); }
  .tile.is-entering { opacity: 0; transform: scale(.96) translateY(10px); transition: none; }
}
.tile-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: manipulation;
}
.tile-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hover scrim: darkens the still-playing thumbnail so the label reads. */
.tile-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 220ms ease;
  pointer-events: none;
}
.tile-media.is-open::after,
.tile-media:focus-visible::after { background: rgba(0, 0, 0, 0.6); }
@media (hover: hover) {
  .tile-media:hover::after { background: rgba(0, 0, 0, 0.6); }
}

/* Label lives inside the thumbnail; revealed on hover (pointer), tap (touch,
   via .is-open in site.js) or keyboard focus. */
.cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  opacity: 0;
  transform: translateY(calc(6 * var(--u)));
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 1;
}
.tile-media.is-open .cap,
.tile-media:focus-visible .cap { opacity: 1; transform: translateY(0); }
@media (hover: hover) {
  .tile-media:hover .cap { opacity: 1; transform: translateY(0); }
}
.cap-title {
  font-family: var(--light);
  font-weight: 300;
  font-size: calc(15.5 * var(--u));
  letter-spacing: var(--track);
  line-height: calc(17.5 * var(--u));
  color: #fff;
}
.cap-role {
  margin-top: calc(1 * var(--u));
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(15.5 * var(--u));
  letter-spacing: var(--track);
  line-height: calc(17.5 * var(--u));
  color: #fff;
}

/* ---------- coming soon ---------- */
.soon-sticker {
  position: absolute;
  display: inline-block;
  background: #fff;
  color: #000;
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(29.5 * var(--u));
  letter-spacing: var(--track-display);
  line-height: 1;
  white-space: nowrap;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  transform: rotate(-7deg);
  text-decoration: none;
}
.soon-sticker .chev { letter-spacing: calc(-4.8 * var(--u)); }
.soon-s1 { left: calc(660 * var(--u)); top: calc(399 * var(--u)); }
.soon-s2 { left: calc(531 * var(--u)); top: calc(456 * var(--u)); }

/* ---------- about ---------- */
/* Split editorial layout: an oversized stacked name with the discipline /
   location tape beneath it, the biography column on the right. The whole
   composition is centred in the viewport both ways so the page balances
   instead of leaving a large void below. */
.page-about {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(80 * var(--u)) calc(50 * var(--u)) calc(170 * var(--u));
}
/* Desktop: the composition is ~900u tall at full scale, so on short windows it
   used to run under the fixed client band. Cap the design unit with a
   height-aware one so the whole page scales to fit above the band. */
@media (min-width: 1025px) {
  .page-about { --u: min(calc(100vw / 1440), calc(100vh / 900)); }
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, calc(510 * var(--u))) minmax(0, calc(490 * var(--u)));
  column-gap: calc(180 * var(--u));
  align-items: center;
}
/* Portrait print tucked behind the name lockup, scrapbook style: a tilted
   photo with a drop shadow, matching the contact-page prints. Darkened so the
   white lockup stays legible over the frame. */
.about-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-photo {
  position: relative;
  z-index: 0;
  width: calc(410 * var(--u));
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transform: rotate(2.5deg);
  transform-origin: 50% 100%;
  margin-bottom: calc(-200 * var(--u));
  box-shadow: 0 calc(16 * var(--u)) calc(42 * var(--u)) rgba(0, 0, 0, 0.62);
  filter: brightness(0.8) contrast(1.05) saturate(0.92);
}
/* Headline: a solid, heavy stacked lockup — both lines at one size, tight
   leading and tracking so the words read as a single block. The whole block
   is tilted as a unit (rotate, not a per-glyph shear) so the letterforms stay
   upright grotesque while the lockup leans — followed by the discipline /
   location in the yellow accent. */
.about-name {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: var(--disp);
  font-weight: 900;
  font-size: calc(146 * var(--u));
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 calc(2 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.55);
  transform: rotate(-4deg);
  transform-origin: 0% 100%;
}
.about-name span {
  display: block;
  white-space: nowrap;
}
.about-name .an-1 { font-size: calc(146 * var(--u)); }
.about-name .an-2 { font-size: calc(146 * var(--u)); }
/* Discipline and location, set as a plain two-line label in the yellow
   accent beneath the name. */
.about-role {
  display: block;
  position: relative;
  z-index: 1;
  margin: calc(12 * var(--u)) 0 0;
  color: var(--yellow);
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(22 * var(--u));
  line-height: 1.22;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 calc(2 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.6);
  transform: rotate(-4deg);
  transform-origin: 0% 100%;
}
.about-role span { display: block; }
.about-bio {
  margin: 0;
  font-family: var(--light);
  font-weight: 300;
  font-size: calc(28 * var(--u));
  line-height: 1.25;
  letter-spacing: var(--track);
  color: rgba(255, 255, 255, 0.72);
}
.about-bio p { margin: 0 0 calc(26 * var(--u)); }
.about-bio p:last-child { margin-bottom: 0; }
.about-bio p:first-child { padding-top: calc(2 * var(--u)); }

/* ---------- about: Instagram link ---------- */
/* Plain text link sitting under the bio; hover/focus flips it to the accent. */
.ig-link {
  display: inline-block;
  margin-top: calc(42 * var(--u));
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(16 * var(--u));
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ig-link:hover,
.ig-link:focus-visible {
  color: var(--yellow);
}
.ig-link:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: calc(6 * var(--u));
  border-radius: 2px;
}

/* ---------- about: selected-client logo slider ---------- */
/* A continuous marquee of the brands worked with, pinned to the foot of the
   page. Two identical sets are laid end to end so translateX(-50%) loops
   seamlessly; the band pauses on hover and falls back to a static,
   scrollable row under reduced-motion. */
.brands {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #000;
  padding: calc(20 * var(--u)) 0 calc(30 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.brands-label {
  margin: 0 0 calc(22 * var(--u));
  text-align: center;
  font-family: var(--disp);
  font-weight: 300;
  font-size: calc(11 * var(--u));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.brands-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.brands-track {
  display: flex;
  width: max-content;
  animation: brand-scroll 46s linear infinite;
}
.brands:hover .brands-track { animation-play-state: paused; }
.brands-set {
  display: flex;
  align-items: center;
  gap: calc(108 * var(--u));
  margin: 0;
  padding: 0 calc(108 * var(--u)) 0 0;
  list-style: none;
}
.brands-set li { display: flex; align-items: center; }
.brands-set img {
  height: calc(32 * var(--u));
  width: auto;
  /* every real logo is normalised to a white silhouette so the row reads evenly */
  filter: brightness(0) invert(1);
  opacity: 0.62;
  transition: opacity 0.25s ease;
}
/* long wordmarks sit a touch smaller so their width stays in proportion */
.brands-set img[data-cap] { height: calc(22 * var(--u)); }
.brands:hover .brands-set img { opacity: 0.92; }
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brands-track { animation: none; }
  .brands-viewport { overflow-x: auto; }
}

/* ---------- contact ---------- */
.page-contact {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}
/* Left editorial block: oversized stacked display type with per-line
   rotations and a vertical stretch — the "abstract" set of the reference. */
.contact-left {
  position: absolute;
  left: calc(50 * var(--u));
  top: calc(148 * var(--u));
  z-index: 5;
}
.contact-hero {
  margin: 0;
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.055em;
  color: #fff;
}
.contact-hero .cl {
  display: block;
  transform-origin: left center;
  white-space: nowrap;
}
.contact-hero .cl-1 { font-size: calc(112 * var(--u)); transform: rotate(-3deg) scaleY(1.08); }
.contact-hero .cl-2 { margin-left: calc(10 * var(--u)); font-size: calc(150 * var(--u)); transform: rotate(-1deg) scaleY(1.1); }
.contact-hero .cl-3 { margin-top: calc(12 * var(--u)); font-size: calc(60 * var(--u)); transform: rotate(-2deg) scaleY(1.06); }

.contact-email {
  display: inline-block;
  margin: calc(26 * var(--u)) 0 0 calc(38 * var(--u));
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(30 * var(--u));
  letter-spacing: var(--track);
  line-height: 1;
  color: var(--yellow);
  text-decoration: none;
  white-space: nowrap;
  transform: rotate(-1deg);
}
/* Hover/focus flourish: the email snaps through a chromatic sequence — the
   colour-bar language of a grade suite, on the page's one accent element. */
@keyframes contact-flash {
  0%   { color: var(--yellow); }
  25%  { color: oklch(0.82 0.16 205); }
  50%  { color: oklch(0.70 0.27 350); }
  75%  { color: oklch(0.97 0.02 105); }
  100% { color: var(--yellow); }
}
.contact-email:hover,
.contact-email:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: no-preference) {
  .contact-email:hover,
  .contact-email:focus-visible {
    animation: contact-flash 1s steps(1, end) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contact-email:hover { text-decoration: underline; }
}

.contact-socials {
  position: absolute;
  left: calc(50 * var(--u));
  bottom: calc(42 * var(--u));
  display: flex;
  gap: calc(26 * var(--u));
  z-index: 5;
}
.contact-socials a {
  font-family: var(--disp);
  font-weight: 700;
  font-size: calc(10 * var(--u));
  letter-spacing: var(--track);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

/* Right collage: real captured frames, deliberately cropped (decorative). */
/* Scrapbook cluster: larger tilted prints that run on a diagonal from the
   upper-left to the lower-right and overlap at the corners, rather than a
   neat grid — matching the reference grouping. */
.contact-collage {
  position: absolute;
  right: calc(18 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(520 * var(--u));
  height: calc(470 * var(--u));
  z-index: 1;
}
.contact-collage .col {
  position: absolute;
  display: block;
  height: auto;
  object-fit: cover;
  box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.55);
}
.col-a {
  top: 0;
  left: calc(12 * var(--u));
  width: calc(420 * var(--u));
  aspect-ratio: 1.85;
  transform: rotate(-2deg);
  z-index: 1;
}
.col-b {
  top: calc(180 * var(--u));
  left: 0;
  width: calc(160 * var(--u));
  aspect-ratio: 1 / 1;
  transform: rotate(-6.5deg);
  z-index: 3;
}
.col-c {
  top: calc(222 * var(--u));
  right: 0;
  width: calc(460 * var(--u));
  aspect-ratio: 1.9;
  transform: rotate(2.5deg);
  z-index: 2;
}

.contact-notes {
  position: absolute;
  right: calc(30 * var(--u));
  bottom: calc(26 * var(--u));
  z-index: 6;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: rotate(-4deg);
}
.contact-notes li {
  font-family: "Rock Salt", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: calc(13 * var(--u));
  line-height: 1.34;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- tablet / stacked contact ---------- */
/* Below the 1440 design canvas the absolute editorial split strands the type
   top-left and the collage mid-right. Switch to a centred stack: text block on
   top, then a proportional scrapbook cluster that keeps its overlap and tilt. */
@media (max-width: 1024px) {
  .page-contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(34 * var(--u));
    height: auto;
    min-height: 100vh;
    padding: calc(100 * var(--u)) calc(56 * var(--u)) calc(160 * var(--u));
    overflow: hidden;
  }
  .contact-left { position: static; }
  .contact-hero .cl-1 { font-size: calc(96 * var(--u)); }
  .contact-hero .cl-2 { font-size: calc(132 * var(--u)); }
  .contact-hero .cl-3 { font-size: calc(54 * var(--u)); }
  .contact-email { margin: calc(24 * var(--u)) 0 0 calc(32 * var(--u)); font-size: calc(26 * var(--u)); }
  /* Proportional scrapbook: % geometry inside a fixed-ratio box keeps the
     tilted overlap at every width down to the phone. */
  .contact-collage {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: calc(600 * var(--u));
    height: auto;
    aspect-ratio: 1.11;
    margin: 0 auto;
  }
  .col-a { top: 0; left: 3%; width: 80%; aspect-ratio: 1.85; }
  .col-b { top: 37%; left: 0; width: 30%; aspect-ratio: 1 / 1; }
  .col-c { top: 47%; right: 0; width: 88%; aspect-ratio: 1.9; }
  /* Socials stay pinned bottom-left and the note list bottom-right, as on the
     desktop canvas; the extra bottom padding above reserves the band. */
  .contact-socials {
    position: absolute;
    left: calc(56 * var(--u));
    bottom: calc(52 * var(--u));
    justify-content: flex-start;
  }
  .contact-socials a { font-size: 15px; }
  .contact-notes {
    position: absolute;
    right: calc(56 * var(--u));
    bottom: calc(40 * var(--u));
    margin-top: 0;
  }
}

/* ---------- mobile fallback (source uses a separate phone layout) ---------- */
@media (max-width: 640px) {
  :root { --u: 1px; }

  .logo { left: 14px; top: 14px; gap: 3.5px; }
  .logo-name { font-size: 16px; letter-spacing: var(--track-display); }
  .logo-role { font-size: 8.5px; letter-spacing: 0.08em; }
  .nav { right: 14px; top: 20.5px; gap: 16px; }
  .nav a { font-size: 15px;   letter-spacing: var(--track); }

  .page { min-height: 100vh; }

  .page-work { padding: 64px 14px 12px; }
  .filters { justify-content: center; gap: 8px 16px; margin-bottom: 14px; }
  .filter { font-size: 14px; letter-spacing: var(--track); }
  .no-work { font-size: 14px; }
  .work-footer { margin-top: 28px; padding-top: 12px; }
  .work-footer p { font-size: 9px; }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    column-gap: 8px;
    row-gap: 8px;
    /* Full-width tiles only fit at column 1, so sparse auto-placement leaves
       holes when an odd number of singles precedes one. Dense lets later
       singles backfill those slots — no blank cells. */
    grid-auto-flow: row dense;
  }
  /* Drop the desktop placement map; two columns flow in source order, with the
     large tiles going full width to keep the collage rhythm — in both the
     curated and the filtered state. The shorthand grid-area resets the
     desktop grid-row span, so large tiles stay a single full-width row. */
  .page-work .grid .tile { grid-area: auto; }
  .page-work .grid .tile[data-size="lg"] { grid-area: auto; grid-column: span 2; order: 0; }
  /* Widths come from the grid; height follows from 16:9 so the ratio survives. */
  .tile-media { aspect-ratio: 16 / 9; height: auto; }
  .grid.is-filtered { grid-auto-flow: row dense; }
  /* No hover on touch: the label is revealed by a tap instead (see site.js). */
  .cap { padding: 8px 9px; }
  .cap-title { font-size: 13px;   letter-spacing: var(--track); }
  .cap-role { margin-top: 3px; font-size: 13px;   letter-spacing: var(--track); }

  .page-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
  .soon-sticker { position: static; font-size: 18px; padding: 6px 9px; }
  .soon-sticker .chev { letter-spacing: -2px; }

  .page-about { padding: 80px 20px 132px; }
  .brands { padding: 15px 0 20px; }
  .brands-label { margin-bottom: 14px; font-size: 9px; letter-spacing: 0.2em; }
  .brands-set { gap: 56px; padding-right: 56px; }
  .brands-set img { height: 20px; }
  .brands-set img[data-cap] { height: 14px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 28px; }
  .about-lockup { display: block; text-align: center; }
  .about-photo { display: block; width: 44vw; margin: 0 auto -18vw; }
  .about-name { font-size: 18vw; letter-spacing: -0.045em; text-align: center; transform-origin: 50% 100%; }
  .about-name .an-1 { font-size: 18vw; }
  .about-name .an-2 { font-size: 18vw; }
  .about-role { margin-top: 4px; font-size: 13px; text-align: center; transform-origin: 50% 100%; }
  .about-bio { font-size: 16px; line-height: 1.35; }
  .about-bio p { margin-bottom: 16px; }
  .ig-link { margin-top: 22px; font-size: 14px; }

  .page-contact { gap: 24px; padding: 82px 18px 150px; }
  .contact-left { position: static; }
  .contact-hero .cl-1 { font-size: 13.5vw; transform: rotate(-3deg) scaleY(1.06); }
  .contact-hero .cl-2 { margin-left: 2vw; font-size: 15.5vw; transform: rotate(-1deg) scaleY(1.08); }
  .contact-hero .cl-3 { margin-top: 6px; font-size: 7.5vw; transform: rotate(-2deg) scaleY(1.04); }
  .contact-email { margin: 20px 0 0 6px; font-size: 17px; }
  .contact-socials { position: absolute; left: 18px; bottom: 46px; gap: 22px; justify-content: flex-start; }
  .contact-socials a { font-size: 15px; }
  .contact-collage { max-width: 100%; }
  .contact-notes { position: absolute; right: 18px; bottom: 40px; margin-top: 0; transform: rotate(-3deg); }
  .contact-notes li { font-size: 12px; line-height: 1.4; }
}