/* ============================================================
   Oingo Boingo Reunion — shared stylesheet
   Bone paper, ink, pumpkin, aubergine.

   Class names deliberately match the other projects in the
   series so the page templates and the build script port across
   unchanged. Nothing else is shared.

   WHY THIS PALETTE. Every other project in the series is dark:
   oxblood, espresso, navy, violet-black, spruce, and plenty of
   true black. This one is a light sheet of paper, for two
   reasons. The band's own visual language is stark black-on-
   white — the marching-band graphics, the suits — and, more to
   the point, this site's job is to correct a misunderstanding.
   A correction reads as a document, not as a Halloween poster.

   The two accents carry the site's argument, which is that the
   thing people search for ended and something else is on sale:

       PUMPKIN   = what is on sale now — and every action
       AUBERGINE = Halloween, the tradition and the 1995 ending
       STRUCK    = the names that ended

   THE SIGNATURE DEVICE is a perforation: the tear line of a
   ticket stub, running along the foot of the hero and of every
   band, and standing in miniature as the brand mark. The whole
   site is an argument about reading what is actually printed on
   the ticket, so the ticket is the ornament.

   Type: Archivo Black for display — a heavy grotesque with a
   letterpress weight to it, unlike the Playfair / Fraunces /
   Cardo / Bevan / Alfa Slab / Young Serif already in the series.
   Inter for everything else.

   Radius 9px. Every other project sits at 0, 2, 3, 4, 5, 6, 7,
   8 or 10.

   CONTRAST against #f4efe4: ink 15.6:1, muted 7.2:1, dim 5.8:1,
   pumpkin 5.9:1, aubergine 8.6:1, struck 5.8:1. Bone on the
   pumpkin button 6.4:1.
   INK ON PUMPKIN IS 2.6:1 — which is exactly what the ticket
   widget inherits if its button text colour is left alone.
   ============================================================ */

:root{
  --bg:#f4efe4;           /* bone paper */
  --bg-2:#ece5d7;
  --card:#fcf9f2;
  --card-2:#f2ece0;
  --line:#d9d0be;
  --line-strong:#bdb19a;

  --text:#1a1714;         /* ink */
  --muted:#554e44;
  --dim:#635c50;

  --pumpkin:#a63209;      /* what is on sale, and every action */
  --pumpkin-hi:#8a2907;   /* hover goes darker on a light ground */
  --pumpkin-soft:rgba(166,50,9,.09);

  --aubergine:#5b2a86;    /* Halloween: the tradition, and the ending */
  --aubergine-soft:rgba(91,42,134,.09);

  --btn-text:#fff7eb;

  --shadow:0 12px 28px -22px rgba(26,23,20,.55);
  --radius:9px;
  --maxw:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Paper tooth. A flat cream fill looks like an unstyled page. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,.font-head{
  font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-weight:400;
  letter-spacing:-.02em;line-height:1.08;
}
h3,h4{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-.005em;line-height:1.3}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:780px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dim{color:var(--dim)}
[hidden]{display:none !important}

::selection{background:var(--pumpkin);color:var(--btn-text)}

/* ============ PERFORATION ============
   The tear line of a ticket stub, anchored to the bottom of a
   section: punched holes above a dashed rule. */
.perf{
  position:absolute;left:0;right:0;bottom:0;height:26px;z-index:1;pointer-events:none;
  background-repeat:repeat-x;background-position:left bottom;background-size:32px 26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='26' viewBox='0 0 32 26'%3E%3Ccircle cx='16' cy='17' r='5' fill='%23d9d0be'/%3E%3Crect x='0' y='3' width='18' height='1.6' fill='%23d9d0be'/%3E%3C/svg%3E");
}
.perf-hero{height:34px;background-size:42px 34px}

/* Brand mark: a ticket stub, torn. */
.brand-mark{
  display:inline-block;width:24px;height:16px;margin-right:10px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Crect x='.8' y='1.6' width='12' height='12.8' rx='2' fill='%23a63209'/%3E%3Crect x='15.6' y='1.6' width='7.6' height='12.8' rx='2' fill='%235b2a86'/%3E%3Cpath d='M14.2 1v3M14.2 6.2v3.4M14.2 11.8v3.2' stroke='%231a1714' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ============ BUTTONS ============
   Bone on pumpkin, 6.4:1. Ink on pumpkin would be 2.6:1. */
.btn{
  display:inline-block;
  background:var(--pumpkin);color:var(--btn-text);
  font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;font-size:12px;padding:13px 24px;
  border:1px solid var(--pumpkin);border-radius:var(--radius);
  cursor:pointer;
  transition:background .17s ease, border-color .17s ease, transform .12s ease;
}
.btn:hover{background:var(--pumpkin-hi);border-color:var(--pumpkin-hi);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:transparent;border-color:var(--aubergine);color:var(--aubergine)}

/* ============ FLAGS ============
   One billing, on every row. There is no second act to choose. */
.flag{
  display:inline-block;font-family:'Inter',sans-serif;
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 9px;vertical-align:1px;border-radius:4px;line-height:1.5;
  background:var(--pumpkin-soft);border:1px solid rgba(166,50,9,.35);color:var(--pumpkin);
}
a.flag:hover{border-color:currentColor}

/* ============ HEADER ============ */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,228,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{
  font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:17px;
  letter-spacing:-.02em;
  white-space:nowrap;line-height:1;display:inline-flex;align-items:center;
}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{color:var(--muted);font-weight:500;font-size:14px;transition:color .16s}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--pumpkin)}
.nav .btn{padding:9px 15px;font-size:11px;color:var(--btn-text)}
.nav .btn:hover{color:var(--btn-text)}
@media(max-width:1100px){.nav-links a:not(.btn){display:none}}
.nav .btn{white-space:nowrap}
@media(max-width:480px){
  .nav{gap:10px;height:60px}
  .brand{font-size:14px}
  .brand-mark{width:20px;height:13px;margin-right:8px}
  .nav .btn{padding:8px 11px;font-size:10px;letter-spacing:.06em}
}

/* ============ IMAGE SLOTS ============ */
.media{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--card-2);border:1px solid var(--line)}
.media img{width:100%;height:100%;object-fit:cover}
.media-16x9{aspect-ratio:16/9}
.media-21x9{aspect-ratio:21/9}

/* ============ HERO ============ */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-photo{position:absolute;inset:0;z-index:0}
.hero-photo img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:saturate(70%);color:transparent}
.media img{color:transparent}   /* a missing file shows the ground, not its alt text */
.hero-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(244,239,228,.72) 0%,rgba(244,239,228,.88) 58%,var(--bg) 100%);
}
/* padding-block, not padding: the shorthand zeroes the .wrap side gutter,
   which is invisible on desktop and glues the hero copy to the screen edge on
   a phone. */
.hero-inner{position:relative;z-index:2;padding-block:88px 110px}
.eyebrow{
  color:var(--pumpkin);font-weight:700;letter-spacing:.2em;font-size:11px;
  text-transform:uppercase;margin-bottom:18px;font-family:'Inter',sans-serif;
}
.hero h1{font-size:clamp(36px,6.6vw,74px);margin-bottom:12px}
.hero h1 .h1-line{
  display:block;font-family:'Inter',sans-serif;font-weight:500;
  font-size:clamp(17px,2.2vw,23px);line-height:1.45;letter-spacing:-.003em;
  color:var(--muted);margin-top:20px;max-width:760px;
}
.hero .sub{
  font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:clamp(11px,1.4vw,13px);color:var(--aubergine);margin-bottom:24px;
}
.hero p.lead{max-width:640px;color:var(--muted);font-size:17px;margin-bottom:30px}
.hero p.lead strong{color:var(--text);font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.stats{display:flex;gap:0;margin-top:46px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);width:fit-content;overflow:hidden;background:var(--card)}
.stats:empty{display:none}
.stat{padding:16px 28px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat .n{font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:34px;line-height:1;color:var(--pumpkin)}
.stat .l{color:var(--dim);font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;margin-top:8px;font-weight:600}
@media(max-width:480px){
  .hero-inner{padding-block:56px 96px}
  .stats{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .stat{padding:14px 12px}
  .stat .n{font-size:26px}
  .stat .l{font-size:9px;letter-spacing:.1em}
}

/* ============ PAGE HEAD ============ */
.page-head{position:relative;padding:52px 0 44px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.page-head h1{font-size:clamp(27px,4.4vw,46px);margin-bottom:14px}
.page-head p.lead{color:var(--muted);max-width:720px;font-size:17px}
.crumbs{font-size:11px;color:var(--dim);margin-bottom:16px;letter-spacing:.12em;text-transform:uppercase}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--pumpkin)}
.crumbs span{margin:0 8px;color:var(--line-strong)}
.page-hero-media{margin-top:28px}
.page-hero-media img{opacity:.92}

/* ============ SECTIONS ============ */
section{padding:64px 0}
section.tight{padding:44px 0}
section.band{position:relative;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding-bottom:96px}
section.band > .wrap,section.band > .wrap-narrow{position:relative;z-index:2}
.section-head{margin-bottom:30px}
.section-head .eyebrow{margin-bottom:10px}
.section-head h2{font-size:clamp(22px,3.5vw,35px)}
/* A short run of perforation under every heading. */
.section-head h2::after{
  content:"";display:block;width:74px;height:12px;margin-top:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='12' viewBox='0 0 74 12'%3E%3Cg fill='%23a63209'%3E%3Ccircle cx='5' cy='6' r='3.4'/%3E%3Ccircle cx='19' cy='6' r='3.4'/%3E%3Ccircle cx='33' cy='6' r='3.4'/%3E%3C/g%3E%3Ccircle cx='47' cy='6' r='3.4' fill='%235b2a86'/%3E%3Cg fill='%23bdb19a'%3E%3Ccircle cx='61' cy='6' r='3.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center/contain;
}
.section-head p{color:var(--muted);max-width:700px;margin-top:14px}
.section-head p a{color:var(--pumpkin);border-bottom:1px solid rgba(166,50,9,.4)}
.section-head p.verified{font-size:12.5px;color:var(--dim);margin-top:10px}
.section-head p.verified time{color:var(--text);font-weight:600}

/* ============ PROSE ============ */
.prose h2{font-size:clamp(20px,2.9vw,28px);margin:42px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:18px;margin:30px 0 10px;color:var(--text)}
.prose p{color:var(--muted);margin-bottom:16px}
.prose ul,.prose ol{color:var(--muted);margin:0 0 16px 20px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--text);font-weight:600}
.prose em{color:var(--text)}
.prose blockquote{margin:22px 0;padding:16px 20px;border-left:3px solid var(--aubergine);background:var(--aubergine-soft);color:var(--text);border-radius:0 var(--radius) var(--radius) 0}
.prose blockquote p{color:var(--text);margin:0}
.prose blockquote cite{display:block;margin-top:8px;font-size:13px;color:var(--dim);font-style:normal}
.prose a{color:var(--pumpkin);font-weight:500;border-bottom:1px solid rgba(166,50,9,.4)}
.prose a:hover{border-bottom-color:var(--pumpkin)}
.prose > p:first-child{font-size:18px;color:var(--text)}

/* ============ DATE ROWS ============
   One billing on every row, so the left edge carries no tour
   colour: it is pumpkin because the show is on sale. What the
   row does have to say is whether the listings carry it. */
.dates{display:flex;flex-direction:column;gap:10px}
.date-row{
  position:relative;display:grid;grid-template-columns:92px 1fr auto;gap:20px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--pumpkin);
  border-radius:var(--radius);
  padding:15px 20px;box-shadow:var(--shadow);
  transition:border-color .18s, transform .13s;
}
.date-row:hover{border-color:var(--line-strong);border-left-color:var(--pumpkin);transform:translateY(-2px)}
.d-date{text-align:center;border-right:1px solid var(--line);padding-right:14px}
.d-date .m{color:var(--pumpkin);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.d-date .day{font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:27px;line-height:1.08;color:var(--text)}
.d-date .yr{color:var(--dim);font-size:10.5px;letter-spacing:.1em}
.d-info .city{font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:17px;line-height:1.25;letter-spacing:-.015em}
.d-info .city a:hover{color:var(--pumpkin)}
.d-info .venue{color:var(--muted);font-size:14px;margin-top:4px}
.d-info .venue-note{color:var(--aubergine);font-size:12.5px;font-weight:600}
.d-info .support{font-size:11.5px;margin-top:8px;display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;color:var(--dim)}
.d-info .with{color:var(--muted)}
.d-info .with.none{color:var(--dim);font-style:italic}
.d-info .no-listing{
  color:var(--aubergine);background:var(--aubergine-soft);
  border:1px solid rgba(91,42,134,.3);border-radius:4px;
  padding:2px 8px;font-weight:600;font-size:10.5px;letter-spacing:.04em;
}
.date-row .btn{white-space:nowrap;padding:10px 17px;font-size:11px}
@media(max-width:640px){
  .date-row{grid-template-columns:58px 1fr;grid-template-areas:"date info" "date cta";row-gap:11px;padding:14px 14px}
  .d-date{grid-area:date;padding-right:10px}.d-info{grid-area:info}.date-row .btn{grid-area:cta;justify-self:start}
  .d-date .day{font-size:22px}
}
.month-head{
  display:flex;align-items:baseline;gap:14px;margin:34px 0 4px;
  font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:18px;letter-spacing:-.015em;
}
.month-head:first-child{margin-top:0}
.month-head .count{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;color:var(--dim);letter-spacing:.16em;text-transform:uppercase}
.month-head::after{content:"";flex:1;height:1px;background:var(--line)}
.dates-empty{color:var(--dim)}
.dates-empty a{color:var(--pumpkin)}

/* ============ TIMELINE ============
   Six names, in order. The ended ones are struck through. */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:104px;top:8px;bottom:8px;width:1px;background:var(--line-strong)}
.tl-item{display:grid;grid-template-columns:90px 1fr;gap:30px;padding:14px 0;position:relative}
.tl-item::before{
  content:"";position:absolute;left:99px;top:24px;width:11px;height:11px;border-radius:50%;
  background:var(--bg-2);border:2px solid var(--line-strong);
}
.tl-years{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--dim);text-align:right;padding-top:8px;white-space:nowrap}
.tl-name{font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;font-size:clamp(16px,2vw,20px);line-height:1.3;letter-spacing:-.015em;display:inline}
.tl-status{display:inline-block;margin-left:10px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:4px;border:1px solid var(--line-strong);color:var(--dim);vertical-align:3px}
.tl-body p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:620px}
.tl-item.is-done .tl-name{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(99,92,80,.65);text-decoration-thickness:1px}
/* The ending itself: Halloween 1995. */
.tl-item.is-end::before{background:var(--aubergine);border-color:var(--aubergine)}
.tl-item.is-end .tl-name{color:var(--aubergine)}
.tl-item.is-end .tl-status{color:var(--aubergine);border-color:rgba(91,42,134,.4);background:var(--aubergine-soft)}
.tl-item.is-end .tl-years{color:var(--aubergine)}
/* What is on sale. */
.tl-item.is-now::before{background:var(--pumpkin);border-color:var(--pumpkin)}
.tl-item.is-now .tl-name{color:var(--text)}
.tl-item.is-now .tl-name:hover{color:var(--pumpkin)}
.tl-item.is-now .tl-status{color:var(--pumpkin);border-color:rgba(166,50,9,.4);background:var(--pumpkin-soft)}
.tl-item.is-now .tl-years{color:var(--pumpkin)}
@media(max-width:640px){
  .timeline::before{left:6px}
  .tl-item{grid-template-columns:1fr;gap:2px;padding-left:28px}
  .tl-item::before{left:1px;top:20px}
  .tl-years{text-align:left;padding-top:0;font-size:13px}
  .tl-status{margin-left:0;margin-top:6px;display:table}
}

/* ============ REPERTOIRE ============ */
.setlist{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.setlist .k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--aubergine);margin-bottom:14px}
.setlist .songs{columns:2 240px;column-gap:40px;margin:0 0 0 22px;color:var(--text);list-style:square}
.setlist .songs li{margin-bottom:6px;break-inside:avoid;padding-left:4px}
.setlist .songs li::marker{color:var(--line-strong);font-size:12px}
.setlist .note{color:var(--dim);font-size:13px;margin-top:18px;border-top:1px solid var(--line);padding-top:14px}

/* ============ TABLE ============ */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table.data{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--pumpkin);background:var(--card-2);font-weight:700}
table.data tr:last-child td{border-bottom:none}
table.data tbody tr:hover{background:var(--card-2)}
table.data td{color:var(--muted)}
table.data td.city{font-weight:600;color:var(--text)}
table.data td.off{color:var(--dim)}
table.data strong{color:var(--text)}
table.data caption{caption-side:top;text-align:left;padding:12px 16px;color:var(--dim);font-size:13px;border-bottom:1px solid var(--line)}

/* ============ PANELS ============ */
.info-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.info-card h3{font-size:15px;margin-bottom:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--aubergine)}
.info-card .kv{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.info-card .kv:last-child{border-bottom:none}
.info-card .kv span:first-child{color:var(--dim)}
.info-card .kv span:last-child{text-align:right;font-weight:500}
.info-card a{color:var(--pumpkin)}

.about-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:44px;align-items:start}
@media(max-width:800px){.about-grid{grid-template-columns:1fr}}

.takeaways{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--pumpkin);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow)}
.takeaways h3{font-size:15px;margin-bottom:16px;letter-spacing:.1em;text-transform:uppercase}
.takeaways ul{list-style:none}
.takeaways li{color:var(--muted);font-size:15px;padding-left:24px;position:relative;margin-bottom:13px}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{content:"";position:absolute;left:4px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--pumpkin)}
.takeaways strong{color:var(--text)}
.takeaways a{color:var(--pumpkin);border-bottom:1px solid rgba(166,50,9,.4)}

.tip{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--aubergine);border-radius:var(--radius);padding:20px 22px;margin:26px 0}
.tip.warn{background:var(--pumpkin-soft);border-color:rgba(166,50,9,.32);border-left-color:var(--pumpkin)}
.tip strong{color:var(--text);display:block;margin-bottom:7px;font-size:16px;font-weight:700}
.tip p{color:var(--muted);font-size:14.5px;margin:0}
.tip p + p{margin-top:10px}
.tip a{color:var(--pumpkin);font-weight:600;border-bottom:1px solid rgba(166,50,9,.4)}
.tip blockquote{margin:12px 0 0;padding:12px 16px;border-left:2px solid var(--aubergine);background:var(--bg-2);font-size:15px;color:var(--text)}

.sourcing{margin-top:36px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
.sourcing h3{font-size:15px;margin-bottom:12px;letter-spacing:.1em;text-transform:uppercase}
.sourcing p{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.sourcing p:last-child{margin-bottom:0}
.sourcing a{color:var(--pumpkin);border-bottom:1px solid rgba(166,50,9,.4)}

/* ============ WIDGET ============ */
.widget-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;min-height:120px}
.widget-note{color:var(--dim);font-size:13px;margin-top:12px}
.widget-note a{color:var(--pumpkin);border-bottom:1px solid rgba(166,50,9,.4)}
.widget-pending{border:1px dashed var(--line-strong);border-radius:var(--radius);padding:30px 20px;text-align:center;color:var(--dim);font-size:14px}
.widget-pending strong{display:block;color:var(--muted);font-size:16px;margin-bottom:6px}

/* ============ FAQ ============ */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:0 20px;transition:border-color .18s}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{cursor:pointer;padding:17px 0;font-weight:600;font-size:16.5px;line-height:1.35;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--pumpkin);font-size:22px;flex-shrink:0;font-weight:400;line-height:1;transition:transform .18s}
.faq details[open] summary::after{content:"\2013";transform:rotate(180deg)}
.faq details p{color:var(--muted);padding:0 0 20px;font-size:15px;max-width:66ch}
.faq details a{color:var(--pumpkin);border-bottom:1px solid rgba(166,50,9,.4)}

/* ============ RELATED ============ */
.related{border-top:1px solid var(--line);padding-top:26px;margin-top:40px}
.related h3{font-size:12px;margin-bottom:14px;color:var(--dim);text-transform:uppercase;letter-spacing:.14em}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13px;color:var(--muted);transition:border-color .16s,color .16s}
.pills a:hover{border-color:var(--pumpkin);color:var(--pumpkin)}

/* ============ SITEMAP PAGE ============ */
.sitemap-group{margin-bottom:28px}
.sitemap-group h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--aubergine);margin-bottom:12px}
.sitemap-group ul{list-style:none}
.sitemap-group li{margin-bottom:9px;color:var(--muted);font-size:14.5px}
.sitemap-group a{color:var(--text);font-weight:600;border-bottom:1px solid var(--line-strong)}
.sitemap-group a:hover{color:var(--pumpkin);border-bottom-color:var(--pumpkin)}

/* ============ FOOTER ============ */
footer.site{background:var(--bg-2);border-top:1px solid var(--line);padding:52px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
footer .brand{margin-bottom:12px;display:flex;font-size:16px}
footer p{color:var(--muted);font-size:14px}
footer h4{font-size:11.5px;margin-bottom:13px;color:var(--pumpkin);text-transform:uppercase;letter-spacing:.13em}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
footer ul a{color:var(--muted);font-size:14px;transition:color .16s}
footer ul a:hover{color:var(--pumpkin)}
/* Long-tail search pills. Deliberately lowercase raw-search phrasing: the
   in-body .related pills carry the human-facing anchors, and the same query
   must never appear in both blocks or they compete for the same result. */
.foot-searches{border-top:1px solid var(--line);padding-top:20px;margin-bottom:18px}
.foot-searches h4{font-size:11.5px;margin-bottom:12px}
.foot-searches .pills a{font-size:12.5px;padding:6px 13px;text-transform:lowercase}

.foot-meta{border-top:1px solid var(--line);padding-top:20px;margin-bottom:16px;color:var(--dim);font-size:13px}
.disclaimer{border-top:1px solid var(--line);padding-top:20px;color:var(--dim);font-size:12.5px;line-height:1.65}
.disclaimer strong{color:var(--muted)}
.foot-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.foot-links a{color:var(--muted);font-size:12.5px}
.foot-links a:hover{color:var(--pumpkin)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ============ ACCESSIBILITY ============ */
:focus-visible{outline:2px solid var(--pumpkin);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

/* ============ PRINT ============ */
@media print{
  body::after,header.site,footer.site,.widget-box,.perf,.pills{display:none}
  body{background:#fff;color:#000}
  .date-row,.info-card,.takeaways,.tip,.sourcing,.setlist{border-color:#bbb;box-shadow:none;background:#fff}
  .section-head h2::after{display:none}
  a{color:#000}
}