/* ---------- Tokens ---------- */

:root {
  --paper: #e9e4db;
  --paper-hi: #f3efe7;
  --slip: #fbf7ec;
  --ink: #1e1b17;
  --ink-soft: #5a5348;
  --rule: #b3a999;
  --orange: #f0842c;
  --orange-ink: #9c4708;
  --thread: rgba(240, 132, 44, 0.55);
  --tape: #f0842c;
  --label: #f4ecd8;
  --tooth: 14px;
  --edges: clamp(8px, 2.4vw, 40px);
  --gutter: clamp(20px, 6.6vw, 92px);
  --serif: "Libre Caslon Text", "Big Caslon", Georgia, "Times New Roman", serif;
  --sans: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", monospace;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0 0 0 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Paper grain: faint brown flecks. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .34 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .55 -.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* The hand-drawn orange measuring marks from the logo, upright and on their side. */
  --ibeam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 44'%3E%3Cfilter id='r' x='-30%25' y='-10%25' width='160%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.9'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23f0842c' stroke-width='3.3' stroke-linecap='round' filter='url(%23r)'%3E%3Cpath d='M2.6 4.6 15 3.4M8.7 4 8.3 40M2.4 40.6 15.2 39.6'/%3E%3C/g%3E%3C/svg%3E");
  --ibeam-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 16'%3E%3Cfilter id='r' x='-10%25' y='-30%25' width='120%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.6'/%3E%3C/filter%3E%3Cg fill='none' stroke='%23f0842c' stroke-width='2.6' stroke-linecap='round' filter='url(%23r)'%3E%3Cpath d='M4 3.6 4.4 12.4M4.2 8.2 39.8 7.6M40 3.2 39.6 12.6'/%3E%3C/g%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
}

/* The page of an old tailor's sample book. */
body {
  margin: 0;
  background-color: var(--paper);
  background-image: radial-gradient(130% 80% at 50% 0%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%), var(--grain);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The stack of page edges down the spine. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: var(--edges);
  background: linear-gradient(90deg, rgba(60, 42, 14, 0.16), rgba(60, 42, 14, 0) 35% 72%, rgba(60, 42, 14, 0.2)),
    repeating-linear-gradient(90deg, rgba(118, 92, 52, 0) 0 4px, rgba(118, 92, 52, 0.2) 4px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 6px, rgba(255, 255, 255, 0.45) 6px 7.5px),
    repeating-linear-gradient(90deg, rgba(118, 92, 52, 0) 0 13px, rgba(118, 92, 52, 0.16) 13px 14.5px), var(--grain), #e7dcc5;
  box-shadow: 1px 0 0 rgba(90, 68, 36, 0.28), 4px 0 12px rgba(60, 42, 14, 0.1);
  pointer-events: none;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.nowrap {
  white-space: nowrap;
}

.link {
  text-decoration: none;
  background: linear-gradient(90deg, var(--ink) 60%, transparent 0) bottom / 8px 1px repeat-x;
  padding-bottom: 2px;
}

.link:hover {
  background-image: linear-gradient(var(--ink), var(--ink));
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- Masthead ---------- */

.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: clamp(18px, 2.2vw, 30px) var(--gutter) 0;
}

.masthead__logo {
  grid-column: 2;
  display: block;
  width: clamp(150px, 16vw, 228px);
}

.masthead__logo img {
  width: 100%;
  height: auto;
}

.masthead__nav {
  grid-column: 3;
  justify-self: end;
}

.masthead__nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead__nav li {
  display: flex;
  align-items: center;
}

.masthead__nav li + li::before {
  content: "";
  width: 0.62em;
  height: 1.62em;
  margin: 0 0.16em 0 0.3em;
  background: var(--ibeam) center / contain no-repeat;
}

.masthead__nav a {
  padding: 2px 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) left bottom / 0 2px no-repeat;
  transition: background-size 0.25s;
}

.masthead__nav a:hover,
.masthead__nav a:focus-visible {
  background-size: 100% 2px;
}

/* ---------- Swatch book ---------- */

main {
  padding: 40px var(--gutter) 96px;
  max-width: 1560px;
  margin: 0 auto;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 40px) clamp(24px, 6.4vw, 96px);
  max-width: 1180px;
  margin: 0 auto;
}

/* One mounted sample: small print on top, the cloth inside a ruled frame. */
.sample {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  animation: lay 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes lay {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.sample__caption {
  display: block;
  margin-bottom: 7px;
  font-family: var(--serif);
  font-size: 0.74rem;
  line-height: 1.35;
  text-align: center;
  color: var(--ink-soft);
  transition: color 0.25s;
}

.sample__name,
.sample__note {
  display: block;
}

.sample__note {
  font-size: 0.92em;
  font-style: italic;
}

.sample__mount {
  display: block;
  padding: 3.6%;
  border: 1px solid var(--rule);
}

.sample:hover .sample__caption,
.sample:focus-visible .sample__caption {
  color: var(--ink);
}

.sample:focus-visible {
  outline: none;
}

.sample:focus-visible .sample__mount {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* The cloth, which lifts off the page a little when you point at it. */
.swatch {
  position: relative;
  display: block;
  aspect-ratio: 10 / 7;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s;
}

.sample .swatch {
  --tooth: 9px;
}

.sample:hover .swatch,
.sample:focus-visible .swatch {
  transform: translateY(-6px) rotate(-1.2deg);
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.26));
}

.sample:nth-child(even):hover .swatch,
.sample:nth-child(even):focus-visible .swatch {
  transform: translateY(-6px) rotate(1deg);
}

/* Pinking shears: the outer span cuts top and bottom, the inner one cuts the sides. */
.swatch__pink,
.swatch__cloth {
  position: absolute;
  inset: 0;
  display: block;
}

/* The teeth start from a corner rather than the middle of each edge, so no
   half-cut tooth leaves a hairline sticking out of the corners. */
.swatch__pink {
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) left top / var(--tooth) 51% round no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) left bottom / var(--tooth) 51% round no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) left top / var(--tooth) 51% round no-repeat,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) left bottom / var(--tooth) 51% round no-repeat;
}

.swatch__cloth {
  -webkit-mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left top / 51% var(--tooth) no-repeat round,
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right top / 51% var(--tooth) no-repeat round;
  mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left top / 51% var(--tooth) no-repeat round,
    conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) right top / 51% var(--tooth) no-repeat round;
  display: grid;
  place-items: center;
}

.print {
  display: block;
  padding: 3%;
  background: #fbfaf6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 8px 18px rgba(0, 0, 0, 0.14);
}

.print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---------- Cloth ---------- */

.cloth {
  background-color: #2c6b55;
}

/* Twill weave and fibre grain sit over every fabric. */
.cloth::before,
.cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cloth::before {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px);
}

.cloth::after {
  background: var(--noise);
  opacity: 0.32;
  mix-blend-mode: multiply;
}

.cloth--image {
  background-size: cover;
  background-position: center;
}

.cloth--image::before,
.cloth--image::after {
  display: none;
}

.cloth--linen {
  background-color: #2c6b55;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 5px);
}

.cloth--tartan {
  background-color: #3f7fb4;
  background-image: repeating-linear-gradient(0deg, transparent 0 96px, rgba(255, 255, 255, 0.85) 96px 98px, transparent 98px 120px),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255, 255, 255, 0.85) 96px 98px, transparent 98px 120px),
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(244, 208, 84, 0.8) 20px 52px, transparent 52px 66px, rgba(16, 44, 92, 0.75) 66px 86px, transparent 86px 120px),
    repeating-linear-gradient(90deg, transparent 0 20px, rgba(244, 208, 84, 0.8) 20px 52px, transparent 52px 66px, rgba(16, 44, 92, 0.75) 66px 86px, transparent 86px 120px);
}

.cloth--pinstripe {
  background-color: #1c2740;
  background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(240, 236, 220, 0.75) 22px 23.5px);
}

.cloth--chalkstripe {
  background-color: #3a3b3f;
  background-image: repeating-linear-gradient(90deg, transparent 0 34px, rgba(240, 236, 220, 0.4) 34px 37px);
}

.cloth--herringbone {
  background-color: #8d8a84;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12L12 0M0 6L6 0M6 12L12 6M12 0L24 12M18 0L24 6M12 6L18 12' stroke='%232f2d2a' stroke-width='2.2' fill='none'/%3E%3C/svg%3E");
  background-size: 28px 14px;
}

.cloth--houndstooth {
  background-color: #efe8d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%231b1a18' d='M0 0h4v4H0zM4 0h2L4 2zM8 0v2L6 4H4zM0 4h2L0 6zM4 4v2L2 8H0z'/%3E%3C/svg%3E");
  background-size: 30px 30px;
}

.cloth--gingham {
  background-color: #f6efe4;
  background-image: repeating-linear-gradient(0deg, rgba(190, 38, 46, 0.6) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, rgba(190, 38, 46, 0.6) 0 22px, transparent 22px 44px);
}

.cloth--corduroy {
  background-color: #c4912b;
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0 2px, rgba(255, 255, 255, 0.16) 2px 5px, transparent 5px 9px, rgba(0, 0, 0, 0.12) 9px 11px);
}

.cloth--corduroy::before {
  display: none;
}

.cloth--windowpane {
  background-color: #b98f5f;
  background-image: repeating-linear-gradient(0deg, transparent 0 62px, rgba(70, 28, 20, 0.75) 62px 64px),
    repeating-linear-gradient(90deg, transparent 0 62px, rgba(70, 28, 20, 0.75) 62px 64px),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(255, 255, 255, 0.22) 30px 31px, transparent 31px 64px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255, 255, 255, 0.22) 30px 31px, transparent 31px 64px);
}

.cloth--denim {
  background-color: #2d4f7c;
  background-image: repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.16) 0 1.5px, transparent 1.5px 4px);
}

.cloth--tweed {
  background-color: #6b5a44;
  background-image: radial-gradient(rgba(214, 130, 60, 0.7) 1px, transparent 1.6px), radial-gradient(rgba(240, 232, 210, 0.6) 1px, transparent 1.6px),
    radial-gradient(rgba(40, 70, 60, 0.8) 1.2px, transparent 1.8px);
  background-size: 17px 19px, 23px 13px, 11px 29px;
  background-position: 0 0, 7px 5px, 3px 11px;
}

.cloth--polka {
  background-color: #6d1f2c;
  background-image: radial-gradient(#f1e7d0 4px, transparent 4.6px), radial-gradient(#f1e7d0 4px, transparent 4.6px);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
}

/* ---------- Woven label ---------- */

.label {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 46%;
  max-width: 76%;
  padding: 12px 20px 11px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 3px), var(--label);
  color: #1d2a24;
  text-align: center;
  outline: 1.5px dashed rgba(29, 42, 36, 0.55);
  outline-offset: -6px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.label__no,
.label__maker {
  font-size: 0.56rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.3;
}

.label__name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Project page ---------- */

/* Read out by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The order ticket, pinned through its top to the middle of the swatch,
   covering most of it so only the cloth's edges show. */
.docket {
  display: grid;
  grid-template-columns: min(860px, 100%);
  justify-content: center;
  padding-top: 12px;
}

.docket > * {
  grid-area: 1 / 1;
}

.swatch--pinned {
  transform: rotate(-2deg);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.28));
}

.docket .ticket {
  z-index: 1;
  justify-self: center;
  align-self: start;
  width: 76%;
  margin-top: 6%;
  transform: rotate(1.5deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 12px 26px rgba(0, 0, 0, 0.22);
}

.pin {
  position: absolute;
  top: 9px;
  left: calc(50% - 9px);
  z-index: 4;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb27a, var(--orange) 55%, #8f4410);
  box-shadow: 3px 6px 5px rgba(0, 0, 0, 0.4);
}

.ticket {
  position: relative;
  padding: 34px 32px 30px;
  background: var(--slip);
  font-family: var(--mono);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  border-top: 6px solid var(--orange);
}

.ticket__no {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.ticket__title {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  margin-bottom: 22px;
}

.ticket__rows {
  margin: 0;
}

.ticket__rows div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(30, 27, 23, 0.35);
  font-size: 0.92rem;
}

.ticket__rows dt {
  flex: 0 0 8.5em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.ticket__rows dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gallery {
  display: grid;
  gap: 28px;
  margin-top: 72px;
}

.media {
  margin: 0;
}

.media img,
.media video {
  width: 100%;
  height: auto;
  background: rgba(30, 27, 23, 0.06);
}

.media--embed {
  aspect-ratio: 16 / 9;
}

.media--embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.media--empty {
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--mono);
  color: var(--ink-soft);
  background: transparent;
  border: 2px dashed var(--thread);
}

.rack {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: end;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 2px dashed var(--thread);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
}

.rack a {
  text-decoration: none;
}

.rack a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.rack a:last-child {
  text-align: right;
}

.rack small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

.rack__all {
  font-size: 1.05rem;
}

.lost {
  text-align: center;
  padding: 80px 0;
}

.lost h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: 20px;
}

/* ---------- Case study ---------- */

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-style: normal;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

/* The insight and the proposition, side by side, ahead of the order ticket. */
.premise {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 40px clamp(28px, 5vw, 72px);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.premise p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 2.8vw, 2.7rem);
  line-height: 1.14;
  text-wrap: balance;
}

.feature {
  margin-top: clamp(40px, 5vw, 64px);
}

/* A logo laid out on a coloured backdrop. */
.stage {
  display: grid;
  place-items: center;
  aspect-ratio: 21 / 9;
  background: var(--ink);
}

.stage img {
  width: min(66%, 900px);
  background: none;
}

.piece {
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: 40px;
  border-top: 2px dashed var(--thread);
}

/* A collection of separate ideas: stitching between every section, pictures
   included, and more room around each one. */
.project--separate .piece,
.project--separate .feature {
  margin-top: clamp(72px, 9vw, 128px);
  padding-top: clamp(56px, 7vw, 104px);
  border-top: 2px dashed var(--thread);
}

.project--separate .rack {
  margin-top: clamp(72px, 9vw, 128px);
}

/* Under a page title, the first section's stitching sits closer. */
.page-title + .piece,
.page-title + .feature {
  margin-top: clamp(40px, 5vw, 72px);
}

/* With nothing above it, the first section needs no stitching to set it apart. */
.visually-hidden:first-child + .piece,
.visually-hidden:first-child + .feature {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.piece__part {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px clamp(28px, 5vw, 72px);
  align-items: start;
}

.piece__part h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  max-width: 11em;
}

.piece__part h2.eyebrow {
  font-size: 0.8rem;
  max-width: none;
  margin-bottom: 0;
}

.piece__body {
  padding-top: 6px;
}

.piece__body p {
  margin: 0;
  max-width: 34em;
}

.piece__body p + p {
  margin-top: 1em;
}

.piece__text {
  display: grid;
  gap: 40px;
}

.piece__media {
  display: grid;
  gap: 28px;
  margin-top: 44px;
}

/* Cut-outs, such as a phone on a clear background, sit straight on the paper. */
.media--plain img {
  background: none;
}

.steps {
  list-style: none;
  counter-reset: step;
  max-width: 34em;
  margin: 18px 0 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.92rem;
}

.steps li {
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(30, 27, 23, 0.35);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--orange-ink);
}

.media figcaption {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Pictures side by side, each as wide as it needs to be for the heights to match. */
.piece--row .piece__media,
.piece--pair .piece__media {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.piece--row .media,
.piece--pair .media {
  flex: var(--r, 1) 1 0;
  min-width: 0;
}

/* The first picture at full width, the rest side by side underneath. */
.piece--lead .piece__media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.piece--lead .media:first-child {
  grid-column: 1 / -1;
}

/* Two landscape posters with a portrait one standing next to them. */
.piece--posters .piece__media {
  grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr);
  gap: 20px;
}

.piece--posters .media:nth-child(3) {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
}

.piece--posters .media:nth-child(3) img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* Words on one side, the picture on the other. */
.piece--side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 32px clamp(28px, 5vw, 72px);
  align-items: center;
}

.piece--portrait {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.piece--flip {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.piece--portrait.piece--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.piece--flip .piece__text {
  order: 2;
}

.piece--side .piece__part {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.piece--side .piece__part + .piece__part {
  padding-top: 36px;
  border-top: 1px dashed rgba(30, 27, 23, 0.35);
}

.piece--side .piece__media {
  margin-top: 0;
}

/* Keep a phone on screen in one go rather than taller than the window. */
.piece--side .media--plain img {
  width: auto;
  max-height: 84vh;
  margin: 0 auto;
}

/* One picture laid over another. */
.overlay__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}

.overlay__frame img {
  background: none;
}

.media .overlay__base {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

.media .overlay__over {
  position: relative;
  width: 56%;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}

/* A TV with a button that works. */
.press {
  --button: clamp(84px, 9vw, 128px);
}

.press__screen {
  display: grid;
  padding: clamp(6px, 1vw, 14px);
  background: #0b0b0d;
  border-radius: clamp(6px, 0.9vw, 12px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

.press__screen img {
  grid-area: 1 / 1;
  border-radius: 2px;
  background: none;
}

.press__on {
  opacity: 0;
  transition: opacity 0.35s;
}

.press.is-on .press__on {
  opacity: 1;
}

.media .press__bar {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  margin-top: calc(var(--button) * -0.4);
  padding-left: 4%;
  font-size: 0.92rem;
  color: var(--ink);
}

/* The button stays up against the screen; a long hint grows the bar downwards
   instead of creeping up over the TV. */
.press__button {
  flex: none;
  align-self: flex-start;
  width: var(--button);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, 0.4));
  transition: transform 0.12s, filter 0.12s;
  animation: nudge 2.6s 1.2s ease-in-out infinite;
}

.press__button img {
  width: 100%;
  background: none;
}

.press__button:hover {
  transform: translateY(-3px);
}

.press__button:active,
.press.is-on .press__button {
  transform: translateY(4px) scale(0.95);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
  animation: none;
}

.press__hint {
  margin-top: calc(var(--button) * 0.4 + 10px);
  padding-bottom: 0.9em;
  max-width: 36em;
}

@keyframes nudge {
  0%,
  78%,
  100% {
    transform: none;
  }
  84% {
    transform: translateY(-7px) rotate(-5deg);
  }
  92% {
    transform: translateY(1px) rotate(3deg);
  }
}

/* A strip of cloth with artwork laid along it. */
.band {
  position: relative;
  height: clamp(100px, 14vw, 204px);
  margin-top: clamp(56px, 7vw, 96px);
  transform: rotate(-0.7deg);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.22));
}

.band__cloth {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 4%;
  background: var(--band, var(--ink));
}

.band__cloth img {
  height: 66%;
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
}

/* ---------- About ---------- */

.page-title {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  max-width: 12em;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.about__text p {
  max-width: 34em;
  margin: 22px 0 0;
}

.about__text .about__lede {
  margin-top: 30px;
  font-size: 1.25rem;
}

/* Each line starts with one of the logo's orange measuring marks. */
.pursuits {
  list-style: none;
  max-width: 34em;
  margin: 28px 0 0;
  padding: 0;
}

.pursuits li {
  position: relative;
  padding: 14px 0 14px 44px;
  border-top: 1px dashed rgba(30, 27, 23, 0.35);
}

.pursuits li:last-child {
  border-bottom: 1px dashed rgba(30, 27, 23, 0.35);
}

.pursuits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(14px + 0.45em);
  width: 30px;
  height: 11px;
  background: var(--ibeam-flat) center / contain no-repeat;
}

.pursuits strong {
  font-family: var(--serif);
  font-weight: 700;
}

.about__photos {
  position: sticky;
  top: 32px;
  margin-top: 12px;
}

.about__photos .print {
  margin: 0;
  padding: 3.5%;
  transform: rotate(1.6deg);
}

.carousel__slide[hidden] {
  display: none;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.carousel__button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--slip);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.carousel__button:hover {
  border-color: var(--ink);
}

/* In a case study, every photo is cropped to the same frame. */
.carousel--framed .carousel__slide {
  margin: 0;
}

.carousel--framed img {
  aspect-ratio: var(--frame, 4 / 3);
  object-fit: cover;
}

/* A small picture, such as a publication's logo. */
.media--small {
  max-width: 280px;
}

.media a {
  display: block;
}

.fitting {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 32px clamp(32px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: 48px;
  border-top: 2px dashed var(--thread);
}

.fitting__question {
  margin: 0;
  max-width: 18em;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.16;
  text-wrap: balance;
}

.fitting__card {
  transform: rotate(-1deg);
}

/* ---------- Holding page ---------- */

.holding {
  text-align: center;
  padding: 40px 0 20px;
}

.holding .page-title {
  margin: 0 auto 20px;
}

.holding p {
  max-width: 30em;
  margin: 0 auto;
}

.holding .swatch {
  width: min(420px, 100%);
  margin: 48px auto 0;
  transform: rotate(-3deg);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.24));
}

/* ---------- Footer ---------- */

.tape {
  height: 34px;
  background: linear-gradient(90deg, #1a1a1a 0 1.5px, transparent 1.5px) 0 0 / 60px 20px repeat-x,
    linear-gradient(90deg, #1a1a1a 0 1px, transparent 1px) 0 0 / 12px 10px repeat-x, var(--tape);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  padding: 44px var(--gutter) 52px;
}

.footer h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 10px;
}

.footer__small {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: right;
}

/* The credit for whoever built the site, in the middle of the footer. */
.footer__credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  justify-self: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  text-decoration: none;
}

.footer__credit img {
  flex: none;
  width: 40px;
  height: 40px;
}

.footer__credit:hover span,
.footer__credit:focus-visible span {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Small screens ---------- */

@media (max-width: 980px) {
  .swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about,
  .fitting {
    grid-template-columns: 1fr;
  }

  .about__photos {
    position: static;
    width: min(460px, 100%);
    margin: 8px auto 0;
  }

  .piece--side,
  .piece--side.piece--flip,
  .piece__part {
    grid-template-columns: minmax(0, 1fr);
  }

  .piece--flip .piece__text {
    order: 0;
  }

  .piece--portrait .piece__media {
    max-width: 520px;
  }

  .piece--side .media--plain img {
    max-height: 72vh;
  }

  .footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .footer__credit {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 24px;
    border-top: 1px dashed rgba(30, 27, 23, 0.35);
    justify-self: stretch;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .masthead {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 18px;
  }

  .masthead__logo,
  .masthead__nav {
    grid-column: 1;
    justify-self: center;
  }

  .premise {
    grid-auto-flow: row;
  }

  .stage {
    aspect-ratio: 16 / 9;
  }

  .stage img {
    width: 82%;
  }

  .piece--row .piece__media {
    display: grid;
  }

  .piece--tall .piece__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .piece--lead .piece__media {
    grid-template-columns: minmax(0, 1fr);
  }

  .overlay__frame {
    aspect-ratio: 4 / 3;
  }

  .media .overlay__over {
    width: 84%;
  }

  .piece--posters .piece__media {
    grid-template-columns: minmax(0, 1fr);
  }

  .piece--posters .media:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }

  .piece--posters .media:nth-child(3) img {
    position: static;
    height: auto;
  }
}

@media (max-width: 600px) {
  body {
    font-size: 17px;
  }

  main {
    padding-top: 28px;
    padding-bottom: 64px;
  }

  .swatches {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    max-width: 420px;
  }

  .sample__caption {
    font-size: 0.8rem;
  }

  .rack {
    grid-template-columns: 1fr 1fr;
    font-size: 1.2rem;
  }

  .rack__all {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: center;
  }

  .ticket {
    padding: 28px 22px 24px;
  }

  .docket .ticket {
    width: 88%;
  }

  .ticket__rows dt {
    flex-basis: 7em;
  }

  .footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__small {
    text-align: left;
  }

  .footer__credit {
    grid-row: 3;
  }
}

/* The narrowest phones: keep Work, About and Play Adlandopoly on one line. */
@media (max-width: 400px) {
  .masthead__nav a {
    font-size: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}