/* ==========================================================================
   THE TITLE SCREEN
   ---------------------------------------------------------------------------
   THE ONLY FILE THAT STYLES THIS SECTION. Every selector starts with `.title`,
   a class that appears in no other stylesheet, so nothing in the other
   twenty-one sheets can reach in and nothing here leaks out. That is also why
   there is not one `!important` below — if one ever seems necessary, a second
   file has started reaching in and THAT is the bug.

   Scope: this section and nothing else. About, Building with, Socials, Connect
   and the footer are untouched.

   ---------------------------------------------------------------------------
   WHAT WAS WRONG, AND WHAT CHANGED

   The screen was one object and three footnotes: the ASCII mark at 73% of the
   viewport, a rotating word, and three small figures. That is what "barren"
   describes — not a lack of decoration, but a lack of composition. A single
   object cannot make a layout, and nothing on the screen explained who this
   was or what he does.

   It also had NO NAVIGATION. The only <nav> in the document sat in the footer,
   so the opening screen offered no route out of itself.

   The rebuild is a two-column editorial plate:

     - A masthead: identity left, sections centre, address right.
     - A left column carrying the hierarchy — eyebrow, statement, lead,
       actions — at four clearly different weights, so the eye is told what to
       read first.
     - A right column holding the mark. It is one element in a composition now
       rather than the composition, which is the single change that makes the
       screen read as designed.
     - A ruled foot carrying the proof and the scroll cue.

   Type is Archivo for anything that speaks and Plex Mono for anything that
   labels. One paper, one ink. No gold.
   ========================================================================== */

.title {
  --t-ink: #14120f;
  --t-soft: #3a3630;
  --t-mute: #5f5a51;
  --t-faint: #8a8478;
  --t-rule: rgb(20 18 15 / 0.14);
  --t-rule-soft: rgb(20 18 15 / 0.07);
  --t-live: #39548f;

  /* THE STACKS ARE DECLARED HERE, NOT INHERITED. `--sans` does not exist in
     tokens.css — only `--mono` and `--prose` (a serif) do — so every
     `var(--sans, …)` in this file was silently taking its fallback, and any
     element that did not set a family at all inherited the BODY font, which
     is Plex Mono. That is why the lead paragraph rendered as monospace.
     Declared locally so this section owns its own typography. */
  --t-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --t-mono: "Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --t-pad: clamp(22px, 6vw, 84px);
  --t-max: 80rem;

  /* Everything inside inherits the sans unless it asks for the mono. */
  font-family: var(--t-sans);

  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 100svh;
  height: 100svh;
  gap: 0.85rem;
  padding: clamp(2.55rem, 5.1vh, 3.75rem) var(--t-pad) calc(env(safe-area-inset-bottom, 0px) + 3.15rem);
  background: var(--field, #f6f6f4);
  color: var(--t-ink);
  perspective: 1280px;
  perspective-origin: 50% 38%;
  overflow: hidden;
}

/* The pixel-harbour plate and its wash stay switched OFF but defined — the
   artwork returns by changing this one `display` to `block`. */
.title__plate,
.title__wash {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.title__plate {
  background-image: url("../public/backgrounds/mediterranean-pixel-enhanced-4k.png");
  background-position: 64% 46%;
  background-size: cover;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

/* A single hairline at the tear — not a scanline wash. */
.title__glitch {
  display: none;
}

.title.is-glitching .title__glitch {
  opacity: var(--glitch-amt, 1);
  background: none;
  box-shadow: none;
}

.title__glitch::before,
.title__glitch::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--glitch-top, 42%);
  height: 1px;
}

.title__glitch::before {
  background: rgb(20 18 15 / 0.32);
  transform: translateX(var(--echo-ax, 0px));
}

.title__glitch::after {
  top: calc(var(--glitch-top, 42%) + 1px);
  background: rgb(57 84 143 / 0.28);
  transform: translateX(var(--echo-bx, 0px));
}

/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.title__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  width: 100%;
  max-width: var(--t-max);
  margin-inline: auto;
  padding-block: clamp(1.1rem, 2.4svh, 1.75rem);
  border-bottom: 1px solid var(--t-rule-soft);
}

.title__id {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  font-family: var(--t-sans);
  font-size: 0.9rem;
  font-weight: 560;
  letter-spacing: -0.012em;
  color: var(--t-ink);
  text-decoration: none;
  white-space: nowrap;
}

.title__id small {
  font-family: var(--t-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--t-mute);
}

.title__nav {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.5rem);
}

.title__nav a {
  position: relative;
  font-family: var(--t-mono);
  font-size: 0.8125rem;
  color: var(--t-mute);
  text-decoration: none;
  padding-block: 0.3rem;
  transition: color 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

/* The underline is DRAWN from the left rather than faded in, so the hover
   reads as the link being marked rather than as a state swapping. */
.title__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.title__nav a:hover,
.title__nav a:focus-visible {
  color: var(--t-ink);
}

.title__nav a:hover::after,
.title__nav a:focus-visible::after {
  transform: scaleX(1);
}

.title__cta {
  font-family: var(--t-mono);
  font-size: 0.8125rem;
  color: var(--t-ink);
  text-decoration: none;
  border-bottom: 1px solid rgb(20 18 15 / 0.3);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: border-color 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.title__cta:hover {
  border-color: var(--t-ink);
}

/* ==========================================================================
   THE BODY — two columns
   ---------------------------------------------------------------------------
   7 / 5. The type column is the wider of the two on purpose: it is carrying
   four levels of information and the mark is carrying one.
   ========================================================================== */

.title__inner {
  position: relative;
  z-index: 5;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ---- the type column --------------------------------------------------- */

.title__lede {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  width: 100%;
}

.title__lockup {
  position: relative;
  width: 100%;
  margin-top: clamp(1.4rem, 3.5vh, 2.5rem);
}

/* ---- the mark ---------------------------------------------------------- */

.title__markwrap {
  container-type: inline-size;
  width: min(100%, 92rem);
  margin: 0;
  pointer-events: none;
}

.title__given {
  margin: 0 0 0.02em;
  padding-left: calc(100% * 21 / 70);
  font-family: var(--t-sans);
  font-size: clamp(3.1rem, 11cqi, 7.25rem);
  font-weight: 640;
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.045em;
  line-height: 0.82;
  color: var(--t-ink);
}

.title__mark {
  margin: 0;
  font-family: var(--t-mono);
  font-size: calc(100cqi / 70);
  line-height: 0.7;
  white-space: pre;
  color: var(--t-ink);
  text-rendering: optimizeSpeed;
  font-weight: 700;
  opacity: 1;
}

.title__copy {
  /* Own the palette so this block still reads when it sits in About,
     outside `.title`. */
  --t-ink: #14120f;
  --t-soft: #3a3630;
  --t-mute: #5f5a51;
  --t-rule: rgb(20 18 15 / 0.14);
  --t-live: #39548f;
  --t-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --t-mono: "Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-family: var(--t-sans);

  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.55rem, 1.2vh, 0.9rem);
  margin: 0 0 clamp(2.25rem, 4.5vh, 3.5rem);
  padding: 0;
  max-width: 42rem;
}

/* THE STATEMENT. Two lines: Building [topic] / to [action]. */
.title__statement {
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12em;
  font-family: var(--t-sans);
  font-size: clamp(2.7rem, 1.05rem + 4.6vw, 5.15rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 620;
  font-variation-settings: "wdth" 94;
  color: var(--t-ink);
}

.title__lead {
  margin: 0;
  /* Wide enough to set in TWO lines rather than three. The third line was
     costing ~29px of the screen, and that 29px is the artwork's. */
  max-width: 54ch;
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  line-height: 1.32;
  letter-spacing: -0.008em;
  color: var(--t-soft);
  text-wrap: pretty;
}

#about .title__copy,
#about .about__lead {
  --t-ink: #14120f;
  --t-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

#about .about__statement.title__statement {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  font-family: var(--t-sans);
  font-size: 1rem;
  font-weight: 400;
  font-variation-settings: "wdth" 100, "wght" 400;
  letter-spacing: normal;
  line-height: 1;
  gap: 0;
  text-align: center;
}

#about .about__statement .title__line--hero {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  letter-spacing: normal;
  text-align: center;
}

#about .about__statement .title__stem {
  display: block;
  width: 100%;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2.2px #000;
  paint-order: fill stroke;
  font-size: clamp(3.2rem, 1.95rem + 3vw, 4.6rem);
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

#about .about__statement .title__line--tagline {
  position: absolute;
  right: max(0px, calc((100% - var(--roll-slot-w, 70%)) / 2));
  top: calc(var(--roll-word-h, 1em) + 0.28rem);
  bottom: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-end;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  font-family: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 78, "wght" 300;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

#about .title__accent {
  color: #3c3a36;
  font-weight: 400;
  font-style: normal;
  letter-spacing: inherit;
}

#about .title__amp {
  display: inline-block;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  letter-spacing: inherit;
  padding-right: 0;
  margin-right: 0.22em;
  line-height: 1;
}

#about .title__lead {
  max-width: 36rem;
  margin: 0 auto;
  font-family: var(--t-sans);
  font-size: clamp(1.05rem, 0.94rem + 0.42vw, 1.22rem);
  line-height: 1.55;
  letter-spacing: -0.014em;
  color: var(--t-soft);
  text-align: center;
  text-wrap: pretty;
}

/* CONNECT OPENER. Same statement + dek as the about philosophy block,
   so the page does not switch voices when it asks you to write. */
#connect .title__copy,
#connect .connect__block {
  --t-ink: #14120f;
  --t-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
}

#connect .title__accent {
  color: var(--t-ink);
}

#connect .connect__title {
  display: block;
  width: 100%;
  margin: 0 0 1.25rem;
  font-family: var(--t-sans);
  font-size: clamp(3.4rem, 1.4rem + 7vw, 6.75rem);
  font-weight: 620;
  font-variation-settings: "wdth" 94;
  letter-spacing: -0.042em;
  line-height: 0.92;
  text-transform: none;
  text-align: center;
  color: var(--t-ink);
}

#connect .connect__dek {
  max-width: 36rem;
  margin: 0 auto 1.75rem;
  font-family: var(--t-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.72;
  letter-spacing: 0.002em;
  color: var(--t-soft);
  text-align: center;
}

.title__practices {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
  flex: 0 1 auto;
  gap: clamp(0.5rem, 2vw, 0.9rem);
  width: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--t-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--t-ink);
}

.title__practices li {
  flex: 0 0 auto;
  white-space: nowrap;
}

.title__meta {
  position: relative;
  z-index: 5;
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem 2rem;
  width: 100%;
  margin: 0;
}

.title__dock {
  position: static;
  z-index: 5;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin: 0;
  max-width: none;
}

.title__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  margin-top: 0;
}

.title__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--t-ink);
  text-decoration: none;
  transition: color 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.title__btn span {
  transition: transform 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.title__btn:hover,
.title__btn:focus-visible {
  color: var(--t-soft);
}

.title__btn:hover span {
  transform: translateX(3px);
}

.title__btn--quiet {
  color: var(--t-mute);
}

.title__btn--quiet:hover,
.title__btn--quiet:focus-visible {
  color: var(--t-ink);
}

/* ---- the switching word ------------------------------------------------
   Four curated companions to Archivo — see roll-words.css for pairing. */
.title__line {
  display: flex;
  align-items: baseline;
  gap: 0;
  height: 1.12em;
  white-space: nowrap;
}

.title__roll {
  display: inline-block;
  text-align: left;
  vertical-align: baseline;
}

.title__roll-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}

.title__roll-list > * {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.title__roll-list > .is-on:not(.is-animating) {
  position: relative;
  opacity: 1;
  z-index: 1;
}

#about .about__statement .title__roll {
  display: block;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: var(--roll-slot-h, 1.12em);
  margin-inline: auto;
  overflow: visible;
}

#about .about__statement .title__roll-sizer {
  display: none;
}

#about .about__statement .title__roll-list {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: var(--roll-slot-h, 1.12em);
  overflow: hidden;
}

#about .about__statement .title__roll-list > * {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: none;
  pointer-events: none;
  text-align: center;
}

#about .about__statement .title__roll-list > .is-on:not(.is-animating) {
  opacity: 1;
  z-index: 1;
}

/* ==========================================================================
   THE RECORD — three figures, no boxes
   ========================================================================== */

.title__record {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.35em;
}

.title__record li {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--t-sans);
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.title__record li + li {
  padding-left: 0;
}

.title__record li:last-child {
  padding-right: 0;
}

.title__record b {
  font-weight: 620;
  font-size: 0.95rem;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--t-ink);
}

.title__record li:nth-child(1) b {
  color: #c0392b;
}

.title__record li:nth-child(2) b {
  color: #2d8a4e;
}

.title__record li:nth-child(3) b {
  color: #2563a8;
}

.title__record li > span:not(.title__record-note) {
  font-family: var(--t-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--t-mute);
}

.title__record li:hover > span:not(.title__record-note),
.title__record li:focus > span:not(.title__record-note) {
  color: var(--t-ink);
}

.title__record-note {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 0.45rem);
  z-index: 6;
  width: max-content;
  max-width: min(20rem, 58vw);
  white-space: normal;
  padding: 0.15em 0.1em;
  border: 0;
  background: var(--field, #f6f6f4);
  font-family: var(--t-mono);
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--t-soft);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

.title__record li:hover .title__record-note,
.title__record li:focus .title__record-note {
  opacity: 1;
}

.title__record li:last-child .title__record-note {
  left: auto;
  right: 0;
}

/* ---- title foot: topics land as one row, then stats one by one ---------- */

.title__practices,
.title__record li {
  opacity: 0;
}

.title__record li:nth-child(1) { --foot-delay: 620ms; }
.title__record li:nth-child(2) { --foot-delay: 900ms; }
.title__record li:nth-child(3) { --foot-delay: 1180ms; }

html.is-ascii-ready:not(.is-ascii-intro) .title__practices {
  animation: title-topics-in 0.88s cubic-bezier(0.16, 0.84, 0.32, 1) 80ms both;
}

html.is-ascii-ready:not(.is-ascii-intro) .title__record li {
  animation: title-foot-in-up 0.48s cubic-bezier(0.16, 1, 0.3, 1) var(--foot-delay, 0ms) both;
}

@keyframes title-topics-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.7rem, 0);
  }
  42% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes title-foot-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 0.4rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .title__lockup {
    margin-top: clamp(0.6rem, 2vh, 1.4rem);
  }

  .title__given {
    font-size: clamp(2.4rem, 12vw, 4.2rem);
    padding-left: 0;
  }

  .title__lede {
    padding-block: clamp(0.5rem, 2svh, 1.5rem);
  }

  .title__statement {
    font-size: clamp(2.2rem, 6.4vw, 3.4rem);
  }
}

@media (max-width: 720px) {
  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    height: 100svh;
    padding:
      max(2.25rem, env(safe-area-inset-top, 0px) + 1.2rem)
      1rem
      calc(env(safe-area-inset-bottom, 0px) + 1rem);
    gap: 0.75rem;
    overflow: hidden;
    perspective: 1100px;
    perspective-origin: 50% 36%;
  }

  .title__cta {
    display: none;
  }

  .title__bar {
    gap: 1rem;
  }

  .title__nav {
    gap: clamp(0.85rem, 3.4vw, 1.5rem);
  }

  .title__meta {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    overflow: visible;
  }

  .title__record {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25em 0.65em;
    overflow: visible;
  }

  .title__record li,
  .title__record li + li {
    padding: 0;
    border: 0;
  }

  .title__record b {
    font-size: clamp(0.72rem, 3.1vw, 0.82rem);
  }

  .title__record li {
    gap: 0.12em;
  }

  .title__record li > span:not(.title__record-note) {
    font-size: clamp(0.52rem, 2.2vw, 0.58rem);
    letter-spacing: 0.02em;
  }

  /* Hover-only notes — sit below each stat, not above into practices. */
  .title__record-note,
  .title__record li:last-child .title__record-note {
    top: calc(100% + 0.32rem);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(9.5rem, 28vw);
    padding: 0.2em 0.35em;
    background: var(--field, #f6f6f4);
    font-size: 0.55rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-align: center;
    opacity: 0;
    z-index: 8;
  }

  .title__record li:hover .title__record-note,
  .title__record li:focus .title__record-note {
    opacity: 1;
  }

  .title__practices {
    flex: 0 0 auto;
    justify-content: center;
    gap: clamp(0.42rem, 2.1vw, 0.72rem);
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: 0;
    font-size: clamp(0.68rem, 3vw, 0.84rem);
    font-weight: 650;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 520px) {
  .title__nav a,
  .title__id {
    font-size: 0.75rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .title {
    min-height: 0;
  }

  .title__meta {
    padding-block: 0.5rem;
  }
}

/* ==========================================================================
   THE CUTOUT — a piece of media turning in space, not a plate
   ========================================================================== */

.title__display {
  position: relative;
  margin-left: auto;
  z-index: 3;
  width: min(52%, 32rem);
  height: clamp(10rem, 28vh, 18rem);
  padding: 0 0 1.25rem;
  background: none;
  border: 0;
  overflow: visible;
  perspective: 1100px;
}

.title__display::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0.2rem;
  height: 1.35rem;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(20 18 15 / 0.32), rgb(20 18 15 / 0) 72%);
  filter: blur(7px);
}

.title__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: none;
  border: 0;
  box-shadow: none;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.title__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.title__face--back {
  transform: rotateY(180deg);
}

.title__face img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgb(20 18 15 / 0.28));
}

.title__slides {
  display: none;
}

@media (max-width: 1000px) {
  .title__display {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(100%, 30rem);
    height: clamp(11rem, 38vw, 16rem);
    margin-top: 2.75rem;
    margin-left: auto;
  }
}