/* BetWest Alerts — the trail forks: one gate, two trails, one word sent out */

:root{
  /* gold ramp sampled from assets/mark-betwest.webp */
  --spec:#fce7b7;
  --high:#dbd0a4;
  --lit:#c39351;
  --mid:#ae8956;
  --deep:#866641;
  --brand:#6b4f24;
  --char:#2d1b00;
  /* grounds */
  --night:#0b0704;
  --timber:#140d06;
  --hide:#1e150c;
  --rail:#26190d;
  --iron:#38301f;
  /* ink */
  --bone:#f4e8d1;
  --sand:#d0bd99;
  --red:#a32d12;
  --arch:44px 44px 4px 4px;
  --nib:4px;

  --slab:Superclarendon,"Rockwell Nova",Rockwell,"Bookman Old Style",Bookman,Georgia,"Times New Roman",serif;
  --body:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;

  --pad:clamp(1.15rem,4.5vw,3.25rem);
  --hold:1220px;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");
  --tack:radial-gradient(circle at 34% 32%,#f0dcaa 0 12%,#c39351 34%,#7a5a2c 62%,#241804 78%,transparent 80%);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:400 clamp(1rem,.72vw + .84rem,1.11rem)/1.66 var(--body);
  color:var(--bone);
  background-color:var(--timber);
  background-image:
    repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,rgba(252,231,183,.016) 1px 2px,transparent 2px 151px),
    linear-gradient(180deg,#1c1108 0,#140d06 22%,#100a05 60%,#0b0704 100%);
  overflow-x:hidden;
}
img{max-width:100%}
picture{display:block}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}

/* ---------- shared ---------- */

.gilt{
  background-image:linear-gradient(177deg,#b58e48 0,#cd9d58 14%,#f2dcae 30%,var(--spec) 38%,#cfa96e 52%,#ab8440 62%,#c19a63 74%,#e4cf98 88%,#c9b684 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(252,231,183,.14)) drop-shadow(0 4px 12px rgba(0,0,0,.85));
}
.byword{
  font:700 .74rem/1.5 var(--slab);letter-spacing:.24em;text-transform:uppercase;
  color:#e2b979;margin:0 0 .7rem;
}
.crosshead{font:700 clamp(1.75rem,4.3vw,3rem)/1.08 var(--slab);letter-spacing:-.005em;color:var(--bone);margin:0 0 1rem;text-wrap:balance}
.brandiron{
  display:block;width:clamp(46px,6vw,64px);height:auto;color:#b98a4b;margin:0 auto 1.05rem;
  filter:drop-shadow(0 1px 0 rgba(252,231,183,.3)) drop-shadow(0 -1px 1px rgba(0,0,0,.9)) drop-shadow(0 0 16px rgba(214,140,54,.35));
}
.agestamp{
  display:inline-block;font:700 .78em/1.35 var(--slab);letter-spacing:.05em;color:#ffeee6;
  background:linear-gradient(180deg,#c4472a,var(--red));
  padding:.2em .5em;border-radius:var(--nib);margin-right:.55em;
  box-shadow:inset 0 1px 0 rgba(255,222,204,.5),inset 0 -1px 0 rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.8);
}
.skipover{
  position:absolute;left:-9999px;top:0;z-index:30;background:var(--spec);color:#231605;
  font:700 .95rem/1 var(--slab);padding:.85rem 1.2rem;border-radius:var(--nib);
}
.skipover:focus{left:.7rem;top:.7rem}
:is(a,button,input,[tabindex]):focus-visible{outline:3px solid var(--spec);outline-offset:3px}

/* ---------- the hitch rail ---------- */

.hitchrail{
  position:relative;padding:clamp(.7rem,2vw,1.15rem) var(--pad);
  background-image:var(--grain),
    repeating-linear-gradient(90deg,rgba(0,0,0,.17) 0 1px,rgba(252,231,183,.02) 1px 2px,transparent 2px 163px),
    linear-gradient(180deg,#33220f,#1d1309 58%,#130c06);
  background-blend-mode:soft-light,normal,normal;
  border-bottom:3px solid #0a0603;
  box-shadow:inset 0 1px 0 rgba(252,231,183,.13),0 3px 14px rgba(0,0,0,.6);
}
.hitchrail::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,#5c4423,#a97f3e 18%,#e0be7c 50%,#a97f3e 82%,#5c4423);
  opacity:.75;
}
.hitchrail-inner{
  max-width:var(--hold);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.hitchrail-mark{width:clamp(114px,15vw,162px);height:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.75))}
.hitchrail-age{font:600 .76rem/1.3 var(--slab);letter-spacing:.13em;text-transform:uppercase;color:var(--sand);text-align:right;white-space:nowrap}
@media (max-width:420px){.hitchrail-where{display:none}}

/* ---------- 1. sunup ---------- */

.sunup{position:relative;background:#0d0805}
.sunup-scene{max-width:1920px;width:100%;margin-inline:auto}
.sunup-shot{display:block;width:100%;height:auto}
.sunup-plate{
  position:relative;z-index:2;margin-top:-62vw;
  display:flex;flex-direction:column;
  padding:clamp(4.2rem,15vw,5.5rem) var(--pad) clamp(1.4rem,5vw,2rem);
  background-image:linear-gradient(180deg,
    rgba(13,8,5,0) 0,rgba(13,8,5,.52) 6%,rgba(13,8,5,.88) 13%,#0f0a06 19%,#120c07 100%);
}
.brandiron--lead{display:none;align-self:flex-start;margin:0 0 .9rem;width:clamp(40px,3.4vw,52px)}
@media (min-width:720px){.brandiron--lead{display:block}}
.sunup-lead{order:4;color:var(--sand);margin:1.15rem 0 0;max-width:34em}
.sunup-plate .holler{order:2;margin-top:1.1rem}
@media (max-width:719px){.sunup-plate .holler-head{display:none}}
.sunup-title{
  font:700 clamp(1.65rem,5.9vw,2.55rem)/1.12 var(--slab);letter-spacing:-.012em;
  margin:0 0 1rem;text-wrap:balance;
}
.sunup-live{
  order:3;margin:1.5rem 0 0;padding:.15rem 0 .15rem clamp(.8rem,2.4vw,1.1rem);
  border-left:3px solid #8a6630;
}
.sunup-flag{
  font:700 .7rem/1.45 var(--slab);letter-spacing:.2em;text-transform:uppercase;
  color:var(--sand);margin:0 0 .3rem;
}
.sunup-cry{
  font:700 clamp(1.9rem,6.6vw,3rem)/1.05 var(--slab);letter-spacing:-.02em;
  margin:0;text-wrap:balance;
}
.sunup-cry em{font:400 .44em/1 var(--body);font-style:italic;color:var(--sand);letter-spacing:0;white-space:nowrap}

@media (min-width:720px){
  .sunup{display:grid}
  .sunup-scene{grid-area:1/1}
  .sunup-plate{
    grid-area:1/1;align-self:center;justify-self:end;margin-top:0;
    width:min(52%,600px);margin:clamp(1rem,3vw,2.5rem) clamp(1rem,4vw,4rem);
    padding:clamp(1.6rem,3.1vw,2.5rem);
    border-radius:var(--arch);
    background-image:var(--grain),
      radial-gradient(120% 80% at 50% 0,rgba(195,147,81,.12),transparent 62%),
      linear-gradient(178deg,#2f2011,#1d1309 46%,#150e07);
    background-blend-mode:soft-light,normal,normal;
    border:1px solid #6d5023;
    box-shadow:
      inset 0 1px 0 rgba(252,231,183,.24),
      inset 0 0 0 5px rgba(0,0,0,.3),
      inset 0 -30px 50px rgba(0,0,0,.5),
      0 30px 60px rgba(0,0,0,.72);
  }
  .sunup-plate::after{content:"";position:absolute;inset:9px;border-radius:36px 36px 2px 2px;pointer-events:none;border:1.5px dashed rgba(226,196,131,.3);background-image:var(--tack),var(--tack),var(--tack),var(--tack);background-size:13px 13px;background-repeat:no-repeat;background-position:2px 2px,calc(100% - 2px) 2px,2px calc(100% - 2px),calc(100% - 2px) calc(100% - 2px)}
}
@media (min-width:1120px){.sunup-plate{width:min(46%,560px)}}
/* tall enough to hold the whole plate: the word first, the figure under it, the field last */
@media (min-width:1120px) and (min-height:880px){
  .sunup-lead{order:0;margin:1rem 0 1.4rem}
  .sunup-plate .holler{order:0;margin-top:0}
  .sunup-live{order:0;margin:0 0 .2rem}
}

/* ---------- 2. brassbeam ---------- */

.brassbeam{
  position:relative;padding:clamp(1.6rem,4vw,2.4rem) var(--pad);
  background-image:var(--grain),
    linear-gradient(180deg,#3a2712,#241708 30%,#1d1207 70%,#2c1d0e);
  background-blend-mode:soft-light,normal;
  border-block:3px solid #0a0603;
  box-shadow:inset 0 6px 20px rgba(0,0,0,.55),inset 0 -6px 20px rgba(0,0,0,.55);
}
.brassbeam::before,.brassbeam::after{
  content:"";position:absolute;left:0;right:0;height:8px;
  background:
    radial-gradient(circle 3px at 26px 50%,#f2ddac 0 30%,#a97f3e 60%,#3a2a10 90%,transparent 92%) repeat-x,
    linear-gradient(180deg,#e2c483,#a97f3e 42%,#6b4d20 82%,#3a2a10);
  background-size:74px 8px,100% 100%;
}
.brassbeam::before{top:0}
.brassbeam::after{bottom:0;transform:scaleY(-1)}
.brassbeam-flag{max-width:var(--hold);margin:0 auto clamp(.9rem,2.4vw,1.3rem);text-align:center}
.brassbeam-run{
  max-width:var(--hold);margin:0 auto;display:grid;gap:clamp(1rem,3vw,1.6rem);
  grid-template-columns:1fr;
}
@media (min-width:520px){.brassbeam-run{grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem)}}
@media (min-width:940px){.brassbeam-run{grid-template-columns:repeat(4,1fr)}}
.brassbeam-item{position:relative;text-align:center;padding:.35rem .5rem}
.brassbeam-item::before{
  content:none;position:absolute;top:12%;bottom:12%;right:calc(-1 * clamp(.6rem,1.5vw,1rem));width:2px;
  background:linear-gradient(180deg,transparent,rgba(195,147,81,.4) 22%,rgba(252,231,183,.55) 50%,rgba(195,147,81,.4) 78%,transparent);
}
@media (min-width:520px){.brassbeam-item:nth-child(odd)::before{content:""}}
@media (min-width:940px){
  .brassbeam-item::before{content:""}
  .brassbeam-item:last-child::before{content:none}
}
.brassbeam-sum{font:700 clamp(2.4rem,7.5vw,3.5rem)/1 var(--slab);letter-spacing:-.02em}
.brassbeam-name{font:400 .875rem/1.45 var(--body);color:var(--sand);margin:.45rem 0 0;letter-spacing:.01em}

/* ---------- 3. trailfork ---------- */

.trailfork{
  padding:clamp(2.6rem,7vw,4.6rem) var(--pad) clamp(2.2rem,6vw,4rem);
  background-image:radial-gradient(64% 34% at 50% 0,rgba(226,196,131,.12),transparent 72%);
}
.trailfork-head{max-width:46rem;margin:0 auto clamp(1.8rem,4.5vw,2.8rem);text-align:center}
.trailfork-lead{color:var(--sand)}
.trailfork-pair{
  max-width:var(--hold);margin:0 auto;display:grid;gap:clamp(1.4rem,3.5vw,2.2rem);
}
@media (min-width:900px){.trailfork-pair{grid-template-columns:1fr 1fr;align-items:start}}
.trailfork-track{
  position:relative;padding:clamp(1.3rem,3.4vw,2rem);
  border-radius:var(--arch);border:1px solid #4e3a1b;
  background-image:var(--grain),
    radial-gradient(90% 60% at 50% 0,rgba(195,147,81,.18),transparent 66%),
    linear-gradient(176deg,#23291b,#181d12 42%,#111408);
  background-blend-mode:soft-light,normal,normal;
  box-shadow:
    inset 0 1px 0 rgba(252,231,183,.18),
    inset 0 0 0 6px rgba(0,0,0,.26),
    inset 0 -30px 48px rgba(0,0,0,.44),
    0 26px 52px rgba(0,0,0,.62);
}
.trailfork-track--book{
  border-color:#5c3419;
  background-image:var(--grain),
    radial-gradient(90% 60% at 50% 0,rgba(214,110,54,.2),transparent 66%),
    linear-gradient(176deg,#37200f,#241408 42%,#180e07);
}
.trailfork-track::after{
  content:"";position:absolute;inset:9px;border-radius:36px 36px 2px 2px;pointer-events:none;
  border:1.5px dashed rgba(226,196,131,.26);
  background-image:var(--tack),var(--tack),var(--tack),var(--tack);
  background-size:13px 13px;background-repeat:no-repeat;
  background-position:2px 2px,calc(100% - 2px) 2px,2px calc(100% - 2px),calc(100% - 2px) calc(100% - 2px);
}
.trailfork-tag{
  font:700 .72rem/1 var(--slab);letter-spacing:.26em;text-transform:uppercase;color:#1d1103;
  display:inline-block;padding:.5em .85em;border-radius:var(--nib);
  background:linear-gradient(180deg,#f4dfae,#d3a45c 46%,#b5883f 76%,#d5b071);
  box-shadow:inset 0 1px 0 rgba(255,247,222,.7),inset 0 -1px 0 rgba(0,0,0,.4),0 2px 5px rgba(0,0,0,.7);
}
.trailfork-title{font:700 clamp(1.3rem,2.7vw,1.75rem)/1.16 var(--slab);color:var(--bone);margin:.85rem 0 1.05rem}
.trailfork-shot{
  display:block;width:100%;height:auto;border-radius:var(--nib);
  border:1px solid #4a3618;
  box-shadow:0 1px 0 rgba(252,231,183,.14),0 14px 30px rgba(0,0,0,.62);
}
.trailfork-text{margin:1.1rem 0 0;color:var(--sand)}
.trailfork-list{margin:1.05rem 0 0;display:grid;gap:.6rem}
.trailfork-point{
  position:relative;padding-left:1.9rem;font-size:.95rem;line-height:1.5;color:var(--bone);
}
.trailfork-star{
  position:absolute;left:0;top:.16em;width:1.05rem;height:1.05rem;fill:var(--lit);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9));
}

/* ---------- 4. roundup ---------- */

.roundup{padding:clamp(1rem,3vw,2rem) var(--pad) clamp(2.6rem,7vw,4.6rem);background-image:radial-gradient(58% 42% at 50% 34%,rgba(226,196,131,.1),transparent 72%)}
.roundup-plate{
  position:relative;max-width:64rem;margin:0 auto;text-align:center;
  padding:clamp(1.8rem,5vw,3.2rem) clamp(1.2rem,4.5vw,3.2rem);
  border-radius:var(--arch);border:1px solid #6b4f24;
  background-image:var(--grain),
    radial-gradient(70% 46% at 50% 0,rgba(226,196,131,.13),transparent 70%),
    linear-gradient(177deg,#33220f,#231708 44%,#1a1108);
  background-blend-mode:soft-light,normal,normal;
  box-shadow:
    inset 0 1px 0 rgba(252,231,183,.24),
    inset 0 0 0 6px rgba(0,0,0,.26),
    inset 0 -34px 56px rgba(0,0,0,.46),
    0 30px 64px rgba(0,0,0,.66);
}
.roundup-plate::after{
  content:"";position:absolute;inset:10px;border-radius:35px 35px 2px 2px;pointer-events:none;
  border:1.5px dashed rgba(226,196,131,.3);
  background-image:var(--tack),var(--tack),var(--tack),var(--tack);
  background-size:14px 14px;background-repeat:no-repeat;
  background-position:2px 2px,calc(100% - 2px) 2px,2px calc(100% - 2px),calc(100% - 2px) calc(100% - 2px);
}
.roundup-text{color:var(--sand);max-width:44rem;margin:0 auto;text-align:left}
@media (min-width:640px){.roundup-text{text-align:center}}

/* ---------- the form ---------- */

.holler{margin-top:1.35rem}
.holler--close{margin-top:1.7rem;max-width:36rem;margin-inline:auto;text-align:left}
.holler-head{font:700 1.05rem/1.3 var(--slab);color:var(--bone);margin:0 0 .55rem}
.holler-label{display:block;font:600 .78rem/1.4 var(--slab);letter-spacing:.15em;text-transform:uppercase;color:var(--sand);margin:0 0 .4rem}
.holler-row{display:flex;flex-wrap:wrap;gap:.6rem}
.holler-input{
  flex:1 1 12rem;min-width:0;font:400 1rem/1.2 var(--body);color:var(--bone);
  padding:.82rem .9rem;border-radius:var(--nib);
  border:2px solid #6b4f24;
  background:linear-gradient(180deg,#0b0704,#150e07 60%,#191108);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.85),inset 0 -1px 0 rgba(252,231,183,.09);
}
.holler-input::placeholder{color:#9c8863;opacity:1}
.holler-input:hover{border-color:#8a6730}
.holler-go{
  flex:0 1 auto;font:700 .95rem/1.2 var(--slab);letter-spacing:.06em;color:#1c1004;cursor:pointer;
  padding:.85rem 1.35rem;border-radius:var(--nib);border:1px solid #7c5b26;
  background:linear-gradient(180deg,#fdf0cb,#e0bc78 30%,#cb9a55 56%,#b0823a 82%,#dcb877);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.85),inset 0 -2px 0 rgba(0,0,0,.32),0 4px 12px rgba(0,0,0,.7);
  transition:transform .16s ease,filter .16s ease;
}
.holler-go:hover{filter:brightness(1.08)}
.holler-go:active{transform:translateY(1px)}
.holler-warn{
  margin:.6rem 0 0;font-size:.9rem;color:#ffb9a4;
  padding-left:.7rem;border-left:3px solid var(--red);
}
.holler-note{margin:.65rem 0 0;font-size:.82rem;line-height:1.5;color:#b7a37e}
.holler-done{
  padding:1.1rem 1.2rem;border-radius:var(--nib);
  border:1px solid #6b4f24;background:linear-gradient(178deg,#241a0b,#1a1208);
  box-shadow:inset 0 1px 0 rgba(252,231,183,.18),0 10px 26px rgba(0,0,0,.6);
}
.holler-done-cry{display:flex;align-items:center;gap:.55rem;font:700 1.15rem/1.25 var(--slab);color:var(--spec)}
.holler-tick{width:1.15rem;height:1.05rem;flex:none;color:#8fd6a0}
.holler-done-say{margin:.45rem 0 0;font-size:.92rem;color:var(--sand)}

/* ---------- the homestead ---------- */

.homestead{
  padding:clamp(2rem,5vw,3rem) var(--pad) clamp(2.2rem,5vw,3rem);
  background-image:linear-gradient(180deg,#150e07,#0a0604);
  border-top:3px solid #0a0603;
  box-shadow:inset 0 3px 0 rgba(195,147,81,.3);
}
.homestead-inner{max-width:52rem;margin:0 auto;text-align:center}
.homestead-inner::before{content:"";display:block;width:min(220px,60%);height:3px;margin:0 auto 1.5rem;border-radius:2px;background:linear-gradient(90deg,transparent,#8a6630 16%,#e0be7c 50%,#8a6630 84%,transparent)}
.homestead-mark{width:clamp(120px,20vw,170px);height:auto;margin:0 auto .95rem;display:block;opacity:.9}
.homestead-age{font-size:.92rem;color:var(--bone);margin:0 0 .9rem}
.homestead-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem;margin:0 0 1rem}
.homestead-links a{color:var(--lit);text-decoration:underline;text-underline-offset:3px;font:600 .88rem/1.4 var(--slab);letter-spacing:.03em}
.homestead-links a:hover{color:var(--spec)}
.homestead-say,.homestead-help,.homestead-fine{font-size:.84rem;line-height:1.62;color:var(--sand);margin:0 0 .7rem}
.homestead-help strong{color:var(--spec)}
.homestead-fine{margin:0;color:#a08f70}

/* ---------- motion ---------- */

@keyframes ride{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .brassbeam-item,.trailfork-track{
      animation:ride both;
      animation-timeline:view();
      animation-range:entry 5% entry 60%;
    }
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}