/* ============================================================
   FLYING FUNK — epk.css
   Paper-white and editorial on purpose: this page exists to be
   read by a promoter and saved as a PDF.
   ============================================================ */

:root{
  --paper:#FBF7F0;
  --ink:#16121A;
  --muted:#6B6259;
  --rule:#E0D7CA;
  --magenta:#D01A6E;
  --gold:#B8801A;
  --display:'Anton',sans-serif;
  --body:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,p,dl,dd,ul,figure,blockquote{margin:0}
ul{list-style:none;padding:0}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}

/* The HTML `hidden` attribute is only a UA-stylesheet `display:none`, so any
   author rule that sets display (.lightbox{display:grid}, .mobile-menu{display:flex},
   .nextup{display:grid} ...) silently defeats it. Make `hidden` actually hide. */
[hidden]{display:none !important}

body{
  margin:0;background:#EFE9DF;color:var(--ink);
  font-family:var(--body);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Screen-only toolbar ---------- */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.5rem);
  background:var(--ink);color:var(--paper);font-size:.82rem;
}
.topbar a{text-decoration:none;opacity:.8}
.topbar a:hover{opacity:1}
.topbar button{
  font:inherit;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  font-size:.72rem;padding:.6rem 1.2rem;border:0;border-radius:100px;
  background:#FFC93C;color:var(--ink);cursor:pointer;transition:background .25s;
}
.topbar button:hover{background:#FF2D95;color:var(--paper)}

/* ---------- Sheet ---------- */
.sheet{
  max-width:860px;margin:clamp(1rem,4vw,3rem) auto;
  background:var(--paper);
  padding:clamp(1.6rem,5vw,4rem);
  box-shadow:0 20px 60px rgba(0,0,0,.14);
}

.kicker{
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--magenta);font-weight:700;
}

/* ---------- Masthead ---------- */
.mast{
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;
  padding-bottom:1.6rem;border-bottom:3px solid var(--ink);
}
.mast__name{
  font-family:var(--display);font-size:clamp(2.6rem,8vw,5rem);
  line-height:.88;text-transform:uppercase;letter-spacing:-.01em;margin:.5rem 0 .6rem;
}
.mast__tag{font-size:clamp(.95rem,1.6vw,1.15rem);color:var(--muted);max-width:38ch}
.mast__facts{display:grid;gap:.55rem;min-width:170px}
.mast__facts div{display:grid;grid-template-columns:5.4rem 1fr;gap:.7rem;font-size:.82rem}
.mast__facts dt{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-top:.22rem;
}
.mast__facts dd{font-weight:500}
@media (max-width:640px){
  .mast{grid-template-columns:1fr;align-items:start}
  .mast__facts{min-width:0}
}

/* ---------- Hero shot ---------- */
.heroshot{margin:1.8rem 0 0;border:1px solid var(--rule)}
.heroshot img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---------- Blocks ---------- */
.block{padding-top:2.2rem;margin-top:2.2rem;border-top:1px solid var(--rule)}
.block > h2{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--magenta);font-weight:700;margin-bottom:1rem;
}
.lede{font-size:1.1rem;line-height:1.6;max-width:62ch}
.prose p{margin-bottom:1rem;max-width:66ch}
.prose p:last-child{margin-bottom:0}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.86rem;line-height:1.8}

/* ---------- Quotes ---------- */
.quotes{display:grid;gap:1.2rem}
blockquote{border-left:3px solid var(--gold);padding-left:1.2rem}
blockquote p{font-size:1.05rem;font-style:italic;line-height:1.55}
blockquote cite{
  display:block;margin-top:.5rem;font-style:normal;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Lineup ---------- */
.lineup{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.1rem 1.6rem}
.lineup li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:.9rem;
}
.lineup strong{font-weight:700}
.lineup span{color:var(--muted);font-size:.82rem;text-align:right}

/* ---------- Link lists ---------- */
.links li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--rule);font-size:.88rem;
}
.links a{color:var(--magenta);font-weight:500;word-break:break-word}
.links span{color:var(--muted);font-size:.8rem;text-align:right;flex:none}

/* ---------- Specs ---------- */
.specs{display:grid;gap:.1rem}
.specs div{
  display:grid;grid-template-columns:11rem 1fr;gap:1rem;
  padding:.65rem 0;border-bottom:1px solid var(--rule);
}
.specs dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding-top:.2rem}
.specs dd{font-size:.92rem}
@media (max-width:560px){.specs div{grid-template-columns:1fr;gap:.1rem}}

/* ---------- Dates ---------- */
.dates li{
  display:grid;grid-template-columns:9rem 1fr;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--rule);font-size:.88rem;
}
.dates__when{color:var(--muted);font-size:.8rem;padding-top:.1rem}
@media (max-width:560px){.dates li{grid-template-columns:1fr;gap:.1rem}}

/* ---------- Footer ---------- */
.foot{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  margin-top:2.4rem;padding-top:2rem;border-top:3px solid var(--ink);
}
.foot h2{
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--magenta);font-weight:700;margin-bottom:.8rem;
}
.foot a{color:var(--magenta);font-weight:500;word-break:break-word}
@media (max-width:560px){.foot{grid-template-columns:1fr}}

.stamp{
  margin-top:2rem;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- Print ---------- */
@page{ margin:14mm; }

@media print{
  body{background:#fff}
  .no-print{display:none!important}
  .sheet{
    max-width:none;margin:0;padding:0;box-shadow:none;background:#fff;
  }
  .block{
    break-inside:avoid;page-break-inside:avoid;
    padding-top:1.4rem;margin-top:1.4rem;
  }
  .break-before{break-before:page;page-break-before:always;border-top:0;margin-top:0}
  .heroshot img{aspect-ratio:21/9}
  blockquote,.lineup li,.specs div,.dates li{break-inside:avoid}
  a{text-decoration:none}
  /* Spell links out — a printed page can't be clicked. */
  .links a::after{content:" (" attr(href) ")";font-size:.7rem;color:#666;font-weight:400}
  .foot a::after{content:"";}
}

/* ---------- Two configurations, side by side ---------- */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media (max-width:640px){.twoup{grid-template-columns:1fr}}
.conf{border:1px solid var(--rule);padding:1.3rem 1.4rem;background:#fff}
.conf h3{font-family:var(--display);font-size:1.35rem;text-transform:uppercase;line-height:1.05;margin-bottom:.5rem}
.conf__tag{font-size:.86rem;color:var(--muted);margin-bottom:1rem}
.conf dl{display:grid;gap:.1rem}
.conf dl div{display:grid;grid-template-columns:5rem 1fr;gap:.8rem;padding:.45rem 0;border-bottom:1px solid var(--rule);font-size:.85rem}
.conf dt{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:.18rem}
.conf__best{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:1rem}
.conf__best li{font-size:.72rem;padding:.25rem .6rem;border-radius:100px;background:#F0E9DC;color:var(--muted)}
.lineup li em{font-style:normal;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);flex:none}
.lineup li{flex-wrap:wrap}
@media print{.conf{break-inside:avoid}}