/* GENERATED by scripts/sync-pack-cards.cjs from Pixel-Ponies. Do not edit. */
/* ═══════════════════════════════════════════════════════════════════════════
   SWEATER WEATHER (slug: sweater-weather). Released September 27th, 2026.

   Inside a warm, lamp-lit bedroom on a dark, cold, rainy fall day. The page
   column (#main-content) is the ROOM: walnut walls warmed by a lamp pooling
   from the lower left. Set into its wall is a WINDOW: a walnut frame with
   mullions and rust linen curtains tied back, and through fogged glass a grey,
   wind-bent, rain-soaked day. The cursor wipes the fog clear the way a finger
   does on a steamy pane (it slowly fogs back), drops run down it, and now and
   then there is lightning far off. The room's frame (the nav, the bottom bar,
   the footer) is cable-knit in lamplight, camel falling off to cocoa; cards
   and heroes are oatmeal. Along the floor, on a walnut window seat: a folded
   blanket stack with a curled ginger cat (she purrs on hover, at every width),
   books with a steaming mug, and a candle.

   This pack's whole stylesheet. Imported from app/globals.css straight after
   the design tokens, so it loads BEFORE globals.css's own rules: a selector
   here that ties one there on specificity loses. Rules that must beat a shared
   rule double the attribute (`[data-theme-pack="sweater-weather"][data-theme-pack]`)
   or say `html[...]`. Pack classes are prefixed `pp-sw-`.

   Type: Parisienne (script) for the expressive display titles, Short Stack
   (rounded marker hand) for every heading, label, CTA and body line.
   Scene: components/shell/sweater-weather-scene.tsx (+ -window.ts, -sill.tsx).
   Sounds: lib/sound/recipes/sweater-weather.ts.
   Assets: public/theme-packs/sweater-weather/ (Envato art, footage and
   sounds; provenance in ASSETS.md). Art slots: components/shell/sweater-weather-art.ts.

   Contrast (AA ✓, measured): see the SWEATER WEATHER block in
   styles/tokens/base/color.css. Page copy that crosses the window pane reads
   cream on the tone-capped glass (measured under every glass-borne line), and
   carries a soft dark halo.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. ROOT TOKENS ──────────────────────────────────────────────────────── */
/* Doubled attribute (0,2,0): globals.css declares the PPG defaults on `:root`
   (0,1,0) AFTER this file, and on <html> an equal selector here would lose. */
[data-theme-pack="sweater-weather"][data-theme-pack] {
  color-scheme: dark;
  --activity-fade-color: #2E2019;
  /* ── TEXTURE SLOTS (licensed assets; `none` means no texture) ──
     To fill one: set it to `url("/theme-packs/sweater-weather/art/<file>")`.
     Each must be a SEAMLESS tile; it repeats at its own size.
       --pp-sw-tex-knit      soft oatmeal cable-knit, light, low contrast
                             (the accent: heroes, horse cards, banner)
       --pp-sw-tex-flannel   brushed cocoa flannel, a faint plaid (dark cards)
       --pp-sw-tex-wall      optional wallpaper / plaster for the room's walls */
  --pp-sw-tex-knit: url("/theme-packs/sweater-weather/art/knit-accent.webp");
  --pp-sw-tex-flannel: none;
  --pp-sw-tex-wall: none;
  /* The room's chrome at dusk: a stone cottage wall. The stone is a
     light-only texture (see ASSETS.md) laid over a lamp-lit vignette, so the
     lamp decides the colour and the stone only shades it. Lightest point
     #7E5232. */
  --pp-sw-room-knit:
    url("/theme-packs/sweater-weather/art/stone-shade.webp"),
    radial-gradient(120% 110% at 0% 100%, #7E5232 0%, #6A4530 22%, #563823 45%, #3E2819 70%, #2A1A12 100%);
  --pp-gradient-accent-surface: var(--pp-sw-tex-knit), var(--pp-gradient-sweater-weather-accent-surface);
  --pp-gradient-default-surface: var(--pp-gradient-sweater-weather-default-surface);
  --pp-color-default-surface-fallback: #33241D;
  --pp-color-accent-surface-fallback: #E4D9C4;
  /* The knit tile repeats at its drawn size; `cover` would stretch one tile. */
  --pp-accent-bg-position: initial;
  --pp-accent-bg-size: auto;
  --pp-gradient-cards-on-accent: var(--pp-sw-tex-knit), var(--pp-gradient-sweater-weather-cards-on-accent);
  --pp-gradient-cards-on-default: var(--pp-sw-tex-flannel), var(--pp-gradient-sweater-weather-cards-on-default);
  --pp-gradient-cards-on-high-priority: var(--pp-gradient-sweater-weather-cards-on-high-priority);
  --pp-gradient-cards-on-medium-priority: var(--pp-gradient-sweater-weather-cards-on-medium-priority);
  --pp-gradient-high-priority-surface: var(--pp-gradient-sweater-weather-high-priority-surface);
  --pp-gradient-medium-priority-surface: var(--pp-gradient-sweater-weather-medium-priority-surface);
  --pp-color-text-on-accent: var(--pp-color-sweater-weather-text-on-accent);
  --pp-color-text-on-default: var(--pp-color-sweater-weather-text-on-default);
  --pp-color-text-on-high-priority: var(--pp-color-sweater-weather-text-on-high-priority);
  --pp-color-text-on-medium-priority: var(--pp-color-sweater-weather-text-on-medium-priority);
  --pp-color-cards-on-default: var(--pp-color-sweater-weather-cards-on-default);
  --shell-icon-fill: var(--pp-color-sweater-weather-text-on-accent);
  /* Chart ink: lamp amber reads warmer than the oatmeal on the charcoal cards. */
  --pp-chart-ink: #E9B676;

  /* Type: Short Stack, a rounded marker hand, for headings, labels, CTAs and
     body; Parisienne, a script, for the big expressive display titles. */
  --font-expressive-large: var(--font-parisienne);
  --pp-typography-expressive-large: 400 84px/1.3 var(--font-parisienne);
  --pp-typography-expressive-regular: 400 56px/1.3 var(--font-parisienne);
  --pp-typography-heading-h1: 400 36px/1.2 var(--font-short-stack);
  --pp-typography-heading-h2: 400 28px/1.25 var(--font-short-stack);
  --pp-typography-heading-h3: 400 20px/1.3 var(--font-short-stack);
  --pp-typography-heading-h4: 400 18px/1.3 var(--font-short-stack);
  --pp-typography-heading-utility-headline: 400 15px/1.4 var(--font-short-stack);
  --pp-typography-heading-label: 400 13px/1.4 var(--font-short-stack);
  --pp-typography-cta: 400 15px/100% var(--font-short-stack);
  --pp-typography-cta-tracking: 1px;
  --pp-typography-cta-transform: uppercase;
  --pp-typography-body-large: 400 15px/1.55 var(--font-short-stack);
  --pp-typography-body-regular: 400 14px/1.55 var(--font-short-stack);
  --pp-typography-body-small: 400 12px/1.55 var(--font-short-stack);
  --pp-card-name-font: 400 20px/1.25 var(--font-short-stack);
  --pp-card-name-tracking: -0.2px;
  --pp-card-name-transform: lowercase;
  --pp-card-subtitle-font: var(--pp-typography-heading-utility-headline);
  --pp-card-subtitle-tracking: 1px;
  --shell-tracking-label: 1px;
  --shell-tracking-headline: 1px;
  --pp-card-fade-color: rgba(238, 230, 214, 0.94);
  --scrollbar-track: #2E2019;
  --scrollbar-thumb: #7A5640;
  --scrollbar-thumb-hover: #C98B4E;
  --default-surface-fill-hover: #4A3326;
  --accent-surface-fill-hover: #E0D3BB;
  --pp-cta-border-on-default: #C98B4E;
  --pp-cta-border-on-accent: #8E5A34;
  --pp-tab-border-accent: #8E5A34;
  --pp-tab-border-default: #C98B4E;
  --activity-tracker-src: none;
  --pp-card-icon-row-height: auto;
  --elevation-color: rgba(16, 9, 6, 0.36);

  /* ── Every pack-varying property, declared (D-726) ── */
  /* Horse cards: no colour tint. The oatmeal knit is the card; coats stay true. */
  --pp-hc-dim: 1;
  --pp-hc-glow: transparent;
  --pp-hc-glow-bg: transparent;
  --pp-hc-rim: transparent;
  --pp-hc-tint: transparent;
  --pp-hc-tint-a: 0;
  /* The theme-pack card's motif: a single bead of rain. */
  --pp-deco-motif: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.9) 0 12%, rgba(214, 226, 240, 0.35) 22%, rgba(40, 52, 66, 0.28) 70%, transparent 74%);
  --pp-deco-motif-size: 16px;
  --pp-deco-motif-glow: none;
  /* None: the knit is already IN the accent token, and the default panel gets
     its rain from a scoped rule (section 7), not from a layer on both panels. */
  --pp-deco-surface-motif: none;
  --pp-deco-surface-motif-opacity: 0;
  --pp-deco-avatar-shadow: 0 0 0 1px rgba(43, 39, 36, 0.28), 0 3px 9px rgba(20, 24, 30, 0.36);
  --pp-hero-deco-headroom: 0px;
  /* Stated, not inherited: a Sweater Weather card on another pack's page must
     not pick up that page's card-type knobs (D-726). `initial` sends each
     var() to the shared default. */
  --pp-card-name-optical-shift: initial;
  --pp-card-subtitle-pull: initial;
  --pp-card-name-scale: initial;
  --pp-card-info-pad-block: initial;
  --pp-card-info-gap: initial;
  --pp-card-text-halo: initial;

  /* PRIMARY CTAs are the rust of the blanket, curtains and books: a brick
     gradient with a faint lamp highlight on top. Cream ink #FBEBDD on the
     lightest point (#AA4D2B, the top stop under its highlight) = 4.74:1, on
     #9E3A1C = 5.86:1, on #7A2716 = 8.47:1 (AA). Tertiary CTAs and the
     priority surfaces are untouched. */
  --pp-sw-rust:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 214, 150, 0.12) 0%, rgba(255, 214, 150, 0) 55%),
    linear-gradient(170deg, #9E3A1C 0%, #8E2F1C 55%, #7A2716 100%);
  --pp-cta-primary-bg-on-default: var(--pp-sw-rust);
  --pp-cta-primary-bg-on-accent: var(--pp-sw-rust);
  --pp-cta-primary-text-on-default: #FBEBDD;
  --pp-cta-primary-text-on-accent: #FBEBDD;

  /* Pack-private tokens. */
  --pp-sw-amber: #F0B26A;           /* lamp light */
  --pp-sw-frost: rgba(255, 250, 240, 0.42);
  --pp-sw-frost-edge: rgba(255, 255, 255, 0.62);
  --pp-sw-sill-h: 18px;
  /* The footer's clearance for the floor (site-footer.tsx reads it): the
     floor's own height, which the media rules below step down. */
  --pp-sw-floor-pad: calc(var(--pp-sw-floor-h, clamp(120px, 20vh, 196px)) + 24px);
}
/* Tokens a shared generic reset (`[data-theme-pack]:not([...X])`, 0,2,0, later
   in globals.css) would otherwise win on. Tripled attribute = 0,3,0. */
[data-theme-pack="sweater-weather"][data-theme-pack][data-theme-pack] {
  /* A modal column is the room's wall, without the lamp pool. */
  --pp-modal-default-surface: linear-gradient(180deg, #3B2A22 0%, #33241D 100%);
}

/* ── 2. THE ROOM: the knit frame, and the window set into it ─────────────── */
html[data-theme-pack="sweater-weather"] [data-component="PageShell"] {
  background-color: #3A2519 !important;
  background-image: var(--pp-sw-room-knit) !important;
  background-size: 300px 300px, auto !important;
  background-repeat: repeat, no-repeat !important;
  background-attachment: scroll, fixed !important;
}
/* ── THE ROOM'S CHROME: the nav frame, the bottom bar and the footer are
   the room's stone wall at dusk, lit only by the lamp (lower left): warm
   camel in its pool, deep cocoa shadow at the far edges. Inside these the ACCENT tokens are
   re-pointed, so their ink is warm cream; cards and popovers keep the
   oatmeal accent and now glow against the darker room.
   Contrast, cream #F3E6D0 on: lamp pool #7E5232 = 5.43:1, mid #5A3A26 =
   8.24:1, far corner #2A1A12 = 13.58:1 (AA everywhere on the gradient). */
html[data-theme-pack="sweater-weather"] :is([data-toprail], [data-leftrail], .shell-bottom-nav, [data-component="SiteFooter"], [data-staff-rail]) {
  --pp-gradient-accent-surface: var(--pp-sw-room-knit);
  --pp-accent-bg-size: 300px 300px, auto;
  --pp-color-text-on-accent: #F3E6D0;
  --shell-icon-fill: #F3E6D0;
  --pp-color-accent-surface-fallback: #4A3020;
  --pp-cta-border-on-accent: #E8A95E;
  --pp-tab-border-accent: #E8A95E;
  --pp-sw-frost: rgba(20, 10, 6, 0.3);
  --pp-sw-frost-edge: rgba(255, 214, 160, 0.16);
  color: #F3E6D0;
}
html[data-theme-pack="sweater-weather"] [data-component="SiteFooter"] {
  background-attachment: scroll, fixed !important;
  /* The stone is LIGHT-ONLY: it reads as a dark wall only over the lamp
     gradient under it. Where that `fixed` layer does not paint (iOS Safari,
     inside a page's own scroll column, as on the horse pages), what showed
     through was the page behind the footer, and a horse page's Page tab is
     the cream knit: cream stone under cream ink. The wall's own mid tone
     under both layers keeps it a dark wall whatever paints. */
  background-color: #4A3020 !important;
}
/* Touch screens (iOS Safari) do not keep a `fixed` background fixed; the
   lamp gradient scrolls with the footer there, so it always paints. */
@media (pointer: coarse) {
  html[data-theme-pack="sweater-weather"] [data-component="SiteFooter"] {
    background-attachment: scroll, scroll !important;
  }
}
/* The room. Walnut walls in lamplight, a faint vertical wallpaper stripe,
   the lamp pooling from the lower left and the ceiling corner in shadow.
   `fixed` so the light stays put while the page scrolls. The window pane is
   set into this wall at z -1 (between this element's own background and its
   content), which needs the column to be its own stacking context. */
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) {
  isolation: isolate;
  --shell-icon-fill: #F3E6D0;
  background-color: #33241D !important;
  background-image:
    radial-gradient(60% 70% at 0% 100%, rgba(255, 164, 78, 0.24) 0%, rgba(255, 164, 78, 0.08) 45%, rgba(255, 164, 78, 0) 75%),
    radial-gradient(55% 45% at 100% 0%, rgba(10, 6, 4, 0.34) 0%, rgba(10, 6, 4, 0) 100%),
    var(--pp-sw-tex-wall),
    linear-gradient(180deg, #3B2A22 0%, #33241D 55%, #2A1D17 100%) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 170, 0.08),
    inset 0 14px 30px rgba(10, 6, 4, 0.4) !important;
}
/* THE ROOM'S INK. The shell root sets `color: var(--pp-color-text-on-accent)`
   for its chrome, and everything in the page column that does not name its
   own ink inherits it. In every other pack that ink suits the column; here
   the chrome's accent ink is re-pointed to cream only inside the chrome, so
   the column itself would inherit the DARK oatmeal ink onto a dark walnut
   wall and dark cocoa cards: charts drawn in `currentColor` (the doughnuts,
   the radial gauges) went dark on dark. The column is the default surface,
   so it carries the default ink; oatmeal (accent) panels inside it name
   their own ink through `.text-on-accent` / the accent guard below. */
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) {
  color: var(--pp-color-text-on-default);
}
/* An accent (oatmeal) panel in the column keeps the dark ink for anything
   inside it that inherits. */
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) :is([data-surface="accent"], .surface-accent) {
  color: var(--pp-color-text-on-accent);
}

/* Profile + horse pages paint a fixed SurfaceBackdrop over the page. Its
   DEFAULT layer would cover the window with the static token; let the glass
   show. The accent layer keeps its knit. */
html[data-theme-pack="sweater-weather"] [data-component="SurfaceBackdrop"] > div[style*="--pp-gradient-default-surface"] {
  background: transparent !important;
}
html[data-theme-pack="sweater-weather"] [data-surface="default"] {
  --shell-icon-fill: #F3E6D0;
}
html[data-theme-pack="sweater-weather"] [data-surface="accent"] {
  --shell-icon-fill: var(--pp-color-sweater-weather-text-on-accent);
}

/* ── 3. TEXT IN THE ROOM ─────────────────────────────────────────────────
   Page copy sits on the wall and, where it crosses the window, on moving
   glass. A soft dark halo keeps it crisp over both. !important beats the shared heading
   reset (text-shadow: none); the nested-boundary guard below takes it off any
   foreign card. */
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) .text-on-default {
  text-shadow: 0 1px 2px rgba(14, 8, 5, 0.55), 0 0 14px rgba(14, 8, 5, 0.45) !important;
}
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) [data-theme-pack]:not([data-theme-pack="sweater-weather"]) .text-on-default {
  text-shadow: none !important;
}

/* ── 4. NAV: frosted glass panes set into the knit ───────────────────────── */
html[data-theme-pack="sweater-weather"] .shell-leftrail-scroll {
  padding-left: 8px;
  padding-right: 8px;
}
html[data-theme-pack="sweater-weather"] .shell-leftrail-row {
  isolation: isolate;
  margin: 3px 0;
  border-radius: 14px !important;
  background: var(--pp-sw-frost) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.08);
  backdrop-filter: blur(3px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 var(--pp-sw-frost-edge),
    inset 0 0 0 1px rgba(255, 214, 160, 0.1),
    0 0 0 1px rgba(10, 5, 2, 0.25),
    0 3px 8px rgba(10, 5, 2, 0.25);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
html[data-theme-pack="sweater-weather"] .shell-leftrail-row:hover {
  background: rgba(255, 214, 160, 0.14) !important;
}
/* Active: the rust of the blanket and curtains, the one saturated thing on
   the rail, with cream ink (4.74:1 at its lightest). */
html[data-theme-pack="sweater-weather"] .shell-leftrail-row[data-active] {
  --pp-color-text-on-accent: #FBEBDD;
  --shell-icon-fill: #FBEBDD;
  color: #FBEBDD;
  background: var(--pp-sw-rust) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 170, 0.28),
    0 0 0 1px rgba(40, 12, 6, 0.55),
    0 4px 12px rgba(10, 5, 2, 0.4);
}
/* A focus ring that reads on rust, wall and oatmeal alike: cream inside,
   dark outside. */
html[data-theme-pack="sweater-weather"] :is(.shell-leftrail-row, .toprail-nav-item, .pp-cta):focus-visible {
  outline: 2px solid #FBEBDD;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(30, 12, 6, 0.7);
}
html[data-theme-pack="sweater-weather"] .toprail-nav-item {
  position: relative;
  isolation: isolate;
  background: none !important;
}
html[data-theme-pack="sweater-weather"] .toprail-nav-item::before {
  content: "";
  position: absolute;
  inset: -10px calc((6px - var(--shell-toprail-nav-gap, 0px)) / 2);
  z-index: -1;
  pointer-events: none;
  border-radius: 14px;
  background: var(--pp-sw-frost);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow:
    inset 0 1px 0 var(--pp-sw-frost-edge),
    inset 0 0 0 1px rgba(255, 214, 160, 0.1),
    0 0 0 1px rgba(10, 5, 2, 0.25),
    0 3px 8px rgba(10, 5, 2, 0.25);
  transition: background-color 180ms ease;
}
html[data-theme-pack="sweater-weather"] .toprail-nav-item:hover::before,
html[data-theme-pack="sweater-weather"] .toprail-nav-item:focus-visible::before {
  background: rgba(255, 214, 160, 0.16);
}
html[data-theme-pack="sweater-weather"] .toprail-icon-btn {
  position: relative;
  isolation: isolate;
  background: none !important;
}
html[data-theme-pack="sweater-weather"] .toprail-icon-btn::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: var(--pp-sw-frost);
  box-shadow:
    inset 0 1px 0 var(--pp-sw-frost-edge),
    0 0 0 1px rgba(98, 74, 46, 0.14),
    0 3px 8px rgba(80, 58, 34, 0.12);
}
html[data-theme-pack="sweater-weather"] .toprail-icon-btn:hover::before {
  background: rgba(255, 214, 160, 0.16);
}
html[data-theme-pack="sweater-weather"] .shell-rail-search {
  background: var(--pp-sw-frost) !important;
  border-color: rgba(255, 214, 160, 0.16) !important;
  box-shadow: inset 0 1px 0 var(--pp-sw-frost-edge), 0 2px 6px rgba(80, 58, 34, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme-pack="sweater-weather"] :is(.shell-leftrail-row, .toprail-nav-item::before) { transition: none; }
}

/* ── 4b. TEXT GROUNDS stay quiet ─────────────────────────────────────────
   Search fields are frosted glass on the pane, not a strip of knit. */
html[data-theme-pack="sweater-weather"] [data-component="PPSearchInput"] :is([style*="cards-on-default"], [style*="cards-on-accent"]) {
  background: rgba(238, 229, 211, 0.10) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(238, 229, 211, 0.22),
    0 4px 14px rgba(8, 10, 14, 0.25) !important;
}
/* No oatmeal text plank on the horse card any more: since R21 the card is
   ONE stone wall behind the picture and the words, with cream ink (section
   5). The old plank outlived that change and put the cream ink on cream
   (Leigh, September 27th, 2026: "I can't read the text"). */

/* ── 5. CARDS ON THE GLASS ─────────────────────────────────────────────────
   Every card in this pack is a piece of knitting: the knit is in the fill
   tokens. What rules add is a soft shadow so the wool sits in the room (no
   stitched edge: Leigh moved the pack away from it).
   Horse cards inherit the pack (descendant arm); entity cards stamp their own
   slug (self arm). Neither reaches a foreign card: every descendant arm
   carries `:not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)`,
   so it stops at a nested foreign scope (section 9). */
html[data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
.horse-card[data-theme-pack="sweater-weather"] {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(43, 39, 36, 0.20),
    0 10px 24px rgba(8, 10, 14, 0.42) !important;
}


:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"]:is([data-entity="user"][data-chrome], [data-entity="theme-pack"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"]:is([data-entity="user"][data-chrome], [data-entity="theme-pack"])[data-theme-pack="sweater-weather"]) {
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow:
    0 0 0 1px rgba(43, 39, 36, 0.22),
    0 10px 24px rgba(8, 10, 14, 0.40);
}

/* A single drop of rain that has landed on the wool and is beading there,
   top right. It gathers, slips a little way and soaks in (below); the still
   frame is the bead at rest. */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"]:is([data-entity="user"][data-chrome], [data-entity="theme-pack"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"]:is([data-entity="user"][data-chrome], [data-entity="theme-pack"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]))::after {
  content: "";
  position: absolute;
  top: calc(-4px * var(--pp-deco-scale, 1));
  right: calc(16px * var(--pp-deco-scale, 1));
  width: calc(11px * var(--pp-deco-scale, 1));
  height: calc(13px * var(--pp-deco-scale, 1));
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.95) 0 14%, transparent 22%),
    radial-gradient(circle at 50% 78%, rgba(255, 244, 226, 0.55) 0 18%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(160, 182, 206, 0.30) 0%, rgba(70, 86, 104, 0.45) 72%, rgba(40, 50, 62, 0.6) 100%);
  box-shadow: 0 2px 3px rgba(20, 24, 30, 0.35);
  pointer-events: none;
  z-index: 4;
  /* The bead gathers, slips a little way down the wool and soaks in, then
     another forms (Leigh, September 26th, 2026: more of the pack on every
     card). Still frame: the bead at rest, where it sits above. */
  translate: 0 0;
  opacity: 1;
  animation: pp-sw-card-bead 9s ease-in-out infinite;
}
@keyframes pp-sw-card-bead {
  0%   { translate: 0 -2px; scale: 0.6; opacity: 0; }
  14%  { translate: 0 0; scale: 1; opacity: 1; }
  62%  { translate: 0 0; scale: 1; opacity: 1; }
  88%  { translate: 0 calc(12px * var(--pp-deco-scale, 1)); scale: 0.9; opacity: 0; }
  100% { translate: 0 calc(12px * var(--pp-deco-scale, 1)); scale: 0.9; opacity: 0; }
}

/* A leaf blown in from the window, caught on the top-left corner of the
   knit and stirring in the draft. The pack's own leaves (the ones that fall
   past the window); it overhangs by half the reach budget and swings from
   its stem. User cards and medium / large horse cards; micro drops it. */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]))::before {
  content: "";
  position: absolute;
  top: calc(-0.5 * var(--pp-deco-reach-card, 20px));
  left: calc(-0.5 * var(--pp-deco-reach-card, 20px));
  width: calc(34px * var(--pp-deco-scale, 1));
  height: calc(42px * var(--pp-deco-scale, 1));
  pointer-events: none;
  z-index: 4;
  background: url("/theme-packs/sweater-weather/art/leaves/leaf-3.webp") center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(20, 24, 30, 0.35));
  transform-origin: 30% 12%;
  rotate: -8deg; /* still frame */
  animation: pp-sw-card-leaf 7s ease-in-out infinite;
}
@keyframes pp-sw-card-leaf {
  0%, 100% { rotate: -8deg; }
  40%      { rotate: 4deg; }
  70%      { rotate: -3deg; }
}
[data-component="EntityCard"][data-theme-pack="sweater-weather"][data-size="small"]::before,
[data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)::before {
  width: calc(24px * var(--pp-deco-scale, 1));
  height: calc(30px * var(--pp-deco-scale, 1));
}
@media (prefers-reduced-motion: reduce) {
  :is([data-theme-pack="sweater-weather"] [data-component="EntityCard"]:is([data-entity="user"][data-chrome], [data-entity="theme-pack"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"]:is([data-entity="user"][data-chrome], [data-entity="theme-pack"])[data-theme-pack="sweater-weather"],
      [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]))::after,
  :is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
      [data-component="EntityCard"][data-entity="user"][data-chrome][data-theme-pack="sweater-weather"],
      [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]))::before { animation: none !important; }
}
html[data-tab-hidden="true"] :is([data-theme-pack="sweater-weather"] :is(.horse-card, [data-component="EntityCard"]), :is(.horse-card, [data-component="EntityCard"])[data-theme-pack="sweater-weather"])::before,
html[data-tab-hidden="true"] :is([data-theme-pack="sweater-weather"] :is(.horse-card, [data-component="EntityCard"]), :is(.horse-card, [data-component="EntityCard"])[data-theme-pack="sweater-weather"])::after { animation-play-state: paused; }
/* Micro keeps the rim and drops ornaments (shared rule handles ::before/::after
   on user cards); a theme-pack micro swatch keeps them, which is the contract. */

/* ── 5a. THE ROOM ON THE CARD (Leigh, September 26th, 2026: the cards read
   "too light"). A card is now a corner of the room, not a swatch of pale
   knit: the room's own lamp-lit knit (the chrome's surface) with cream ink,
   measured by the chrome at 5.43:1 in the lamp pool and higher everywhere
   else. Every size, micro included (the surface is not decoration).
   EVERY entity card, not just horse and chrome user cards (Leigh, September
   27th, 2026: "make sure sweater weather entity cards don't ever show that
   sweater texture anymore, we really just have the brick and the rain window
   stuff now"): the knit stays in the root tokens for the page's own accent
   panels, but no card of any entity type, no swatch panel (which carries
   `data-theme-pack` itself, so the root rule would re-declare the knit on
   it) and no shop card resolves it. */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-theme-pack="sweater-weather"],
    [data-component="EntityCard"] [data-surface-swatch][data-theme-pack="sweater-weather"],
    .pp-shop-card[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    .horse-card[data-theme-pack="sweater-weather"]) {
  --pp-gradient-accent-surface: var(--pp-sw-room-knit);
  --pp-gradient-cards-on-accent: var(--pp-sw-room-knit);
  --pp-accent-bg-size: 300px 300px, auto;
  --pp-color-text-on-accent: #F3E6D0;
  --shell-icon-fill: #F3E6D0;
  --pp-color-accent-surface-fallback: #4A3020;
  /* No fade (R21): the card is ONE stone wall behind both the picture and the
     words, so a fade to a flat brown ended in a hard line where the stone
     came back under the name. Transparent, the wall runs on unbroken. */
  --pp-card-fade-color: transparent;
}
/* The scene (CardScene; micro keeps the rim only). A corner of the room at
   the window: the pane with the pack's real rain-on-window footage (its
   still), rain falling BEHIND the glass (fast streaks, the window's ::before)
   and drops running DOWN the glass (the drift), and now and then a soft flash
   of far lightning in it (the window's ::after: two flashes every eleven
   seconds, never three in a second, never white, none under reduced motion).
   The window ends on its frame and a walnut sill (the same CSS walnut as the
   page's window seat); the sleeping ginger cat and the mug on its books sit
   ON the sill line (the cat's baseline measured from its cut-out: its alpha
   ends at 69.8% of the canvas), and the pack's KinoMaster steam rises from
   the mug. Every moving piece moves by `translate` or `opacity` alone.
   On user and horse cards the scene sits behind the words (the card
   isolates, so z-index -1 paints above the card's fill) with the room's dark
   wall below the sill; on the theme-pack card it IS the picture panel. */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"])) {
  position: relative;
  isolation: isolate;
}
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] {
  inset: 0;
  z-index: -1;
  container-type: inline-size;
}
/* the theme-pack card: over its picture panel (2px in from the card's edge,
   the text panel below it), beneath the "Limited time" badge. The theme-pack
   arms carry `:not(#pp-outrank)` (an id's weight, matching nothing) to outrank
   the shared arms above, whose most specific member wins every :is(). */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"]):not(#pp-outrank) > [data-card-scene] {
  inset: 0 0 141px 0;
  z-index: 1;
  /* !important over CardScene's inline `border-radius: inherit`, which
     rounded the scene's BOTTOM corners too and let the cream picture panel
     show as a strip under the sill (R21). Square at the sill, so the window
     meets the text panel in one line. */
  border-radius: var(--pp-dimension-radius-lg) var(--pp-dimension-radius-lg) 0 0 !important;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="large"]:not(#pp-outrank) > [data-card-scene] {
  bottom: 143px;
}
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] > [data-card-scene-window] {
  left: 0;
  top: 0;
  width: 100%;
  height: var(--pp-sw-sill, 56.25cqw);
  background: url("/theme-packs/sweater-weather/art/rain-window-fogged.webp") center / cover no-repeat;
  /* the frame's bottom rail, where the pane meets the sill */
  box-shadow: inset 0 -3px 0 #3A2618, inset 0 -4px 0 rgba(255, 226, 184, 0.18);
  /* The FOGGED still (scripts/build-sweater-weather-fogged-window.mjs): the
     page window fogs its glass live, so every card and avatar window shows
     the same steamed pane, never a clear one beside it (September 29th, 2026). */
}
/* on the theme-pack card the window fills its panel down to the sill */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"]):not(#pp-outrank) > [data-card-scene] > [data-card-scene-window] {
  height: calc(100% - 10cqw);
}
/* rain falling behind the glass: long pale streaks, fast, one tile per loop */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] > [data-card-scene-window]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -90px;
  width: 100%;
  height: calc(100% + 90px);
  pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 0 20%, rgba(214, 228, 244, 0.42) 60%, transparent 61%),
    linear-gradient(180deg, transparent 0 50%, rgba(214, 228, 244, 0.36) 90%, transparent 91%),
    linear-gradient(180deg, transparent 0 5%, rgba(214, 228, 244, 0.34) 40%, transparent 41%),
    linear-gradient(180deg, transparent 0 35%, rgba(214, 228, 244, 0.4) 75%, transparent 76%),
    linear-gradient(180deg, transparent 0 60%, rgba(214, 228, 244, 0.3) 98%, transparent 99%),
    linear-gradient(180deg, transparent 0 12%, rgba(214, 228, 244, 0.34) 50%, transparent 51%);
  background-size: 1.5px 90px;
  background-repeat: repeat-y;
  background-position: 8% 0, 21% 0, 37% 0, 52% 0, 68% 0, 88% 0;
  translate: 0 0; /* still frame */
  /* Slower than it was (0.9s, R24): calmer at a glance across a grid, and
     half as many tile loops a second. */
  animation: pp-sw-card-rain-fall 1.5s linear infinite;
}
@keyframes pp-sw-card-rain-fall {
  from { translate: 0 0; }
  to   { translate: 0 90px; }
}
/* drops running down the glass: beads with their trails, slow, one tile per
   loop so it never jumps */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] [data-card-scene-drift] {
  left: 0;
  top: -120px;
  width: 100%;
  height: calc(100% + 120px);
  background-image:
    radial-gradient(2.6px 3.2px at 50% 88%, rgba(240, 246, 255, 0.9), rgba(160, 182, 206, 0.5) 60%, transparent 100%),
    linear-gradient(180deg, transparent 0 40%, rgba(214, 228, 244, 0.35) 85%, transparent 86%),
    radial-gradient(2.2px 2.8px at 50% 38%, rgba(240, 246, 255, 0.85), rgba(160, 182, 206, 0.45) 60%, transparent 100%),
    linear-gradient(180deg, transparent 0 0%, rgba(214, 228, 244, 0.3) 35%, transparent 36%),
    radial-gradient(3px 3.6px at 50% 64%, rgba(240, 246, 255, 0.9), rgba(160, 182, 206, 0.5) 60%, transparent 100%),
    linear-gradient(180deg, transparent 0 20%, rgba(214, 228, 244, 0.32) 61%, transparent 62%);
  background-size: 8px 120px, 1.5px 120px, 8px 120px, 1.5px 120px, 8px 120px, 1.5px 120px;
  background-repeat: repeat-y;
  background-position:
    calc(26% + 3px) 0, 26% 0,
    calc(61% + 3px) 0, 61% 0,
    calc(80% + 3px) 0, 80% 0;
  translate: 0 0; /* still frame */
  animation: pp-sw-card-drops 6s linear infinite;
}
@keyframes pp-sw-card-drops {
  from { translate: 0 0; }
  to   { translate: 0 120px; }
}
/* HORSE cards: the horse has to read against the glass (Leigh, September
   28th, 2026: "really hard to see the horses"). The pane fogs over, the way
   the page's window does, in a soft pale mist between the rain footage and
   the horse, and the rain behind the glass and the drops on it run at about
   half strength. Member and theme-pack cards keep the full storm. The arms
   carry :not(#pp-outrank) to beat the shared rules above. */
:is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"])):not(#pp-outrank) > [data-card-scene] > [data-card-scene-window] {
  background:
    radial-gradient(120% 70% at 28% 30%, rgba(224, 230, 238, 0.26), transparent 70%),
    radial-gradient(110% 80% at 78% 72%, rgba(212, 220, 230, 0.22), transparent 72%),
    linear-gradient(rgba(204, 212, 222, 0.14), rgba(204, 212, 222, 0.14)),
    url("/theme-packs/sweater-weather/video/rain-window-poster.jpg") center / cover no-repeat;
}
:is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"])):not(#pp-outrank) > [data-card-scene] > [data-card-scene-window]::before,
:is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"])):not(#pp-outrank) > [data-card-scene] [data-card-scene-drift] {
  opacity: 0.45;
}
/* far lightning in the glass */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] > [data-card-scene-window]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 90% at 60% 20%, rgba(226, 232, 255, 0.5), rgba(226, 232, 255, 0.12) 60%, transparent 100%);
  opacity: 0; /* still frame: no flash */
  animation: pp-sw-card-lightning 11s linear infinite;
}
@keyframes pp-sw-card-lightning {
  0%, 90%   { opacity: 0; }
  91%       { opacity: 0.7; }
  92.5%     { opacity: 0; }
  95%       { opacity: 0.45; }
  97%, 100% { opacity: 0; }
}
/* the sill, and the cat and the mug on its books sitting on it; in front of
   the pane (z-index 1: the window is a later sibling). The mug is the books'
   own (table.webp), now 36% of the card wide so it reads at a glance. */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* THE SHELF (R29, Leigh, September 26th, 2026: a real shelf with depth,
     and nothing floats). Under the window (--pp-sw-sill): its TOP face, lit
     from the room and darker at the back where it meets the wall, then its
     FRONT edge with a lit nosing, then its shadow on the wall. The cat and
     the books sit ON the top face, their bases 2cqw in front of its back
     edge (--pp-sw-base), not on the window's bottom line. The ratios are the
     assets' own: cat.webp's alpha ends at 69.4% of its height (so its top is
     base - 0.4445 x its width), table-seated.webp's books end at 98.1% (top
     is base - 0.8882 x its width). */
  --pp-sw-base: calc(var(--pp-sw-sill, 56.25cqw) + 2cqw);
  background-image:
    url("/theme-packs/sweater-weather/art/cat.webp"),
    url("/theme-packs/sweater-weather/art/table-seated.webp"),
    radial-gradient(50% 50%, rgba(20, 10, 4, 0.45), transparent),
    radial-gradient(50% 50%, rgba(20, 10, 4, 0.45), transparent),
    linear-gradient(180deg, #4A301E 0%, #6E4C31 40%, #9A7350 100%),
    linear-gradient(180deg, rgba(255, 226, 184, 0.7) 0 1px, #8A6444 1px, #6E4C31 50%, #4A301E 100%),
    linear-gradient(180deg, rgba(10, 5, 2, 0.5), transparent);
  background-repeat: no-repeat;
  background-size:
    var(--pp-sw-cat-w, 80cqw) auto,
    var(--pp-sw-books-w, 36cqw) auto,
    calc(var(--pp-sw-cat-w, 80cqw) * 0.36) 2.4cqw,
    calc(var(--pp-sw-books-w, 36cqw) * 0.98) 2.4cqw,
    100% var(--pp-sw-shelf-top, 3.5cqw),
    100% var(--pp-sw-shelf-front, 5cqw),
    100% 4cqw;
  background-position:
    var(--pp-sw-cat-x, -19cqw) calc(var(--pp-sw-base) - var(--pp-sw-cat-w, 80cqw) * 0.4445),
    var(--pp-sw-books-x, 61cqw) calc(var(--pp-sw-base) - var(--pp-sw-books-w, 36cqw) * 0.8882),
    calc(var(--pp-sw-cat-x, -19cqw) + var(--pp-sw-cat-w, 80cqw) * 0.27) calc(var(--pp-sw-base) - 1.4cqw),
    calc(var(--pp-sw-books-x, 61cqw) + var(--pp-sw-books-w, 36cqw) * 0.01) calc(var(--pp-sw-base) - 1.4cqw),
    0 var(--pp-sw-sill, 56.25cqw),
    0 calc(var(--pp-sw-sill, 56.25cqw) + var(--pp-sw-shelf-top, 3.5cqw)),
    0 calc(var(--pp-sw-sill, 56.25cqw) + var(--pp-sw-shelf-top, 3.5cqw) + var(--pp-sw-shelf-front, 5cqw));
}
/* HORSE cards keep the window and the shelf and lose the cat, the books and
   the mug with its steam (Leigh, September 27th, 2026): the member's horse is
   the only thing on the sill. The three shelf layers above, alone, in the
   same order. `:not(#pp-outrank)` outranks the shared :is() arms. */
:is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"])):not(#pp-outrank) > [data-card-scene]::before {
  background-image:
    linear-gradient(180deg, #4A301E 0%, #6E4C31 40%, #9A7350 100%),
    linear-gradient(180deg, rgba(255, 226, 184, 0.7) 0 1px, #8A6444 1px, #6E4C31 50%, #4A301E 100%),
    linear-gradient(180deg, rgba(10, 5, 2, 0.5), transparent);
  background-size:
    100% var(--pp-sw-shelf-top, 3.5cqw),
    100% var(--pp-sw-shelf-front, 5cqw),
    100% 4cqw;
  background-position:
    0 var(--pp-sw-sill, 56.25cqw),
    0 calc(var(--pp-sw-sill, 56.25cqw) + var(--pp-sw-shelf-top, 3.5cqw)),
    0 calc(var(--pp-sw-sill, 56.25cqw) + var(--pp-sw-shelf-top, 3.5cqw) + var(--pp-sw-shelf-front, 5cqw));
}
:is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"])):not(#pp-outrank) > [data-card-scene]::after {
  content: none;
}
/* The MEDIUM horse card is the rainy window alone, top to bottom: no shelf
   and no stone (Leigh, September 27th, 2026). */
:is([data-theme-pack="sweater-weather"] .horse-card[data-card-size="medium"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    .horse-card[data-theme-pack="sweater-weather"][data-card-size="medium"]):not(#pp-outrank) > [data-card-scene] > [data-card-scene-window] {
  height: 100%;
  box-shadow: none;
}
:is([data-theme-pack="sweater-weather"] .horse-card[data-card-size="medium"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    .horse-card[data-theme-pack="sweater-weather"][data-card-size="medium"]):not(#pp-outrank) > [data-card-scene]::before {
  content: none;
}
/* The MICRO horse card (no CardScene: micro keeps the rim only) is the
   rainy window too: the footage's still as its fill, never the stone. */
:is([data-theme-pack="sweater-weather"] .horse-card[data-horse-card-micro]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    .horse-card[data-theme-pack="sweater-weather"][data-horse-card-micro]):not(#pp-outrank) {
  --pp-gradient-accent-surface: url("/theme-packs/sweater-weather/art/rain-window-fogged.webp");
  --pp-gradient-cards-on-accent: url("/theme-packs/sweater-weather/art/rain-window-fogged.webp");
  --pp-accent-bg-size: cover;
  --pp-accent-bg-position: center;
  --pp-color-accent-surface-fallback: #1E2226;
}
/* The MEDIUM user card: its avatar hangs over the middle of the window and
   hid the shelf, so here the window reaches below the avatar and the shelf
   runs across the card under it; the cat and the books, smaller, sit either
   side of the avatar on it (avatar measured at 28.2 to 71.8cqw across, its
   foot at 65.2cqw; the name starts at 74.3cqw). */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="medium"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="medium"][data-theme-pack="sweater-weather"]) {
  --pp-sw-sill: 65.5cqw;
  --pp-sw-shelf-top: 3cqw;
  --pp-sw-shelf-front: 4cqw;
  --pp-sw-cat-w: 64cqw;
  --pp-sw-cat-x: -15cqw;
  --pp-sw-books-w: 26cqw;
  --pp-sw-books-x: 72.5cqw;
}
/* The LARGE horse card (Leigh, September 27th, 2026): the window is the
   picture zone, the shelf sits on the line where the picture ends, and the
   stone wall is the text plank alone. The picture zone is 3:4 (133.33cqw, the
   card metrics' ENTITY_CARD_LARGE_ART_ASPECT), so the sill goes the shelf's
   top and front faces above it and the shelf's front edge lands on the
   plank's top. */
:is([data-theme-pack="sweater-weather"] .horse-card[data-card-size="large"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    .horse-card[data-theme-pack="sweater-weather"][data-card-size="large"]) {
  --pp-sw-sill: calc(133.333cqw - var(--pp-sw-shelf-top, 3.5cqw) - var(--pp-sw-shelf-front, 5cqw));
}
/* The LARGE user card: the shelf stays at the window's foot and shows either
   side of the avatar (23.4 to 76.6cqw); the cat and the books sit in those
   two open ends of it. */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="large"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="large"][data-theme-pack="sweater-weather"]) {
  --pp-sw-cat-w: 60cqw;
  --pp-sw-cat-x: -14cqw;
  --pp-sw-books-w: 22cqw;
  --pp-sw-books-x: 77.5cqw;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"]):not(#pp-outrank) > [data-card-scene]::before {
  /* The same shelf, anchored to the panel's foot (R29): the window ends
     10cqw up, the top face runs 10 to 6.5cqw, the front edge 6.5 to 1.5cqw,
     the wall's shadow under it; the cat's and the books' bases sit at 8cqw,
     on the top face. */
  background-image:
    url("/theme-packs/sweater-weather/art/cat.webp"),
    url("/theme-packs/sweater-weather/art/table-seated.webp"),
    radial-gradient(50% 50%, rgba(20, 10, 4, 0.45), transparent),
    radial-gradient(50% 50%, rgba(20, 10, 4, 0.45), transparent),
    linear-gradient(180deg, #4A301E 0%, #6E4C31 40%, #9A7350 100%),
    linear-gradient(180deg, rgba(255, 226, 184, 0.7) 0 1px, #8A6444 1px, #6E4C31 50%, #4A301E 100%),
    linear-gradient(180deg, #3A2618, #2A1A12);
  background-size: 80cqw auto, 36cqw auto, 28.8cqw 2.4cqw, 35.3cqw 2.4cqw, 100% 3.5cqw, 100% 5cqw, 100% 1.5cqw;
  background-position:
    left -19cqw bottom -7.71cqw,
    left 61cqw bottom 7.38cqw,
    left 2.6cqw bottom 6.8cqw,
    left 61.4cqw bottom 6.8cqw,
    left bottom 6.5cqw,
    left bottom 1.5cqw,
    left bottom;
}
/* the steam over the mug (the mug's rim is 39.5% across the books) */
:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene]::after {
  content: "";
  position: absolute;
  /* R31: the steam's source (72% across the picture, at its foot) sits ON
     the mug's rim, whatever the mug's size: the rim is 36% across the books
     picture and 5.3% of its width down from its top. */
  --pp-sw-steam-w: calc(var(--pp-sw-books-w, 36cqw) * 0.62);
  left: calc(var(--pp-sw-books-x, 61cqw) + var(--pp-sw-books-w, 36cqw) * 0.36 - var(--pp-sw-steam-w) * 0.72);
  top: calc(var(--pp-sw-sill, 56.25cqw) + 2cqw - var(--pp-sw-books-w, 36cqw) * 0.8882 + var(--pp-sw-books-w, 36cqw) * 0.0526 - var(--pp-sw-steam-w) * 0.5917 + 0.5cqw);
  width: var(--pp-sw-steam-w);
  height: calc(var(--pp-sw-steam-w) * 0.5917);
  z-index: 2;
  pointer-events: none;
  /* The steam footage's still, pre-lightened into a picture with its own
     transparency (steam-alpha.webp: each pixel's lightness as its alpha), so
     it needs no `mix-blend-mode: screen`. A blend mode on every card made
     each one its own blending group, re-composited every frame the steam
     moved (R24). */
  background: url("/theme-packs/sweater-weather/video/steam-alpha.webp") center bottom / 100% 100% no-repeat;
  transform-origin: 72% 100%;
  /* still frame (reduced motion): a soft wisp just above the rim */
  opacity: 0.55;
  translate: 0 -6%;
  scale: 1;
  /* Rises ONLY (R31): in at the rim, up and out, and back to the rim while
     unseen; `normal` direction, never alternate. */
  animation: pp-sw-card-steam 4.2s linear infinite;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"]):not(#pp-outrank) > [data-card-scene]::after {
  top: auto;
  /* the rim, 0.5cqw inside it: books picture foot 7.38cqw + 0.8527 x 36cqw */
  bottom: 37.6cqw;
  --pp-sw-steam-w: 22.32cqw;
  left: 57.89cqw;
}
@keyframes pp-sw-card-steam {
  0%   { translate: 0 8%; scale: 0.85; opacity: 0; }
  18%  { opacity: 0.85; }
  60%  { opacity: 0.6; }
  100% { translate: 0 -38%; scale: 1.08; opacity: 0; }
}

/* ── The rows (84px: the small user card, the small horse row, the small
   theme-pack card). A simplified window: it runs down the row's right end
   (on the theme-pack row, down its picture panel), with the falling rain and
   the mug on its books below it. */
:is(:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"][data-theme-pack="sweater-weather"]), :is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="row"], [data-card-size="small"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="row"], [data-card-size="small"])), [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]) { position: relative; isolation: isolate; }
:is(:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"][data-theme-pack="sweater-weather"]), :is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="row"], [data-card-size="small"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="row"], [data-card-size="small"])), [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]) > [data-card-scene] {
  inset: 0;
  z-index: -1;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]:not(#pp-outrank) > [data-card-scene] {
  inset: 0 auto 0 0;
  width: calc(30% + 2px);
  z-index: 1;
}
:is(:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"][data-theme-pack="sweater-weather"]), :is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="row"], [data-card-size="small"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="row"], [data-card-size="small"])), [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]) > [data-card-scene] > [data-card-scene-window] {
  right: 0;
  top: 0;
  width: 46%;
  height: 100%;
  background: url("/theme-packs/sweater-weather/art/rain-window-fogged.webp") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]:not(#pp-outrank) > [data-card-scene] > [data-card-scene-window] {
  width: 100%;
  height: calc(100% - 6px);
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: inset 0 -2px 0 #3A2618;
}
:is(:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"][data-theme-pack="sweater-weather"]), :is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="row"], [data-card-size="small"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="row"], [data-card-size="small"])), [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]) > [data-card-scene] > [data-card-scene-window]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: calc(100% + 60px);
  pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 0 20%, rgba(214, 228, 244, 0.42) 60%, transparent 61%),
    linear-gradient(180deg, transparent 0 50%, rgba(214, 228, 244, 0.36) 90%, transparent 91%),
    linear-gradient(180deg, transparent 0 5%, rgba(214, 228, 244, 0.34) 40%, transparent 41%),
    linear-gradient(180deg, transparent 0 35%, rgba(214, 228, 244, 0.4) 75%, transparent 76%);
  background-size: 1.5px 60px;
  background-repeat: repeat-y;
  background-position: 22% 0, 45% 0, 68% 0, 90% 0;
  translate: 0 0; /* still frame */
  animation: pp-sw-row-rain 1.3s linear infinite;
}
@keyframes pp-sw-row-rain {
  from { translate: 0 0; }
  to   { translate: 0 60px; }
}
:is(:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"][data-theme-pack="sweater-weather"]), :is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="row"], [data-card-size="small"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="row"], [data-card-size="small"])), [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]) > [data-card-scene]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: url("/theme-packs/sweater-weather/art/table.webp") right 6px bottom 3px / auto 44% no-repeat;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]:not(#pp-outrank) > [data-card-scene]::before {
  background:
    url("/theme-packs/sweater-weather/art/table.webp") right 4px bottom 6px / auto 38% no-repeat,
    linear-gradient(180deg, rgba(255, 226, 184, 0.55) 0 1px, #8A6444 1px, #4A301E 100%) left bottom / 100% 6px no-repeat;
}

/* ── The micro theme-pack card: no words, two halves that must read as the
   pack at a glance. The top half is a tiny rainy window on its sill line
   (the footage still, falling rain), the bottom half the room's warm stone.
   No beads, no runs (the glass panel's spatter is for the larger cards). */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="micro"] [data-surface-swatch="accent"] {
  background:
    linear-gradient(180deg, rgba(255, 226, 184, 0.55) 0 1px, #8A6444 1px, #4A301E 100%) left bottom / 100% 6px no-repeat,
    url("/theme-packs/sweater-weather/art/rain-window-fogged.webp") center / cover no-repeat !important;
  position: relative;
  overflow: hidden;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="micro"] [data-surface-swatch="accent"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: -60px;
  width: 100%;
  height: calc(100% + 60px);
  pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 0 20%, rgba(214, 228, 244, 0.42) 60%, transparent 61%),
    linear-gradient(180deg, transparent 0 50%, rgba(214, 228, 244, 0.36) 90%, transparent 91%),
    linear-gradient(180deg, transparent 0 5%, rgba(214, 228, 244, 0.34) 40%, transparent 41%),
    linear-gradient(180deg, transparent 0 35%, rgba(214, 228, 244, 0.4) 75%, transparent 76%);
  background-size: 1.5px 60px;
  background-repeat: repeat-y;
  background-position: 18% 0, 41% 0, 64% 0, 86% 0;
  translate: 0 0;
  animation: pp-sw-row-rain 1.3s linear infinite;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="micro"] [data-surface-swatch="default"] {
  background: var(--pp-sw-room-knit) !important;
  background-size: 300px 300px, auto !important;
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="micro"] [data-surface-swatch="default"]::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  :is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] [data-card-scene-drift],
  :is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] > [data-card-scene-window]::before,
  :is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene]::after,
  :is(:is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"]:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome][data-size="small"][data-theme-pack="sweater-weather"]), :is([data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="row"], [data-card-size="small"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="row"], [data-card-size="small"])), [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="small"]) > [data-card-scene] > [data-card-scene-window]::before,
  [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="micro"] [data-surface-swatch="accent"]::before { animation: none; }
  :is([data-theme-pack="sweater-weather"] [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
    [data-component="EntityCard"][data-entity="user"][data-chrome]:not([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"],
    [data-theme-pack="sweater-weather"] .horse-card:not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *):is([data-card-size="medium"], [data-card-size="large"]),
    .horse-card[data-theme-pack="sweater-weather"]:is([data-card-size="medium"], [data-card-size="large"]),
    [data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"])) > [data-card-scene] > [data-card-scene-window]::after { animation: none; opacity: 0; }
}
html[data-tab-hidden="true"] [data-theme-pack="sweater-weather"] [data-card-scene] :is([data-card-scene-drift], [data-card-scene-window]),
html[data-tab-hidden="true"] [data-theme-pack="sweater-weather"] [data-card-scene] > [data-card-scene-window]::before,
html[data-tab-hidden="true"] [data-theme-pack="sweater-weather"] [data-card-scene] > [data-card-scene-window]::after,
html[data-tab-hidden="true"] [data-theme-pack="sweater-weather"] [data-card-scene]::after,
html[data-tab-hidden="true"] [data-theme-pack="sweater-weather"] [data-surface-swatch="accent"]::before {
  animation-play-state: paused;
}

/* ── 6. THE THEME-PACK CARD: the window, in miniature ─────────────────────
   Its default panel is the glass, so it gets rain: a spatter of beads and two
   runs, drawn once as a background. Its accent panel is the stone wall (5a). */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"] [data-surface-swatch="default"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(3px 3.5px at 18% 22%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(2px 2.4px at 31% 64%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(4px 4.6px at 72% 30%, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(2.4px 2.8px at 84% 76%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.6px 1.8px at 56% 48%, rgba(255, 255, 255, 0.45), transparent 100%),
    radial-gradient(1.6px 1.8px at 9% 86%, rgba(255, 255, 255, 0.4), transparent 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(190, 206, 226, 0.20) 18% 70%, transparent 70%) 44% 0 / 2px 100% no-repeat,
    linear-gradient(180deg, transparent 0 34%, rgba(190, 206, 226, 0.16) 34% 92%, transparent 92%) 78% 0 / 2px 100% no-repeat,
    radial-gradient(40% 36% at 82% 70%, rgba(255, 184, 104, 0.30), transparent 100%),
    radial-gradient(20% 18% at 30% 78%, rgba(255, 214, 160, 0.18), transparent 100%);
}

/* On the two big cards the default panel is the TEXT panel, under the
   picture panel's own window (the scene above, with its rain): rain and bokeh
   there ran over the pack's name (R14). The rain stays in the window. */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"]) [data-surface-swatch="default"]::after { content: none; }

/* The accent panel is the stone wall (5a). The card sizes its panel
   background to the panel, which would stretch one stone tile across it; the
   stone repeats at the size the other cards use, the lamp gradient fills. */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"] [data-surface-swatch="accent"] {
  background-repeat: repeat, no-repeat !important;
  background-size: 300px 300px, 100% 100% !important;
}
/* ...and on the two big cards, the room's floor in miniature: the blanket
   stack and the mug on a strip of the walnut ledge, in the lamp's pool. */
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"]:is([data-size="medium"], [data-size="large"]) [data-surface-swatch="accent"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url("/theme-packs/sweater-weather/art/seat.webp") left 2% bottom 4px / auto 60% no-repeat,
    url("/theme-packs/sweater-weather/art/table.webp") right 8% bottom 6px / auto 34% no-repeat,
    linear-gradient(180deg, rgba(255, 226, 184, 0.55) 0 1px, #8A6444 1px, #5E4029 100%) left bottom / 100% 8px no-repeat,
    radial-gradient(80% 70% at 0% 100%, rgba(255, 182, 96, 0.30), transparent 70%);
}
[data-component="EntityCard"][data-entity="theme-pack"][data-theme-pack="sweater-weather"][data-size="large"] [data-surface-swatch="accent"]::before {
  background-size: auto 48%, auto 26%, 100% 8px, auto;
}

/* The shop card's media window (the pack's fallback swatch until captures are
   recorded): the ledge and the lamp's pool, over the stone wall. Static. */
.pp-shop-card[data-theme-pack="sweater-weather"] .pp-shop-card-media {
  position: relative;
  overflow: hidden;
}
.pp-shop-card[data-theme-pack="sweater-weather"] .pp-shop-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    url("/theme-packs/sweater-weather/art/seat.webp") left 2% bottom 6px / auto 66% no-repeat,
    url("/theme-packs/sweater-weather/art/table.webp") right 8% bottom 8px / auto 38% no-repeat,
    linear-gradient(180deg, rgba(255, 226, 184, 0.55) 0 1px, #8A6444 1px, #5E4029 100%) left bottom / 100% 10px no-repeat,
    radial-gradient(80% 80% at 0% 100%, rgba(255, 182, 96, 0.32), transparent 70%);
}

/* ── 7. AVATARS: a round window on a rainy evening (Leigh, September 26th,
   2026, replacing the knit ring and the beads) ─────────────────────────────
   The face is seen through a round window: a walnut frame round it (the
   window seat's own walnut, drawn as structure), and over the picture a soft
   pane of the pack's REAL rain-on-window footage (its still, never a video
   per avatar), screened on so only the drops and a faint warm reflection
   show and the face stays clear. Two panes: ::before holds still, ::after
   carries the same glass at another spot and fades in and out, so the drops
   seem to run (opacity only, compositor). Every tier, ambient and expressive;
   micro keeps a thin frame and no glass. The avatar isolates so the panes
   stack against the face, not the card around it. */
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"],
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"] {
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow:
    0 0 0 2px #5E4029,
    0 0 0 3.5px #8A6444,
    0 0 0 4.5px rgba(20, 10, 6, 0.45),
    0 2px 6px 3px rgba(20, 10, 6, 0.3);
}
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="micro"],
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="micro"],
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="micro"] {
  box-shadow: 0 0 0 1.5px #8A6444;
}
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"]::before,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"]::before,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"]::before,
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"]::after,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"]::after,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  -webkit-mask: none;
  mask: none;
  filter: none;
  box-shadow: none;
  transform: none;
  rotate: 0deg;
  translate: 0 0;
  mix-blend-mode: screen;
}
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"]::before,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"]::before,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"]::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 214, 160, 0.22), transparent 42%),
    url("/theme-packs/sweater-weather/art/rain-window-fogged.webp") 30% 40% / auto 150% no-repeat;
  opacity: 0.3;
  animation: none;
}
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"]::after,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"]::after,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"]::after {
  background: url("/theme-packs/sweater-weather/art/rain-window-fogged.webp") 72% 70% / auto 170% no-repeat;
  /* still frame: this pane unseen, the still glass above alone */
  opacity: 0;
  animation: pp-sw-avatar-rain 6s ease-in-out infinite;
}
/* Drops running down the glass (PPAvatar's own flair layer): a few beads
   with their trails, kept inside the middle of the face so a short run never
   leaves the circle, sliding down and fading, then forming again. */
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"] > [data-avatar-flair],
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"] > [data-avatar-flair],
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"] > [data-avatar-flair] {
  inset: 8%;
  z-index: 3;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(3% 4% at 30% 30%, rgba(240, 246, 255, 0.95), transparent 100%),
    linear-gradient(180deg, transparent 0 8%, rgba(214, 228, 244, 0.5) 28%, transparent 29%),
    radial-gradient(2.6% 3.4% at 66% 48%, rgba(240, 246, 255, 0.95), transparent 100%),
    linear-gradient(180deg, transparent 0 22%, rgba(214, 228, 244, 0.45) 46%, transparent 47%),
    radial-gradient(3.2% 4.2% at 48% 16%, rgba(240, 246, 255, 0.9), transparent 100%);
  background-size: 100% 100%, 1.5px 100%, 100% 100%, 1.5px 100%, 100% 100%;
  background-position: 0 0, 30% 0, 0 0, 66% 0, 0 0;
  background-repeat: no-repeat;
  opacity: 0.9; /* still frame: the beads at rest on the glass */
  translate: 0 0;
  animation: pp-sw-avatar-drops-run 4.5s ease-in infinite;
}
@keyframes pp-sw-avatar-drops-run {
  0%   { translate: 0 -6%; opacity: 0; }
  15%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { translate: 0 14%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"] > [data-avatar-flair],
  [data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"] > [data-avatar-flair],
  [data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"] > [data-avatar-flair] { animation: none; }
}
@keyframes pp-sw-avatar-rain {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.26; }
}
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="micro"]::before,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="micro"]::before,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="micro"]::before,
[data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="micro"]::after,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="micro"]::after,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="micro"]::after { content: none; }
html[data-tab-hidden="true"] :is([data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *), [data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"], [data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"])::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme-pack="sweater-weather"] [data-user-avatar]:not([data-deco-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)[data-avatar-tier="regular"]::after,
[data-user-avatar][data-user-avatar][data-theme-pack="sweater-weather"][data-avatar-tier="regular"]::after,
[data-user-avatar][data-user-avatar][data-deco-pack="sweater-weather"][data-avatar-tier="regular"]::after { animation: none; opacity: 0; }
}

/* ── 8. THE SCENE LAYERS (portaled by SweaterWeatherScene) ────────────────── */
/* The window. Its host is prepended into the page column: a zero-height
   sticky strip pinned to the top of the scroll column, so the pane stays in
   place while the page scrolls past in front of it, adding no layout. z -1
   inside the isolated column = on the wall, below every card. */
.pp-sw-window-host {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* A column-tall box that takes no room: the scene sets its height to the
     column's visible height and a matching negative margin, so it adds no
     flow; its own clip keeps the curtains and lights inside the column. */
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
/* String lights across the top of the room (sweater-weather-lights.ts). */
.pp-sw-lights {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  pointer-events: none;
}
/* Weather that lands on the cards (sweater-weather-surfaces.ts): one fixed
   canvas over the page, just above the cards and below the nav. */
.pp-sw-surfaces {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 47;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pp-sw-surfaces { display: none; }
}
/* The pane: a big window across the top of the room's wall, behind the
   page's header, so the rain is the first thing you see. The frame is walnut,
   in pixels, so it holds its weight at any size. The side margins leave room
   for the curtains. */
.pp-sw-room-window {
  --pp-sw-frame: 16px;
  position: absolute;
  top: 44px;
  left: clamp(64px, 7%, 110px);
  right: clamp(64px, 7%, 110px);
  height: clamp(280px, 52vh, 520px);
  border: var(--pp-sw-frame) solid #4B3022;
  border-radius: 6px;
  background: #1B1F1E;
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 160, 0.18),
    0 0 0 1px rgba(20, 10, 6, 0.6),
    0 1px 0 1px rgba(255, 196, 130, 0.14),
    0 18px 40px rgba(10, 5, 3, 0.55);
}
/* Grain on the wood, and a warm catch-light along its top-left edges. */
.pp-sw-room-window::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--pp-sw-frame));
  border-radius: 6px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 200, 140, 0.22) 0%, rgba(255, 200, 140, 0) 30%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, rgba(0, 0, 0, 0) 1px 5px);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  padding: var(--pp-sw-frame);
  z-index: 2;
}
/* The sill of the window itself: a deeper ledge under the pane. */
.pp-sw-room-window::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--pp-sw-frame) - 14px);
  right: calc(-1 * var(--pp-sw-frame) - 14px);
  bottom: calc(-1 * var(--pp-sw-frame) - 12px);
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7A5238 0%, #5A3A28 40%, #3E271B 100%);
  box-shadow: 0 8px 16px rgba(10, 5, 3, 0.5);
  z-index: 3;
}
.pp-sw-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The footage under the canvas; the canvas covers it and reads its frames. */
.pp-sw-view-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pp-sw-window-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}
/* Mullions: a cross of walnut over the glass. */
.pp-sw-mullion {
  position: absolute;
  background: linear-gradient(90deg, #5A3A28, #4B3022 50%, #3A2418);
  box-shadow: 0 0 0 1px rgba(20, 10, 6, 0.4), 2px 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.pp-sw-mullion--v { top: 0; bottom: 0; left: calc(33.33% - 5px); width: 10px; }
.pp-sw-mullion--v2 { top: 0; bottom: 0; left: calc(66.66% - 5px); width: 10px; }
.pp-sw-mullion--h { left: 0; right: 0; top: calc(46% - 5px); height: 10px; background: linear-gradient(180deg, #5A3A28, #4B3022 50%, #3A2418); }
/* The rod, and the curtains gathered either side. */
.pp-sw-rod {
  position: absolute;
  left: calc(-1 * var(--pp-sw-frame) - 60px);
  right: calc(-1 * var(--pp-sw-frame) - 60px);
  top: calc(-1 * var(--pp-sw-frame) - 20px);
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(180deg, #A8794E, #6E4A2E);
  box-shadow: 0 3px 6px rgba(10, 5, 3, 0.5);
  z-index: 5;
}
.pp-sw-curtain {
  position: absolute;
  top: calc(-1 * var(--pp-sw-frame) - 18px);
  bottom: calc(-1 * var(--pp-sw-frame) - 46px);
  width: auto;
  height: calc(100% + 2 * var(--pp-sw-frame) + 64px);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(10, 5, 3, 0.5));
}
/* Each curtain hangs half over the frame, gathered back from the glass. */
.pp-sw-curtain--left { left: calc(-1 * var(--pp-sw-frame)); transform: translateX(-58%); }
.pp-sw-curtain--right { right: calc(-1 * var(--pp-sw-frame)); transform: translateX(58%); }

@media (max-width: 720px) {
  .pp-sw-room-window {
    --pp-sw-frame: 10px;
    top: 30px;
    left: 40px;
    right: 40px;
    height: 34vh;
  }
  .pp-sw-mullion--v2 { display: none; }
  .pp-sw-mullion--v { left: calc(50% - 4px); width: 8px; }
  .pp-sw-rod { left: -46px; right: -46px; }
}

/* The floor of the room. Fixed to the bottom of the viewport, over the page
   like every pack's floor. It never catches a click, except on the cat.
   Every picture on it is an art slot (components/shell/sweater-weather-art.ts);
   what this CSS owns is the ledge, the layout and the effects. */
.pp-sw-sill {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pp-sw-floor-h, clamp(120px, 20vh, 196px));
  pointer-events: none;
  z-index: 46;
}
/* Inside a member's modal the floor is all of the scene (no window), and it
   stays inside the clearance the scope publishes (96px, plus the info
   column's own 24px foot): a compact seat, so the seat art, which rises to
   150% of the floor, still tops out under the column's last row. Declared on
   the element, so it wins over the page's breakpoint values on <html>. */
.pp-sw-sill.is-scoped {
  position: absolute;
  --pp-sw-floor-h: 80px;
  --pp-sw-seat-top: 24px;
  --pp-sw-seat-front: 12px;
}
.pp-sw-sill img { display: block; user-select: none; pointer-events: none; }
/* The lamp's warm pool on the floor, lower left. */
.pp-sw-sill__pool {
  position: absolute;
  left: -10%;
  bottom: -40%;
  width: 70%;
  height: 160%;
  background: radial-gradient(closest-side, rgba(255, 176, 92, 0.22), rgba(255, 176, 92, 0));
}
/* THE WINDOW SEAT, in perspective: a lit walnut TOP receding from you (its
   back edge darker, a sheen where the lamp catches it, fine grain running
   along it) and a darker FRONT face with a highlight on its nosing. Objects
   stand on the top face; their contact shadows sit on it. */
.pp-sw-sill__ledge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pp-sw-seat-top, 34px);
  margin-bottom: var(--pp-sw-seat-front, 16px);
  background:
    radial-gradient(60% 180% at 12% 100%, rgba(255, 196, 120, 0.3), rgba(255, 196, 120, 0) 70%),
    repeating-linear-gradient(0deg, rgba(40, 20, 8, 0.07) 0 1px, rgba(0, 0, 0, 0) 1px 3px, rgba(255, 220, 170, 0.04) 3px 4px, rgba(0, 0, 0, 0) 4px 7px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 210px, rgba(30, 14, 6, 0.12) 210px 212px, rgba(0, 0, 0, 0) 212px 470px),
    linear-gradient(180deg, #4A2F1F 0%, #6B4630 45%, #8A5E3F 100%);
  z-index: 1;
}
/* The front face and its nosing. */
.pp-sw-sill__ledge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--pp-sw-seat-front, 16px);
  background:
    linear-gradient(180deg, rgba(255, 214, 160, 0.55) 0 1.5px, rgba(0, 0, 0, 0) 1.5px),
    linear-gradient(90deg, rgba(255, 186, 110, 0.18), rgba(255, 186, 110, 0) 45%),
    linear-gradient(180deg, #5A3A27 0%, #3E271A 60%, #2A1911 100%);
  box-shadow: inset 0 -6px 10px rgba(10, 5, 2, 0.45);
}
/* Where the seat meets the wall behind it: a soft shadow line. */
.pp-sw-sill__ledge::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 22px;
  background: linear-gradient(0deg, rgba(10, 5, 2, 0.35), rgba(10, 5, 2, 0));
}

/* Objects stand on the seat top, a little in from its back edge. */
/* Objects stand IN the top plane: their bases sit at 45% of its depth, well
   behind the front edge, so the lit wood shows in front of every base. */
.pp-sw-seat,
.pp-sw-table {
  --pp-sw-stand: calc(var(--pp-sw-seat-front, 16px) + var(--pp-sw-seat-top, 34px) * 0.45);
}

/* Bottom left: the corner, three aligned layers. The plaid falls to the
   left and slightly over the seat's front edge. */
.pp-sw-seat {
  position: absolute;
  left: -2%;
  bottom: calc(var(--pp-sw-stand) - 4px);
  height: calc(150% - var(--pp-sw-stand));
  aspect-ratio: 2220 / 1422;
  z-index: 2;
}
/* The contact shadows are BAKED into the art (room.cjs, `ground`): drawn
   along each object's own bottom contour, so the shadow meets the base in
   every column and no gap can open. Each image carries a few rows of shadow
   under its base, so it is pulled down by exactly that much: the BASE, not
   the shadow, sits on the seat's top face. */
.pp-sw-seat { transform: translateY(1.55%); }
.pp-sw-seat__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pp-sw-seat__cat {
  transform-origin: 44% 59%;
  transform: scale(1, 1);   /* still frame: resting between breaths */
  animation: pp-sw-breathe 4.2s ease-in-out infinite;
}
@keyframes pp-sw-breathe {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(1.006, 1.018); }
}
/* The cat's hover target; the only thing on the floor that takes the pointer. */
.pp-sw-cat {
  position: absolute;
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
}

/* Bottom right: books with the mug (one composed image), the candle beside. */
.pp-sw-table {
  position: absolute;
  right: clamp(28px, 4.5vw, 72px);
  bottom: var(--pp-sw-stand);
  /* Real-world scale against the cat: the mug about the size of her head,
     the books about half her length. Taller than the floor band; it only
     needs to stand on the seat. */
  height: calc(96% - var(--pp-sw-stand));
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.2vw, 18px);
  z-index: 2;
}
.pp-sw-table__books {
  position: relative;
  height: 100%;
  aspect-ratio: 760 / 665;
}
.pp-sw-table__img { position: relative; width: 100%; height: 100%; z-index: 1; }
.pp-sw-table__books { transform: translateY(2.41%); }
.pp-sw-candle {
  position: relative;
  height: 44%;
  aspect-ratio: 300 / 461;
}
.pp-sw-candle__img { position: relative; width: 100%; height: 100%; z-index: 1; transform: translateY(3.04%); }
/* The candle's light: a warm pool centred on its flame, breathing. */
.pp-sw-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 116, 0.72), rgba(255, 168, 86, 0.26) 38%, rgba(255, 160, 80, 0.08) 68%, rgba(255, 160, 80, 0));
  mix-blend-mode: screen;
  opacity: 0.85;            /* still frame */
  animation: pp-sw-glow 2.8s ease-in-out infinite;
  pointer-events: none;
}
.pp-sw-glow--candle { left: -140%; top: -120%; width: 380%; aspect-ratio: 1; z-index: 2; }
@keyframes pp-sw-glow {
  0%, 100% { opacity: 0.85; }
  22%      { opacity: 0.72; }
  48%      { opacity: 0.94; }
  74%      { opacity: 0.78; }
}
/* Steam: real footage, keyed to warm light on a canvas above the mug. */
/* One narrow column the width of the mug's mouth, rising ~1.8x the mug's
   height; its feathered base starts just inside the rim. */
.pp-sw-steam {
  position: absolute;
  bottom: 93%;
  aspect-ratio: 0.44;
  opacity: 0.6;
  /* A breath of cocoa under the vapour, so pale steam still reads against a
     cream card behind it (it is lit from the room, not drawn on the card). */
  filter: drop-shadow(0 0 2px rgba(80, 50, 30, 0.55));
  z-index: 2;
  pointer-events: none;
}
html[data-tab-hidden="true"] :is(.pp-sw-glow, .pp-sw-seat__cat) { animation-play-state: paused; }

/* Lamp light pooling from the lower-left corner of the room, over the frame
   and the sill (the canvas carries its reflection on the glass). One static
   gradient layer; no blend mode, so it costs nothing per frame. */
.pp-sw-lamp {
  position: fixed;
  left: 0;
  bottom: 0;
  width: min(62vw, 900px);
  height: min(80vh, 760px);
  pointer-events: none;
  z-index: 45;
  background: radial-gradient(closest-corner at 0% 100%, rgba(255, 182, 96, 0.20) 0%, rgba(255, 182, 96, 0.08) 45%, rgba(255, 182, 96, 0) 100%);
  background-size: 200% 200%;
  background-position: 0 100%;
}

/* Below 1280px the shell shows its fixed bottom nav: the floor stands ON it,
   never behind it, and is a smaller room. The lamp wash is desktop only. */
@media (max-width: 1279px) {
  html[data-theme-pack="sweater-weather"][data-theme-pack] { --pp-sw-floor-h: clamp(90px, 14vh, 130px); --pp-sw-seat-top: 24px; --pp-sw-seat-front: 12px; }
}
/* The shell's own bottom-nav offset (globals.css), under the same conditions
   the bar shows: narrow, or a short viewport. */
@media (max-width: 1279px), (max-height: 559px) {
  .pp-sw-sill:not(.is-scoped) { bottom: var(--pp-bottom-nav-collapse, 0px); }
}
@media (max-width: 720px), (pointer: coarse) {
  .pp-sw-lamp { display: none; }
  /* On a phone the floor sits on the window's ledge, in the room: the cat and
     blankets at the left end, the mug and candle at the right. */
  .pp-sw-sill.is-in-room {
    position: absolute;
    left: -30px;
    right: -30px;
    bottom: calc(-1 * var(--pp-sw-frame) - 10px);
    height: 84px;
    z-index: 6;
  }
  .pp-sw-sill.is-in-room .pp-sw-sill__ledge,
  .pp-sw-sill.is-in-room .pp-sw-sill__pool { display: none; }
  .pp-sw-sill.is-in-room :is(.pp-sw-seat, .pp-sw-table) { --pp-sw-stand: 0px; }
  .pp-sw-sill.is-in-room .pp-sw-seat { bottom: 0; height: 120%; left: 0; }
  .pp-sw-sill.is-in-room .pp-sw-table { bottom: 0; height: 100%; right: 0; }
  /* The hero's copy runs over this ledge on a phone, so these pieces sit in
     the room's shade: dim enough that the cream ink over the palest blanket
     still clears AA. The candle keeps its own light. */
  .pp-sw-sill.is-in-room :is(.pp-sw-seat, .pp-sw-table__books) { filter: brightness(0.5) saturate(0.9); }
  .pp-sw-sill.is-in-room .pp-sw-cat { pointer-events: none; }
  html[data-theme-pack="sweater-weather"][data-theme-pack] { --pp-sw-floor-h: 92px; --pp-sw-sill-h: 10px; }
}
/* A page with no shell column (the horse detail pages) has no bottom nav, so
   the fixed floor stands on the viewport's true bottom, not 51px above it
   over the page's own floating controls. */
.pp-sw-floor-shellless > .pp-sw-sill:not(.is-scoped) { bottom: 0; }
/* ...and on a phone it has no room either: the floor sits at the page's own
   floor, the foot of the footer, inside the clearance the footer reserves
   for it (--pp-sw-floor-pad), so it never covers the page. A zero-height
   anchor after the copyright bar; the seat stands on the footer's bottom
   edge. No lamp pool here: it would hang below the footer and add scroll. */
.pp-sw-footer-floor {
  position: relative;
  height: 0;
  pointer-events: none;
}
.pp-sw-footer-floor > .pp-sw-sill {
  position: absolute;
  top: auto;
  bottom: 0;
  z-index: 0;
}
.pp-sw-footer-floor .pp-sw-sill__pool { display: none; }
/* While the footer waits for the page to settle its rows are gone and it has
   no height, so the floor would stand on the page's last card. It waits too. */
footer[data-component="SiteFooter"]:not([data-settled]) > .pp-sw-footer-floor { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pp-sw-glow, .pp-sw-seat__cat { animation: none; }
}

/* ── 9. NESTED-BOUNDARY GUARD ──────────────────────────────────────────────
   Every card rule in this file excludes a foreign scope in its own selector:
   each descendant arm (horse cards AND entity cards, the bead and the leaf
   included) carries `:not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *)`,
   and each self arm names this pack. Nothing here needs undoing, and no
   reset here touches another pack's card. */

/* ── THE SMALLER CARDS: the name steps down to 18px/1.3 (the D-721 contract:
   the box never moves, the face fits it). Both guard arms. ── */
:is(
  [data-theme-pack="sweater-weather"] [data-component="EntityCard"]:is([data-size="micro"], [data-size="small"]):not([data-theme-pack]):not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *),
  [data-component="EntityCard"]:is([data-size="micro"], [data-size="small"])[data-theme-pack="sweater-weather"]
),
[data-theme-pack="sweater-weather"] .horse-card[data-card-size="small"]:not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *) {
  --pp-card-name-font: 400 18px/1.3 var(--font-short-stack);
}
/* The shop card's title sets the pack name in the h2 marker hand, which is
   wide: "Sweater Weather" ellipsized at 28px in a shop card column (276px of
   text in 247px). 22px fits it whole, with room to spare, at the shop's three-column width. The
   title rule is the shop's own (.pp-shop-card-name), so it is named here. */
.pp-shop-card[data-theme-pack="sweater-weather"] .pp-shop-card-name {
  font-size: 22px;
}

/* Page headings in the marker hand are lowercase, with a soft cocoa outline
   drawn behind the ink (paint-order), as the pack's first design had them.
   Page chrome only (the column's own headings): never a card's, never a
   foreign pack's. */
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) :is(h1, h2, h3, h4).text-on-default:not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *) {
  text-transform: lowercase;
  paint-order: stroke fill;
  -webkit-text-stroke: 3px rgba(34, 20, 12, 0.85);
}
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) :is(h3, h4).text-on-default:not([data-theme-pack="sweater-weather"] [data-theme-pack]:not([data-theme-pack="sweater-weather"]) *) {
  -webkit-text-stroke-width: 2px;
}
html[data-theme-pack="sweater-weather"] :is(#main-content, [data-staff-main]) [data-theme-pack]:not([data-theme-pack="sweater-weather"]) :is(h1, h2, h3, h4) {
  text-transform: none;
  -webkit-text-stroke: 0;
}

/* Frosted glass costs a blur per frame; a viewer who asks for less
   transparency or less motion gets the same panes, flat. */
@media (prefers-reduced-transparency: reduce), (prefers-reduced-motion: reduce) {
  html[data-theme-pack="sweater-weather"] .shell-leftrail-row,
  html[data-theme-pack="sweater-weather"] .toprail-nav-item::before,
  html[data-theme-pack="sweater-weather"] [data-component="PPSearchInput"] :is([style*="cards-on-default"], [style*="cards-on-accent"]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The horse page's stage cards (horse-hero.tsx) set their value in the h2
 * face on one line with an ellipsis, inside a 320px card. Short Stack is a
 * wide face, and at the pack's 28px h2 a full date ("September 9th, 2026")
 * ran 52px past the card. 23px fits it; the phone layout's own body-size
 * values are left alone. */
[data-theme-pack="sweater-weather"] .v5-card-value:not(.v5-stage-mobile-cards .v5-card-value) {
  font-size: 23px;
}