/* Western polish pass (2026-11-01): keep the playful brand (logo, Bagel headlines, brand blue, hero phone)
   but turn the volume down so handmade keepsakes read as giftable, not toy-store.
   Loaded after motion.css and only overrides. Remove this file + its <link> to roll back. */

/* Warm off-white paper instead of lilac; pink and yolk become accents, not surfaces. */
:root{
  --paper:#FBF8F3;
  --paper-2:#F3EEE6;
  --line:rgba(22,19,106,.16);
  --lift:0 14px 32px -12px rgba(22,19,106,.22);
  /* One label face: small caps-style sans instead of the typewriter mono. */
  --mono:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.hero .halftone{opacity:.12}
/* Paper grain was greying every white surface; keep a whisper of it. */
body::after{opacity:.1}

/* Pink overprint stays on the hero headline only; section titles are clean. */
.riso::before{display:none}
.hero .riso::before{display:block}

/* Small labels: tracked sans, quieter. */
.card .meta,.hero-tile-copy small,.kicker,.mo-hint,.how-n{letter-spacing:.06em}
.card .meta{font-weight:600}

/* Cards, tiles, filters, FAQ: hairline borders, soft lift on hover instead of hard offset shadows. */
.card,.hero-tile,.faq-list details,.how-steps li,.books-card,.how-proof,.seg,.search,.mo-pair-card{border-color:var(--line)!important}
.card .card-frame{border-bottom-color:var(--line)}
.card:hover,.card:focus-within{transform:translateY(-3px);box-shadow:var(--lift)}
.hero-tile:hover,.hero-tile:focus-visible{transform:translateY(-2px);box-shadow:var(--lift)}
.books-card:hover,.books-card:focus-visible{border-color:var(--blue)!important;box-shadow:var(--lift)}
.how-proof{box-shadow:none}
.how-shot{box-shadow:var(--lift)}
.clip{box-shadow:var(--lift)}
.eyebrow{box-shadow:none;border-color:var(--line)}
.shop-chip{box-shadow:none;border-color:var(--line)}
.shop-chip:hover,.shop-chip:focus-visible{transform:translateY(-2px);box-shadow:var(--lift)}
.mo-pair-card:hover,.mo-pair-card:focus-visible{transform:translateY(-2px);box-shadow:var(--lift)}
.seg button+button{border-left-color:var(--line)}
.faq-list summary::after{background:var(--paper-2);border-color:var(--line)}
.qv{box-shadow:none}
@media (max-width:640px){.books-card{box-shadow:none}}

/* Section bands: white How band stays, header rule and FAQ calmer. */
header.top{border-bottom-color:var(--line)}
.toolbar{border-block:1px solid var(--line)}
.cat{border-color:var(--line)}
.cat[aria-pressed="true"]{border-color:var(--ink)}
.how{border-top-color:var(--line)}

/* Trust strip: from full fluoro pink to a quiet band so the promises read as facts. */
.trust{background:var(--paper-2);border-block:1px solid var(--line)}
.trust .t span{color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  .card:hover,.card:focus-within,.hero-tile:hover,.shop-chip:hover,.mo-pair-card:hover{transform:none}
}

/* Seasonal cutoff notice and Tiny Paw Promise (2026-11-01): quiet, no motion. */
.holiday-bar{margin:0;padding:9px 16px;background:var(--paper-2);color:var(--ink,#16136A);border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.45;text-align:center;overflow-wrap:anywhere}
.holiday-bar[hidden]{display:none}
.promise-note{margin:12px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.promise-note h5{margin:0 0 4px;font-size:14px}
.promise-note p{margin:0}
/* Longer TikTok handle (@tinypawstudio.co) must stay inside the hero phone caption. */
.phone .caption > b:first-child{font-size:10.4px;letter-spacing:-.01em;overflow-wrap:anywhere}

/* Brand mark from the TikTok avatar (2026-11-01). */
.logo img.logo-mark{width:34px;height:34px;border-radius:50%;flex:none}

/* UI polish round (2026-11-01). */
/* 1. One quiet bar at a time: the marquee steps aside while the Christmas notice shows. */
body.has-holiday .announce{display:none}
.holiday-bar .hb-short{display:none}
@media (max-width:640px){.holiday-bar .hb-long{display:none}.holiday-bar .hb-short{display:inline}}
/* 2. The avatar mark needs an edge on the off-white header. */
.logo img.logo-mark{width:38px;height:38px;box-shadow:0 0 0 1.5px var(--ink,#16136A)}
/* 3. Shorter how-it-works story; resting steps stay readable. */
.how-story .how-steps li{min-height:min(32vh,280px);opacity:.6}
@media (max-width:900px){.how-story .how-steps li{min-height:26vh}}
/* 4. Proof band now sits between the catalog and the story. */
.proof-band{padding:8px 0 56px}
.proof-band .how-proof{margin-top:0}
/* 7. Goggles fill less of their frame than the knits; bring them up to the same visual weight. */
.wardrobe-card-image img[src*="touchdog-goggles/card-white"]{transform:scale(1.35)}
/* 9. Two or three clips sit centred instead of hugging the left edge. */
.reel.reel-few{justify-content:center;padding-left:var(--gut);padding-right:var(--gut)}