/* ---- Shared site skeleton: every template gets the same data, panels and three band colors ---- */
.epk{min-width:0;overflow-wrap:break-word;background:var(--c-bg);color:var(--c-fg)}
.epk h1,.epk h2,.epk p,.epk ul,.epk ol,.epk blockquote,.epk figure{margin:0;padding:0}
.epk ul,.epk ol{list-style:none}
.epk button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.epk button:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.body{display:grid;gap:24px;min-width:0}
.p{min-width:0;display:grid;gap:10px;align-content:start}
.nav{display:flex;flex-wrap:wrap;gap:2px 4px}
.nav a{min-height:44px;padding:0 10px}
.ph{display:block;width:100%;height:100%;object-fit:cover}
.photo{aspect-ratio:2/1;overflow:hidden;max-width:100%}
.cover{aspect-ratio:1;overflow:hidden;max-width:100%}
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px}
.facts dt{color:var(--c-dim)}
.facts dd{margin:0;white-space:pre-line}
dl{margin:0}
.tracks{display:grid;gap:2px}
.tracks button{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;min-height:44px;padding:4px 6px;position:relative;overflow:hidden}
.tracks button:not(.on):hover{background:color-mix(in srgb,var(--c-fg) 10%,transparent)}
.epk .tracks .on{font-weight:700;background:var(--c-hi);color:var(--c-on)}
.tracks .on::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:currentColor;animation:prog 30s linear forwards}
@keyframes prog{to{width:100%}}
.vids,.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.vid{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden}
.vid .cover{aspect-ratio:auto;height:100%}
.vid::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-left:24px solid #fff;border-block:15px solid transparent;filter:drop-shadow(0 1px 4px #000)}
.cap{font-size:.88em;display:block;margin-top:4px}
.shows{display:grid;gap:8px}
.shows li{display:grid;grid-template-columns:minmax(84px,auto) minmax(0,1fr);gap:10px}
/* Softer text uses --c-dim (render.php: always 4.5:1 or better), never see-through dimming */
.past,.past *{color:var(--c-dim)}
.epk .btn{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid currentColor;font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:8px}
.flier{display:block;width:min(100%,240px);height:auto}
.logo-tile{padding:18px;display:grid;place-items:center;text-align:center;min-height:90px;overflow-wrap:anywhere}
.lyr summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.lyr{border:0;padding:0}
.lyr p{white-space:pre-line;padding-bottom:10px}
.foot{padding:18px;font-size:12px;color:var(--c-dim)}
blockquote cite{display:block;font-style:normal;font-size:.85em;margin-top:4px;color:var(--c-dim)}

/* ---- T1 Gig Poster: screen-printed, two inks ---- */
.t-poster{font:600 18px/1.3 "Barlow Condensed","Arial Narrow",sans-serif}
.t-poster .name{font:400 min(calc(170cqw / var(--len)),30cqw)/.95 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:-.005em}
.t-poster .hero{padding:18px 18px 0;display:grid;gap:10px}
.t-poster .tag{font-size:clamp(20px,3.4cqw,34px);line-height:1.1}
.t-poster .hero .photo{filter:grayscale(1) contrast(1.35);aspect-ratio:5/2}
.t-poster:not(.is-dark) .hero .photo{mix-blend-mode:multiply}
.t-poster .next{background:var(--c-hi);color:var(--c-on);padding:10px 12px;font:400 clamp(20px,3.6cqw,36px)/1.1 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.02em}
.t-poster .nav{text-transform:uppercase;border-block:3px solid var(--c-fg);margin-top:4px}
.t-poster .body{padding:18px}
.t-poster h2{font:400 clamp(30px,5cqw,48px)/1 Anton,Impact,sans-serif;text-transform:uppercase}
.t-poster .p{border-top:6px solid var(--c-fg);padding-top:8px}
.t-poster .p-shows li{font:400 clamp(20px,3cqw,28px)/1.15 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.t-poster .btn{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
@container epk (min-width:720px){.t-poster .body{grid-template-columns:1fr 1fr}.t-poster .p-shows,.t-poster .p-photos{grid-column:1/-1}}

/* ---- T2 Photocopy Zine: cut and pasted on a copier ---- */
.t-zine{font:16px/1.45 "Special Elite","Courier New",monospace;background-image:radial-gradient(color-mix(in srgb,var(--c-fg) 12%,transparent) 1px,transparent 1.4px);background-size:7px 7px}
.t-zine .hero{padding:22px 16px 6px;display:grid;gap:12px}
.t-zine .name{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:min(calc(135cqw / var(--len)),13cqw);line-height:1}
.t-zine .word{display:inline-flex;flex-wrap:wrap}
.t-zine .L{display:inline-block;padding:.08em .14em;font-family:Anton,Impact,sans-serif;text-transform:uppercase}
.t-zine .L0{background:var(--c-fg);color:var(--c-bg);transform:rotate(-4deg)}
.t-zine .L1{background:var(--c-panel);color:var(--c-fg);transform:rotate(3deg);font-family:"Bodoni Moda",serif;font-weight:800}
.t-zine .L2{background:var(--c-hi);color:var(--c-on);transform:rotate(-2deg);font-family:"Special Elite",monospace}
.t-zine .L3{background:var(--c-fg);color:var(--c-bg);transform:rotate(5deg);font-family:"Bodoni Moda",serif;font-style:italic}
.t-zine .L4{background:var(--c-panel);color:var(--c-fg);transform:rotate(-5deg);outline:2px solid var(--c-fg)}
.t-zine .tag{background:var(--c-fg);color:var(--c-bg);padding:4px 8px;width:fit-content;max-width:100%;transform:rotate(-.6deg)}
.t-zine .photo,.t-zine .cover{filter:grayscale(1) contrast(1.7) brightness(1.05)}
.t-zine .hero .photo{transform:rotate(.8deg);border:6px solid var(--c-panel);box-shadow:2px 3px 0 var(--c-fg)}
.t-zine .nav{text-decoration:underline}
.t-zine .next{font-size:1.1em;background:var(--c-hi);color:var(--c-on);width:fit-content;max-width:100%;padding:2px 8px}
.t-zine .body{padding:12px 16px 20px;display:block;columns:1}
.t-zine .p{background:var(--c-panel);padding:14px;margin-bottom:18px;break-inside:avoid;box-shadow:2px 3px 0 var(--c-fg);position:relative}
.t-zine .p:nth-child(odd){transform:rotate(-.5deg)}
.t-zine .p:nth-child(even){transform:rotate(.45deg)}
.t-zine .p::before{content:"";position:absolute;top:-9px;left:40%;width:70px;height:18px;background:color-mix(in srgb,var(--c-fg) 22%,transparent);transform:rotate(-3deg)}
.t-zine h2{font:400 28px/1 Anton,Impact,sans-serif;text-transform:uppercase;background:var(--c-fg);color:var(--c-bg);width:fit-content;padding:3px 8px}
@container epk (min-width:720px){.t-zine .body{columns:2;column-gap:22px;padding-inline:26px}.t-zine .hero{padding-inline:26px}}

/* ---- T3 Record Sleeve: album cover stays beside you like a gatefold ---- */
.t-sleeve{font:16px/1.55 Karla,Arial,sans-serif}
.t-sleeve .hero{padding:18px;display:grid;gap:12px;align-content:start}
.t-sleeve .name{font:800 min(calc(135cqw / var(--len)),15cqw)/1 "Bodoni Moda",Georgia,serif}
.t-sleeve .tag{font:italic 500 19px/1.3 "Bodoni Moda",Georgia,serif;color:var(--c-hi)}
.t-sleeve .hero>.cover{box-shadow:0 14px 30px #0009}
.t-sleeve .next{font-size:14px;border-top:1px solid var(--c-line);padding-top:8px}
.t-sleeve .body{padding:18px}
.t-sleeve h2{font:500 italic 30px/1.1 "Bodoni Moda",Georgia,serif;color:var(--c-hi)}
.t-sleeve .p{border-top:1px solid var(--c-line);padding-top:14px}
.t-sleeve .btn{border-width:1px}
@container epk (min-width:720px){.t-sleeve{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.t-sleeve .hero{position:sticky;top:0;align-self:start;padding:26px}.t-sleeve .name{font-size:min(calc(62cqw / var(--len)),8cqw)}.t-sleeve .body{padding:26px 26px 26px 8px}.t-sleeve .foot{grid-column:1/-1}}

/* ---- T4 One-Sheet: what a booker wants, on one printable page ---- */
.t-sheet{font:14.5px/1.45 Archivo,Arial,sans-serif}
.t-sheet .hero{padding:18px;display:grid;gap:10px;border-bottom:4px solid var(--c-hi)}
.t-sheet .name{font:800 clamp(30px,7cqw,64px)/1 Archivo,Arial,sans-serif;letter-spacing:-.02em}
.t-sheet .tag{opacity:.85;font-size:17px}
.t-sheet .next{font-weight:600;color:var(--c-hi)}
.t-sheet .nav{color:var(--c-hi);font-size:13px}
.t-sheet .nav a{padding:0 8px 0 0}
.t-sheet .hero .photo{aspect-ratio:3/1}
.t-sheet .body{padding:18px;display:block;columns:1}
.t-sheet .p{break-inside:avoid;margin-bottom:22px}
.t-sheet h2{font:600 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--c-hi);border-bottom:1px solid var(--c-hi);padding-bottom:4px}
.t-sheet .btn{color:var(--c-hi);border-width:1px;font-size:13px}
@container epk (min-width:720px){.t-sheet .hero{grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:24px;padding:26px}.t-sheet .hero .photo{grid-column:2;grid-row:1/7;aspect-ratio:auto;min-height:190px}.t-sheet .body{columns:2;column-gap:28px;padding:26px}}
@container epk (min-width:1000px){.t-sheet .body{columns:3}}

/* ---- T5 Blackout: a dark room, one light, heavy lettering ---- */
.t-black{font:18px/1.55 "EB Garamond",Georgia,serif}
.t-black .hero{position:relative;text-align:center;display:grid;justify-items:center;gap:8px;padding-bottom:16px}
.t-black .hero .photo{width:100%;aspect-ratio:2/1;filter:grayscale(.85) brightness(.75) contrast(1.15);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.t-black .name{font:400 min(calc(190cqw / var(--len)),22cqw)/1 "Pirata One",Georgia,serif;margin-top:-9cqw;position:relative;padding-inline:12px}
.t-black .tag{font-style:italic;opacity:.8;padding-inline:16px}
.t-black .next{color:var(--c-hi);padding-inline:16px}
.t-black .nav{justify-content:center;font-size:16px}
.t-black .body{max-width:720px;margin-inline:auto;padding:12px 18px 24px;gap:40px}
.t-black h2{font:400 38px/1 "Pirata One",Georgia,serif;text-align:center;color:var(--c-hi)}
.t-black .p{gap:14px}
.t-black .p::after{content:"";height:1px;margin-top:18px;background:linear-gradient(90deg,transparent,var(--c-hi),transparent)}
.t-black .btn{border-width:1px;border-color:var(--c-hi)}

/* ---- T6 Mixtape: the site is a cassette and its J-card ---- */
.t-tape{font:400 16px/1.45 "Nunito Sans",Arial,sans-serif}
.t-tape .hero{padding:18px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:linear-gradient(180deg,var(--c-bg) 0 72%,color-mix(in srgb,var(--c-hi) 55%,#ffd23f) 72% 77%,var(--c-hi) 77% 82%,color-mix(in srgb,var(--c-hi) 60%,#7a1fa2) 82% 87%,color-mix(in srgb,var(--c-hi) 30%,#2a1a6e) 87% 100%)}
.t-tape .deck{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.cass{background:#1d2a30;border-radius:12px;padding:5%;aspect-ratio:1.62;display:grid;grid-template-rows:auto 1fr;gap:6%;max-width:560px;width:100%;box-shadow:0 8px 0 #0006}
.cass-label{background:#fff2d6;color:#1d2a30;border-radius:4px;padding:3% 5%;border-bottom:8px solid var(--c-hi);min-width:0}
.t-tape .name{font:400 min(calc(120cqw / var(--len)),8cqw)/1.05 Righteous,Arial,sans-serif}
.t-tape .tag{font:18px/1.05 VT323,monospace}
.reels{display:flex;justify-content:space-around;align-items:center;background:#0e1518;border-radius:60px;padding:0 6%;min-height:0}
.reel{width:24%;aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(#fff2d6 0 30deg,#2a3940 30deg 60deg);border:5px solid #2a3940}
.playing .reel{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.t-tape .hero .photo{border:4px solid var(--c-fg);width:100%;max-width:560px}
.t-tape .next{font:22px/1.1 VT323,monospace;background:#1d2a30;color:#fff2d6;padding:8px 10px;width:fit-content;max-width:100%}
.t-tape .nav{font:20px/1 VT323,monospace;background:var(--c-fg);color:var(--c-bg);border-radius:4px;width:fit-content;max-width:100%}
.t-tape .body{padding:18px}
.t-tape .p{background:var(--c-fg);color:var(--c-bg);padding:14px;border-radius:4px;--c-dim:var(--c-dim-inv)}
.t-tape h2{font:400 24px/1.1 Righteous,Arial,sans-serif;border-bottom:2px dashed var(--c-hi);padding-bottom:6px}
.t-tape .tracks button{font-family:VT323,monospace;font-size:21px;border-bottom:1px solid color-mix(in srgb,var(--c-bg) 25%,transparent)}
.t-tape .tracks button:not(.on):hover{background:color-mix(in srgb,var(--c-bg) 10%,transparent)}
@container epk (min-width:720px){.t-tape .deck{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.t-tape .name{font-size:min(calc(50cqw / var(--len)),4.4cqw)}.t-tape .hero,.t-tape .body{padding:26px}.t-tape .body{grid-template-columns:1fr 1fr}.t-tape .p-shows,.t-tape .p-photos{grid-column:1/-1}}

/* ---- T7 Bento: rounded tiles of different sizes, like a modern product page ---- */
.t-bento{font:15px/1.5 Geist,Arial,sans-serif;padding:12px}
.t-bento .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:12px}
.t-bento .tile{border-radius:22px;overflow:hidden;background:var(--c-panel);min-width:0}
.t-bento .tile-photo{position:relative;color:#fff}
.t-bento .tile-photo .photo{aspect-ratio:3/2;height:100%}
.t-bento .tile-photo::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#000c);pointer-events:none}
.t-bento .tile-photo .name{position:absolute;left:18px;right:18px;bottom:14px;z-index:1;font:800 min(calc(135cqw / var(--len)),11cqw)/1 Geist,Arial,sans-serif;letter-spacing:-.04em}
.t-bento .tile-info{padding:16px;display:grid;gap:12px;align-content:space-between}
.t-bento .tile-info .cover{border-radius:14px;width:min(100%,180px)}
.t-bento .tag{font-size:17px;font-weight:600;letter-spacing:-.01em}
.t-bento .next{background:var(--c-hi);color:var(--c-on);padding:10px 14px;border-radius:14px;font-weight:600}
.t-bento .nav{display:none}
.t-bento .body{gap:12px}
.t-bento .p{background:var(--c-panel);border-radius:22px;padding:18px}
.t-bento h2{font:600 13px/1.3 Geist,Arial,sans-serif;color:var(--c-hi)}
.t-bento .btn{border:0;border-radius:99px;background:color-mix(in srgb,var(--c-fg) 9%,transparent)}
.t-bento .tracks button,.t-bento .vid,.t-bento .photo,.t-bento .logo-tile,.t-bento .flier{border-radius:12px}
@container epk (min-width:720px){.t-bento .hero{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.t-bento .body{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:dense}.t-bento .p{grid-column:span 3}.t-bento .p-facts,.t-bento .p-links,.t-bento .p-contact{grid-column:span 2}.t-bento .p:last-child{grid-column:1/-1}.t-bento .tile-photo .name{font-size:min(calc(90cqw / var(--len)),7cqw)}}

/* ---- T8 Full Bleed: one big photo, name on top, plenty of room below ---- */
.t-bleed{font:17px/1.6 Manrope,Arial,sans-serif}
.t-bleed .hero{position:relative;color:#fff;display:grid}
.t-bleed .hero>*{grid-area:1/1}
.t-bleed .hero .photo{aspect-ratio:4/5}
.t-bleed .over{align-self:end;z-index:1;padding:64px 18px 18px;display:grid;gap:8px;background:linear-gradient(transparent,#000d)}
.t-bleed .name{font:800 min(calc(135cqw / var(--len)),16cqw)/1 Manrope,Arial,sans-serif;letter-spacing:-.05em}
.t-bleed .tag{font-size:17px;opacity:.92}
.t-bleed .next{font-weight:600}
.t-bleed .nav{align-self:start;justify-self:start;z-index:1;margin:12px;padding:0 6px;background:#0007;backdrop-filter:blur(12px);border-radius:24px;font-size:13px;gap:0;max-width:calc(100% - 24px)}
.t-bleed .body{max-width:1040px;margin-inline:auto;padding:32px 18px;gap:40px}
.t-bleed h2{font:800 24px/1.1 Manrope,Arial,sans-serif;letter-spacing:-.03em;color:var(--c-hi)}
.t-bleed .btn{border:1px solid var(--c-line);border-radius:99px}
@container epk (min-width:720px){.t-bleed .hero .photo{aspect-ratio:16/9}.t-bleed .name{font-size:min(calc(90cqw / var(--len)),8cqw)}.t-bleed .over{padding:50px 36px 22px}.t-bleed .nav{margin:18px 36px}.t-bleed .p{grid-template-columns:200px minmax(0,1fr);column-gap:28px}.t-bleed .p>h2{grid-row:1/span 9}.t-bleed .body{padding:56px 36px}}

/* ---- T9 Big Type: one saturated color and enormous lowercase words ---- */
.t-big{font:600 18px/1.4 "Bricolage Grotesque",Arial,sans-serif;overflow:hidden}
.t-big .hero{display:grid;gap:16px;padding-top:18px}
.t-big .name{font:800 min(calc(150cqw / var(--len)),28cqw)/.9 "Bricolage Grotesque",Arial,sans-serif;text-transform:lowercase;letter-spacing:-.05em;padding-inline:14px}
.t-big .strip{overflow:hidden;background:var(--c-hi);color:var(--c-on);white-space:nowrap;padding:8px 0;font-weight:800}
.t-big .strip span{display:inline-block;animation:slide 40s linear infinite}
@keyframes slide{to{transform:translateX(-50%)}}
.t-big .hero .photo{aspect-ratio:16/9}
.t-big .next{padding-inline:18px;font-weight:800;font-size:clamp(20px,3cqw,28px);line-height:1.15}
.t-big .nav{padding-inline:10px;text-transform:lowercase}
.t-big .body{padding:24px 18px;gap:44px}
.t-big h2{font:800 clamp(46px,10cqw,110px)/.95 "Bricolage Grotesque",Arial,sans-serif;text-transform:lowercase;letter-spacing:-.05em;color:var(--c-hi)}
.t-big .btn{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg);border-radius:99px}
@container epk (min-width:720px){.t-big .body{grid-template-columns:1fr 1fr;padding-inline:28px}.t-big .p-music,.t-big .p-shows,.t-big .p-photos{grid-column:1/-1}.t-big .name{padding-inline:24px}.t-big .next{padding-inline:28px}.t-big .nav{padding-inline:18px}}

/* ---- T10 Glass: the album art colors the whole page, frosted panels float on it ---- */
.t-glass{font:16px/1.5 Outfit,Arial,sans-serif;position:relative;overflow:hidden;isolation:isolate}
.t-glass::before{content:"";position:absolute;inset:-80px;background:var(--cover) center/cover;filter:blur(60px) saturate(1.4);z-index:-2}
.t-glass::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c-bg) 62%,transparent);z-index:-1}
.t-glass .hero{padding:18px;display:grid;gap:16px}
.t-glass .hero .cover{width:min(62%,280px);border-radius:14px;box-shadow:0 18px 44px #0008}
.t-glass .meta{display:grid;gap:6px;align-content:end;min-width:0}
.t-glass .kicker{font-size:13px;font-weight:600;color:var(--c-hi)}
.t-glass .name{font:800 min(calc(135cqw / var(--len)),14cqw)/1 Outfit,Arial,sans-serif;letter-spacing:-.03em}
.t-glass .tag{font-size:18px;opacity:.88}
.t-glass .nav{grid-column:1/-1;font-size:14px}
.t-glass .body{padding:0 18px 18px;gap:14px}
.t-glass .p{background:color-mix(in srgb,var(--c-panel) 55%,transparent);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--c-fg) 14%,transparent);border-radius:18px;padding:18px}
.t-glass h2{font:600 20px/1.2 Outfit,Arial,sans-serif}
.t-glass .btn{border:1px solid color-mix(in srgb,var(--c-fg) 28%,transparent);border-radius:99px}
.t-glass .tracks button,.t-glass .vid,.t-glass .photo,.t-glass .logo-tile{border-radius:10px}
.t-glass .foot{position:relative}
@container epk (min-width:720px){.t-glass .hero{grid-template-columns:auto minmax(0,1fr);padding:30px;column-gap:26px}.t-glass .hero .cover{width:240px}.t-glass .name{font-size:min(calc(95cqw / var(--len)),9cqw)}.t-glass .body{grid-template-columns:1fr 1fr;padding:0 30px 30px}.t-glass .p-music,.t-glass .p-photos{grid-column:1/-1}}

/* ---- T11 Link Page: a single phone-shaped column of big buttons, like a link in a bio ---- */
.t-link{font:16px/1.5 "DM Sans",Arial,sans-serif;padding:26px 16px}
.t-link .hero,.t-link .body{max-width:480px;margin-inline:auto}
.t-link .hero{display:grid;justify-items:center;text-align:center;gap:8px;margin-bottom:22px}
.t-link .hero .photo{width:132px;aspect-ratio:1;border-radius:50%;border:4px solid var(--c-panel);box-shadow:0 0 0 2px var(--c-hi)}
.t-link .name{font:700 clamp(26px,min(calc(170cqw / var(--len)),8cqw),40px)/1.1 "DM Sans",Arial,sans-serif;letter-spacing:-.02em}
.t-link .tag{opacity:.8}
.t-link .next{background:var(--c-hi);color:var(--c-on);border-radius:99px;padding:10px 18px;font-weight:600;margin-top:6px}
.t-link .nav{display:none}
.t-link .body{gap:12px}
.t-link .p{background:var(--c-panel);border-radius:18px;padding:16px;box-shadow:0 1px 3px #0002}
.t-link h2{font:700 16px/1.3 "DM Sans",Arial,sans-serif}
.t-link .row{display:grid;gap:8px}
.t-link .btn{justify-content:center;width:100%;text-align:center;border:0;border-radius:99px;background:color-mix(in srgb,var(--c-hi) 14%,var(--c-panel))}
.t-link .tracks button{border-radius:12px}

/* ---- T12 Gallery: quiet, like a photographer's site. The photos do the talking ---- */
.t-gallery{font:16px/1.6 Geist,Arial,sans-serif}
.t-gallery .hero{padding:18px;display:grid;gap:14px}
.t-gallery .name{font:400 min(calc(160cqw / var(--len)),17cqw)/1 "Instrument Serif",Georgia,serif;letter-spacing:-.02em}
.t-gallery .nav{font-size:13px;gap:0 2px;margin-left:-10px}
.t-gallery .hero .photo{aspect-ratio:3/2}
.t-gallery .tag{font:italic 400 24px/1.2 "Instrument Serif",Georgia,serif}
.t-gallery .next{font-size:14px;color:var(--c-hi)}
.t-gallery .body{padding:30px 18px;gap:48px}
.t-gallery h2{font:400 30px/1.1 "Instrument Serif",Georgia,serif}
.t-gallery .shows li{border-top:1px solid var(--c-line);padding-top:8px}
.t-gallery .btn{border:0;border-bottom:1px solid currentColor;padding:0 2px}
@container epk (min-width:720px){.t-gallery .hero{padding:30px}.t-gallery .hero .photo{aspect-ratio:2/1}.t-gallery .name{font-size:min(calc(120cqw / var(--len)),12cqw)}.t-gallery .body{padding:50px 30px}.t-gallery .p{grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:24px}.t-gallery .p>h2{grid-row:1/span 9}}

/* ---- Genre templates, from a review of band sites (research/band-site-review.md). Own type, color and layout: no band's logo, art or wording ---- */

/* T13 Spotlight: theatrical metal. Dark stage, one colored light, gothic lettering, a framed poster */
.t-spot{font:500 18px/1.5 "Cormorant Garamond",Georgia,serif}
.t-spot .hero{position:relative;overflow:hidden;text-align:center;display:grid;justify-items:center;gap:12px;padding:14px 18px 26px;background:radial-gradient(ellipse 55% 50% at 50% 42%,color-mix(in srgb,var(--c-hi) 45%,transparent),transparent 74%)}
.t-spot .hero::before,.t-spot .hero::after{content:"";position:absolute;top:-10%;width:34%;height:90%;background:linear-gradient(color-mix(in srgb,var(--c-hi) 38%,transparent),transparent);pointer-events:none}
.t-spot .hero::before{left:0;clip-path:polygon(0 0,18% 0,100% 100%,62% 100%)}
.t-spot .hero::after{right:0;clip-path:polygon(82% 0,100% 0,38% 100%,0 100%)}
.t-spot .hero>*{position:relative;z-index:1}
.t-spot .nav{justify-content:center;font:400 15px/1 "New Rocker",Georgia,serif}
.t-spot .name{font:400 min(calc(130cqw / var(--len)),17cqw)/1 "New Rocker",Georgia,serif}
.t-spot .hero .cover{width:min(58cqw,320px);box-shadow:0 0 50px color-mix(in srgb,var(--c-hi) 60%,transparent)}
.t-spot .tag{font:400 clamp(17px,2.4cqw,24px)/1.2 "New Rocker",Georgia,serif}
.t-spot .next{border:1px solid var(--c-fg);padding:10px 18px}
.t-spot .body{max-width:820px;margin-inline:auto;padding:26px 18px;gap:36px}
.t-spot h2{font:400 34px/1.1 "New Rocker",Georgia,serif;text-align:center;color:var(--c-hi)}
.t-spot .btn{border-width:1px}

/* T14 Gilded: prog and post-metal. Dark moss, antique gold, tall elegant capitals, wide letter spacing */
.t-gild{font:500 18px/1.55 "Cormorant Garamond",Georgia,serif}
.t-gild .hero{display:grid;position:relative}
.t-gild .hero>*{grid-area:1/1}
.t-gild .hero .photo{aspect-ratio:4/5;filter:saturate(.6) brightness(.4)}
.t-gild .over{z-index:1;display:grid;align-content:center;justify-items:center;gap:14px;text-align:center;padding:26px 16px;background:linear-gradient(color-mix(in srgb,var(--c-bg) 62%,transparent),color-mix(in srgb,var(--c-bg) 62%,transparent) 55%,var(--c-bg))}
.t-gild .name{font:400 min(calc(145cqw / var(--len)),21cqw)/1 Italiana,Georgia,serif;text-transform:uppercase;color:var(--c-hi)}
.t-gild .tag,.t-gild .next{font:600 12px/1.6 Archivo,Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase}
.t-gild .nav{justify-content:center;font:600 11px/1 Archivo,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.t-gild .body{max-width:920px;margin-inline:auto;padding:28px 18px;gap:40px}
.t-gild .p{text-align:center}
.t-gild .p::before{content:"◆";color:var(--c-hi);font-size:12px}
.t-gild h2{font:400 30px/1.1 Italiana,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c-hi)}
.t-gild .row,.t-gild .nav{justify-content:center}
.t-gild .shows li,.t-gild .facts,.t-gild table{text-align:left}
.t-gild .btn{border-width:1px;border-color:var(--c-hi);font:600 12px/1 Archivo,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
@container epk (min-width:720px){.t-gild .hero .photo{aspect-ratio:16/8}}

/* T15 Halftone: rock. Black and white print dots, one red, labels on white chips */
.t-tone{font:600 16px/1.45 Archivo,Arial,sans-serif}
.t-tone .hero{display:grid}
.t-tone .hero .photo{position:relative;aspect-ratio:4/3}
.t-tone .hero .photo img{filter:grayscale(1) contrast(1.5)}
.t-tone .hero .photo::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(#000 34%,transparent 37%) 0 0/6px 6px}
.t-tone .hero .photo::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(var(--c-hi) 42%,transparent 45%) 0 0/54px 54px;-webkit-mask-image:linear-gradient(to left,#000,transparent 42%);mask-image:linear-gradient(to left,#000,transparent 42%)}
.t-tone .ttl{padding:16px;display:grid;gap:8px;background:var(--c-hi);color:var(--c-on)}
.t-tone .name{font:400 min(calc(135cqw / var(--len)),18cqw)/.95 "Archivo Black",Impact,sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.t-tone .next,.t-tone .book{padding:10px 16px 0;font-weight:800;text-transform:uppercase}
.t-tone .nav{padding:12px 16px;gap:6px;text-transform:uppercase;font-size:13px;font-weight:800}
.t-tone .nav a{background:var(--c-fg);color:var(--c-bg);min-height:44px}
.t-tone .body{padding:14px 16px 24px;gap:26px}
.t-tone h2{font:400 22px/1.15 "Archivo Black",Impact,sans-serif;text-transform:uppercase;background:var(--c-fg);color:var(--c-bg);width:fit-content;padding:4px 8px}
.t-tone .btn{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg);text-transform:uppercase;font-weight:800}
@container epk (min-width:720px){.t-tone .hero .photo{aspect-ratio:2/1}.t-tone .body{grid-template-columns:1fr 1fr;padding-inline:24px}.t-tone .ttl,.t-tone .next,.t-tone .book,.t-tone .nav{padding-inline:24px}.t-tone .p-music,.t-tone .p-photos,.t-tone .p-shows{grid-column:1/-1}}

/* T16 Riot: punk and hip-hop. Charcoal, hot pink, marker lettering */
.t-riot{font:500 18px/1.5 "Cormorant Garamond",Georgia,serif;background-image:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 3px)}
.t-riot .hero{display:grid;justify-items:center;text-align:center;gap:14px;padding:24px 16px}
.t-riot .name{font:400 min(calc(130cqw / var(--len)),18cqw)/1 "Permanent Marker",Impact,sans-serif;color:var(--c-hi);text-transform:uppercase;transform:rotate(-1deg)}
.t-riot .nav{justify-content:center;font-style:italic;font-weight:700;text-transform:uppercase}
.t-riot .tag{font-style:italic;font-size:clamp(20px,3cqw,30px);color:var(--c-hi)}
.t-riot .hero .photo{width:100%;max-width:1440px}
.t-riot .next{background:var(--c-hi);color:var(--c-on);padding:8px 14px;font-style:italic;font-weight:700}
.t-riot .body{max-width:1440px;margin-inline:auto;padding:12px 16px 28px;gap:32px}
.t-riot h2{font:400 30px/1.1 "Permanent Marker",Impact,sans-serif;color:var(--c-hi);text-transform:uppercase}
.t-riot .shows{font:13.5px/1.5 "JetBrains Mono",monospace}
.t-riot .btn{background:var(--c-hi);color:var(--c-on);border-color:var(--c-hi);font-style:italic;font-weight:700;text-transform:uppercase}
@container epk (min-width:720px){.t-riot .body{grid-template-columns:1fr 1fr}.t-riot .p-music,.t-riot .p-photos,.t-riot .p-shows{grid-column:1/-1}}

/* T17 Spectrum: pop. Deep navy, a rainbow across the name, thin elegant capitals */
.t-spec{font:500 18px/1.5 "Cormorant Garamond",Georgia,serif}
.t-spec .hero{display:grid;justify-items:center;text-align:center;gap:12px;padding:18px 16px 0;border-top:6px solid transparent;border-image:linear-gradient(90deg,#8b5cf6,#22b8c7,#7bc043,#f5a623,#ef476f,#b5179e) 1}
.t-spec .nav{justify-content:center;font-size:15px;letter-spacing:.06em}
.t-spec .name{font:300 min(calc(150cqw / var(--len)),19cqw)/1.05 "Cormorant Garamond",Georgia,serif;text-transform:uppercase;letter-spacing:.02em;background:linear-gradient(90deg,#a78bfa,#2dd4d8,#8fd14f,#fbbf3c,#fb7185,#e879d9);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-spec .moons{display:flex;gap:10px}
.t-spec .moons i{width:14px;height:14px;border-radius:50%;background:var(--c-hi)}
.t-spec .moons i:nth-child(1),.t-spec .moons i:nth-child(5){clip-path:inset(0 50% 0 0)}
.t-spec .moons i:nth-child(2),.t-spec .moons i:nth-child(4){clip-path:inset(0 25% 0 0)}
.t-spec .next{border:1px solid var(--c-line);border-radius:99px;padding:6px 16px;font-size:15px}
.t-spec .hero .photo{width:calc(100% + 32px);max-width:none;margin-top:6px;aspect-ratio:5/2}
.t-spec .body{max-width:980px;margin-inline:auto;padding:28px 18px;gap:32px}
.t-spec h2{font:300 32px/1.1 "Cormorant Garamond",Georgia,serif;text-transform:uppercase;letter-spacing:.04em;color:var(--c-hi)}
.t-spec .btn{border-width:1px;border-radius:99px}
@container epk (min-width:720px){.t-spec .body{grid-template-columns:1fr 1fr}.t-spec .p-music,.t-spec .p-photos,.t-spec .p-shows{grid-column:1/-1}}

/* T18 Honky Tonk: country. Barn red, cream, heavy display serif, a framed photo and a sticker */
.t-tonk{font:400 16px/1.5 Karla,Arial,sans-serif}
.t-tonk .topbar{background:color-mix(in srgb,var(--c-bg) 22%,#16120f);padding:4px 10px}
.t-tonk .nav{font:400 17px/1 "Abril Fatface",Georgia,serif}
.t-tonk .deal{display:grid;gap:18px;padding:22px 18px;position:relative}
.t-tonk .framed{position:relative}
.t-tonk .framed .photo{aspect-ratio:3/2;border:8px solid #a8740f}
.t-tonk .burst{position:absolute;left:-8px;top:-14px;width:112px;height:112px;display:grid;place-items:center;text-align:center;background:var(--c-fg);color:var(--c-bg);font:400 18px/1 "Abril Fatface",Georgia,serif;clip-path:polygon(50% 0,60% 18%,79% 7%,80% 28%,100% 32%,86% 50%,100% 68%,80% 72%,79% 93%,60% 82%,50% 100%,40% 82%,21% 93%,20% 72%,0 68%,14% 50%,0 32%,20% 28%,21% 7%,40% 18%)}
.t-tonk .name{font:400 min(calc(135cqw / var(--len)),21cqw)/1.2 "Abril Fatface",Georgia,serif}
.t-tonk .tag{font-size:19px}
.t-tonk .next{color:var(--c-hi);font-weight:700}
.t-tonk .body{padding:0 18px 26px;gap:16px}
.t-tonk .p{background:var(--c-fg);color:color-mix(in srgb,var(--c-bg) 45%,#16120f);padding:18px;--c-dim:currentColor}
.t-tonk h2{font:400 28px/1.1 "Abril Fatface",Georgia,serif;color:var(--c-bg)}
.t-tonk th,.t-tonk td{border-color:color-mix(in srgb,var(--c-bg) 40%,transparent)}
@container epk (min-width:720px){.t-tonk .deal{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:30px;padding:34px 30px}.t-tonk .name{font-size:min(calc(70cqw / var(--len)),11cqw)}.t-tonk .body{grid-template-columns:1fr 1fr;padding:0 30px 30px}.t-tonk .p-music,.t-tonk .p-photos,.t-tonk .p-shows{grid-column:1/-1}}

/* T19 Front Porch: Americana. Warm paper, a script name, a grainy black and white photo, tour dates first */
.t-porch{font:400 17px/1.5 "EB Garamond",Georgia,serif}
.t-porch .hero{display:grid;gap:12px}
.t-porch .top{display:grid;justify-items:center;text-align:center;padding:16px 14px 0}
.t-porch .name{font:400 min(calc(190cqw / var(--len)),24cqw)/1.1 "Pinyon Script",Georgia,serif}
.t-porch .nav{justify-content:center;font:400 15px/1 "DM Serif Display",Georgia,serif}
.t-porch .hero .photo{aspect-ratio:5/2;filter:grayscale(1) contrast(1.05)}
.t-porch .tag{text-align:center;font-style:italic;padding-inline:14px}
.t-porch .next{text-align:center;color:var(--c-hi);font-weight:600;padding-inline:14px}
.t-porch .book{text-align:center;padding-inline:14px}
.t-porch .body{max-width:1000px;margin-inline:auto;padding:26px 18px;gap:38px}
.t-porch h2{font:400 32px/1.1 "DM Serif Display",Georgia,serif;text-align:center;text-transform:uppercase}
.t-porch .p-shows .shows li{border-top:1px solid var(--c-fg);padding-block:12px}
.t-porch .btn{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg);border-radius:4px}

/* T20 Portrait: hip-hop and soul. Black bar, round badge, one large black and white portrait on plain grey */
.t-port{font:400 16px/1.5 Archivo,Arial,sans-serif}
.t-port .bar2{background:var(--c-fg);color:var(--c-bg);display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:12px 16px}
.t-port .name{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:6px;background:color-mix(in srgb,var(--c-fg) 80%,var(--c-bg));font:800 min(calc(135px / var(--len)),24px)/1 Archivo,Arial,sans-serif;letter-spacing:-.02em;overflow-wrap:normal}
.t-port .tag{font-weight:600}
.t-port .nav{font-size:13px;gap:0}
.t-port .hero .photo{aspect-ratio:4/5}
.t-port .hero .photo img{filter:grayscale(1) contrast(1.15)}
.t-port .next,.t-port .book{padding:10px 16px 0;font-weight:800}
.t-port .body{padding:20px 16px 28px;gap:30px}
.t-port h2{font:800 clamp(30px,5cqw,52px)/1 Archivo,Arial,sans-serif;letter-spacing:-.03em}
.t-port .btn{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
@container epk (min-width:720px){.t-port .hero .photo{aspect-ratio:16/8}.t-port .body{grid-template-columns:1fr 1fr;padding-inline:24px}.t-port .p-music,.t-port .p-photos,.t-port .p-shows{grid-column:1/-1}.t-port .bar2{grid-template-columns:auto minmax(0,1fr);padding-inline:24px}}

/* T21 Signal: electronic. Deep blue haze, a condensed name, album art inside pulsing rings */
.t-sig{font:300 17px/1.55 Oswald,Arial,sans-serif;letter-spacing:.01em;background:radial-gradient(ellipse 70% 50% at 25% 12%,color-mix(in srgb,var(--c-hi) 26%,transparent),transparent 70%),radial-gradient(ellipse 60% 40% at 85% 35%,color-mix(in srgb,var(--c-hi) 18%,transparent),transparent 72%),var(--c-bg)}
.t-sig .top{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;padding:14px 16px;width:100%}
.t-sig .name{font:700 clamp(32px,min(calc(90cqw / var(--len)),8cqw),60px)/1 Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.t-sig .nav{font-weight:500;font-size:14px;text-transform:uppercase}
.t-sig .hero{display:grid;justify-items:center;gap:18px;padding-bottom:26px;text-align:center}
.t-sig .ring{width:min(54cqw,300px);aspect-ratio:1;margin-block:clamp(26px,5cqw,50px);border-radius:50%;box-shadow:0 0 0 14px color-mix(in srgb,var(--c-fg) 16%,transparent),0 0 0 30px color-mix(in srgb,var(--c-fg) 9%,transparent),0 0 0 48px color-mix(in srgb,var(--c-fg) 5%,transparent)}
.t-sig .ring .cover{border-radius:50%;height:100%}
.t-sig .tag{font-size:19px;padding-inline:16px}
.t-sig .next{color:var(--c-hi);font-weight:500;padding-inline:16px}
.t-sig .body{max-width:1440px;margin-inline:auto;padding:0 16px 28px;gap:14px}
.t-sig .p{border:1px solid color-mix(in srgb,var(--c-fg) 22%,transparent);background:color-mix(in srgb,var(--c-bg) 72%,transparent);padding:18px}
.t-sig h2{font:500 22px/1.1 Oswald,Arial,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--c-hi)}
.t-sig .btn{border-width:1px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
@container epk (min-width:720px){.t-sig .body{grid-template-columns:1fr 1fr}.t-sig .p-music,.t-sig .p-photos,.t-sig .p-shows{grid-column:1/-1}}
/* T22 Headline: folk and alternative. Soft grey studio, the name edge to edge, one object in the middle, a big serif below */
.t-head{font:400 17px/1.5 Archivo,Arial,sans-serif;background:radial-gradient(ellipse 70% 45% at 50% 300px,color-mix(in srgb,var(--c-bg) 72%,#fff),transparent 72%),var(--c-bg)}
.t-head .hero{display:grid;gap:14px;padding:10px 14px 24px;justify-items:center}
.t-head .nav{justify-self:start;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.t-head .name{font:300 min(calc(150cqw / var(--len)),24cqw)/.95 Archivo,Arial,sans-serif;text-transform:uppercase;letter-spacing:-.05em;width:100%;text-align:center}
.t-head .hero .cover{width:min(50cqw,290px);box-shadow:0 24px 44px #0006}
.t-head .next{font:400 clamp(25px,5.4cqw,58px)/1.05 "DM Serif Display",Georgia,serif;text-align:center}
.t-head .tag{text-transform:uppercase;font-size:13px;letter-spacing:.06em;text-align:center}
.t-head .body{max-width:1100px;margin-inline:auto;padding:24px 18px;gap:42px}
.t-head h2{font:400 clamp(34px,5cqw,56px)/1 "DM Serif Display",Georgia,serif}
.t-head .btn{border-width:1px;text-transform:uppercase;font-size:13px}
@container epk (min-width:720px){.t-head .body{grid-template-columns:1fr 1fr;column-gap:40px}.t-head .p-music,.t-head .p-photos,.t-head .p-shows{grid-column:1/-1}}

/* T23 Test Card: indie. Television color bars, pixel lettering, a loading bar */
.t-card{font:14.5px/1.55 "JetBrains Mono",monospace}
.t-card .bars{display:grid;justify-items:center;gap:10px;text-align:center;padding:clamp(34px,9cqw,90px) 14px;background:linear-gradient(90deg,#d8d8d8 0 14.28%,#d9c81f 14.28% 28.56%,#5eb4c9 28.56% 42.84%,#54a644 42.84% 57.12%,#a84997 57.12% 71.4%,#d42d2d 71.4% 85.68%,#2c4b96 85.68% 100%)}
.t-card .name{background:#000;color:#fff;padding:2px 16px;font:400 min(calc(135cqw / var(--len)),18cqw)/1 VT323,monospace}
.t-card .tag{background:#000;color:#fff;padding:2px 10px;font:400 clamp(20px,3cqw,28px)/1.1 VT323,monospace}
.t-card .hero .photo{aspect-ratio:3/1;filter:grayscale(.4) contrast(1.1)}
.t-card .next{font:400 24px/1.1 VT323,monospace;color:var(--c-hi);padding:12px 14px 0}
.t-card .book{padding:6px 14px 0}
.t-card .load{margin:10px 14px 4px;height:18px;border:2px solid var(--c-fg);padding:2px}
.t-card .load i{display:block;height:100%;width:72%;background:repeating-linear-gradient(90deg,var(--c-hi) 0 12px,transparent 12px 15px)}
.t-card .nav{padding:0 4px;font:400 20px/1 VT323,monospace}
.t-card .body{padding:14px;gap:20px}
.t-card .p{border-top:8px solid var(--bar,var(--c-hi));padding-top:10px}
.t-card .p:nth-child(5n+1){--bar:#d9c81f}.t-card .p:nth-child(5n+2){--bar:#5eb4c9}.t-card .p:nth-child(5n+3){--bar:#54a644}.t-card .p:nth-child(5n+4){--bar:#a84997}.t-card .p:nth-child(5n){--bar:#d42d2d}
.t-card h2{font:400 30px/1 VT323,monospace;text-transform:uppercase}
.t-card .btn{border-radius:0;font:400 20px/1 VT323,monospace}
@container epk (min-width:720px){.t-card .body{grid-template-columns:repeat(3,minmax(0,1fr));padding-inline:22px}.t-card .p-music,.t-card .p-photos,.t-card .p-shows,.t-card .p-tech,.t-card .p-stage{grid-column:1/-1}}

/* T24 Mid-Century: jazz and instrumental. Black, a tour-poster panel with cut-paper shapes, the name turned sideways */
.t-mid{font:300 17px/1.55 Oswald,Arial,sans-serif}
.t-mid .hero{display:grid;gap:18px;padding:18px}
.t-mid .poster{position:relative;overflow:hidden;background:#050505;display:grid;grid-template-columns:auto minmax(0,1fr);min-height:min(100cqw,430px);box-shadow:0 12px 30px #000a}
.t-mid .name{writing-mode:vertical-rl;transform:rotate(180deg);font:700 clamp(40px,min(calc(330cqw / var(--len)),13cqw),92px)/1 Oswald,Arial,sans-serif;text-transform:uppercase;padding:14px 8px;color:var(--c-fg)}
.t-mid .shapes{position:relative;overflow:hidden;background:#1c7a5e}
.t-mid .shapes i{position:absolute;display:block}
.t-mid .shapes .a{left:-18%;top:-8%;width:80%;height:52%;background:#2a6f97;border-radius:0 70% 62% 0}
.t-mid .shapes .b{right:-14%;top:30%;width:84%;height:42%;background:var(--c-hi);border-radius:64% 0 0 58%}
.t-mid .shapes .c{left:-12%;bottom:-12%;width:78%;height:40%;background:#0d3b4f;border-radius:0 62% 0 0}
.t-mid .meta{display:grid;gap:10px;align-content:center}
.t-mid .tag{font-size:clamp(26px,4.4cqw,44px);line-height:1.08;text-transform:uppercase}
.t-mid .next{color:var(--c-hi);font-weight:500;font-size:19px}
.t-mid .nav{font-weight:500;font-size:14px;text-transform:uppercase;margin-left:-10px}
.t-mid .body{padding:6px 18px 28px;gap:30px}
.t-mid h2{font:700 26px/1.1 Oswald,Arial,sans-serif;text-transform:uppercase;color:var(--c-hi)}
.t-mid .btn{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg);font-weight:500;text-transform:uppercase}
@container epk (min-width:720px){.t-mid .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:30px;gap:30px}.t-mid .meta{order:-1}.t-mid .body{grid-template-columns:1fr 1fr;padding-inline:30px}.t-mid .p-music,.t-mid .p-photos,.t-mid .p-shows{grid-column:1/-1}}

/* Panels bookers and sound techs read: stage plot, input list, draw */
.book{font-weight:600}
.plotwrap{overflow-x:auto;max-width:100%}
.plot{display:block;width:100%;height:auto;min-width:460px;max-width:640px}
.plot text{fill:currentColor;font-size:15px;font-family:inherit}
.spec{grid-template-columns:minmax(0,1fr);gap:2px}
.spec dt{font-weight:700;opacity:1}
.spec dd{margin-bottom:8px}
.plot .ln{fill:none;stroke:currentColor;stroke-width:2}
.plot .hi{fill:var(--c-hi)}
.tablewrap{overflow-x:auto;max-width:100%}
.epk table{border-collapse:collapse;width:100%;font-size:.92em}
.epk th,.epk td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--c-line);vertical-align:top}
.epk th{font-weight:700}
.t-tape th,.t-tape td{border-color:color-mix(in srgb,var(--c-bg) 28%,transparent)}
.ticks{display:grid;gap:6px}
.ticks li{padding-left:18px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--c-hi)}
.note{font-size:.88em;color:var(--c-dim)}

/* A band's logo art is made for one background, so its tile stays dark in every template. */
.epk .logo-tile{background:#0b0a0c;padding:14px}
.logo-tile img{display:block;width:min(100%,320px);height:auto}
@media (prefers-reduced-motion:reduce){.playing .reel,.tracks .on::after,.t-big .strip span{animation:none}.tracks .on::after{width:100%}}

/* The real site */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.epk-body{margin:0}
.frame{container:epk / inline-size;width:100%;overflow:hidden}
.epk{min-height:100vh}
.epk h1{font-weight:inherit}
.epk a{color:inherit}
.nav a{display:inline-flex;align-items:center;text-decoration:none}
.nav a:hover{text-decoration:underline}
.epk .btn{text-decoration:none;background:none}
.epk a:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.epk-banner{margin:0;background:#3a2c07;color:#ffe9a8;text-align:center;font:13px/1.4 system-ui,sans-serif;padding:6px 16px}
.photo-empty{background:var(--c-panel)}
.plotimg{height:auto;object-fit:contain;max-width:640px}
/* A stage plot built on EPKs Online: always black on white, whatever the template's colors. */
.plotbox{background:#fff;border-radius:6px;padding:6px;max-width:900px;margin-bottom:10px}
.plotbox .plotsvg{display:block;width:100%;height:auto}
.plotnotes{white-space:normal;max-width:70ch}
.vidframe{display:block;width:100%;aspect-ratio:16/9;border:0}
/* The band's own promo video, made on EPKs Online. */
.promo{margin-bottom:14px;max-width:900px}
.promo video{display:block;width:100%;height:auto;background:#000;border-radius:6px}
.promo-wide video{aspect-ratio:16/9}
.promo-square{max-width:520px}.promo-square video{aspect-ratio:1}
.promo-tall{max-width:360px}.promo-tall video{aspect-ratio:9/16}
.foot a{text-decoration:underline}
.tracks audio{width:100%}
.lyr p{white-space:pre-line}