/* Trans San Marcos theme: DIY accents over styles.css */
/* ===== Comp v2: live layout + a light DIY/zine layer ===== */
:root{
  --paper:#f1e8d6; --paper-ink:#141a16;
  --font-hand:"Permanent Marker","Bebas Neue",cursive;
  --font-type:"Special Elite","Courier New",monospace;
}

/* grain: a touch stronger than live, plus faint halftone */
.noise{opacity:.09}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:39;opacity:.06;
  background-image:radial-gradient(#000 1px,transparent 1.3px);background-size:6px 6px}

/* hand-drawn heading font, used on a few titles only */
.section-title.hand{font-family:var(--font-hand);font-size:clamp(2.3rem,5.4vw,3.7rem);line-height:1.05;letter-spacing:.01em;transform:rotate(-1.2deg);transform-origin:left}
.reveal.is-visible.section-title.hand{transform:rotate(-1.2deg)}

/* eyebrows read like typewriter labels */
.eyebrow{font-family:var(--font-type);font-weight:400;letter-spacing:.14em;font-size:.85rem}

/* header: wordmark as a little sticker */
.wordmark{background:var(--accent);color:var(--ink);padding:.15rem .55rem;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);display:inline-block}

/* buttons: hard offset shadow */
.btn{border:2px solid var(--ink)!important;box-shadow:4px 4px 0 var(--ink);border-radius:4px}
.btn-ghost{border-color:var(--sun)!important;box-shadow:4px 4px 0 rgba(0,0,0,.6)}
.btn:hover{transform:translate(-1px,-2px)}

/* ---- hero ---- */
.hero-stats{list-style:none;display:flex;flex-wrap:wrap;gap:1rem;margin:1.6rem 0 0;padding:0}
.stat-sticker{background:var(--paper);color:var(--paper-ink);border:3px solid var(--paper-ink);box-shadow:5px 5px 0 rgba(0,0,0,.55);
  padding:.45rem 1rem .4rem;font-family:var(--font-display);font-size:1.35rem;letter-spacing:.05em;text-transform:uppercase;transform:rotate(-2.5deg);position:relative}
.stat-sticker:nth-child(2){transform:rotate(1.8deg);background:var(--accent)}
.stat-sticker strong{font-size:2.3rem;font-weight:400;margin-right:.2rem;line-height:1}
.reveal.is-visible.stat-sticker{transform:rotate(-2.5deg)}
.stat-sticker::before{content:"";position:absolute;top:-11px;left:50%;width:58px;height:20px;margin-left:-29px;background:rgba(236,224,186,.8);transform:rotate(-6deg);box-shadow:0 1px 1px rgba(0,0,0,.2)}

/* ---- tape ---- */
.tape{position:absolute;z-index:3;width:110px;height:30px;background:rgba(236,224,186,.78);box-shadow:0 1px 2px rgba(0,0,0,.25);
  -webkit-mask:repeating-linear-gradient(0deg,#000 0 3px,rgba(0,0,0,.85) 3px 5px)}
.tape-l{top:-14px;left:14px;transform:rotate(-10deg)}
.tape-r{top:-12px;right:16px;transform:rotate(8deg)}

/* ---- event: cream paper section ---- */
.section-event{background:var(--paper);color:var(--paper-ink)}
.section-event .section-copy{color:#3a3a32}
.section-event .eyebrow{color:#b85a22}
.section-event .fact-row{grid-template-columns:repeat(6,minmax(0,1fr));border-top:0;gap:1rem}
.section-event .fact-row li{background:#fff;border:3px solid var(--paper-ink);box-shadow:5px 5px 0 var(--paper-ink);padding:.9rem .9rem .8rem}
.section-event .fact-row li:nth-child(odd){transform:rotate(-1.2deg)}
.section-event .fact-row li:nth-child(even){transform:rotate(1deg)}
.section-event .fact-row li.fact-big{background:var(--accent)}
.section-event .fact-label{color:#6b5a48;font-family:var(--font-type);letter-spacing:.08em;font-weight:400}
.section-event .fact-big .fact-label{color:var(--paper-ink)}
.section-event .fact-big .fact-value{font-size:clamp(1.7rem,2.8vw,2.2rem)}
.section-event .daylight-note strong{color:#b85a22}

/* ---- modes: same list, as lightly tilted paper cards ---- */
.section-categories .category-list{border-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.section-categories .category{position:relative;background:var(--paper);color:var(--paper-ink);border:3px solid var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.55);
  padding:1.6rem 1.4rem 1.3rem;grid-template-columns:1fr;gap:.35rem}
.section-categories .category h3{color:#b85a22}
.section-categories .category p{color:#3a3a32}
.section-categories .category:nth-child(1){transform:rotate(-1.2deg)}
.section-categories .category:nth-child(2){transform:rotate(1deg)}
.section-categories .category:nth-child(3){transform:rotate(.8deg)}
.section-categories .category:nth-child(4){transform:rotate(-1deg)}
.section-categories .category::before{content:"";position:absolute;top:-13px;left:50%;width:90px;height:26px;margin-left:-45px;background:rgba(236,224,186,.85);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}

/* ---- classes: keep photo, cards get a sticker edge ---- */
.class-list{border-top:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.class-list .category{background:rgba(16,28,22,.72);border:2px dashed rgba(242,235,224,.55);padding:1.3rem 1.3rem;grid-template-columns:1fr;gap:.35rem;border-radius:6px}
.class-list .category:nth-child(odd){transform:rotate(-.8deg)}
.class-list .category:nth-child(even){transform:rotate(.8deg)}
.class-list .category h3{color:var(--accent)}

/* ---- code: polaroid-taped photo ---- */
.code-list li::before{border-radius:50%;width:.6rem;height:.6rem;top:1.1rem}
.code-visual{overflow:visible;background:var(--paper);padding:12px 12px 48px;border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(0,0,0,.5);transform:rotate(2.5deg)}
.reveal.is-visible.code-visual{transform:rotate(2.5deg)}
.code-visual-tint{inset:12px 12px 48px}

/* ---- request: form panel on paper ---- */
.cta-panel{position:relative;background:rgba(16,28,22,.82);border:3px solid var(--paper);box-shadow:10px 10px 0 var(--accent);padding:clamp(1.5rem,4vw,2.75rem);transform:rotate(-.4deg)}
.cta-panel .tape{width:120px}
.field input,.field textarea{border-radius:2px!important}

/* ---- responsive ---- */
@media (max-width:1100px){.section-event .fact-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .section-categories .category-list,.class-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .section-event .fact-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-sticker{font-size:1.1rem} .stat-sticker strong{font-size:1.9rem}
  .cta-panel{box-shadow:6px 6px 0 var(--accent);transform:none}
}
[hidden]{display:none!important}
.choice-group label{white-space:nowrap}
.wordmark,.header-cta{white-space:nowrap}

/* ===== Topo art layer (generated by tools/gen_topo.py; fictional terrain) ===== */

/* hero: topo background, still and crisp */
.hero-media picture{position:absolute;inset:0;display:block}
.hero-image{animation:none!important;transform:none!important;filter:none;object-position:70% 50%}
.hero-wash{background:
  linear-gradient(90deg,rgba(15,24,19,.88) 0%,rgba(15,24,19,.6) 38%,rgba(15,24,19,0) 68%),
  linear-gradient(0deg,rgba(15,24,19,.75) 0%,rgba(15,24,19,0) 40%)}

/* divider strip of contour lines */
.topo-strip{height:120px;background-size:100% 100%;background-repeat:no-repeat;margin:-1px 0}
.topo-strip.ridge{background-image:url(images/topo/topo-ridge.svg);background-color:#142019}
.topo-strip.ridge-dark{background-image:url(images/topo/topo-ridge-dark.svg);background-color:#142019}

/* "the dirt": cream topo panel, copy on a taped dark card */
.section-trails .section-photo-wash{display:none!important}
.section-trails .section-photo-bg img{filter:none}
.section-trails .trails-copy{position:relative;background:#16241c;border:3px solid #141a16;box-shadow:8px 8px 0 #141a16;padding:clamp(1.5rem,3.5vw,2.5rem);transform:rotate(-1deg)}
.section-trails .trails-copy::before,.section-trails .trails-copy::after{content:"";position:absolute;top:-13px;width:96px;height:26px;background:rgba(236,224,186,.85);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.section-trails .trails-copy::before{left:18px;transform:rotate(-8deg)}
.section-trails .trails-copy::after{right:18px;transform:rotate(7deg)}
.section-trails .trails-copy .section-title{font-size:clamp(2.4rem,5vw,3.6rem)}

/* classes + request: topo shows through a lighter wash */
.section-photo-bg img{filter:none}
.section-classes .section-photo-wash.green-tint{background:linear-gradient(90deg,rgba(16,26,20,.55),rgba(16,26,20,.15) 70%)}
.section-cta .section-photo-wash.green-tint{background:linear-gradient(180deg,rgba(16,26,20,.35),rgba(16,26,20,.1) 30%,rgba(16,26,20,.1) 70%,rgba(16,26,20,.5))}
.class-list .category{background:rgba(16,26,20,.88)}
.cta-panel{background:rgba(16,26,20,.94)}

/* code: topo panel as a taped print */
.code-visual-tint{display:none}
.code-visual img{filter:none}

@media (max-width:900px){
  .hero-image{object-position:center 60%}
  .hero-wash{background:linear-gradient(0deg,rgba(15,24,19,.9) 0%,rgba(15,24,19,.72) 55%,rgba(15,24,19,.55) 100%)}
  .topo-strip{height:60px}
}
@media (max-width:420px){.header-cta{font-size:.7rem;letter-spacing:.08em}.wordmark{font-size:1.05rem}}