/* ============================================================================
   site.css · savste.com — her things, stuck on an Arc gradient
   ----------------------------------------------------------------------------
   The wall is a soft mesh of her pink, apricot and periwinkle with grain over
   it, the way Arc paints a space. On it, her things as stickers: real
   photographs cut along their own edge with a white die-cut rim, and a few
   printed ones (her name, a name tag, a clock, her book covers). One light,
   from the top left, gives every sticker the same shadow.

   The bento is the order underneath and is never drawn: a sticker sits in its
   cells, and an empty cell is just the wall. A page is its sticker grown in
   place into a white panel, the way a tab opens in Arc; everything else moves
   out of its way, and back.

   Every value comes from a scale below. A new number is a new token.
   ========================================================================== */

@font-face { font-family: "TAY Sweetheart"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/fonts/TAYSweetheart.woff2") format("woff2"), url("/fonts/TAYSweetheart.woff") format("woff"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("/fonts/Manrope[wght].woff2") format("woff2-variations"); }
/* A jotted note's hand: Savannah asked for the sticker invites in
   handwriting, like a scrapbook note. Not the wordmark's script. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url("/fonts/Caveat[wght].woff2") format("woff2-variations"); }

/* ----------------------------------------------------------------------------
   0 · THE SCALES
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;
    --t-xs: .75rem; --t-sm: .875rem; --t-ui: .9375rem; --t-base: 1.0625rem; --t-lede: 1.1875rem;
    --t-h3: 1.375rem;
    --t-h2: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --t-h1: clamp(2rem, 1.55rem + 1.8vw, 2.875rem);

    --sp-0: .125rem; --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;   --sp-9: 6rem;

    --r-xs: 3px; --r-sm: 8px; --r-md: 12px; --r-panel: 18px; --r-full: 999px;
    --gap: clamp(8px, 1vw, 14px);
    --pad: clamp(10px, 1.2vw, 18px);
    --measure: 38rem;

    /* the wall */
    --wall: #f4d2dc;
    --w-pink: #ffa3c6; --w-apricot: #ffcaa2; --w-peri: #b3b8fb; --w-lilac: #dcbdf4;
    --wall-paint:
        radial-gradient(64% 60% at 6% 4%, var(--w-pink) 0%, transparent 70%),
        radial-gradient(58% 62% at 96% 6%, var(--w-apricot) 0%, transparent 70%),
        radial-gradient(72% 68% at 88% 98%, var(--w-peri) 0%, transparent 72%),
        radial-gradient(60% 60% at 4% 96%, var(--w-lilac) 0%, transparent 70%),
        var(--wall);
    /* ink, good on every part of the wall and on white */
    --ink: #231b2b; --ink-soft: #4a3f53; --ink-mute: #62566b;
    /* a page: a white panel */
    --panel: #fffcfa; --panel-2: #f8f2ef; --rule: rgba(35, 27, 43, .1);
    /* her pink; as text on white it deepens (5.8:1) */
    --pink: #ff4d9d; --pink-ink: #ae3580; --pink-wash: #ffe8f2;
    --hello: #d92a7a;   /* the name tag's band: her pink, deep enough for white type (4.6:1) */

    /* one light, top left: a hairline edge, a contact shadow, a soft lift */
    --sk-shadow: drop-shadow(0 0 .5px rgba(35, 27, 43, .34)) drop-shadow(.5px 1px 1px rgba(35, 27, 43, .2))
                 drop-shadow(2px 6px 8px rgba(35, 27, 43, .16));
    --sk-shadow-up: drop-shadow(0 0 .5px rgba(35, 27, 43, .3)) drop-shadow(1px 3px 2px rgba(35, 27, 43, .15))
                    drop-shadow(5px 14px 16px rgba(35, 27, 43, .2));
    /* vinyl: a soft specular band the pointer can move */
    --gloss: linear-gradient(118deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, .12) 51%, rgba(255, 255, 255, 0) 62%);
    /* grain: fractal noise, grey, centred on mid-grey in sRGB and stretched 3×
       so soft-light actually marks the wall; the vinyl gets half of it */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-vinyl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 0.5'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --ease: cubic-bezier(.16, 1, .3, 1);
    --spring: cubic-bezier(.2, .9, .25, 1.02);
    --boing: cubic-bezier(.3, 1.1, .55, 1);   /* a sticker lifting off: a 10% settle, not a bounce */
    --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --script: "TAY Sweetheart", "Snell Roundhand", cursive;
}

/* ----------------------------------------------------------------------------
   1 · RESET AND THE WALL
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* an author `display` beats the UA's [hidden] */
/* no reserved scrollbar gutter: home fits the screen and never scrolls, so a
   classic scrollbar only ever appears on a long page, and a stable gutter would
   leave a flat strip down the right of the wall at home */
html { -webkit-text-size-adjust: 100%; background: var(--wall); scrollbar-color: rgba(35, 27, 43, .3) transparent; }
body {
    margin: 0; min-height: 100dvh; color: var(--ink); caret-color: var(--pink-ink);
    font-family: var(--sans); font-size: var(--t-base); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: color-mix(in srgb, var(--pink) 30%, transparent); color: var(--ink); }
.wall { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--wall-paint); }
/* a dusting of tiny stars over the wall, under the grain */
.wall::before { content: ""; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23231b2b' fill-opacity='.055'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M45 20c.8 6.2 3.7 9.1 9.9 9.9-6.2.8-9.1 3.7-9.9 9.9-.8-6.2-3.7-9.1-9.9-9.9 6.2-.8 9.1-3.7 9.9-9.9Z' fill-opacity='.5'/%3E%3Cpath d='M150 110c.6 4.6 2.8 6.8 7.4 7.4-4.6.6-6.8 2.8-7.4 7.4-.6-4.6-2.8-6.8-7.4-7.4 4.6-.6 6.8-2.8 7.4-7.4Z' fill-opacity='.38'/%3E%3Ccircle cx='100' cy='170' r='2.4' fill-opacity='.4'/%3E%3Ccircle cx='175' cy='45' r='1.8' fill-opacity='.42'/%3E%3C/g%3E%3Cpath d='M110 40c.5 4 2.4 5.9 6.4 6.4-4 .5-5.9 2.4-6.4 6.4-.5-4-2.4-5.9-6.4-6.4 4-.5 5.9-2.4 6.4-6.4Z' fill='%23ff4d9d' fill-opacity='.22'/%3E%3C/svg%3E");
    background-size: 26px 26px, 200px 200px; }
.wall::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .72; mix-blend-mode: soft-light; }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 800; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: var(--r-sm); box-shadow: 0 0 0 6px rgba(255, 255, 255, .85); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--sp-4); top: -4rem; z-index: 99; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-full); background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: var(--sp-4); }

/* ----------------------------------------------------------------------------
   2 · THE BOARD — one grid, every screen, never drawn
   A cell sized from the board's width and a column count by screen shape.
   boot.js counts cells on true squares, then lets the rows stretch or squeeze
   a little so the board ends flush with the screen.

   At home the board is COMPOSED, not packed: every tile has a place, set per
   shape below (--at: row / column / rows / columns), and the empty cells
   between them are the whitespace. It reads in the order of her own line —
   who she is down the left (her name, hello, Ithaca right now), then her
   life in the order she says it: EMT-B, reader, dog mom of three, and the
   fun facts, with where to find her last. With a page open the places are
   dropped and the tiles flow around it by their spans (--cs × --rs).
   -------------------------------------------------------------------------- */
.board { container: board / inline-size; padding: var(--pad); }
/* a tilted sticker or a hover tag at the edge of the board must never widen
   or lengthen the page (a phone would zoom out to show it) */
.bento { overflow: clip; }
.grid {
    --cols: 6;
    --u: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: var(--row, minmax(var(--u), 1fr));   /* boot.js pins --row once laid out */
    grid-auto-flow: row dense;
    min-height: calc(100dvh - 2 * var(--pad));
}
.grid.is-measuring { min-height: 0; grid-auto-rows: var(--u); }
.tile { grid-column: span min(var(--cs, 1), var(--cols)); grid-row: span var(--rs, 1); }
.bento[data-open=""] .grid > .tile[data-tile] { grid-area: var(--at); }
.filler[data-size="w"] { --cs: 2; } .filler[data-size="t"] { --rs: 2; } .filler[data-size="m"] { --cs: 2; --rs: 2; }

/* ── ROLES ──────────────────────────────────────────────────────────────────
   Every tile has one role (data-role in bento.html, required by the macro) and
   a role has ONE size, in cells, wherever the tile is: at home, beside an open
   page, on any screen. The maps below only say WHERE; never how big. A new
   sticker picks a role and a place; it never brings its own size.

     hero     her name                 sized per screen shape below
     feature  the dogs                 big at home; a module beside a page
     module   2×2  EMS, books, gumball a sticker you could pick up
     chip     2×1  clock, glam, Axel, hello    a small sticker with a label
     wide     4×1  now playing         a chip with room to read
     dot      1×1  links               a round button

   --fit is the air a sticker keeps inside its cell, the same for every module. */
[data-role="module"], [data-role="feature"] { --cs: 2; --rs: 2; --fit: 10%; }
[data-role="feature"] { --r: 1.6; }
[data-role="chip"] { --cs: 2; --rs: 1; }
[data-role="wide"] { --cs: 4; --rs: 1; }
[data-role="dot"]  { --cs: 1; --rs: 1; }
/* beside an open page the dock is two modules wide, so a wide chip is a chip */
.bento:not([data-open=""]) [data-role="wide"] { --cs: 2; }
/* a page needs most of a mid-size screen; now playing waits at home until there is room beside it */
@media (max-width: 1599px) { .bento:not([data-open=""]):not([data-open="tape"]) .t-tape { display: none; } }

/* ── a phone, upright: 6 columns. Her name; the status row (links, then the
      clock in the corner); now playing; what she is; her people; the
      things she loves; the dogs last and widest ──
        1  2  3  4  5  6
      [ name ............ ]
      [ig][gr]  ·  [ clock ]
      [ now playing ...... ]
      [ EMS ][ books ]
      [ glam ][ Axel ]
      [ gumball ][ hello ]
      [ dogs ............ ]                                          */
@media (max-width: 35.99rem) {
    [data-role="module"], [data-role="feature"] { --cs: 3; --rs: 2; }
    [data-role="chip"] { --cs: 3; }
    [data-role="wide"] { --cs: 6; }
    .t-about { --rs: 2; }   /* a phone gives the name tag room to read */
}
.t-name  { --at: 1 / 1 / span 4 / span 6;  --cs: 6; --rs: 4; --strip: 3; }
.t-social.s0 { --at: 5 / 1; } .t-social.s1 { --at: 5 / 2; }
.t-clock { --at: 5 / 4 / span 1 / span 3; }
.t-tape  { --at: 6 / 1 / span 1 / span 6; }
.t-ems   { --at: 7 / 1 / span 2 / span 3; }
.t-books { --at: 7 / 4 / span 2 / span 3; }
.t-glam  { --at: 9 / 1 / span 1 / span 3; }
.t-axel  { --at: 9 / 4 / span 1 / span 3; }
.t-facts { --at: 10 / 1 / span 2 / span 3; }
.t-about { --at: 10 / 4 / span 2 / span 3; }
.t-dogs  { --at: 12 / 1 / span 3 / span 6; --r: 1.45; }

/* ── a tablet, upright: 8 columns ──
        1  2  3  4  5  6  7  8
      [ name .............. ][ clock ]
      [ name .............. ][ig][gr]
      [ name .............. ][ glam ]
      [ Axel ][ hello ][ now playing ]
      [ EMS ][ books ][ gumball ]  ·
      [ dogs .................... ]                                  */
@media (orientation: portrait) and (min-width: 36rem) {
    .grid { --cols: 8; }
    .t-name  { --at: 1 / 1 / span 3 / span 6;  --cs: 4; --rs: 3; --strip: 3; }
    .t-clock { --at: 1 / 7 / span 1 / span 2; }
    .t-social.s0 { --at: 2 / 7; } .t-social.s1 { --at: 2 / 8; }
    .t-glam  { --at: 3 / 7 / span 1 / span 2; }
    .t-axel  { --at: 4 / 1 / span 1 / span 2; }
    .t-about { --at: 4 / 3 / span 1 / span 2; }
    .t-tape  { --at: 4 / 5 / span 1 / span 4; }
    .t-ems   { --at: 5 / 1 / span 2 / span 2; }
    .t-books { --at: 5 / 3 / span 2 / span 2; }
    .t-facts { --at: 5 / 5 / span 2 / span 2; }
    .t-dogs  { --at: 7 / 1 / span 4 / span 8; --r: 1.7; }
}

/* ── landscape: 12 columns × 7 rows ──
   Her name top left, the dogs bottom right, a status corner top right, and
   the things she is standing on one baseline under her name's legend.
        1   2   3   4   5   6   7   8   9  10  11  12
   r1 [ name ................ ][ glam ][ig][gr][ clock · moon ]
   r2 [ name ................ ][ Axel ][ now playing ........ ]
   r3 [ name ................ ][hello ]   ·   ·   ·   ·   ·
   r4 [ name, her line ...... ]   ·  [ dogs ...................... ]
   r5   ·   ·   ·   ·   ·   ·   ·  [ dogs ...................... ]
   r6 [ EMS ][ books ][gumball]   ·  [ dogs .................... ]
   r7 [ EMS ][ books ][gumball]   ·  [ dogs .................... ]    · = wall */
@media (orientation: landscape) and (min-width: 36rem) {
    .grid { --cols: 12; }
    .t-name  { --at: 1 / 1 / span 4 / span 6;  --cs: 4; --rs: 3; --strip: 4; }
    .t-ems   { --at: 1 / 7 / span 2 / span 2; }
    .t-social.s0 { --at: 1 / 9; } .t-social.s1 { --at: 1 / 10; }
    .t-clock { --at: 1 / 11 / span 1 / span 2; }
    .t-tape  { --at: 2 / 9 / span 1 / span 4; }
    .t-glam  { --at: 5 / 1 / span 1 / span 2; }
    .t-axel  { --at: 5 / 3 / span 1 / span 2; }
    .t-about { --at: 5 / 5 / span 1 / span 2; }
    .t-books { --at: 6 / 1 / span 2 / span 2; }
    .t-facts { --at: 6 / 3 / span 2 / span 2; }
    .t-dogs  { --at: 4 / 7 / span 4 / span 6; }
}
.bento[data-open=""] .t-dogs { --r: 1.3; }   /* a tight huddle where they're big; a module beside a page is square */

/* ── wider than about 2:1 (an ultrawide): the same composition, centred, and
      the wall runs on either side ── */
@media (min-aspect-ratio: 39 / 20) { .bento[data-open=""] .board { max-width: 195dvh; margin-inline: auto; } }

/* beside an open page the stickers pack in this order, so the corner stays the
   status corner: clock and links, now playing, the things she is, the dogs,
   then her people. (Home has places; this is only the order they fill in.) */
.bento:not([data-open=""]) .t-clock  { order: 1; }
.bento:not([data-open=""]) .t-social { order: 2; }
.bento:not([data-open=""]) .t-tape   { order: 3; }
.bento:not([data-open=""]) .t-ems    { order: 4; }
.bento:not([data-open=""]) .t-books  { order: 5; }
.bento:not([data-open=""]) .t-facts  { order: 6; }
.bento:not([data-open=""]) .t-dogs   { order: 7; }
.bento:not([data-open=""]) .t-glam   { order: 8; }
.bento:not([data-open=""]) .t-axel   { order: 9; }
.bento:not([data-open=""]) .t-about  { order: 10; }
.bento:not([data-open=""]) .tile.is-open, .bento:not([data-open=""]) .t-name { order: 0; }
.bento:not([data-open=""]) .filler { order: 99; }   /* the wall's padding fills what's left, never first */

/* a page open: its tile takes the place boot.js measured for it — beside her
   name, or full width under the strip — and the others flow around it */
.tile.is-open { grid-column: var(--oc, 1 / -1); grid-row: var(--or, auto / span 8); }
/* on a narrow screen her name steps down to a small tile in the strip */
.bento[data-layout="strip"] .t-name { --cs: var(--strip); --rs: 1; }

/* ----------------------------------------------------------------------------
   3 · TILES — a place on the wall; the sticker is what you see
   No captions: a sticker says what it is, her line under her name is the
   legend, and a door's name comes up on hover and on keyboard focus.
   -------------------------------------------------------------------------- */
.tile {
    position: relative; min-width: 0; min-height: 0; container-type: size;
    color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* the bento's padding: kept in the grid so nothing moves, drawn as nothing */
.filler { visibility: hidden; pointer-events: none; }

.face {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    padding: clamp(4px, 5cqmin, 14px); color: inherit; text-decoration: none; border-radius: var(--r-md);
}
.face:focus-visible { outline-offset: -2px; }
.tile.is-open > .face { display: none; }
.art { position: relative; flex: 1; min-height: 0; container-type: size; }

/* a door's name, on hover and focus: a little printed tab */
.tag {
    position: absolute; left: 50%; bottom: 4%; z-index: 3;
    display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap;
    padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
    background: #fff; color: var(--ink); font-size: var(--t-sm); font-weight: 750; letter-spacing: -.01em; line-height: 1.3;
    filter: var(--sk-shadow); pointer-events: none;
    translate: -50% 6px; rotate: -2deg; scale: .9; opacity: 0;
    transition: opacity .16s var(--ease), translate .45s var(--boing), scale .45s var(--boing);
}
.tag small { font-size: inherit; font-weight: 500; color: var(--ink-soft); letter-spacing: 0; }
@container (max-width: 200px) { .tag small { display: none; } }
a.face:focus-visible .tag { opacity: 1; translate: -50% 0; scale: 1; }

/* ── a sticker ──
   .sk-cut   a photograph cut along its own edge (the rim is in the file)
   .sk-rect  a printed rectangle: white vinyl, rounded corners
   Both carry the same shadow, the same grain and the same gloss, which the
   pointer moves. --pos is where it sits in its place (and where its gloss
   mask sits, so they agree). */
.sk { display: block; rotate: var(--tilt, 0deg); filter: var(--sk-shadow); transition: rotate .5s var(--boing), translate .5s var(--boing), scale .5s var(--boing), filter .5s var(--spring); }
.sk::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: var(--gloss) no-repeat, var(--grain-vinyl);
    background-size: 300% 300%, 180px 180px; background-position: var(--gx, 22%) var(--gy, 22%), 0 0;
    mix-blend-mode: soft-light;
    -webkit-mask: var(--m) var(--pos, 50% 50%) / contain no-repeat; mask: var(--m) var(--pos, 50% 50%) / contain no-repeat;
}
.sk-cut { position: absolute; inset: 0; }
.sk-cut > img { width: 100%; height: 100%; object-fit: contain; object-position: var(--pos, 50% 50%); }
.sk-rect { position: relative; background: #fff; border-radius: var(--r-md); }
.sk-rect::after { border-radius: inherit; }
@media (hover: hover) {
    a.face:hover .sk { translate: 0 -4px; rotate: calc(var(--tilt, 0deg) * .35); scale: 1.03; filter: var(--sk-shadow-up); }
    a.face:hover .tag { opacity: 1; translate: -50% 0; scale: 1; }
}

/* ── her name: the wordmark, die-cut, over her name in ink ── */
.t-name .face { justify-content: flex-start; gap: var(--sp-2); padding: clamp(6px, 4cqmin, 18px); }
.t-name .art { flex: 0 1 auto; aspect-ratio: 343 / 157; container-type: normal; }
.wordmark { position: absolute; inset: 0; margin: 0; line-height: 0; }
.sk-word { width: 100%; height: 100%; overflow: visible; rotate: -2deg; }
.sk-word text { font-family: var(--script); font-size: 120px; }
.sk-word .w-rim { fill: #fff; stroke: #fff; stroke-width: 22px; stroke-linejoin: round; }
.sk-word .w-ink { fill: var(--pink); }
.sk-word .w-gloss { fill: url(#w-gloss); mix-blend-mode: soft-light; }
.name-full { margin-top: calc(-1 * var(--sp-1)); padding-left: 3%; font-weight: 800; font-size: max(var(--t-lede), 7.5cqi); line-height: 1; letter-spacing: -.035em; }
.name-line { padding-left: 3%; font-size: max(var(--t-sm), 3.4cqi); line-height: 1.4; font-weight: 500; color: var(--ink-soft); text-wrap: balance; }

/* ── doodles stuck around her name: tiny die-cut stickers, placed around the
      wordmark; hidden when her name is a thin strip ── */
.doodads { position: absolute; inset: 0; pointer-events: none; }
.doodad { position: absolute; height: auto; filter: var(--sk-shadow); }
.d-sparkle { width: 12%; left: -4%; top: -14%; rotate: 10deg; }
.d-star    { width: 7.5%; right: 7%; top: -9%; rotate: -12deg; }
.d-moon    { width: 10%; right: -5%; top: 30%; rotate: 14deg; }
.d-flower  { width: 10%; left: -3%; bottom: 3%; rotate: -10deg; }
.d-clover  { width: 7.5%; left: 38%; top: -12%; rotate: 8deg; }
.d-rainbow { width: 15%; right: 0%; bottom: -3%; rotate: 5deg; }
.d-vine    { width: 8%; left: -6%; top: 30%; rotate: -12deg; }
.d-heart   { width: 6.5%; left: 46%; bottom: 1%; rotate: 8deg; }
.d-swoosh  { width: 70%; left: 13%; bottom: 3.5%; }
.d-sparkle path, .d-star path, .d-moon path, .d-heart path { stroke: #fff; stroke-width: 2; paint-order: stroke; stroke-linejoin: round; }
.d-sparkle path { fill: var(--pink); }
.d-star path { fill: #ffc53d; }
.d-moon path { fill: #9aa5ff; }
.d-heart path { fill: var(--pink); }
.d-flower .petals ellipse { fill: #fff; stroke: #fff; stroke-width: 1.6; paint-order: stroke; }
.d-flower .dot { fill: var(--pink); stroke: #fff; stroke-width: 1.2; paint-order: stroke; }
.d-vine .leaf { fill: #6fbf73; stroke: #fff; stroke-width: 1.4; paint-order: stroke; stroke-linejoin: round; }
.d-clover .leaves path { fill: #6fbf73; stroke: #fff; stroke-width: 1.8; paint-order: stroke; stroke-linejoin: round; }
.d-clover .stem-rim { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.d-clover .stem { fill: none; stroke: #58a05c; stroke-width: 2.4; stroke-linecap: round; }
@media (hover: hover) { .t-name a.face:hover .sk { translate: none; rotate: none; scale: none; filter: var(--sk-shadow); } }
/* in the strip her name is small: just the sticker */
@container (max-height: 130px) { .t-name .name-full, .t-name .name-line { display: none; } .t-name .art { flex: 1 1 auto; } .t-name .doodads { display: none; } }

/* ── About: a name tag, and a coffee ── */
.hello-pack { position: absolute; inset: 0; margin: auto; height: min(80cqh, 100cqw / 1.5); aspect-ratio: 1.5; container-type: size; }
.hello {
    position: absolute; inset: 0 14% 0 2%; margin-block: auto; height: fit-content;
    padding: clamp(4px, 3cqmin, 8px); border-radius: clamp(10px, 8cqmin, 20px);
}
.hello-in { display: block; border-radius: clamp(7px, 6cqmin, 14px); background: var(--hello); color: #fff; text-align: center; overflow: hidden; }
.hello-in b { display: block; padding-top: 6cqmin; font-size: clamp(var(--t-sm), 17cqmin, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: .02em; }
.hello-in small { display: block; padding: 1.5cqmin 0 4cqmin; font-size: clamp(var(--t-xs), 6.5cqmin, var(--t-ui)); font-weight: 700; line-height: 1; }
.hello-in i { display: block; margin-bottom: 7cqmin; padding: 5cqmin 0 4cqmin; background: #fff; color: #2b1d3d; font-style: normal; font-weight: 800; font-size: clamp(var(--t-sm), 13cqmin, 2.5rem); line-height: 1.05; letter-spacing: -.03em; }
.hello-pack .coffee { inset: auto -3% 2% auto; width: 38%; height: 44%; --pos: 50% 100%; }

/* ── EMS: the Star of Life, in its own blue ── */
.t-ems .sk-cut { inset: 14%; }   /* optical size: a dense blue star weighs more than its box */

/* ── Books: her covers, held like a hand of cards — each turns about one
      point under the middle one, the one she wrote about in front ── */
.fan { --h: min(76cqh, 100cqw / 1.6); position: absolute; inset: 0; }
.cover {
    position: absolute; left: 0; right: 0; bottom: 6%; margin-inline: auto; width: fit-content; height: var(--h);
    padding: clamp(3px, 2.2cqmin, 6px); border-radius: clamp(5px, 3cqmin, 10px); transform-origin: 50% 125%;
}
.cover:nth-child(3) { z-index: 1; }
.cover img { height: 100%; width: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: clamp(2px, 1.4cqmin, 5px); }
@media (hover: hover) { .t-books a.face:hover .cover { rotate: calc(var(--tilt) * 1.3); } }

/* ── Dogs: all of them, cut from their own photos, huddled. Each dog is as
      wide as its photo at its height; --r (the huddle's width over its height)
      only decides how much they overlap. Frankie, nose first, in front ── */
.pack { position: absolute; left: 0; right: 0; bottom: 5%; margin-inline: auto; height: min(90cqh, 100cqw / var(--r, 1.25)); aspect-ratio: var(--r, 1.25); }
.pack .pup { --pos: 50% 100%; inset: auto; bottom: 0; width: fit-content; }
.pack .pup > img { width: auto; }
.pack.n3 .pup:nth-child(1) { left: 0; height: 94%; }                          /* Rhett, sitting sideways */
.pack.n3 .pup:nth-child(2) { right: 0; height: 100%; }                        /* Oswald, upright */
.pack.n3 .pup:nth-child(3) { left: 0; right: 0; margin-inline: auto; height: 70%; z-index: 1; }   /* Frankie */
.pack.n2 .pup { height: 100%; } .pack.n2 .pup:nth-child(1) { left: 0; } .pack.n2 .pup:nth-child(2) { right: 0; }
.pack.n1 .pup { left: 0; right: 0; margin-inline: auto; height: 100%; }
.t-dogs .sk-cut:not(.pup) { inset: 2%; }

/* ── Fun facts: the gumball machine, standing on its base ── */
.t-facts .sk-cut { inset: 2% 4%; --pos: 50% 100%; }   /* a tall sticker needs its height */

/* ── Ithaca, right now: a little printed label with the time, and tonight's
      moon (NASA's, with tonight's shadow on it) stuck over its corner ── */
.clock {
    position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; max-width: 100%;
    display: flex; flex-direction: column; gap: 1px;
    padding: clamp(6px, 9cqh, 16px) clamp(12px, 9cqw, 26px); border-radius: clamp(10px, 14cqh, 22px);
}
.clock-where { font-size: max(var(--t-xs), 10.5cqh); font-weight: 750; color: var(--pink-ink); }
.clock-time { font-weight: 800; font-size: max(var(--t-h3), 28cqh); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock-sub { font-size: max(var(--t-xs), 10.5cqh); font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
@container (max-height: 96px) { .clock-sub { display: none; } }
/* the moon rides the label's corner; the label's shadow is its shadow (one light) */
.clock .moon { inset: 0 5% 0 auto; margin-block: auto; width: auto; height: 60%; aspect-ratio: 1; filter: none; }
.t-clock .clock { padding-right: calc(var(--sp-3) + 58cqh); }   /* the time clears the moon */
.moon-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon-shade circle { fill: rgba(16, 14, 30, .8); }

/* ── where to find her: two round buttons ── */
.t-social .face { padding: 14%; }
.social { position: absolute; inset: 0; margin: auto; height: min(100%, 100cqw); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; }
.social-ico { width: 42%; height: auto; color: var(--ink); }

/* ----------------------------------------------------------------------------
   4 · SPINES — drawn from the cover colour until the photo session replaces
   them. --w is thickness and --h height as a % of a 190-unit book; --px turns
   units into pixels wherever a spine stands.
   -------------------------------------------------------------------------- */
.spine {
    position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: calc(var(--w) * var(--px, 1px)); height: calc(190 * var(--px, 1px) * var(--h) / 100);
    padding: calc(12 * var(--px, 1px)) 0 calc(9 * var(--px, 1px));
    border-radius: 2px 2px 1px 1px; overflow: hidden;
    background: linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(255, 255, 255, .12) 22%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12)), var(--c);
    color: var(--k); text-decoration: none;
    box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14);
}
.spine-t {
    writing-mode: vertical-rl; flex: 0 1 auto; min-height: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 700; font-size: clamp(7px, calc(var(--w) * var(--px, 1px) * .42), calc(13 * var(--px, 1px))); line-height: 1;
}
.spine-a { writing-mode: vertical-rl; font-weight: 600; font-size: calc(8 * var(--px, 1px)); line-height: 1; opacity: .85; white-space: nowrap; overflow: hidden; max-height: 28%; }
.spine.s0::before, .spine.s0::after { content: ""; position: absolute; left: 0; right: 0; height: calc(5 * var(--px, 1px)); background: currentColor; opacity: .35; }
.spine.s0::before { top: calc(6 * var(--px, 1px)); } .spine.s0::after { bottom: calc(26 * var(--px, 1px)); }
.spine.s1 .spine-t { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: clamp(6px, calc(var(--w) * var(--px, 1px) * .32), calc(11 * var(--px, 1px))); }
.spine.s2 .spine-t { padding: calc(6 * var(--px, 1px)) 0; background: color-mix(in srgb, var(--c) 30%, #fff);   /* light on any spine: dark type ≥7:1 */ color: #231d24; border-radius: 1px; width: 70%; display: flex; align-items: center; justify-content: center; }
.spine.s3 { background: linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .1) 25%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .16)), var(--c); }
.spine.s3 .spine-t { font-style: italic; font-weight: 600; }
.spine.is-photo { padding: 0; background: none; }
.spine.is-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------------------------
   5 · A PAGE — the sticker grown into the wall itself: no panel, the words sit
   on the gradient like everything else. The page runs in the document, so it
   scrolls like any page; the close button rides along.
   -------------------------------------------------------------------------- */
.tile.is-open { border-radius: var(--r-panel); overflow: clip; }
/* a desktop: the tile has grown to the screen, so the page scrolls inside it */
.bento[data-fit="screen"] .tile.is-open { overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: thin; }
.page { position: relative; container: page / inline-size; }
.page-head { position: sticky; top: 0; z-index: 4; height: 0; display: flex; justify-content: flex-end; }
.page-close {
    display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; margin: var(--sp-3);
    border-radius: var(--r-full); background: color-mix(in srgb, var(--panel) 80%, transparent);
    box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink);
    transition: transform .4s var(--spring), background .2s;
}
.page-close svg { width: 1.05rem; }
.page-close:hover { transform: rotate(90deg); background: #fff; }
.page-in { padding: clamp(var(--sp-6), 6cqi, var(--sp-8)) clamp(var(--sp-4), 5cqi, var(--sp-8)) var(--sp-8); }
.page-in:not(.shelf-page) { max-width: 72rem; }
.shelf-page { max-width: 104rem; margin-inline: auto; }
.page-title { font-size: var(--t-h1); letter-spacing: -.035em; line-height: 1.02; outline: none; }
/* the title, and the page's sticker beside it — clear of the close button */
.page-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding-right: 3.25rem; }
.page-art { position: relative; flex: none; width: clamp(6.5rem, 16cqi, 11rem); aspect-ratio: 1; margin-top: calc(-1 * var(--sp-4)); }
.prose { margin-top: var(--sp-5); max-width: var(--measure); font-size: var(--t-lede); line-height: 1.65; color: var(--ink-soft); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--t-h2); color: var(--ink); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--t-h3); color: var(--ink); }
.prose a { color: var(--pink-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--pink-ink) 35%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose blockquote { padding: var(--sp-1) 0 var(--sp-1) var(--sp-5); border-left: 3px solid var(--pink); font-style: italic; color: var(--ink); }

/* ── About: the words, and her facts at a glance ── */
.about-grid { display: grid; gap: var(--sp-7) var(--sp-8); align-items: start; }
@container page (min-width: 52rem) { .about-grid { grid-template-columns: minmax(0, var(--measure)) minmax(13rem, 20rem); } }
.glance { margin-top: var(--sp-5); }
.glance h2 { font-size: var(--t-ui); font-weight: 750; letter-spacing: -.01em; }
.glance ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.glance li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule); }
.glance b { font-weight: 750; }
.glance li span { color: var(--ink-soft); }
.about-art { position: relative; flex: none; width: clamp(8rem, 18cqi, 12rem); aspect-ratio: 1; container-type: size; }
.about-art .hello { left: 0; right: 6%; bottom: 14%; }
.about-art .coffee { inset: auto -10% -2% auto; width: 40%; height: 34%; }
.about-photo { margin: 0 0 var(--sp-6); max-width: 24rem; transform: rotate(-1.5deg); }
.about-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md);
    box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(35, 27, 43, .06), 0 10px 24px -14px rgba(35, 27, 43, .3); }

/* ── Now playing: a cassette and what's on, a wide chip in the status corner.
      The cassette is the sticker; the label beside it says what's playing ── */
.tape-chip { position: absolute; inset: 0; margin: auto 0 auto auto; width: fit-content; max-width: 100%; min-width: min(100%, 17rem); height: min(100%, 5.5rem);
    display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); overflow: clip; }
.tape { position: relative; flex: none; width: 4.9rem; border-radius: 7px; padding: .3rem .4rem .4rem;
    background: linear-gradient(160deg, var(--pink), var(--pink-ink));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
/* the cover is printed on the cassette itself, under a pink wash that keeps it a pink cassette */
.tape { --wash: linear-gradient(160deg, color-mix(in srgb, var(--pink) 30%, transparent), color-mix(in srgb, var(--pink-ink) 42%, transparent)); }
.tape[style*="--cover"] { background: var(--wash), var(--cover) center / cover, var(--pink); }
/* the window is a clear slice of the same print, under a dark glaze so the reels read */
.tape[style*="--cover"] .tape-window { background: linear-gradient(rgba(58, 43, 63, .38), rgba(58, 43, 63, .38)), var(--cover) center 60% / 140% auto; }
.tape-label { display: block; margin-bottom: .25rem; padding: .05rem .2rem; border-radius: 3px; background: #fffdf4;
    font-size: .6rem; font-weight: 750; letter-spacing: 0; color: var(--pink-ink); text-align: center; white-space: nowrap; }
.tape-window { display: flex; justify-content: space-between; padding: .2rem .4rem; border-radius: 4px; background: rgba(58, 43, 63, .5); }
.reel { position: relative; width: .95rem; height: .95rem; border-radius: 50%; border: 1.5px solid #fff;
    background: repeating-conic-gradient(from 0deg, #ffd9e8 0 14deg, transparent 14deg 60deg); }
.reel::before { content: ""; position: absolute; inset: .22rem; border-radius: 50%; background: #fff; }
.tape-chip:not(.is-playing) .eq { display: none; }
.tape-chip .reel { animation: reel-spin 3.2s linear infinite; }
@keyframes reel-spin { to { transform: rotate(360deg); } }
.tape > * { position: relative; }
.tape-meta { display: grid; min-width: 0; line-height: 1.25; }
.tape-kicker { display: flex; align-items: center; gap: .4rem; font-size: var(--t-xs); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--pink-ink); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: .75rem; }
.eq i { width: 3px; height: 3px; border-radius: 2px; background: var(--pink-ink); }
.tape-chip.is-playing .eq i { animation: eq-bounce .9s ease-in-out infinite; }
.tape-chip.is-playing .eq i:nth-child(2) { animation-delay: -.3s; }
.tape-chip.is-playing .eq i:nth-child(3) { animation-delay: -.55s; }
.tape-chip.is-playing .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq-bounce { 0%, 100% { height: 3px; } 50% { height: .75rem; } }
.tape-track { font-weight: 800; font-size: var(--t-ui); letter-spacing: -.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-artist { font-size: var(--t-sm); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tape-artist:empty { display: none; }
.tape-go { margin-top: .1rem; font-size: var(--t-xs); font-weight: 750; color: var(--pink-ink); white-space: nowrap; }
a.face:hover .tape-go { text-decoration: underline; }
@container (max-height: 70px) { .tape-artist, .tape-go { display: none; } }

/* ── Mixtape page: her top artists and songs, stuck on the wall in a pile. Artists
      are round stickers, songs are covers with a label stuck across them ── */
.tape-ranges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.tape-range { padding: var(--sp-2) var(--sp-4); border: 0; border-radius: var(--r-full); background: #fff; color: var(--ink);
    font: inherit; font-size: var(--t-sm); font-weight: 750; filter: var(--sk-shadow); cursor: pointer; }
.tape-range[aria-pressed="true"] { background: var(--pink); color: #fff; }
[data-top][data-source="recent"] .tape-ranges { display: none; }
.tape-top-title { margin-top: var(--sp-7); font-size: var(--t-h2); letter-spacing: -.03em; }
.tape-pile { list-style: none; margin: 0; padding: var(--sp-5) 0 var(--sp-6);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.tape-pile > li { --w: clamp(6rem, 24cqi, 9.5rem); width: calc(var(--w) * var(--k, 1)); margin: 0 calc(var(--w) * -.04) var(--sp-5);
    position: relative; translate: 0 var(--dy, 0); transition: scale .5s var(--boing); }
.tape-pile > li:nth-child(4n+1) { --k: 1.1;  --dy: 0; }
.tape-pile > li:nth-child(4n+2) { --k: .92;  --dy: 1.75rem; }
.tape-pile > li:nth-child(4n+3) { --k: 1;    --dy: .5rem; }
.tape-pile > li:nth-child(4n+4) { --k: .96;  --dy: 1.25rem; }
.tape-pile > li:nth-child(3n) { z-index: 1; }
@media (hover: hover) { .tape-pile > li:hover { z-index: 5; scale: 1.06; } }
.tape-pick { display: grid; justify-items: center; color: inherit; text-decoration: none; rotate: var(--tilt, 0deg); }
.tape-pick img, .tape-pick .tape-blank { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--pink-wash);
    border: 4px solid #fff; filter: var(--sk-shadow); }
.tape-artists .tape-pick img, .tape-artists .tape-blank { border-radius: 50%; }
.tape-songs .tape-pick img, .tape-songs .tape-blank { border-radius: var(--r-md); }
.tape-pick-name { position: relative; z-index: 1; margin-top: -1.1rem; max-width: 100%; padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-md); background: #fff; filter: var(--sk-shadow); rotate: -2deg;
    font-size: var(--t-sm); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.tape-pick-by { font-weight: 600; color: var(--ink-mute); letter-spacing: 0; }
.tape-quiet { margin-top: var(--sp-6); color: var(--ink-soft); }
.tape-spotify { display: inline-block; margin-top: var(--sp-4); font-weight: 800; color: var(--pink-ink); }

/* ── Axel and Glam squad: two small invitation stickers, one component. A
      printed object (the ring, the polish) with a white label stuck beside it
      that says what the door holds. Same size, same tilt range, same label ── */
.axel-sticker, .glam-sticker { position: absolute; inset: 0; margin: auto; height: min(112cqh, 50cqw);
    display: flex; align-items: center; gap: 4cqw; width: max-content; max-width: 100%;
    rotate: var(--tilt, -3deg); filter: var(--sk-shadow); }
.glam-sticker { --tilt: 3deg; }
.axel-ring, .glam-sticker .glam-polish { height: 100%; width: auto; flex: none; }
.axel-says, .glam-says {
    font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    font-size: clamp(1rem, 11cqh, 1.375rem); font-weight: 600; line-height: 1.05; color: var(--ink);
    white-space: nowrap; rotate: -2deg; }
.axel-says em, .glam-says em { display: block; font-style: normal; }
.note-arrow { height: 1.15em; width: auto; vertical-align: -.22em; margin-right: .12em; color: var(--ink-soft); }
@container (max-aspect-ratio: 6/5) {
    .axel-says, .glam-says { display: none; }
    .axel-sticker, .glam-sticker { height: min(94cqh, 94cqw); }
}
.glam-polish .rim { stroke: #fff; stroke-width: 7; paint-order: stroke; stroke-linejoin: round; }

/* ── Axel: his photos stuck to the wall in a pile, like the dogs — tilted,
      overlapping, a white print border as their rim ── */
.axel-photos { list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-3) 0 var(--sp-5);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.axel-photos > li { --w: clamp(8.5rem, 34cqi, 15rem); width: var(--w); margin: 0 calc(var(--w) * -.06) calc(var(--w) * -.08);
    position: relative; transition: scale .5s var(--boing), translate .5s var(--boing); }
.axel-photos > li:nth-child(even) { translate: 0 1.5rem; }
.axel-photos > li:nth-child(3n) { z-index: 1; }
@media (hover: hover) { .axel-photos > li:hover { z-index: 5; scale: 1.05; } }
.axel-photo { margin: 0; transform: rotate(var(--tilt, 0deg)); }
.axel-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover;
    border-radius: var(--r-md); border: 5px solid #fff; filter: var(--sk-shadow); }

/* ── EMS: her photos stuck to the wall in piles, like the axel page — tilted,
      overlapping, a white print border as their rim. Mixed orientations, so no
      crop: each photo keeps its own shape ── */
.ems-photos { list-style: none; margin: 0 0 var(--sp-6); padding: var(--sp-3) 0 var(--sp-5);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.ems-photos > li { --w: clamp(8.5rem, 34cqi, 15rem); width: var(--w); margin: 0 calc(var(--w) * -.06) calc(var(--w) * -.08);
    position: relative; transition: scale .5s var(--boing), translate .5s var(--boing); }
.ems-photos > li:nth-child(even) { translate: 0 1.5rem; }
.ems-photos > li:nth-child(3n) { z-index: 1; }
@media (hover: hover) { .ems-photos > li:hover { z-index: 5; scale: 1.05; } }
.ems-photo { position: relative; margin: 0; transform: rotate(var(--tilt, 0deg)); }
.ems-photo img { display: block; width: 100%; height: auto;
    border-radius: var(--r-md); filter: var(--sk-shadow); }
/* washi tape holding each photo to the page, alternating colors */
.ems-photo::before, .ems-photo::after {
    content: ""; position: absolute; top: -11px; width: 62px; height: 20px; z-index: 2;
    background-color: rgba(255, 163, 198, .88);
    background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.3) 0 5px, transparent 5px 10px);
    box-shadow: 0 1px 3px rgba(35, 27, 43, .2); opacity: .96; }
.ems-photo::before { left: -16px; transform: rotate(-42deg); }
.ems-photo::after { right: -16px; transform: rotate(42deg); }
.ems-photos > li:nth-child(2n) .ems-photo::before,
.ems-photos > li:nth-child(2n) .ems-photo::after { background-color: rgba(179, 184, 251, .88); }
.ems-photos > li:nth-child(3n) .ems-photo::before,
.ems-photos > li:nth-child(3n) .ems-photo::after { background-color: rgba(255, 197, 61, .88); }
.axel-visit { margin-top: var(--sp-5); }
.axel-link { display: inline-block; font-weight: 800; color: var(--pink-ink); }

/* ── Glam squad: her beauty team's business cards, stuck on the page in a
      pile — tilted, overlapping, each linking to her Facebook ── */
.glam-art .glam-polish { width: 100%; height: 100%; }
.glam-cards { list-style: none; margin: 0; padding: var(--sp-6) 0 var(--sp-4);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.glam-cards > li { --w: clamp(15rem, 44cqi, 20rem); width: var(--w);
    margin: 0; margin-inline: calc(var(--w) * -.035); padding: var(--sp-5); }
.glam-cards > li:nth-child(even) { translate: 0 .75rem; }
.glam-cards > li:nth-child(3n) { z-index: 1; }
@media (hover: hover) { .glam-cards > li:hover { z-index: 5; scale: 1.04; } }
.glam-card h2 { margin: 0; font-size: var(--t-h3); font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.glam-service { margin: var(--sp-2) 0 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft); }
.glam-link { display: inline-block; margin-top: var(--sp-4); font-weight: 800; color: var(--pink-ink); }
.glam-link:hover { color: var(--pink-deep); }
.glam-note { margin: var(--sp-3) 0 0; font-size: var(--t-body); line-height: 1.6; color: var(--ink-soft); }
.glam-mods-title { margin: var(--sp-6) 0 0; text-align: center; font-size: var(--t-h3);
    font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }

/* ── Glam squad: their work, taped to the page like a scrapbook. No white
      borders on the photos; washi tape holds each one down, and a handwritten
      note under it says whose work it is ── */
.glam-work-title { margin: var(--sp-7) 0 0; font-size: var(--t-h3); font-weight: 800;
    letter-spacing: -.025em; line-height: 1.1;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-3); }
/*- salon decals: little die-cut stickers in the polish bottle's style, one for
    each craft — scissors and a comb for hair, lipstick for glam, lashes for
    Serenity. They sit on the page like stickers, white rims and all. -*/
.decal .rim { stroke: #fff; stroke-width: 7; paint-order: stroke; stroke-linejoin: round; }
.page[data-page="glam"] .page-top { position: relative; }
.glam-decal { position: absolute; width: clamp(2.75rem, 9cqi, 4rem); aspect-ratio: 1;
    filter: var(--sk-shadow); pointer-events: none; }
.glam-decal .decal, .glam-decal-in .decal { display: block; width: 100%; height: 100%; }
.glam-decal.d-scissors { left: -.75rem; top: -1.5rem; transform: rotate(-14deg); }
.glam-decal.d-lipstick { right: 22%; top: -1.25rem; transform: rotate(10deg); }
.glam-decal-in { width: 2.75rem; aspect-ratio: 1; flex: none; filter: var(--sk-shadow); }
.glam-decal-in:first-child { transform: rotate(-10deg); }
.glam-decal-in:last-child { transform: rotate(8deg); }
.glam-work { list-style: none; margin: var(--sp-5) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--sp-6) var(--sp-4); }
.glam-shot { position: relative; rotate: var(--tilt, 0deg); }
.glam-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-xs);
    box-shadow: 0 1px 2px rgba(35, 27, 43, .08), 0 12px 28px -16px rgba(35, 27, 43, .35); }
.glam-shot::before { content: ""; position: absolute; z-index: 1; top: -11px; left: 50%;
    width: 5.5rem; height: 1.5rem; translate: -50% 0; rotate: -4deg;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--pink) 38%, #fff),
        color-mix(in srgb, var(--pink) 55%, #fff));
    opacity: .8; box-shadow: 0 1px 2px rgba(35, 27, 43, .12); }
.glam-shot:nth-child(3n)::before {
    background: linear-gradient(100deg,
        color-mix(in srgb, #b3b8fb 50%, #fff),
        color-mix(in srgb, #b3b8fb 65%, #fff));
    rotate: 5deg; }
.glam-shot:nth-child(3n+1)::before {
    background: linear-gradient(100deg,
        color-mix(in srgb, #dcbdf4 50%, #fff),
        color-mix(in srgb, #dcbdf4 65%, #fff)); }
.glam-shot-by { display: block; margin-top: var(--sp-2); text-align: center;
    font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
    font-size: 1.2rem; font-weight: 600; line-height: 1; color: var(--ink-soft); }

/* ── Dogs: stuck to the wall in a pile, not a row. Each one a different size,
      tilted and dropped a little lower or higher, overlapping its neighbour;
      the name is a small label stuck across its feet. Pick one up on hover ── */
.dogs { list-style: none; padding: var(--sp-5) 0 var(--sp-7); margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.dog {
    --w: clamp(9rem, 46cqi, 17rem);
    position: relative; display: grid; justify-items: center; text-align: center;
    width: calc(var(--w) * var(--k, 1)); margin: 0 calc(var(--w) * -.07) calc(var(--w) * -.12);
    translate: 0 var(--dy, 0); z-index: var(--z, 1);
    transition: scale .5s var(--boing), translate .5s var(--boing);
}
.dog:nth-child(4n+1) { --k: 1.06; --dy: 0rem;   --z: 2; }
.dog:nth-child(4n+2) { --k: .9;   --dy: 3rem;   --z: 1; }
.dog:nth-child(4n+3) { --k: 1;    --dy: .75rem; --z: 3; }
.dog:nth-child(4n+4) { --k: .94;  --dy: 2rem;   --z: 1; }
@media (hover: hover) {
    .dog:hover { z-index: 5; scale: 1.05; translate: 0 calc(var(--dy, 0rem) - 6px); }
    .dog:hover .sk { filter: var(--sk-shadow-up); }
}
.dog-pic { position: relative; width: 100%; aspect-ratio: 4 / 5; }
/* no photo yet: the die line of the sticker that goes here, as in an album */
.dog-slot {
    display: block; width: 100%; aspect-ratio: 1; border-radius: 28%;
    border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
    background: color-mix(in srgb, var(--pink) 5%, transparent);
}
.dog-name {
    position: relative; z-index: 1; margin-top: -1.6rem; padding: var(--sp-1) var(--sp-4);
    border-radius: var(--r-full); background: #fff; filter: var(--sk-shadow);
    rotate: calc(var(--tilt-n, -3deg)); font-size: var(--t-ui); letter-spacing: -.02em;
}
.dog:nth-child(even) .dog-name { --tilt-n: 3.5deg; }
.dog-name span { font-size: var(--t-sm); font-weight: 600; color: var(--ink-mute); letter-spacing: 0; }
.dog-about { margin-top: var(--sp-2); max-width: 16rem; font-size: var(--t-sm); color: var(--ink-soft); }
.dogs-past-title { margin-top: var(--sp-8); font-size: var(--t-h2); }
.dogs.is-past .dog-pic img { filter: saturate(.55); }

/* ── Books: floating shelves on the wall ── */
.shelf-top { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.shelf-sub { color: var(--ink-soft); font-size: var(--t-ui); }
.find {
    display: flex; align-items: center; gap: var(--sp-2); max-width: 26rem; margin-top: var(--sp-3);
    padding: 0 var(--sp-4); border-radius: var(--r-md); background: #fff;
    box-shadow: 0 0 0 1px var(--rule), 0 1px 2px rgba(35, 27, 43, .06), 0 10px 24px -14px rgba(35, 27, 43, .3);
}
.find .ico { width: 1.1rem; flex: none; color: var(--ink-mute); }
.find input { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; background: none; outline: none; font-size: var(--t-ui); color: var(--ink); }
.find input::placeholder { color: var(--ink-mute); opacity: 1; }
.find:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); gap: var(--sp-6) var(--sp-4); align-items: start; }
.case { container: case / inline-size; }
.case-lbl { margin-bottom: var(--sp-2); font-size: var(--t-sm); font-weight: 750; color: var(--ink-soft); }
/* no cabinet: floating shelves screwed to the wall, the books standing on
   each plank. The 10px sides stay as air so the spine maths holds */
.case-body { padding: 10px 10px 0; }
.shelf {
    /* the case's inner width (less its 10px sides and this shelf's 4px ones) in
       spine units. cqw, not cqi: vertical titles would read cqi as the case height */
    --px: calc((100cqw - 28px) / var(--units, 340));
    display: flex; align-items: flex-end; gap: 2px; min-height: calc(214 * var(--px));
    padding: 0 4px; position: relative;
    border-bottom: calc(10 * var(--px)) solid #fbf8f4; border-radius: 0 0 2px 2px;
    box-shadow: 0 calc(3 * var(--px)) 0 #ddd3c9, 0 calc(14 * var(--px)) calc(16 * var(--px)) calc(-8 * var(--px)) rgba(35, 27, 43, .35);
    margin-bottom: calc(22 * var(--px));
}
.shelf .spine { transform-origin: 50% 100%; transition: transform .35s var(--spring), opacity .3s, filter .3s; }
.shelf .spine:hover, .shelf .spine:focus-visible { transform: translateY(calc(-14 * var(--px))); z-index: 1; }
.shelf .spine:focus-visible { outline-offset: 1px; box-shadow: none; }
.shelf .spine.is-reviewed::after { content: ""; position: absolute; top: calc(4 * var(--px)); left: 50%; translate: -50% 0; width: calc(7 * var(--px)); aspect-ratio: 1; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 1.5px #fff; }
.shelf .spine.is-out { transform: translateY(calc(-40 * var(--px))); opacity: 0; }
.cases.is-finding .spine:not(.is-match) { opacity: .28; filter: saturate(.3); }
.cases.is-finding .spine.is-match { transform: translateY(calc(-10 * var(--px))); }

/* ── a book, pulled out: it opens above the cases and pushes them down ── */
.pulled {
    position: relative; display: grid; gap: var(--sp-5) var(--sp-6); align-items: start;
    margin: 0 0 var(--sp-7); padding: var(--sp-5) 0; scroll-margin-top: var(--sp-9);
}
@container page (min-width: 40rem) { .pulled { grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); } }
.pulled-back { position: absolute; top: var(--sp-3); right: var(--sp-3); display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: var(--r-full); background: #fff; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); z-index: 1; }
.pulled-back:hover { background: var(--pink-wash); }
.pulled-back svg { width: 1.05rem; }
.pulled-cover {
    width: min(12rem, 60%); aspect-ratio: 2 / 3; padding: 6px; border-radius: 8px; background: #fff;
    rotate: -2deg; filter: var(--sk-shadow);
}
@container page (min-width: 40rem) { .pulled-cover { width: 100%; } }
.pulled-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-xs); }
.pulled-blank { display: grid; align-content: center; gap: var(--sp-2); height: 100%; padding: var(--sp-4); border-radius: var(--r-xs); background: var(--c); color: var(--k, #fff); text-align: center; }
.pulled-blank b { font-size: var(--t-lede); line-height: 1.15; }
.pulled-blank i { font-size: var(--t-xs); font-weight: 600; font-style: normal; }
.pulled-text { display: grid; gap: var(--sp-2); padding-right: var(--sp-7); }
.pulled-series { font-size: var(--t-sm); font-weight: 600; color: var(--ink-mute); }
.pulled-title { font-size: var(--t-h1); letter-spacing: -.035em; outline: none; }
.pulled-author { font-weight: 700; color: var(--ink-soft); }
.pulled-verdict { font-size: var(--t-lede); font-style: italic; color: var(--ink-soft); }
.pulled-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--rule); }
.pulled-facts dt { font-size: var(--t-xs); font-weight: 600; color: var(--ink-mute); }
.pulled-facts dd { font-weight: 700; font-size: var(--t-ui); }
.pulled-body { margin-top: var(--sp-3); font-size: var(--t-base); }
.pulled-none { margin-top: var(--sp-3); color: var(--ink-mute); font-size: var(--t-ui); }
.stars { display: inline-flex; gap: 2px; }
.star { width: 1.15rem; fill: rgba(35, 27, 43, .16); }
.star.on { fill: var(--pink-ink); }

/* ── 404 ── */
.lost { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: var(--sp-4); padding: var(--pad); text-align: center; }
.lost-art { position: relative; width: 8rem; aspect-ratio: 1; }
.lost h1 { font-size: var(--t-h1); letter-spacing: -.035em; }
.pill { display: inline-block; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-full); background: #fff; color: var(--ink); font-weight: 750; text-decoration: none; filter: var(--sk-shadow); }
.pill:hover { background: var(--pink-wash); }

/* ----------------------------------------------------------------------------
   6 · MOTION — a sticker grows in the grid, the others move out of the way
   Every tile has a view-transition name (boot.js), so the browser draws each
   one from its old place to its new one. The tile that's growing — or landing
   back home — rides on top, bare on the wall; its sticker fades out at its own
   size, and the page arrives once the panel has nearly grown.
   -------------------------------------------------------------------------- */
:root { view-transition-name: none; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: var(--spring); }
::view-transition-old(*), ::view-transition-new(*) { width: auto; height: auto; inset: 0; margin: auto; }
/* her name steps between two sizes of the same shape: that one truly scales */
::view-transition-old(t-name), ::view-transition-new(t-name) { width: 100%; height: 100%; }
html[data-up="about"]::view-transition-group(t-about), html[data-up="books"]::view-transition-group(t-books),
html[data-up="dogs"]::view-transition-group(t-dogs), html[data-up="facts"]::view-transition-group(t-facts),
html[data-up="ems"]::view-transition-group(t-ems),
html[data-up="axel"]::view-transition-group(t-axel),
html[data-up="glam"]::view-transition-group(t-glam),
html[data-up="tape"]::view-transition-group(t-tape) { z-index: 3; border-radius: var(--r-panel); overflow: clip; }
html[data-down="about"]::view-transition-group(t-about), html[data-down="books"]::view-transition-group(t-books),
html[data-down="dogs"]::view-transition-group(t-dogs), html[data-down="facts"]::view-transition-group(t-facts),
html[data-down="ems"]::view-transition-group(t-ems),
html[data-down="axel"]::view-transition-group(t-axel),
html[data-down="glam"]::view-transition-group(t-glam),
html[data-down="tape"]::view-transition-group(t-tape) { z-index: 2; border-radius: var(--r-panel); overflow: clip; }
html[data-up="about"]::view-transition-old(t-about), html[data-up="books"]::view-transition-old(t-books),
html[data-up="dogs"]::view-transition-old(t-dogs), html[data-up="facts"]::view-transition-old(t-facts),
html[data-up="ems"]::view-transition-old(t-ems),
html[data-up="axel"]::view-transition-old(t-axel),
html[data-up="glam"]::view-transition-old(t-glam),
html[data-up="tape"]::view-transition-old(t-tape) { animation: vt-out .16s linear both; }
html[data-up="about"]::view-transition-new(t-about), html[data-up="books"]::view-transition-new(t-books),
html[data-up="dogs"]::view-transition-new(t-dogs), html[data-up="facts"]::view-transition-new(t-facts),
html[data-up="ems"]::view-transition-new(t-ems),
html[data-up="axel"]::view-transition-new(t-axel),
html[data-up="glam"]::view-transition-new(t-glam),
html[data-up="tape"]::view-transition-new(t-tape) { animation: vt-in .24s linear .28s both; }
::view-transition-new(page-about), ::view-transition-new(page-books), ::view-transition-new(page-dogs),
::view-transition-new(page-facts), ::view-transition-new(page-ems), ::view-transition-new(page-axel),
::view-transition-new(page-glam), ::view-transition-new(page-tape) {
    inset: 0 auto auto 0; margin: 0; animation: page-in .36s var(--ease) .3s both;
}
::view-transition-old(page-about), ::view-transition-old(page-books), ::view-transition-old(page-dogs),
::view-transition-old(page-facts), ::view-transition-old(page-ems), ::view-transition-old(page-axel),
::view-transition-old(page-glam), ::view-transition-old(page-tape) {
    inset: 0 auto auto 0; margin: 0; animation: vt-out .12s linear both;
}
::view-transition-group(page-about), ::view-transition-group(page-books), ::view-transition-group(page-dogs),
::view-transition-group(page-facts), ::view-transition-group(page-ems),
::view-transition-group(page-glam), ::view-transition-group(page-tape) { animation: none; z-index: 4; }
::view-transition-group(book) { animation-duration: .6s; border-radius: 8px; z-index: 5; }
@keyframes vt-in { from { opacity: 0; } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; translate: 0 12px; } }

/* ----------------------------------------------------------------------------
   7 · REVIEW MODE — hidden entirely until ?review
   -------------------------------------------------------------------------- */
.check {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    max-width: 100%; margin: 0 .1em; padding: .15em .7em;
    border: 1px dashed var(--pink-ink); border-radius: var(--r-full);
    background: var(--pink-wash); color: var(--pink-ink);
    font-weight: 700; font-size: var(--t-sm); line-height: 1.45;
    text-align: left; cursor: pointer; white-space: normal; vertical-align: baseline;
    transition: background .15s, border-color .15s;
}
.check svg { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.check:hover { background: #ffd3e6; border-color: #8a0e4b; }
.check.is-answered { border-style: solid; border-color: #1f7a4d; background: #e6f4ec; color: #1f7a4d; }

.sv-reviewbar {
    position: fixed; left: 50%; bottom: var(--sp-4); z-index: 50; transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--sp-4);
    max-width: calc(100vw - var(--sp-6)); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
    background: var(--ink); color: #fff; border-radius: var(--r-full);
    box-shadow: 0 10px 30px -8px rgba(35, 27, 43, .55); font-size: var(--t-sm);
}
.sv-reviewbar p { margin: 0; }
.sv-reviewbar b { font-weight: 800; }
.sv-reviewbar a { flex: none; padding: var(--sp-1) var(--sp-4); background: #fff; color: var(--ink); border-radius: var(--r-full); font-weight: 700; text-decoration: none; }
.sv-reviewbar a:hover { background: var(--pink-wash); }

/* the answer sheet */
dialog.check-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); }
dialog.check-sheet:not([open]) { display: none; }
dialog.check-sheet::backdrop { background: rgba(35, 27, 43, .45); }
body:has(dialog.check-sheet[open]) { overflow: hidden; }
.check-panel {
    max-height: 100dvh; overflow: auto;
    padding: var(--sp-5) var(--pad) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background: #fff; border-radius: var(--r-panel) var(--r-panel) 0 0;
    box-shadow: 0 -20px 48px -20px rgba(35, 27, 43, .4);
}
.check-panel::before { content: ""; display: block; height: 4px; width: var(--sp-7); margin-bottom: var(--sp-5); border-radius: var(--r-full); background: var(--pink); }
.check-panel fieldset { display: grid; gap: var(--sp-4); margin: 0; padding: 0; border: 0; min-width: 0; }
.check-panel fieldset:disabled { opacity: .6; }
.check-panel .head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.check-panel h2 { font-size: var(--t-h3); }
.check-panel .close { flex: none; min-height: 2.25rem; padding: var(--sp-1) var(--sp-4); border: 1px solid var(--rule); border-radius: var(--r-full); background: #fff; font-weight: 700; font-size: var(--t-sm); cursor: pointer; }
.check-panel .close:hover { border-color: var(--ink); }
.check-panel .context { font-size: var(--t-ui); line-height: 1.55; color: var(--ink-soft); }
.check-panel .context::before { content: "\201C"; } .check-panel .context::after { content: "\201D"; }
.check-panel .state { font-weight: 700; color: #1f7a4d; }
.check-panel .yn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.check-panel .yn button { min-height: 3rem; border-radius: var(--r-full); font-weight: 700; font-size: var(--t-ui); cursor: pointer; }
.check-panel .yn .yes { border: 0; background: var(--pink-ink); color: #fff; }
.check-panel .yn .yes:hover { background: #8a0e4b; }
.check-panel .yn .no { border: 1px solid var(--ink); background: #fff; }
.check-panel .yn .no:hover { background: var(--panel-2); }
.check-panel label { display: block; font-weight: 700; font-size: var(--t-ui); }
.check-panel .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); margin-top: var(--sp-1); }
.check-panel input { width: 100%; min-height: 3rem; padding: var(--sp-2) var(--sp-3); border: 1px solid #d9cfd6; border-radius: var(--r-sm); font: inherit; font-size: var(--t-ui); }
.check-panel input:focus { border-color: var(--pink-ink); outline: none; box-shadow: 0 0 0 3px var(--pink-wash); }
.check-panel input::placeholder { color: var(--ink-mute); opacity: 1; }
.check-panel .send { min-height: 3rem; padding: 0 var(--sp-5); border: 0; border-radius: var(--r-full); background: var(--pink-ink); color: #fff; font-weight: 700; font-size: var(--t-ui); cursor: pointer; }
.check-panel .send:hover { background: #8a0e4b; }
.check-panel .who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2); align-items: center; font-size: var(--t-sm); color: var(--ink-soft); }
.check-panel .who input { min-height: 2.25rem; padding: var(--sp-1) var(--sp-3); font-size: var(--t-sm); }
.check-panel .error { color: #b3261e; font-weight: 700; }
@media (min-width: 768px) {
    dialog.check-sheet[open] { inset: 0; display: grid; place-items: center; padding: var(--sp-5); }
    .check-panel { width: min(33.75rem, 100%); max-height: min(90dvh, 45rem); border-radius: var(--r-panel); box-shadow: 0 0 0 .5px rgba(35, 27, 43, .14), 0 30px 60px -24px rgba(35, 27, 43, .5); }
}

/* ----------------------------------------------------------------------------
   8 · MOTION OPT-OUT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}