/* TableTonic — D11 zine collage. Teal #0d9488 + orange #f97316 duotone on cream. */
:root{
  --cream:#faf3e3;
  --paper:#fffdf6;
  --ink:#191919;
  --muted:#5c564a;
  --teal:#0d9488;
  --teal-dark:#0a6e79;
  --orange:#f97316;
  --orange-dark:#c2570b;
  --line:#191919;
  --mono:"Cutive Mono",ui-monospace,Menlo,monospace;
  --display:"Anton",Impact,sans-serif;
  --hand:"Caveat",cursive;
  --sans:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);line-height:1.6;
  background-color:var(--cream);
  background-image:
    radial-gradient(circle at 12% 20%, rgba(13,148,136,.07) 0 90px, transparent 91px),
    radial-gradient(circle at 88% 75%, rgba(249,115,22,.08) 0 110px, transparent 111px),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(25,25,25,.025) 30px 31px);
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--teal-dark)}
code{font-family:var(--mono);background:#f3e9d2;padding:2px 7px;border-radius:4px;font-size:.88em;border:1px solid #e2d5b8}

/* ---------- header: pasted flyer strip ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--line);transform:rotate(-.3deg)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:66px;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:36px;height:36px}
.brand .bname{font-family:var(--display);font-size:1.5rem;letter-spacing:.04em}
.brand .bname em{font-style:normal;color:var(--orange)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:.85rem;color:var(--ink);text-decoration:none;padding:6px 10px;border:2px solid transparent;border-radius:2px}
.nav a:hover{background:#f3e9d2;border-color:var(--line);transform:rotate(-1deg)}
.nav a.cta{background:var(--orange);color:#fff;border-color:var(--line);font-weight:700;box-shadow:3px 3px 0 var(--line)}
.nav a.cta:hover{background:var(--orange-dark)}

/* ---------- ransom-note headings ---------- */
.rn{font-family:var(--display);text-transform:uppercase;line-height:1.02;letter-spacing:.01em}
.rn .w1{color:var(--orange);display:inline-block;transform:rotate(-2deg)}
.rn .w2{font-family:var(--hand);text-transform:none;color:var(--teal-dark);display:inline-block;transform:rotate(1.5deg);font-size:1.25em}
.rn .w3{color:var(--ink);display:inline-block;transform:rotate(-1deg);background:#fff;border:2px solid var(--line);padding:0 8px;box-shadow:3px 3px 0 rgba(13,148,136,.35)}
.rn .w4{font-family:var(--mono);font-size:.62em;color:var(--teal-dark);display:inline-block;transform:rotate(2deg);letter-spacing:.05em}
.rn .w5{color:var(--teal);display:inline-block;transform:rotate(1deg)}

/* ---------- hero ---------- */
.hero{padding:44px 0 10px;position:relative}
.stamp{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;color:var(--orange-dark);border:3px double var(--orange-dark);border-radius:6px;padding:4px 14px;transform:rotate(-7deg);margin-bottom:16px;background:rgba(255,253,246,.7)}
.hero h1{font-size:clamp(2.2rem,5.4vw,3.6rem);margin:0 0 14px;max-width:900px}
.hero .lede{font-size:1.08rem;color:#3d382d;max-width:740px}
.tape-row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 4px}
.tape{display:inline-block;font-family:var(--mono);font-size:.82rem;background:rgba(13,148,136,.16);border-left:4px solid var(--teal);padding:6px 12px;transform:rotate(-1deg)}
.tape.o{background:rgba(249,115,22,.16);border-left-color:var(--orange);transform:rotate(1.2deg)}

/* ---------- ticket-stub tool panel ---------- */
.tool-sec{margin:26px 0 30px}
.stub{background:var(--paper);border:3px solid var(--line);border-radius:14px;position:relative;box-shadow:6px 6px 0 rgba(25,25,25,.9)}
.stub::before,.stub::after{content:"";position:absolute;top:44%;width:26px;height:26px;background:var(--cream);border:3px solid var(--line);border-radius:50%;z-index:2}
.stub::before{left:-17px}
.stub::after{right:-17px}
.stub-top{padding:18px 22px 6px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stub-top .t-title{font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase}
.stub-top .t-title span{color:var(--teal-dark)}
.stub-top .ticket-no{margin-left:auto;font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.stub-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.stub-left{padding:8px 22px 20px}
.stub-right{border-left:3px dashed var(--line);padding:8px 22px 20px;min-width:0}
.perf-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:12px 0 8px}
.perf-label:first-child{margin-top:4px}
.opt-row{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:2px solid var(--line);background:var(--paper);border-radius:4px;padding:7px 13px;font-family:var(--mono);font-size:.85rem;cursor:pointer;transform:rotate(-.5deg)}
.opt:nth-child(even){transform:rotate(.6deg)}
.opt[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--line);box-shadow:2px 2px 0 var(--line)}
.opt:hover{background:#f3e9d2}
.opt[aria-pressed="true"]:hover{background:var(--teal-dark)}
.f-row{display:flex;align-items:center;gap:10px;margin-top:6px}
input[type="range"]{flex:1;accent-color:var(--orange)}
.num{width:62px;border:2px solid var(--line);border-radius:4px;padding:6px;font-family:var(--mono);text-align:center;background:var(--paper)}
.count-val{font-family:var(--display);font-size:1.2rem;min-width:32px;text-align:center}
.seed{border:2px solid var(--line);border-radius:4px;padding:8px 12px;font-family:var(--mono);font-size:.9rem;width:100%;background:var(--paper)}
.check{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.88rem;cursor:pointer;margin-top:8px}
.check input{width:18px;height:18px;accent-color:var(--teal)}
.big-btn{margin-top:14px;width:100%;border:3px solid var(--line);border-radius:6px;background:var(--orange);color:#fff;font-family:var(--display);font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;padding:13px;cursor:pointer;box-shadow:4px 4px 0 var(--line);transform:rotate(-.5deg)}
.big-btn:hover{background:var(--orange-dark);transform:rotate(.3deg)}
.big-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line)}
.hintline{font-family:var(--hand);font-size:1.25rem;color:var(--teal-dark);margin:10px 0 0;transform:rotate(-.6deg)}

.out-meta{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:6px 0 10px;min-height:20px}
.out-actions{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.btn2{border:2px solid var(--line);background:var(--paper);border-radius:4px;padding:8px 16px;font-family:var(--mono);font-size:.85rem;cursor:pointer;box-shadow:2px 2px 0 var(--line)}
.btn2:hover:not(:disabled){background:#f3e9d2}
.btn2:disabled{opacity:.4;cursor:not-allowed}
#copyNote{font-family:var(--hand);font-size:1.2rem;color:var(--teal-dark);min-height:26px;margin:0 0 6px}
.name-tickets{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.name-tickets li{display:flex;align-items:center;gap:10px;background:var(--paper);border:2px solid var(--line);border-radius:6px;padding:8px 12px;font-family:var(--mono);font-size:.9rem;cursor:pointer;position:relative;overflow:hidden}
.name-tickets li::before{content:"ADMIT";font-size:.6rem;letter-spacing:.18em;color:var(--orange-dark);border:1.5px solid var(--orange-dark);border-radius:3px;padding:1px 5px;transform:rotate(-4deg);flex-shrink:0}
.name-tickets li:hover{background:#fdf6e7;border-color:var(--teal-dark)}
.name-tickets .val{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.name-tickets .mini{font-family:var(--sans);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--teal-dark);opacity:0}
.name-tickets li:hover .mini{opacity:1}
.placeholder{border:2px dashed #b8ab8d;border-radius:6px;padding:34px 18px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:.88rem}
.limits{margin-top:16px;border:2px solid var(--orange-dark);background:#fff6ea;border-radius:6px;padding:12px 16px;font-size:.86rem;color:#7a4a12;transform:rotate(.3deg)}
.limits strong{text-transform:uppercase;letter-spacing:.06em}
.limits ul{margin:8px 0 0;padding-left:18px}

/* ---------- collage content cards ---------- */
.collage{padding:20px 0 10px}
.collage h2{font-size:1.9rem;margin:34px 0 12px}
.collage h3{font-size:1.2rem;margin:20px 0 8px}
.collage p{color:#3d382d;max-width:76ch}
.zcard{background:var(--paper);border:2.5px solid var(--line);border-radius:4px;padding:18px 20px;margin:16px 0;position:relative;box-shadow:5px 5px 0 rgba(25,25,25,.85)}
.zcard:nth-child(odd){transform:rotate(-.5deg)}
.zcard:nth-child(even){transform:rotate(.5deg)}
.zcard.teal{box-shadow:5px 5px 0 rgba(13,148,136,.5)}
.zcard.orange{box-shadow:5px 5px 0 rgba(249,115,22,.5)}
.zcard h3{margin:0 0 8px;font-family:var(--display);letter-spacing:.04em;text-transform:uppercase;font-size:1.05rem}
.zcard p{margin:0 0 8px;font-size:.94rem}
.zcard a{font-family:var(--mono);font-size:.85rem}
.zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:18px 0}

/* faq as pinned notes */
.faq-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:18px 0}
.note{background:#fffbe8;border:2px solid var(--line);padding:16px 18px;position:relative;box-shadow:4px 4px 0 rgba(25,25,25,.7)}
.note::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(-2deg);width:74px;height:20px;background:rgba(13,148,136,.35);border:1px solid rgba(13,148,136,.5)}
.note:nth-child(even)::before{background:rgba(249,115,22,.35);border-color:rgba(249,115,22,.5)}
.note:nth-child(odd){transform:rotate(-.6deg)}
.note:nth-child(even){transform:rotate(.6deg)}
.note h3{font-family:var(--hand);font-size:1.45rem;margin:0 0 6px;color:var(--teal-dark)}
.note p{font-size:.9rem;margin:0}

/* ---------- footer ---------- */
footer{border-top:3px solid var(--line);background:var(--paper);margin-top:44px;padding:34px 0 22px;transform:rotate(.25deg)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;margin-bottom:20px}
.foot-brand p{color:var(--muted);font-size:.9rem;max-width:340px}
.foot-col h4{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 10px}
.foot-col a{display:block;color:var(--ink);text-decoration:none;font-size:.92rem;padding:3px 0;font-family:var(--mono)}
.foot-col a:hover{color:var(--orange-dark)}
.foot-base{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:2px dashed #c9bfa8;padding-top:14px;font-size:.8rem;color:var(--muted);font-family:var(--mono)}

.article{max-width:800px;margin:0 auto;padding:36px 22px}
.article h1{font-size:clamp(1.9rem,4.5vw,2.9rem);margin:0 0 10px}
.article .lede{color:#3d382d;font-size:1.05rem}
.article h2{font-size:1.55rem;margin:30px 0 10px;font-family:var(--display);letter-spacing:.03em;text-transform:uppercase}
.article h2 .w2{font-family:var(--hand);text-transform:none}
.article h3{font-size:1.15rem;margin:22px 0 8px}
.article p,.article li{color:#3d382d}
.back{display:inline-block;margin-bottom:16px;font-family:var(--mono);font-size:.85rem;text-decoration:none}
.related{background:var(--paper);border:2.5px solid var(--line);border-radius:4px;padding:16px 20px;margin-top:30px;box-shadow:4px 4px 0 rgba(13,148,136,.4);transform:rotate(-.4deg)}
.related h3{margin:0 0 8px;font-family:var(--display);text-transform:uppercase;letter-spacing:.05em}
.related ul{margin:0;padding-left:18px;font-family:var(--mono);font-size:.9rem}
.notfound{text-align:center;padding:80px 22px}
.notfound h1{font-size:3.4rem;margin:0 0 10px}

@media (max-width:860px){
  .stub-grid{grid-template-columns:1fr}
  .stub-right{border-left:none;border-top:3px dashed var(--line)}
  .zgrid,.faq-notes{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .nav a:not(.cta){display:none}
  .stub::before,.stub::after{display:none}
}