/* ==========================================================================
   porschegirlct.com
   Direction: paddock editorial. The black of a night paddock, bone-white type,
   Guards Red as the only structural accent. The racing section switches to her
   actual Gulf livery; the work section inverts to bone paper and black ink.
   ========================================================================== */

:root {
  /* colour */
  --ink:        #0A0A0B;
  --ink-2:      #121214;
  --ink-3:      #1B1B1E;
  --bone:       #EDE9E1;
  --bone-2:     rgba(237, 233, 225, 0.62);
  --bone-3:     rgba(237, 233, 225, 0.34);
  --hair:       rgba(237, 233, 225, 0.14);
  --guards:     #D5001C;   /* Porsche Guards Red */
  --gulf-blue:  #7FC5DF;
  --gulf-amber: #F26A21;

  /* type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* rhythm */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --rule: 1px solid var(--hair);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* grain ------------------------------------------------------------------ */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* type primitives -------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -0.02em;
  margin: 0;
}
.label {
  font-family: var(--mono);
  font-size: clamp(9.5px, .72vw, 11.5px);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--bone-3);
  margin: 0;
}
.serif-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* nav -------------------------------------------------------------------- */
/* Glass, not blend modes. mix-blend-mode: difference looked clever over dark
   photography and became unreadable the moment the hero was pale metal or sky.
   A tinted, blurred panel is legible over anything and costs one paint. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem var(--gut);
  background: rgba(10, 10, 11, 0.44);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(237, 233, 225, 0.10);
}
/* Browsers without backdrop-filter get an honest solid instead of a pale wash. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(10, 10, 11, 0.86); }
}
.nav__mark {
  font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; text-decoration: none; color: var(--bone);
}
.nav__links { display: flex; gap: 1.6rem; }
.nav__links a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; text-decoration: none; color: var(--bone); opacity: .78;
  transition: opacity .25s, color .25s;
}
.nav__links a:hover { opacity: 1; }
@media (max-width: 720px) { .nav__links a:not(.nav__links a:last-child) { display: none; } }

/* hero ------------------------------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.62) 0%, rgba(10,10,11,.12) 34%, rgba(10,10,11,.86) 100%);
}
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--gut) clamp(2rem, 6vh, 4.5rem);
}
.hero__title {
  font-size: clamp(3.1rem, 12.5vw, 12rem);
  max-width: 15ch;
}
.hero__title .thin { font-weight: 300; font-stretch: 100%; display: block; }
.hero__rule { height: 3px; background: var(--guards); width: clamp(64px, 12vw, 190px); margin: 1.4rem 0 1.1rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; align-items: baseline; }
.hero__sub { font-size: clamp(1.05rem, 2vw, 1.6rem); color: var(--bone-2); }

/* reveal ----------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.rise.in { opacity: 1; transform: none; }
.hero .rise { transition-delay: calc(var(--i, 0) * 110ms); }

/* section shell ---------------------------------------------------------- */
.section { padding: clamp(4.5rem, 11vh, 9rem) 0; border-top: var(--rule); }
.wrap { padding-inline: var(--gut); }
.sechead { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem; align-items: start; margin-bottom: clamp(2rem, 5vh, 3.6rem); }
.sechead__num { font-family: var(--mono); font-size: clamp(11px, 1vw, 13px); color: var(--guards); letter-spacing: .16em; padding-top: .55em; }
.sechead__title { font-size: clamp(2.1rem, 7.2vw, 6.4rem); }
.sechead__note { grid-column: 2; max-width: 46ch; color: var(--bone-2); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.sechead__note em { font-family: var(--serif); font-size: 1.12em; color: var(--bone); }

/* full-bleed plate ------------------------------------------------------- */
.plate { position: relative; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.plate img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
@media (max-width: 720px) { .plate img { aspect-ratio: 4 / 3; } }
.plate__cap {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem var(--gut) 0; border-top: var(--rule); margin-top: .7rem;
}

/* gallery ---------------------------------------------------------------- */
/* Repeating rhythm of 7, each row summing to exactly 12 so no holes appear:
   row A  8 + 4   row B  6 + 6   row C  4 + 4 + 4 */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.4rem, 1vw, .85rem); grid-auto-flow: row dense; }
.grid figure { margin: 0; grid-column: span 4; position: relative; overflow: hidden; cursor: zoom-in; background: var(--ink-2); }
.grid figure:nth-child(7n+1) { grid-column: span 8; }
.grid figure:nth-child(7n+2) { grid-column: span 4; }
.grid figure:nth-child(7n+3) { grid-column: span 6; }
.grid figure:nth-child(7n+4) { grid-column: span 6; }
@media (max-width: 900px) {
  .grid figure, .grid figure:nth-child(7n+1), .grid figure:nth-child(7n+2),
  .grid figure:nth-child(7n+3), .grid figure:nth-child(7n+4) { grid-column: span 6; }
}
/* Aspect ratio scales with column span so every item in a row is the SAME HEIGHT.
   A 3:2 image spanning 8 columns is twice as tall as one spanning 4, which left
   holes under the narrow items. Widen the ratio in proportion instead. */
.grid figure               { aspect-ratio: 3 / 2; }    /* span 4 */
.grid figure:nth-child(7n+3),
.grid figure:nth-child(7n+4) { aspect-ratio: 4.5 / 2; } /* span 6 */
.grid figure:nth-child(7n+1) { aspect-ratio: 6 / 2; }   /* span 8 */
.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s; }
@media (max-width: 900px) {
  .grid figure, .grid figure:nth-child(7n+1),
  .grid figure:nth-child(7n+3), .grid figure:nth-child(7n+4) { aspect-ratio: 3 / 2; }
}
.grid figure:hover img { transform: scale(1.035); }
.grid figure::after {
  content: attr(data-n);
  position: absolute; left: .7rem; bottom: .55rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: #fff;
  opacity: 0; transition: opacity .35s; text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.grid figure:hover::after { opacity: .85; }

/* garage index ----------------------------------------------------------- */
.index { border-top: var(--rule); }
.index a {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.5rem; align-items: baseline;
  padding: clamp(.9rem, 2.4vh, 1.5rem) 0; border-bottom: var(--rule);
  text-decoration: none; transition: padding-left .4s cubic-bezier(.16,1,.3,1), color .3s;
}
.index a:hover { padding-left: 1.1rem; color: var(--guards); }
.index__n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--bone-3); }
.index__name { font-family: var(--display); font-weight: 800; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.3rem, 3.6vw, 2.9rem); line-height: 1; letter-spacing: -0.015em; }
.index__yr { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--bone-3); }

/* restoration timeline --------------------------------------------------- */
.rail {
  display: flex; gap: clamp(.6rem, 1.4vw, 1.2rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--gut) 1.4rem;
  scrollbar-width: thin; scrollbar-color: var(--guards) transparent;
}
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--guards); }
.rail::-webkit-scrollbar-track { background: var(--hair); }
.step { scroll-snap-align: start; flex: 0 0 clamp(240px, 30vw, 420px); }
.step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ink-2); }
.step__bar { display: flex; align-items: baseline; gap: .7rem; padding-top: .7rem; border-top: 2px solid var(--guards); margin-top: .7rem; }
.step__n { font-family: var(--mono); font-size: 10.5px; color: var(--guards); letter-spacing: .16em; }
.step__de { font-family: var(--display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: clamp(.92rem, 1.5vw, 1.15rem); letter-spacing: -0.01em; }
.step__en { font-family: var(--serif); font-style: italic; color: var(--bone-3); font-size: .98rem; }

/* racing — palette flips to her Gulf livery ------------------------------- */
#racing { background: var(--ink-2); }
#racing .sechead__num { color: var(--gulf-amber); }
#racing .grid figure::after { color: var(--gulf-blue); }
.livery { display: flex; gap: 0; height: 6px; margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.livery span { flex: 1; }
.livery span:nth-child(1) { background: var(--gulf-blue); }
.livery span:nth-child(2) { background: var(--gulf-amber); }
.livery span:nth-child(3) { background: var(--gulf-blue); }

/* the work — inverts ----------------------------------------------------- */
#work { background: var(--bone); color: var(--ink); }
#work .sechead__num { color: var(--guards); }
#work .sechead__note { color: rgba(10,10,11,.66); }
#work .sechead__note em { color: var(--ink); }
#work .label { color: rgba(10,10,11,.45); }
.holding {
  border: 1px solid rgba(10,10,11,.16);
  padding: clamp(1.6rem, 4vw, 3rem);
  display: grid; gap: 1rem; max-width: 62ch;
}
.holding__t { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.2; }

/* footer ----------------------------------------------------------------- */
.foot { border-top: var(--rule); padding: clamp(3rem, 7vh, 5rem) 0 2.5rem; }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.foot__grid a { text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.foot__grid a:hover { border-color: var(--guards); }
.foot__bot { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; margin-top: 3rem; padding-top: 1rem; border-top: var(--rule); }

/* lightbox --------------------------------------------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(6,6,7,.97); place-items: center;
}
.lb[open], .lb.on { display: grid; }
.lb img { max-width: 94vw; max-height: 86vh; object-fit: contain; }
.lb__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem var(--gut); border-top: var(--rule);
}
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--bone); cursor: pointer;
  font-family: var(--mono); font-size: 26px; padding: 1rem 1.2rem; opacity: .55;
  transition: opacity .25s;
}
.lb__btn:hover { opacity: 1; }
.lb__prev { left: 0; } .lb__next { right: 0; }
.lb__close { position: absolute; top: 1rem; right: var(--gut); font-size: 15px; letter-spacing: .2em; }

/* screenshot mode: pin viewport-relative heights so a tall capture window
   renders the true layout instead of stretching the hero. See ?shot in site.js. */
.shot .hero { height: 820px; min-height: 0; }
.shot .phero { min-height: 0; height: 760px; }
.shot .rise { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   PAPER — the work half of the site.
   Same type system, opposite polarity: bone paper, black ink. The cars are
   photographed in colour on a black field; the drawings are black on white,
   so the site inverts to meet them rather than forcing them into the dark.
   ========================================================================== */
body.paper {
  background: var(--bone);
  color: var(--ink-900);
}
body.paper .label        { color: rgba(10,10,11,.42); }
body.paper .sechead__num { color: var(--guards); }
body.paper .sechead__note{ color: rgba(10,10,11,.66); }
body.paper .sechead__note em { color: var(--ink-900); }
body.paper .section      { border-top: 1px solid rgba(10,10,11,.14); }
body.paper .foot         { border-top: 1px solid rgba(10,10,11,.14); }
body.paper .foot__bot    { border-top: 1px solid rgba(10,10,11,.14); }
body.paper .foot__grid a { border-bottom: 1px solid rgba(10,10,11,.18); }
body.paper .foot__grid a:hover { border-color: var(--guards); }
body.paper::after { opacity: .05; mix-blend-mode: multiply; }

/* paper hero — type only, no photograph. We have no approved artwork yet, and
   an art page that opens on typography reads as deliberate rather than empty. */
.phero {
  min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 8rem var(--gut) clamp(2.5rem, 7vh, 5rem);
}
.phero__title { font-size: clamp(3.4rem, 17vw, 15rem); }
.phero__rule  { height: 3px; background: var(--ink-900); width: clamp(64px, 14vw, 220px); margin: 1.6rem 0 1.2rem; }
.phero__sub   { font-size: clamp(1.15rem, 2.4vw, 2rem); max-width: 26ch; }

/* a series block */
.series { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem; padding: clamp(2rem,5vh,3.5rem) 0; border-bottom: 1px solid rgba(10,10,11,.14); }
.series__n   { font-family: var(--serif); font-style: italic; font-size: clamp(1.3rem,2.4vw,2rem); color: var(--guards); line-height: 1; padding-top: .1em; min-width: 1.6em; }
.series__t   { font-family: var(--display); font-weight: 800; font-stretch: 118%; text-transform: uppercase; font-size: clamp(1.6rem,5vw,3.4rem); line-height: .95; letter-spacing: -0.02em; margin: 0; }
.series__meta{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: rgba(10,10,11,.42); text-transform: uppercase; margin-top: .7rem; }
.series__body{ max-width: 52ch; margin-top: .9rem; color: rgba(10,10,11,.72); }

/* a line lifted off the work itself */
.tape {
  margin: clamp(3rem,9vh,6rem) 0;
  padding-left: clamp(1rem, 4vw, 3rem);
  border-left: 3px solid var(--guards);
}
.tape q { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 5.5vw, 4rem); line-height: 1.12; quotes: none; display: block; }
.tape figcaption { margin-top: 1rem; }

/* the crossing point between the two halves */
.cross {
  display: block; text-decoration: none;
  padding: clamp(2.5rem,7vh,5rem) var(--gut);
  background: var(--ink); color: var(--bone);
  transition: background .4s;
}
.cross:hover { background: #000; }
body.paper .cross { background: var(--ink); color: var(--bone); }
.cross__k { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); }
.cross__t { font-family: var(--display); font-weight: 800; font-stretch: 122%; text-transform: uppercase; font-size: clamp(2rem,8vw,6rem); line-height: .9; letter-spacing: -0.025em; margin-top: .4rem; }
.cross__t span { color: var(--guards); }

/* ==========================================================================
   DENSE — for sets in the hundreds. The 8/4/6/6/4/4/4 rhythm is an editorial
   layout and stops making sense past about twenty images; at 690 you want a
   contact sheet you can scan, not a magazine spread.
   ========================================================================== */
.grid--dense { grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 11vw, 168px), 1fr)); gap: 3px; }
.grid--dense figure,
.grid--dense figure:nth-child(7n+1),
.grid--dense figure:nth-child(7n+2),
.grid--dense figure:nth-child(7n+3),
.grid--dense figure:nth-child(7n+4) { grid-column: auto; aspect-ratio: 3 / 2; }
.grid--dense figure::after { display: none; }

.more {
  display: block; margin: 1.4rem auto 0;
  background: none; border: 1px solid var(--hair); color: var(--bone);
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  padding: .9rem 1.8rem; cursor: pointer; transition: border-color .3s, color .3s;
}
.more:hover { border-color: var(--guards); color: var(--guards); }
body.paper .more { color: var(--ink-900); border-color: rgba(10,10,11,.2); }

/* film ------------------------------------------------------------------- */
.film { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.film video { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; }
.film__cap { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem var(--gut) 0; border-top: var(--rule); margin-top: .7rem; }

/* ==========================================================================
   RESTORATION — told as a story, not a filmstrip.
   Six acts drawn from 690 frames. Vertical, because scrolling down is how
   time passes; a horizontal rail made a decade of work feel like a carousel.
   No dates are asserted anywhere: the EXIF is self-contradictory (arrival
   stamped 2004, the Texas find 2006) so the calendar is a question for
   Michelle, and the pictures carry the sequence on their own.
   ========================================================================== */
.act { border-top: var(--rule); padding: clamp(3rem, 8vh, 6.5rem) 0 0; }
.act__head { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 2rem; align-items: start; padding-inline: var(--gut); margin-bottom: clamp(1.6rem, 4vh, 2.8rem); }
.act__n { font-family: var(--serif); font-style: italic; font-size: clamp(1.6rem, 3.4vw, 3rem); color: var(--guards); line-height: .9; }
.act__t { font-family: var(--display); font-weight: 800; font-stretch: 122%; text-transform: uppercase; font-size: clamp(1.8rem, 6vw, 4.6rem); line-height: .9; letter-spacing: -0.02em; margin: 0; }
.act__de { font-family: var(--mono); font-size: clamp(9.5px,.72vw,11.5px); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); margin-top: .7rem; }
.act__say { grid-column: 2; max-width: 44ch; color: var(--bone-2); font-size: clamp(1rem, 1.5vw, 1.18rem); margin-top: .9rem; }
.act__say em { font-family: var(--serif); font-size: 1.12em; color: var(--bone); }

/* lead plate for each act, then a supporting run */
.act__lead img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--ink-2); }
@media (max-width: 720px) { .act__lead img { aspect-ratio: 4 / 3; } }
.act__run { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 18vw, 260px), 1fr));
            gap: clamp(.35rem,.8vw,.7rem); margin-top: clamp(.4rem,1vw,.7rem); }
/* act runs keep .grid for the lightbox hook, so the 8/4/6/6 span rhythm has to
   be switched off explicitly or it fights the auto-fit columns above. */
.act__run figure,
.act__run figure:nth-child(7n+1),
.act__run figure:nth-child(7n+2),
.act__run figure:nth-child(7n+3),
.act__run figure:nth-child(7n+4) { grid-column: auto; aspect-ratio: 3/2; }
.act__run figure { margin: 0; overflow: hidden; cursor: zoom-in; background: var(--ink-2); }
.act__run figure::after { display: none; }
.act__run img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16,1,.3,1); }
.act__run figure:hover img { transform: scale(1.04); }


/* A hero title that is one long unbreakable word needs a smaller clamp than one
   made of short words. "PORSCHE GIRL CT" breaks across three lines;
   "RESTORATION" is eleven characters that must fit on one, and at 125% width in
   Archivo 800 that is roughly 8.6em wide. 12.5vw overflowed and the hero's
   overflow:hidden clipped it silently. */
.hero__title--long { font-size: clamp(2.2rem, 9.5vw, 9rem); max-width: none; }

/* The work page inverts, so its glass has to invert too. */
body.paper .nav {
  background: rgba(237, 233, 225, 0.55);
  border-bottom-color: rgba(10, 10, 11, 0.10);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.paper .nav { background: rgba(237, 233, 225, 0.90); }
}
body.paper .nav__mark,
body.paper .nav__links a { color: var(--ink-900); }
body.paper .nav__links a:hover { color: var(--guards); }
.nav__links a:hover { opacity: 1; color: var(--guards); }

/* A series block was a text column in an empty field: on a wide screen the right
   two thirds were doing nothing. Give each series a face beside its words. */
@media (min-width: 900px) {
  .series--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
                   gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  .series--split .series__body { max-width: 42ch; }
}
.series__plate { margin: 0; }
.series__plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: rgba(10,10,11,.06); }
.series__plate figcaption { margin-top: .6rem; }
.series__head { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.6rem; align-items: start; }