/* =========================================================================
   home-cyanotype.css — homepage-specific styles
   Extends cyanotype.css. Loaded after it.
   ========================================================================= */


/* Layout — single-viewport, no-scroll */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* hard lock — page must fit viewport */
}

main.stage {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-10) 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 10px;
  min-height: 0;             /* allow flex children to shrink */
}


/* Topbar overrides — meta strip with location + date */
.topbar .meta { letter-spacing: 0.22em; }
.topbar .meta .location { color: var(--fg); }
.topbar .meta .sep { opacity: 0.4; margin: 0 var(--sp-1); }


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

.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-7);
  align-items: stretch;
  padding: 0;
}

.hero-portrait {
  position: relative;
  width: 168px;
  min-height: 168px;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--surface);
  padding: 5px;
  border: 1px solid var(--line);
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-portrait .corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--line);
}
.hero-portrait .corner.tl { top: -1px;    left: -1px;    border-right: none; border-bottom: none; }
.hero-portrait .corner.tr { top: -1px;    right: -1px;   border-left: none;  border-bottom: none; }
.hero-portrait .corner.bl { bottom: -1px; left: -1px;    border-right: none; border-top: none; }
.hero-portrait .corner.br { bottom: -1px; right: -1px;   border-left: none;  border-top: none; }

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero h1.headline {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  margin: 0;
}
.hero h1.headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--fg-mute);
}
.hero h1.headline .amp {
  font-style: italic;
  font-weight: 300;
  font-size: 0.65em;
  vertical-align: 0.04em;
  margin: 0 0.06em;
  color: var(--accent);
}

.hero-subhead {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.8;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  max-width: 540px;
}


/* Specimens — 3 primary + divider + 3 secondary ------------------------- */

.specimens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.specimens-row {
  display: grid;
  gap: var(--sp-4);
}
.specimens-row.primary   { grid-template-columns: repeat(3, 1fr); }
.specimens-row.secondary { grid-template-columns: repeat(3, 1fr); }

.specimen-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-mute);
  padding: 6px 0;
}
.specimen-divider::before,
.specimen-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.specimen {
  position: relative;
  background: var(--plate-bg);
  color: var(--plate-fg);
  border: 1px solid var(--plate-rule);
  text-decoration: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) 14px var(--sp-3);
  overflow: hidden;
  box-shadow: var(--plate-shadow);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) ease,
              border-color var(--t-fast) ease,
              background var(--t-theme) ease,
              color var(--t-theme) ease;
}
.specimen:hover {
  transform: translateY(-3px);
  border-color: var(--plate-fg);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,0.45),
              inset 0 0 0 1px var(--plate-fg);
}

/* Sun-flare on hover — a soft cream glow blooms from where the cursor enters */
.specimen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--plate-fg) 18%, transparent) 0%,
              transparent 55%);
  opacity: 0;
  transition: opacity var(--t-med) ease;
  pointer-events: none;
  z-index: 0;
}
.specimen:hover::before { opacity: 1; }

/* Paper grain layer (was ::after) */
.specimen::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.93  0 0 0 0 0.84  0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}
[data-theme="night"] .specimen::after { mix-blend-mode: screen; opacity: 0.10; }

.specimen .corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid var(--plate-rule);
  pointer-events: none;
}
.specimen .corner.tl { top: var(--sp-2);    left: var(--sp-2);    border-right: none; border-bottom: none; }
.specimen .corner.tr { top: var(--sp-2);    right: var(--sp-2);   border-left: none;  border-bottom: none; }
.specimen .corner.bl { bottom: var(--sp-2); left: var(--sp-2);    border-right: none; border-top: none; }
.specimen .corner.br { bottom: var(--sp-2); right: var(--sp-2);   border-left: none;  border-top: none; }

.specimen .plate-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--plate-id-fg);
  position: relative;
  z-index: 1;
}

.specimen .silhouette {
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  padding: var(--sp-1) 0;
  color: var(--plate-fg);
  transition: transform 480ms var(--ease);
}
.specimen:hover .silhouette { transform: scale(1.06); }

.specimen .silhouette svg {
  width: 56%;
  max-height: 96px;
  transition: filter 320ms ease;
}
.specimen:hover .silhouette svg {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--plate-fg) 35%, transparent));
}
.specimen .silhouette path,
.specimen .silhouette circle,
.specimen .silhouette line,
.specimen .silhouette rect,
.specimen .silhouette ellipse {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke-width 240ms ease;
}
.specimen:hover .silhouette path,
.specimen:hover .silhouette circle,
.specimen:hover .silhouette line,
.specimen:hover .silhouette rect,
.specimen:hover .silhouette ellipse {
  stroke-width: 1.7;
}
.specimen .silhouette .filled { fill: currentColor; stroke: none; }

.specimen .plate-label {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--plate-rule);
  padding-top: var(--sp-2);
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.specimen .plate-label .name {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: 0.005em;
}
.specimen .plate-label .latin {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1.4;
  text-align: right;
  flex-shrink: 1;
  min-width: 0;
}

/* Primary plates — taller and meatier */
.specimens-row.primary .specimen { aspect-ratio: 7 / 5; }
.specimens-row.primary .specimen .silhouette svg { max-height: 124px; width: 60%; }
.specimens-row.primary .specimen .plate-label .name { font-size: 21px; }

/* Secondary plates — same silhouette size, slightly shorter overall */
.specimens-row.secondary .specimen { aspect-ratio: 5 / 3; }
.specimens-row.secondary .specimen .silhouette svg { max-height: 124px; width: 60%; }


/* Gacha-style surprise plate ------------------------------------------- */

.specimen.gacha .silhouette { transition: opacity var(--t-med) ease; }
.specimen.gacha:hover .silhouette { opacity: 0.15; }

.gacha-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.gacha-sticker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 6px;
  background: var(--cream);
  padding: 3px;
  opacity: 0;
  transform: translate(0, 0) rotate(0deg) scale(0.6);
  transition:
    opacity 320ms var(--ease),
    transform 480ms var(--ease);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.gacha-sticker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.specimen.gacha:hover .gacha-sticker {
  opacity: 1;
  transform:
    translate(var(--tx, 0px), var(--ty, 0px))
    rotate(var(--r, 0deg))
    scale(1);
  transition-delay: var(--d, 0ms);
}


/* Dog-ear (Pl. 0 — margin note) --------------------------------------- */
/* A folded page corner at bottom-right. Click to peel back and reveal the
   tucked-away quote. The fold itself is the affordance. */

.dogear {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 54px;
  height: 54px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 40;
  -webkit-tap-highlight-color: transparent;
}
.dogear:focus { outline: none; }
.dogear:focus-visible .dogear-fold {
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
}

/* The visible triangle — the back face of the folded corner.
   Clip-path makes a right triangle with the hypotenuse running from
   top-right to bottom-left (the diagonal crease). */
.dogear-fold {
  position: absolute;
  inset: 0;
  display: block;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background:
    /* highlight along the crease, fades into the back of the paper */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 22%,
      transparent 38%),
    /* base "back of paper" tone — slightly darker than the page */
    linear-gradient(135deg, var(--paper-edge), var(--cream-mute));
  box-shadow:
    /* shadow cast onto the page beneath, along the crease */
    -3px -3px 10px -2px rgba(10, 47, 92, 0.18) inset,
    -1px -1px 0 0 var(--line) inset;
  transform-origin: 100% 100%;
  transition:
    width 280ms var(--ease),
    height 280ms var(--ease),
    filter 280ms var(--ease);
}

/* The tiny "Pl. 0" stamp printed on the back of the fold.
   Rotated -45deg so it reads along the diagonal of the triangle. */
.dogear-tag {
  position: absolute;
  right: 6px;
  bottom: 6px;
  transform: rotate(-45deg);
  transform-origin: 100% 100%;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-deep);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  pointer-events: none;
  white-space: nowrap;
}

/* Idle peel — a tiny lifted hint so the fold reads as interactive */
.dogear-fold::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 60%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* Hover — the fold lifts further, tag becomes legible */
.dogear:hover .dogear-fold,
.dogear:focus-visible .dogear-fold {
  width: 64px;
  height: 64px;
  filter: drop-shadow(-4px -4px 6px rgba(10, 47, 92, 0.18));
}
.dogear:hover .dogear-tag,
.dogear:focus-visible .dogear-tag {
  opacity: 0.85;
}

/* Open state — the corner is peeled all the way back. */
.dogear[aria-expanded="true"] .dogear-fold {
  width: 84px;
  height: 84px;
  filter: drop-shadow(-6px -6px 10px rgba(10, 47, 92, 0.22));
}
.dogear[aria-expanded="true"] .dogear-tag {
  opacity: 1;
  font-size: var(--text-2xs);
}

/* Night theme — fold uses ink tones for the back of the paper */
[data-theme="night"] .dogear-fold {
  background:
    linear-gradient(135deg,
      rgba(244, 236, 213, 0.18) 0%,
      rgba(244, 236, 213, 0.04) 22%,
      transparent 38%),
    linear-gradient(135deg, var(--ink), var(--ink-mid));
  box-shadow:
    -3px -3px 10px -2px rgba(0, 0, 0, 0.55) inset,
    -1px -1px 0 0 var(--line) inset;
}
[data-theme="night"] .dogear-tag { color: var(--cream); }

/* The card tucked behind the fold — appears when the corner is lifted */
.dogear-card {
  position: fixed;
  right: var(--sp-16);
  bottom: var(--sp-14);
  width: min(360px, calc(100vw - 96px));
  padding: 18px var(--sp-5) var(--sp-4);
  background: var(--plate-bg);
  color: var(--plate-fg);
  border: 1px solid var(--plate-rule);
  box-shadow: var(--plate-shadow);
  z-index: 39;
  transform-origin: 100% 100%;
  transform: translate(24px, 24px) scale(0.78) rotate(4deg);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 360ms var(--ease),
    opacity 240ms var(--ease);
}
.dogear-card[aria-hidden="false"] {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(-1.4deg);
  pointer-events: auto;
}

/* Plate-style corner brackets, echoing the specimen cards */
.dogear-card::before,
.dogear-card::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--plate-rule);
}
.dogear-card::before { top: -1px;  left: -1px;  border-right: 0; border-bottom: 0; }
.dogear-card::after  { top: -1px;  right: -1px; border-left: 0;  border-bottom: 0; }

.dogear-card-inner {
  position: relative;
}
.dogear-card-inner::before,
.dogear-card-inner::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--plate-rule);
}
.dogear-card-inner::before { bottom: -17px; left: -1px;  border-right: 0; border-top: 0; }
.dogear-card-inner::after  { bottom: -17px; right: -1px; border-left: 0;  border-top: 0; }

.dogear-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--text-2xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--plate-id-fg);
  margin-bottom: var(--sp-3);
}
.dogear-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--fg);
  margin: 0;
  /* a tiny serif flourish — first letter slightly larger */
  text-indent: -0.18em;
}
.dogear-quote p { margin: 0 0 var(--sp-2) 0; }
.dogear-quote p:last-of-type { margin: 0; }
.dogear-attr {
  display: block;
  margin-top: var(--sp-3);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-style: normal;
  font-size: var(--text-2xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: right;
}

@media (max-width: 720px) {
  .dogear { width: 48px; height: 48px; }
  .dogear:hover .dogear-fold,
  .dogear[aria-expanded="true"] .dogear-fold { width: 72px; height: 72px; }
  .dogear-card {
    right: var(--sp-4);
    bottom: var(--sp-14);
    width: calc(100vw - 32px);
  }
}


/* Side panels (split-pane reveal) -------------------------------------- */

.content-container {
  display: contents;            /* let .stage host children directly */
}

.secondary-pane {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(560px, 92vw);
  background: var(--plate-bg);
  color: var(--plate-fg);
  border-left: 1px solid var(--plate-rule);
  box-shadow: -24px 0 48px -16px rgba(0,0,0,0.35);
  transform: translateX(100%);
  transition: transform 480ms var(--ease),
              background var(--t-theme) ease,
              color var(--t-theme) ease,
              border-color var(--t-theme) ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.content-container.active .secondary-pane {
  transform: translateX(0);
}

/* Dim the main stage when a panel is open — transitions on base so they
   run in BOTH directions (open and close). */
main.stage {
  transition: filter 480ms var(--ease), opacity 480ms var(--ease);
}
.topbar {
  transition: opacity 320ms ease;
}
.content-container.active main.stage {
  filter: blur(3px);
  opacity: 0.55;
  pointer-events: none;
}
.content-container.active .topbar {
  pointer-events: none;
  opacity: 0.6;
}

.pane-inner {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-14) 36px var(--sp-10);
  position: relative;
}

.pane-back {
  position: absolute;
  top: 19px;
  left: 19px;
  background: transparent;
  border: 1px solid var(--plate-rule);
  color: var(--plate-fg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px var(--sp-3);
  cursor: pointer;
  z-index: 2;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.pane-back:hover { background: var(--plate-fg); color: var(--plate-bg); }

.pane-heading {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: 6px;
  color: var(--plate-fg);
}
.pane-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--plate-fg);
  opacity: 0.65;
  margin-bottom: var(--sp-4);
}

/* Surprise panel — YouTube embed framed by the panel itself */
.video-mount {
  background: var(--surface);
  border: 1px solid var(--plate-rule);
  padding: 6px;
  margin: var(--sp-2) 0 14px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}
.video-mount iframe {
  width: 100%;
  aspect-ratio: 16/9;
  display: block;
  border: 0;
}
.video-mount .caption {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--plate-fg);
  text-align: center;
  padding: 10px var(--sp-2) var(--sp-1);
  border-top: 1px solid var(--plate-rule);
  margin-top: 6px;
}

.surprise-again {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-2);
  padding: 9px var(--sp-4);
  background: var(--plate-fg);
  color: var(--plate-bg);
  border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--t-fast) ease;
}
.surprise-again:hover { opacity: 0.85; }

/* Links panel — mono row index */
.links-list { list-style: none; padding: 0; margin: var(--sp-3) 0; }
.links-list li {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px var(--sp-1);
  border-top: 1px solid var(--plate-rule);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.links-list li:last-child { border-bottom: 1px solid var(--plate-rule); }
.links-list li .num { color: var(--plate-fg); opacity: 0.6; font-size: var(--text-xs); }
.links-list li a {
  color: var(--plate-fg);
  text-decoration: none;
  transition: opacity var(--t-fast) ease;
}
.links-list li a:hover { opacity: 0.7; text-decoration: underline; }
.links-list li .handle { color: var(--plate-fg); opacity: 0.6; font-size: var(--text-xs); }

/* Contact panel — typographic email */
.contact-block { padding: 14px 0; }
.contact-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--plate-fg);
  opacity: 0.65;
  margin-bottom: var(--sp-2);
}
.contact-email {
  display: block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--plate-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--plate-rule);
  padding-bottom: 6px;
  margin-bottom: 14px;
  word-break: break-all;
}
.contact-email:hover { color: var(--plate-fg); opacity: 0.8; }
.contact-note {
  font-family: 'Fraunces', serif;
  font-size: 0.92rem;
  color: var(--plate-fg);
  opacity: 0.85;
  line-height: 1.6;
  margin-bottom: 14px;
}
.contact-send {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--plate-fg);
  color: var(--plate-bg);
  text-decoration: none;
  padding: 10px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: opacity var(--t-fast) ease;
}
.contact-send:hover {
  color: var(--plate-bg);    /* override global a:hover */
  opacity: 0.85;
}


/* About content (rendered inside the side panel) ----------------------- */

.about-header {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  align-items: center;
  margin: 14px 0 22px;
}
.about-avatar-frame {
  position: relative;
  width: 110px;
  height: 110px;
  background: var(--surface);
  border: 1px solid var(--plate-rule);
  padding: var(--sp-1);
}
.about-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-avatar-frame .corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--plate-rule);
}
.about-avatar-frame .corner.tl { top: -1px;    left: -1px;    border-right: none; border-bottom: none; }
.about-avatar-frame .corner.tr { top: -1px;    right: -1px;   border-left: none;  border-bottom: none; }
.about-avatar-frame .corner.bl { bottom: -1px; left: -1px;    border-right: none; border-top: none; }
.about-avatar-frame .corner.br { bottom: -1px; right: -1px;   border-left: none;  border-top: none; }

.about-title h2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  margin: 0 0 var(--sp-1) 0;
  color: var(--plate-fg);
}
.about-vname {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plate-fg);
  opacity: 0.7;
  margin: 0 0 var(--sp-2) 0;
}
.about-job {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--plate-fg);
  opacity: 0.85;
  line-height: 1.5;
}
.about-job small { font-size: 0.78rem; opacity: 0.85; }
.about-job .about-link {
  color: var(--plate-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--plate-rule);
}
.about-job .about-link:hover { border-color: currentColor; }

.about-section { margin-bottom: 22px; }
.about-section h3 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--plate-fg);
  border-bottom: 1px solid var(--plate-rule);
  padding-bottom: 6px;
  margin-bottom: var(--sp-3);
}
.about-section > p {
  font-family: 'Fraunces', serif;
  font-size: 0.96rem;
  color: var(--plate-fg);
  line-height: 1.6;
  margin-bottom: var(--sp-3);
}
.about-list { list-style: none; padding: 0; margin: 0; }
.about-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 9px;
  font-family: 'Fraunces', serif;
  font-size: 0.96rem;
  color: var(--plate-fg);
  line-height: 1.5;
}
.about-list li i {
  color: var(--plate-fg);
  opacity: 0.65;
  font-size: 0.92em;
  transform: scale(0.9);
  transform-origin: 0 50%;
}
.about-list .about-link {
  color: var(--plate-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--plate-rule);
  transition: border-color var(--t-fast) ease;
}
.about-list .about-link:hover { border-color: currentColor; }

/* Photo collage — full-color polaroid frames (in the side panel) */
.collage-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.collage-item {
  height: 160px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--plate-rule);
  padding: var(--sp-1) var(--sp-1) 14px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.collage-item.visible { opacity: 1; transform: translateY(0); }
.collage-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-med) ease;
}
.collage-item { cursor: zoom-in; }
.collage-item:hover img { transform: scale(1.05); }

/* Collage lightbox — held-print preview */
.collage-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(6, 26, 54, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
  cursor: zoom-out;
}
.collage-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.collage-lightbox-frame {
  background: var(--cream);
  border: 1px solid var(--plate-rule);
  padding: 10px 10px var(--sp-6);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.5);
  max-width: min(520px, 88vw);
  max-height: 88vh;
  transform: scale(0.96);
  transition: transform 220ms var(--ease);
}
.collage-lightbox.active .collage-lightbox-frame { transform: scale(1); }
.collage-lightbox-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(86vh - 34px);
  object-fit: contain;
}


/* Reveal stagger for specimen rows -------------------------------------- */

.specimens .specimen { opacity: 0; transform: translateY(16px); animation: rise 700ms var(--ease) forwards; }
.specimens-row.primary   .specimen:nth-child(1) { animation-delay: 600ms; }
.specimens-row.primary   .specimen:nth-child(2) { animation-delay: 700ms; }
.specimens-row.primary   .specimen:nth-child(3) { animation-delay: 800ms; }
.specimens-row.secondary .specimen:nth-child(1) { animation-delay: 920ms; }
.specimens-row.secondary .specimen:nth-child(2) { animation-delay: 1000ms; }
.specimens-row.secondary .specimen:nth-child(3) { animation-delay: 1080ms; }


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

main.stage > .print-stamp {
  margin-top: auto;
  padding-top: 10px;
  font-size: var(--text-2xs);
}


/* Responsive ------------------------------------------------------------ */

/* Below tablet, allow vertical scroll — the stacked layout is naturally tall */
@media (max-width: 900px) {
  body { overflow-y: auto; }
  main.stage { padding: 18px 22px var(--sp-7); min-height: auto; }
  .hero { grid-template-columns: 1fr; gap: 18px; }
  .hero-portrait {
    width: 120px;
    height: 120px;
    min-height: 0;          /* override desktop min */
    align-self: start;       /* don't stretch in single-column layout */
  }
  .hero h1.headline { font-size: clamp(34px, 9vw, 48px); }
  .specimens-row.primary,
  .specimens-row.secondary { grid-template-columns: 1fr 1fr; }
  .specimens-row.primary   .specimen:nth-child(3),
  .specimens-row.secondary .specimen:nth-child(3) { grid-column: span 2; aspect-ratio: 7 / 3; }
  .secondary-pane { width: 100vw; }
  .pane-inner { padding: var(--sp-14) var(--sp-6) var(--sp-7); }
  .about-header { grid-template-columns: 1fr; text-align: left; }
  .about-avatar-frame { width: 110px; height: 110px; }
}

/* Very short viewports — relax the no-scroll constraint */
@media (min-width: 901px) and (max-height: 720px) {
  body { overflow-y: auto; }
  main.stage { min-height: 100vh; }
}

@media (max-width: 540px) {
  .specimens-row.primary { grid-template-columns: 1fr; }
  .specimens-row.primary .specimen:nth-child(3) { grid-column: auto; aspect-ratio: 5/4; }
  .specimens-row.secondary { grid-template-columns: 1fr; }
  .specimens-row.secondary .specimen:nth-child(3) { grid-column: auto; aspect-ratio: 7/4; }
}

@media (prefers-reduced-motion: reduce) {
  .specimens .specimen { opacity: 1; transform: none; animation: none; }
  .specimen.gacha:hover .gacha-sticker { transform: translate(var(--tx, 0), var(--ty, 0)) rotate(0) scale(1); }
}