/* ==========================================================================
   STEPHEN ROH — Independent Horology
   Design system. Grid modernist on eggshell, Playfair for display.
   ========================================================================== */

:root {
  /* Palette ------------------------------------------------------------- */
  --bone:       #F5F3ED;  /* page — eggshell, never pure white */
  --bone-2:     #EDEAE1;  /* secondary panels */
  --bone-3:     #E4E0D4;  /* image wells */
  --ink:        #14110F;  /* primary text */
  --ink-deep:   #0D0B09;  /* footer */
  --grey:       #6E6760;  /* secondary text */
  --brass:      #8A6A3B;  /* rules, marks, ornament */
  --brass-text: #7A5C33;  /* accent at text-safe contrast */
  --brass-lift: #C29A5C;  /* brass on dark grounds, at text-safe contrast */
  --line:       #D7D2C6;
  --line-soft:  #E6E2D8;

  /* Type ---------------------------------------------------------------- */
  --serif:  "Playfair Display", "Iowan Old Style", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* Scale --------------------------------------------------------------- */
  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.14rem + 0.3vw, 1.35rem);
  --step-2:  clamp(1.5rem, 1.38rem + 0.6vw, 1.9rem);
  --step-3:  clamp(2rem, 1.7rem + 1.4vw, 3rem);
  --step-4:  clamp(2.8rem, 1.9rem + 4.4vw, 6.4rem);

  /* Rhythm -------------------------------------------------------------- */
  --gutter: clamp(1.2rem, 3.4vw, 3rem);
  --max: 1440px;
  --section-y: clamp(4rem, 8vw, 7rem);
}

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.68;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

/* Layout primitives -------------------------------------------------------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 54rem; }
/* Article pages run wider than a plain reading column, because the
   section labels sit in a margin beside the text rather than above it. */
.wrap--article { max-width: 74rem; }
.section { padding-block: var(--section-y); border-bottom: 1px solid var(--line); }
.section--parchment { background: var(--bone-2); }
.section:last-of-type { border-bottom: 0; }
.stack > * + * { margin-top: 1.15em; }

/* Section numbering and eyebrows ------------------------------------------ */
.eyebrow {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin: 0;
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.section-head__title {
  font-family: var(--serif);
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-top: 0.5rem;
}
.section-head__note { font-size: var(--step--1); color: var(--grey); max-width: 30rem; }

/* Links -------------------------------------------------------------------- */
.link {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brass-text);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.2em;
  transition: color 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.link:hover { color: var(--ink); }
.link--lead {
  display: inline-block;
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--bone);
  padding: 1.05em 2.2em;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.link--lead:hover { background: var(--brass); border-color: var(--brass); color: var(--bone); }
.link:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brass-text);
  outline-offset: 3px;
}

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bone) 93%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(0.9rem, 1.6vw, 1.3rem);
}
.wordmark { text-decoration: none; display: block; }
.wordmark__name {
  display: block;
  white-space: nowrap;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  letter-spacing: 0.01em;
  line-height: 1;
  text-transform: none;
}
.wordmark__descriptor {
  display: block;
  margin-top: 0.55em;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-text);
}
.nav { display: flex; gap: clamp(1rem, 1.8vw, 2.1rem); align-items: center; }
.nav a {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--grey);
  padding-block: 0.7em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 0.5rem; cursor: pointer;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); font-family: var(--sans);
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0 0 auto; top: var(--nav-top, 70px);
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start;
    gap: 0; padding: var(--gutter) var(--gutter) calc(var(--gutter) * 1.5);
    transform: translateY(-120%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { font-size: 1rem; padding-block: 0.9rem; width: 100%; border-bottom: 1px solid var(--line-soft); }
}

/* ==========================================================================
   Hero — type led, Playfair, asymmetric
   ========================================================================== */
.hero { padding-block: clamp(3.5rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--line); }
.hero__grid { display: block; }
.hero__text { padding: 0; max-width: none; margin: 0; }
.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 0.96;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.hero__descriptor {
  margin-top: 1.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass-text);
}
.hero__rule { display: none; }
.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.3;
  margin-top: 2rem;
  max-width: 20ch;
}
.hero__support { margin-top: 1.3rem; max-width: 36ch; color: var(--grey); }
.hero__media { margin-top: clamp(2.5rem, 5vw, 4rem); }
.hero__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.hero__media .ph { aspect-ratio: 21 / 9; }

/* three-column supporting meta under the headline */
.hero__meta {
  display: grid; gap: 2rem clamp(2rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.hero__meta h2 { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.hero__meta p { margin-top: 0.6rem; font-size: 0.95rem; max-width: 30ch; }

/* ==========================================================================
   Honest placeholders — shown until real photography is uploaded
   ========================================================================== */
.ph {
  position: relative;
  display: grid; place-content: center;
  width: 100%; height: 100%;
  min-height: 12rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(138,106,59,0.05) 11px 12px),
    var(--bone-3);
  border: 1px solid var(--line);
  text-align: center;
  padding: 2rem;
}
.ph__label {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-text);
}
.ph__spec { margin-top: 0.6rem; font-size: 0.72rem; color: #595349; letter-spacing: 0.04em; }
.ph--tall { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 10; }
.ph--square { aspect-ratio: 1; }

/* The `hidden` attribute must win over a component's own display value:
   the category filters set it on rows and cards that are grid and flex. */
[hidden] { display: none !important; }

/* ==========================================================================
   Introduction
   ========================================================================== */
.intro { display: grid; gap: clamp(2rem, 4vw, 4rem); }
@media (min-width: 900px) { .intro { grid-template-columns: 16rem 1fr; } }
.intro__body { max-width: 42rem; }
.intro__body p { font-size: var(--step-1); line-height: 1.78; }
.intro__body p + p { margin-top: 1.3rem; }

/* ==========================================================================
   Featured project
   ========================================================================== */
.feature { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; } }
.feature__model {
  font-family: var(--serif);
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-top: 0.8rem;
}
.feature__year {
  margin-top: 0.8rem;
  font-size: var(--step--1); letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey);
}
.feature__body { margin-top: 1.5rem; color: var(--grey); max-width: 38ch; }
.feature__stage {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.8rem 3rem;
}
.datum { font-size: var(--step--1); }
.datum__k { display: block; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); font-size: 0.7rem; }
.datum__v { font-family: var(--serif); font-size: var(--step-0); }
.feature__cta { margin-top: 2.2rem; }

/* ==========================================================================
   Journal index rows — scales past a handful of entries
   ========================================================================== */
.index { display: grid; }
.irow {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.55rem 1.1rem;
  align-items: start;
  padding: clamp(1.4rem, 2.6vw, 2rem) 0;
  border-top: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 0.25s ease;
}
.index .irow:last-child { border-bottom: 1px solid var(--line); }
.irow:hover { background: var(--bone-2); }

/* The thumbnail is for recognition, not display: small enough that the
   titles still carry the list, large enough to tell two entries apart. */
.irow__thumb { display: block; overflow: hidden; background: var(--bone-3); }
.irow__thumb img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.irow:hover .irow__thumb img { transform: scale(1.04); }
.irow__thumb .ph { min-height: 0; aspect-ratio: 4 / 3; padding: 0.5rem; text-align: center; }
.irow__thumb .ph__label { font-size: 0.5rem; letter-spacing: 0.1em; line-height: 1.4; }
.irow__thumb .ph__spec { display: none; }

@media (max-width: 859px) {
  .irow__thumb { grid-column: 1; grid-row: 1 / span 4; }
  .irow__n, .irow__body, .irow__meta { grid-column: 2; }
  .irow__meta + .irow__meta { margin-top: -0.25rem; }
}
@media (min-width: 860px) {
  .irow { grid-template-columns: 3.5rem 7.5rem 1fr 9rem 8rem; gap: 2rem; }
  .irow--nonum { grid-template-columns: 7.5rem 1fr 9rem 8rem; }
}

.irow__n { display: block; font-family: var(--serif); font-size: 0.95rem; color: var(--brass-text); font-variant-numeric: tabular-nums; }
.irow__body { display: block; }
.irow__t {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.18;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.irow:hover .irow__t { color: var(--brass-text); }
.irow__x { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--grey); max-width: 52ch; }
.irow__meta { font-size: 0.78rem; color: var(--grey); letter-spacing: 0.04em; }

/* ==========================================================================
   Card grids — reviews and other projects
   ========================================================================== */
.grid { display: grid; gap: clamp(2rem, 3.4vw, 3rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card__media { overflow: hidden; background: var(--bone-3); }
.card__media img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.card:hover .card__media img { transform: scale(1.03); }
.card__meta {
  display: flex; gap: 0.75rem; align-items: center;
  margin-top: 1.1rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass-text);
}
.card__meta time { color: var(--grey); letter-spacing: 0.06em; }
.card__meta .dot { width: 3px; height: 3px; background: var(--brass); border-radius: 50%; }
.card__title {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.22;
  margin-top: 0.6rem;
}
.card:hover .card__title { color: var(--brass-text); }
.card__excerpt { margin-top: 0.7rem; color: var(--grey); font-size: 0.93rem; }
.card__no { font-family: var(--serif); font-size: 0.85rem; color: var(--brass-text); }

.review__brand { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-text); }
.review__model { font-family: var(--serif); font-size: var(--step-1); line-height: 1.22; margin-top: 0.4rem; }
.review__disclosure {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
  border: 1px solid var(--line); padding: 0.35em 0.7em;
}

/* ==========================================================================
   About preview
   ========================================================================== */
.about-prev { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 860px) { .about-prev { grid-template-columns: 1fr 1.25fr; } }
.about-prev__quote {
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-2); line-height: 1.38;
}
.about-prev__body { color: var(--grey); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--ink-deep); color: var(--bone-2); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.footer a { color: var(--bone-2); }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer .wordmark__name { color: var(--bone-2); }
.footer .wordmark__descriptor { color: var(--brass-lift); }
.footer__tagline { margin-top: 1.4rem; font-family: var(--serif); font-style: italic; opacity: 0.75; max-width: 22rem; }
.footer__h {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-lift); margin-bottom: 1.1rem;
}
.footer__list { list-style: none; }
.footer__list li + li { margin-top: 0.65rem; }
.footer__list a { font-size: 0.9rem; text-decoration: none; opacity: 0.8; transition: opacity 0.2s ease; }
.footer__list a:hover { opacity: 1; }
.footer__base {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(237,234,225,0.14);
  display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between;
  font-size: 0.76rem; opacity: 0.6;
}

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(12px); }
.reveal[data-shown="true"] { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal[data-shown="true"] { opacity: 1; transform: none; transition: none; }
  .card__media img,
  .irow__thumb img { transition: none; }
}
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--bone); padding: 0.8em 1.2em; z-index: 100;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { left: var(--gutter); top: 0.6rem; }

/* ==========================================================================
   Page heads — interior section landings
   ========================================================================== */
.page-head { padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--ink); }
.page-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-top: 0.7rem;
  max-width: 24ch;
}
.page-head__note { margin-top: 1.3rem; max-width: 44ch; color: var(--grey); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
/* The honeypot. A reader must never see it, or they will dutifully fill it in
   and have their message thrown away; display:none also keeps it away from
   screen readers, which is the point. */
.hp { display: none; }

/* ==========================================================================
   Filters
   ========================================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.filter {
  background: none; border: 0; padding: 0.3em 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--brass); }
.empty { padding-block: 4rem; text-align: center; color: var(--grey); font-style: italic; font-family: var(--serif); }

/* ==========================================================================
   Article and long-form prose
   ========================================================================== */
.article-head { padding-block: clamp(3rem, 6vw, 5.5rem) 0; }
.article-date { font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-text); }
.article-title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.015em;
  margin-top: 1rem; max-width: 26ch;
}
.article-standfirst {
  margin-top: 1.6rem; max-width: 46ch;
  font-family: var(--serif); font-style: italic;
  font-size: var(--step-1); line-height: 1.55; color: var(--charcoal, var(--grey));
}
.article-cover { margin-block: clamp(2.5rem, 5vw, 4rem); }
/* Same height cap as the project hero: an upright photograph at the full
   width of the page is taller than the window it opens in. */
.article-cover img { width: auto; max-width: 100%; max-height: 38rem; margin-inline: auto; }
/* The reading column is centred in whatever wrap the page uses, so a project
   page in the wide wrap does not leave the article stranded against the left
   edge of a 1440px window. Galleries and timelines sit outside this and keep
   the full width. */
.article-body {
  max-width: 48rem;
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
@media (min-width: 72rem) { .article-body { max-width: 66rem; } }

/* The text measure stays at 36rem, which is where prose is comfortable to
   read. The column around it is wider, so an upright photograph can sit in
   the margin with the article running past it instead of under it. */
.prose { max-width: 54rem; display: flow-root; }
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > hr { max-width: 36rem; }
.prose > h2 { clear: both; }
.prose > * + * { margin-top: 1.35rem; }
.prose p { line-height: 1.8; }
.prose h2 {
  font-family: var(--serif); font-size: var(--step-2); line-height: 1.16;
  margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.prose h3 { font-family: var(--serif); font-size: var(--step-1); margin-top: 2.2rem; }
.prose h4 { font-size: var(--step-0); font-weight: 500; letter-spacing: 0.04em; margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote {
  margin: 2.2rem 0; padding-left: 1.6rem; border-left: 2px solid var(--brass);
  font-family: var(--serif); font-style: italic; font-size: var(--step-1); line-height: 1.5;
}
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.86em;
  background: var(--bone-2); padding: 0.15em 0.4em;
}
.prose a { color: var(--brass-text); text-decoration: underline; text-underline-offset: 0.22em; }
.prose a:hover { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }
.prose img { margin-block: 2rem; }

/* An image on its own line, or at the end of a paragraph, is a figure.
   The build reads each file's real dimensions and tags it: upright images
   float so the text wraps around them, wide ones run full width because a
   drawing squeezed into a side column cannot be read. */
.prose > .pfig { margin: 2.6rem 0; }   /* figure carries a 40px UA side margin */
.prose > .pfig img {
  width: auto; max-width: 100%;
  max-height: 30rem;
  margin-block: 0;
  background: var(--bone-3);
}
.prose .pfig__cap {
  margin-top: 0.75rem;
  font-size: 0.78rem; letter-spacing: 0.04em; color: var(--grey);
}

@media (min-width: 60rem) {
  .prose > .pfig--wide,
  .prose > .pfig:not(.pfig--float) { width: 100%; }
  .prose > .pfig--wide img,
  .prose > .pfig:not(.pfig--float) img { width: 100%; max-height: 34rem; object-fit: contain; }

  .prose > .pfig--float {
    float: right;
    clear: right;
    width: 16rem;
    margin: 0.4rem 0 1.6rem 2.2rem;
  }
  .prose > .pfig--float img { width: 100%; max-height: none; }
}

.prose-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.prose-block__h {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-text);
  padding-bottom: 1rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--ink);
}

/* Section labels move out of the text and into a margin column, which is what
   lets a long post show its own structure without the headings breaking the
   reading. They stay with their section as it scrolls past. */
@media (min-width: 72rem) {
  /* Blocks that sit outside .article-body, such as the acknowledgements
     after the gallery, line up with the ones inside it. */
  .wrap--article .prose-block { max-width: 66rem; margin-inline: auto; }
  .wrap--article .prose-block {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: 2.5rem;
  }
  .wrap--article .prose-block__h {
    grid-column: 1;
    text-align: right;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 0.6rem;
    border-bottom: 0;
    border-top: 1px solid var(--ink);
    position: sticky;
    top: calc(var(--nav-top, 5rem) + 1.6rem);
    align-self: start;
  }
  /* Everything that is not the label belongs in the text column. The
     timeline and the specification table are blocks of their own, not
     prose, and without this they would be auto-placed into the margin. */
  .wrap--article .prose-block > *:not(.prose-block__h) { grid-column: 2; }
}
.prose-list { list-style: none; }
.prose-list li { padding-left: 1.4rem; position: relative; }
.prose-list li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
.prose-list li + li { margin-top: 0.6rem; }

/* ==========================================================================
   Project page
   ========================================================================== */
.project-hero { padding-block: clamp(2.5rem, 5vw, 4rem); }
/* Same reasoning as the prose figures: cap the height so a portrait photo
   opens the page instead of filling it. */
.project-hero img { width: auto; max-width: 100%; max-height: 38rem; margin-inline: auto; }
.project-meta {
  display: grid; gap: 1.6rem clamp(2rem, 4vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding-block: 1.8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* Timeline ----------------------------------------------------------------- */
.tl { list-style: none; }
.tl__item {
  display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 1.2rem;
  padding-block: 1.4rem; border-top: 1px solid var(--line);
}
.tl__item:last-child { border-bottom: 1px solid var(--line); }
.tl__n { font-family: var(--serif); font-size: 0.9rem; color: var(--brass-text); font-variant-numeric: tabular-nums; }
.tl__dot { display: none; }
.tl__body { min-width: 0; }
.tl__stage { font-family: var(--serif); font-size: var(--step-1); line-height: 1.2; }
.tl__status {
  display: inline-block; margin-top: 0.6rem;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 0.32em 0.65em; color: var(--grey);
}
.tl__item[data-status="Completed"] .tl__status { border-color: var(--brass); color: var(--brass-text); }
.tl__item[data-status="In Progress"] .tl__status { border-color: var(--ink); color: var(--ink); background: var(--bone-2); }
.tl__note { margin-top: 0.7rem; font-size: 0.92rem; color: var(--grey); max-width: 46ch; }
.tl__key { margin-top: 1.6rem; font-size: 0.78rem; color: var(--grey); font-style: italic; }

/* Specifications ----------------------------------------------------------- */
.specs { list-style: none; }
.spec {
  display: grid; grid-template-columns: 1fr; gap: 0.2rem;
  padding-block: 0.95rem; border-top: 1px solid var(--line-soft);
}
@media (min-width: 620px) { .spec { grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: baseline; } }
.spec:last-child { border-bottom: 1px solid var(--line-soft); }
.spec__k { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.spec__v { font-family: var(--serif); font-size: var(--step-0); }
.spec--provisional .spec__v::after {
  content: " Provisional";
  font-family: var(--sans); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text);
  border: 1px solid var(--line); padding: 0.2em 0.45em; margin-left: 0.6em;
  white-space: nowrap;
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.review__facts { margin-block: clamp(2rem, 4vw, 3rem); }
.verdict { display: grid; gap: clamp(1.8rem, 3.4vw, 3rem); margin-top: 1.6rem; }
@media (min-width: 760px) { .verdict { grid-template-columns: 1fr 1fr; } }
.verdict__col { padding-top: 1.2rem; border-top: 1px solid var(--ink); }
.verdict__h {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-text); margin-bottom: 1rem;
}

/* ==========================================================================
   Figures, galleries, lightbox
   ========================================================================== */
.gallery { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.figure { margin: 0; }
.figure__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.figure__cap { margin-top: 0.7rem; font-size: 0.78rem; color: var(--grey); line-height: 1.5; }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(13, 11, 9, 0.94);
  display: grid; place-items: center; padding: var(--gutter);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: min(100%, 72rem); }
.lightbox__fig img { max-height: 80vh; width: auto; margin-inline: auto; }
.lightbox__fig .figure__cap { color: var(--bone-2); text-align: center; }
.lightbox__close {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: none; border: 1px solid rgba(237,234,225,0.4); color: var(--bone-2);
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.6em 1.1em; cursor: pointer;
}
.lightbox__close:hover { border-color: var(--bone-2); }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; padding-block: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .about { grid-template-columns: 22rem 1fr; } }
.about__media { position: sticky; top: 7rem; }
.about__text { max-width: 38rem; }

.contact-list { list-style: none; margin-top: 1.6rem; }
.contact-list li { padding-block: 0.9rem; border-top: 1px solid var(--line); font-size: 0.95rem; }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list a { color: var(--brass-text); text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================================
   Contact form
   ========================================================================== */
.form { margin-top: 2rem; max-width: 34rem; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: block; margin-bottom: 1.4rem; }
.field__label {
  display: block; margin-bottom: 0.5rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-size: var(--step-0); font-weight: 300;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--ink);
  padding: 0.7em 0; border-radius: 0;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-bottom-color: var(--brass); box-shadow: 0 1px 0 0 var(--brass);
}
.form button { margin-top: 0.6rem; }
.form__note { margin-top: 1.4rem; font-size: 0.8rem; color: var(--grey); }

/* ==========================================================================
   Comments — read before they appear, so the page never carries a stranger's
   words without Stephen having chosen them
   ========================================================================== */
.cform {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.cform .prose-block + .prose-block { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cform__col { max-width: 36rem; }
.cform__empty { margin: 0; color: var(--grey); }

.clist { list-style: none; margin: 0; padding: 0; }
.cmt + .cmt { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line-soft); }
.cmt__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem;
  margin: 0 0 0.7rem;
}
.cmt__who { font-family: var(--serif); font-size: var(--step-1); line-height: 1.2; }
.cmt__who--me { color: var(--brass-text); }
.cmt__when {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey);
}
.cmt__body > *:first-child { margin-top: 0; }
.cmt__body > *:last-child { margin-bottom: 0; }
.cmt__reply {
  margin-top: 1.6rem; padding-left: clamp(1rem, 3vw, 1.8rem);
  border-left: 2px solid var(--brass);
}
.cform__form { margin-top: 0; max-width: none; }

/* ==========================================================================
   Prev / next navigation
   ========================================================================== */
.pn-nav { display: grid; gap: 1.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--ink); }
@media (min-width: 700px) { .pn-nav { grid-template-columns: 1fr 1fr; } }
.pn { text-decoration: none; color: inherit; display: block; }
.pn--next { text-align: right; }
.pn__k { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-text); }
.pn__t { font-family: var(--serif); font-size: var(--step-1); line-height: 1.22; margin-top: 0.5rem; }
.pn:hover .pn__t { color: var(--brass-text); }

/* ==========================================================================
   Related
   ========================================================================== */
.related { padding-block: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--line); }
.related__k {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--brass-text); padding-bottom: 1.2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--ink);
}

/* ==========================================================================
   Image provenance — what a picture is actually claiming
   ========================================================================== */
.figure__kind {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.22em 0.55em;
  border: 1px solid var(--line);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  vertical-align: 0.12em;
  white-space: nowrap;
}
.figure__kind--render {
  border-color: var(--brass);
  color: var(--brass-text);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
}

.notice {
  margin: 0 0 1.8rem;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--brass);
  background: var(--bone-2);
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink);
  max-width: 46rem;
}
.notice strong { font-weight: 500; }