/* ==========================================================================
   Ruby — 1937 MG TA 'Special'
   A dark, gem-toned ground so the photographs carry the page.
   Colours sampled from the car: ruby coachwork, bare alloy, chassis black.
   ========================================================================== */

:root {
  --night:    #150408;
  --night-2:  #200710;
  --ruby:     #8e1b2e;
  --ruby-lit: #c33a4e;
  --ember:    #e5808d;
  --alloy:    #f0ede9;
  --alloy-2:  #aaa49e;
  --line:     rgba(240, 237, 233, .13);

  --display: 'Bodoni Moda', Didot, 'Times New Roman', serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --wrap: 84rem;
  --measure: 64ch;
  --octagon: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--alloy-2);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ember); text-underline-offset: .2em; }
a:hover { color: #fff; }

:focus-visible { outline: 2px solid var(--ruby-lit); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--alloy); color: var(--night); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }

.wrap { max-width: var(--wrap); margin-inline: auto; }

/* --- Type ------------------------------------------------------------- */

h1, h2, h3 { font-family: var(--display); color: var(--alloy); margin: 0; font-weight: 600; }

h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.01em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  margin-bottom: .75rem;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

em { color: var(--alloy); }

/* --- Header ----------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(21, 4, 8, .84);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--line);
  padding: .8rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 2rem;
}

.mark {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--alloy);
  margin-right: auto;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}
.mark::before {
  content: '';
  width: .78rem;
  height: .78rem;
  background: var(--ruby-lit);
  clip-path: var(--octagon);
  flex: none;
}
.mark:hover { color: #fff; }

.nav { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.nav a {
  font-size: .92rem;
  color: var(--alloy-2);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--alloy); }
.nav a.is-current { color: var(--alloy); border-bottom-color: var(--ruby-lit); }

/* Period black-and-silver plate */
.reg {
  margin: 0;
  background: #0b0908;
  color: #cfd2cd;
  border: 1px solid #6e716b;
  border-radius: 2px;
  padding: .1rem .5rem .15rem;
  font-size: 1rem;
  letter-spacing: .1em;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- Hero ------------------------------------------------------------- */

.hero { padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(2rem, 4vw, 3.5rem); }

.hero__head { padding-inline: var(--gutter); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}

/* The photograph is mounted, never cropped: it scales down to fit whichever
   of the window's width or height runs out first. */
.mount {
  margin: 0;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mount img {
  width: auto;
  height: auto;
  max-width: min(100%, 100rem);
  max-height: 76vh;
  max-height: min(76svh, 54rem);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .55);
  animation: rise 1s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.25rem); }
  to   { opacity: 1; transform: none; }
}

.mount figcaption {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--alloy-2);
  text-align: center;
}

/* --- Identity rail ---------------------------------------------------- */

.rail {
  background: var(--night-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) var(--gutter);
}

.rail dl {
  margin: 0;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.5rem 2.5rem;
}
.rail dt {
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ruby-lit);
  margin-bottom: .2rem;
}
.rail dd {
  margin: 0;
  color: var(--alloy);
  font-size: 1rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

/* --- Sections --------------------------------------------------------- */

.section { padding: clamp(4rem, 8.5vw, 8.5rem) var(--gutter); }
.section--raised { background: var(--night-2); }

.head {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.head::before {
  content: '';
  width: .55rem;
  height: .55rem;
  background: var(--ruby-lit);
  clip-path: var(--octagon);
  flex: none;
  transform: translateY(-.25em);
}

/* --- Three-column record ---------------------------------------------- */

.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.spec { list-style: none; margin: 0; padding: 0; }
.spec li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; }
.spec li:last-child { margin-bottom: 0; }
.spec li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .42rem;
  height: .42rem;
  background: var(--ruby);
  clip-path: var(--octagon);
}

/* --- Story blocks ----------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.story + .story { margin-top: clamp(3.5rem, 7vw, 6rem); }
.story--flip .story__media { order: -1; }

.story__media { margin: 0; }
.story__media img { width: 100%; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5); }
.story__media figcaption { margin-top: .7rem; font-size: .85rem; color: var(--alloy-2); }

/* --- History ---------------------------------------------------------- */

.history {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.history__body p { max-width: none; }
.history__body .lede { font-size: clamp(1.1rem, 1.7vw, 1.25rem); line-height: 1.6; color: var(--alloy); }

.archive {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.archive figure { margin: 0; }
.archive img { width: 100%; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5); }
.archive figcaption { margin-top: .75rem; font-size: .88rem; line-height: 1.5; color: var(--alloy-2); }

/* --- Provenance ------------------------------------------------------- */

/* The register page is supporting evidence, not the subject. The scan column
   scales with the window so text and image stay side by side well down into
   tablet widths, rather than dropping to a stack. */
/* Flexbox rather than grid here: flex-basis needs no math functions and no
   auto-fit track resolution, so it behaves identically in every browser. */
.prov {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(2rem, 5vw, 4rem);
}

.prov__text {
  flex: 1 1 20rem;
  min-width: 0;
}

.prov__doc {
  flex: 0 1 22rem;
  max-width: 22rem;
}
.prov__doc .shot { margin: 0; }
.prov__doc .shot img {
  background: #efece5;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
}
.prov__doc figcaption { padding-top: .7rem; font-size: .82rem; }

.regions {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  padding: 0;
}

/* Each row is a plain block: the date is an inline-block of fixed width with
   a real space after it, so the gap holds even if the column layout does not. */
.regions li {
  break-inside: avoid;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.regions__when {
  display: inline-block;
  min-width: 7rem;
  margin-right: .75rem;
  color: var(--ruby-lit);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 26rem) {
  .regions__when { min-width: 0; }
}

/* --- Galleries -------------------------------------------------------- */

.set + .set { margin-top: clamp(3rem, 6vw, 5rem); }

.set h3 {
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ruby-lit);
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}

.gallery { columns: 4 16rem; column-gap: 1.1rem; }

.shot { break-inside: avoid; margin: 0 0 1.6rem; }
.shot button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.shot img {
  width: 100%;
  transition: transform .55s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}
.shot button:hover img { transform: scale(1.035); opacity: .85; }
.shot figcaption {
  padding-top: .6rem;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--alloy-2);
  text-align: left;
}

/* --- Lightbox --------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: rgba(12, 2, 5, .97);
  color: var(--alloy);
}
.lightbox::backdrop { background: rgba(12, 2, 5, .97); }

.lightbox__stage {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  padding: 3.75rem 1rem 1.25rem;
  gap: 1rem;
}
.lightbox__stage img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }

.lightbox__meta {
  text-align: center;
  font-size: .95rem;
  color: var(--alloy);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.lightbox__count {
  display: block;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--alloy-2);
  margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}

.lb-btn {
  position: absolute;
  background: rgba(240, 237, 233, .08);
  border: 1px solid var(--line);
  color: var(--alloy);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  clip-path: var(--octagon);
}
.lb-btn:hover { background: var(--ruby); }
.lb-btn[hidden] { display: none; }
.lb-close { top: .9rem; right: .9rem; }
.lb-prev  { top: 50%; left: .9rem;  transform: translateY(-50%); }
.lb-next  { top: 50%; right: .9rem; transform: translateY(-50%); }

/* --- Footer ----------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 2.25rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-size: .9rem;
}
.site-foot p { margin: 0; max-width: none; }

@media (max-width: 46rem) {
  .nav { order: 3; width: 100%; gap: 1.15rem; }
  .nav a { font-size: .88rem; }
}