/* ==========================================================================
   About (026, 029, 030, 033). Values from reference/about.dc.html (desktop,
   1440) and reference/about-mobile.dc.html (phone, 360). Below 760px the
   hand of cards becomes a deck you swipe through (033).
   Behaviour (hand, deck, catfetti, photos, quest log): js/about.js.
   Reduced motion: base.css switches every animation and transition off.
   ========================================================================== */

/* Handwritten headings (029): Reenie Beanie, bone, tilted -2deg.
   Not .hand: these wrap. */
.ab-title {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 56px;
  line-height: 56px;
  text-align: center;
  color: var(--bone);
  transform: rotate(-2deg);
}
.ab-title--left {
  text-align: left;
  transform-origin: left center;
}
.ab-sub {
  max-width: 480px;
  margin: var(--sp-16) auto 0;
  text-align: center;
  color: var(--bone-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   Pick a card: exactly the first screen, 'More about me' on its bottom edge
   -------------------------------------------------------------------------- */
.ab-cards {
  position: relative;
  z-index: 2; /* a picked card lifts over the intro */
  /* A swiped card flies off past the screen edge: never let it widen the
     page (a phone would zoom out and shift everything, header included).
     clip, not hidden: no scroll box, the cards can still lift upwards. */
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  min-height: max(560px, min(calc(100vh - var(--header-h)), 980px));
  min-height: max(560px, min(calc(100svh - var(--header-h)), 980px));
  padding-block: var(--sp-64) calc(var(--sp-32) + env(safe-area-inset-bottom, 0px));
}

.ab-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  width: max-content;
  margin: auto auto 0;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
}
.ab-more:hover {
  color: var(--bone);
}
.ab-more:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
.ab-more-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid #3A3936;
  border-radius: 50%;
  color: var(--bone);
  animation: abNudge 2s ease-in-out infinite;
}
.ab-more:hover .ab-more-ring {
  border-color: var(--bone);
}
.ab-more-ring svg {
  width: 16px;
  height: 16px;
}

/* --- The cards, both layouts -------------------------------------------- */
/* 3D chain: .pc-lift holds the perspective, .pc-in preserves 3D and
   turns. The button, .pc-lift and .pc-in never get overflow, filter,
   opacity, containment, mix-blend-mode or will-change: those flatten the
   3D. Dimming, gloss and shadow live inside the faces. Which face shows is
   decided by visibility alone, switched when the card is edge-on: no
   backface-visibility, which hid the whole deck in Firefox. If a browser
   flattens the 3D, the card still shows the right face the right way
   round (the two half-turns cancel out). */
.pc {
  overflow: visible; /* Firefox clips button content otherwise */
  padding: 0;
  border: 0;
  background: none;
  color: var(--bone);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pc:focus-visible {
  outline: none;
}
.pc:focus-visible .pc-face {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
.pc-lift,
.pc-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.pc-lift {
  perspective: 1400px;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.pc-in {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.pc-face {
  position: absolute;
  inset: 0;
  isolation: isolate; /* its shadow layer stays inside the face */
  border-radius: 10px;
}
/* The turn eases out, so 90deg comes at about 17% of its time: .12s of
   .7s turning back, .4s + .12s turning up on desktop, .1s of .6s in the
   deck. */
.pc-front {
  visibility: hidden;
  transition: visibility 0s .12s;
}
.pc-back {
  transition: visibility 0s .12s;
}
/* Dimming (the other cards while one is picked, the deck below the top
   card): a dark layer inside each face. A filter would show the turned
   face through in Safari and Firefox. */
.pc-dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 10px;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s;
}
/* The card's shadow, a layer inside each face */
.pc-face::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  box-shadow: var(--sx, 0) var(--sy, 18px) 40px rgba(0, 0, 0, .5);
  pointer-events: none;
}

/* Back: glossy tarot-style card, bone border, black face, thin yellow
   frame, the L1 logo (041) */
.pc-back {
  padding: var(--sp-8);
  background: var(--bone);
}
.pc-back::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 10px;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .16) 36%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 82%, rgba(255, 255, 255, .06) 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 38%);
  transition: background-position .6s cubic-bezier(.2, .7, .2, 1);
}
.pc-back-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 45%, #1E1D1B 0%, var(--ink) 70%);
}
.pc-back-in::before {
  content: '';
  position: absolute;
  inset: var(--sp-8);
  border: 1px solid var(--accent);
  border-radius: 3px;
}
.pc-logo {
  position: relative;
  display: block;
  width: 72%;
  height: auto;
}

/* Front: the fun fact. Everything scales with the card's width (--cw on
   .ab-deck), matching the reference at 208px; --fit (js/about.js)
   shrinks it further if a fact still doesn't fit, e.g. with a bigger
   system font. Words never break; nothing is clipped. */
.pc-front {
  --fit: 1;
  display: flex;
  flex-direction: column;
  justify-content: safe center; /* overflow would go down, never up out of reach */
  gap: 24px;
  gap: calc(clamp(8px, calc(var(--cw, 208px) * 0.1154), 24px) * var(--fit));
  padding: 20px;
  padding: clamp(12px, calc(var(--cw, 208px) * 0.0962), 20px);
  background: var(--card);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  transform: rotateY(180deg);
}
.st-big {
  display: block;
  max-width: 100%;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-stretch: var(--head-stretch);
  text-transform: uppercase;
  font-size: 28px;
  font-size: calc(clamp(10px, calc(var(--cw, 208px) * 0.1346), 28px) * var(--fit));
  line-height: 1.143; /* 32 / 28 */
  text-wrap: balance;
}
.st-line {
  display: block;
  color: var(--bone-muted);
  font-size: 16px;
  font-size: calc(clamp(10px, calc(var(--cw, 208px) * 0.0769), 16px) * var(--fit));
  line-height: 1.5;
  font-weight: 300;
}
.st-em {
  color: var(--bone);
  font-weight: 500;
}
.st-mute {
  color: var(--muted);
}
.st-small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-size: calc(clamp(9px, calc(var(--cw, 208px) * 0.0673), 14px) * var(--fit));
  line-height: 1.714; /* 24 / 14 */
  font-weight: 300;
}
.st-chart {
  display: grid;
  grid-template-columns: 1.25em 1fr;
  row-gap: .25em;
  font-size: 16px;
  font-size: calc(clamp(10px, calc(var(--cw, 208px) * 0.0769), 16px) * var(--fit));
  line-height: 1.25;
  font-weight: 300;
}

/* Ilio's card: her photo fills it, room for 'more catfetti' under the line */
.st-cat .pc-front {
  gap: 0;
}
.st-cat-ph {
  position: relative;
  display: block;
  flex: 1;
  min-height: 0;
  margin-bottom: var(--sp-12);
  border-radius: 4px;
  overflow: hidden;
}
.st-cat-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}
.st-cat-space {
  display: block;
  height: 24px;
}

/* Catfetti: rainbow cats out of Ilio's card. js/about.js puts them in a
   fixed layer over the page, centred on the card's real position at the
   moment they fire. */
.cf-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-catfetti);
  overflow: hidden;
  pointer-events: none;
}
.cf-layer.is-leaving {
  opacity: 0;
  transition: opacity .2s ease-out;
}
.cf {
  position: absolute;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  animation: catPop 1.1s cubic-bezier(.15, .7, .3, 1) forwards;
}
.cf-more {
  position: absolute;
  left: -114px;
  top: 186px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 28px;
  line-height: 32px;
  cursor: pointer;
  transform-origin: left center;
  animation: cfIn .3s ease-out .9s both;
}
.cf-more[hidden] {
  display: none;
}
.cf-more:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* --- Desktop: a hand of five (shared pivot below the cards, 16deg steps) - */
@media (min-width: 760px) {
  .ab-stage {
    display: contents;
  }
  .ab-deck-wrap {
    margin-top: clamp(24px, 7svh, 80px);
  }
  .ab-deck {
    --cw: 208px;
    position: relative;
    z-index: var(--z-deck);
    width: 0;
    height: 380px;
    margin-inline: auto;
  }
  .pc {
    position: absolute;
    top: 0;
    left: -104px;
    z-index: var(--z);
    width: 208px;
    aspect-ratio: 5 / 7;
    transform: var(--r);
    transform-origin: 50% 200%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  /* The deal: shuffles once, then fans out. js/about.js starts it once the
     fonts and the card backs are ready and the hand is on screen; until
     then the hand waits unseen (only with JS: .js on <html>). The fade is
     on the faces: opacity on the card would flatten it. */
  .js .ab-deck:not(.is-dealing):not(.is-dealt) .pc-face {
    opacity: 0;
  }
  .ab-deck.is-dealing .pc {
    animation: pcDeal 2s cubic-bezier(.45, 0, .2, 1) both;
  }
  .ab-deck.is-dealing .pc-face {
    animation: pcFadeIn .24s linear both;
  }
  .pc:focus-visible {
    z-index: 10;
  }
  .pc:focus-visible .pc-lift {
    transform: translateY(-24px);
  }
  /* Picked: swings upright to the middle, lifts out, then turns face up */
  .pc.is-sel {
    z-index: 20;
    transform: rotate(0deg);
  }
  .pc.is-sel .pc-lift {
    transform: translateY(-96px) scale(1.35);
  }
  .pc.is-sel .pc-in {
    transform: rotateY(180deg);
    transition-delay: .4s;
  }
  .pc.is-sel .pc-front {
    visibility: visible;
    transition-delay: .52s;
  }
  .pc.is-sel .pc-back {
    visibility: hidden;
    transition-delay: .52s;
  }
  .pc.is-sel .pc-face::before {
    box-shadow: 0 40px 80px rgba(0, 0, 0, .65);
  }
  .pc.is-dim .pc-dim {
    opacity: .5;
  }
}
/* Mouse only: no sticky hover after a tap (033) */
@media (min-width: 760px) and (hover: hover) and (pointer: fine) {
  .pc:hover {
    z-index: 10;
  }
  .pc:hover .pc-lift {
    transform: translateY(-24px);
  }
  .pc:hover .pc-back::after {
    background-position: 60% 0, 0 0;
  }
  .pc.is-sel:hover {
    z-index: 20;
  }
  .pc.is-sel:hover .pc-lift {
    transform: translateY(-96px) scale(1.35);
  }
  .cf-more:hover {
    transform: rotate(-3deg) scale(1.06);
  }
}
/* Short windows: the hand shrinks so 'More about me' stays on screen */
@media (min-width: 760px) and (max-height: 860px) {
  .ab-deck {
    zoom: .86;
  }
}
@media (min-width: 760px) and (max-height: 760px) {
  .ab-deck {
    zoom: .74;
  }
}

/* --------------------------------------------------------------------------
   Hi, I'm Luna: text left, polaroids right
   -------------------------------------------------------------------------- */
.ab-intro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-48) var(--sp-96);
  padding-block: var(--sp-96) var(--sp-48);
  scroll-margin-top: var(--sp-24);
}
.ab-intro-text {
  flex: 0 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}
.ab-copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-48);
  max-width: 640px;
  color: var(--bone-muted);
  font-size: var(--fs-lead);
  line-height: 40px;
  font-weight: 300;
}
.ab-copy p {
  margin: 0;
}
.ab-bal {
  text-wrap: balance;
}

/* Polaroid carousel: one photo at a time, each with its own tilt */
.ph {
  flex: 0 0 auto;
  width: clamp(240px, 26.4vw, 480px);
  width: clamp(240px, round(26.4vw, 8px), 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-24);
}
.ph-pol {
  position: relative;
  width: 100%;
  margin: 0;
  container-type: inline-size;
  transform: rotate(var(--rot));
}
.ph-print {
  display: block;
  padding: var(--sp-12) var(--sp-12) var(--sp-56);
  background: var(--frame);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.ph-print img,
.ph-print video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--pos);
}
.ph-still {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .ph-vid {
    display: none !important;
  }
  .ph-still {
    display: block !important;
  }
}
/* Caption always on one line in the white strip: scales with the
   polaroid width (28px max, 16px min) */
.ph-cap {
  position: absolute;
  left: var(--sp-16);
  right: var(--sp-16);
  bottom: calc(28px - .5em);
  color: var(--ink);
  font-size: clamp(16px, calc((100cqi - 32px) / 9.5), 28px);
  line-height: 1;
}
.ph-tape {
  top: -16px;
  left: 50%;
  width: 112px;
  height: 32px;
  transform: translateX(-50%) rotate(-5deg);
}
.ph-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
}
.ph-count {
  min-width: 48px;
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
/* Round outlined button: photo arrows, closing the quest log */
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid #3A3936;
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.ph-btn svg {
  width: 16px;
  height: 16px;
}
.ph-btn:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .ph-btn:hover {
    border-color: var(--bone);
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   Ilio's quest log (030): click her, she flops over and the log opens next
   to her. Side by side from 1024px up, scaling together; under her below.
   -------------------------------------------------------------------------- */
.ab-quest {
  padding-block: var(--sp-48) 248px;
}
.iq {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: var(--sp-128);
}
.iq-me {
  position: relative;
  flex: 0 0 auto;
}
.iq-ilio {
  position: relative;
  display: block;
  overflow: visible; /* Firefox clips button content otherwise */
  width: clamp(240px, 21vw, 304px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.iq-ilio:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 8px;
  border-radius: 12px;
}
/* Both poses carry their outline and a soft shadow, baked in with enough
   padding (at 304px: 56 left and right, 40 top, 96 bottom) that the
   shadow fades out completely inside the image; the negative margins take
   that padding back out, so her feet stay on the button's floor line */
.iq-ilio img {
  display: block;
  max-width: none;
  height: auto;
}
.iq-sitting {
  width: 136.842%;                           /* 416 / 304 */
  margin: -13.158% 0 -31.579% -18.421%;      /* 40, 96, 56 / 304 */
  transform-origin: 50% 82.42%;              /* her feet: 453 / 550 */
  transition: opacity .18s ease-in .12s, transform .5s cubic-bezier(.34, 1.5, .64, 1);
}
.iq-ilio .iq-lying {
  position: absolute;
  left: -27.621%;                            /* -9.2% - 56 / 304 */
  bottom: 0;
  width: 155.236%;                           /* 118.4% x 472 / 360 */
  margin-bottom: -31.579%;                   /* 96 / 304 */
  transform-origin: 50% 79.75%;              /* 379 / 475 */
  opacity: 0;
  transform: scale(.82, 1.12);
  transition: opacity .12s ease-out, transform .25s ease-in;
}
/* Open: she flops into her curled-up pose */
.iq-ilio.is-lie .iq-sitting {
  opacity: 0;
  transform: scale(1.12, .78);
  transition: opacity .12s ease-out .1s, transform .22s ease-in;
}
.iq-ilio.is-lie .iq-lying {
  opacity: 1;
  transform: none;
  transition: opacity .15s ease-out .16s, transform .55s cubic-bezier(.34, 1.6, .64, 1) .16s;
}
/* The bobbing yellow '!' (a white '?' once the log has been seen) */
.iq-bang {
  position: absolute;
  left: 55%;
  top: -104px;
  width: 56px;
  margin-left: -28px;
  color: var(--accent);
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-stretch: var(--head-stretch);
  font-size: 96px;
  line-height: 88px;
  text-align: center;
  text-shadow: 0 4px 0 var(--ink), 0 0 24px rgba(232, 197, 71, .35);
  transform-origin: 50% 100%;
  transition: opacity .3s ease-out .45s, transform .5s cubic-bezier(.34, 1.6, .64, 1) .45s;
}
.iq-bang-in {
  display: block;
  animation: iqBob 1.6s ease-in-out infinite;
}
.iq-bang.is-seen {
  color: var(--bone);
  text-shadow: 0 4px 0 var(--ink);
}
.iq-bang.is-taken {
  opacity: 0;
  transform: translateY(-40px) scale(.4);
  transition: opacity .2s ease-out, transform .3s ease-in;
}
@media (hover: hover) and (pointer: fine) {
  .iq-ilio:hover .iq-bang-in {
    animation-duration: .6s;
  }
  .iq-ilio:hover .iq-bang:not(.is-taken) {
    transform: scale(1.15);
    transition-delay: 0s;
  }
}
/* 'Thanks for getting it back...' under her once the log is closed */
.iq-note {
  position: absolute;
  left: 50%;
  top: calc(100% + 48px);
  width: 416px;
  margin: 0 0 0 -208px;
  color: var(--bone);
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s, transform .2s;
}
.iq-keep {
  white-space: nowrap; /* 'steal it again.' stays on one line */
}
.iq-note.is-on {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease-out .7s, transform .5s cubic-bezier(.2, .7, .2, 1) .7s;
}

/* The log slides out next to her */
.iq-wrap {
  flex: 0 0 auto;
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: max-width .55s cubic-bezier(.2, .7, .2, 1), margin-left .55s cubic-bezier(.2, .7, .2, 1);
}
.iq-wrap.is-on {
  max-width: 696px;
  margin-left: clamp(40px, 4.4vw, 64px);
}
.iq-log {
  width: min(696px, calc(100vw - 2 * var(--margin) - clamp(240px, 21vw, 304px) - clamp(40px, 4.4vw, 64px)));
  padding: var(--sp-32);
  border: 1.5px solid #3A3936;
  border-radius: 6px;
  background: #141412;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-24px);
  transition: opacity .2s, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .55s;
}
.iq-wrap.is-on .iq-log {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s .25s, transform .4s cubic-bezier(.2, .7, .2, 1) .25s, visibility 0s;
}
.iq-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-16);
}
.iq-lbl {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.iq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-32);
}
.iq-row {
  padding: var(--sp-16) 0;
  border-top: 1px solid #2A2A2A;
}
.iq-st {
  display: block;
  margin-bottom: var(--sp-8);
}
.iq-h {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
}
.iq-p {
  margin: 0;
  color: var(--bone-muted);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}
.iq-link,
.iq-link:hover {
  color: var(--bone);
  text-decoration: none;
}
.iq-link svg {
  display: inline-block; /* base.css makes svg a block */
  width: 16px;
  height: 16px;
  margin-left: var(--sp-8);
  vertical-align: 2px;
}
/* The one real quest: say hi (yellow, full width, reward on the right) */
.iq-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-24);
  align-items: baseline;
}
.iq-main .iq-st {
  grid-column: 1 / -1;
}
.iq-main .iq-st,
.iq-main a,
.iq-main a:hover {
  color: var(--accent);
  text-decoration: none;
}
.iq-main .iq-p {
  text-align: right;
}
.iq-link:hover,
.iq-main a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Below 1024px the log opens under her, full width */
@media (max-width: 1023.98px) {
  .iq {
    flex-direction: column;
  }
  .iq-wrap,
  .iq-wrap.is-on {
    width: 100%;
    max-width: 696px;
    margin: var(--sp-48) 0 0;
    transition: none;
  }
  .iq-wrap:not(.is-on) {
    display: none;
  }
  .iq-log {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .iq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Footer: the quest log's 'say hi' lands here */
.footer-note {
  margin: 0 0 var(--sp-16);
  color: var(--ink);
  font-size: 28px;
  line-height: 32px;
  transform: rotate(-2deg);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Phone (reference/about-mobile.dc.html, 033)
   -------------------------------------------------------------------------- */
@media (max-width: 759.98px) {
  .ab-title {
    font-size: 40px;
    line-height: 40px;
  }

  /* First screen: heading, subline and deck centred on it as one group;
     'More about me' on the bottom edge, at least 48px under the deck
     (the last row is never shorter than 'More about me' + 48px) */
  .ab-cards {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(124px, 1fr); /* 76 + 48 */
    min-height: max(560px, calc(100vh - var(--header-h)));
    min-height: max(560px, calc(100svh - var(--header-h)));
    padding-block: var(--sp-24) calc(var(--sp-24) + env(safe-area-inset-bottom, 0px));
  }
  .ab-stage {
    grid-row: 2;
  }
  .ab-more {
    grid-row: 3;
    align-self: end;
    margin: 0 auto;
  }
  .ab-deck-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--sp-24) auto 0;
  }

  /* The deck: a slightly messy stack, the cards below peek out, dimmed.
     Positions, drag and flip from js/about.js. */
  .ab-deck {
    --cw: clamp(176px, 27svh, 232px);
    position: relative;
    width: var(--cw);
    aspect-ratio: 5 / 7;
  }
  .pc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  .pc:not(.is-top) {
    cursor: default;
  }
  .pc:not(.is-top) .pc-dim {
    opacity: .4;
  }
  .pc.is-drag {
    transition: none;
    cursor: grabbing;
  }
  .pc-in {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .pc.is-flip .pc-in {
    transform: rotateY(180deg);
  }
  .pc.is-flip .pc-front {
    visibility: visible;
    transition-delay: .1s;
  }
  .pc.is-flip .pc-back {
    visibility: hidden;
    transition-delay: .1s;
  }
  /* First load: the deck shuffles once (each card slides out to one side
     and back, staggered), then the top card wiggles to hint at the swipe.
     Both started by js/about.js. */
  .ab-deck.is-dealing .pc {
    animation: sdShuffle .9s cubic-bezier(.45, 0, .2, 1) calc(var(--i, 0) * 70ms) both;
  }
  .pc.is-nudge .pc-in {
    animation: sdNudge 1.4s cubic-bezier(.45, 0, .2, 1) .3s 1 both;
  }
  .st-cat-space {
    height: 44px;
  }
  /* 'more catfetti': inside the card, sized by it, wraps rather than
     overflows */
  .cf-more {
    left: clamp(12px, calc(var(--cw) * .0962), 20px);
    right: clamp(12px, calc(var(--cw) * .0962), 20px);
    top: auto;
    bottom: clamp(6px, calc(var(--cw) * .0571), 12px);
    z-index: 30;
    height: auto;
    min-height: 44px;
    font-size: clamp(13px, calc(var(--cw) * .088), 22px);
    line-height: 1.1;
    white-space: normal;
    text-wrap: balance;
    animation-delay: .7s;
  }
  /* Intro: stacked, 40px between the paragraphs */
  .ab-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 88px;
    padding-block: var(--sp-64) var(--sp-24);
  }
  .ab-intro-text {
    flex: none;
  }
  .ab-copy {
    gap: var(--sp-40);
    line-height: 32px;
  }
  .ph {
    align-self: center;
    width: min(100%, 304px);
  }

  /* Quest log under Ilio, one column */
  .ab-quest {
    padding-block: var(--sp-48) 176px;
  }
  .iq {
    padding-top: var(--sp-96);
  }
  .iq-ilio {
    width: min(240px, 64vw);
  }
  .iq-bang {
    top: -80px;
    width: 48px;
    margin-left: -24px;
    font-size: 72px;
    line-height: 64px;
  }
  .iq-note,
  .iq-note.is-on {
    width: min(320px, calc(100vw - 32px));
    margin-left: 0;
    top: calc(100% + 40px);
    transform: translateX(-50%);
  }
  .iq-wrap,
  .iq-wrap.is-on {
    margin-top: var(--sp-40);
  }
  .iq-log {
    padding: 20px;
  }
  .iq-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .iq-main .iq-p {
    text-align: left;
  }

  /* Footer straight after the quest log */
  .about ~ .site-footer {
    margin-top: 0;
  }
  .footer-note {
    margin-bottom: var(--sp-8);
    font-size: 24px;
  }
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
/* Dealing the hand on load: rises in, shuffles twice, fans out */
@keyframes pcDeal {
  0%   { transform: translateY(48px) rotate(0deg); }
  12%  { transform: rotate(0deg); }
  28%  { transform: translateX(var(--sh, 0px)) rotate(var(--shr, 0deg)); }
  42%  { transform: translateX(0) rotate(0deg); }
  56%  { transform: translateX(calc(var(--sh, 0px) * -.7)) rotate(calc(var(--shr, 0deg) * -.6)); }
  70%  { transform: translateX(0) rotate(0deg); }
  100% { transform: var(--r); }
}
@keyframes pcFadeIn {
  from { opacity: 0; }
}
@keyframes sdShuffle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  40% { translate: calc(var(--side, 1) * 64px) -6px; rotate: calc(var(--side, 1) * 9deg); }
  70% { translate: calc(var(--side, 1) * -10px) 2px; rotate: calc(var(--side, 1) * -2deg); }
}
@keyframes sdNudge {
  0%, 100% { transform: none; }
  25% { transform: translateX(-22px) rotate(-4deg); }
  55% { transform: translateX(14px) rotate(3deg); }
  80% { transform: translateX(-4px) rotate(-1deg); }
}
@keyframes catPop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); }
}
@keyframes cfIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes abNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@keyframes iqBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .cf {
    display: none;
  }
}

/* Phones: only the hero has tape, so the photos have none */
@media (max-width: 759.98px) {
  .ph-tape {
    display: none;
  }
}