/* Forma — tactile print-index identity. Paper, ink, persimmon. System type only. */
:root{
  --paper:#F3ECDC; --paper-2:#EAE0C9; --card:#FBF7EC;
  --ink:#211912; --ink-soft:#6B5F4E; --line:rgba(33,25,18,.16); --line-strong:#211912;
  --ember:#BE441B; --ember-deep:#93300F; --moss:#2F5D3A; --gold:#E8B04B;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --rad:18px; --shadow:8px 8px 0 rgba(33,25,18,.9);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  background-image:radial-gradient(rgba(33,25,18,.07) 1px, transparent 1px);
  background-size:22px 22px;
}
img{display:block; max-width:100%}
h1,h2,h3{font-family:var(--serif); line-height:1.02; letter-spacing:-.015em; margin:0}
h1 em, h2 em{font-style:italic; color:var(--ember); font-weight:400}
a{color:inherit}
:focus-visible{outline:3px solid var(--ember); outline-offset:3px; border-radius:6px}
.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute; left:16px; top:-60px; z-index:99; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700}
.skip:focus{top:12px}

/* top bar */
.topbar{position:sticky; top:0; z-index:40; background:rgba(243,236,220,.9); backdrop-filter:blur(10px); border-bottom:2px solid var(--line-strong)}
.topbar-in{display:flex; align-items:center; gap:20px; min-height:66px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{display:grid; place-items:center; width:38px; height:38px; background:var(--ink); color:var(--gold); font-family:var(--serif); font-style:italic; font-size:22px; border-radius:50% 50% 50% 8px; flex:none}
.brand-mark.sm{width:26px; height:26px; font-size:15px}
.brand-word{font-family:var(--serif); font-weight:700; font-size:22px; line-height:1; display:flex; flex-direction:column}
.brand-word small{font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.topnav{display:flex; gap:4px; margin-left:8px}
.topnav a{text-decoration:none; font-weight:600; font-size:14px; padding:8px 12px; border-radius:999px}
.topnav a:hover{background:rgba(33,25,18,.08)}
.topbar-side{margin-left:auto; display:flex; align-items:center; gap:12px}
.topbar-note{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.shortlist-pill{font-size:13px; font-weight:600; border:2px solid var(--line-strong); border-radius:999px; padding:6px 12px; background:var(--card); white-space:nowrap}
.shortlist-pill strong{color:var(--ember)}

/* hero */
.hero{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,4vw,56px); padding-top:clamp(28px,5vw,64px); padding-bottom:26px; align-items:start}
.kicker{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; border:2px solid var(--line-strong); background:var(--card); padding:7px 12px; border-radius:999px; margin:0 0 18px}
.kicker-dot{width:9px; height:9px; border-radius:50%; background:var(--moss); box-shadow:0 0 0 4px rgba(47,93,58,.18)}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.9rem); font-weight:600; text-wrap:balance}
.lede{font-size:clamp(1.02rem,1.5vw,1.2rem); color:#3E3527; max-width:34rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 26px}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:15px; border:2px solid var(--line-strong); border-radius:999px; padding:12px 20px; cursor:pointer; background:var(--card); color:var(--ink); transition:transform .15s ease, box-shadow .15s ease}
.btn-solid{background:var(--ember); border-color:var(--ember-deep); color:#FFF7EA; box-shadow:4px 4px 0 var(--line-strong)}
.btn-solid:hover{transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--line-strong)}
.btn-ghost:hover{background:#fff}
.btn-light{background:var(--paper); border-color:var(--paper)}
.hero-stats{display:grid; grid-template-columns:repeat(4,auto); gap:0; border:2px solid var(--line-strong); border-radius:var(--rad); background:var(--card); overflow:hidden; max-width:560px}
.hero-stats div{padding:12px 18px; border-left:2px dashed var(--line)}
.hero-stats div:first-child{border-left:0}
.hero-stats dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.hero-stats dd{margin:0; font-family:var(--serif); font-size:26px; font-weight:700}
.hero-media{position:relative}
.hero-main{margin:0; border:2px solid var(--line-strong); border-radius:var(--rad); overflow:hidden; background:var(--card); box-shadow:var(--shadow); transform:rotate(1.2deg)}
.hero-main img{width:100%; height:clamp(260px,34vw,430px); object-fit:cover}
.hero-main figcaption{display:flex; justify-content:space-between; gap:10px; padding:10px 14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-top:2px solid var(--line-strong); background:var(--card)}
.hero-sub{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; transform:rotate(-1deg)}
.hero-sub img{border:2px solid var(--line-strong); border-radius:14px; height:120px; width:100%; object-fit:cover; background:var(--paper-2)}
.stamp{position:absolute; left:-34px; bottom:96px; filter:drop-shadow(4px 4px 0 rgba(33,25,18,.85)); animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ticker */
.ticker{background:var(--ink); color:var(--paper); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); overflow:hidden; margin:18px 0 0}
.ticker-track{display:flex; gap:26px; align-items:center; white-space:nowrap; padding:11px 0; width:max-content; animation:tick 30s linear infinite; font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase}
.ticker-track i{color:var(--gold); font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* browse */
.browse{padding-top:clamp(36px,5vw,64px)}
.index-label{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin:0 0 10px}
.index-label.light{color:var(--gold)}
.browse-head h2{font-size:clamp(2rem,4vw,3.2rem); max-width:16em}
.browse-sub{max-width:44rem; color:#3E3527}
.toolbar{display:grid; grid-template-columns:1.4fr 1fr auto; gap:14px; align-items:end; background:var(--card); border:2px solid var(--line-strong); border-radius:var(--rad); padding:16px; box-shadow:6px 6px 0 rgba(33,25,18,.9); margin:24px 0 8px}
.field label, .field-label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px}
.field-search label{font-weight:400}
.input-wrap{display:flex; align-items:center; gap:8px; border:2px solid var(--line-strong); border-radius:12px; padding:0 12px; background:#fff}
.input-wrap svg{flex:none; opacity:.6}
.input-wrap input{border:0; background:transparent; font:inherit; padding:11px 0; width:100%; color:var(--ink)}
.input-wrap input:focus{outline:none}
.input-wrap:focus-within{outline:3px solid var(--ember); outline-offset:2px}
.select-wrap select{appearance:none; width:100%; font:inherit; font-weight:600; border:2px solid var(--line-strong); border-radius:12px; padding:11px 36px 11px 12px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23211912" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat right 12px center; cursor:pointer}
#savedFilter{display:inline-flex; align-items:center; gap:10px; border:2px solid var(--line-strong); background:#fff; border-radius:999px; padding:8px 14px 8px 8px; font:inherit; font-weight:700; font-size:14px; cursor:pointer}
#savedFilter .toggle{width:44px; height:26px; border-radius:999px; background:var(--paper-2); border:2px solid var(--line-strong); position:relative; transition:background .15s}
#savedFilter .knob{position:absolute; top:1px; left:1px; width:19px; height:19px; border-radius:50%; background:var(--card); border:2px solid var(--line-strong); transition:left .15s}
#savedFilter[aria-pressed="true"] .toggle{background:var(--moss)}
#savedFilter[aria-pressed="true"] .knob{left:18px; background:#fff}
#savedFilter .toggle-text em{font-style:normal; color:var(--ember)}
.result-count{grid-column:1/-1; margin:2px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-soft)}

/* cards */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:18px 0 8px}
.card{background:var(--card); border:2px solid var(--line-strong); border-radius:var(--rad); overflow:hidden; display:flex; flex-direction:column; box-shadow:5px 5px 0 rgba(33,25,18,.9); transition:transform .16s ease}
.card:hover{transform:translateY(-3px)}
.card-media{position:relative; border-bottom:2px solid var(--line-strong)}
.card-media img{width:100%; height:210px; object-fit:cover; background:var(--paper-2)}
.card-no{position:absolute; top:10px; left:10px; font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.12em; background:var(--ink); color:var(--paper); padding:5px 10px; border-radius:999px}
.card-price{position:absolute; bottom:10px; right:10px; font-family:var(--serif); font-weight:700; font-size:19px; background:var(--gold); border:2px solid var(--line-strong); padding:3px 12px; border-radius:999px}
.card-cat{position:absolute; bottom:10px; left:10px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--paper); border:2px solid var(--line-strong); padding:5px 10px; border-radius:999px}
.card-save-dot{position:absolute; top:10px; right:10px; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--card); border:2px solid var(--line-strong); font-size:16px}
.card-save-dot[hidden]{display:none}
.card-body{padding:16px 16px 6px}
.card-body h3{font-size:23px; margin:0 0 6px}
.card-desc{margin:0 0 12px; color:#3E3527; font-size:14.5px}
.card-meta{list-style:none; margin:0; padding:0; font-size:13.5px}
.card-meta li{display:flex; align-items:baseline; gap:8px; padding:5px 0}
.card-meta li+li{border-top:1px dashed var(--line)}
.card-meta .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); flex:none; width:74px}
.card-foot{margin-top:auto; border-top:2px dashed rgba(33,25,18,.35); padding:12px 16px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative}
.card-foot::before,.card-foot::after{content:""; position:absolute; top:-11px; width:18px; height:18px; background:var(--paper); border:2px solid var(--line-strong); border-radius:50%}
.card-foot::before{left:-12px} .card-foot::after{right:-12px}
.seats{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.open-btn{font:inherit; font-weight:700; font-size:14px; border:2px solid var(--line-strong); background:var(--ink); color:var(--paper); border-radius:999px; padding:9px 16px; cursor:pointer}
.open-btn:hover{background:var(--ember); border-color:var(--ember-deep)}

/* empty */
.empty{border:2px dashed var(--line-strong); border-radius:var(--rad); background:var(--card); padding:38px 24px; text-align:center; margin:18px 0}
.empty[hidden]{display:none}
.empty-no{font-family:var(--mono); letter-spacing:.2em; font-size:12px; color:var(--ember); margin:0}
.empty h3{font-size:30px; margin:8px 0}
.empty p{max-width:34rem; margin:0 auto 18px; color:#3E3527}

/* practical + about */
.practical{padding:clamp(36px,5vw,64px) 0 8px}
.practical-card{background:var(--ink); color:var(--paper); border-radius:24px; border:2px solid var(--ink); display:grid; grid-template-columns:1.1fr .9fr; overflow:hidden; box-shadow:var(--shadow)}
.practical-card>div{padding:clamp(24px,4vw,48px)}
.practical-card h2{font-size:clamp(1.8rem,3.4vw,2.8rem); color:var(--paper)}
.practical-list{list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:0}
.practical-list li{padding:12px 0; border-top:1px solid rgba(243,236,220,.22); font-size:15px; color:#E9DFC9}
.practical-list li strong{color:var(--gold); font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-right:8px}
.practical-card figure{margin:0; border-left:2px solid rgba(243,236,220,.25); position:relative}
.practical-card figure img{width:100%; height:100%; min-height:320px; object-fit:cover}
.practical-card figcaption{position:absolute; left:14px; bottom:14px; background:var(--gold); color:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:2px solid var(--ink)}
.about{padding:clamp(36px,5vw,60px) 0}
.about h2{font-size:clamp(1.9rem,3.6vw,3rem); max-width:20em}
.about-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:18px; align-items:start}
.about-cols p{font-size:17px; color:#3E3527; margin:0; max-width:32rem}
.about-imgs{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.about-imgs img{border:2px solid var(--line-strong); border-radius:14px; height:220px; width:100%; object-fit:cover}
.about-imgs img:first-child{transform:rotate(-1.5deg)} .about-imgs img:last-child{transform:rotate(1.5deg)}

.footer{border-top:2px solid var(--line-strong); background:var(--ink); color:var(--paper); margin-top:20px}
.footer-in{display:flex; justify-content:space-between; gap:18px; padding-top:26px; padding-bottom:26px; flex-wrap:wrap}
.brand-line{display:flex; align-items:center; gap:8px; font-family:var(--serif); font-weight:700; margin:0 0 8px}
.fine{font-size:13px; margin:4px 0; color:#D9CDB4}
.fine.dim{opacity:.75}
.footer a{color:var(--gold)}

/* detail dialog */
.detail-dialog{border:2px solid var(--line-strong); border-radius:22px; padding:0; max-width:920px; width:min(920px,calc(100vw - 32px)); background:var(--card); color:var(--ink); box-shadow:10px 10px 0 rgba(33,25,18,.9)}
.detail-dialog::backdrop{background:rgba(33,25,18,.55); backdrop-filter:blur(3px)}
.detail-shell{display:grid; grid-template-columns:.92fr 1.08fr; max-height:min(86vh,820px)}
.detail-media{position:relative; border-right:2px solid var(--line-strong); background:var(--paper-2); min-height:280px}
.detail-media img{width:100%; height:100%; max-height:min(86vh,820px); object-fit:cover; border-radius:20px 0 0 20px}
.detail-no{position:absolute; left:14px; bottom:14px; margin:0; background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:11px; letter-spacing:.14em; padding:6px 12px; border-radius:999px}
.detail-main{padding:clamp(20px,3vw,34px); overflow:auto}
.detail-top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.chip{margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; background:var(--gold); border:2px solid var(--line-strong); padding:5px 12px; border-radius:999px}
.icon-btn{font:inherit; font-weight:700; font-size:13.5px; background:#fff; border:2px solid var(--line-strong); border-radius:999px; padding:8px 14px; cursor:pointer}
.icon-btn:hover{background:var(--ink); color:var(--paper)}
.detail-main h2{font-size:clamp(1.9rem,3.4vw,2.9rem); text-wrap:balance}
.detail-instructor{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:10px 0}
.detail-body{font-size:16.5px; color:#33291C; margin:0 0 16px}
.detail-facts{display:grid; grid-template-columns:1fr 1fr; gap:0; border:2px solid var(--line-strong); border-radius:14px; overflow:hidden; margin:0 0 18px; background:#fff}
.detail-facts div{padding:10px 14px}
.detail-facts div:nth-child(odd){border-right:1px dashed var(--line)}
.detail-facts div:nth-child(n+3){border-top:1px dashed var(--line)}
.detail-facts dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.detail-facts dd{margin:2px 0 0; font-weight:700}
.detail-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.detail-actions .btn[aria-pressed="true"]{background:var(--moss); border-color:#1E4028; color:#fff}
.detail-hint{font-size:13px; color:var(--ink-soft); margin:0}

/* responsive */
@media (max-width:960px){
  .hero{grid-template-columns:1fr}
  .hero-main img{height:300px}
  .stamp{left:auto; right:6px; bottom:auto; top:-46px; width:96px; height:96px}
  .stamp svg{width:96px; height:96px}
  .grid{grid-template-columns:1fr 1fr}
  .toolbar{grid-template-columns:1fr 1fr}
  .field-saved{grid-column:1/-1}
  .practical-card{grid-template-columns:1fr}
  .practical-card figure{border-left:0; border-top:2px solid rgba(243,236,220,.25)}
  .about-cols{grid-template-columns:1fr}
  .detail-shell{grid-template-columns:1fr; max-height:88vh}
  .detail-media{border-right:0; border-bottom:2px solid var(--line-strong); min-height:0}
  .detail-media img{max-height:240px; border-radius:20px 20px 0 0}
  .topbar-note{display:none}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .toolbar{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats div:nth-child(3){border-left:0}
  .hero-stats div:nth-child(n+3){border-top:2px dashed var(--line)}
  .topnav{display:none}
  .detail-facts{grid-template-columns:1fr}
  .detail-facts div:nth-child(odd){border-right:0}
  .detail-facts div:nth-child(n+2){border-top:1px dashed var(--line)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}