/* ==========================================================================
   Tech Checklist / themes / ava.css            owner: agent V (Ava theme)
   Ava Nguyen, "11pm voice note, warm lamp".
   Cream grain paper, warm charcoal ink, dusty rose #CF7A6E with brass and
   linen. Fraunces for display, Karla for reading, DM Mono for receipts, and
   Caveat for exactly one thing: the lowercase sign-off at the end of a post.
   Everything is scoped under [data-persona="ava"] (SPEC 5.6); only
   @font-face is global. Sections: fonts, tokens, lamp off, zone surfaces,
   desk hero, list head and chips, cards, article head and hero, prose,
   the honest tally, author card and pager, footer, lamp switch, motion.
   ========================================================================== */

/* -- 1. Fonts (self-hosted, latin + latin-ext; family names are prefixed so
   they never collide with another theme on the hub) ----------------------- */
@font-face {
  font-family: "Ava Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/ava/fraunces-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ava Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/fonts/ava/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ava Fraunces";
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/static/fonts/ava/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ava Karla";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/ava/karla-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ava Karla";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/ava/karla-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ava Karla";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/ava/karla-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ava Karla";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/ava/karla-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ava DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ava/dmmono-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ava DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ava/dmmono-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Caveat, cut down to lowercase letters and a little punctuation: it only
   ever sets the sign-off line. */
@font-face {
  font-family: "Ava Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/ava/caveat-500-signoff.woff2") format("woff2");
  unicode-range: U+20, U+27, U+2C-2E, U+61-7A;
}

/* -- 2. Tokens: lamp on (default) -------------------------------------------- */
[data-persona="ava"] {
  /* SPEC 5.6 contract */
  --bg: #F6EEE2;                 /* cream paper */
  --bg-2: #FFFCF6;               /* print paper: cards, switchboard tools */
  --fg: #2E2622;                 /* warm charcoal ink, 12.9:1 on --bg */
  --fg-muted: #6B5D53;           /* 5.5:1 on --bg, 6.2:1 on --bg-2 */
  --accent: #CF7A6E;             /* fixed: dusty rose terracotta */
  --accent-2: #B08D57;           /* brass */
  --rule: #E3D6C3;               /* linen hairline */
  --font-display: "Ava Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Ava Karla", "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Ava DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 18px;
  --measure: 62ch;
  color-scheme: light;

  /* Ava's own tokens */
  --paper: #FFFCF6;
  --linen: #EBE1D1;
  --linen-2: #E2D5C1;
  --rose-ink: #A44E42;           /* rose that can carry small text: 4.9:1 on --bg */
  --brass-ink: #7A5E30;          /* brass for small labels: 5.3:1 on --bg */
  --font-hand: "Ava Caveat", "Segoe Print", "Bradley Hand", cursive;
  --highlight: rgb(207 122 110 / .2);
  --glow-core: rgb(255 199 140 / .62);
  --glow-mid: rgb(244 170 128 / .2);
  --shadow-ink: 74 52 36;
  --print-shadow:
    0 1px 1px rgb(var(--shadow-ink) / .06),
    0 3px 6px -2px rgb(var(--shadow-ink) / .08),
    0 16px 30px -14px rgb(var(--shadow-ink) / .3);
  --print-shadow-lift:
    0 1px 1px rgb(var(--shadow-ink) / .05),
    0 8px 14px -6px rgb(var(--shadow-ink) / .12),
    0 30px 46px -18px rgb(var(--shadow-ink) / .38);
  --photo-line: rgb(46 38 34 / .08);
  --dots: rgb(107 93 83 / .75);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .12 0 0 0 1 -.38'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.4'/%3E%3C/svg%3E");

  /* base.css hooks */
  --texture: var(--grain) 0 0 / 220px 220px;
  --font-ui: var(--font-body);
  --focus: var(--rose-ink);
  --link: var(--fg);
  --strong: var(--fg);
  --chip-radius: 999px;
  --sb-bg: var(--bg);
  --sb-fg: var(--fg);
  --sb-muted: var(--fg-muted);
  --sb-rule: var(--rule);
  --sb-font: var(--font-body);
  --sb-brand-font: var(--font-display);
  --footer-bg: var(--linen);
  --mark-radius: 7px;
  --mark-stroke: 2.1px;
  --mark-dash: none;
  --mark-check: var(--accent);
  --prose-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --prose-leading: 1.72;
  --switch-bg: var(--bg);
  --accent-ink: var(--rose-ink);

  /* her own frame, so hero and list line up whatever the shell does */
  --ava-wrap: 75rem;
  --ava-gutter: var(--gutter, clamp(1rem, 4vw, 3rem));
}

/* -- 3. Lamp off: deep warm brown, amber-cream text. Follows the system
   setting on her own pages (never on the hub, where her panel stays the
   cream room next to Nicholas's dark one), and the lamp switch overrides
   it either way through data-lamp on <html>. ---------------------------- */
@media (prefers-color-scheme: dark) {
  [data-persona="ava"]:not([data-persona="hub"] *, [data-lamp="on"], [data-lamp="on"] *) {
    --bg: #231A15;
    --bg-2: #2E231C;
    --fg: #F2E4CE;
    --fg-muted: #C2AE95;
    --accent-2: #C9A46A;
    --rule: #47372B;
    --paper: #30251E;
    --linen: #3A2D24;
    --linen-2: #4A3A2E;
    --rose-ink: #E9A194;
    --brass-ink: #D6B47C;
    --highlight: rgb(207 122 110 / .3);
    --glow-core: rgb(255 168 92 / .3);
    --glow-mid: rgb(207 122 110 / .12);
    --shadow-ink: 0 0 0;
    --photo-line: rgb(255 240 220 / .08);
    --dots: rgb(194 174 149 / .7);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .78 0 0 0 1 -.42'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
[data-persona="ava"][data-lamp="off"],
[data-lamp="off"] [data-persona="ava"] {
  --bg: #231A15;
  --bg-2: #2E231C;
  --fg: #F2E4CE;
  --fg-muted: #C2AE95;
  --accent-2: #C9A46A;
  --rule: #47372B;
  --paper: #30251E;
  --linen: #3A2D24;
  --linen-2: #4A3A2E;
  --rose-ink: #E9A194;
  --brass-ink: #D6B47C;
  --highlight: rgb(207 122 110 / .3);
  --glow-core: rgb(255 168 92 / .3);
  --glow-mid: rgb(207 122 110 / .12);
  --shadow-ink: 0 0 0;
  --photo-line: rgb(255 240 220 / .08);
  --dots: rgb(194 174 149 / .7);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .78 0 0 0 1 -.42'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
  color-scheme: dark;
}

/* -- 4. Zone surfaces --------------------------------------------------------- */
/* The grain lives on .main (and the footer) so it shows even where base.css
   does not paint --texture; the opaque colour underneath keeps it single. */
[data-persona="ava"] .main {
  background: var(--grain) 0 0 / 220px 220px, var(--bg);
}
[data-persona="ava"] ::selection { background: var(--highlight); }

[data-persona="ava"] .switchboard {
  background-image: var(--grain);
  background-size: 220px 220px;
}
[data-persona="ava"] .switchboard__brand { font-weight: 560; font-size: 1.125rem; letter-spacing: -.015em; }
[data-persona="ava"] .switchboard__tld { font-style: italic; font-weight: 400; color: var(--rose-ink); }
[data-persona="ava"] .desk-link { font-size: .96875rem; }
[data-persona="ava"] .desk-link::after { height: 3px; bottom: -1.5px; border-radius: 3px; }
[data-persona="ava"] .desk-link.is-current { font-weight: 700; }
[data-persona="ava"] .switchboard__search {
  background: var(--paper);
  border-color: var(--rule);
  box-shadow: 0 1px 2px rgb(var(--shadow-ink) / .06);
}
[data-persona="ava"] .switchboard__search:hover { background: var(--paper); border-color: var(--accent); }

/* -- 5. Desk hero: full bleed, lamp glow in the top right corner ------------ */
[data-persona="ava"] .desk-hero {
  position: relative;
  isolation: isolate;
  width: auto;
  margin-inline: 0;
  padding-inline: max(var(--ava-gutter), calc((100% - var(--ava-wrap)) / 2));
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  overflow-x: clip;
  background:
    radial-gradient(ellipse 34rem 26rem at 100% 0%, var(--glow-core), var(--glow-mid) 45%, transparent 72%),
    radial-gradient(ellipse 70rem 40rem at 96% -8%, var(--glow-mid), transparent 70%);
}
[data-persona="ava"] .desk-hero__kicker {
  margin-bottom: 1.1rem;
  color: var(--rose-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  letter-spacing: 0;
  text-transform: lowercase;
}
[data-persona="ava"] .desk-hero__name {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(3.25rem, 1.9rem + 6vw, 7.25rem);
  line-height: .94;
  letter-spacing: -.035em;
  color: var(--fg);
}
[data-persona="ava"] .desk-hero__bio {
  max-width: 34ch;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -.005em;
}
[data-persona="ava"] .desk-hero__facts {
  gap: 1rem 2.5rem;
  margin-top: 2.1rem;
  padding-top: 1.35rem;
  border-top: 1px dashed var(--linen-2);
}
[data-persona="ava"] .desk-hero__facts > div { max-width: 21rem; }
[data-persona="ava"] .desk-hero__facts dt {
  color: var(--brass-ink);
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .14em;
}
[data-persona="ava"] .desk-hero__facts dd {
  margin-top: .3rem;
  font-weight: 500;
  font-size: .96875rem;
  line-height: 1.45;
}
[data-persona="ava"] .desk-hero__art { min-height: 0; align-self: stretch; }

/* Desk art (templates/personas/ava/index.html): three prints under the lamp. */
[data-persona="ava"] .ava-desk {
  position: relative;
  height: 100%;
  min-height: clamp(15rem, 10rem + 14vw, 24rem);
}
[data-persona="ava"] .ava-print {
  position: absolute;
  width: clamp(8.75rem, 5rem + 10vw, 13.5rem);
  margin: 0;
  padding: .55rem .55rem 2.1rem;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--print-shadow);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
[data-persona="ava"] .ava-print img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  outline: 1px solid var(--photo-line);
  outline-offset: -1px;
}
[data-persona="ava"] .ava-print figcaption {
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .62rem;
  overflow: hidden;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
[data-persona="ava"] .ava-print--1 { left: 2%; top: 16%; transform: rotate(-8deg); z-index: 1; }
[data-persona="ava"] .ava-print--2 { left: 31%; top: 2%; transform: rotate(3.5deg); z-index: 3; }
[data-persona="ava"] .ava-print--3 { left: 58%; top: 22%; transform: rotate(-2.5deg); z-index: 2; }
[data-persona="ava"] .desk-hero:hover .ava-print--1 { transform: rotate(-10deg) translate(-6px, 2px); }
[data-persona="ava"] .desk-hero:hover .ava-print--3 { transform: rotate(-.5deg) translate(6px, -2px); }

@media (max-width: 47.99rem) {
  [data-persona="ava"] .desk-hero { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; }
  [data-persona="ava"] .desk-hero__art { order: -1; }
  [data-persona="ava"] .ava-desk { min-height: 12.5rem; max-width: 26rem; }
  [data-persona="ava"] .ava-print { width: 39%; padding-bottom: 1.6rem; }
  [data-persona="ava"] .ava-print figcaption { font-size: .625rem; bottom: .45rem; }
  [data-persona="ava"] .desk-hero__facts { gap: .9rem 1.75rem; }
}

/* -- 6. The checklist head and sticker chips ----------------------------------- */
[data-persona="ava"] .review-list {
  width: min(100% - 2 * var(--ava-gutter), var(--ava-wrap));
  padding-top: clamp(1rem, .5rem + 2vw, 2.5rem);
}
[data-persona="ava"] .review-list__head {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding-block: 0;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  border-top: 0;
  border-bottom: 0;
}
[data-persona="ava"] .review-list__title {
  position: relative;
  padding-left: 1.2em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  letter-spacing: -.02em;
  text-transform: lowercase;
}
/* her soft, hand-ticked box (the same drawing as the "ava" mark): the box
   takes the ink colour through a mask, the tick sits on top in rose */
[data-persona="ava"] .review-list__title::before,
[data-persona="ava"] .review-list__title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .92em;
  height: .92em;
  margin-top: -.4em;
}
[data-persona="ava"] .review-list__title::before {
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11.2 7.4c3.6-.5 8.1-.6 11.2-.1 2.1.4 2.9 1.6 3 3.8.2 3.7.1 8.2-.4 11.4-.3 2.1-1.5 3.1-3.6 3.3-3.6.4-8 .4-11.2 0-2.2-.3-3.2-1.4-3.4-3.6-.3-3.5-.2-7.7.3-11 .3-2.3 1.7-3.5 4.1-3.8z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M11.2 7.4c3.6-.5 8.1-.6 11.2-.1 2.1.4 2.9 1.6 3 3.8.2 3.7.1 8.2-.4 11.4-.3 2.1-1.5 3.1-3.6 3.3-3.6.4-8 .4-11.2 0-2.2-.3-3.2-1.4-3.4-3.6-.3-3.5-.2-7.7.3-11 .3-2.3 1.7-3.5 4.1-3.8z' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
[data-persona="ava"] .review-list__title::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M9.2 16.6c1.7 1 3.3 2.7 4.5 5 2.6-6.4 7.3-12.6 14.3-17.2' fill='none' stroke='%23CF7A6E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
/* inline stickers in a balanced block, so a long last category never sits
   alone on its own row */
[data-persona="ava"] .review-list__filters {
  display: block;
  max-width: 100%;
  text-wrap: balance;
  margin-bottom: -.7rem;
}
[data-persona="ava"] .review-list__filters .chip {
  display: inline-flex;
  margin: 0 .3rem .7rem 0;
  vertical-align: middle;
}
[data-persona="ava"] .review-list__status { color: var(--fg-muted); }

/* chips: little vinyl stickers with a die-cut paper edge */
[data-persona="ava"] .chip {
  min-height: 2.375rem;
  padding: .5em 1em;
  border: 0;
  background: var(--linen);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  box-shadow:
    0 0 0 3px var(--paper),
    0 2px 3px 2px rgb(var(--shadow-ink) / .1),
    0 6px 10px -4px rgb(var(--shadow-ink) / .16);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .2s ease;
}
[data-persona="ava"] .chip:nth-child(3n + 1) { transform: rotate(-1.2deg); }
[data-persona="ava"] .chip:nth-child(3n + 2) { transform: rotate(.9deg); }
[data-persona="ava"] .chip:nth-child(3n) { transform: rotate(-.5deg); }
[data-persona="ava"] .chip:hover {
  background: var(--linen-2);
  transform: translateY(-2px) rotate(0deg);
  box-shadow:
    0 0 0 3px var(--paper),
    0 4px 6px 2px rgb(var(--shadow-ink) / .1),
    0 12px 16px -6px rgb(var(--shadow-ink) / .2);
}
[data-persona="ava"] .chip.is-active,
[data-persona="ava"] .chip[aria-pressed="true"] {
  background: var(--accent);
  color: #2E2622;                /* ink on rose: 4.7:1 */
  transform: rotate(-2deg) scale(1.03);
}
[data-persona="ava"] .chip__count {
  opacity: 1;
  color: inherit;
  font-family: var(--font-mono);
  font-size: .78em;
  font-weight: 400;
}
[data-persona="ava"] .chip:not(.is-active):not([aria-pressed="true"]) .chip__count { color: var(--fg-muted); }
[data-persona="ava"] .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }

/* -- 7. Cards: soft-cornered prints. Styled on the card itself so they hold
   up on the hub stream as well as on her index. ----------------------------- */
[data-persona="ava"] .review-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
  gap: clamp(2rem, 1.4rem + 1.8vw, 3.25rem) clamp(1.25rem, .8rem + 1.6vw, 2.5rem);
}
.card[data-persona="ava"] {
  border: 0;
  border-radius: var(--radius);
  overflow: visible;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-body);
  box-shadow: var(--print-shadow);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card[data-persona="ava"]:hover {
  transform: translateY(-5px) rotate(-1.1deg);
  box-shadow: var(--print-shadow-lift);
}
.card[data-persona="ava"]:nth-child(even):hover { transform: translateY(-5px) rotate(.9deg); }
.card[data-persona="ava"]:has(.card__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  box-shadow: var(--print-shadow-lift);
}
.card[data-persona="ava"] .card__link { border-radius: inherit; }
.card[data-persona="ava"] .card__media {
  margin: .7rem .7rem 0;
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  overflow: hidden;
  background: var(--linen);
}
.card[data-persona="ava"] .card__media img {
  border-radius: inherit;
  outline: 1px solid var(--photo-line);
  outline-offset: -1px;
}
.card[data-persona="ava"]:hover .card__media img { transform: none; }
.card[data-persona="ava"] .card__body {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .65rem;
  padding: 1rem 1.2rem 1.15rem;
}
.card[data-persona="ava"] .card__num {
  align-self: center;
  color: var(--rose-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 450;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.card[data-persona="ava"] .card__product {
  align-self: center;
  padding-left: 1.55rem;
  background: linear-gradient(var(--linen-2), var(--linen-2)) left center / 1.05rem 1px no-repeat;
  color: var(--brass-ink);
  font-family: var(--font-ui);
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.5;
  text-transform: uppercase;
}
.card[data-persona="ava"] .card__title {
  margin-top: .7rem;
  font-family: var(--font-display);
  font-weight: 420;
  font-size: 1.40625rem;
  line-height: 1.17;
  letter-spacing: -.012em;
  color: var(--fg);
}
.card[data-persona="ava"] .card__link:hover .card__title {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
.card[data-persona="ava"] .card__excerpt {
  margin-top: .6rem;
  color: var(--fg-muted);
  font-size: .9375rem;
  line-height: 1.58;
}
.card[data-persona="ava"] .card__meta {
  gap: .3em .85em;
  margin-top: 1.05rem;
  padding-top: .8rem;
  border-top: 1px dashed var(--linen-2);
  color: var(--fg-muted);
  font-family: var(--font-ui);
  font-size: .78125rem;
  font-weight: 500;
}
.card[data-persona="ava"] .card__meta time { display: none; }   /* every review shares one date */
.card[data-persona="ava"] .card__read::before {
  content: "";
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: .08em;
}
.card[data-persona="ava"] .card__cat::before { content: none; display: none; }
.card[data-persona="ava"] .card__cat {
  padding: .25em .75em;
  border-radius: 999px;
  background: var(--linen);
  color: var(--fg);
  font-size: .95em;
  font-weight: 600;
}

/* -- 8. Article head and hero print --------------------------------------------- */
[data-persona="ava"] .review { position: relative; isolation: isolate; }
[data-persona="ava"] .review::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: min(100%, 52rem);
  height: 40rem;
  background:
    radial-gradient(ellipse 30rem 24rem at 100% 0%, var(--glow-core), var(--glow-mid) 45%, transparent 72%);
  pointer-events: none;
}
[data-persona="ava"] .review__head {
  width: min(100% - 2 * var(--ava-gutter), 52rem);
  margin-block: clamp(.5rem, 2vw, 1.75rem) clamp(2rem, 1.5rem + 2vw, 3.25rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "num" "kicker" "title" "meta";
  row-gap: 0;
  justify-items: center;
  text-align: center;
}
[data-persona="ava"] .review__num { grid-area: num; }
[data-persona="ava"] .review__kicker { grid-area: kicker; }
[data-persona="ava"] .review__title { grid-area: title; }
[data-persona="ava"] .review__meta { grid-area: meta; }
[data-persona="ava"] .review__num {
  display: inline-block;
  margin-bottom: 1.15rem;
  padding: .3em .85em .32em;
  border-radius: 999px;
  background: var(--accent);
  color: #2E2622;                /* ink on rose: 4.7:1 */
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 450;
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: .01em;
  white-space: nowrap;
  text-align: center;
  box-shadow:
    0 0 0 3px var(--paper),
    0 3px 4px 2px rgb(var(--shadow-ink) / .1),
    0 10px 14px -6px rgb(var(--shadow-ink) / .2);
  transform: rotate(-3deg);
}
[data-persona="ava"] .review__of {
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  opacity: .78;
}
[data-persona="ava"] .review__kicker {
  justify-content: center;
  gap: 0 .7em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 500;
}
[data-persona="ava"] .review__author { color: var(--rose-ink); font-weight: 700; }
[data-persona="ava"] .review__sep {
  display: inline-block;
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--accent-2);
  vertical-align: .12em;
  opacity: 1;
}
[data-persona="ava"] .review__sep::before { content: none; }
[data-persona="ava"] .review__title {
  max-width: 19ch;
  margin-top: .85rem;
  font-family: var(--font-display);
  font-weight: 370;
  font-size: clamp(2.375rem, 1.35rem + 4.1vw, 4.625rem);
  line-height: 1.02;
  letter-spacing: -.028em;
}
[data-persona="ava"] .review__meta {
  justify-content: center;
  margin-top: 1.5rem;
  color: var(--fg-muted);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 500;
}
[data-persona="ava"] .review__meta > * + *::before {
  width: 4px;
  height: 4px;
  margin: 0 .8em;
  background: var(--accent);
  opacity: 1;
}
[data-persona="ava"] .review__source { text-decoration: underline dotted var(--accent-2); text-underline-offset: .25em; }

/* the hero is an instant print, slightly askew on the desk; it hugs tall
   photos instead of cropping them */
[data-persona="ava"] .review__hero {
  width: fit-content;
  max-width: min(100% - 2 * var(--ava-gutter), 58rem);
  margin: 0 auto clamp(2.75rem, 2rem + 3vw, 4.5rem);
  padding: clamp(.55rem, .4rem + .5vw, .85rem) clamp(.55rem, .4rem + .5vw, .85rem) clamp(1.9rem, 1.5rem + 1.4vw, 2.9rem);
  border-radius: clamp(14px, 10px + .8vw, 22px);
  background: var(--paper);
  box-shadow: var(--print-shadow-lift);
  transform: rotate(-.6deg);
}
[data-persona="ava"] .review__hero img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(74vh, 44rem);
  margin-inline: auto;
  border-radius: clamp(8px, 6px + .4vw, 12px);
  outline: 1px solid var(--photo-line);
  outline-offset: -1px;
  background: var(--linen);
}

/* -- 9. Prose -------------------------------------------------------------------- */
[data-persona="ava"] .prose { color: var(--fg); }
[data-persona="ava"] .prose > p + p { margin-top: 1.3em; }
/* the cold open, set like the first lines of a letter */
[data-persona="ava"] .prose > p:first-child {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 1.3em;
  line-height: 1.5;
  letter-spacing: -.006em;
}
[data-persona="ava"] .prose h2 {
  margin-top: 2.7em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 420;
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--fg);
}
[data-persona="ava"] .prose h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: .6rem;
  margin-bottom: .7rem;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M2 7c4.5-5 8.5-5 13 0s8.5 5 13 0 8.5-5 13 0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12'%3E%3Cpath d='M2 7c4.5-5 8.5-5 13 0s8.5 5 13 0 8.5-5 13 0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-persona="ava"] .prose h2 + * { margin-top: .85em; }
[data-persona="ava"] .prose strong {
  font-weight: 700;
  background-image: linear-gradient(transparent 60%, var(--highlight) 60%, var(--highlight) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-persona="ava"] .prose em { font-style: italic; }
[data-persona="ava"] .prose a { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
[data-persona="ava"] .prose a:hover { background: var(--highlight); }
[data-persona="ava"] .prose ul,
[data-persona="ava"] .prose ol { padding-left: 1.3em; }
[data-persona="ava"] .prose li::marker { color: var(--accent); }
[data-persona="ava"] .prose hr {
  width: 3.5rem;
  height: 6px;
  background: radial-gradient(circle, var(--accent-2) 2.2px, transparent 2.6px) center / 1.2rem 6px repeat-x;
}
[data-persona="ava"] .prose__figure img,
[data-persona="ava"] .prose figure img { border-radius: 12px; box-shadow: var(--print-shadow); }

/* the soft landing: her closing line, then the sign-off */
[data-persona="ava"] .prose > p:nth-last-child(2) {
  margin-top: 2.2em;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: 1.3em;
  line-height: 1.42;
  letter-spacing: -.008em;
}
/* the one place the handwriting face appears: the lowercase sign-off.
   Files 01-20 end with a paragraph ("ava"), 21-48 with a one-item list
   ("- ava" plus an emoji), so both shapes are covered. */
[data-persona="ava"] .prose > p:last-child,
[data-persona="ava"] .prose > ul:last-child:has(> li:only-child) {
  margin-top: .5em;
  padding: 0;
  list-style: none;
  color: var(--rose-ink);
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: 2.6em;
  line-height: 1.05;
  letter-spacing: .01em;
  transform: rotate(-4deg);
  transform-origin: 0 50%;
}
[data-persona="ava"] .prose > ul:last-child:has(> li:only-child) > li { margin: 0; }
[data-persona="ava"] .prose > ul:last-child:has(> li:only-child) > li::marker { content: none; }

/* -- 10. The honest tally: a receipt ------------------------------------------------
   Generic table styles first (every table in her posts is a tally), then the
   extras from her article override: .tally-paper, caption, dotted leaders. */
[data-persona="ava"] .prose > .table-wrap {
  width: min(100%, 27rem);
  margin: 2.4em auto 2.6em;
  padding: .5rem .9rem 1.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  border-radius: 0;
  filter:
    drop-shadow(0 1px 1px rgb(var(--shadow-ink) / .08))
    drop-shadow(0 10px 12px rgb(var(--shadow-ink) / .14));
}
[data-persona="ava"] .prose .table-wrap > table,
[data-persona="ava"] .tally-paper {
  --zz: 7px;
  background: var(--paper);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--zz)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--zz)) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / calc(2 * var(--zz)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / calc(2 * var(--zz)) 51% repeat-x;
}
[data-persona="ava"] .prose .table-wrap > table {
  border-collapse: separate;
  border-spacing: 0;
  padding: 1.6rem 1.3rem 1.8rem;
}
[data-persona="ava"] .tally-paper {
  padding: 1.5rem 1.35rem 1.4rem;
  transform: rotate(.6deg);
}
[data-persona="ava"] .tally-paper::after {
  /* a little barcode, because it is a receipt */
  content: "";
  display: block;
  width: 62%;
  height: 2.1rem;
  margin: 1.3rem auto .5rem;
  background:
    repeating-linear-gradient(90deg,
      var(--fg) 0 2px, transparent 2px 4px, var(--fg) 4px 5px, transparent 5px 8px,
      var(--fg) 8px 11px, transparent 11px 12px, var(--fg) 12px 13px, transparent 13px 16px,
      var(--fg) 16px 17px, transparent 17px 19px, var(--fg) 19px 22px, transparent 22px 24px);
  opacity: .82;
}
[data-persona="ava"] .prose table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-family: var(--font-mono);
  font-size: .76em;
  line-height: 1.55;
  color: var(--fg);
}
[data-persona="ava"] .tally-paper table { background: none; padding: 0; -webkit-mask: none; mask: none; }
[data-persona="ava"] .prose th,
[data-persona="ava"] .prose td {
  padding: .5em 0 .5em .9em;
  border-bottom: 0;
  vertical-align: bottom;
}
[data-persona="ava"] .prose th:first-child,
[data-persona="ava"] .prose td:first-child { width: 64%; padding-left: 0; text-align: left; }
[data-persona="ava"] .prose th:last-child,
[data-persona="ava"] .prose td:last-child { text-align: right; }
[data-persona="ava"] .prose thead th {
  padding-bottom: .7em;
  border-bottom: 1.5px dashed var(--rule-strong);
  color: var(--fg-muted);
  font-size: .86em;
  font-weight: 400;
  letter-spacing: .12em;
  white-space: normal;
}
[data-persona="ava"] .prose tbody tr:first-child td { padding-top: .9em; }
[data-persona="ava"] .prose tbody tr:last-child td {
  padding-bottom: .9em;
  border-bottom: 1.5px dashed var(--rule-strong);
}
[data-persona="ava"] .prose td strong { background: none; color: var(--rose-ink); font-weight: 400; }
[data-persona="ava"] .tally__caption {
  caption-side: top;
  padding-bottom: 1rem;
  margin-bottom: .35rem;
  border-bottom: 1.5px dashed var(--rule-strong);
  color: var(--fg);
  font-family: var(--font-mono);
  text-align: center;
  text-transform: uppercase;
}
[data-persona="ava"] .tally__store {
  display: block;
  font-size: 1.05em;
  letter-spacing: .32em;
}
[data-persona="ava"] .tally__no {
  display: block;
  margin-top: .35em;
  color: var(--fg-muted);
  font-size: .78em;
  letter-spacing: .18em;
}
/* dotted leaders from the item to the price; the spans mask the dots behind
   the words, so the dots only show in the gap */
[data-persona="ava"] .tally td {
  background: radial-gradient(circle at 1px 1px, var(--dots) .9px, transparent 1.3px) 0 calc(100% - .5em - .34em) / 6px 2px repeat-x;
}
[data-persona="ava"] .tally__cell {
  background: var(--paper);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
[data-persona="ava"] .tally td:first-child .tally__cell { padding-right: .45em; }
[data-persona="ava"] .tally td:last-child .tally__cell { padding-left: .45em; }
[data-persona="ava"] .tally tbody tr:last-child td { background-position: 0 calc(100% - .9em - .34em); }

/* -- 11. Author card and pager -------------------------------------------------------- */
[data-persona="ava"] .review__foot {
  width: min(100% - 2 * var(--ava-gutter), 46rem);
  margin-top: clamp(4rem, 3rem + 4vw, 6.5rem);
  gap: 2.25rem;
}
.author-card[data-persona="ava"] {
  position: relative;
  gap: .3rem;
  padding: 2rem clamp(1.35rem, 1rem + 1.5vw, 2.25rem) 1.9rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--print-shadow);
}
/* a brass pin holding the note to the desk */
.author-card[data-persona="ava"]::before {
  content: "";
  position: absolute;
  top: -.55rem;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: -.55rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3DDB0, var(--accent-2) 55%, #7A5E30);
  box-shadow: 0 3px 4px rgb(var(--shadow-ink) / .3);
}
.author-card[data-persona="ava"] .author-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: -.02em;
}
.author-card[data-persona="ava"] .author-card__name a:hover { text-decoration-color: var(--accent); }
.author-card[data-persona="ava"] .author-card__role {
  color: var(--rose-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.0625rem;
  text-transform: lowercase;
}
.author-card[data-persona="ava"] .author-card__bio {
  margin-top: .85rem;
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.68;
}

[data-persona="ava"] .pager { gap: 1.25rem; }
[data-persona="ava"] .pager__link {
  gap: .35rem .55rem;
  padding: 1.1rem 1.3rem 1.25rem;
  border: 0;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--print-shadow);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
[data-persona="ava"] .pager__link:hover {
  background: var(--paper);
  transform: translateY(-3px) rotate(-.8deg);
  box-shadow: var(--print-shadow-lift);
}
[data-persona="ava"] .pager__link--next:hover { transform: translateY(-3px) rotate(.8deg); }
[data-persona="ava"] .pager__label {
  align-self: center;
  color: var(--brass-ink);
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .14em;
}
[data-persona="ava"] .pager__num {
  align-self: center;
  color: var(--rose-ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1;
}
[data-persona="ava"] .pager__title {
  margin-top: .2rem;
  font-weight: 420;
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* -- 12. Footer: a linen cloth at the bottom of the desk ---------------------------------- */
[data-persona="ava"] .footer {
  background-image: var(--grain);
  background-size: 220px 220px;
  border-top-color: var(--linen-2);
}
[data-persona="ava"] .footer__brand { font-weight: 560; }
[data-persona="ava"] .footer__heading { color: var(--brass-ink); letter-spacing: .14em; }
[data-persona="ava"] .footer__fine { border-top: 1px dashed var(--linen-2); }

/* -- 13. Lamp switch (added by ava.js; absent without JavaScript) --------------------------- */
[data-persona="ava"] .lamp-switch {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 2.25rem;
  padding: 0 .85em 0 .7em;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(var(--shadow-ink) / .06);
  transition: border-color .15s ease;
}
[data-persona="ava"] .lamp-switch:hover { border-color: var(--accent); }
[data-persona="ava"] .lamp-switch svg { width: 1.05rem; height: 1.05rem; overflow: visible; }
[data-persona="ava"] .lamp-switch .lamp-switch__shade { fill: var(--accent-2); }
[data-persona="ava"] .lamp-switch .lamp-switch__stand { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
[data-persona="ava"] .lamp-switch .lamp-switch__light { fill: var(--glow-core); transition: opacity .3s ease; }
[data-persona="ava"] .lamp-switch[aria-pressed="false"] .lamp-switch__light { opacity: 0; }
@media (max-width: 22.4rem) {
  [data-persona="ava"] .lamp-switch__label { display: none; }
}

/* -- 14. Motion ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .card[data-persona="ava"]:hover,
  .card[data-persona="ava"]:nth-child(even):hover,
  [data-persona="ava"] .pager__link:hover,
  [data-persona="ava"] .pager__link--next:hover,
  [data-persona="ava"] .chip:hover { transform: none; }
  [data-persona="ava"] .desk-hero:hover .ava-print--1 { transform: rotate(-8deg); }
  [data-persona="ava"] .desk-hero:hover .ava-print--3 { transform: rotate(-2.5deg); }
}