/* About page — rebuilt from the authoritative Figma frame
   (figma.com/design/YetSGHlPxrcnuSRZ3shfip, node 1:3,
   "About Me-Desktop-duplicate"), pulled directly via get_design_context
   per BUILD-ROADMAP.md Phase 3. See the HTML comment on .ab3-stage for
   the full reasoning on the fixed-1440px approach, paint order, and
   the top-left rotation pivots on the Decorative Ephemera Cluster.

   Fonts substitute per the established system rather than Figma's
   generated Crimson Text/Caveat: Perandory Semi-Condensed for "About",
   the hero greeting, and "Selected Credits & Resume"; IM Fell English
   for body copy and the Resume/Get-in-touch links; Sue Ellen Francisco
   only for "Let's Work Together!" and the polaroid caption. Colors use
   the established design tokens rather than Figma's literal hex
   values. Figma's own literal px values are used verbatim throughout
   (not rem/percentage): the composition is authored at a fixed 1440px
   and scaled as one unit between the mobile breakpoint and 1440px (see
   .ab3-page's zoom rule below), so nothing inside it reflows. */

.page-about {
  background-color: var(--color-paper);
}

.page-about main.about-page {
  max-width: none;
  padding: 0;
  /* Query container so --ab3-gutter can use cqw (viewport width minus
     any scrollbar). overflow-x:clip trims the edge pieces at the window
     instead of at the 1440px frame. */
  container-type: inline-size;
  overflow-x: clip;
}

/* Shared 1440px column for both .ab3-stage (fixed-height header) and
   .ab3-body-region (the normal-flow bio+footer below it) — same role
   as Journal Post's .jp-page (css/journal-post.css). overflow:hidden
   reproduces the same left-edge clip the footer's blue corner paper
   always had (left:-97px) back when it lived inside .ab3-stage's own
   overflow:hidden — now that it's a body-region child instead, nothing
   else would clip that bleed.

   background-color is this page's single continuous base layer (Figma
   reference: figma.com/design/FP1ZWOSEAtNuI8w2OG2E7x/About-Me,
   node-id 119-2), replacing the old two-piece setup (.ab3-bg-foreground
   image inside .ab3-stage, plus a separate .ab3-body-bg patch starting
   exactly at the stage's old bottom edge to continue it). Putting the
   color here instead removes the seam-alignment problem entirely: one
   flat fill behind the whole page, with .ab3-bg-foreground's real
   texture image simply painting on top of it wherever the header still
   shows it — no second element needing to start in exactly the right
   place. The color is the sitewide paper #FFE6AC, and the texture on
   top is a copy tinted to read as that same color
   (Texture___Foreground_Paper-tinted.png, ASSET-MANIFEST.md §10), so
   the flat fill and the texture still meet with no visible edge.
   Earlier verified at both the current bio length and an 8x-length
   stress test: one continuous
   fill, no band, seam, or color shift anywhere on the page. */
.ab3-page {
  /* Width of the empty margin either side of the centered 1440px frame
     on wide windows (0 at or below 1440). Edge pieces shift left by
     this much so they bleed off the window, not the frame. */
  --ab3-gutter: max(0px, (100cqw - 1440px) / 2);
  width: 1440px;
  margin: 0 auto;
  background-color: #FFE6AC;
}

/* Between 1224px and 1440px the whole fixed composition is scaled down
   uniformly instead of overflowing sideways. 1224px is 85% of 1440, the
   smallest the desktop layout is allowed to get; below it the page
   switches to the mobile layout instead. zoom (not
   transform) so layout height shrinks with it and no blank scroll area
   is left below. --ab3-zoom is viewport width / 1440, set on :root by
   an inline script in about.html and kept current by js/site.js;
   without JS the page falls back to its native 1440px width. */
@media (min-width: 1224px) and (max-width: 1439.98px) {
  .ab3-page {
    zoom: var(--ab3-zoom, 1);
  }
}

/* isolation:isolate contains this stage's own z-index:auto paint order
   to itself, so .ab3-body-region below — a later, plain DOM sibling —
   naturally paints on top of it with no z-index of its own needed
   (same technique as Journal Post's .jp-stage). */
.ab3-stage {
  position: relative;
  width: 1440px;
  height: 1304px;
  overflow-x: visible;
  overflow-y: clip;
  isolation: isolate;
  background-color: #fff;
  font-family: var(--font-body);
}

/* Normal-flow sibling of .ab3-stage — the bio and footer now live here
   instead of being absolutely positioned against the old fixed-height
   stage, so real (long) copy can push the footer down instead of
   colliding with it (see TODO.md, "About Page — Footer now flows
   below the bio"). margin-top is negative so this region starts
   exactly where .ab3-content used to sit inside .ab3-stage
   (stage-relative top:169px): -(1304 - 169) = -1135px. Since this page
   uses literal fixed px throughout (not the percentage-of-width
   technique Journal Post needed for a fluid-width stage), that's a
   plain px value, not a width-relative percentage. */
.ab3-body-region {
  position: relative;
  width: 1440px;
  margin-top: -1135px;
}

/* ── Background textures ── */
.ab3-bg-stripe {
  position: absolute;
  left: calc(-173px - var(--ab3-gutter));
  top: -594px;
  width: calc(1856px + 2 * var(--ab3-gutter));
  height: 2250px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.ab3-bg-foreground {
  position: absolute;
  left: calc(-492px - var(--ab3-gutter));
  top: 134px;
  width: calc(3382px + 2 * var(--ab3-gutter));
  height: 2130px;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* ── Nav ── */
.ab3-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
}

.ab3-nav__tab {
  position: absolute;
  top: 15px;
  width: 142px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/assets/images/shared/nav-paper-tab.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--color-near-black);
}

.ab3-nav__tab[aria-current="page"] {
  color: var(--color-crimson);
  text-decoration: underline;
  text-decoration-color: var(--color-crimson);
  text-underline-offset: 3px;
}

.ab3-nav__tab:hover {
  text-decoration: underline;
}

/* ── content: Auto Layout Vertical → real flex column. Now a
   normal-flow child of .ab3-body-region (margin-left replaces the old
   position:absolute; left:360px — top:169px is no longer needed here
   at all, since .ab3-body-region's own negative margin-top already
   starts this region at that exact y). No position/z-index of its own
   needed: that was only required to out-stack the since-removed
   .ab3-body-bg patch (a positioned sibling) — now that the page
   background lives on .ab3-page itself (a container's own background,
   not a stacked child), there's nothing left in .ab3-body-region for
   plain static flow to lose to. ── */
/* padding-top increased from 20px to 90px so .ab3-hero ("Hi! I'm
   Sarah...") moves down far enough to give .ab3-title-block real room
   to fully clear the beige seam below it without colliding — see the
   comment on .ab3-title-block h1 for the paired numbers this solves
   for together (this can't be tuned in isolation from that shift). */
.ab3-content {
  margin-left: 360px;
  width: 1080px;
  padding-top: 90px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.ab3-hero {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--color-near-black);
  margin: 0;
}

/* Single-column bio — supersedes the former ab3-intro-row two-column
   layout (see TODO.md). Left edge/width match the old left column
   (.ab3-intro-copy) exactly, so it still sits beside the polaroid the
   same way; a comfortable reading width, not the former full
   two-column span. */
.ab3-bio {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 592px;
  flex-shrink: 0;
}

.ab3-bio p {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.2px;
  color: var(--color-near-black);
}

/* ── Footer — .ab3-cta, .ab3-resume-card, and the ephemera that goes
   with them (now the bordered .ab3-footer-card, plus blue corner paper
   and flowers — the pink strip that used to live here is removed, per
   the new Figma reference), grouped in one self-contained block that
   flows right after .ab3-content instead of being absolutely
   positioned against the old fixed-height stage. margin-top gives it
   breathing room below the bio (a design nicety, not a measured value
   — adjust freely).

   height:380px fits every child, including the new .ab3-footer-card
   (its own tallest element, bottom edge at 366.8px — see that rule's
   comment for how it's sized) with a little room to spare; previously
   this was 352px specifically to reproduce the old pink strip's crop
   against the stage's bottom edge, which no longer applies now that
   the pink strip is gone. overflow:hidden is still needed for the
   blue corner paper's horizontal bleed (left:-97px) — same left-edge
   clip it always had, now against this container instead of the old
   stage. Every child's top is (old stage-relative top) − 952 — the
   group's old topmost element's own former top (952px, previously the
   pink strip's; kept as the reference point so these numbers didn't
   all need re-deriving when the strip was removed). DOM order (footer
   card → cta → resume card → resume link → vert line → blue corner →
   flowers → get-in-touch link) preserves the original relative paint
   order (each visible element still paints above whatever was behind
   it before). ── */
.ab3-footer {
  position: relative;
  z-index: 1;
  width: 1440px;
  height: 430px;
  margin-top: 60px;
  overflow-x: visible;
  overflow-y: clip;
}

/* Bordered footer card (Figma node 119:60, About-Me file
   FP1ZWOSEAtNuI8w2OG2E7x, node-id 119-2): "background: rgba(235,216,
   184,0.4); border: 1px solid #ac2946;" wrapping the CTA + resume card
   content as one unit — replaces the removed pink strip. Figma's own
   literal coordinates for this node assumed the old fixed-absolute
   layout and don't apply here (this page now flows), so the box is
   derived instead from where .ab3-cta/.ab3-resume-card/.ab3-resume-link/
   .ab3-vert-line/.ab3-get-in-touch actually render inside .ab3-footer,
   measured directly (bounding rect: left 335–1353, top 69–338.8), with
   28px of padding on every side added around that so text doesn't sit
   flush against the border. Positioned first in .ab3-footer's DOM order
   (like the pink strip it replaces) so it paints behind all of the
   above, which are still position:absolute with no z-index of their
   own — DOM order alone keeps them on top. */
.ab3-footer-card {
  position: absolute;
  left: 307px;
  top: 41px;
  width: 1074px;
  height: 325.8px;
  background: rgba(235, 216, 184, 0.4);
  border: 1px solid #ac2946;
  pointer-events: none;
}

.ab3-cta {
  position: absolute;
  left: 335px;
  top: 87px;
  width: 484px;
}

.ab3-cta h2 {
  font-family: var(--font-marginalia);
  font-size: 50px;
  letter-spacing: 1px;
  text-align: center;
  color: var(--color-near-black);
  margin: 0 0 12px;
}

.ab3-cta p {
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 1.4;
  color: var(--color-near-black);
  margin: 0;
}

.ab3-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 23px;
  letter-spacing: 1px;
  color: var(--color-near-black);
  text-decoration: none;
  white-space: nowrap;
}

.ab3-link:hover {
  color: var(--color-crimson);
}

.ab3-get-in-touch {
  position: absolute;
  left: 340px;
  top: 302px;
}

/* ── Selected Credits & Resume ── */
.ab3-resume-card {
  position: absolute;
  left: 827px;
  top: 69px;
  width: 526px;
  height: 178px;
  padding: 20px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  box-sizing: border-box;
}

.ab3-resume-card h2 {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  color: var(--color-near-black);
  margin: 0;
  width: 100%;
}

.ab3-resume-card hr {
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 4px solid var(--color-crimson);
}

.ab3-resume-entry {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ab3-resume-entry p {
  margin: 0;
  letter-spacing: 1px;
  color: var(--color-near-black);
}

.ab3-resume-entry__title {
  font-size: 20px;
}

.ab3-resume-entry__role {
  font-style: italic;
  font-size: 15px;
}

.ab3-resume-entry__dates {
  font-weight: 400;
  font-size: 15px;
}

.ab3-resume-link {
  position: absolute;
  left: 1090px;
  top: 143px;
}

.ab3-vert-line {
  position: absolute;
  left: 827px;
  top: 89px;
  width: 1px;
  height: 215px;
  background-color: var(--color-crimson);
}

/* ── "About" title block — positioned directly at stage-absolute
   coordinates (Figma's own calc(50% - Npx) values resolved against
   the fixed 1440px stage width), no separate positioning wrapper
   needed since every value below is already stage-relative. ── */
.ab3-title-block {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* font-weight:normal is explicit, not incidental: h1 has a bold UA
   default, and only a Regular/400 cut of Perandory Semi-Condensed is
   hosted (css/tokens.css), so leaving weight unset triggers a
   synthetic/fake bold — confirmed visibly heavier side-by-side against
   font-weight:normal. Matches the same "no fake bold" convention
   already applied everywhere else this font is used (Journal, Journal
   Post, Listen nav). */
/* top shifted down 76px (72px → 148px) as a rigid unit with the hr
   and p below (their tops shift by the same 76px, preserving their
   relative spacing to each other). Fully resolves the earlier
   partial fix (a 24px shift alone, which could clear .ab3-bg-foreground's
   134px beige seam OR avoid colliding with .ab3-hero below, but not
   both — see TODO.md for that history) by also increasing
   .ab3-content's padding-top (20px → 90px, see that rule's comment),
   which moves .ab3-hero itself down and opens up real room. The two
   numbers were solved together, not independently: pixel-sampled the
   actual rendered ink (not box edges, which include several px of
   font ascent padding) at each step —
   - "ABOUT"'s ink starts ~3px inside its box top, so its ink-top at
     top:148px lands at 151px, 17px clear of the 134px seam.
   - "me...more or less"'s ink bottom lands at ~239.7px; .ab3-hero's
     own ink-top, pushed down by the padding-top increase, lands at
     ~267px — a 27px ink-to-ink gap, comfortably more than the ~9px
     gap the previous partial fix had. Confirmed with a full-page
     screenshot: no collision anywhere, and the extra padding-top
     doesn't crowd anything else (.ab3-hero still sits well above the
     polaroid's own bottom edge, ~735px). */
.ab3-title-block h1 {
  position: absolute;
  left: 332.33px;
  top: 148px;
  width: 324px;
  font-size: 75px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--color-near-black);
  margin: 0;
  text-transform: none;
}

/* left corrected AGAIN, this time from measured real ink rather than
   any box math (441.578px, then 309.664px from a translateX(-50%)
   correction, were both still off — see below). "About" renders in
   Perandory Semi-Condensed, a condensed display face: the glyphs are
   noticeably narrower than the h1's own 324px CSS box, so centering
   against that box (or against Figma's node geometry) doesn't center
   against what's actually drawn on screen. Measured directly:
   canvas-scanned a screenshot of the rendered h1 for the true leftmost/
   rightmost dark (ink) pixel columns, not estimated from font metrics
   — real ink spans page-x 334.33 to 498.33 (a 164px-wide glyph run,
   well under this rule's own 263.83px width, so the width stays
   unchanged per the task's own instruction). Centering this rule under
   that measured 416.33px midpoint: 416.328125 - (263.83/2) =
   284.413px. Verified visually after applying — see TODO.md for the
   before/after crop.

   top pulled up 12px (222.6875 → 210.6875) to close the gap to
   "ABOUT" above it — pixel-sampled the real ink, not box math: at the
   position this task started from, "ABOUT"'s ink bottom was at
   page-y≈203 but the underline's own ink didn't start until ≈223, a
   20px empty gap that read as two separately-floating elements.
   Compared 8/10/12/14/16px reductions via hi-res crops — 12px is the
   largest that still leaves a clean gap below the letters' bottom
   serifs; 14px and up started visibly touching/overlapping them. */
.ab3-title-block hr {
  position: absolute;
  left: 284.413px;
  top: 210.6875px;
  width: 263.83px;
  height: 0;
  margin: 0;
  border: 0;
  /* Figma draws this as a 7px brush stroke; Sarah chose 2px so every
     page title line matches (Listen, Journal, Contact). */
  border-top: 2px solid var(--color-crimson);
}

.ab3-title-block p {
  position: absolute;
  left: 285px;
  top: 211.6875px;
  width: 289.216px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--color-near-black);
  margin: 0;
}

/* top nudged down from Figma's raw 530px, empirically: the polaroid's
   white bottom border is a diagonal band (the polaroid is rotated
   10.87deg), so a horizontal caption can only clear the photo across
   its whole width if pushed down past the diagonal seam's lower
   (right) point. At 530px the ascenders/caps of "Me! Sarah Milad!"
   (rendered in the real Sue Ellen Francisco font — the generic
   "cursive" fallback this sandbox initially fell back to, from a
   blocked font fetch, is a much smaller face and hid this) crossed
   into the photo. Verified with a hi-res cropped screenshot at several
   candidate values (530/540/550/560/570): 560px is the first value
   fully clear of the photo edge at every x, with roughly even white
   space above (to the photo) and below (to the newsprint scrap) —
   570px was already visibly closer to the newsprint than the photo.

   transform matches .ab3-deco--polaroid's own rotation (10.87deg)
   instead of the original 3deg: at 3deg the caption read as flat
   text laid over a visibly tilted photo rather than something written
   on it. Compared 3/6/8/10.87deg via hi-res crops — 10.87deg is the
   first that puts the text baseline visibly parallel to the polaroid's
   own diagonal white-border seam, reading as one tilted object, and
   text stays perfectly readable at that mild an angle.

   left nudged further, from 10px to -12px: Sarah confirmed 10px was
   progress but still not centered enough. Compared 0/-5/-8/-10/-12/-13/
   -14/-15px via wide zoomed crops (isolated, fresh page load per value
   — a narrower high-DPI crop gave a false "not clipped" reading at
   -14/-15 the first time around, caught by cross-checking against a
   wider view before trusting it) — the leading "M" is intact through
   -13px and clipped starting at -14px, so -12px keeps a small safety
   margin from that real boundary while reading as genuinely centered
   under the photo above it.

   Then +28px on its own (the polaroid still bleeds off the edge) so
   the leading "M" clears the window's left edge: at -12px it was still
   clipped on the live site. It now sits centered on the visible part
   of the white strip. */
.ab3-caption {
  position: absolute;
  left: 16px;
  top: 560px;
  font-family: var(--font-marginalia);
  color: var(--color-crimson);
  font-size: 30px;
  transform: rotate(10.87deg);
  margin: 0;
  white-space: nowrap;
}

/* ── Decorative Ephemera Cluster — logo, polaroid, green + blue paper,
   flowers. Positions are the top-left-pivot conversion described in
   the HTML comment on .ab3-stage, not Figma's generated wrapper
   left/top (which centers around a DIFFERENT, oversized box and would
   double-apply the centering offset if reused directly here). Each
   uses object-fit:cover directly on the raw asset at Figma's literal
   target box — the same technique Figma's own export uses for these
   — rather than a custom crop-percentage trick, which is what
   previously split the logo into two visually disconnected pieces. */
.ab3-deco {
  position: absolute;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

/* The left-edge cluster rides the window's left edge on wide screens
   (see --ab3-gutter). translate composes with each piece's own
   rotate transform. */
.ab3-deco--green-paper,
.ab3-deco--logo,
.ab3-deco--polaroid,
.ab3-deco--blue-corner,
.ab3-deco--flowers,
.ab3-caption {
  translate: calc(-1 * var(--ab3-gutter)) 0;
}

/* left is nudged left from the computed -58.26px: at that position the
   asset's opaque paper edge (this local export has no transparent
   margin there) oversteps the CTA text column's left edge by ~9px,
   clipping the leading character of every line — confirmed by
   screenshot pixel-sampling, not visible in the Figma reference render.
   Same width/height/rotation, only shifted left to clear the text.
   Now inside .ab3-footer (moved from .ab3-stage — see that rule's
   comment for the top-offset math): top = old stage-relative
   1044.53 − 952 = 92.53px, then +28px more (120.53px) to reach
   .ab3-footer's true bottom edge (380px: 120.53+259.473=380.003) —
   shifted down rather than stretched taller, so the paper texture
   doesn't distort; verified visually against the stretch alternative
   and this reads as the paper simply sitting lower, not warped. */
.ab3-deco--blue-corner {
  left: -97px;
  top: 170.53px;
  width: 402.271px;
  height: 259.473px;
}

.ab3-deco--green-paper {
  left: -20px;
  top: -20px;
  width: 735.639px;
  height: 1096.366px;
  transform-origin: top left;
  transform: rotate(47.87deg);
}

.ab3-deco--logo {
  left: -23.811px;
  top: 127.219px;
  width: 337.107px;
  height: 138.816px;
  transform-origin: top left;
  transform: rotate(-25.02deg);
}

/* left is nudged ~43px further left than the computed top-left-pivot
   conversion (29.722px) gives: at that computed position the flower's
   actual petals (not just the theoretical rotated bounding box)
   visibly overlapped the hero heading's "T" — confirmed by cropping
   the render, not by re-deriving the math — which the reference
   screenshot does not show. Same width/height/rotation, only shifted
   left to clear the heading, per the instruction to fix what direct
   pixel comparison finds rather than trust the computed value alone. */
.ab3-deco--polaroid {
  left: -43px;
  top: 118.399px;
  width: 395.103px;
  height: 552.423px;
  transform-origin: top left;
  transform: rotate(10.87deg);
}

/* Now inside .ab3-footer (moved from .ab3-stage — see that rule's
   comment for the top-offset math): top = old stage-relative
   1112.42 − 952 = 160.42px. */
.ab3-deco--flowers {
  left: 25.84px;
  top: 210.42px;
  width: 145.912px;
  height: 143.733px;
}

/* The copyright line sits in the bottom 50px added to .ab3-footer
   (was 380px tall), so the blue corner paper and its flowers, moved
   down by the same 50px, still bleed off the page's bottom edge. */
.ab3-footer .site-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 1rem;
}

/* ── Mobile page — hidden by default ── */
.av2m-page {
  display: none;
}

/* 1223.98px: see the zoom rule above (85% of 1440 is the desktop floor). */
@media (max-width: 1223.98px) {
  /* Hides the whole desktop composition, not just .ab3-stage: since
     the bio and footer moved out of .ab3-stage into .ab3-body-region
     (a sibling inside .ab3-page — see that rule's comment), hiding
     .ab3-stage alone left .ab3-body-region's content rendering on top
     of .av2m-page at mobile widths — confirmed as a real regression via
     a 390px-viewport screenshot, not assumed fixed by inspection alone. */
  .ab3-page {
    display: none;
  }

  /* Full-width shared mobile paper (css/layout.css --m-paper); the
     content itself stays in a readable column (see below). */
  .av2m-page {
    display: block;
    width: 100%;
    background: var(--m-paper);
  }

  .av2m-hero,
  .av2m-bio,
  .av2m-credits,
  .av2m-footer {
    max-width: 480px;
    margin-inline: auto;
  }

  /* Shared red-stripe band behind the logo and nav (--m-band). */
  .av2m-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--m-band);
  }

  .av2m-logo {
    width: 11rem;
    height: auto;
    transform: rotate(-3deg);
  }

  .av2m-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }

  .av2m-nav__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }

  .av2m-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.7rem;
    height: 2.4rem;
    background-image: url('/assets/images/shared/nav-paper-tab.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--color-near-black);
  }

  .av2m-tab[aria-current="page"] {
    color: var(--color-crimson);
    text-decoration: underline;
    text-decoration-color: var(--color-crimson);
    text-underline-offset: 3px;
  }

  .av2m-hero {
    text-align: center;
    padding: var(--space-5) var(--space-4) var(--space-4);
  }

  .av2m-hero h1 {
    font-size: 2.2rem;
    text-transform: uppercase;
    margin: 0;
  }

  .av2m-hero__sub {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--color-crimson);
    font-size: 1.1rem;
    margin: 0.3em 0 0;
  }

  /* Uses the desktop polaroid export: the mobile export crops the tape
     and flower flat along its top edge. That file already has its tilt,
     tape, flower, and newspaper scrap baked in, so no extra rotation. */
  .av2m-polaroid {
    position: relative;
    width: 16rem;
    margin: var(--space-4) auto 0;
  }

  .av2m-polaroid > img:first-child {
    display: block;
    width: 100%;
    height: auto;
  }

  .av2m-polaroid__stamp {
    position: absolute;
    top: 26%;
    right: -0.4rem;
    width: 3rem;
    height: auto;
    transform: rotate(8deg);
  }

  /* Centered on the polaroid's white strip (about 24-83% across and
     74-84% down in this export), right of the newspaper scrap that
     pokes out under the lower-left corner; rotated with the file's tilt. */
  .av2m-polaroid figcaption {
    position: absolute;
    left: 56%;
    top: 75.5%;
    transform: translateX(-50%) rotate(4deg);
    font-family: var(--font-marginalia);
    color: var(--color-crimson);
    font-size: 1.1rem;
    white-space: nowrap;
  }

  .av2m-bio {
    padding: var(--space-5) var(--space-4);
    text-align: center;
  }

  .av2m-bio p {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    text-align: left;
    margin: 0 0 var(--space-4);
  }

  .av2m-bio p:last-child {
    margin-bottom: 0;
  }

  .av2m-credits {
    padding: var(--space-5) var(--space-4);
    text-align: center;
  }

  .av2m-credits__title h2 {
    font-family: var(--font-body);
    font-size: 1.6rem;
    margin: 0 0 0.4em;
  }

  .av2m-credits__title hr {
    border: 0;
    height: 2px;
    width: 8rem;
    background-color: var(--color-crimson);
    margin: 0 auto var(--space-4);
  }

  .av2m-credits__card {
    border: 1px solid var(--color-crimson);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.5);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .av2m-credits__role-title {
    font-family: var(--font-body);
    font-size: 1.4rem;
    margin: 0 0 0.3em;
  }

  .av2m-credits__role {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-near-black);
    margin: 0 0 0.2em;
  }

  .av2m-credits__dates {
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-sm);
    opacity: 0.75;
    margin: 0;
  }

  .av2m-credits__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: underline;
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-near-black);
  }

  .av2m-footer {
    position: relative;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    overflow: hidden;
  }

  .av2m-footer__green {
    position: absolute;
    top: -1rem;
    right: 0.5rem;
    width: 5.5rem;
    height: auto;
    opacity: 0.7;
    transform: rotate(20deg);
    z-index: 0;
    pointer-events: none;
  }

  .av2m-footer__flower {
    position: absolute;
    top: 0;
    left: 0.5rem;
    width: 3rem;
    height: auto;
    z-index: 1;
    pointer-events: none;
  }

  .av2m-footer__tagline {
    position: relative;
    z-index: 1;
    font-family: var(--font-marginalia);
    font-size: 1.2rem;
    color: var(--color-crimson);
    margin: 0 0 0.4em;
  }

  .av2m-footer__copyright {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-size: 0.75rem;
    opacity: 0.7;
    margin: 0;
  }
}

/* ── Tablet (768px up to the 1224px desktop floor) ──
   Same mobile content, order, paper, and red-stripe band (all set in
   the mobile block above); here the logo and nav share one row and the
   content column widens to ~720px. */
@media (min-width: 768px) and (max-width: 1223.98px) {
  .av2m-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) clamp(1rem, 4vw, 3rem);
  }

  .av2m-logo {
    width: clamp(9.5rem, 16vw, 12.5rem);
  }

  .av2m-nav,
  .av2m-nav__row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(0.35rem, 1vw, 0.75rem);
  }

  .av2m-tab {
    width: clamp(5.6rem, 9.5vw, 7rem);
    height: 2.8rem;
    font-size: 0.95rem;
  }

  .av2m-hero,
  .av2m-bio,
  .av2m-credits,
  .av2m-footer {
    max-width: 720px;
    margin-inline: auto;
  }

  .av2m-hero {
    padding-top: var(--space-6);
  }

  .av2m-hero h1 {
    font-size: 3rem;
  }

  .av2m-hero__sub {
    font-size: 1.35rem;
  }

  .av2m-polaroid {
    width: 20rem;
  }

  .av2m-bio p {
    font-size: 1.125rem;
    line-height: 1.65;
  }
}