/* Forma — Workshop Index. Print-ledger direction: ink, paper, safety orange. */
:root{
  --paper:#FAF8F2;
  --ink:#16130C;
  --ink-soft:#4A443A;
  --line:#16130C;
  --card:#FFFFFF;
  --orange:#FF4D00;
  --cobalt:#2137D8;
  --lime:#D8E021;
  --pink:#FFB3C7;
  --sky:#BFD9FF;
  --sand:#EFE7D3;
  --radius:14px;
  --display:"Helvetica Neue",Helvetica,"Arial Narrow",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(rgba(22,19,12,.10) 1px, transparent 1px);
  background-size:22px 22px;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:200;border-radius:0 0 8px 8px;transition:top .15s}
.skip:focus{top:0;color:#fff}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--ink)}
.topbar-inner{max-width:1240px;margin:0 auto;padding:.55rem 20px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-mark{width:26px;height:26px;background:var(--orange);border:2.5px solid var(--ink);border-radius:50% 50% 50% 4px;flex:none;box-shadow:3px 3px 0 var(--ink)}
.brand-word{font-family:var(--display);font-weight:900;letter-spacing:.06em;font-size:1.35rem}
.brand-sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:.1rem .6rem;background:#fff;white-space:nowrap}
.topnav{display:flex;align-items:center;gap:1rem;font-weight:700}
.topnav a{text-decoration-thickness:2px;text-underline-offset:3px}
.shortlist-chip{font-family:var(--mono);font-size:.78rem;background:var(--ink);color:#fff;border-radius:999px;padding:.3rem .8rem;white-space:nowrap}
.shortlist-chip strong{color:var(--lime)}

/* ---------- hero ---------- */
.hero{border-bottom:3px solid var(--ink);overflow:hidden}
.hero-grid{max-width:1240px;margin:0 auto;padding:3.2rem 20px 2.2rem;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:start}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;padding:.4rem .8rem;border-radius:999px;margin:0 0 1.2rem}
.kicker-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);flex:none}
.hero h1{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.015em;font-size:clamp(3rem,7.2vw,6.2rem);margin:0 0 1.1rem}
.hero h1 .line{display:block}
.line-outline{color:transparent;-webkit-text-stroke:2.5px var(--ink)}
.accent-dot{color:var(--orange)}
.lede{font-size:1.2rem;max-width:34ch;margin:0 0 1.4rem;color:var(--ink-soft)}
.lede::first-letter{initial-letter:2}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.8rem}
.btn{display:inline-block;font-weight:800;text-decoration:none;border:3px solid var(--ink);border-radius:999px;padding:.7rem 1.4rem;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;cursor:pointer;font-size:1rem;font-family:var(--body)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-solid{background:var(--orange);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn-ghost{background:#fff;color:var(--ink)}
.btn-wide{width:100%;text-align:center}
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:0;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:5px 5px 0 var(--ink);justify-content:start}
.hero-stats div{padding:.7rem 1.1rem;border-right:3px solid var(--ink)}
.hero-stats div:last-child{border-right:0}
.hero-stats dt{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
.hero-stats dd{margin:0;font-family:var(--display);font-weight:900;font-size:1.4rem}

.hero-figs{position:relative;min-height:480px}
.fig{position:absolute;background:#fff;border:3px solid var(--ink);border-radius:10px;padding:10px 10px 8px;box-shadow:7px 7px 0 var(--ink);margin:0}
.fig img{border:2px solid var(--ink);border-radius:6px;object-fit:cover;aspect-ratio:4/3;width:100%}
.fig figcaption{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.5rem .2rem 0}
.fig-a{width:62%;top:0;left:0;transform:rotate(-3deg);z-index:2}
.fig-b{width:55%;top:150px;right:0;transform:rotate(2.5deg);z-index:3}
.fig-c{width:48%;bottom:-10px;left:12%;transform:rotate(-1.5deg);z-index:1}
.fig-a::before,.fig-b::before{content:"";position:absolute;top:-14px;left:50%;width:84px;height:24px;transform:translateX(-50%) rotate(-2deg);background:rgba(216,224,33,.85);border:2px solid var(--ink)}

/* ticker */
.ticker{background:var(--ink);color:#fff;overflow:hidden;border-top:3px solid var(--ink);padding:.55rem 0}
.ticker-track{display:flex;gap:1.2rem;width:max-content;animation:tick 30s linear infinite;font-family:var(--mono);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ticker-track i{color:var(--orange);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- browse ---------- */
.browse{max-width:1240px;margin:0 auto;padding:3rem 20px 2rem}
.browse-head h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(1.9rem,4vw,3rem);margin:0;letter-spacing:-.01em;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.count-tag{font-family:var(--mono);font-size:.85rem;background:var(--lime);border:2.5px solid var(--ink);border-radius:999px;padding:.15rem .8rem;box-shadow:3px 3px 0 var(--ink)}
.browse-sub{color:var(--ink-soft);max-width:62ch}

.toolbar{display:grid;grid-template-columns:1.4fr 1fr auto;gap:1rem;align-items:end;background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:6px 6px 0 var(--ink);margin:1.4rem 0 1.6rem}
.field label,.field-label{display:block;font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.field-search input{width:100%;font:inherit;font-size:1.05rem;padding:.65rem .9rem;border:3px solid var(--ink);border-radius:10px;background:var(--paper)}
.field-filter select{width:100%;font:inherit;font-weight:700;padding:.65rem .9rem;border:3px solid var(--ink);border-radius:10px;background:var(--sand);cursor:pointer}
#savedToggle{display:flex;align-items:center;gap:.6rem;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:.5rem .9rem .5rem .55rem;font:inherit;font-weight:800;cursor:pointer;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.toggle-pill{width:52px;height:28px;border:2.5px solid var(--ink);border-radius:999px;background:#fff;position:relative;flex:none;transition:background .15s}
.toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:left .15s}
#savedToggle[aria-pressed="true"] .toggle-pill{background:var(--lime)}
#savedToggle[aria-pressed="true"] .toggle-knob{left:24px}

.index-list{list-style:none;margin:0;padding:0;border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:8px 8px 0 var(--ink)}
.index-list > li{display:grid;grid-template-columns:64px 150px 1fr auto auto auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border-top:3px solid var(--ink);position:relative}
.index-list > li:first-child{border-top:0}
.index-list > li:hover{background:#FFF6DE}
.row-num{font-family:var(--mono);font-weight:700;font-size:.8rem;color:var(--ink-soft)}
.row-num b{display:block;font-size:1.3rem;color:var(--ink)}
.row-thumb{width:150px;height:96px;object-fit:cover;border:2.5px solid var(--ink);border-radius:8px;transform:rotate(-1deg)}
.row-main{min-width:0}
.sticker{display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);border-radius:999px;padding:.1rem .6rem;transform:rotate(-2deg);margin-bottom:.35rem}
.sticker.Ceramics{background:var(--pink)}
.sticker.Painting{background:var(--sky)}
.sticker.Floristry{background:var(--lime)}
.sticker.Baking{background:#FFC53D}
.row-title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.35rem;margin:0;line-height:1.05}
.row-title a{color:inherit;text-decoration:none}
.row-title a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.row-instr{font-size:.92rem;color:var(--ink-soft);margin:.15rem 0 0}
.row-date{text-align:right;font-family:var(--mono);font-size:.78rem;font-weight:700;line-height:1.5}
.row-date b{display:block;font-size:1rem}
.row-price{font-family:var(--display);font-weight:900;font-size:1.5rem;background:var(--ink);color:#fff;border-radius:10px;padding:.25rem .7rem;white-space:nowrap}
.row-price small{font-size:.7rem;font-family:var(--mono);font-weight:700;color:var(--lime)}
.row-seats{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:2px dashed var(--ink);border-radius:8px;padding:.3rem .55rem;white-space:nowrap}
.row-open{font:inherit;font-weight:800;border:3px solid var(--ink);background:var(--orange);color:#fff;border-radius:10px;padding:.55rem .9rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}
.row-open:hover{background:var(--cobalt)}
.saved-flag{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:.62rem;font-weight:700;background:var(--ink);color:var(--lime);border-radius:999px;padding:.1rem .5rem;letter-spacing:.06em}

/* empty */
.empty{border:3px dashed var(--ink);border-radius:var(--radius);padding:2.5rem;text-align:center;background:#fff;margin-top:1.2rem;box-shadow:6px 6px 0 var(--ink)}
.empty-code{font-family:var(--mono);font-weight:700;color:var(--orange);letter-spacing:.1em;margin:0}
.empty h3{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin:.4rem 0}

/* ---------- visit ---------- */
.visit{background:var(--ink);color:#fff;border-top:3px solid var(--ink);margin-top:3rem}
.visit-grid{max-width:1240px;margin:0 auto;padding:3rem 20px;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.kicker-inv{background:var(--lime);color:var(--ink)}
.visit h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,4.5vw,3.4rem);line-height:.95;margin:0 0 1rem}
.visit h2::after{content:" ●";color:var(--orange)}
.visit p{color:#EDE8DB}
.visit-cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.visit-cards li{border:2.5px solid #fff;border-radius:12px;padding:1rem 1.2rem;display:flex;gap:1rem;align-items:baseline;background:rgba(255,255,255,.04)}
.visit-cards strong{font-family:var(--display);text-transform:uppercase;font-size:1.1rem;color:var(--lime);min-width:110px}
.studio-strip{max-width:1240px;margin:0 auto;padding:0 20px 1rem;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:1rem}
.studio-strip img{border:2.5px solid #fff;border-radius:12px;height:220px;width:100%;object-fit:cover}
.studio-strip img:first-child{transform:rotate(-1deg)}
.studio-strip img:last-child{transform:rotate(1deg)}
.fineprint{max-width:1240px;margin:0 auto;padding:0 20px 2rem;font-size:.8rem;color:#B9B2A4}

/* footer */
.footer{border-top:3px solid var(--ink);background:var(--orange)}
.footer-grid{max-width:1240px;margin:0 auto;padding:1.2rem 20px;display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#fff;font-weight:700}
.footer-brand{font-family:var(--display);font-weight:900;font-size:2rem;margin:0;letter-spacing:.04em}
.barcode{width:140px;height:36px;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 6px,#fff 6px 7px,transparent 7px 11px);border:2.5px solid var(--ink);border-radius:6px;margin:0}

/* ---------- detail drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(22,19,12,.55);z-index:90}
.scrim[hidden]{display:none}
.detail{position:fixed;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--paper);border-left:4px solid var(--ink);z-index:100;overflow-y:auto;padding:1.2rem 1.4rem 2.5rem;box-shadow:-10px 0 0 rgba(22,19,12,.2)}
.detail[hidden]{display:none}
.detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.detail-index{font-family:var(--mono);font-weight:700;font-size:.8rem;margin:0}
.detail-close{font:inherit;font-weight:800;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:.4rem 1rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.detail-imgwrap{position:relative}
.detail-imgwrap img{width:100%;height:280px;object-fit:cover;border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px 0 var(--ink)}
.detail-cat{position:absolute;left:12px;bottom:-14px;margin:0;font-family:var(--mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:var(--lime);border:2.5px solid var(--ink);border-radius:999px;padding:.25rem .8rem;transform:rotate(-2deg)}
.detail-title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:2.2rem;line-height:1;margin:1.8rem 0 .6rem}
.detail-body{font-size:1.08rem;color:var(--ink-soft);margin:0 0 1.2rem}
.detail-facts{margin:0 0 1.4rem;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}
.detail-facts div{display:grid;grid-template-columns:130px 1fr;padding:.6rem .9rem;border-top:2px solid var(--ink)}
.detail-facts div:first-child{border-top:0}
.detail-facts dt{font-family:var(--mono);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);align-self:center}
.detail-facts dd{margin:0;font-weight:700}
.detail-hint{font-size:.85rem;color:var(--ink-soft);text-align:center}
#saveToggle{background:var(--ink);color:#fff}
#saveToggle[aria-pressed="true"]{background:var(--lime);color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-figs{min-height:380px;max-width:560px}
  .toolbar{grid-template-columns:1fr}
  .index-list > li{grid-template-columns:44px 1fr auto;}
  .row-thumb{display:none}
  .row-date{text-align:left}
  .row-seats{display:none}
  .visit-grid{grid-template-columns:1fr}
  .studio-strip{grid-template-columns:1fr 1fr}
  .brand-sub{display:none}
}
@media (max-width:560px){
  .index-list > li{grid-template-columns:1fr auto;padding:.9rem}
  .row-num{display:none}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats div:nth-child(2){border-right:0}
  .hero-stats div{border-top:3px solid var(--ink)}
  .hero-stats div:nth-child(-n+2){border-top:0}
  .studio-strip{grid-template-columns:1fr}
  .detail{border-left:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none;flex-wrap:wrap;width:auto}
  *{transition:none !important}
}