
:root{--f-display:"Shrikhand","Cooper Black",Georgia,serif;--f-body:"Karla",system-ui,sans-serif;--f-mono:"DM Mono",ui-monospace,Menlo,monospace}
body{--s1:#c0392b;--s2:#d4891b;--s3:#2e8b57;--s4:#2a7fb8;--s5:#7a4fb3;--s6:#c2507a;--s7:#4b6584}
.pg{display:flex;flex-direction:column;gap:22px;padding-block:22px 40px}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:10px;cursor:pointer;font-weight:700}
.feat{color:#fff8ea}
.faqlist{display:flex;flex-direction:column;gap:10px}
.faqlist details{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 18px}
.faqlist summary{cursor:pointer;font-weight:700;font-size:17px}
.faqlist details p{margin:10px 0 0;max-width:75ch}
.faqlist details[open]{box-shadow:0 6px 16px rgba(60,20,0,.1)}
.picks{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-top:18px}
.pg .picks h2,.picks h2{font:400 clamp(26px,3.4vw,34px)/1.1 var(--f-display);color:var(--flannel);margin:0 0 50px!important}
.xlinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:48px 20px}
.pick{position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none;padding:54px 18px 20px;border-radius:18px;background:var(--pb);color:#2b1810;transition:transform .15s}
.pick:hover{transform:translateY(-3px)}
.pick img{position:absolute;top:-34px;left:18px;width:76px;height:76px;border-radius:50%;border:4px solid var(--bg,#fbf1df);object-fit:cover;background:#f3e6d0}
.pk{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pc)}
.pick b{font:400 24px/1.1 var(--f-display);color:#2b1810}
.pq{font-size:14.5px;color:#4a3528}
.pg2{margin-top:auto;padding-top:6px;font-weight:700;color:var(--pc)}
@media (prefers-color-scheme:dark){.pick{background:color-mix(in srgb,var(--pb) 14%,#2a1b13);color:var(--ink)}.pick b{color:var(--ink)}.pq{color:var(--muted)}.pk,.pg2{color:color-mix(in srgb,var(--pc) 45%,#fff)}}
.pg h2{font:400 26px var(--f-display);margin:8px 0 0;color:var(--flannel)}
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.feat { position: relative; min-height: 170px; border-radius: 18px; overflow: hidden; background-size: cover; background-position: center; color: #fff8ea; text-decoration: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 16px; box-shadow: 0 10px 22px rgba(60,20,0,.25); transition: transform .2s; isolation: isolate; }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30,10,4,.05) 20%, rgba(30,10,4,.82)); }
.feat:hover { transform: translateY(-4px) rotate(-.5deg); }
.feat-k { font: 500 11.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ffe3a3; }
.feat-t { font: 400 22px/1.1 var(--f-display); }
.feat-n { font-weight: 700; font-size: 14px; }
.gbar { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.gbar .rnd { align-self: flex-start; }
@media (min-width: 760px) { .stabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; } }
@media (min-width: 1000px) { .stabs { grid-template-columns: repeat(7, minmax(0, 1fr)); } .stab { padding: 8px 10px; } .stab small { font-size: 11px; } }
@media (max-width: 759px) { .stabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; } }
.stabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.stabs::-webkit-scrollbar { display: none; }
.stab { flex: none; border: 0; border-radius: 14px; padding: 8px 14px; background: color-mix(in srgb, var(--sc) 14%, var(--surface)); color: var(--ink); cursor: pointer; text-align: left; display: flex; flex-direction: column; line-height: 1.15; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--sc) 45%, transparent); transition: transform .15s; }
.stab { min-width: 0; } .stab b { font-size: 14.5px; } .stab small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stab small { font-size: 11.5px; color: var(--muted); }
.stab:hover { transform: translateY(-2px); }
.stab[aria-selected="true"] { background: var(--sc); color: #fff8ea; box-shadow: 0 6px 14px color-mix(in srgb, var(--sc) 45%, transparent); }
.stab[aria-selected="true"] small { color: #fff8ea; opacity: .85; }
.rnd { text-decoration: none; white-space: nowrap; }
.glrow { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.glegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--muted); margin: 0; }
.gph { font: 400 24px var(--f-display); margin: 6px 0 10px; } .gph small { font: 500 13px var(--f-body); color: var(--muted); }
.guide2.js .gpanel { display: none; } .guide2.js .gpanel.on { display: block; } .guide2.js .gph { display: none; }
.epgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px 14px; }
/* Each episode is a show ticket: a coloured tear-off stub, a perforation with notches, a cream paper body. */
.epc { --notch: 9px; --stubw: 62px; position: relative; display: grid; grid-template-columns: var(--stubw) minmax(0, 1fr); min-height: 150px; text-decoration: none; color: #3a1d10;
  border-radius: 10px; filter: drop-shadow(0 3px 3px rgba(60,20,0,.14)) drop-shadow(0 8px 14px rgba(60,20,0,.10)); transition: transform .2s, filter .2s;
  -webkit-mask: radial-gradient(circle var(--notch) at var(--stubw) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at var(--stubw) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at var(--stubw) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at var(--stubw) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.epc:hover, .epc:focus-visible { transform: translateY(-4px) rotate(-.8deg); filter: drop-shadow(0 6px 6px rgba(60,20,0,.18)) drop-shadow(0 16px 22px rgba(60,20,0,.16)); }
.stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 10px 0 0 10px; color: #fff8ea; text-align: center; line-height: 1;
  background: var(--sc) repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 6px, transparent 6px 12px); transition: transform .25s; }
.stub small { font: 500 9.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
.stub b { font: 400 28px/1.05 var(--f-display); margin-bottom: 6px; }
.stub b:last-child { margin-bottom: 0; }
.epc:hover .stub, .epc:focus-visible .stub { transform: translateX(-4px) rotate(-1.5deg); }
.tk { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 12px 16px; border-radius: 0 10px 10px 0;
  background: #fff8e8 linear-gradient(180deg, rgba(255,255,255,.6), transparent 40%); background-image: linear-gradient(180deg, rgba(255,255,255,.55), transparent 45%), repeating-linear-gradient(0deg, transparent 0 23px, rgba(160,110,60,.06) 23px 24px); }
.tk::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; border-left: 2px dotted rgba(90,50,20,.35); }
.tk-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 20px; }
.tk-code { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--sc) 80%, #3a1d10); }
.stamp { font: 700 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border: 2px solid currentColor; border-radius: 4px; transform: rotate(-6deg); opacity: .85; background: rgba(255,255,255,.35); }
.stamp + .stamp { transform: rotate(4deg); }
.stamp.storm { color: #b5242a; } .stamp.buzz { color: #8a5307; } .stamp.warm { color: #b23e6a; }
.epc-t { font-weight: 700; font-size: 16px; line-height: 1.22; color: #2b1810; }
.epc-m { display: flex; flex-wrap: wrap; gap: 3px 10px; font: 12.5px var(--f-mono); color: #6e5546; }
.epc-f { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.faces { display: flex; } .faces img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #fff8e8; margin-right: -8px; }
.epc .go { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--sc) 85%, #3a1d10); opacity: 0; transform: translateX(-6px); transition: .2s; }
.epc:hover .go, .epc:focus-visible .go { opacity: 1; transform: none; }
@media (hover: none) { .epc .go { opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tk { background-color: #f6e8cc; } }
