/* AUREL main stylesheet. Layout, components, motion. Tokens live in tokens.css. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 340;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--bone); color: var(--black); }
[data-theme="bone"] ::selection,
:root[data-view="negative"] ::selection { background: var(--black); color: var(--bone); }

/* focus ring in the site's own geometry: a square viewfinder hairline,
   not the default rounded ring */
:focus-visible {
  outline: 1px solid var(--focus);
  outline-offset: 5px;
  border-radius: 0;
}

/* anchor landing tuned per target: hairline sections keep their border
   visible below the fixed header; the index lands a touch higher */
section[id] { scroll-margin-top: 4.75rem; }
#index-02 { scroll-margin-top: 3.25rem; }

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-5);
  background: var(--bone);
  color: var(--black);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus-visible { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- text roles ---------- */
.display,
.h1, .h2, .h3 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: var(--lh-heading);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.display { font-size: var(--t-display); line-height: var(--lh-tight); }
.h1 { font-size: var(--t-h1); line-height: 0.98; }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.em-i { font-style: italic; font-weight: 500; }

.lead {
  font-family: var(--font-serif);
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.42;
  max-width: var(--measure);
  text-wrap: pretty;
}
.body-copy { max-width: var(--measure); color: var(--muted); text-wrap: pretty; }

/* caption: the Karla smallcaps voice of the site */
.caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
}
.caption--muted { color: var(--muted); }

/* kicker: caption preceded by a hairline dash (no brackets here) */
.kicker { display: inline-flex; align-items: center; gap: 0.9em; }
.kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: var(--line-strong);
}

.dim { color: var(--muted); }

/* sample chip: honesty marker over sample imagery */
.chip {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 2;
  padding: 0.5em 0.9em;
  background: rgba(10, 9, 8, 0.72);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}

/* latent image: tiny inline placeholder developing into the print */
.latent {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.js .latent img { opacity: 0; transition: opacity var(--dur-3) ease; }
.js .latent img.is-developed { opacity: 1; }

/* ---------- layout primitives ---------- */
.wrap {
  width: min(100% - 2 * var(--edge), var(--max-w));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--bg);
  color: var(--fg);
}
.section--flush { padding-block: 0; }
.section--hairline { border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

/* ---------- fixed minimal header ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-chrome);
  color: var(--fg);
  mix-blend-mode: normal;
  pointer-events: none;
}
.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-5);
}
.site-header a,
.site-header button { pointer-events: auto; }
.brand {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity var(--dur-1) ease;
  padding-block: var(--s-2);
}
.site-nav a:hover, .site-nav a[aria-current="true"] { opacity: 1; }
.site-nav a[aria-current="true"] { border-bottom: 1px solid var(--line-strong); }

/* negative view toggle: the contact-sheet switch, chrome-level, JS only */
.neg-toggle {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity var(--dur-1) ease;
  padding-block: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.neg-toggle::before {
  /* a film-frame swatch that flips with the view */
  content: "";
  width: 0.9em;
  height: 0.7em;
  border: 1px solid currentColor;
  background: transparent;
}
.neg-toggle:hover { opacity: 1; }
.neg-toggle[aria-pressed="true"] { opacity: 1; }
.neg-toggle[aria-pressed="true"]::before { background: currentColor; }
html:not(.js) .neg-toggle { display: none; }

/* ---------- buttons: square hairline, no pills ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  padding: 1em 2em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, border-color var(--dur-2) ease;
}
.btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn--solid:hover { background: transparent; color: var(--fg); border-color: var(--line-strong); }

/* underlined text link */
.line-link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur-1) ease;
}
.line-link:hover { text-decoration-color: var(--fg); }

/* ---------- MaskedHero ---------- */
/* The photograph is beneath; a black plate covers everything except the
   knockout wordmark. Filler bars above and below the SVG keep the plate
   sealed at every aspect ratio without distorting the letterforms. */
.hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: clip;
}
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--black-2);
}
.hero-slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  opacity: 0;
  animation: hero-fade var(--dur-slide) ease-in-out infinite;
}
.hero-slides img:nth-child(1) { animation-delay: 0s; }
.hero-slides img:nth-child(2) { animation-delay: calc(var(--dur-slide) / 3); }
.hero-slides img:nth-child(3) { animation-delay: calc(var(--dur-slide) * 2 / 3); }
@keyframes hero-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  33.33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}
.hero-mask {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hero-mask .mask-fill { flex: 1; background: var(--bg); min-height: 0; }
.hero-mask svg { width: 100%; height: auto; flex: none; }
.hero-mask .wm-plate { fill: var(--bg); }
.hero-mask .wm-text {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 300px;
  letter-spacing: 0.06em;
}
.hero-foot {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-5) var(--edge);
}

/* ---------- film-strip index ---------- */
.strip { border-top: 1px solid var(--line); }
.strip-row {
  position: relative;
  display: grid;
  grid-template-columns: 5ch minmax(0, 1fr) auto;
  gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(1.6rem, 3.5vh, 2.6rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.strip-no {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--track-caption);
  color: var(--muted);
}
.strip-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 5.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  transition: transform var(--dur-2) var(--ease-out);
}
.strip-row:hover .strip-title,
.strip-row:focus-visible .strip-title {
  font-style: italic;
  font-weight: 500;
  transform: translateX(0.35em);
}
.strip-meta { text-align: right; color: var(--muted); }
/* hover preview: a floating frame on fine pointers only */
.strip-preview {
  position: absolute;
  right: clamp(6rem, 18vw, 16rem);
  top: 50%;
  z-index: 3;
  width: clamp(11rem, 22vw, 19rem);
  transform: translateY(-46%) rotate(-1.5deg) scale(0.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
}
.strip-preview img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.06);
  border: 1px solid var(--line-strong);
}
@media (hover: hover) and (pointer: fine) {
  .strip-row:hover .strip-preview,
  .strip-row:focus-visible .strip-preview {
    opacity: 1;
    transform: translateY(-50%) rotate(-1.5deg) scale(1);
  }
}
/* irregular editorial rhythm: two deliberate offsets so the index reads
   like a pasted-up contact sheet, not a spreadsheet. Wide screens only. */
@media (min-width: 64rem) {
  .strip-row:nth-child(2) .strip-title { padding-left: clamp(3rem, 11vw, 10rem); }
  .strip-row:nth-child(4) .strip-title { text-align: right; padding-right: clamp(2rem, 7vw, 6rem); }
}

/* ---------- StickyDeck contact sheet + ViewfinderBrackets ---------- */
.deck { background: var(--bg); }
.deck-scene {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.deck-scene:nth-child(1) { z-index: 1; }
.deck-scene:nth-child(2) { z-index: 2; }
.deck-scene:nth-child(3) { z-index: 3; }
.deck-scene:nth-child(4) { z-index: 4; }
.deck-scene > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.deck-scene::after {
  /* legibility scrim for the caption line */
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.72), transparent);
  pointer-events: none;
}
/* ViewfinderBrackets: four positioned corner spans */
.vf { position: absolute; inset: var(--frame-inset); z-index: 2; pointer-events: none; }
.vf i {
  position: absolute;
  width: clamp(1.1rem, 2.4vw, 2rem);
  height: clamp(1.1rem, 2.4vw, 2rem);
  border: 0 solid var(--bone);
  opacity: 0.9;
  transition: transform var(--dur-3) var(--ease-out);
}
.vf i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.js .deck-scene .vf i { transform: scale(0.86); }
.js .deck-scene.is-inview .vf i,
.js .deck-scene:target .vf i { transform: none; }
.deck-cap {
  position: absolute;
  inset-inline: 0;
  bottom: calc(var(--frame-inset) + 0.4rem);
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: var(--s-4);
  text-align: center;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(10, 9, 8, 0.8);
  padding-inline: var(--edge);
}
.deck-count {
  position: absolute;
  top: calc(var(--frame-inset) + 0.4rem);
  right: calc(var(--frame-inset) + 0.6rem);
  z-index: 3;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(10, 9, 8, 0.8);
}

/* ---------- the loupe: full-bleed keyboard plate viewer ---------- */
/* Triggers are JS-injected behavior on real buttons; without JS the
   buttons are hidden and every plate rests as plain content. */
.loupe-trigger {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: zoom-in;
  border-radius: 0;
}
html:not(.js) .loupe-trigger { display: none; }
.loupe-trigger:focus-visible { outline-offset: -6px; }
/* caption-level variant used on the deck scenes */
.loupe-trigger--cap {
  position: static;
  inset: auto;
  z-index: 3;
  color: var(--bone);
  text-shadow: 0 1px 8px rgba(10, 9, 8, 0.8);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.loupe-trigger--cap:hover { text-decoration-color: var(--bone); }

.loupe {
  position: fixed;
  inset: 0;
  z-index: var(--z-loupe);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  padding: var(--s-5) var(--edge);
  background: var(--bg);
  color: var(--fg);
}
.loupe[hidden] { display: none; }
.loupe-bar,
.loupe-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}
.loupe-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.loupe-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
}
.loupe-stage .vf { --frame-inset: 0px; opacity: 0.7; }
.loupe-cap {
  display: grid;
  gap: var(--s-1);
  text-align: center;
}
.loupe-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.2;
}
.loupe-close,
.loupe-nav {
  padding: var(--s-2) 0;
  opacity: 0.8;
  transition: opacity var(--dur-1) ease;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.loupe-close:hover,
.loupe-nav:hover { opacity: 1; text-decoration-color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .loupe:not([hidden]) { animation: loupe-in var(--dur-2) ease; }
  @keyframes loupe-in { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.about-portrait { position: relative; }
.about-portrait img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
}
.about-statement {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.28;
  text-wrap: pretty;
  max-width: 24ch;
}
.about-notes {
  margin-top: var(--s-7);
  display: grid;
  gap: var(--s-3);
  max-width: var(--measure);
}
.about-notes li {
  display: flex;
  gap: var(--s-4);
  align-items: baseline;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.about-notes .caption { min-width: 9ch; }

/* ---------- commissions ---------- */
.comm-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.comm-rate {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.2;
  max-width: 20ch;
  text-wrap: balance;
}
.comm-avail {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: var(--s-5);
}
.comm-avail::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--bone);
}
.comm-list { display: grid; }
.comm-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.comm-list li:first-child { border-top: 1px solid var(--line); }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
}
.field-hint { font-size: var(--t-small); color: var(--muted); margin: 0; }
.field input,
.field textarea {
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: var(--s-3) 0;
  transition: border-color var(--dur-1) ease;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--fg);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field.is-invalid input,
.field.is-invalid textarea { border-bottom-color: var(--white); border-bottom-style: dashed; }
.field-error {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.field-error::before { content: "\2190\00a0"; }
.form-errors {
  border: 1px solid var(--line-strong);
  padding: var(--s-4) var(--s-5);
}
.form-errors p { margin: 0 0 var(--s-2); }
.form-errors ul { margin: 0; padding-left: 2.6em; display: grid; gap: var(--s-1); counter-reset: err-frame; }
.form-errors li { counter-increment: err-frame; }
/* markers in the site's motif: frame numbers, not bullets */
.form-errors li::marker {
  content: counter(err-frame, decimal-leading-zero) "\00a0\00a0";
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: var(--track-caption);
  color: var(--muted);
}
.form-errors a { color: var(--fg); }
.form-status:empty { display: none; }
.form-status { color: var(--fg); max-width: var(--measure); }
/* typing-time draft disclosure: one caption, nothing louder */
.form-note { margin: 0; max-width: var(--measure); }
/* no-JS notice: resting until html:not(.js), the same gate that
   shows every frame when the script layer is absent */
.nojs-note { display: none; }
html:not(.js) .nojs-note {
  display: block;
  margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  max-width: var(--measure);
}
html:not(.js) .nojs-note a { color: var(--fg); }
.form[aria-busy="true"] .btn { opacity: 0.6; pointer-events: none; }
.form-fallback {
  border: 1px solid var(--line);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-4);
}
.form-fallback textarea {
  font-family: var(--font-sans);
  font-size: var(--t-small);
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  padding: var(--s-3);
  width: 100%;
  resize: vertical;
}
.form-fallback-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.inquiry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.inquiry-aside { display: grid; gap: var(--s-5); justify-items: start; }

/* ---------- interior banner ---------- */
.banner {
  padding-top: calc(var(--section-pad) + var(--s-7));
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
/* deliberate asymmetry: the italic half of an interior title breaks to its
   own line and steps in, like a second exposure slightly out of register */
.banner .h1 .em-i { display: block; margin-left: clamp(2.5rem, 9vw, 8rem); }
.banner .crumbs { display: flex; gap: 0.8em; margin-bottom: var(--s-5); }
.banner .crumbs a { text-decoration: none; color: var(--muted); }
.banner .crumbs a:hover { color: var(--fg); }
.banner-meta {
  display: flex;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-top: var(--s-5);
}

/* ---------- series page plates ---------- */
.plates { display: grid; gap: clamp(3rem, 8vh, 6rem); }
.plate { display: grid; gap: var(--s-3); }
.plate figure { position: relative; margin: 0; }
.plate img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.05);
}
.plate figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  color: var(--muted);
}
.plate--right { justify-self: end; width: min(100%, 44rem); }
.plate--left { justify-self: start; width: min(100%, 44rem); }
.plate-note {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.35;
  max-width: 30ch;
  justify-self: center;
  text-align: center;
  padding-block: var(--s-6);
}
.next-series {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-block: var(--s-7);
  border-top: 1px solid var(--line);
}
.next-series a {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--t-h2);
  text-decoration: none;
}
.next-series a:hover { font-style: italic; font-weight: 500; }

/* ---------- one-line footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
}
.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  flex-wrap: wrap;
}
.site-footer a { text-decoration: none; color: var(--muted); transition: color var(--dur-1) ease; }
.site-footer a:hover { color: var(--fg); }

/* ---------- reveal motion ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity var(--dur-3) ease, transform var(--dur-3) var(--ease-out);
}
.js .reveal.is-inview { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }

/* ---------- styleguide page ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--gutter); }
.sg-swatch { border: 1px solid var(--line); overflow: hidden; }
.sg-swatch-color { height: 7rem; }
.sg-swatch dl { padding: var(--s-4); display: grid; gap: var(--s-1); margin: 0; }
.sg-swatch dt {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--muted);
}
.sg-swatch dd { margin: 0; font-size: var(--t-small); }
.sg-block { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.sg-row { display: grid; grid-template-columns: 14rem 1fr; gap: var(--gutter); align-items: baseline; padding-block: var(--s-4); }
.sg-specimen-note { color: var(--muted); max-width: var(--measure); margin-top: var(--s-3); }
.sg-demo { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.sg-vf-demo { position: relative; height: 12rem; border: 1px solid var(--line); }

/* ---------- error page ---------- */
.error-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--s-5);
  padding-inline: var(--edge);
}
.error-hero .display { font-style: italic; font-weight: 500; }
.error-hero .vf { inset: clamp(5rem, 10vh, 7rem) var(--frame-inset) var(--frame-inset); }
/* deliberate asymmetry: the frame stamp sits off-center, like an edge marking */
.error-hero > .caption--muted { justify-self: start; text-align: left; }

/* ---------- responsive ---------- */
@media (max-width: 63.9rem) {
  .about-grid,
  .comm-grid,
  .inquiry-grid { grid-template-columns: 1fr; }
  .about-portrait { max-width: 26rem; }
  .strip-row { grid-template-columns: 4ch minmax(0, 1fr); }
  .strip-meta { grid-column: 2; text-align: left; }
  .sg-row { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .site-header .wrap { padding-block: var(--s-4); flex-wrap: wrap; row-gap: 0; }
  .brand { font-size: 1.2rem; }
  .site-nav { gap: var(--s-4); flex-wrap: wrap; }
  .hero-foot { flex-direction: column; gap: var(--s-2); }
}

/* ---------- negative view: the contact-sheet inversion ---------- */
/* Tokens flip in tokens.css; here the photographs themselves go negative.
   Captions and brackets stay bone on dark scrims, like markings on a rebate. */
:root[data-view="negative"] :is(.hero-slides img, .deck-scene > img, .plate img, .about-portrait img, .strip-preview img, .loupe-stage img) {
  filter: grayscale(1) invert(1) contrast(1.06);
}

/* ---------- print: the tear sheet ---------- */
@media print {
  :root, :root[data-view="negative"] {
    --bg: #fff;
    --bg-2: #fff;
    --fg: #000;
    --muted: #444;
    --line: #bbb;
    --line-strong: #666;
  }
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .skip-link, .neg-toggle, .loupe, .loupe-trigger,
  .strip-preview, .form, .btn, .hero-slides, .hero-mask, .next-series { display: none !important; }
  .hero { height: auto; min-height: 0; }
  .hero-foot { position: static; padding: var(--s-6) 0; }
  .section { padding-block: var(--s-7); }
  .deck-scene { position: static; height: auto; margin-bottom: var(--s-6); }
  .deck-scene > img { position: static; height: auto; }
  .deck-scene::after { display: none; }
  .deck-cap, .deck-count { position: static; color: #000; text-shadow: none; padding: var(--s-2) 0 0; }
  img { filter: none !important; }
  .plate, .deck-scene, .about-portrait, figure { break-inside: avoid; }
  .reveal, .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- cross-page transitions (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  /* replacement, not shortening: the slideshow becomes one still frame */
  .hero-slides img { animation: none; }
  .hero-slides img:first-child { opacity: 1; }
  .strip-title, .strip-preview, .vf i, .btn { transition: none; }
  .js .deck-scene .vf i { transform: none; }
  /* replacement, not shortening: latent placeholders resolve instantly,
     the loupe appears without its fade */
  .js .latent img { transition: none; }
  .loupe:not([hidden]) { animation: none; }
  .neg-toggle, .loupe-close, .loupe-nav, .loupe-trigger--cap { transition: none; }
}

@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  .hero-slides img, .deck-scene > img, .plate img, .about-portrait img, .strip-preview img, .loupe-stage img { filter: none; }
  .neg-toggle::before { border-color: ButtonText; }
}