/* Palette Girlies as a magazine: the shared band grammar and craft (oct 2026, docs/web/REVISTA.md sections 3 and 7, "Módulos"). Load it after site.css and editorial.css and before the page's own
   sheet, and put class "mz" on <body> for the header. Everything here hangs on .mz-* classes, so a page that does not use them does not change.
   Bands (never two alike in a row): .mz-cover (photo or living watercolor, the big title, one line, one button), .mz-paper (text on paper, 60 words), .mz-photo (a photo edge to edge with
   a one line caption), .mz-color (the deepest color of the season, paper text, 4.5:1), .mz-spread (a snap row of photos, pages or looks), .mz-proof (one thing to touch), .mz-close (the pain
   solved in a sentence and a button). Craft: hairlines instead of cards, a type scale with clamp(), the thin section label, the button with fill, roll and arrow, the sticky phone bar,
   the header that turns solid with a blur. Swatches stay flat and exact on plain paper; the watercolor is the frame, never the data. The motion lives in site/js/fx/ and is off with
   prefers-reduced-motion; without JavaScript every band is plain and complete. */

:root {
  --mz-line: rgba(43, 34, 48, .12);
  --mz-line-paper: rgba(247, 241, 232, .34);
  --mz-d1: clamp(52px, 4vw + 36px, 112px);   /* the one display size per screen */
  --mz-h2: clamp(36px, 3vw + 24px, 76px);
  --mz-pad: clamp(44px, 5vw + 28px, 72px);   /* a band's top padding: 44 px on a phone, 72 at most; its bottom is 0.72 of it, so two bands in a row leave under 160 px of nothing */
  --mz-pad-b: calc(var(--mz-pad) * .72);
  --mz-spring: cubic-bezier(.2, .9, .3, 1.12);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --mz-spring: linear(0, 0.035, 0.123, 0.238, 0.364, 0.489, 0.605, 0.708, 0.794, 0.865, 0.92, 0.962, 0.992, 1.012, 1.024, 1.031, 1.033, 1.032, 1.03, 1.026, 1.022, 1.018, 1.014, 1.01, 1.007, 1.005, 1.003, 1.002, 1, 1, 1); }
}

/* ---------- type ---------- */
.mz-display { font-size: var(--mz-d1); line-height: .98; letter-spacing: -.015em; text-wrap: balance; }
.mz-h2, .mz-color h2, .mz-proof h2, .mz-close h2 { font-size: var(--mz-h2); line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
.mz-lead { margin: 14px 0 0; max-width: 34em; font: 400 clamp(18px, .6vw + 16px, 21px)/1.4 var(--sans); color: inherit; }
.mz-meta { font: 600 13.5px/1.35 var(--sans); letter-spacing: .02em; }
/* a heading that sets line by line (site/js/fx/motion-layer.js cuts it into words): each word is an inline mask with room for the descenders and the slant of the italic, so nothing is cut */
.mz-w { display: inline-block; overflow: clip; padding: .08em .1em .16em .05em; margin: -.08em -.1em -.16em -.05em; }
.mz-wi { display: inline-block; }

/* the thin section label: a rule, a number, a name in spaced capitals ("01 · Sound familiar"). A label, never a card heading. */
.mz-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: inherit; }
.mz-rule { flex: none; width: 28px; height: 1px; background: currentColor; }

/* ---------- bands ---------- */
.mz-paper { padding-block: var(--mz-pad) var(--mz-pad-b); }
.mz-photo { margin: 0; line-height: 0; overflow: hidden; }
.mz-photo img { display: block; width: 100%; height: auto; border-radius: 0; }
.mz-photo figcaption, .mz-cap { padding: 10px var(--gutter) 0; font: 600 13.5px/1.35 var(--sans); letter-spacing: .03em; color: var(--ink); line-height: 1.35; }

.mz-color { background: var(--deep, var(--ink)); color: var(--paper); padding-block: var(--mz-pad) var(--mz-pad-b); }
.mz-color h2, .mz-color h3, .mz-color p, .mz-color li { color: var(--paper); }
.mz-color h2 em, .mz-color h3 em { font-family: var(--slant); font-style: italic; font-size: 1em; line-height: inherit; letter-spacing: inherit; -webkit-text-stroke: 0; color: inherit; }
.mz-color a { color: var(--paper); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mz-color :focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.mz-color .mz-eyebrow { color: var(--paper); }

.mz-close { background: var(--deep, var(--ink)); color: var(--paper); padding-block: var(--mz-pad) var(--mz-pad-b); }
.mz-close h2 { color: var(--paper); }
.mz-color .mz-btn, .mz-close .mz-btn { color: var(--paper); text-decoration: none; }
.mz-color .mz-btn--paper, .mz-close .mz-btn--paper { color: var(--ink); }
.mz-color .mz-btn--paper:hover, .mz-color .mz-btn--paper:focus-visible, .mz-close .mz-btn--paper:hover, .mz-close .mz-btn--paper:focus-visible { color: var(--paper); }

/* a PRUEBA: one thing to touch, on lightly tinted paper so it is not another plain paper band; hairlines frame it */
.mz-proof { padding-block: var(--mz-pad) var(--mz-pad-b); border-top: 1px solid var(--mz-line); border-bottom: 1px solid var(--mz-line); }
.mz-proof h2 em { color: var(--berry); }

/* a SPREAD: one row that snaps, photos or pages or looks, with progress dots and the arrow keys (the page's script moves the dots) */
.mz-spread { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.mz-spread::-webkit-scrollbar { display: none; }
.mz-spread:focus-visible { outline: 3px solid var(--berry); outline-offset: -3px; }

/* ---------- hairlines, not cards ---------- */
.mz-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mz-line); }
.mz-list > li { padding: 14px 0; border-bottom: 1px solid var(--mz-line); }
.mz-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--mz-line); border-left: 1px solid var(--mz-line); }
.mz-grid > li { padding: 18px 16px 20px; border-right: 1px solid var(--mz-line); border-bottom: 1px solid var(--mz-line); }
.mz-color .mz-list, .mz-color .mz-list > li, .mz-color .mz-grid, .mz-color .mz-grid > li { border-color: var(--mz-line-paper); }

/* ---------- the cover ---------- */
.mz-cover { position: relative; margin: 0; }
.mz-cover .mz-photo img { background: var(--paper); }
/* the block of the title that the living watercolor sits behind (site/js/fx/wash-gl.js; --wash-top, --wash-bottom, --wash-l, --wash-r, --wash-photo and --wash-fade set its box and its edges): the canvas is a multiply layer, so the paper and its grain show through, it spills 56 px up over the photo and
   stops 24 px under the last line. Without WebGL, or with reduced motion, the same canvas is painted once and still (wash-static.js); without JavaScript it is empty. */
.mz-washed { position: relative; }
.mz-wash { --wash-photo: 56px 0; --wash-fade: 1 0 1 0; position: absolute; left: calc(-1 * var(--wash-l, var(--gutter))); right: calc(-1 * var(--wash-r, var(--gutter))); top: calc(-1 * var(--wash-top, 56px)); bottom: calc(-1 * var(--wash-bottom, 24px)); width: calc(100% + var(--wash-l, var(--gutter)) + var(--wash-r, var(--gutter))); height: calc(100% + var(--wash-top, 56px) + var(--wash-bottom, 24px)); display: block; mix-blend-mode: multiply; pointer-events: none; }
.has-wash { -webkit-user-select: none; user-select: none; }
@media print { .mz-wash, .mz-bar { display: none !important; } }

/* ---------- a card that sinks under the finger (site/js/fx/motion-layer.js moves --press and --lift; scale and translate compose with any transform the card already has) ---------- */
[data-press] { scale: calc(1 - var(--press, 0) * .028); translate: 0 calc(var(--lift, 0) * -3px); }

/* ---------- the button with craft ---------- */
.mz-btn { position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 4px 6px 4px 26px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font: 700 17px/1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.mz-btn:hover, .mz-btn:focus-visible { color: var(--paper); text-decoration: none; }
.mz-btn:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 999px; }
.mz-btn-fill { position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 340%; aspect-ratio: 1; border-radius: 50%; background: var(--berry); transform: translate(-50%, -50%) scale(0); transition: transform .62s var(--mz-spring); pointer-events: none; }
.mz-btn:hover .mz-btn-fill, .mz-btn:focus-visible .mz-btn-fill, .mz-btn:active .mz-btn-fill { transform: translate(-50%, -50%) scale(1); }
.mz-btn-t { position: relative; display: block; overflow: hidden; height: 1.25em; line-height: 1.25; white-space: nowrap; }
.mz-btn-l { display: block; transition: transform .55s var(--mz-spring); }
.mz-btn-t.has-roll .mz-btn-l2 { position: absolute; left: 0; top: 100%; }
.mz-btn:hover .has-roll .mz-btn-l, .mz-btn:focus-visible .has-roll .mz-btn-l { transform: translateY(-100%); }
.mz-btn-a { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--ink); font: 400 22px/1 var(--sans); transition: transform .55s var(--mz-spring); }
.mz-btn:hover .mz-btn-a, .mz-btn:focus-visible .mz-btn-a { transform: translateX(3px) rotate(-45deg); }
.mz-btn--sm { min-height: 48px; padding-left: 20px; font-size: 16px; }
.mz-btn--sm .mz-btn-a { width: 38px; height: 38px; font-size: 19px; }
.mz-btn--paper { background: var(--paper); color: var(--ink); }
.mz-btn--paper:hover, .mz-btn--paper:focus-visible { color: var(--paper); }
.mz-btn--paper .mz-btn-a { background: var(--ink); color: var(--paper); }
.mz-btn--paper:focus-visible { outline-color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .mz-btn-fill, .mz-btn-l, .mz-btn-a { transition: none; } .mz-btn:hover .mz-btn-a, .mz-btn:focus-visible .mz-btn-a { transform: none; } }

/* ---------- the sticky phone bar: the page's one button again, from after the cover to the closing band ---------- */
.mz-bar { display: none; }
@media (max-width: 899px) {
  .js .mz-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgba(247, 241, 232, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--mz-line); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); visibility: hidden; transition: transform .55s var(--mz-spring), visibility 0s linear .55s; }
  .js .mz-bar.is-on { transform: none; visibility: visible; transition-delay: 0s; }
  /* Nothing in the bar is ever cut: the button keeps its whole label, and the small text takes what is left, wrapping onto a second line when it must (and onto a row of its own
     above the button when less than 96 px are left, or when the text is zoomed). The label wraps rather than hides if a very long one meets a very narrow phone. */
  .mz-bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px var(--gutter); }
  .mz-bar-t { margin: 0; display: grid; flex: 1 1 96px; min-width: 0; font: 400 14px/1.25 var(--sans); color: var(--ink); }
  .mz-bar-t span { text-wrap: balance; overflow-wrap: break-word; }
  .mz-bar-t b { font: 700 18px/1.2 var(--sans); }
  .mz-bar .mz-btn { flex: none; max-width: 100%; margin-left: auto; }
  .mz-bar .mz-btn-t { height: auto; min-height: 1.25em; white-space: normal; text-wrap: balance; }
  body.has-list .mz-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .mz-bar { transition: none; } }

/* ---------- the header turns solid with a blur once the page moves (site/js/fx/chrome.js adds .mz-chrome to <html> on a body.mz page: until then, and without JavaScript, the header is where it always was) ---------- */
.mz-chrome .site-header { position: sticky; top: 0; z-index: 40; background: transparent; transition: transform .5s var(--mz-spring), background-color .3s, box-shadow .3s; }
.mz-chrome .site-header.is-solid { background: rgba(247, 241, 232, .86); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); box-shadow: 0 1px 0 var(--mz-line); }
.mz-chrome .site-header.is-away { transform: translateY(-102%); }
@media (prefers-reduced-motion: reduce) { .mz-chrome .site-header { transition: none; } }

/* ---------- "do the math" (site/js/fx/do-the-math.js; markup tools/fx_parts.py do_the_math) ---------- */
.mz-math { background: rgba(232, 167, 181, .16); }
.mz-math-head { --wash-top: 28px; --wash-bottom: 18px; padding: 0; }
.mz-math-head .mz-wash { --wash-photo: 0 0; --wash-fade: 1 0 1 0; --wash-l: var(--gutter); --wash-r: var(--gutter); }
.dtm-static { margin: 18px 0 0; font: 400 20px/1.4 var(--sans); }
.js .dtm-static[hidden] { display: none; }
.dtm-ui[hidden] { display: none; }
.dtm-controls { display: grid; gap: 0 48px; margin-top: 18px; }
.dtm-ctl label { display: block; font: 600 17px/1.35 var(--sans); color: var(--ink); }
.dtm-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; align-items: center; gap: 14px; }
.dtm-row output { font: 400 30px/1 var(--serif); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.mz-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; --fill: 30%; }
.mz-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--berry), var(--berry)) 0 0 / var(--fill) 100% no-repeat, rgba(43, 34, 48, .28); }
.mz-range::-moz-range-track { height: 2px; background: rgba(43, 34, 48, .28); }
.mz-range::-moz-range-progress { height: 2px; background: var(--berry); }
.mz-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -14px; border-radius: 50%; background: var(--berry); border: 4px solid var(--paper); box-shadow: 0 0 0 1.5px var(--berry); transition: transform .3s var(--mz-spring); }
.mz-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--berry); border: 4px solid var(--paper); box-shadow: 0 0 0 1.5px var(--berry); }
.mz-range:active::-webkit-slider-thumb { transform: scale(1.18); }
.mz-range:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; border-radius: 6px; }
.dtm-total { margin: 14px 0 0; line-height: .9; }
.dtm-total span { display: block; font: 400 clamp(72px, 19vw, 132px)/.95 var(--serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dtm-total span[data-over="true"] { color: var(--berry); }
.dtm-line { margin: 10px 0 0; min-height: 1.4em; font: 600 clamp(19px, .6vw + 17px, 22px)/1.35 var(--sans); color: var(--ink); }
.dtm-link { margin: 2px 0 0; }
.dtm-link a { display: inline-flex; align-items: center; min-height: 44px; font: 700 17px/1.4 var(--sans); }
.dtm-note { margin: 12px 0 0; font: 400 15px/1.4 var(--sans); color: var(--ink); }
@media (min-width: 760px) { .dtm-controls { grid-template-columns: 1fr 1fr; } }

/* ---------- the questions that are hard to ask, as a chat (site/js/fx/chat-faq.js) ---------- */
.cf { display: grid; gap: 14px; margin: 28px 0 0; max-width: 40em; }
.cf-pair { display: grid; gap: 10px; margin: 0; }
.cf-q, .cf-a { margin: 0; max-width: 88%; padding: 12px 16px 13px; font: 400 17.5px/1.42 var(--sans); }
.cf-q { justify-self: end; background: var(--berry); color: var(--paper); border-radius: 20px 20px 5px 20px; font-weight: 600; }
.cf-a { justify-self: start; background: rgba(255, 255, 255, .6); color: var(--ink); border: 1px solid var(--mz-line); border-radius: 20px 20px 20px 5px; }
.cf-a a { color: var(--berry); }
@media (prefers-reduced-motion: no-preference) {
/* (was a hidden state until the scroll; off since Kyara, 29 oct 2026) */
  .js .cf .cf-q.is-wait { transform-origin: 100% 100%; }
  .js .cf .cf-a.is-wait { transform-origin: 0 100%; }
  .js .cf .is-in { transition: opacity .25s ease-out, transform .7s var(--mz-spring); }
}

/* ---------- "build your plan" (site/js/fx/plan-builder.js) ---------- */
.pb-ui[hidden], .js .pb-static[hidden] { display: none; }
.pb-static { margin-top: 20px; max-width: 34em; }
.pb-static h3 { font: 400 26px/1.1 var(--serif); }
.pb-static ul { margin: 10px 0; padding-left: 20px; }
.pb-ui { display: grid; gap: 28px; margin-top: 26px; }
.pb-q { display: grid; gap: 4px; align-content: start; }
.pb-group { padding: 12px 0 14px; border-top: 1px solid var(--mz-line); }
.pb-label { margin: 0 0 8px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.pb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-chip { min-height: 44px; padding: 6px 16px 5px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 16.5px/1.1 var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .5s var(--mz-spring); }
.pb-chip:active { transform: scale(.96); }
.pb-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pb-chip:focus-visible { outline: 3px solid var(--berry); outline-offset: 2px; }
.pb-out { display: grid; gap: 18px; justify-items: start; align-content: start; }
/* the phone, drawn with code: a rounded case, a notch, a paper screen */
.pb-phone { width: min(100%, 290px); padding: 11px; border-radius: 38px; background: var(--ink); box-shadow: 0 1px 0 rgba(43, 34, 48, .5); }
.pb-screen { position: relative; min-height: 300px; padding: 30px 18px 18px; border-radius: 28px; background: var(--paper) url(/img/collage/paper.webp) repeat; color: var(--ink); overflow: hidden; }
.pb-screen::before { content: ""; position: absolute; left: 50%; top: 9px; width: 70px; height: 18px; margin-left: -35px; border-radius: 12px; background: var(--ink); }
.pb-bar { margin: 0 0 6px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.pb-title { font: 400 25px/1.08 var(--serif); letter-spacing: -.01em; }
.pb-lines { list-style: none; margin: 14px 0 0; padding: 0; }
.pb-line { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--mz-line); font: 400 15.5px/1.35 var(--sans); }
.pb-line:not(:has(.pb-sw)) { grid-template-columns: minmax(0, 1fr); }
.pb-sw { display: block; width: 16px; height: 16px; margin-top: 2px; background: var(--c); border-radius: 2px; }
.pb-fake { display: inline-block; margin-top: 16px; padding: 9px 16px 8px; border-radius: 999px; background: var(--berry); color: var(--paper); font: 700 14px/1.1 var(--sans); }
@media (prefers-reduced-motion: no-preference) {
  .pb-screen.is-pop .pb-title, .pb-screen.is-pop .pb-line, .pb-screen.is-pop .pb-fake { animation: pb-pop .7s var(--mz-spring) both; }
  .pb-screen.is-pop .pb-line { animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
  .pb-screen.is-pop .pb-fake { animation-delay: .32s; }
}
@keyframes pb-pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 860px) { .pb-ui { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 56px; align-items: start; } }

/* ---------- /fx-lab (not linked, not in the sitemap): the few rules the test page needs ---------- */
.lab-buttons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 24px; }
.lab-chiprow { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lab-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 5px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 16.5px/1.1 var(--sans); cursor: pointer; }
.lab-chip i { display: block; width: 16px; height: 16px; background: var(--c); border-radius: 2px; }
.lab-card { margin-top: 22px; max-width: 24em; padding: 18px; background: rgba(255, 255, 255, .6); border: 1px solid var(--mz-line); border-radius: 3px; touch-action: manipulation; }
.lab-card p { margin: 0; font: 600 17px/1.4 var(--sans); }
.lab-band .mz-washed { padding: 56px 0 44px; --wash-top: 0px; --wash-bottom: 0px; }
.lab-band .mz-wash { --wash-photo: 0 0; --wash-fade: 1 0 1 0; }

/* =====================================================================================================================================================================
   type-paint (oct 2026, site/js/fx/type-paint.js, docs/web/MOSTRAR-NO-DECIR.md section 2): the letter as image. The painted word of a headline, giant numerals that count up, and the
   list of what she tried that is crossed out by hand. Every rule hangs on a data attribute or a tp-/ts- class the module adds, so a page that does not use them does not change.
   Without JavaScript, or with reduced motion before the module runs, the word is its plain berry italic, the number is its final number and the list is plain text.
   ===================================================================================================================================================================== */
/* the painted word: the letters are a window to the page's watercolor (a blob made once by paint.js). The padding keeps the slant of the italic and its descenders inside the painted box. */
[data-paint-word].tp-fill { color: transparent; -webkit-text-fill-color: transparent; background-image: var(--tp-fill); background-size: cover; background-repeat: no-repeat; background-position: var(--tp-px, 50%) var(--tp-py, 50%);
  -webkit-background-clip: text; background-clip: text; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: .05em .12em .14em .06em; margin: -.05em -.12em -.14em -.06em; }
/* where the fill falls under 3:1 on the paper (the light seasons) the letter keeps a thin ink edge */
[data-paint-word].tp-fill.tp-edge { -webkit-text-stroke: max(.8px, .014em) var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  [data-paint-word].tp-fill { animation: tp-bloom .9s ease-out both; }
}
@keyframes tp-bloom { from { filter: saturate(.35); } to { filter: none; } }   /* the paint arrives as color, never as a dip in contrast: the fill is 3:1 on the paper at every frame */
/* a giant numeral: Gloock, 96 to 160 px, in tabular figures so that counting does not move the line */
.tp-giant { display: block; margin: 0; font: 400 clamp(96px, 27vw, 160px)/.92 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.tp-num { display: inline-block; font-variant-numeric: tabular-nums lining-nums; }
/* what she tried: each attempt appears and is crossed out by hand (rough-notation draws the stroke), then the line that names the real culprit is written under them */
/* (was a hidden state until the scroll; off since Kyara, 29 oct 2026) */
.ts-in { transition: opacity .35s ease-out, transform .6s var(--mz-spring); }
.ts-t { display: inline; transition: opacity .5s ease-out; }
.ts-struck .ts-t { opacity: .9; }
[data-strike-list] > li { position: relative; }   /* the stroke of rough-notation is an absolutely placed svg: its box has to stay the same while the line springs in */
.ts-then.ts-wait { opacity: 1; transform: none; clip-path: inset(-6% 100% -14% 0); }
.ts-then.ts-in { clip-path: inset(-6% -3% -14% -2%); transition: clip-path 1s cubic-bezier(.35, .6, .25, 1); }
.ts-then.ts-done { clip-path: none; }
/* things that come in one after another when they scroll into view (data-pop; the page's own CSS moves the parts of its drawings with .pop-wait and .pop-on) */
/* (was a hidden state until the scroll; off since Kyara, 29 oct 2026) */
[data-pop]:not([data-pop="self"]).pop-on > * { transition: opacity .35s ease-out calc(var(--i, 0) * 90ms), transform .7s var(--mz-spring) calc(var(--i, 0) * 90ms); }

/* =====================================================================================================================================================================
   chat-tap (site/js/fx/chat-tap.js): her question is a button on the right, the answer is written under it on the left after three dots. Closed, the answers are not on the screen.
   ===================================================================================================================================================================== */
.is-tap .ct-q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.is-tap .ct-q::after { content: "+"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(247, 241, 232, .22); font: 400 20px/1 var(--sans); transition: transform .4s var(--mz-spring); }
.is-tap .ct-pair.ct-open .ct-q::after { transform: rotate(45deg); }
.is-tap .ct-q .ct-t { flex: 1; min-width: 0; }
.is-tap .ct-q:focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; border-radius: 12px; }
.is-tap .cf-q { padding: 0; }
.is-tap .cf-q .ct-q { padding: 12px 14px 13px 16px; }
.is-tap .cf-a[hidden], .is-tap dd[hidden] { display: none; }
.ct-dots { justify-self: start; display: flex; gap: 6px; padding: 14px 16px; background: rgba(255, 255, 255, .6); border: 1px solid var(--mz-line); border-radius: 20px 20px 20px 5px; }
.ct-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .ct-dots i { animation: ct-dot .9s ease-in-out infinite both; }
  .ct-dots i:nth-child(2) { animation-delay: .15s; }
  .ct-dots i:nth-child(3) { animation-delay: .3s; }
  .ct-in { animation: ct-in .6s var(--mz-spring) both; transform-origin: 0 100%; }
}
@keyframes ct-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
@keyframes ct-in { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
.is-tap .ct-q { min-height: 44px; }   /* a tap target of 44 px, whatever the question's size */