/* Gallery wall, set on one grid.
   Spacing: an 8px unit (8 / 16 / 24 / 32 / 48 / 64 / 96 / 128).
   Type: Futura for names, years and titles; Helvetica for reading. Sizes 12 / 14 / 16 / 20 and two display sizes,
   each on a line height that lands on the 8px rhythm.
   Columns: a 208px rail (years, section labels) + 48px gutter; everything else hangs from the 256px line. */
:root {
  --wall: #FFFFFF;
  --ink: #141414;
  --ink-2: #333333;
  --ink-3: #5C5C5A;
  --label: #7A7A76;
  --rule: #E4E4E1;
  --display: Futura, 'Futura PT', 'Jost', 'Century Gothic', sans-serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --rail: 208px; --gutter: 48px;

  --fs-cap: 12px;  --lh-cap: 16px;
  --fs-sm: 14px;   --lh-sm: 20px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-title: 20px; --lh-title: 24px;
  --fs-lead: 20px; --lh-lead: 32px;
  --fs-year: clamp(32px, 3.2vw, 44px);
  --fs-hero: clamp(44px, 7.2vw, 104px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Lock the page to vertical scrolling: nothing may push it sideways, and iOS's sideways rubber-band is switched off. */
html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { touch-action: pan-y pinch-zoom; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-kerning: normal;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
p { margin: 0; text-wrap: pretty; hanging-punctuation: first; }
a { color: var(--ink); }
a:hover { color: var(--ink-3); }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
img { display: block; max-width: 100%; height: auto; }

/* Display lines start exactly at the cap height, so years, titles and pictures share a top edge. */
.hero h1, .year, .label .title, .kicker { text-box: trim-start cap alphabetic; }

.wrap { max-width: 1344px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 64px); }

/* The shared two-column grid: rail + content. */
.grid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); }

/* Header */
.top {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  justify-content: space-between; align-items: center;
  padding-block: var(--s4);
}
.mark {
  display: inline-flex; align-items: center; gap: var(--s2);
  text-decoration: none; font-family: var(--display); font-weight: 500;
  font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.2em; text-transform: uppercase;
  padding-block: var(--s1);
}
.mark img { width: 32px; height: auto; }
/* Rollover: the name gives way to the phone number in the same face and spacing; a click dials.
   On touch screens, where there is no hover, the number sits quietly beneath the name. */
.mark-text { display: grid; }
.mark-name, .mark-phone { grid-area: 1 / 1; transition: opacity .25s ease; }
.mark-phone { opacity: 0; }
.mark:hover .mark-name, .mark:focus-visible .mark-name { opacity: 0; }
.mark:hover .mark-phone, .mark:focus-visible .mark-phone { opacity: 1; }
.mark:hover { color: var(--ink); }
@media (hover: none) {
  .mark-name, .mark-phone { grid-area: auto; opacity: 1; }
  .mark-phone { font-size: 10px; line-height: 16px; letter-spacing: 0.16em; color: var(--label); }
}
@media (prefers-reduced-motion: reduce) { .mark-name, .mark-phone { transition: none; } }
.top nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.top nav a { text-decoration: none; color: var(--ink-3); padding-block: 12px; }
.top nav a:hover { color: var(--ink); }

/* Opening: headline across the page, the line beneath it hangs from the content column. */
.hero { padding-block: clamp(96px, 15vw, 224px) var(--s16); row-gap: var(--s6); }
.hero h1 {
  grid-column: 1 / -1; margin: 0; max-width: 12ch;
  font-family: var(--display); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1; letter-spacing: -0.02em;
  text-wrap: balance;
}
/* Hand kerning: Futura's apostrophe carries a wide right side; pull the "s" in to it. */
.kern-apos { letter-spacing: -0.07em; }
.hero p { grid-column: 2; max-width: 40rem; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); text-wrap: wrap; }

/* Timeline entries */
.entry { padding-block: var(--s12); border-top: 1px solid var(--rule); align-items: start; }
.entry:last-child { border-bottom: 1px solid var(--rule); }
.year {
  font-family: var(--display); font-weight: 500;
  font-size: var(--fs-year); line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.body { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.plate-md { max-width: 864px; }
.plate-sm { max-width: 640px; }
.plate-xs { max-width: 512px; }
.plate-vw { max-width: 640px; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }

/* Wall label: title and meta read as one unit; the note and links sit one step below. */
.label { display: flex; flex-direction: column; max-width: 36rem; }
.label .title {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: 0;
}
.label .meta { margin-top: var(--s1); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3); }
.label .note { margin-top: var(--s2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.label .credit { margin-top: var(--s1); font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--label); }

/* Section labels in the rail: small museum capitals */
.kicker {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
}

.text { padding-block: var(--s16) var(--s12); }
.essay {
  min-width: 0; max-width: 36rem;
  font-size: var(--fs-lead); line-height: var(--lh-lead);
  display: flex; flex-direction: column; gap: var(--s3);
}

.foot { border-top: 1px solid var(--rule); }
.contact { padding-block: var(--s8) var(--s6); }
.contact-lines { min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); align-items: baseline; font-size: var(--fs-body); }
.contact-lines a { padding-block: 12px; margin-block: -12px; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); padding-block: 0 var(--s6); font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--label); }

/* Linked pieces: the whole plate and label are one link. On hover the picture softens,
   the title underlines and a quiet "Visit" line fades in; on touch screens that line is always shown. */
a.piece { color: inherit; text-decoration: none; }
a.piece img { transition: opacity .25s ease; }
.title { text-decoration: underline transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .25s ease; }
.visit {
  margin-top: var(--s2); align-self: flex-start;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease;
}
a.piece:hover img, a.piece:focus-visible img { opacity: .86; }
a.piece:hover .title, a.piece:focus-visible .title { text-decoration-color: currentColor; }
a.piece:hover .visit, a.piece:focus-visible .visit { opacity: 1; transform: none; }
a.piece:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }
@media (hover: none) { .visit { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { a.piece img, .visit, .title { transition: none; } .visit { transform: none; } }

/* Related links under an entry: a quiet line of names, each its own link. */
.refs {
  grid-column: 2; margin-top: var(--s3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.refs-label {
  font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--label);
}
.refs a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
.refs a:hover { color: var(--ink); text-decoration-color: currentColor; }
.refs a::after { content: " ↗"; color: var(--label); }

/* Tablet: narrower rail */
@media (max-width: 900px) {
  :root { --rail: 120px; --gutter: 32px; }
}
/* Phone: one column. The year and section labels sit above their content; tall pieces hang smaller. */
@media (max-width: 640px) {
  :root { --fs-title: 18px; --fs-lead: 18px; --lh-lead: 28px; --fs-year: 28px; }
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
  .hero p, .refs { grid-column: 1; }
  .refs { margin-top: 0; }
  .top { padding-block: var(--s2); }
  .hero { padding-block: var(--s12) var(--s8); row-gap: var(--s3); }
  .entry { padding-block: var(--s6); }
  .body { gap: var(--s2); }
  .plate-xs { width: 74%; }
  .plate-sq, .plate-sm { width: 100%; }
  .plate-vw { width: 66%; }
  .label, .essay { max-width: 100%; overflow-wrap: break-word; }
  .details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
  .text { padding-block: var(--s12) var(--s8); row-gap: var(--s2); }
  .contact { padding-block: var(--s6) var(--s4); row-gap: var(--s2); }
}

/* ---- Shared by the About, Press and work pages ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.crumbs {
  padding-block: var(--s3) 0; margin: 0;
  font-family: var(--display); font-weight: 500; font-size: 11px; line-height: var(--lh-cap);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--label);
  display: flex; flex-wrap: wrap; gap: 0 var(--s1);
}
.crumbs a { color: var(--label); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.case { padding-block: var(--s8) var(--s12); align-items: start; }
.case-body { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.case-title {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -0.015em;
  text-wrap: balance; text-box: trim-start cap alphabetic;
}
.case-body > .meta { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3); }
.case-figure { margin: 0; display: flex; flex-direction: column; gap: var(--s3); }
.case-figure .credit { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--label); }
.case-text { max-width: 36rem; font-size: var(--fs-lead); line-height: var(--lh-lead); display: flex; flex-direction: column; gap: var(--s3); }
.facts {
  margin: 0; max-width: 40rem; padding-top: var(--s3); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.facts dt {
  font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--label); padding-top: 2px;
}
.facts dd { margin: 0; color: var(--ink-2); }
.case .refs, .about .refs { grid-column: auto; margin-top: 0; }
.refs a.story::after { content: " →"; }
.back { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.back a { color: var(--ink-3); text-decoration: none; }
.back a:hover { color: var(--ink); }

.more { padding-block: var(--s8); border-top: 1px solid var(--rule); align-items: start; }
.more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--s3) var(--s4); }
.more-list a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.more-list .more-year { font-size: var(--fs-cap); line-height: var(--lh-cap); color: var(--label); font-variant-numeric: tabular-nums; }
.more-list .more-title { font-family: var(--display); font-weight: 500; font-size: var(--fs-body); line-height: var(--lh-body); text-decoration: underline transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease; }
.more-list a:hover .more-title { text-decoration-color: currentColor; }

.portrait-small { width: 120px; }

.press { padding-block: var(--s6) var(--s4); border-top: 1px solid var(--rule); align-items: start; }
.press:first-of-type { border-top: 0; }
.press-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); max-width: 44rem; }
.press-list a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.press-src { font-family: var(--display); font-weight: 500; font-size: 11px; line-height: var(--lh-cap); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label); }
.press-title { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.press-list a:hover .press-title { text-decoration-color: currentColor; }
.press-title::after { content: " ↗"; color: var(--label); }

.notfound { padding-block: var(--s16); }

@media (max-width: 640px) {
  .case { padding-block: var(--s6) var(--s8); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd { margin-bottom: var(--s1); }
  .more, .press { padding-block: var(--s6); row-gap: var(--s2); }
}

/* ---- Baseline alignment ----
   Where a rail label sits beside text, the two share a baseline: the year with the entry title,
   section labels with the first line of their text. Where it sits beside a picture, it aligns
   to the picture's top edge instead (the default, set on .entry). */
.entry-text, .text, .contact, .case, .press, .more { align-items: baseline; }
.case.about { align-items: start; }