/* ==========================================================================
   Tanya Ludvigson — portfolio
   Design notes:
   - Warm paper + near-black ink. The work is loud, so the frame stays quiet.
   - Grotesque-led headings (Archivo), serif italic used as punctuation only.
   - Cards are image on top, info underneath. Never text over the artwork.
   - 8px spacing scale, 48px minimum touch targets, 16px minimum body size.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --paper:        #f4f1ea;
  --paper-sunk:   #ece7dc;
  --paper-deep:   #17150f;
  --ink:          #17150f;
  --ink-soft:     #5c574a;
  /* Contrast on --paper: ink 16.2:1, ink-soft 6.4:1, ink-faint 4.9:1, accent 5.0:1.
     ink-faint carries the small uppercase labels, so it has to clear 4.5:1. */
  --ink-faint:    #6e6857;
  --rule:         #d8d2c4;   /* decorative hairlines only */
  --rule-strong:  #b8b0a0;
  --field:        #8f8570;   /* form control borders, 3.2:1 as a UI component */
  --accent:       #b4402a;
  --accent-deep:  #8e3220;
  --on-deep:      #f4f1ea;
  --on-deep-soft: #a9a294;

  --font-ui:     "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-accent: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* 8px scale */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s5: 48px;  --s6: 64px;  --s7: 96px;  --s8: 128px;

  --wrap:      1240px;
  --wrap-text: 1100px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* clip, not hidden: overflow-x:hidden on the root breaks #anchor scrolling. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* Anchored cards land below the sticky header rather than under it. */
.work-card[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Keeps the footer at the bottom on short pages (thanks, 404). */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
body > .site-foot { flex: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout helpers ------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s3); }
.wrap--text { max-width: var(--wrap-text); }
.section { padding-block: var(--s7); }
.section--tight { padding-block: var(--s6); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-deep);
  padding: var(--s2) var(--s3); text-decoration: none;
}
.skip:focus { left: var(--s2); top: var(--s2); }

/* Small letterspaced label used above section headings */
.kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
}
.kicker--accent { color: var(--accent); }

/* Serif italic accent, used one word at a time */
.serif { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Label available to screen readers but not shown, for the icon-only buttons. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.site-head.is-stuck { border-bottom-color: var(--rule); }
.site-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  min-height: 72px;
}
.wordmark {
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 48px;
}
.wordmark span { color: var(--accent); }

.nav { display: flex; align-items: center; gap: var(--s1); }
.nav a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 48px; padding-inline: var(--s2);
  font-size: 15px; font-weight: 500;
  text-decoration: none; color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: var(--s2); right: var(--s2); bottom: 18px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

.nav__cta {
  display: inline-flex; align-items: center;
  min-height: 48px; padding-inline: var(--s3);
  margin-left: var(--s2);
  background: var(--ink); color: var(--on-deep);
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background 0.2s var(--ease);
}
.nav__cta:hover { background: var(--accent); }
.nav__cta::after { display: none; }
/* On the contact page the CTA carries aria-current, whose dark ink colour would
   otherwise render the label invisible against the dark button. */
.nav a.nav__cta,
.nav a.nav__cta[aria-current="page"] { color: var(--on-deep); }
.nav a.nav__cta[aria-current="page"] { background: var(--accent); }

/* The CTA carries two labels so it can stay in the header at every width:
   the full phrase on desktop, a shorter one where space is tight. */
.nav__cta-short { display: none; }

/* --- Menu toggle (mobile only) -------------------------------------------- */
/* Drawn in CSS rather than set as an icon font or emoji. */
.nav-toggle {
  display: none;
  width: 48px; height: 48px;
  padding: 0; margin-left: var(--s1);
  background: none; border: 0; cursor: pointer;
  position: relative;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ""; position: absolute; left: 13px;
  width: 22px; height: 2px; background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.nav-toggle__bars { top: 23px; }
.nav-toggle__bars::before { top: -7px; left: 0; }
.nav-toggle__bars::after  { top: 7px;  left: 0; }

/* --- Slide-out menu ------------------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--paper-deep); color: var(--on-deep);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.42s var(--ease), visibility 0s linear 0.42s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.42s var(--ease), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .menu { transition: visibility 0s linear 0.01s; }
  .menu.is-open { transition: visibility 0s linear 0s; }
}
.menu__inner {
  min-height: 100%;
  display: flex; flex-direction: column;
  padding: var(--s3) var(--s3) var(--s5);
}
.menu__head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; margin-bottom: var(--s6);
}
.menu__wordmark {
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--on-deep); text-decoration: none;
}
.menu__wordmark span { color: var(--accent); }
.menu__close {
  width: 48px; height: 48px; margin-right: -12px;
  background: none; border: 0; cursor: pointer; position: relative;
}
.menu__close::before, .menu__close::after {
  content: ""; position: absolute; top: 23px; left: 13px;
  width: 22px; height: 2px; background: var(--on-deep);
}
.menu__close::before { transform: rotate(45deg); }
.menu__close::after  { transform: rotate(-45deg); }

.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  display: flex; align-items: center;
  min-height: 64px;                 /* generous, and far apart */
  padding-block: var(--s1);
  border-bottom: 1px solid rgba(244, 241, 234, 0.14);
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  font-weight: 600; letter-spacing: -0.035em;
  color: var(--on-deep); text-decoration: none;
}
.menu__nav a[aria-current="page"] { color: var(--accent); }
.menu__nav a .menu__num {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--on-deep-soft); margin-right: var(--s3);
  font-variant-numeric: tabular-nums;
}

.menu__foot { margin-top: auto; padding-top: var(--s6); }
.menu__foot dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--on-deep-soft); margin-bottom: 2px;
}
.menu__foot dd { margin: 0 0 var(--s3); }
.menu__foot a {
  color: var(--on-deep); text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, 0.3);
  display: inline-flex; align-items: center; min-height: 44px;
}
body.menu-open { overflow: hidden; }

@media (max-width: 720px) {
  /* The inline text links go entirely. Cramming Home, Work and About beside a
     CTA left roughly 6px between tap targets at 320px. The burger opens a panel
     where every item is 64px tall, and the CTA stays in the header so contact
     is still one tap without opening anything. */
  .nav a:not(.nav__cta) { display: none; }
  .nav-toggle { display: inline-block; }
  .nav__cta-long { display: none; }
  .nav__cta-short { display: inline; }
  /* Outlined rather than a solid black block. A filled button reads as heavy
     beside the wordmark at this size, and the pill matches the filter chips
     already used on the work page. */
  .nav a.nav__cta {
    margin-left: 0;
    padding-inline: var(--s3);
    min-height: 44px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--field);
    border-radius: 999px;
    font-weight: 500;
  }
  .nav a.nav__cta:hover,
  .nav a.nav__cta:active { background: var(--ink); color: var(--on-deep); border-color: var(--ink); }
  .nav a.nav__cta[aria-current="page"] {
    background: transparent; color: var(--accent); border-color: var(--accent);
  }
  .site-head__inner { min-height: 64px; gap: var(--s2); }
  .wordmark { font-size: 15px; }
}
@media (min-width: 721px) {
  .menu { display: none; }
}
@media (max-width: 380px) {
  .nav a.nav__cta { padding-inline: var(--s2); font-size: 14px; }
  .wordmark { font-size: 14px; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-block: var(--s7) var(--s6); }
.hero__kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 var(--s4);
}
/* Keep the role line on one line rather than orphaning "OP" on narrow screens. */
@media (max-width: 480px) {
  .hero__kicker { font-size: 10px; letter-spacing: 0.14em; }
}

/* Tighten the hero on phones so the contact details clear the first screen.
   At the desktop spacing the email address fell just below an 812px fold,
   which put the one thing a visitor needs out of sight on arrival. */
@media (max-width: 720px) {
  .hero { padding-block: var(--s3) var(--s5); }
  .hero__kicker { margin-bottom: var(--s2); }
  .hero__body { margin-top: var(--s3); padding-top: var(--s3); gap: var(--s3); }
  .hero__meta { gap: 12px; }
  /* Browser chrome eats 120px or more of a phone's stated height, so the
     usable first screen is nearer 660px than 812px. The contact details have
     to clear that, not the spec sheet number. */
  .hero__lede { font-size: 1.1rem; line-height: 1.45; }
}
.hero__title {
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
}
.hero__title .serif { font-size: 0.92em; }
.hero__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.hero__lede {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 34ch;
}
.hero__meta { display: grid; gap: var(--s3); align-content: start; }
.hero__meta dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 2px;
}
.hero__meta dd { margin: 0; font-size: 16px; color: var(--ink); }
.hero__meta a { text-decoration: none; border-bottom: 1px solid var(--field); }
.hero__meta a:hover { border-bottom-color: var(--accent); color: var(--accent); }

@media (min-width: 860px) {
  .hero__body { grid-template-columns: 1.4fr 1fr; gap: var(--s6); }
}

/* --- Section heading ------------------------------------------------------ */
.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s5);
}
.sec-head h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.sec-head__note { font-size: 15px; color: var(--ink-soft); }
.sec-head__note a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; border-bottom: 1px solid var(--field);
}
.sec-head__note a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Work grid ------------------------------------------------------------ */
/* Asymmetric 12-column rhythm so the grid does not read as a uniform template */
/* Single column on mobile. The 12-track grid only exists from 760px up:
   below that, 11 column gaps (352px) are wider than the container itself,
   which forces every card to overflow the wrapper. */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 760px) {
  .work-grid { grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--s4); }
  .work-card { grid-column: span 6; }
  .work-card--wide  { grid-column: span 7; }
  .work-card--nrw   { grid-column: span 5; }
  .work-card--full  { grid-column: span 12; }
}

.work-card a {
  display: block; text-decoration: none;
  outline-offset: 6px;
}
/* Image first, always. Title and meta sit underneath, never over the artwork. */
.work-card__frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-sunk);
  aspect-ratio: 2 / 1;
}
.work-card--full .work-card__frame { aspect-ratio: 5 / 2; }

/* Every paired row is a span-7 beside a span-5. With one shared aspect ratio
   the wider card is proportionally taller, so the two captions sit at
   different heights and the asymmetry reads as a mistake rather than a
   decision. The narrow card gets its own ratio, tuned so both frames resolve
   to the same height and the captions land on one line. */
@media (min-width: 760px) {
  .work-card--nrw .work-card__frame { aspect-ratio: 1.4 / 1; }
}
.work-card__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.7s var(--ease);
}
.work-card a:hover .work-card__frame img,
.work-card a:focus-visible .work-card__frame img { transform: scale(1.04); }

.work-card__info {
  display: flex; align-items: baseline; gap: var(--s2);
  padding-top: var(--s2);
  margin-top: var(--s2);
  border-top: 1px solid var(--rule);
  position: relative;
}
.work-card__info::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.work-card a:hover .work-card__info::after,
.work-card a:focus-visible .work-card__info::after { transform: scaleX(1); }

.work-card__num {
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
  flex: none; padding-top: 3px;
}
.work-card__text { flex: 1 1 auto; min-width: 0; }
/* These are spans on the home page and h2s on the work page, so force block. */
.work-card__title {
  display: block;
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.work-card__meta {
  display: block;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 6px;
}
/* Tanya's own write-up for each project, off the old gallery hover states. */
.work-card__desc {
  margin-top: var(--s2);
  max-width: 58ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.work-card--full .work-card__desc { max-width: 68ch; }
.work-card__meta .dot { color: var(--rule-strong); padding-inline: 6px; }

/* --- Filters -------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--s1);
  margin-bottom: var(--s5);
}
.filters button {
  min-height: 48px; padding-inline: var(--s3);
  background: transparent;
  border: 1px solid var(--field);
  border-radius: 999px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.filters button:hover { border-color: var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--on-deep);
}
.work-card[hidden] { display: none; }

/* --- Prose ---------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: var(--s3);
}
.prose p:last-child { margin-bottom: 0; }
.prose--lede p:first-child { font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.45; }

/* --- Services ------------------------------------------------------------- */
.services { border-top: 1px solid var(--rule); }
.services li {
  display: flex; align-items: baseline; gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.35s var(--ease), color 0.2s var(--ease);
}
.services li:hover { padding-left: var(--s2); color: var(--accent); }
.services__num {
  font-size: 12px; font-weight: 600; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; flex: none; width: 32px;
}
.services li:hover .services__num { color: var(--accent); }
.services__name { font-size: clamp(1.2rem, 2.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; }

@media (min-width: 760px) {
  .services--split {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6);
    border-top: 0;
  }
  .services--split li:nth-child(-n+4) { border-top: 1px solid var(--rule); }
  .services--split li:nth-child(n+5) { border-top: 1px solid var(--rule); }
}

/* --- Pull quote ----------------------------------------------------------- */
.pull {
  background: var(--paper-deep); color: var(--on-deep);
}
.pull__inner { padding-block: var(--s7); }
.pull blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.035em;
  font-weight: 500;
  max-width: 22ch;
  text-wrap: balance;
}
.pull blockquote .serif { color: var(--accent); font-size: 1.05em; }
.pull__cite {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  font-size: 14px; color: var(--on-deep-soft);
  max-width: 46ch;
}

/* --- Toolkit chips -------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chips li {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 10px var(--s3);
  font-size: 15px;
  color: var(--ink-soft);
}

/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--rule); max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 48px; padding-block: var(--s3);
  cursor: pointer; list-style: none;
  font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
/* Icon drawn in CSS, no emoji */
.faq summary::after {
  content: ""; flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/14px 1.5px no-repeat,
    linear-gradient(var(--ink-soft), var(--ink-soft)) center/1.5px 14px no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
/* The first FAQ stays open for crawlers. Recolouring it made a deliberate state
   look like a mistake next to four identical closed siblings, so only the icon
   rotation now signals open. */
.faq details[open] summary::after { color: var(--accent); }
.faq__answer { padding: 0 0 var(--s3); max-width: 68ch; }
.faq__answer p { color: var(--ink-soft); margin-bottom: var(--s2); }
.faq__answer p:last-child { margin-bottom: 0; }

/* --- Contact -------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); } }

.field { display: block; margin-bottom: var(--s3); }
.field span {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--s1);
}
.field input, .field textarea, .field select {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s2);
  font-family: inherit; font-size: 16px; /* 16px stops iOS zoom on focus */
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--field);
  border-radius: 0;
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
/* Browser-default placeholder grey measures 4.08:1 on this paper, under the 4.5:1
   minimum. ink-soft gives 6.4:1. */
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); outline: none;
}
/* Honeypot: off-screen rather than display:none, since some bots skip hidden fields. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form-note {
  padding: var(--s2);
  margin-bottom: var(--s3);
  border-left: 3px solid var(--accent);
  background: var(--paper-sunk);
  font-size: 15px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding-inline: var(--s4);
  background: var(--ink); color: var(--on-deep);
  border: 1px solid var(--ink);
  font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--field); }
.btn--ghost:hover { background: var(--ink); color: var(--on-deep); border-color: var(--ink); }

.detail-list { display: grid; gap: var(--s4); }
.detail-list dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: var(--s1);
}
.detail-list dd { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: -0.02em; }
.detail-list a { text-decoration: none; border-bottom: 1px solid var(--field); }
.detail-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- CTA band ------------------------------------------------------------- */
.cta-band { background: var(--paper-deep); color: var(--on-deep); }
.cta-band__inner {
  padding-block: var(--s7);
  display: grid; gap: var(--s4);
}
.cta-band h2 { font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.04em; text-wrap: balance; }
.cta-band h2 .serif { color: var(--accent); }
.cta-band p { color: var(--on-deep-soft); max-width: 46ch; font-size: 1.05rem; }
.cta-band .btn { background: var(--on-deep); color: var(--ink); border-color: var(--on-deep); justify-self: start; }
.cta-band .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-deep); }

/* --- Footer --------------------------------------------------------------- */
/* Light, not dark. The CTA band directly above is already dark, and two dark
   bands running together read as the page simply losing its background rather
   than as two deliberate beats. Keeping the footer on paper also lifts the
   link hover off a dark ground, where the accent only reached 3.2:1. */
.site-foot { background: var(--paper-sunk); color: var(--ink-soft); font-size: 14px; }
.site-foot__inner {
  padding-block: var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s3);
  align-items: center; justify-content: space-between;
}
.site-foot a {
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-foot a:hover { color: var(--accent); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* --- Reveal on scroll (transform only, no opacity fade) ------------------- */
.reveal { transform: translateY(18px); transition: transform 0.7s var(--ease); }
.reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; } }

/* --- Project pages -------------------------------------------------------- */
/* One project, its campaign images stacked full width. The old Wix site put
   these behind a click and they were the best thing on it. */
.project-hero { padding-block: var(--s6) var(--s4); }
.project-hero .hero__kicker { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.backlink {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.backlink:hover { border-bottom-color: var(--accent); }
.project-title { font-size: clamp(2.4rem, 7vw, 5rem); }
.project-lede {
  margin-top: var(--s4);
  max-width: 62ch;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.project-lede--empty { color: var(--ink-faint); font-style: italic; }

.shots { padding-block: var(--s5) var(--s6); }
.shot { margin: 0 0 var(--s4); background: var(--paper-sunk); }
.shot:last-child { margin-bottom: 0; }
.shot img { width: 100%; height: auto; display: block; }

/* --- Prev / next ---------------------------------------------------------- */
.pager { border-top: 1px solid var(--rule); }
.pager__inner {
  display: flex; align-items: stretch; justify-content: space-between; gap: var(--s3);
}
.pager__link {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 88px; padding-block: var(--s3);
  text-decoration: none; color: var(--ink);
  max-width: 48%;
}
.pager__next { text-align: right; align-items: flex-end; }
.pager__dir {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint);
}
.pager__name {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 600; letter-spacing: -0.03em;
}
.pager__link:hover .pager__name { color: var(--accent); }

@media (max-width: 560px) {
  .pager__name { font-size: 1rem; }
  .pager__link { min-height: 72px; }
}

/* The whole card is one link through to the project page. */
.work-card__link { display: block; text-decoration: none; color: inherit; outline-offset: 6px; }
.work-card__link:hover .work-card__frame img,
.work-card__link:focus-visible .work-card__frame img { transform: scale(1.04); }
.work-card__link:hover .work-card__info::after,
.work-card__link:focus-visible .work-card__info::after { transform: scaleX(1); }

/* Portrait and very tall assets: never upscale past a comfortable reading size.
   A 599x750 poster stretched to the full 1040px column is both soft and taller
   than the screen, which buries the rest of the project. */
.shot--portrait img,
.shot--tall img { width: auto; margin-inline: auto; }
.shot--portrait { background: none; }
.shot--portrait img { max-height: 78vh; }
.shot--tall { background: none; }
.shot--tall img { max-height: 88vh; }
/* The "Work" breadcrumb is a real navigation target, so give it a real one. */
.backlink { display: inline-flex; align-items: center; min-height: 44px; }