/* iamsambearfoot.com — a link page.
 *
 * Two sections: the mirrored wall of doors, then who she is beside her picture.
 * Feral Empire, plum half — plum and stone and gold. The only green on the page
 * belongs to the three door stills, which bring their own.
 */

:root {
  /* STONE IS THE PAGE, PLUM IS THE ROOM. Green appears nowhere in the
     chrome — the three door stills already carry plenty of it, so the page
     around them goes the other way rather than adding more.

     The python skin is tinted oxblood to match, which is what makes this the
     plum half rather than the green one. It also buys contrast: gold reads
     5.79:1 on plum against 5.10:1 on the deep green it replaces. */
  --stone:       #f4efe2;   /* Neutral · Ground — THE PAGE.                  */
  --plum:        #331723;   /* Primary · Lead — the ink on stone, and the
                               dark room's ground.                          */
  --plum-raised: #47202F;   /* Raised surfaces, card grounds, frames.        */
  --gold:        #bd9439;   /* Accent · Spark                               */

  /* Tints, for keylines, scrims and quieter text — not new colours. */
  --gold-line:  rgba(189, 148, 57, 0.34);
  --gold-faint: rgba(189, 148, 57, 0.12);

  /* On stone. Ink at 78% is the body copy; the full ink is for headings. */
  --ink-mute:   rgba(51, 23, 35, 0.88);
  --ink-line:   rgba(51, 23, 35, 0.18);

  /* On the dark room only. */
  --stone-mute: rgba(244, 239, 226, 0.74);
  --stone-label: rgba(244, 239, 226, 0.9);

  --display: 'Cinzel Decorative', 'Cinzel', Georgia, 'Times New Roman', serif;
  --heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --body:    'Lato', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gutter:  clamp(1.25rem, 5vw, 2.5rem);

  /* Two textures, one per half of the brand. The skin is green and belongs to
     the dark room; the paper is stone and belongs to the page. Neither ever
     appears on the other's ground. */
  --skin:  url('/assets/img/scales-room-1400.jpg');
  --paper: url('/assets/img/paper-stone-840.jpg');
}

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

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

body {
  margin: 0;
  background: var(--stone);
  color: var(--plum);
  font-family: var(--body);
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Warmth over the flat stone — the layered-radial trick the brand palette
     page uses on its own cream ground. Green and gold at a few per cent, so
     the page is warm without ever becoming a colour. */
  background-image:
    radial-gradient(at 12% 8%,  rgba(71, 32, 47, 0.07), transparent 42%),
    radial-gradient(at 88% 18%, rgba(189, 148, 57, 0.09), transparent 44%),
    radial-gradient(at 70% 88%, rgba(71, 32, 47, 0.06), transparent 46%);
  background-attachment: fixed;
}

/* The snake relief, laid over the stone rather than recoloured into it. The
   tile's own cream is darker than --stone, so at half opacity it reads as the
   texture in the paper instead of shifting the page off-colour — and the
   opacity is the one dial to turn if it ever wants to be quieter.

   Fixed, so it behaves as a ground the page moves across rather than a
   wallpaper that scrolls with it. z-index -1 puts it above body's own colour
   and below every section, which is what lets the dark room cover it cleanly. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--paper) repeat;
  background-size: 840px auto;
  /* 0.30, down from 0.55. At the higher value the relief was competing with
     the body copy — every serif in the tile sits in the same tonal band as the
     text on top of it, so the page read as busy rather than as paper. This is
     the one dial: it stays visible at the margins and stops arguing under the
     words. */
  opacity: 0.3;
}

@media (max-width: 45rem) {
  /* iOS repaints a fixed background on every scroll frame. Not worth it. */
  body { background-attachment: scroll; }
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--plum); }

/* Ink on stone, gold inside the dark room. A focus ring has to clear 3:1
   against what it sits on, and gold on stone does not. */
:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 2px;
}
.doors :focus-visible { outline-color: var(--gold); }
.doors a { color: var(--gold); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--plum);
  font-weight: 700;
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

/* Gold is unreadable on stone (2.45:1). Inside the dark room it stays gold.
   The only eyebrow left on stone is the social row’s “Find me”. */
.about .eyebrow { color: var(--ink-mute); }

/* ── Who she is ──────────────────────────────────────────────────────────────
   Section two of two: the picture in one column, everything she is in the
   other. No skin here. The room above already carries it, and this column is
   long-form reading — texture under body copy is the thing that made the
   contrast maths hard everywhere else on this page. */

.about {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0;
}

.about__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}

@media (min-width: 56rem) {
  .about__inner {
    /* The picture takes a fixed column and the words take the rest, so the
       text runs to the edge of the page instead of stopping halfway and
       leaving the right-hand half of the screen empty. */
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    align-items: start;
  }
  /* Sticky so the portrait stays with the reader down a long column rather
     than scrolling away in the first paragraph. */
  .about .portrait {
    position: sticky;
    top: clamp(1.5rem, 4vw, 3rem);
  }
}

/* A solid gold frame, the way Feral Empire HQ frames the same face. Gold is
   allowed here because a frame is a graphic, not a word — it is the one place
   the accent survives on stone. The source is only 660px wide, which is why
   the slot caps at 21rem: past that it is upscaling. */
.portrait {
  position: relative;
  margin: 0 auto;
  width: min(78vw, 21rem);
  border: 2px solid var(--gold);
  border-radius: 1rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1rem 2.5rem rgba(51, 23, 35, 0.16);
}

.portrait img {
  display: block;
  width: 100%;
  height: auto;
}

/* No vignette. It existed to sink the photo into a dark band; against stone
   the grey studio backdrop already sits quietly, and darkening the corners
   only muddies them. */

/* Her name. No text-shadow any more — it existed to stop letterforms breaking
   up over the skin's specular highlights, and there is no skin behind this
   now. Gold on the deep green measures 5.1:1, which clears AA outright. */
.about h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Deep green, not gold. Gold on stone measures 2.45:1 — it fails even the
     3:1 graphic bar, so on this half of the brand gold is a rule and a frame,
     never a word. The ink is 12.5:1. */
  color: var(--plum);
  margin: 0 0 0.6rem;
}

.about .standfirst {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: 0.05em;
  color: var(--plum-raised);
  margin: 0 0 2rem;
}

/* ── The story ───────────────────────────────────────────────────────────── */

/* No max-width and no auto margins: the column beside the portrait IS the
   measure now, and capping it again inside that column is exactly what left
   half the screen empty on the right. Ranged left, because it is prose sitting
   next to a picture — centring it would give it no edge to return to. */
.story {
  color: var(--ink-mute);
  line-height: 1.72;
}

.story .lede {
  font-size: 1.125em;
  /* 400, not 300. Lato Light at 21px over a relief texture is exactly the
     combination that turns "quiet" into "hard work". */
  font-weight: 400;
  color: var(--plum);
}

.story strong {
  font-weight: 700;
  color: var(--plum);
}

/* "I learned to build." — the hinge the whole page turns on. Set as display
   type because that is plainly how it was written: one line, on its own, and
   given a strip of skin so the page turns visibly as well as verbally. */
.turn {
  position: relative;
  isolation: isolate;
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--gold);
  text-align: center;
  margin: clamp(2.25rem, 5vw, 3rem) 0;
  padding: clamp(1.75rem, 4vw, 2.25rem) 0;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
  text-shadow: 0 2px 14px rgba(20, 8, 13, 0.95);
}

/* Three layers, top to bottom: a plate behind the words, a flat deep-green wash that
   holds the skin back to roughly a third, and the skin itself. Same bargain as
   the hall — full-strength texture at the edges where it is only ever
   looked at, near-solid ground under the type. Then masked at both ends so the
   strip emerges from the ground and returns to it rather than sitting in the
   column as a rectangle with two hard edges. */
.turn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(56% 78% at 50% 50%,
      rgba(20, 8, 13, 0.94) 0%,
      rgba(20, 8, 13, 0.90) 52%,
      rgba(20, 8, 13, 0) 100%),
    linear-gradient(rgba(51, 23, 35, 0.68), rgba(51, 23, 35, 0.68)),
    var(--skin) center / cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 26rem;
  /* Tighter underneath than above: it now opens the doors section directly off
     the doors section off the top of the page, so it needs air above it and only a breath below before the
     heading it introduces. */
  margin: clamp(2.5rem, 6vw, 3.75rem) auto clamp(1.5rem, 3vw, 2rem);
  color: var(--gold);
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Stone, not gold. The rules either side stay gold — they are graphics and
   clear the 3:1 bar at 4.20:1 — but the words between them are 12px, where the
   bar is 4.5:1 and gold on the oxblood skin only reaches 4.20. Warm type on
   warm texture was always going to be the tight one. */
.divider span {
  font-family: var(--heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-indent: 0.4em;   /* the tracking pushes the group left; put it back */
  text-transform: uppercase;
  color: var(--stone);
}

/* ── The three doors ─────────────────────────────────────────────────────── */

/* THE DARK ROOM, and the only one on the page. Full document width, so the
   hall reaches both edges with nothing but its own gutters taken back — and
   full-bleed dark, so it reads as a room cut into a stone page rather than as
   a panel sitting on it. The skin lives here and nowhere else on the ground.

   It carries the texture at section level rather than on the hall inside it,
   so the mobile rail gets the same room the desktop hall does. */
.doors {
  position: relative;
  isolation: isolate;
  background-color: var(--plum);
  color: var(--stone);
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(3rem, 7vw, 4.5rem);
  border-bottom: 1px solid var(--gold-line);
}

.doors::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Skin, held back by a wash and closed down at the edges so the corridor
     runs off into the dark instead of stopping at the viewport.

     0.84 rather than the 0.66 this started at. The skin is tinted oxblood now,
     and gold is a warm colour — against warm skin it lost the separation it
     had against green, and the 12px greeting measured 2.97:1. Darkening the
     wash is what buys it back; the relief still reads at this depth. */
  background:
    radial-gradient(96% 78% at 50% 42%,
      rgba(51, 23, 35, 0.84) 18%,
      rgba(51, 23, 35, 0.93) 76%,
      var(--plum) 100%),
    var(--skin) center / cover;
}

.doors h2 {
  max-width: 62rem;
  margin-inline: auto;
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: var(--stone);
  text-align: center;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
}

/* --- The rail ------------------------------------------------------------
   The ground state, and it works entirely on its own: scroll-snap does the
   scrolling, swiping and arrow-keying, and every card is a plain anchor in the
   tab order. deck.js is an enhancement on top of this, never a prerequisite. */

.deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 22rem);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Bleeds to both gutters so the last card is visibly cut — the cheapest
     possible signal that there is more to the right. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: 0.5rem 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
  cursor: grab;
}

.deck::-webkit-scrollbar { height: 3px; }
.deck::-webkit-scrollbar-track { background: var(--gold-faint); }
.deck::-webkit-scrollbar-thumb { background: var(--gold); }

.deck[data-dragging='true'] {
  cursor: grabbing;
  scroll-snap-type: none;
  /* A drag that crosses a card must not also fire that card's link. */
  user-select: none;
}

.deck[data-dragging='true'] * { pointer-events: none; }

.deck__card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--stone);
  transition: transform 160ms ease;
}

.deck__card:hover,
.deck__card:focus-visible { transform: translateY(-4px); }

.deck__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 1rem;
}

.deck__name {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--stone);
}

.deck__where {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-label);
}

.deck__line {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--stone-mute);
}

/* --- The stills ----------------------------------------------------------
   All three masters are authored at 1080x1350, exactly the 4:5 of the frame,
   so `cover` crops nothing at any size — it is here to keep an off-ratio
   replacement filling the card rather than letterboxing inside it. */

.shot {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--plum-raised);
  border: 1px solid var(--gold-line);
  border-radius: 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.shot--portrait { aspect-ratio: 4 / 5; }

.shot picture { display: block; width: 100%; height: 100%; }

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.deck__card:hover .shot,
.deck__card:focus-visible .shot {
  border-color: var(--gold);
  box-shadow: 0 0 2.25rem -0.5rem rgba(189, 148, 57, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .deck__card { transition: none; }
  .deck__card:hover, .deck__card:focus-visible { transform: none; }
}

/* --- The hall ------------------------------------------------------------
   Everything under [data-hall] is what deck.js layers on: the same cards, the
   same links, stood up in a dark room with a floor under them. Only the
   presentation changes — no content is added, moved or hidden, so a crawler, a
   screen reader and a visitor without JavaScript all see what they saw before. */

.deck[data-hall] {
  display: block;
  position: relative;
  height: clamp(28rem, 42vw, 38rem);
  overflow: hidden;
  /* Full-bleed: the hall runs off both edges of the page, which is what makes
     the far cards read as continuing rather than as stopping. `.doors` is
     already full document width, so this is its gutters given back — no vw,
     and therefore no scrollbar counted into the sum. */
  margin-inline: calc(var(--gutter) * -1);
  padding: 0;
  cursor: grab;
  scroll-snap-type: none;
  touch-action: pan-y;
}

.deck[data-hall][data-dragging='true'] { cursor: grabbing; }

/* The walls moved up to .doors, so the room is the whole section rather than
   just the hall inside it — which is what gives the mobile rail the same room
   the desktop hall gets. Nothing paints here any more. */

.hall__track {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

.deck[data-hall] .deck__card {
  position: absolute;
  top: 6%;
  left: 50%;
  width: clamp(10rem, 16vw, 15rem);
  /* Positioned by deck.js every frame; a transition would fight it. */
  transition: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

.deck[data-hall] .deck__card:hover,
.deck[data-hall] .deck__card:focus-visible { transform: none; }

/* The name goes ABOVE the card in the hall. Below, it would sit under the
   reflection and outside the clipped frame, so you could not tell what you
   were about to click. Above it is always visible, and it matches how a room
   like this is read: a small label over each frame, and the full name of the
   one you are facing spelled out underneath. */
.deck[data-hall] .deck__body {
  order: -1;
  padding: 0 0 0.875rem;
  text-align: center;
  /* Above the dimming scrim, so a name never becomes unreadable — but it still
     fades with depth, just more gently than the picture does. */
  position: relative;
  z-index: 4;
  opacity: calc(1 - var(--dim, 0) * 0.75);
  transition: opacity 220ms ease;
}

.deck[data-hall] .deck__name { font-size: 0.9375rem; letter-spacing: 0.06em; }

/* The whole card body is hidden in the hall, name included. At three cards the
   labels sit close enough that they overlapped each other and the cards behind
   them, and the readout under the room already names the one you are facing —
   so the label above the card was both colliding and redundant. All of it
   stays in the markup for a crawler, a screen reader and the no-JS rail. */
.deck[data-hall] .deck__body { display: none; }

/* Distance from the front, written by deck.js. The cards that have turned away
   fall back into the dark rather than competing with the one you are looking
   at. Green-black rather than true black — this page has no black in it. */
.deck[data-hall] .deck__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(20, 8, 13, var(--dim, 0));
  transition: background-color 220ms ease;
}

/* The card at the front is lit: gold returns to the keyline and the still
   stops being a thing in a rack and becomes the thing on offer. */
.deck[data-hall] .deck__card[data-active='true'] .shot {
  border-color: var(--gold);
  box-shadow: 0 0 3.75rem -0.875rem rgba(189, 148, 57, 0.6);
}

/* --- The floor ----------------------------------------------------------- */

.deck__reflection {
  position: relative;
  margin-top: 3px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0.3;
  transform: scaleY(-1);
  pointer-events: none;
  /* Masked in the element's own coordinates, which the flip then inverts — so
     this reads as solid where it meets the card and gone by the far end. */
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 58%);
          mask-image: linear-gradient(to top, #000 0%, transparent 58%);
}

/* --- The readout --------------------------------------------------------- */
/* Which one you are facing, and how many there are. Decorative: the cards are
   the real navigation, so this is hidden from assistive technology rather than
   read out a second time. */

.hall__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.hall__title {
  margin: 0;
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--gold);
  text-align: center;
}

.hall__status {
  margin: 0;
  padding-left: 0.75rem;
  border-left: 2px solid var(--gold);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-label);
}

.hall__line {
  margin: 0;
  max-width: 30rem;
  text-align: center;
  font-size: 1rem;
  color: var(--stone-mute);
}

.hall__count {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--stone-mute);
  font-variant-numeric: tabular-nums;
}

.hall__dots { display: flex; gap: 0.5rem; }

.hall__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.45;
  transition: width 260ms ease, opacity 260ms ease;
}

.hall__dots span[data-on='true'] {
  width: 22px;
  border-radius: 3px;
  opacity: 1;
}

/* The hall is a wide-screen room. Below 700px deck.js never builds it; this is
   belt and braces for the moment between a resize and the next layout. */
@media (max-width: 43.6875rem) {
  .deck[data-hall] { height: auto; overflow: visible; margin-inline: calc(var(--gutter) * -1); }
  .hall__nav { display: none; }
}

/* ── Foot ────────────────────────────────────────────────────────────────── */

/* A direct child of <main> now that the shell wrappers are gone, so it carries
   its own width and gutters rather than inheriting them. */
.foot {
  max-width: 72rem;
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
  padding: 1.75rem var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--ink-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.foot a { color: var(--plum); text-decoration-color: var(--ink-line); }
.foot a:hover, .foot a:focus-visible { color: var(--plum-raised); }

/* ── Find me ──────────────────────────────────────────────────────────────
   The social row. Every handle is `iamsambearfoot`, which is the whole reason
   this domain exists — so these are the page's real payload, not decoration,
   and they are visible anchors rather than only a line in the structured data.
   A `sameAs` nobody can click is a claim to a crawler and nothing to a reader. */

.social__label {
  margin-top: clamp(2.25rem, 5vw, 3rem);
  margin-bottom: 0.85rem;
}

.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* column-gap carries the rule between items; row-gap keeps wrapped lines
     apart without the rule ever hanging at the end of a line. */
  gap: 0.5rem 1.25rem;
}

.social a {
  display: inline-block;
  padding: 0.3rem 0;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-line);
  transition: color 160ms ease, border-color 160ms ease;
}

.social a:hover,
.social a:focus-visible {
  color: var(--plum-raised);
  border-bottom-color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  .social a { transition: none; }
}

/* ── Record and beats ─────────────────────────────────────────────────────
   The bio is written in single-line beats rather than paragraphs. Two of those
   runs are parallel lists — the credentials and the Echo launch figures — and
   left as <p>s they read as four short paragraphs that lost their nerve. Set
   as a record instead: a gold rule down the side, marking them as facts being
   read out rather than prose. */

.record {
  list-style: none;
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.25rem;
  border-left: 2px solid var(--gold);
  display: grid;
  gap: 0.55em;
  color: var(--plum);
}

.record li { margin: 0; }

.record strong { font-weight: 700; }

/* The Echo figures are the harder evidence of the two, so they get the weight
   the credentials above them do not. */
.record--echo {
  font-size: 1.0625em;
}

/* "Part strategist. / Part software founder. / …" — one thought per line, held
   together as a single paragraph so the run reads as a cadence rather than as
   four separate statements. */
.beats {
  line-height: 1.5;
  color: var(--plum);
}

/* The pivot strip's side mask assumes the line is comfortably narrower than
   the column. On a phone it is not — measured 321px of a 335px strip, so both
   ends of the gold sat out in the faded zone over bare stone at 2.45:1. Below
   the breakpoint the strip becomes a solid plate instead: hard edges, but
   rounded so it reads as a plate rather than a cut, and gold on dark all the
   way across. */
@media (max-width: 43.75rem) {
  .turn::before {
    -webkit-mask-image: none;
            mask-image: none;
    border-radius: 0.75rem;
  }
  .turn {
    padding-inline: 1rem;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }
}