/* Fresno Frequency. Sun-baked 70s radio: cream paper, chocolate brown ink, rust, burnt orange, mustard and olive stripes.
   Shrikhand for the big retro lettering, Space Mono for frequencies, Work Sans for reading. */
:root{--cream:#f7ecd5;--paper:#fffaf0;--brown:#3a2314;--brown2:#5a3a24;--rust:#a8431a;--orange:#d9662b;--mustard:#e2a52a;--olive:#5c6a24;--olive2:#47521b;--sage:#c9cf9a;--mute:#6e5a48;--line:#e4d3b2;
 --retro:'Shrikhand','Cooper Black',Georgia,serif;--mono:'Space Mono',ui-monospace,Menlo,monospace;--sans:'Work Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--brown);font:400 18px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}a:hover{color:var(--rust)}
img{max-width:100%;display:block}h1,h2,h3{margin:0;overflow-wrap:anywhere}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--olive);outline-offset:2px}
.ph-img{display:block;width:100%;height:100%;background:repeating-linear-gradient(180deg,#a8431a 0 22%,#d9662b 22% 44%,#e2a52a 44% 66%,#5c6a24 66% 88%,#3a2314 88% 100%)}
[id]{scroll-margin-top:110px}
.stripes{display:grid;grid-template-rows:repeat(4,6px)}.stripes i:nth-child(1){background:var(--rust)}.stripes i:nth-child(2){background:var(--orange)}.stripes i:nth-child(3){background:var(--mustard)}.stripes i:nth-child(4){background:var(--olive)}

/* header */
.hd{position:sticky;top:0;z-index:20;background:var(--cream)}
.hd-in{display:flex;align-items:center;gap:22px;min-height:100px}
.brand-img{height:78px;width:auto;max-width:260px;object-fit:contain}
.brand .lg-txt{font:400 28px/1 var(--retro);color:var(--rust)}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{font:700 15px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:12px 14px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--paper)}.nav a.on{background:var(--brown);color:var(--cream)}

/* hero */
.hero{position:relative;overflow:hidden;padding:60px 0 80px;background:var(--paper)}
.sun{position:absolute;left:50%;bottom:-60%;width:200vmax;height:200vmax;transform:translateX(-50%);border-radius:50%;
 background:repeating-conic-gradient(from 0deg,rgba(226,165,42,.24) 0deg 7deg,rgba(255,250,240,0) 7deg 14deg);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:50px;align-items:center}
.badge{display:inline-block;font:700 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;background:var(--olive);color:var(--paper);padding:10px 16px;border-radius:999px}
.hero h1{font:400 clamp(58px,8.6vw,124px)/.95 var(--retro);color:var(--rust);margin-top:22px;text-shadow:4px 4px 0 var(--mustard),8px 8px 0 rgba(92,106,36,.35)}
.hero-p{font:500 21px/1.5 var(--sans);color:var(--brown2);max-width:540px;margin:22px 0 0}
.hero-logo{margin:24px 0 0}.hero-logo .hl-img{display:block;width:min(540px,100%);height:auto;filter:drop-shadow(5px 5px 0 rgba(226,165,42,.35))}
.hero-logo .lg-txt{font:400 clamp(48px,7vw,96px)/1 var(--retro);color:var(--rust)}
.tagl{font:400 clamp(30px,3.6vw,46px)/1.05 var(--retro);color:var(--rust);margin:20px 0 0;text-shadow:3px 3px 0 var(--mustard)}
.lead{margin-top:26px;background:var(--cream);border:2px solid var(--brown);border-radius:20px;padding:18px 22px;max-width:600px;box-shadow:6px 6px 0 var(--brown)}
.lead h2{font:800 23px/1.3 var(--sans);margin-top:8px}
.kick{display:block;font:700 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--rust)}
.arch{aspect-ratio:4/5;border-radius:999px 999px 26px 26px;overflow:hidden;background:var(--mustard);border:8px solid var(--brown);box-shadow:14px 14px 0 var(--orange)}
.arch img,.arch .ph-img{width:100%;height:100%;object-fit:cover}

/* headings */
.hd2{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 18px;margin-bottom:26px}
.hd2 .kick{width:100%}
.hd2 h2{font:400 clamp(36px,5vw,62px)/1.05 var(--retro);color:var(--brown)}
.more{margin-left:auto;font:700 14px/1 var(--mono);text-transform:uppercase;color:var(--rust);padding-bottom:8px}
.blk{padding-top:84px}
.src{display:block;font:500 14px/1.4 var(--sans);color:var(--mute);margin-top:6px}
.src b{color:var(--brown);font-weight:700}.src em{font-style:normal}.src em:before{content:"\00B7";margin:0 6px}

/* polaroids */
.pols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;padding:10px 6px}
.pol{background:#fff;padding:14px 14px 22px;box-shadow:0 12px 26px rgba(58,35,20,.18);position:relative}
.pol:before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(226,165,42,.55);transform:rotate(-3deg)}
.pol0{transform:rotate(-2deg)}.pol1{transform:rotate(1.5deg) translateY(10px)}.pol2{transform:rotate(-1deg)}
.pol-pic{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--cream)}
.pol-pic img{width:100%;height:100%;object-fit:cover;filter:saturate(1.08) sepia(.08)}
.pol h3{font:700 20px/1.32 var(--sans);margin-top:14px}
.n-fb{background:#fff!important}
.bt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8%;background:#fff}
.bt img{width:100%!important;height:100%!important;object-fit:contain!important}
.bt b{font:400 22px/1.1 var(--retro);color:var(--rust);text-align:center}

/* dial */
.dial-s{margin-top:90px;padding:74px 0 80px;background:var(--brown);color:var(--cream)}
.dial-s .hd2 h2{color:var(--cream)}.dial-s .kick{color:var(--mustard)}
.dial-p{font:500 19px/1.5 var(--sans);color:#e8d9bd;max-width:640px;margin:-10px 0 30px}
.radio{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:24px;align-items:center;background:linear-gradient(180deg,#7a4a2a,#5a3420);border-radius:28px;padding:22px;box-shadow:inset 0 2px 0 rgba(255,255,255,.15),0 16px 30px rgba(0,0,0,.35)}
.dial{position:relative;height:170px;border-radius:16px;background:linear-gradient(180deg,#fff3d6,#f2dfb4);box-shadow:inset 0 0 0 3px #2a180c,inset 0 8px 18px rgba(58,35,20,.25);overflow:hidden;color:var(--brown)}
.band{position:absolute;left:14px;top:12px;font:700 14px/1 var(--mono);color:var(--rust)}
.scale{position:absolute;left:5%;right:5%;top:76px;height:20px;border-top:2px solid var(--brown);
 background:repeating-linear-gradient(90deg,var(--brown) 0 2px,transparent 2px 5%);background-size:100% 9px;background-repeat:no-repeat}
.scale span{position:absolute;top:12px;transform:translateX(-50%);font:700 13px/1 var(--mono)}
.mk{position:absolute;top:36px;transform:translateX(-50%);width:0;display:flex;flex-direction:column;align-items:center}
.mk b{font:700 12px/1 var(--mono);background:var(--rust);color:#fff;padding:4px 6px;border-radius:5px;white-space:nowrap}
.mk em{font:700 11px/1 var(--mono);font-style:normal;margin-top:3px;white-space:nowrap}
.mk.up{top:auto;bottom:16px;flex-direction:column-reverse}.mk.up em{margin:0 0 3px}
.mk:hover b,.mk:focus b{background:var(--olive)}
.needle{position:absolute;top:8px;bottom:8px;width:3px;background:#d62d0a;box-shadow:0 0 8px rgba(214,45,10,.6);transition:left .45s cubic-bezier(.4,1.4,.5,1);transform:translateX(-50%);pointer-events:none}
.knobs{display:flex;justify-content:space-around}
.knobs span{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1dcb0,#b98c55 60%,#6b4424);box-shadow:0 6px 0 #2a180c,inset 0 0 0 6px rgba(58,35,20,.25)}
.tapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.tape{position:relative;display:grid;gap:4px;background:var(--cream);color:var(--brown);border-radius:12px;padding:16px 16px 18px;border-top:12px solid var(--mustard);box-shadow:0 6px 0 #1f120a;transition:transform .12s}
.tape:nth-child(4n+2){border-top-color:var(--orange)}.tape:nth-child(4n+3){border-top-color:var(--olive)}.tape:nth-child(4n){border-top-color:var(--rust)}
.tape:hover{transform:translateY(-3px);color:var(--brown)}
.reels{display:flex;gap:10px;position:absolute;right:14px;top:14px}
.reels i{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,var(--cream) 0 4px,var(--brown) 4px 7px,#cdb48a 7px 100%)}
.tape b{font:700 30px/1 var(--mono)}.tape small{font-size:14px;color:var(--rust)}
.call{font:800 18px/1 var(--sans);letter-spacing:.04em}
.tape em{font:600 15px/1.3 var(--sans);font-style:normal;color:var(--rust)}
.city{font:500 13px/1 var(--mono);color:var(--mute);text-transform:uppercase}
.note{font:500 15px/1.55 var(--sans);color:#d9c6a4;max-width:780px;margin:28px 0 0}

/* harvest */
.harvest{background:var(--olive);color:var(--paper);padding:80px 0}
.harvest-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:46px;align-items:center}
.harvest .hd2 h2{color:var(--paper)}.harvest .kick{color:#ffe2a0}
.harvest-pic{aspect-ratio:5/4;border-radius:26px;overflow:hidden;background:var(--olive2);border:8px solid var(--paper);transform:rotate(-1.5deg)}
.harvest-pic img,.harvest-pic .ph-img{width:100%;height:100%;object-fit:cover}
.crates{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.crates li{background:var(--paper);color:var(--brown);border-radius:10px;padding:14px 18px;border-left:10px solid var(--mustard)}
.crates a{font:700 19px/1.3 var(--sans)}
.crates .src{color:var(--mute)}

/* tickets */
.tks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tk{display:grid;grid-template-columns:62px minmax(0,1fr);background:var(--paper);border-radius:14px;overflow:hidden;box-shadow:0 8px 20px rgba(58,35,20,.15);border:2px solid var(--brown)}
.tk-l{background:var(--rust);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 0;writing-mode:vertical-rl;transform:rotate(180deg);font:700 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;border-left:3px dashed var(--paper)}
.tk-l b{font:400 18px/1 var(--retro);letter-spacing:0}
.tk-r{padding:14px}
.tk-pic{display:block;position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--cream);margin-bottom:12px}
.tk-pic img{width:100%;height:100%;object-fit:cover}
.tk h3{font:700 19px/1.32 var(--sans)}

/* sierra */
.sierra{position:relative;margin-top:96px;background:#d9e3c2;padding:0 0 80px}
.peaks{display:block;width:100%;height:70px;fill:var(--cream);transform:scaleY(-1);margin-bottom:40px}
.sierra-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;align-items:center}
.sierra-pic{aspect-ratio:2/1;border-radius:26px;overflow:hidden;background:var(--sage)}
.sierra-pic img,.sierra-pic .ph-img{width:100%;height:100%;object-fit:cover}
.sierra-card{background:var(--paper);border:3px solid var(--brown);border-radius:24px;padding:28px 30px;margin-left:-60px;position:relative;box-shadow:10px 10px 0 var(--olive)}
.sl{list-style:none;margin:0;padding:0}
.sl li{padding:13px 0;border-bottom:2px dotted var(--line)}
.sl a{font:700 19px/1.32 var(--sans)}

/* valley table */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.vt{background:var(--paper);border-radius:22px;overflow:hidden;border:2px solid var(--brown);box-shadow:6px 6px 0 var(--mustard)}
.vt-pic{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--cream);border-bottom:2px solid var(--brown)}
.vt-pic img{width:100%;height:100%;object-fit:cover}
.vt-t{padding:16px 18px 20px}.vt h3{font:700 20px/1.3 var(--sans)}

/* releases */
.ded{margin-top:90px;padding:70px 0 80px;background:var(--paper);border-top:2px solid var(--line)}
.rc{background:#fff;border-radius:20px;overflow:hidden;border:2px solid var(--brown);display:flex;flex-direction:column}
.rc-pic{display:block;aspect-ratio:16/10;background:#fff;border-bottom:2px solid var(--brown)}
.rc-t{padding:16px 18px 20px}.rc h3{font:700 20px/1.3 var(--sans);margin-top:9px}
.prt{display:inline-block;font:700 12px/1 var(--mono);text-transform:uppercase;background:var(--olive);color:var(--paper);padding:7px 10px;border-radius:999px}
.rows{display:grid;gap:16px;margin-top:28px}
.rr{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:center;border-bottom:2px dotted var(--line);padding-bottom:16px}
.rr-pic{display:block;aspect-ratio:16/10;background:#fff;border:2px solid var(--brown);border-radius:12px;overflow:hidden}
.rr h3{font:700 20px/1.3 var(--sans);margin-top:6px}
.fr{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#fff;overflow:hidden}
.fr-ph{padding:10px}.fr-ph img,.fr-lg .tile img{width:100%;height:100%;object-fit:contain!important}
.fr-lg .tile{display:flex;align-items:center;justify-content:center}.fr-dk{background:#1d1d1d}

/* page heads */
.pg-h{background:var(--paper);padding:70px 0 56px;border-bottom:2px solid var(--line);position:relative;overflow:hidden}
.pg-h h1{font:400 clamp(44px,7vw,92px)/1 var(--retro);color:var(--rust);margin-top:12px;text-shadow:4px 4px 0 var(--mustard)}
.pg-h p{font:500 20px/1.5 var(--sans);color:var(--brown2);max-width:720px;margin:16px 0 0}
.st-h .st-t{font:800 clamp(30px,4.2vw,54px)/1.12 var(--sans);color:var(--brown);text-shadow:none;margin-top:16px;max-width:1050px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:700 13px/1 var(--mono);text-transform:uppercase;color:var(--mute);margin-bottom:20px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0}
.tabs a{font:700 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;border-radius:999px;border:2px solid var(--brown)}
.tabs a.on{background:var(--brown);color:var(--cream)}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:40px 0}
.pager a,.pager span{font:700 15px/1 var(--mono);padding:12px 16px;border-radius:999px;border:2px solid var(--brown)}
.pager .on{background:var(--rust);border-color:var(--rust);color:#fff}.pg-gap{border:0!important}
.empty{font:700 20px/1.4 var(--sans);padding:40px 0}
.doc{padding:44px 0 70px}

/* story */
.s-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;padding-top:40px}
.sfig{margin:0}.sfig .fr{aspect-ratio:16/9;border-radius:18px;border:3px solid var(--brown)}
.sfig figcaption{font:500 13px/1.4 var(--sans);color:var(--mute);margin-top:8px}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0}
.share span{font:700 13px/1 var(--mono);text-transform:uppercase;color:var(--rust)}
.share a,.share button{font:700 14px/1 var(--sans);background:var(--brown);color:var(--cream);border:0;padding:11px 14px;border-radius:999px;cursor:pointer}
.prose{font:400 19px/1.75 var(--sans);max-width:760px}
.prose p{margin:0 0 1.1em}.prose .lede{font-size:21px;font-weight:700}
.prose .dl{font:700 13px/1 var(--mono);text-transform:uppercase;color:var(--rust)}
.prose h2{font:400 30px/1.15 var(--retro);color:var(--rust);margin:1.4em 0 .5em}
.prose a{color:var(--rust);text-decoration:underline}
.prose blockquote,.pull{margin:1.4em 0;padding:18px 22px;background:var(--paper);border-left:6px solid var(--mustard);font-weight:700}
.in-fig{margin:1.4em auto;text-align:center}.in-fig img{margin:0 auto;max-height:560px;width:auto;border-radius:12px}
.about-co{margin:2em 0;padding:24px;background:var(--paper);border-radius:18px;border:2px solid var(--line)}
.about-co .lbl{font:700 12px/1 var(--mono);text-transform:uppercase;color:var(--rust)}
.about-co h3{font:800 22px/1.3 var(--sans);margin:8px 0 10px}
.disclose{font-size:15px!important;color:var(--mute);border-top:2px dotted var(--line);padding-top:16px;margin-top:2em}
.btn{display:inline-block;background:var(--rust);color:#fff!important;text-decoration:none!important;font:700 15px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;padding:15px 22px;border-radius:999px;box-shadow:4px 4px 0 var(--brown)}
.btn:hover{background:var(--olive)}
.side{display:grid;gap:26px;align-content:start}
.co,.side-l{background:var(--paper);border:2px solid var(--brown);border-radius:18px;padding:20px}
.co h4,.side-l h4{font:400 22px/1 var(--retro);color:var(--rust);margin:0 0 14px}
.co .fr{aspect-ratio:4/3;border-radius:12px;border:2px solid var(--line);margin-bottom:14px}
.co>b{display:block;font:800 20px/1.3 var(--sans);overflow-wrap:anywhere}
.co dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:15px;margin:14px 0 18px}
.co dt{font-weight:700;color:var(--mute)}.co dd{margin:0;overflow-wrap:anywhere}
.co .btn{display:block;text-align:center}
.sl-i{padding:12px 0;border-bottom:2px dotted var(--line)}.sl-i>a{font:700 17px/1.35 var(--sans)}

/* footer */
.ft{background:var(--brown);color:var(--cream);margin-top:90px}
.ded+.ft,main:has(.ded:last-child)+.ft{margin-top:0}
.ft-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:48px}
.ft-img{height:70px;width:auto;max-width:260px;object-fit:contain}
.ft .lg-txt{font:400 28px/1 var(--retro);color:var(--mustard)}
.ft-brand p{color:#e0cfae;max-width:420px}
.ft h4{font:700 14px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mustard);margin:0 0 14px}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-weight:700}
.ft a:hover{color:var(--mustard)}
.ft-fine{border-top:1px solid var(--brown2);margin-top:36px;padding-top:18px;padding-bottom:34px;font-size:14px;color:#cdb894}
.ft-fine p{margin:0 0 6px}

@media (max-width:1050px){
 .hd-in{flex-wrap:wrap;padding-top:10px}.nav{order:3;width:100%;margin:0 0 10px;flex-wrap:nowrap;overflow-x:auto}
 .hero-in,.harvest-in,.s-cols{grid-template-columns:minmax(0,1fr)}
 .arch{max-width:460px}
 .pols,.tks,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.pols>*:nth-child(3),.tks>*:nth-child(3),.g3>*:nth-child(3n){grid-column:1/-1}
 .pols>*:nth-child(3){max-width:420px;justify-self:center;width:100%}
 .tapes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .radio{grid-template-columns:minmax(0,1fr)}.knobs{display:none}
 .sierra-in{grid-template-columns:minmax(0,1fr)}.sierra-card{margin:-50px 18px 0}
 .ft-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft-brand{grid-column:1/-1}
}
@media (max-width:640px){
 body{font-size:17px}.hd-in{min-height:76px}.brand-img{height:58px;max-width:200px}
 .hero{padding:36px 0 56px}.arch{border-width:6px;box-shadow:8px 8px 0 var(--orange)}
 .pols,.tks,.g3{grid-template-columns:minmax(0,1fr)}.pols>*:nth-child(3),.tks>*:nth-child(3),.g3>*:nth-child(3n){grid-column:auto}
 .pol1{transform:rotate(1.5deg)}
 .dial{height:auto;min-height:0;padding:12px;overflow-x:auto}.dial .scale,.dial .mk,.dial .needle,.band{display:none}
 .radio{display:none}
 .tapes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.tape b{font-size:24px}.reels{display:none}
 .sierra-card{margin:-30px 10px 0;padding:22px}
 .rr{grid-template-columns:minmax(0,1fr)}
 .ft-in{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.needle,.tape{transition:none}}
.co,.side,.s-cols>*{min-width:0}
.co .fr,.sfig .fr{height:auto}
.fr img{max-width:100%;max-height:100%;min-width:0}
[hidden]{display:none!important}