/* Sevier Citizens for Clean Air and Water
   Historical archive.

   Palette: winter in a central Utah valley. Cold pale ground, inversion-grey
   neutrals, deep slate for the hero. The only warm colour anywhere on the site
   is the Post-it yellow, which belongs to the note that ended the permit.

   Type: Newsreader for reading, Archivo for navigation and labels,
   IBM Plex Mono for dates, docket numbers and case citations, which in this
   story are agency records and deserve to look like it. */

:root{
  --paper:#eceeed;
  --paper-2:#e3e6e5;
  --ink:#14191b;
  --ink-2:#39423f;
  --muted:#6b7573;
  --rule:#ccd1cf;
  --rule-2:#b6bdba;
  --slate:#222f33;
  --slate-deep:#161f22;
  --note:#efdb84;
  --note-edge:#d7c169;
  --note-ink:#7d6a1c;
  --serif:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --measure:34rem;
  --wide:64rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:1.125rem;line-height:1.66;
}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--note-ink);outline-offset:3px}

/* ---------- header ---------- */
.masthead{border-bottom:1px solid var(--rule-2);background:var(--paper);position:sticky;top:0;z-index:50}
.masthead-inner{max-width:var(--wide);margin:0 auto;padding:.8rem 1.5rem;display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap}
.wordmark{
  font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;line-height:1.35;flex:0 0 auto;
}
.wordmark span{display:block;font-weight:400;color:var(--muted);letter-spacing:.09em}
nav.main{margin-left:auto}
nav.main ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.05rem;margin:0;padding:0}
nav.main a{
  font-family:var(--sans);font-size:.775rem;letter-spacing:.015em;color:var(--ink-2);
  text-decoration:none;padding-bottom:3px;border-bottom:1.5px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--rule-2)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--note-edge);font-weight:600}

/* ---------- layout ---------- */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.prose{max-width:var(--measure);margin:0 auto}
.prose>*+*{margin-top:1.15em}
section.band{padding:4rem 0;border-top:1px solid var(--rule)}

/* ---------- type ---------- */
h1,h2,h3{font-weight:500;line-height:1.14;letter-spacing:-.014em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,3.85rem)}
h2{font-size:clamp(1.45rem,3vw,1.9rem);margin-top:2.7em;margin-bottom:.25em}
h3{font-size:1.16rem;margin-top:2em;margin-bottom:.1em}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
p{margin:0}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.19em;text-decoration-color:var(--rule-2)}
a:hover{text-decoration-color:var(--note-ink)}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}
ul,ol{padding-left:1.2em;margin:0}
li+li{margin-top:.35em}
blockquote{
  margin:2rem 0;padding-left:1.25rem;border-left:2px solid var(--rule-2);
  font-size:1.14em;line-height:1.52;color:var(--ink-2);font-style:italic;
}
blockquote p+p{margin-top:.8em}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--slate-deep);color:#e4e8e7;padding:7.5rem 0 4.5rem;
  background-image:url("/img/valley-farmland.jpg");background-size:cover;
  background-position:50% 62%;isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,17,19,.86) 0%,rgba(12,17,19,.62) 42%,rgba(12,17,19,.80) 100%);
}
.hero .credit{
  margin-top:3.25rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:#93a5a8;
}
.hero .eyebrow{color:#93a5a8}
.hero h1{margin:1.1rem 0 0;color:#f4f6f5;max-width:17ch}
.hero .subhead{margin-top:1.6rem;max-width:44ch;font-size:1.14rem;line-height:1.62;color:#c2cbca}
.hero .herolinks{margin-top:2.4rem;display:flex;gap:1.75rem;flex-wrap:wrap}
.hero .herolinks a{
  font-family:var(--sans);font-size:.84rem;letter-spacing:.02em;color:#f4f6f5;
  text-decoration:none;border-bottom:1.5px solid #5d7276;padding-bottom:3px;
}
.hero .herolinks a:hover{border-bottom-color:var(--note-edge)}

.pagehead{padding:4.5rem 0 2.5rem;border-bottom:1px solid var(--rule-2)}
.pagehead h1{max-width:20ch}
.pagehead .standfirst{margin-top:1.4rem;max-width:46ch;font-size:1.14rem;color:var(--ink-2)}

/* ---------- full-bleed figure ---------- */
.figband{position:relative;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.figband img{width:100%;height:clamp(15rem,42vh,26rem);object-fit:cover;object-position:50% 55%}
.figband figcaption{
  max-width:var(--wide);margin:0 auto;padding:.85rem 1.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;color:var(--muted);
}

/* ---------- pull quote ---------- */
.pullquote{max-width:44rem;margin:0 auto;padding:3.5rem 0}
.pullquote q{
  quotes:none;display:block;font-size:clamp(1.5rem,3.6vw,2.15rem);line-height:1.3;
  letter-spacing:-.012em;color:var(--ink);text-indent:-.42em;
}
.pullquote q::before{content:"\201C"}
.pullquote q::after{content:"\201D"}
.pullquote cite{
  display:block;margin-top:1.4rem;font-family:var(--mono);font-style:normal;
  font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}

/* ---------- the note ---------- */
.postit-wrap{display:flex;justify-content:center;padding:1.75rem 0 2.5rem}
.postit{
  background:var(--note);border:1px solid var(--note-edge);
  width:15rem;height:15rem;display:flex;align-items:center;justify-content:center;
  padding:1.6rem;transform:rotate(-2.4deg);
  box-shadow:0 14px 30px rgba(20,25,27,.16);
  font-family:var(--mono);font-size:1.02rem;line-height:1.5;
  color:#3f3512;text-align:center;letter-spacing:-.01em;
}
.ruling{
  border:1px solid var(--rule-2);border-left:3px solid var(--note-edge);
  background:var(--paper-2);padding:1.6rem;margin:2rem 0;
}
.ruling .cite{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.75rem;
}
.ruling p{font-size:1.18em;line-height:1.5;font-style:italic}

/* ---------- timeline ---------- */
.timeline{max-width:46rem;margin:0 auto}
.tl-year{
  position:sticky;top:3.5rem;background:var(--paper);z-index:10;
  font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.14em;
  color:var(--ink);padding:1.5rem 0 .5rem;border-bottom:1px solid var(--rule-2);margin-top:2.5rem;
}
.tl-item{display:grid;grid-template-columns:9.5rem 1fr;gap:1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--rule)}
.tl-date{font-family:var(--mono);font-size:.76rem;letter-spacing:.01em;color:var(--muted);padding-top:.4em}
.tl-body{margin:0}
.tl-item.key{background:linear-gradient(90deg,rgba(239,219,132,.32),rgba(239,219,132,0) 70%);
  margin-left:-1rem;padding-left:1rem;border-bottom-color:var(--rule-2)}
.tl-item.key .tl-body{font-size:1.14em;line-height:1.5}
.tl-item.key .tl-date{color:var(--note-ink);font-weight:600}

/* ---------- cards ---------- */
.cards{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);margin:2rem 0}
.card{background:var(--paper);padding:1.5rem}
.card h3{margin:0 0 .35rem;font-size:1.05rem}
.card .meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted);margin-bottom:.6rem}
.card p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.status{
  display:inline-block;margin-top:.9rem;font-family:var(--sans);font-size:.66rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .55rem;
  border:1px solid var(--rule-2);color:var(--muted);
}
.status.have{border-color:var(--note-edge);background:rgba(239,219,132,.35);color:var(--note-ink)}

/* ---------- next ---------- */
.next{border-top:1px solid var(--rule-2);padding:3.5rem 0;background:var(--paper-2)}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem}
.next-grid h3{margin:0 0 .4rem;font-size:1rem}
.next-grid h3 a{text-decoration:none;border-bottom:1px solid var(--rule-2)}
.next-grid h3 a:hover{border-bottom-color:var(--note-ink)}
.next-grid p{font-size:.93rem;line-height:1.55;color:var(--ink-2)}

/* ---------- archive ---------- */
.archive-banner{
  border:1px solid var(--rule-2);border-top:3px solid var(--slate);
  background:var(--paper-2);padding:1.15rem 1.35rem;margin:0 0 2.5rem;
  font-family:var(--sans);font-size:.84rem;line-height:1.55;color:var(--ink-2);
}
.archive-banner strong{color:var(--ink)}
.arch-list{list-style:none;padding:0;margin:2rem 0 0}
.arch-list li{border-top:1px solid var(--rule);padding:1.05rem 0}
.arch-list li:last-child{border-bottom:1px solid var(--rule)}
.arch-list .d{font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted)}
.arch-list a{display:block;margin-top:.25rem;font-size:1.08rem;text-decoration:none;border-bottom:1px solid transparent}
.arch-list a:hover{border-bottom-color:var(--note-ink)}
.legacy-body h2{font-size:1.28rem}
.legacy-body img{margin:1.6rem 0;border:1px solid var(--rule-2)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--rule-2);padding:3rem 0 4rem;background:var(--paper);font-size:.9rem}
footer.site .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:2rem}
footer.site p{color:var(--muted);max-width:38ch;line-height:1.6}
footer.site .fname{font-family:var(--sans);font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
footer.site ul{list-style:none;padding:0;font-family:var(--sans);font-size:.83rem}
footer.site ul a{text-decoration:none;color:var(--ink-2)}
footer.site ul a:hover{color:var(--note-ink)}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100}
.note{font-size:.88rem;color:var(--muted);font-style:italic}
.figures{list-style:none;padding:0;margin:1.4rem 0;border-top:1px solid var(--rule-2)}
.figures li{
  display:flex;justify-content:space-between;gap:1.5rem;padding:.62rem 0;
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:.85rem;
  font-variant-numeric:tabular-nums;
}
.figures li span:last-child{color:var(--muted);text-align:right}
.bignum{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;max-width:34rem;margin:2.75rem auto;text-align:center}
.bignum .n{font-family:var(--mono);font-size:clamp(2.1rem,5.5vw,3.2rem);line-height:1;font-weight:500}
.bignum .l{font-family:var(--sans);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.bignum .vs{font-family:var(--sans);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media (max-width:640px){
  body{font-size:1.06rem}
  .masthead-inner{padding:.7rem 1.1rem}
  nav.main{margin-left:0;width:100%;margin-top:.55rem}
  nav.main ul{gap:.8rem}
  .wrap{padding:0 1.1rem}
  .hero{padding:3.5rem 0 3rem}
  section.band{padding:2.75rem 0}
  .tl-item{grid-template-columns:1fr;gap:.25rem}
  .tl-date{padding-top:0}
  .tl-year{top:0}
  .bignum{grid-template-columns:1fr;gap:.4rem}
  .postit{width:13rem;height:13rem;font-size:.94rem}
}

@media print{.masthead,.next,nav.main{display:none}body{background:#fff;font-size:11pt}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}