/* The Fine Print Market — moods.
   Three light leanings over the same site, switched with html[data-mood].
   Market is the default (no attribute). Only fonts, patterns, frames, labels,
   ornament density and a few colors change; the structure never does. */

/* ======================= Parisian: refined and classic ======================= */
html[data-mood="parisian"] {
  --romantic: "Bodoni Moda", "Didot", Georgia, serif;
  --hand: "Pinyon Script", "Snell Roundhand", cursive;
  --brush: "Bodoni Moda", "Didot", Georgia, serif;
  --mischief: "Cormorant Garamond", Georgia, serif;
  --paper: #F6F3EC;
  --linen: #F9F6F0;
  --gilt: color-mix(in srgb, var(--marigold) 82%, var(--ink));
}
/* Labels in spaced serif capitals, a touch heavier so they hold up small */
html[data-mood="parisian"] :is(.label, .vlabel, .nav-link, .plaque, .caption, .item-meta, .fn, .hero-fn, .wm-small, .dl-sticker, .tag-body, .airmail-label, .chip b, .factors li, .prices dd, .also, .kind, .review) { font-weight: 600; }
html[data-mood="parisian"] .banner-word { font-style: italic; font-size: 5.4em; }

/* Gilt hairlines take the place of pattern */
html[data-mood="parisian"] .plaque::before { border-color: color-mix(in srgb, var(--marigold) 85%, transparent); }
html[data-mood="parisian"] .vlabel::before { border-color: color-mix(in srgb, var(--marigold) 80%, transparent); }
html[data-mood="parisian"] :is(.pat-gingham, .pat-dots, .pat-cabana, .pat-ticking) {
  background-color: color-mix(in srgb, var(--ground, var(--p2)) 38%, var(--linen));
  background-image:
    repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--ink) 8%, transparent) 13px 14px),
    var(--grain);
  background-size: auto;
}
html[data-mood="parisian"] .door {
  --door-bg: color-mix(in srgb, var(--blue) 42%, var(--linen));
  border: 0;
  background: var(--grain), linear-gradient(var(--door-bg), var(--door-bg));
  box-shadow: inset 0 0 0 1px var(--gilt);
}
html[data-mood="parisian"] .door--paper { --door-bg: color-mix(in srgb, var(--rose) 42%, var(--linen)); }
html[data-mood="parisian"] .door::after { inset: 9px; border: 3px double color-mix(in srgb, var(--marigold) 70%, transparent); }
html[data-mood="parisian"] .awning {
  height: 40px;
  background: repeating-linear-gradient(90deg, var(--denim) 0 22px, var(--linen) 22px 44px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 28px no-repeat,
    radial-gradient(circle 11px at 50% 0, #000 97%, #0000) bottom left / 22px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 28px no-repeat,
    radial-gradient(circle 11px at 50% 0, #000 97%, #0000) bottom left / 22px 12px repeat-x;
}
/* The collage's paper strip becomes a French ticking ribbon */
html[data-mood="parisian"] .cmp-strip { background-image: repeating-linear-gradient(90deg, var(--denim) 0 .28em, var(--linen) .28em 1.5em), var(--grain); }
/* Fewer, finer ornaments: gold stars only */
html[data-mood="parisian"] .dot { display: none; }
html[data-mood="parisian"] .spark { --c: var(--marigold); }
/* Toile de Jouy as this mood's one pattern; gilt flourishes; no crafty tape */
html[data-mood="parisian"] { --flourish-c: var(--gilt); }
html[data-mood="parisian"] .little-things { background: linear-gradient(rgb(249 246 240 / .86), rgb(249 246 240 / .86)), url("art/toile.webp") 0 0 / 380px auto; }
html[data-mood="parisian"] .details-band { background: linear-gradient(rgb(249 246 240 / .7), rgb(249 246 240 / .7)), url("art/toile.webp") 0 0 / 380px auto; }
html[data-mood="parisian"] .fine-print { background: linear-gradient(rgb(249 246 240 / .82), rgb(249 246 240 / .82)), url("art/toile.webp") 0 0 / 380px auto; }
html[data-mood="parisian"] .tape { display: none; }
html[data-mood="parisian"] .taped::before,
html[data-mood="parisian"] .taped::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 3.4rem;
  height: 3.4rem;
  background: url("art/corner-gilt.webp") center / contain no-repeat;
  opacity: 1;
  filter: drop-shadow(0 1px 1px rgb(48 48 45 / .25));
}
html[data-mood="parisian"] .taped::before { top: -.55rem; left: -.55rem; translate: none; rotate: none; }
/* Top corners only: pinned figures carry a caption underneath */
html[data-mood="parisian"] .taped::after { top: -.55rem; right: -.55rem; rotate: 90deg; }
/* Quieter motion */
html[data-mood="parisian"] .door--digital:hover .badge { rotate: 18deg; }
html[data-mood="parisian"] .door--paper:hover .badge { rotate: -18deg; }

/* ======================= Riviera: bright and graphic ======================= */
html[data-mood="riviera"] {
  --romantic: "Fraunces", Georgia, serif;
  --hand: "Yellowtail", cursive;
  --brush: "Yellowtail", cursive;
  --mischief: "DM Sans", system-ui, sans-serif;
  --cream: #FBF7EE;
}
html[data-mood="riviera"] * { font-variation-settings: "SOFT" 100, "WONK" 0; }
html[data-mood="riviera"] :is(h1, h2, h3, .item-name, .sm-title, .step-name, .prices dt, .wm-big) { font-weight: 560; letter-spacing: -.02em; }
html[data-mood="riviera"] :is(h1, h2, h3) em { font-weight: 480; }
html[data-mood="riviera"] :is(.label, .vlabel, .nav-link, .plaque, .caption, .item-meta, .fn, .hero-fn, .wm-small, .kind, .factors li, .prices dd, .also, .dl-sticker, .airmail-label) { font-weight: 600; letter-spacing: .13em; }
/* The retro serif runs wider, so the biggest type comes down a size */
html[data-mood="riviera"] .hero h1 { font-size: clamp(3.1rem, 6.2vw, 6.4rem); }
html[data-mood="riviera"] .page-head h1 { font-size: clamp(3rem, 7vw, 6.4rem); }
html[data-mood="riviera"] .lt-lines { font-size: clamp(1.8rem, 3.2vw, 3rem); }
html[data-mood="riviera"] :is(.doors h2, .market h2) { font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
html[data-mood="riviera"] .door h3 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
html[data-mood="riviera"] .final h2 { font-size: clamp(2.4rem, 5.2vw, 4.8rem); }

/* Bold cabana stripes */
html[data-mood="riviera"] :is(.pat-gingham, .pat-dots, .pat-ticking, .pat-cabana) {
  background-color: var(--ground, var(--p2));
  background-image:
    repeating-linear-gradient(90deg, var(--ground, var(--p2)) 0 1.5em, var(--cream) 1.5em 3em),
    var(--grain);
  background-size: auto;
}
html[data-mood="riviera"] .door {
  --door-stripe: var(--door-accent);
  border-width: 16px;
  background:
    var(--grain) padding-box,
    linear-gradient(var(--door-bg), var(--door-bg)) padding-box,
    repeating-linear-gradient(90deg, var(--door-stripe) 0 14px, var(--cream) 14px 28px) border-box;
}
html[data-mood="riviera"] .awning {
  height: 84px;
  background: repeating-linear-gradient(90deg, var(--butter) 0 64px, var(--cream) 64px 128px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% 52px no-repeat,
    radial-gradient(circle 32px at 50% 0, #000 97%, #0000) bottom left / 64px 32px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% 52px no-repeat,
    radial-gradient(circle 32px at 50% 0, #000 97%, #0000) bottom left / 64px 32px repeat-x;
}
html[data-mood="riviera"] .little-things { background: color-mix(in srgb, var(--butter) 30%, var(--linen)); }
html[data-mood="riviera"] .lt-mark { --pressed-on: color-mix(in srgb, var(--butter) 30%, var(--linen)); }
html[data-mood="riviera"] .fine-print { background: color-mix(in srgb, var(--butter) 26%, var(--linen)); }
html[data-mood="riviera"] .cmp-strip { background-image: repeating-linear-gradient(90deg, var(--butter) 0 1.1em, var(--cream) 1.1em 2.2em), var(--grain); }
/* Pill labels and buttons */
html[data-mood="riviera"] .vlabel {
  --vl-bg: var(--denim);
  --vl-fg: var(--cream);
  -webkit-mask: none;
  mask: none;
  border-radius: 999px;
}
html[data-mood="riviera"] .vlabel::before { display: none; }
html[data-mood="riviera"] .plaque { -webkit-mask: none; mask: none; border-radius: 999px; }
html[data-mood="riviera"] .plaque::before { border-radius: 999px; inset: 4px; }
/* Clean and graphic: no scattered sparkles */
html[data-mood="riviera"] :is(.spark, .dot, .sprig) { display: none; }
html[data-mood="riviera"] { --flourish-c: var(--denim); }
html[data-mood="riviera"] .taped::before, html[data-mood="riviera"] .tape { background-image: url("art/tape-butter.webp"); }