/* ==========================================================================
   THERE WILL BE SIGNS, main.css
   Travis LeRoy Southworth
   Values sampled from /img/source/Support_V3.jpg. No accent color by design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   The site ships on the system Helvetica stack, which is exact on macOS/iOS.
   For Windows/Android parity, self-host Archivo (SIL OFL) into /fonts/ and
   uncomment the two @font-face blocks below, nothing else needs to change.
   Download: https://fonts.google.com/specimen/Archivo (Regular 400, Bold 700)
   -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color, sampled from the supporter sheet */
  --paper:      #E9DBD2;             /* page ground, warm blush-greige */
  --paper-deep: #E1D2C8;             /* section bands, image mats */
  --ink:        #1A1A18;             /* all text, glyphs, rules */
  --rule:       rgba(26, 26, 24, 0.24);
  --rule-soft:  rgba(26, 26, 24, 0.14);
  --ghost:      rgba(26, 26, 24, 0.10); /* background landscape line drawing */
  --glyph:      rgba(26, 26, 24, 0.30); /* corner marks, watermark weight */
  --ink-muted:  rgba(26, 26, 24, 0.62);

  /* Type */
  --font: "SF Pro Display", -apple-system, "Neue Haas Grotesk Display",
          "Helvetica Neue", Helvetica, "Archivo", Arial, sans-serif;

  /* Space */
  --gutter: clamp(2.75rem, 4vw, 3.5rem);
  --measure: 68ch;
  --section-y: clamp(2.25rem, 4.5vw, 3.75rem);
  --maxw: 1280px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9375rem;   /* 15px, a step down from 16 across the whole site */
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; border-radius: 0; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* Zero radius everywhere, including buttons and images. */
input, textarea, button, img, video { border-radius: 0; }

/* Focus, never removed. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

::selection { background: rgba(26, 26, 24, 0.14); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.6rem 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.skip-link:focus { left: var(--gutter); top: 0.75rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. TYPE SCALE
   -------------------------------------------------------------------------- */
/* Sized to set on a single line at every width. THERE WILL BE SIGNS measures
   9.85em in this stack; the slope and cap below were checked against the real
   text column width from 320px to 1920px, with ~8% headroom. Never wraps. */
.wordmark {
  font-size: clamp(1.4rem, 7.1vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1.02;
  margin: 0;
  white-space: nowrap;
}
.wordmark em { font-style: italic; font-weight: 700; }
/* Arial, the Windows fallback, sets this string about 10% wider than SF Pro
   Display. Only the narrowest screens are tight enough to care. */
@media (max-width: 380px) { .wordmark { font-size: 6.3vw; } }

.section-heading {
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.15;
}

.label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.lede { font-size: clamp(0.9375rem, 1.5vw, 1rem); }

.measure { max-width: var(--measure); }

.prose p + p { margin-top: 1.15em; }
.prose { max-width: var(--measure); }

/* Broadsheet two-column setting for the statement. Halves its height and
   stops the right half of the page from sitting empty. */
.cols-2 {
  max-width: 96ch;
  column-count: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
}
.cols-2 p { break-inside: avoid; }
.cols-2 p + p { margin-top: 1.15em; }
.cols-2 p:first-child { margin-top: 0; }
@media (max-width: 899px) { .cols-2 { column-count: 1; max-width: var(--measure); } }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
/* The section that follows a page header already has the header's air above
   it, so it does not need a full section's worth of its own. */
.page-head + .section { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--band { background: var(--paper-deep); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* The vertical hairline that runs down the left of the header block, as on
   the sheet. Content is indented off it. */
.ruled-left {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 3.5vw, 3rem);
}

/* Matches the header block's text indent so every heading and paragraph on
   the page shares one left margin. Full-width rows (the tier columns, the
   progression images) deliberately start outside it. */
.indent { padding-left: clamp(1.25rem, 3.5vw, 3rem); }
@media (max-width: 599px) { .indent { padding-left: 0; } }

/* Short hairline under the wordmark, as on the sheet. */
.rule--short { max-width: 34rem; }

/* --------------------------------------------------------------------------
   6. SITE HEADER / NAV
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-header { background: var(--paper); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.site-header__mark {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  white-space: nowrap;
}
.site-header__mark em { font-style: italic; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible { border-bottom-color: var(--ink); }
.nav__link[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__link .ext { width: 9px; height: 9px; flex: none; opacity: 0.75; }

/* Mobile: a text toggle reading MENU, not a hamburger. */
.nav__toggle {
  display: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ink);
  padding-block: 0.15rem;
}

@media (max-width: 719px) {
  .nav__toggle { display: inline-block; }
  .nav__list {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav__list[hidden] { display: none; }
  .nav__list li { width: 100%; border-top: 1px solid var(--rule-soft); }
  .nav__link { width: 100%; padding-block: 0.85rem; border-bottom: 0; }
}
/* Without JavaScript the toggle cannot work, so the list stays visible and
   simply wraps into rows. */
.no-js .nav__toggle { display: none; }
@media (max-width: 719px) {
  .no-js .site-header { position: static; }
  .no-js .site-header__inner {
    flex-wrap: wrap;
    align-items: baseline;
    padding-block: 0.75rem;
  }
  .no-js .nav__list {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0;
    background: none;
    border-bottom: 0;
  }
  .no-js .nav__list li { width: auto; border-top: 0; }
  .no-js .nav__link { width: auto; padding-block: 0.25rem; }
  /* The header no longer floats, so the hero needs less clearance. */
  .no-js .header-block, .no-js .page-head { padding-top: clamp(2rem, 6vw, 3.5rem); }
}

/* --------------------------------------------------------------------------
   7. HERO + GHOST ROAD DRAWING
   -------------------------------------------------------------------------- */
.hero { position: relative; }

/* The top block: wordmark, tagline and the support intro on one ground, with
   the road drawing behind all of it. */
.header-block {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.75rem, 8vw, 6.5rem);
  padding-bottom: clamp(0.75rem, 1.4vw, 1.15rem);
}
.header-block > .wrap { position: relative; z-index: 1; }

/* The desert-road line drawing, sitting behind the whole top block rather
   than occupying a band of its own, the page is short on vertical space and
   the drawing should cost none of it. Its own ground is lighter than --paper
   in every channel, so `darken` discards it and leaves only the linework. */
.road {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: darken;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 78%, transparent 100%);
}
.road img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
/* Without blend-mode support the drawing's own ground would tint the page. */
@supports not (mix-blend-mode: darken) { .road { opacity: 0.16; } }

/* --------------------------------------------------------------------------
   8. INSTALLATION LINE
   -------------------------------------------------------------------------- */
.installation {
  font-size: clamp(1rem, 1.9vw, 1.25rem);
  letter-spacing: 0.005em;
}
.installation b { font-weight: 700; }

/* --------------------------------------------------------------------------
   9. TIER ROW, the revenue path
   Four equal columns divided by full-height vertical hairlines. No boxes,
   no cards. Stacked below 600px, where the dividers become horizontal.
   -------------------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
}

.tier {
  position: relative;
  padding: clamp(0.85rem, 1.4vw, 1.1rem) clamp(0.75rem, 1.6vw, 1.5rem);
  text-align: center;
  border-left: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tier:last-child { border-right: 1px solid var(--rule); }

/* Sold out: the column drops to 45%, but the waitlist link keeps full
   contrast so the one remaining action stays legible and accessible.
   Specificity has to beat .reveal.is-in, which sets opacity: 1. */
.tiers .tier--sold-out > *:not(.tier__pay),
.tiers .tier--sold-out.is-in > *:not(.tier__pay) { opacity: 0.45; }

.tier__glyph {
  width: 22px;
  height: 22px;
  color: var(--ink);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}

.tier__name {
  font-size: 0.95rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.tier__price {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  margin-top: clamp(0.35rem, 0.8vw, 0.55rem);
}

.tier__available {
  margin-top: clamp(0.3rem, 0.7vw, 0.5rem);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

.tier__headline {
  margin-top: clamp(0.55rem, 1.2vw, 0.85rem);
  font-size: 0.875rem;
}


.tier__pay {
  margin-top: auto;
  padding-top: clamp(0.9rem, 1.8vw, 1.35rem);
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  width: 100%;
}

/* Text links with a 1px underline that thickens on hover. Never filled. */
.pay-link {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  transition: border-bottom-width 160ms var(--ease), padding-bottom 160ms var(--ease);
}
.pay-link:hover,
.pay-link:focus-visible {
  border-bottom-width: 3px;
  padding-bottom: 1px;
}

.payment-note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 92ch;
}

/* Sold-out state */
.tier__available--sold { font-weight: 700; }

/* No-JS fallback list for the purchase path */
.tiers-fallback { border-top: 1px solid var(--rule); }
.tiers-fallback li {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
}
.tiers-fallback .t-name { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tiers-fallback .t-price { font-variant-numeric: tabular-nums; }

@media (max-width: 899px) {
  .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
  .tier:last-child { border-right: 0; }
  .tier:nth-child(2n) { border-right: 1px solid var(--rule); }
}

@media (max-width: 599px) {
  /* Stacked: the vertical hairlines become horizontal ones so the
     divided-column logic survives. */
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier {
    border-left: 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule);
    padding-inline: 0;
  }
  .tier:last-child { border-bottom: 0; }
  .tier:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   10. PROGRESSION, COLLECT → OWN → REALIZE → BUILD
   One grid: each label sits directly above its own work, so the pairing holds
   at every breakpoint. Shares the tier row's four columns.
   -------------------------------------------------------------------------- */
.progression {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: clamp(1.5rem, 3vw, 2rem);
  margin-top: clamp(1rem, 1.8vw, 1.4rem);
  margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
}

.progression__item {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
  min-width: 0;
}

.progression__label {
  position: relative;
  text-align: center;
}

/* SVG, not a text character. */
.progression__arrow {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: clamp(40px, 8vw, 96px);
  height: 12px;
  color: var(--ink);
  pointer-events: none;
}
.progression__arrow svg { width: 100%; height: 100%; }

.progression__item picture { display: block; }

/* Each work links to its tier page, same destination as the column below. */
.progression__link {
  display: block;
  background: var(--paper-deep);
  cursor: pointer;
}
.progression__link img { transition: opacity 220ms var(--ease); }
.progression__link:hover img,
.progression__link:focus-visible img { opacity: 0.86; }
.progression__item img {
  width: 100%;
  height: 100%;
  /* The horizontal crops' own ratio, so nothing is cropped twice. Raise this
     for taller images, lower it for a shorter page, it is the one real lever
     on the height of the front page. */
  aspect-ratio: 1000 / 732;
  object-fit: cover;
}

@media (max-width: 899px) {
  .progression { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progression__item:nth-child(2n) .progression__arrow { display: none; }
}
@media (max-width: 599px) {
  .progression {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(2rem, 6vw, 3rem);
  }
  .progression__arrow { display: none; }
  .progression__label { text-align: left; }
}

/* --------------------------------------------------------------------------
   11. CONTACT
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 899px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}

.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }

.field label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.field input,
.field textarea {
  font: inherit;
  font-size: 1rem;   /* 16px, deliberately: iOS zooms the page on focus below that */
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.55rem 0;
  width: 100%;
  transition: border-color 200ms var(--ease);
}
.field input:hover,
.field textarea:hover { border-bottom-color: var(--ink); }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--ink); outline-offset: 4px; }
.field textarea { resize: vertical; min-height: 5rem; }

.form__submit {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: border-bottom-width 160ms var(--ease), padding-bottom 160ms var(--ease);
}
.form__submit:hover,
.form__submit:focus-visible { border-bottom-width: 3px; padding-bottom: 1px; }

.honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status { margin-top: 1rem; font-size: 0.9rem; }
.form__done { padding-block: 1rem; max-width: 52ch; }

/* --------------------------------------------------------------------------
   12. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
}
.site-footer a { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease); }
.site-footer a:hover, .site-footer a:focus-visible { border-bottom-color: var(--ink); }

/* --------------------------------------------------------------------------
   13. CORNER GLYPH FRAME, the signature element
   Fixed marks at the four page corners, 24px, ink at 55%.
   -------------------------------------------------------------------------- */
.corner-glyphs {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.corner-glyphs svg {
  position: absolute;
  width: 22px;
  height: 22px;
  color: var(--ink);
  /* Light enough to read as a watermark rather than a control. The sheet sets
     these at 55%, but on screen at 22px that still looked pressable. */
  opacity: 0.3;
}
/* The marks live in the outer margin. --gutter is set wide enough that page
   content always clears them: 44px minimum against a mark ending at 34px. */
.corner-glyphs svg:nth-child(1) { top: 4.5rem; left: 0.75rem; }
.corner-glyphs svg:nth-child(2) { top: 4.5rem; right: 0.75rem; }
.corner-glyphs svg:nth-child(3) { bottom: 0.9rem; left: 0.75rem; }
.corner-glyphs svg:nth-child(4) { bottom: 0.9rem; right: 0.75rem; }

@media (max-width: 719px) {
  .corner-glyphs svg { width: 16px; height: 16px; opacity: 0.22; left: 0.5rem; right: 0.5rem; }
  /* Tuck the top pair directly under the header rule. At 4rem they collided
     with the first line of content on the shorter pages. */
  .corner-glyphs svg:nth-child(1),
  .corner-glyphs svg:nth-child(2) { top: 3.6rem; }
  .corner-glyphs svg:nth-child(1),
  .corner-glyphs svg:nth-child(3) { left: 0.5rem; right: auto; }
  .corner-glyphs svg:nth-child(2),
  .corner-glyphs svg:nth-child(4) { right: 0.5rem; left: auto; }
}
@media (max-width: 599px) {
  :root { --gutter: 2.25rem; }
}

/* --------------------------------------------------------------------------
   14. ABOUT
   -------------------------------------------------------------------------- */
.page-head { padding-top: clamp(5.25rem, 9vw, 7rem); padding-bottom: clamp(1rem, 2vw, 1.75rem); position: relative; overflow: hidden; }
.page-head > .wrap { position: relative; z-index: 1; }
.page-title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1;
}

/* Biography text left, portrait right, so the page opens on both together
   instead of running the photo underneath the copy. */
.about-top {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

/* The two remaining prose blocks sit side by side rather than stacked. */
.about-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}

@media (max-width: 899px) {
  .about-top,
  .about-two { grid-template-columns: minmax(0, 1fr); }
}

.portrait { margin: 0; max-width: none; }
.portrait figcaption { margin-top: 0.6rem; color: var(--ink-muted); }
@media (max-width: 899px) { .portrait { max-width: 22rem; } }


.about-list { display: grid; gap: 0.75rem; max-width: var(--measure); }
.about-list li { padding-bottom: 0.75rem; border-bottom: 1px solid var(--rule-soft); }


/* --------------------------------------------------------------------------
   15. RENDERINGS GRID + LIGHTBOX
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  align-items: start;
}
@media (max-width: 1199px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px)  { .grid { grid-template-columns: minmax(0, 1fr); } }

.work { margin: 0; }
.work__btn {
  display: block;
  width: 100%;
  background: var(--paper-deep);
  cursor: zoom-in;
}
/* Renderings arrive in mixed orientations, portrait and landscape both, so
   each keeps its own aspect ratio rather than being cropped to a common one.
   Rows come out ragged at the bottom, which is how a gallery should look. */
.work__btn img {
  width: 100%;
  height: auto;
  transition: opacity 220ms var(--ease);
}
.work__btn:hover img { opacity: 0.86; }
.work figcaption { margin-top: 0.75rem; }
.work figcaption .t { display: block; }
.work figcaption .m { display: block; color: var(--ink-muted); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--paper);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  gap: 1rem;
}
.lightbox[hidden] { display: none; }
/* Flex, not grid: a percentage max-height on a grid item was not resolving
   against the row, so a tall image kept its natural height and spilled over
   the caption on short viewports. As a flex item it resolves correctly, and
   overflow:hidden guarantees it either way. */
.lightbox__img {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lightbox__img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
}
.lightbox__caption-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.lightbox__controls {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex: none;
}

.lightbox__close {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  white-space: nowrap;
}

/* Previous / next. Drawn as the same long arrow used in the progression band,
   so the viewer speaks the same language as the rest of the site. */
.lightbox__step {
  width: 40px;
  height: 14px;
  color: var(--ink);
  opacity: 0.55;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.lightbox__step svg { width: 100%; height: 100%; }
.lightbox__step:hover,
.lightbox__step:focus-visible { opacity: 1; }
.lightbox__prev:hover { transform: translateX(-3px); }
.lightbox__next:hover { transform: translateX(3px); }
.lightbox__step[hidden] { display: none; }

.lightbox__count {
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  white-space: nowrap;
}

@media (max-width: 599px) {
  .lightbox__controls { gap: 0.9rem; }
  .lightbox__step { width: 32px; }
}
body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   16. MOTION, almost none
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(8px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
/* If JS never runs, nothing may stay hidden. */
.no-js .reveal { opacity: 1; transform: none; }

@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;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   17. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .corner-glyphs, .ghost-road, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   18. TIER DETAIL PAGE
   One page, /tier.html, rendered from js/tiers.js and keyed by ?tier=<id>.
   Pretty URLs (/collector, /sign-edition, ...) are mapped in _redirects.
   -------------------------------------------------------------------------- */
.tier-page {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3.25rem);
  align-items: start;
}
@media (max-width: 899px) {
  .tier-page { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); }
}

.tier-page__figure { margin: 0; background: var(--paper-deep); }
.tier-page__figure img { width: 100%; height: auto; }

.tier-page__lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.tier-page__glyph { width: 26px; height: 26px; flex: none; color: var(--ink); }

.tier-page__name {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.tier-page__price {
  margin-top: clamp(0.35rem, 0.8vw, 0.55rem);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tier-page__meta {
  margin-top: clamp(0.4rem, 0.9vw, 0.65rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
}
.tier-page__meta .sold { font-weight: 700; }

.tier-page__detail {
  margin-top: clamp(0.85rem, 1.6vw, 1.2rem);
  padding-top: clamp(0.85rem, 1.6vw, 1.2rem);
  border-top: 1px solid var(--rule);
  max-width: 56ch;
}

.tier-page__includes {
  margin-top: clamp(0.85rem, 1.6vw, 1.2rem);
  display: grid;
  gap: 0.5rem;
  max-width: 56ch;
}
.tier-page__includes li {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.5rem;
  align-items: baseline;
  line-height: 1.45;
}
.tier-page__includes li::before {
  content: "";
  width: 0.7rem;
  height: 1px;
  background: var(--ink);
  transform: translateY(-0.35em);
}

.tier-page__buy {
  margin-top: clamp(1rem, 1.9vw, 1.4rem);
  padding-top: clamp(1rem, 1.9vw, 1.4rem);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  align-items: baseline;
}

.tier-page__note {
  margin-top: clamp(0.6rem, 1.2vw, 0.9rem);
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 62ch;
}

/* Prev / next through the four tiers, so the row is browsable. */
.tier-nav,
.page-nav {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  padding-top: clamp(0.85rem, 1.6vw, 1.2rem);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.tier-nav a,
.page-nav a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  transition: border-bottom-width 160ms var(--ease), padding-bottom 160ms var(--ease);
}
.tier-nav a:hover, .tier-nav a:focus-visible,
.page-nav a:hover, .page-nav a:focus-visible { border-bottom-width: 3px; padding-bottom: 1px; }

/* The no-JavaScript fallback: all four tiers in full, as a plain document. */
.tier-fallback { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.tier-fallback > li { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--rule); }