/*!
 * Ask Ayce motion layer, v1.0 (2026-10-13). Optional, on top of ask-ayce.css and ask-ayce.js.
 * Generated file: edit build/ask-ayce-motion.src.css, then run build/build_motion.py (or build_all.sh).
 *
 * Paper craft, calm timing: torn edges, taped notes, arch frames, a pencil that draws once.
 * Rules this file keeps:
 *   - Only transform, translate, rotate, scale and opacity animate (plus clip-path for the note
 *     hero write-on and the stroke reveal inside doodle masks). Nothing changes layout, so CLS stays 0.
 *   - Nothing is hidden unless <html> has the .aa-motion class, which a one-line head script adds only
 *     when the visitor has not asked for reduced motion. With JS off, everything shows, settled.
 *   - prefers-reduced-motion, [data-aa-motion="reduce"] (a preview switch on any subtree) and
 *     .aa-motion-settled (exports) all show the same settled, static state.
 *   - Lemon budget: the motion layer adds no lemon of its own. Tape is never lemon. The only lemon
 *     part is .aa-tear--lemon, which is the torn edge of a lemon ground and belongs to that ground.
 * Components: .aa-note-hero  .aa-tear  .aa-band  .aa-plate  .aa-arch-card  .aa-grid-reveal / .aa-tile
 *             .aa-draw  .aa-swipe--animate  .aa-sticky--drop  .aa-tape, plus button and link polish
 *             and cross-document view transitions.
 */

/* ------------------------------------------------------------------ motion tokens */
:root {
  --aa-motion-quick: 220ms;      /* hover, focus, press */
  --aa-motion-calm: 300ms;       /* color and shadow changes */
  --aa-motion-reveal: 560ms;     /* things arriving on scroll */
  --aa-motion-stagger: 70ms;     /* between neighbours in a grid */
  --aa-ease-soft: cubic-bezier(.25, .8, .25, 1);
  --aa-ease-settle: cubic-bezier(.3, 1.35, .5, 1);   /* a small overshoot, like paper landing */
  --aa-ease-pencil: cubic-bezier(.45, .05, .35, 1);
  --aa-tape-bg: #DAD5C6;         /* the dot color: tape is never lemon (rule 24) */
  --aa-tear-fiber: var(--aa-white);
  --aa-photo-plate: var(--aa-moss);
}
[data-theme="dark"] { --aa-tear-fiber: rgb(251 248 239 / .22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --aa-tear-fiber: rgb(251 248 239 / .22); } }

/* torn edge masks, written by build_motion.py */
:root {
  --aa-tear-top: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 28%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 28 L0.0 13.6 L12.4 12.0 L21.5 13.6 L27.9 12.9 L38.0 16.6 L43.7 10.8 L49.5 17.0 L60.0 7.5 L72.9 17.6 L83.1 12.3 L89.3 4.3 L98.6 3.7 L105.1 5.3 L110.3 7.6 L118.9 11.9 L128.0 9.8 L137.0 10.9 L145.7 7.6 L158.7 18.7 L170.4 17.5 L177.9 13.0 L185.2 12.0 L196.3 16.8 L208.1 16.8 L220.8 21.7 L225.8 13.7 L238.1 16.1 L250.9 14.8 L256.5 17.6 L267.7 13.7 L273.4 14.8 L286.1 20.8 L292.1 15.0 L297.9 13.0 L309.3 14.5 L318.7 17.2 L325.3 19.9 L331.3 17.9 L337.2 14.3 L343.9 11.2 L356.7 15.0 L364.1 14.7 L370.8 7.8 L382.7 9.8 L388.5 13.8 L395.2 5.2 L406.3 6.8 L413.7 4.5 L419.4 11.3 L426.4 12.3 L434.4 11.4 L447.0 12.6 L456.6 17.4 L463.1 8.8 L475.4 16.4 L482.4 8.6 L493.3 17.4 L499.8 17.7 L511.9 14.3 L520.3 9.2 L525.6 20.3 L532.5 18.3 L539.5 21.0 L549.3 16.2 L555.7 22.3 L561.3 16.9 L570.7 25.0 L580.7 18.0 L593.0 16.0 L598.1 16.1 L606.7 12.2 L613.1 14.8 L622.7 10.4 L630.6 18.5 L640.0 13.6 L640 28Z%22/%3E%3C/svg%3E");
  --aa-tear-bottom: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 28%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 L0.0 14.4 L12.4 16.0 L21.5 14.4 L27.9 15.1 L38.0 11.4 L43.7 17.2 L49.5 11.0 L60.0 20.5 L72.9 10.4 L83.1 15.7 L89.3 23.7 L98.6 24.3 L105.1 22.7 L110.3 20.4 L118.9 16.1 L128.0 18.2 L137.0 17.1 L145.7 20.4 L158.7 9.3 L170.4 10.5 L177.9 15.0 L185.2 16.0 L196.3 11.2 L208.1 11.2 L220.8 6.3 L225.8 14.3 L238.1 11.9 L250.9 13.2 L256.5 10.4 L267.7 14.3 L273.4 13.2 L286.1 7.2 L292.1 13.0 L297.9 15.0 L309.3 13.5 L318.7 10.8 L325.3 8.1 L331.3 10.1 L337.2 13.7 L343.9 16.8 L356.7 13.0 L364.1 13.3 L370.8 20.2 L382.7 18.2 L388.5 14.2 L395.2 22.8 L406.3 21.2 L413.7 23.5 L419.4 16.7 L426.4 15.7 L434.4 16.6 L447.0 15.4 L456.6 10.6 L463.1 19.2 L475.4 11.6 L482.4 19.4 L493.3 10.6 L499.8 10.3 L511.9 13.7 L520.3 18.8 L525.6 7.7 L532.5 9.7 L539.5 7.0 L549.3 11.8 L555.7 5.7 L561.3 11.1 L570.7 3.0 L580.7 10.0 L593.0 12.0 L598.1 11.9 L606.7 15.8 L613.1 13.2 L622.7 17.6 L630.6 9.5 L640.0 14.4 L640 0Z%22/%3E%3C/svg%3E");
  --aa-tear-top-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 28%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 28 L0.0 13.1 L12.1 3.7 L21.9 7.8 L31.1 5.6 L37.7 9.8 L44.4 11.0 L49.6 7.9 L60.3 13.3 L69.4 18.0 L77.3 11.6 L88.5 17.9 L98.8 18.0 L111.6 14.2 L122.6 12.9 L132.2 14.8 L139.7 7.7 L148.5 13.8 L158.3 10.3 L168.4 7.4 L174.8 9.0 L186.3 7.9 L192.3 7.0 L197.6 9.0 L207.2 14.7 L214.8 9.5 L222.1 8.2 L233.3 9.6 L240.4 3.9 L251.7 8.9 L263.3 2.7 L272.7 9.6 L282.4 10.0 L288.7 10.7 L294.2 5.2 L299.4 10.1 L309.9 13.5 L321.3 15.2 L330.6 17.0 L341.6 11.3 L354.4 12.3 L361.0 9.1 L369.7 10.2 L382.2 17.8 L388.9 8.4 L398.1 8.9 L407.5 16.0 L414.5 12.0 L426.7 13.1 L434.4 18.7 L445.9 19.6 L456.4 14.9 L467.0 19.3 L477.1 12.2 L484.5 13.2 L495.6 13.0 L505.0 14.2 L510.9 11.1 L518.6 9.0 L530.3 4.2 L542.9 1.7 L552.4 6.8 L559.2 7.4 L568.0 6.8 L578.8 2.9 L586.8 11.9 L592.9 13.1 L599.5 11.3 L605.9 8.9 L614.3 4.8 L624.9 8.6 L635.4 8.8 L640.0 13.1 L640 28Z%22/%3E%3C/svg%3E");
  --aa-tear-bottom-2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 640 28%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 L0.0 14.9 L12.1 24.3 L21.9 20.2 L31.1 22.4 L37.7 18.2 L44.4 17.0 L49.6 20.1 L60.3 14.7 L69.4 10.0 L77.3 16.4 L88.5 10.1 L98.8 10.0 L111.6 13.8 L122.6 15.1 L132.2 13.2 L139.7 20.3 L148.5 14.2 L158.3 17.7 L168.4 20.6 L174.8 19.0 L186.3 20.1 L192.3 21.0 L197.6 19.0 L207.2 13.3 L214.8 18.5 L222.1 19.8 L233.3 18.4 L240.4 24.1 L251.7 19.1 L263.3 25.3 L272.7 18.4 L282.4 18.0 L288.7 17.3 L294.2 22.8 L299.4 17.9 L309.9 14.5 L321.3 12.8 L330.6 11.0 L341.6 16.7 L354.4 15.7 L361.0 18.9 L369.7 17.8 L382.2 10.2 L388.9 19.6 L398.1 19.1 L407.5 12.0 L414.5 16.0 L426.7 14.9 L434.4 9.3 L445.9 8.4 L456.4 13.1 L467.0 8.7 L477.1 15.8 L484.5 14.8 L495.6 15.0 L505.0 13.8 L510.9 16.9 L518.6 19.0 L530.3 23.8 L542.9 26.3 L552.4 21.2 L559.2 20.6 L568.0 21.2 L578.8 25.1 L586.8 16.1 L592.9 14.9 L599.5 16.7 L605.9 19.1 L614.3 23.2 L624.9 19.4 L635.4 19.2 L640.0 14.9 L640 0Z%22/%3E%3C/svg%3E");
  --aa-tape-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 40%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M2.0 0 L198.0 0 L198.4 4 L199.2 8 L196.7 12 L199.6 16 L197.3 20 L198.2 24 L199.7 28 L197.5 32 L199.8 36 L198.0 40 L2.0 40 L2.2 36 L0.3 32 L0.5 28 L2.1 24 L4.1 20 L0.6 16 L1.1 12 L3.1 8 L4.7 4Z%22/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ 9. buttons + links, calmer */
.aa-btn {
  transition: transform var(--aa-motion-quick) var(--aa-ease-soft),
              box-shadow var(--aa-motion-quick) var(--aa-ease-soft),
              background-color var(--aa-motion-calm) ease,
              border-color var(--aa-motion-calm) ease,
              color var(--aa-motion-calm) ease,
              outline-offset var(--aa-motion-quick) var(--aa-ease-soft);
}
.aa-btn:focus-visible { outline-offset: 5px; }
.aa-btn--secondary:hover, .aa-btn--ghost:hover { transform: translate(0, -1px); }
.aa-btn--secondary:active, .aa-btn--ghost:active { transform: translate(0, 1px); }
.aa-btn .aa-icon { transition: transform var(--aa-motion-quick) var(--aa-ease-soft); }
.aa-btn:hover .aa-icon:last-child { transform: translateX(3px); }
a:not([class]), .aa-nav__link, .aa-footer a {
  transition: text-decoration-thickness var(--aa-motion-quick) ease, text-underline-offset var(--aa-motion-quick) ease, color var(--aa-motion-calm) ease, background-color var(--aa-motion-calm) ease;
}
a:not([class]):hover { text-underline-offset: 6px; }
.aa-linkbio__btn, .aa-social a, .aa-post-card, .aa-series-card, .aa-chip {
  transition: transform var(--aa-motion-quick) var(--aa-ease-soft), box-shadow var(--aa-motion-quick) var(--aa-ease-soft),
              background-color var(--aa-motion-calm) ease, color var(--aa-motion-calm) ease;
}

/* ------------------------------------------------------------------ tape (shared) */
.aa-tape {
  position: absolute; z-index: 3;
  width: var(--aa-tape-w, 150px); height: var(--aa-tape-h, 34px);
  background-color: var(--aa-tape-bg);
  background-image: repeating-linear-gradient(-58deg, rgb(255 255 255 / .38) 0 7px, transparent 7px 15px);
  -webkit-mask: var(--aa-tape-mask) center / 100% 100% no-repeat;
          mask: var(--aa-tape-mask) center / 100% 100% no-repeat;
  opacity: .92;
  pointer-events: none;
}

/* ------------------------------------------------------------------ stand-in photo plate */
/* Until real photos exist. The label says what goes there; nothing else. */
.aa-plate {
  position: relative; display: grid; place-items: center; width: 100%; height: 100%;
  background-color: var(--aa-photo-plate);
  background-image: radial-gradient(120% 90% at 30% 20%, rgb(251 248 239 / .16), transparent 60%),
                    radial-gradient(90% 80% at 85% 90%, rgb(43 42 40 / .35), transparent 70%);
  color: var(--aa-paper);
  overflow: hidden;
}
.aa-plate .aa-illo { position: absolute; width: min(42%, 340px); right: 8%; bottom: 10%; color: rgb(251 248 239 / .34); opacity: .9; }
.aa-plate .aa-illo path[fill] { fill: rgb(251 248 239 / .08); }   /* no lemon on a stand-in: it would spend the lemon budget */
.aa-plate__label {
  position: absolute; left: 6%; bottom: 12%; max-width: 30ch;
  font-family: var(--aa-font-notes); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; color: var(--aa-paper);
}
.aa-band .aa-plate__label { top: 22%; bottom: auto; }
.aa-plate img, .aa-plate video { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ 2. torn paper edges */
.aa-tear {
  --aa-tear-h: clamp(16px, 2.2vw, 28px);
  --aa-tear-fill: var(--aa-color-bg-page);
  --aa-tear-w: calc(var(--aa-tear-h) * 16);
  --aa-tear-drift: 3px;
  position: relative; z-index: 2;
  display: block; height: var(--aa-tear-h);
  pointer-events: none;
  view-timeline-name: --aa-tear;
}
.aa-tear::before, .aa-tear::after { content: ""; position: absolute; left: 0; right: 0; }
.aa-tear::after { background: var(--aa-tear-fill); }
.aa-tear::before { background: var(--aa-tear-fiber); display: none; }
/* --top: the edge on top of a section. Solid below, torn on top. It overlaps the block above it. */
.aa-tear--top { margin-top: calc(-1 * var(--aa-tear-h)); }
.aa-tear--top::after, .aa-tear--top::before {
  top: 0; bottom: -10px;
  -webkit-mask: var(--aa-tear-top) left top / var(--aa-tear-w) var(--aa-tear-h) repeat-x, linear-gradient(#000 0 0) left bottom / 100% 11px no-repeat;
          mask: var(--aa-tear-top) left top / var(--aa-tear-w) var(--aa-tear-h) repeat-x, linear-gradient(#000 0 0) left bottom / 100% 11px no-repeat;
}
/* --bottom: the edge under a section. Solid above, torn below. It overlaps the block after it. */
.aa-tear--bottom { margin-bottom: calc(-1 * var(--aa-tear-h)); }
.aa-tear--bottom::after, .aa-tear--bottom::before {
  top: -10px; bottom: 0;
  -webkit-mask: var(--aa-tear-bottom) left bottom / var(--aa-tear-w) var(--aa-tear-h) repeat-x, linear-gradient(#000 0 0) left top / 100% 11px no-repeat;
          mask: var(--aa-tear-bottom) left bottom / var(--aa-tear-w) var(--aa-tear-h) repeat-x, linear-gradient(#000 0 0) left top / 100% 11px no-repeat;
}
/* --double: the white fiber core of torn paper peeks past the edge, on its own layer. */
.aa-tear--double::before { display: block; }
.aa-tear--double.aa-tear--top::before { translate: 0 -3px; -webkit-mask-image: var(--aa-tear-top-2), linear-gradient(#000 0 0); mask-image: var(--aa-tear-top-2), linear-gradient(#000 0 0); }
.aa-tear--double.aa-tear--bottom::before { translate: 0 3px; -webkit-mask-image: var(--aa-tear-bottom-2), linear-gradient(#000 0 0); mask-image: var(--aa-tear-bottom-2), linear-gradient(#000 0 0); }
/* --lemon: only as the torn edge of a lemon ground (a lemon section such as the Friday feature).
   It is that ground, not an accent, so it adds nothing to the lemon budget. Never on its own. */
.aa-tear--lemon { --aa-tear-fill: var(--aa-lemon); }
.aa-tear--surface { --aa-tear-fill: var(--aa-color-bg-surface); }
.aa-tear--charcoal { --aa-tear-fill: var(--aa-charcoal); }
.aa-tear--flip::before, .aa-tear--flip::after { scale: -1 1; }

/* ------------------------------------------------------------------ 3. photo bands */
.aa-band {
  position: relative; z-index: 0; margin: 0;
  height: var(--aa-band-h, clamp(220px, 34vw, 460px));
  overflow: hidden;
  background: var(--aa-photo-plate);
  view-timeline-name: --aa-band;
}
.aa-band__media { position: absolute; left: 0; right: 0; top: -14%; bottom: -14%; }
.aa-band__media > img, .aa-band__media > .aa-plate { width: 100%; height: 100%; object-fit: cover; }
.aa-band--short { --aa-band-h: clamp(180px, 24vw, 320px); }
/* fixed: the photo stays put while the page slides over it, like a window. No background-attachment,
   so it also works on phones. Reduced motion turns it into a still crop. */
.aa-band--fixed { clip-path: inset(0); }
.aa-band--fixed .aa-band__media { position: fixed; top: 0; bottom: auto; height: 100vh; }

/* ------------------------------------------------------------------ 1. note hero */
.aa-note-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(600px, 88vh, 860px);
  display: grid; align-items: center;
  padding-block: clamp(96px, 12vw, 140px) clamp(72px, 9vw, 120px);
  background: var(--aa-photo-plate);
  color: var(--aa-charcoal);
}
.aa-note-hero__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.aa-note-hero__media { position: absolute; left: 0; right: 0; top: -10%; bottom: -10%; view-timeline-name: --aa-hero; }
.aa-note-hero__media > img, .aa-note-hero__media > .aa-plate { width: 100%; height: 100%; object-fit: cover; }
.aa-note-hero__media .aa-plate__label { left: auto; right: 6%; bottom: 18%; text-align: right; }
.aa-note-hero__media .aa-plate .aa-illo { right: auto; left: 54%; bottom: 18%; }
.aa-note-hero__inner { position: relative; }
.aa-note-hero__wrap {
  position: relative; max-width: 600px;
  filter: drop-shadow(0 16px 22px rgb(43 42 40 / .30)) drop-shadow(0 2px 3px rgb(43 42 40 / .18));
}
.aa-note-hero__card {
  --aa-note-tear: 22px;
  position: relative;
  padding: clamp(44px, 5vw, 60px) clamp(24px, 4vw, 48px) calc(var(--aa-note-tear) + clamp(32px, 4vw, 48px));
  background-color: var(--aa-paper);
  background-image: radial-gradient(var(--aa-dot) 1.2px, transparent 1.6px);
  background-size: var(--aa-dot-pitch) var(--aa-dot-pitch);
  color: var(--aa-charcoal);
  rotate: -.8deg;
  -webkit-mask: linear-gradient(#000 0 0) left top / 100% calc(100% - var(--aa-note-tear) + 1px) no-repeat,
                var(--aa-tear-bottom) left bottom / calc(var(--aa-note-tear) * 16) var(--aa-note-tear) repeat-x;
          mask: linear-gradient(#000 0 0) left top / 100% calc(100% - var(--aa-note-tear) + 1px) no-repeat,
                var(--aa-tear-bottom) left bottom / calc(var(--aa-note-tear) * 16) var(--aa-note-tear) repeat-x;
}
.aa-note-hero__tape { --aa-tape-w: 168px; --aa-tape-h: 38px; left: 50%; top: -16px; translate: -50% 0; rotate: -3deg; }
.aa-note-hero__kicker { font-size: clamp(22px, 2vw, 28px); }
.aa-note-hero__title { font-size: clamp(54px, 6.4vw, 92px); line-height: .9; margin-bottom: var(--aa-space-24); }
.aa-note-hero__note { font-family: var(--aa-font-notes); font-size: clamp(21px, 1.9vw, 25px); line-height: 1.32; }
.aa-note-hero__line { display: block; }
.aa-note-hero__line + .aa-note-hero__line { margin-top: 4px; }
.aa-note-hero__line .aa-slot { font-family: var(--aa-font-body); font-size: .72em; font-weight: 700; background: rgb(43 42 40 / .07); border-radius: 4px; padding: 0 4px; }
.aa-note-hero__sign { display: flex; align-items: center; gap: 12px; margin-top: var(--aa-space-24); }
.aa-note-hero__ami { width: 64px; flex: none; }
.aa-note-hero__name { font-family: var(--aa-font-notes); font-size: 32px; line-height: 1; }
.aa-note-hero__sign .aa-doodle { width: 34px; color: var(--aa-charcoal); }
.aa-note-hero__actions { display: flex; flex-wrap: wrap; gap: var(--aa-space-16); margin-top: var(--aa-space-32); }
/* the card is paper in both themes: keep the swipe and the plain ami on it when the page is dark */
[data-theme="dark"] .aa-note-hero__card .aa-swipe::before { display: block; }
[data-theme="dark"] .aa-note-hero__card .aa-swipe { color: var(--aa-charcoal); }
.aa-note-hero__card { --aa-color-focus-ring: var(--aa-charcoal); --aa-color-text-link: var(--aa-charcoal); }
@media (max-width: 767px) {
  .aa-note-hero { align-items: end; padding-top: 200px; min-height: 0; }
  .aa-note-hero__media .aa-plate__label { top: 13%; bottom: auto; left: 6%; right: auto; max-width: 52%; text-align: left; }
  .aa-note-hero__media .aa-plate .aa-illo { left: auto; right: 6%; top: 11%; bottom: auto; width: 30%; }
}

/* ------------------------------------------------------------------ 4. arch cards */
.aa-arch-grid { display: grid; gap: clamp(40px, 4vw, 56px) var(--aa-gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.aa-arch-card { position: relative; display: flex; flex-direction: column; color: var(--aa-color-text-primary); }
.aa-arch-card__frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 2px solid var(--aa-color-border-strong);
  border-radius: 999px 999px 14px 18px;
  transition: translate var(--aa-motion-quick) var(--aa-ease-soft), box-shadow var(--aa-motion-quick) var(--aa-ease-soft);
}
/* the product sits in the arch like a print in a window: paper ground, the sheet below the curve */
.aa-arch-card__frame { background-color: var(--aa-paper); background-image: radial-gradient(var(--aa-dot) 1.2px, transparent 1.6px); background-size: var(--aa-dot-pitch) var(--aa-dot-pitch); background-position: center top; }
.aa-arch-card__img, .aa-arch-card__video {
  position: absolute; left: 10%; right: 10%; top: 21%; bottom: 0; width: 80%; height: 79%;
  object-fit: cover; object-position: top center;
  border: 1.5px solid rgb(43 42 40 / .22); border-bottom: 0; border-radius: 4px 5px 0 0;
  box-shadow: 0 6px 14px -6px rgb(43 42 40 / .35);
}
.aa-arch-card__video { opacity: 0; transition: opacity 420ms ease; }
.aa-arch-card.is-playing .aa-arch-card__video { opacity: 1; }
.aa-arch-card__ribbon {
  position: absolute; z-index: 4; right: -8px; top: 14%;
  padding: 6px 18px 4px 14px;
  background: var(--aa-charcoal); color: var(--aa-paper);
  font-family: var(--aa-font-display); font-size: 24px; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
  rotate: 6deg;
}
[data-theme="dark"] .aa-arch-card__ribbon { box-shadow: 0 0 0 2px var(--aa-paper); }
.aa-arch-card__label {
  position: relative; z-index: 3; align-self: center;
  display: grid; gap: 2px; justify-items: center; text-align: center;
  margin-top: -26px; padding: 9px 22px 8px; min-width: 70%; max-width: 96%;
  background-color: var(--aa-tape-bg);
  background-image: repeating-linear-gradient(-58deg, rgb(255 255 255 / .38) 0 7px, transparent 7px 15px);
  color: var(--aa-charcoal);
  -webkit-mask: var(--aa-tape-mask) center / 100% 100% no-repeat;
          mask: var(--aa-tape-mask) center / 100% 100% no-repeat;
  rotate: var(--aa-tape-tilt, -2deg);
}
.aa-arch-card:nth-child(3n + 2) { --aa-tape-tilt: 1.5deg; }
.aa-arch-card:nth-child(3n) { --aa-tape-tilt: -1deg; }
.aa-arch-card__name { font-family: var(--aa-font-notes); font-weight: 400; font-size: 23px; line-height: 1.1; }
.aa-arch-card__name a { color: inherit; text-decoration: none; }
.aa-arch-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 999px 999px 14px 18px; }
.aa-arch-card__name a:focus-visible { outline: none; }
.aa-arch-card__price { font-family: var(--aa-font-body); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.aa-arch-card__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.aa-arch-card__blurb { margin-top: 10px; text-align: center; font-size: var(--aa-fs-small); line-height: var(--aa-lh-small); color: var(--aa-color-text-secondary); }
.aa-arch-card:hover .aa-arch-card__frame, .aa-arch-card:focus-within .aa-arch-card__frame, .aa-arch-card.is-hover .aa-arch-card__frame {
  translate: -2px -4px; box-shadow: 5px 6px 0 0 var(--aa-color-shadow-offset);
}
.aa-arch-card:has(a:focus-visible) .aa-arch-card__frame, .aa-arch-card.is-focus .aa-arch-card__frame { outline: 3px solid var(--aa-color-focus-ring); outline-offset: 4px; }
@keyframes aa-tape-wiggle {
  0% { rotate: var(--aa-tape-tilt, -2deg); }
  30% { rotate: calc(var(--aa-tape-tilt, -2deg) + 2.5deg); }
  62% { rotate: calc(var(--aa-tape-tilt, -2deg) - 1.6deg); }
  100% { rotate: var(--aa-tape-tilt, -2deg); }
}

/* ------------------------------------------------------------------ 5. content grid */
.aa-tile-grid { display: grid; gap: var(--aa-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .aa-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .aa-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.aa-tile { position: relative; display: flex; flex-direction: column; gap: 10px; }
.aa-tile__frame {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border: 2px solid var(--aa-color-border-strong); border-radius: 10px 14px 9px 12px;
  background: var(--aa-paper);
  transition: translate var(--aa-motion-quick) var(--aa-ease-soft), box-shadow var(--aa-motion-quick) var(--aa-ease-soft);
}
.aa-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--aa-ease-soft); }
.aa-tile__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 16px; color: var(--aa-charcoal);
  opacity: 0; translate: 0 8px;
  transition: opacity var(--aa-motion-calm) ease, translate var(--aa-motion-calm) var(--aa-ease-soft);
}
.aa-tile__overlay .aa-series-name { align-self: flex-start; }
.aa-tile__hook { font-family: var(--aa-font-notes); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.12; }
.aa-tile__more { font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.aa-tile__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.35; }
.aa-tile__cap a { color: inherit; text-decoration: none; font-weight: 700; }
.aa-tile__cap a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.aa-tile__cap a:focus-visible { outline: none; }
.aa-tile:hover .aa-tile__overlay, .aa-tile:focus-within .aa-tile__overlay, .aa-tile.is-hover .aa-tile__overlay { opacity: 1; translate: 0 0; }
.aa-tile:hover .aa-tile__img, .aa-tile:focus-within .aa-tile__img { scale: 1.03; }
.aa-tile:hover .aa-tile__frame, .aa-tile:focus-within .aa-tile__frame { translate: -2px -3px; box-shadow: 5px 6px 0 0 var(--aa-color-shadow-offset); }
.aa-tile:has(a:focus-visible) .aa-tile__frame { outline: 3px solid var(--aa-color-focus-ring); outline-offset: 4px; }
@media (hover: none) { .aa-tile__overlay { display: none; } }

/* ------------------------------------------------------------------ 6. doodle draw-on */
/* ask-ayce-motion.js wraps each doodle path in a mask whose thick stroke follows the outline.
   With JS off, or with reduced motion, the mask is never built and the doodle simply shows. */
.aa-draw__stroke { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ 10. view transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 180ms ease both aa-vt-out; }
  ::view-transition-new(root) { animation: 260ms var(--aa-ease-soft) 60ms both aa-vt-in; }
  .aa-nav { view-transition-name: aa-nav; }
  .aa-footer { view-transition-name: aa-footer; }
  @keyframes aa-vt-out { to { opacity: 0; } }
  @keyframes aa-vt-in { from { opacity: 0; translate: 0 8px; } }
}

/* ================================================================== the moving parts
   Everything below runs only with motion allowed. Hidden "before" states need .aa-motion on <html>. */
@media (prefers-reduced-motion: no-preference) {

  /* 1. note hero: the card lands, the tape settles, the title arrives, the note writes on line by line */
  .aa-note-hero__wrap { animation: aa-card-land 760ms var(--aa-ease-settle) 80ms both; }
  .aa-note-hero__tape { animation: aa-tape-settle 620ms var(--aa-ease-settle) 520ms both; }
  .aa-note-hero__kicker, .aa-note-hero__title { animation: aa-rise 560ms var(--aa-ease-soft) both; }
  .aa-note-hero__kicker { animation-delay: 700ms; }
  .aa-note-hero__title { animation-delay: 820ms; }
  .aa-note-hero__line { animation: aa-write 820ms var(--aa-ease-pencil) both; animation-delay: calc(1180ms + var(--aa-line, 0) * 520ms); }
  .aa-note-hero__sign { animation: aa-rise 520ms var(--aa-ease-soft) both; animation-delay: calc(1300ms + var(--aa-lines, 4) * 520ms); }
  .aa-note-hero__actions { animation: aa-rise 520ms var(--aa-ease-soft) both; animation-delay: calc(1500ms + var(--aa-lines, 4) * 520ms); }
  @keyframes aa-card-land { from { opacity: 0; translate: 0 28px; rotate: 1.6deg; } }
  @keyframes aa-tape-settle { 0% { opacity: 0; translate: -50% -14px; rotate: -11deg; scale: 1.06; } 100% { opacity: 1; } }
  @keyframes aa-rise { from { opacity: 0; translate: 0 12px; } }
  @keyframes aa-write { from { clip-path: inset(-8px calc(100% + 12px) -8px -12px); } to { clip-path: inset(-8px -12px -8px -12px); } }

  /* parallax: CSS scroll-driven where supported, ask-ayce-motion.js sets --aa-p (-1 to 1) elsewhere */
  .aa-note-hero__media, .aa-band--parallax .aa-band__media { translate: 0 calc(var(--aa-p, 0) * 7%); will-change: translate; }
  .aa-tear { translate: 0 calc(var(--aa-p, 0) * var(--aa-tear-drift)); }
  .aa-tear--double::before { translate: 0 calc(var(--aa-p, 0) * var(--aa-tear-drift) * -1.6 - 3px); }
  .aa-tear--double.aa-tear--bottom::before { translate: 0 calc(var(--aa-p, 0) * var(--aa-tear-drift) * -1.6 + 3px); }
  @supports (animation-timeline: view()) {
    .aa-note-hero__media { animation: aa-drift-hero linear both; animation-timeline: --aa-hero; animation-range: cover; }
    .aa-band--parallax .aa-band__media { animation: aa-drift linear both; animation-timeline: --aa-band; animation-range: cover; }
    .aa-tear { animation: aa-drift-tear linear both; animation-timeline: --aa-tear; animation-range: cover; }
    .aa-tear--double.aa-tear--top::before { animation: aa-drift-fiber-top linear both; animation-timeline: --aa-tear; animation-range: cover; }
    .aa-tear--double.aa-tear--bottom::before { animation: aa-drift-fiber-bottom linear both; animation-timeline: --aa-tear; animation-range: cover; }
  }
  @keyframes aa-drift { from { translate: 0 -8%; } to { translate: 0 8%; } }
  @keyframes aa-drift-hero { from { translate: 0 -6%; } to { translate: 0 6%; } }
  @keyframes aa-drift-tear { from { translate: 0 calc(var(--aa-tear-drift) * -1); } to { translate: 0 var(--aa-tear-drift); } }
  @keyframes aa-drift-fiber-top { from { translate: 0 calc(var(--aa-tear-drift) * 1.6 - 3px); } to { translate: 0 calc(var(--aa-tear-drift) * -1.6 - 3px); } }
  @keyframes aa-drift-fiber-bottom { from { translate: 0 calc(var(--aa-tear-drift) * 1.6 + 3px); } to { translate: 0 calc(var(--aa-tear-drift) * -1.6 + 3px); } }

  /* 4. arch card: the tape wiggles once on hover or focus */
  .aa-arch-card:hover .aa-arch-card__label, .aa-arch-card:focus-within .aa-arch-card__label { animation: aa-tape-wiggle 520ms var(--aa-ease-soft) 1; }

  /* 5. grid reveal: neighbours arrive one after another */
  .aa-motion .aa-grid-reveal > * { transition: opacity var(--aa-motion-reveal) ease, translate var(--aa-motion-reveal) var(--aa-ease-soft); transition-delay: calc(var(--aa-i, 0) * var(--aa-motion-stagger)); }
  .aa-motion .aa-grid-reveal > :not(.is-in) { opacity: 0; translate: 0 18px; }

  /* 6. doodle draw-on: one pass of the pencil */
  .aa-motion .aa-draw:not(.is-in) .aa-draw__stroke { stroke-dashoffset: 1; }
  .aa-motion .aa-draw.is-in .aa-draw__stroke { transition: stroke-dashoffset var(--aa-draw-t, 600ms) var(--aa-ease-pencil) var(--aa-draw-d, 0ms); }

  /* 7. swipe: the lemon wipes in behind the payoff word, once */
  .aa-swipe--animate.is-drawn::before { animation: none; }
  .aa-motion .aa-swipe--animate::before { transform-origin: 0 50%; transition: transform 640ms var(--aa-ease-pencil) 120ms; }
  .aa-motion .aa-swipe--animate:not(.is-in)::before { transform: rotate(-1.6deg) skewX(-6deg) scaleX(0); }

  /* 8. sticky drop: a note drops in, tilts too far, settles */
  .aa-motion .aa-sticky--drop { transition: opacity 360ms ease, translate 680ms var(--aa-ease-settle), rotate 680ms var(--aa-ease-settle); transition-delay: calc(var(--aa-i, 0) * 110ms); }
  .aa-motion .aa-sticky--drop:not(.is-in) { opacity: 0; translate: 0 -26px; rotate: -5deg; }
}

/* ================================================================== settled + static
   Same end state for reduced motion, the [data-aa-motion="reduce"] preview and exports. */
@media (prefers-reduced-motion: reduce) {
:root .aa-note-hero__wrap, :root .aa-note-hero__tape, :root .aa-note-hero__kicker, :root .aa-note-hero__title,
:root .aa-note-hero__line, :root .aa-note-hero__sign, :root .aa-note-hero__actions,
:root .aa-arch-card__label { animation: none !important; }
:root .aa-note-hero__media, :root .aa-band__media, :root .aa-tear { animation: none !important; translate: none !important; will-change: auto !important; }
:root .aa-tear--double.aa-tear--top::before { animation: none !important; translate: 0 -3px !important; }
:root .aa-tear--double.aa-tear--bottom::before { animation: none !important; translate: 0 3px !important; }
:root .aa-band--fixed .aa-band__media { position: absolute !important; top: 0 !important; bottom: 0 !important; height: auto !important; }
:root .aa-grid-reveal > * { opacity: 1 !important; translate: none !important; transition: none !important; }
:root .aa-draw__stroke { stroke-dashoffset: 0 !important; transition: none !important; }
:root .aa-swipe--animate::before { transform: rotate(-1.6deg) skewX(-6deg) !important; transition: none !important; animation: none !important; }
:root .aa-sticky--drop { opacity: 1 !important; translate: none !important; rotate: none !important; transition: none !important; }
:root .aa-arch-card__video { display: none !important; }
}

[data-aa-motion="reduce"] .aa-note-hero__wrap, [data-aa-motion="reduce"] .aa-note-hero__tape, [data-aa-motion="reduce"] .aa-note-hero__kicker, [data-aa-motion="reduce"] .aa-note-hero__title,
[data-aa-motion="reduce"] .aa-note-hero__line, [data-aa-motion="reduce"] .aa-note-hero__sign, [data-aa-motion="reduce"] .aa-note-hero__actions,
[data-aa-motion="reduce"] .aa-arch-card__label { animation: none !important; }
[data-aa-motion="reduce"] .aa-note-hero__media, [data-aa-motion="reduce"] .aa-band__media, [data-aa-motion="reduce"] .aa-tear { animation: none !important; translate: none !important; will-change: auto !important; }
[data-aa-motion="reduce"] .aa-tear--double.aa-tear--top::before { animation: none !important; translate: 0 -3px !important; }
[data-aa-motion="reduce"] .aa-tear--double.aa-tear--bottom::before { animation: none !important; translate: 0 3px !important; }
[data-aa-motion="reduce"] .aa-band--fixed .aa-band__media { position: absolute !important; top: 0 !important; bottom: 0 !important; height: auto !important; }
[data-aa-motion="reduce"] .aa-grid-reveal > * { opacity: 1 !important; translate: none !important; transition: none !important; }
[data-aa-motion="reduce"] .aa-draw__stroke { stroke-dashoffset: 0 !important; transition: none !important; }
[data-aa-motion="reduce"] .aa-swipe--animate::before { transform: rotate(-1.6deg) skewX(-6deg) !important; transition: none !important; animation: none !important; }
[data-aa-motion="reduce"] .aa-sticky--drop { opacity: 1 !important; translate: none !important; rotate: none !important; transition: none !important; }
[data-aa-motion="reduce"] .aa-arch-card__video { display: none !important; }

.aa-motion-settled .aa-note-hero__wrap, .aa-motion-settled .aa-note-hero__tape, .aa-motion-settled .aa-note-hero__kicker, .aa-motion-settled .aa-note-hero__title,
.aa-motion-settled .aa-note-hero__line, .aa-motion-settled .aa-note-hero__sign, .aa-motion-settled .aa-note-hero__actions,
.aa-motion-settled .aa-arch-card__label { animation: none !important; }
.aa-motion-settled .aa-note-hero__media, .aa-motion-settled .aa-band__media, .aa-motion-settled .aa-tear { animation: none !important; translate: none !important; will-change: auto !important; }
.aa-motion-settled .aa-tear--double.aa-tear--top::before { animation: none !important; translate: 0 -3px !important; }
.aa-motion-settled .aa-tear--double.aa-tear--bottom::before { animation: none !important; translate: 0 3px !important; }
.aa-motion-settled .aa-band--fixed .aa-band__media { position: absolute !important; top: 0 !important; bottom: 0 !important; height: auto !important; }
.aa-motion-settled .aa-grid-reveal > * { opacity: 1 !important; translate: none !important; transition: none !important; }
.aa-motion-settled .aa-draw__stroke { stroke-dashoffset: 0 !important; transition: none !important; }
.aa-motion-settled .aa-swipe--animate::before { transform: rotate(-1.6deg) skewX(-6deg) !important; transition: none !important; animation: none !important; }
.aa-motion-settled .aa-sticky--drop { opacity: 1 !important; translate: none !important; rotate: none !important; transition: none !important; }
.aa-motion-settled .aa-arch-card__video { display: none !important; }