/* ============================================
   FLOURISH LAYER — personality additions
   Papel picado, marigolds, talavera, marquee,
   script accents, archival grain, big type breaks
   ============================================ */

:root {
  --font-big: 'DM Serif Display', 'Fraunces', Georgia, serif;
}

/* Google Font for DM Serif Display is loaded via flourish.js */

/* ---------- PAGE-TOP PAPEL PICADO STRIP ---------- */
.fl-picado-strip {
  position: relative;
  height: 48px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  z-index: 5;
}
.fl-picado-strip::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg,
      #D94B3A 0 12.5%,
      #E8B53E 12.5% 25%,
      #4DA188 25% 37.5%,
      #C73566 37.5% 50%,
      #D94B3A 50% 62.5%,
      #E8B53E 62.5% 75%,
      #4DA188 75% 87.5%,
      #C73566 87.5% 100%);
  -webkit-mask-image:
    radial-gradient(circle 3px at 8px 12px, transparent 99%, #000 100%),
    radial-gradient(circle 3px at 24px 12px, transparent 99%, #000 100%),
    radial-gradient(circle 5px at 16px 26px, transparent 99%, #000 100%),
    linear-gradient(#000, #000);
  mask-image:
    radial-gradient(circle 3px at 8px 12px, transparent 99%, #000 100%),
    radial-gradient(circle 3px at 24px 12px, transparent 99%, #000 100%),
    radial-gradient(circle 5px at 16px 26px, transparent 99%, #000 100%),
    linear-gradient(#000, #000);
  -webkit-mask-size: 32px 48px, 32px 48px, 32px 48px, 100% 100%;
  mask-size: 32px 48px, 32px 48px, 32px 48px, 100% 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-composite: source-out, source-out, source-out, source-over;
  mask-composite: exclude, exclude, exclude, add;
  clip-path: polygon(
    0 0, 100% 0, 100% 55%,
    98% 55%, 96% 100%, 92% 100%, 90% 55%,
    87% 55%, 85% 100%, 81% 100%, 79% 55%,
    76% 55%, 74% 100%, 70% 100%, 68% 55%,
    65% 55%, 63% 100%, 59% 100%, 57% 55%,
    54% 55%, 52% 100%, 48% 100%, 46% 55%,
    43% 55%, 41% 100%, 37% 100%, 35% 55%,
    32% 55%, 30% 100%, 26% 100%, 24% 55%,
    21% 55%, 19% 100%, 15% 100%, 13% 55%,
    10% 55%, 8% 100%, 4% 100%, 2% 55%,
    0 55%);
  opacity: 0.85;
  filter: saturate(0.9);
}
/* faint string */
.fl-picado-strip::after {
  content: '';
  position: absolute;
  top: 6px; left: 0; right: 0;
  height: 1px;
  background: rgba(26,20,16,0.15);
}

/* ---------- MARQUEE BAND ---------- */
.fl-marquee {
  background: var(--cochineal);
  color: var(--paper);
  padding: 20px 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.fl-marquee-track {
  display: flex;
  gap: 48px;
  animation: flMarquee 50s linear infinite;
  white-space: nowrap;
  width: max-content;
}
@keyframes flMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.fl-marquee-item {
  font-family: var(--font-big);
  font-size: clamp(24px, 2.8vw, 40px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 48px;
  color: var(--paper);
}
.fl-marquee-item::after {
  content: '✻';
  color: var(--saffron);
  font-style: normal;
  font-size: 22px;
  font-weight: 400;
}

/* ---------- MARIGOLD PUNCTUATION ---------- */
.fl-marigold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 56px auto;
  color: var(--saffron);
}
.fl-marigold::before, .fl-marigold::after {
  content: '';
  flex: 0 1 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  opacity: 0.4;
}
.fl-marigold-svg {
  width: 32px; height: 32px;
  flex-shrink: 0;
}

/* ---------- TALAVERA CORNER ORNAMENTS on section-head ---------- */
.section-head {
  position: relative;
}
.section-head.fl-ornamented::before,
.section-head.fl-ornamented::after {
  content: '';
  position: absolute;
  width: 32px; height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'><circle cx='16' cy='16' r='2' fill='%23A3291F'/><circle cx='16' cy='4' r='1.5' fill='%23E08A1E'/><circle cx='16' cy='28' r='1.5' fill='%23E08A1E'/><circle cx='4' cy='16' r='1.5' fill='%232E5E4E'/><circle cx='28' cy='16' r='1.5' fill='%232E5E4E'/><circle cx='7' cy='7' r='1' fill='%23A3291F'/><circle cx='25' cy='7' r='1' fill='%23A3291F'/><circle cx='7' cy='25' r='1' fill='%23A3291F'/><circle cx='25' cy='25' r='1' fill='%23A3291F'/><path d='M16 8 Q20 12 16 16 Q12 12 16 8 Z' fill='%23A3291F' opacity='0.3'/><path d='M16 24 Q20 20 16 16 Q12 20 16 24 Z' fill='%23A3291F' opacity='0.3'/></svg>");
  background-size: contain;
  opacity: 0.7;
}
.section-head.fl-ornamented::before {
  top: -12px; left: 50%;
  transform: translateX(-50%);
}
.section-head.fl-ornamented::after { display: none; }

/* ---------- SCRIPT ACCENT (over headlines) ---------- */
.fl-script {
  font-family: var(--font-script);
  font-size: clamp(28px, 3vw, 42px);
  color: var(--cochineal);
  display: block;
  line-height: 1;
  margin-bottom: 8px;
  transform: rotate(-2deg);
  transform-origin: left;
}

/* ---------- HERO TWEAKS: warmer, more color ---------- */
.hero {
  background:
    radial-gradient(ellipse at 10% 0%, rgba(224,138,30,0.12), transparent 40%),
    radial-gradient(ellipse at 90% 100%, rgba(163,41,31,0.08), transparent 40%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  position: relative;
}
/* floating marigold motifs behind hero text */
.hero::before {
  content: '';
  position: absolute;
  top: 12%; right: 6%;
  width: 120px; height: 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23E08A1E' opacity='0.5'><circle cx='50' cy='50' r='8'/><ellipse cx='50' cy='25' rx='6' ry='12'/><ellipse cx='50' cy='75' rx='6' ry='12'/><ellipse cx='25' cy='50' rx='12' ry='6'/><ellipse cx='75' cy='50' rx='12' ry='6'/><ellipse cx='33' cy='33' rx='7' ry='10' transform='rotate(45 33 33)'/><ellipse cx='67' cy='33' rx='7' ry='10' transform='rotate(-45 67 33)'/><ellipse cx='33' cy='67' rx='7' ry='10' transform='rotate(-45 33 67)'/><ellipse cx='67' cy='67' rx='7' ry='10' transform='rotate(45 67 67)'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  animation: flBloom 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 8%; left: 4%;
  width: 80px; height: 80px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23A3291F' opacity='0.35'><circle cx='50' cy='50' r='6'/><ellipse cx='50' cy='28' rx='5' ry='10'/><ellipse cx='50' cy='72' rx='5' ry='10'/><ellipse cx='28' cy='50' rx='10' ry='5'/><ellipse cx='72' cy='50' rx='10' ry='5'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  animation: flBloom 10s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes flBloom {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(12deg) scale(1.06); }
}

/* Bigger italic hero line */
.hero h1 em {
  font-family: var(--font-big);
  font-weight: 400;
  font-style: italic;
  font-size: 1.1em;
  color: var(--cochineal);
  line-height: 0.92;
}

/* Hero photo: warm paper-tape frame */
.hero-visual-photo {
  box-shadow: 0 32px 80px rgba(26,20,16,0.25), 0 12px 32px rgba(26,20,16,0.15);
  position: relative;
}
.hero-visual-photo::before {
  content: '';
  position: absolute;
  top: -16px; left: 24%;
  width: 80px; height: 24px;
  background: rgba(224,138,30,0.65);
  transform: rotate(-4deg);
  box-shadow: 0 2px 8px rgba(26,20,16,0.15);
  z-index: 3;
}
.hero-visual-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05), transparent 40%);
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Hero visual grain */
.hero-visual { position: relative; }
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4, 0 0 0 0 0.3, 0 0 0 0 0.2, 0 0 0 0.25 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}

/* ---------- BIG TYPE BREAK ---------- */
.fl-type-break {
  padding: 100px 0 80px;
  background: var(--paper-deep);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}
.fl-type-break-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  text-align: center;
}
.fl-type-break h2 {
  font-family: var(--font-big);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.fl-type-break h2 em {
  font-style: italic;
  color: var(--cochineal);
}
.fl-type-break .fl-script {
  margin: 0 auto 16px;
  display: block;
  text-align: center;
  transform: rotate(-2deg);
}
.fl-type-break-tag {
  display: inline-block;
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--saffron);
  font-weight: 700;
}
.fl-type-break-tag::before, .fl-type-break-tag::after {
  content: '—';
  margin: 0 12px;
  color: var(--text-faint);
}

/* ---------- VOICES QUOTE ROTATOR ---------- */
.fl-voices {
  background: var(--saffron);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
  color: var(--ink);
}
.fl-voices::before {
  content: '"';
  position: absolute;
  left: 3%; top: -80px;
  font-family: var(--font-big);
  font-size: 420px;
  color: rgba(26,20,16,0.07);
  line-height: 1;
  font-style: italic;
}
.fl-voices-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
}
.fl-voices-label {
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cochineal-dk);
  margin-bottom: 32px;
}
.fl-voice {
  display: none;
  animation: flFade .8s ease;
}
.fl-voice.active { display: block; }
@keyframes flFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fl-voice blockquote {
  font-family: var(--font-big);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 32px;
  text-wrap: balance;
}
.fl-voice cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cochineal-dk);
}
.fl-voices-dots {
  display: flex;
  gap: 8px;
  margin-top: 40px;
}
.fl-voices-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--cochineal-dk);
  background: transparent;
  cursor: pointer;
  transition: background .2s;
}
.fl-voices-dot.active { background: var(--cochineal-dk); }

/* ---------- Tweaks to existing section-head for bigger italic heads ---------- */
.section-head h2 {
  text-wrap: balance;
}

/* Photo archival treatment helper */
.fl-archival {
  position: relative;
}
.fl-archival::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(122,30,22,0.12) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Footer papel at top */
.footer {
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--cochineal) 0 20%,
    var(--saffron) 20% 40%,
    var(--jade) 40% 60%,
    var(--bougainvillea) 60% 80%,
    var(--cochineal) 80% 100%);
}

/* Big callout boost */
.callout.cochineal h2 {
  font-family: var(--font-big);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
}

/* Section head eyebrows with side dashes */
.eyebrow.fl-dashed::before,
.eyebrow.fl-dashed::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: 0 12px;
  opacity: 0.5;
}

/* Mobile fixes */
@media (max-width: 720px) {
  .hero::before { width: 70px; height: 70px; top: 8%; right: 4%; }
  .hero::after { width: 50px; height: 50px; }
  .fl-voices::before { font-size: 260px; top: -40px; }
  .fl-marquee-item { gap: 32px; }
}