/* ============================================================
   home.css — pronkshow landing page
   Loaded only on the homepage (after app.css). Fraunces is declared
   in app.css; Hanken Grotesk + Space Mono are declared here.
   ============================================================ */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/hanken-grotesk.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-mono-700.woff2') format('woff2')}

:root{
  --pine:#2E5A4C; --pine-deep:#1F4036; --pine-soft:#3C6E5D;
  --cream:#F5EFE1; --cream-2:#EFE6D3; --paper:#FBF8EF;
  --camel:#D8A45E; --camel-deep:#C2863C; --camel-light:#E8C78C;
  --rust:#C0432A; --rust-deep:#9F3520;
  --bark:#2C2620; --bark-soft:#6E6253;
  --line:#E0D6C0;
  --shadow:0 18px 40px -18px rgba(44,38,32,.35);
}

html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--bark);
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px; margin:0 auto; padding:0 28px}
a{color:inherit; text-decoration:none}
.mono{font-family:'Space Mono',monospace}
.display{font-family:'Fraunces',serif; font-variation-settings:"SOFT" 40,"WONK" 1; line-height:1.02; letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--rust); outline-offset:3px; border-radius:4px}

/* ---------- wordmark / nav ---------- */
.site-head{position:sticky; top:0; z-index:40; background:rgba(31,64,54,.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(245,239,225,.14)}
.bar{display:flex; align-items:center; justify-content:space-between; height:92px}
.brand{display:inline-flex; align-items:center; gap:.5rem}
.brand-mark{width:3.3rem; flex:none}
.brand-mark svg{width:100%; height:auto; display:block}
.brand-words{display:inline-flex; flex-direction:column; align-items:flex-start; line-height:.78; font-family:'Fraunces',serif; font-weight:900; font-variation-settings:"SOFT" 35,"WONK" 1; font-size:1.85rem; letter-spacing:-.015em}
.brand-words .bw-pronk{transform:rotate(-15deg); transform-origin:8% 100%; color:var(--bark)}
.brand-words .bw-show{transform:translate(1.8em,-.52em); color:var(--rust)}
.site-head .brand-words{transform:translateY(.34em)}
.site-head .brand-words .bw-pronk{color:var(--cream)}
.site-head .brand-words .bw-show{color:var(--camel-light)}
.site-foot .brand-words .bw-pronk{color:var(--cream)}
.site-foot .brand-words .bw-show{color:var(--camel-light)}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1.04fr .96fr; gap:48px; align-items:center; padding:74px 0 0}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rust-deep); margin-bottom:22px}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--rust)}
h1.hero-title{font-family:'Fraunces',serif; font-weight:900; font-variation-settings:"SOFT" 50,"WONK" 1; font-size:clamp(3rem,6.4vw,5rem); line-height:.97; letter-spacing:-.02em; color:var(--pine-deep)}
h1.hero-title em{font-style:italic; color:var(--rust)}
.lede{font-size:1.18rem; color:var(--bark-soft); max-width:32ch; margin:24px 0 0}

/* hero stage */
.stage{position:relative; aspect-ratio:1/1; width:80%; margin-inline:auto; border-radius:28px; background:radial-gradient(120% 120% at 30% 20%, var(--pine-soft), var(--pine-deep)); overflow:hidden; box-shadow:var(--shadow)}
.stage .contours{position:absolute; inset:0; opacity:.32}
.stage .ground{position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(transparent, rgba(0,0,0,.22))}
.llama{position:absolute; left:50%; top:50%; width:64%; transform:translate(-50%,-50%); animation:pronk 2.6s ease-in-out infinite}
.llama svg{width:100%; height:auto; display:block; filter:drop-shadow(0 16px 16px rgba(0,0,0,.28))}
@keyframes pronk{0%,100%{transform:translate(-50%,-43%)}45%{transform:translate(-50%,-57%)}}

/* ---------- schedule ---------- */
.sec{padding:74px 0 90px}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:14px}
.sec-head .display{font-size:clamp(2rem,4vw,2.9rem); font-weight:900; color:var(--pine-deep); font-variation-settings:"SOFT" 40,"WONK" 1}

.shows{margin-top:14px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff}
.show{display:grid; grid-template-columns:104px 1fr auto; gap:22px; align-items:center; padding:22px 24px; border-bottom:1px solid var(--line); color:inherit; transition:background .15s ease}
.show:last-child{border-bottom:0}
.show:hover{background:var(--cream)}
.date-blk{text-align:center; font-family:'Space Mono',monospace; line-height:1}
.date-blk .mo{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rust-deep); font-weight:700}
.date-blk .dy{font-size:1.5rem; font-weight:700; color:var(--pine-deep); margin-top:4px}
.date-blk .dy.tba{font-size:1rem; letter-spacing:.08em}
.date-blk .yr{font-size:.66rem; color:var(--bark-soft); margin-top:4px}
.show-main h3{font-family:'Fraunces',serif; font-weight:700; font-size:1.24rem; color:var(--bark); line-height:1.2}
.show-main .loc{color:var(--bark-soft); font-size:.94rem; margin-top:5px}
.show-side{text-align:right}
.go{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; color:var(--rust-deep); white-space:nowrap}
.go svg{transition:transform .15s ease}
.show:hover .go svg{transform:translateX(4px)}
.empty{padding:40px; text-align:center; color:var(--bark-soft)}

/* ---------- footer ---------- */
.site-foot{background:var(--bark); color:var(--cream-2); padding:54px 0 30px; margin-top:20px}
.site-foot .foot{display:flex; flex-direction:column; gap:14px}
.site-foot .brand{color:var(--cream)}
.site-foot p{color:rgba(245,239,225,.6); font-size:.92rem; max-width:46ch}
.foot-base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:40px; padding-top:20px; border-top:1px solid rgba(245,239,225,.14); font-size:.82rem; color:rgba(245,239,225,.5)}
.foot-base .mono{font-size:.74rem}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero{grid-template-columns:1fr; gap:40px; padding:48px 0 0}
  .stage{max-width:460px; margin:0 auto; width:100%}
  .show{grid-template-columns:84px 1fr; gap:16px}
  .show-side{grid-column:1/-1; text-align:left; padding-top:6px; border-top:1px dashed var(--line)}
}
@media (max-width:520px){
  .lede{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .llama{animation:none !important}
  html{scroll-behavior:auto}
}