/* ==========================================================================
   Northern Utah CWMA - Field Notes
   Design tokens, layout and components. Single stylesheet, no framework.
   ========================================================================== */

:root{
  /* palette */
  --paper:#F6F3EC;
  --paper2:#EDE8DC;
  --paper3:#E3DCCB;
  --ink:#182019;
  --ink2:#4B534C;
  --ink3:#6E766F;
  --ever:#1E3B2A;
  --ever2:#14261B;
  --ever3:#24452F;
  --leaf:#5E9B3C;
  --leaf2:#9DC08A;
  --sky:#2E9CD4;
  --tan:#A8794E;
  --rule:#D8D1C0;
  --rule2:#C6BDA6;
  --hazard:#B4451F;
  --hazard2:#8E3315;

  /* class colors */
  --c-1a:#542300;
  --c-1b:#6B2F01;
  --c-2:#833B02;
  --c-3:#9B4805;
  --c-4:#B55508;

  /* type */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* metrics */
  --wrap:1180px;
  --gut:22px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{display:block; max-width:100%; height:auto}
a{color:var(--ever); text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--sky); outline-offset:2px; border-radius:2px;
}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap-narrow{max-width:760px; margin-inline:auto; padding-inline:var(--gut)}
.serif{font-family:var(--serif)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ever); color:#fff;
  padding:10px 16px; z-index:200}
.skip:focus{left:8px; top:8px}
.vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.eyebrow{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--tan); margin:0}
.eyebrow-light{color:var(--leaf2)}

h1,h2,h3,h4{text-wrap:balance}
.h-display{font-family:var(--serif); font-weight:500; letter-spacing:-.012em;
  font-size:clamp(1.95rem,4.4vw,3rem); line-height:1.08; margin:.35rem 0 .7rem}
.h-section{font-family:var(--serif); font-weight:500; letter-spacing:-.008em;
  font-size:clamp(1.6rem,3.1vw,2.3rem); line-height:1.14; margin:.4rem 0 .8rem}
.h-sub{font-family:var(--serif); font-weight:500; font-size:1.32rem; margin:.3rem 0 .5rem}
.lede{font-size:1.06rem; color:var(--ink2); max-width:62ch}

/* ---------- buttons ---------- */
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:.88rem;
  padding:11px 20px; border-radius:2px; border:1.5px solid transparent; cursor:pointer;
  font-family:inherit; transition:background .15s ease, color .15s ease}
.btn.solid{background:var(--ever); color:#F1EFE6}
.btn.solid:hover{background:var(--ever3)}
.btn.ghost{border-color:var(--rule2); color:var(--ink); background:transparent}
.btn.ghost:hover{background:var(--paper2)}
.btn.alert{background:var(--hazard); color:#fff}
.btn.alert:hover{background:var(--hazard2)}
.btn.light{background:var(--leaf); color:#0F2410}
.btnrow{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- masthead ---------- */
.mast{background:var(--ever); color:#F1EFE6; position:relative; z-index:60}
.mast a{color:inherit}
.mast .wrap{display:flex; align-items:center; gap:14px; padding-block:12px; flex-wrap:wrap}
.mast__brand{display:flex; align-items:center; gap:13px; text-decoration:none;
  flex:1 1 auto; min-width:0}
.mast__logo{flex:none; width:56px; height:56px; border-radius:50%; background:var(--paper);
  display:grid; place-items:center}
.mast__logo img{width:42px; height:42px; object-fit:contain; display:block}
.mast__name{min-width:0}
.mast__name b{display:block; font-family:var(--serif); font-size:clamp(1rem,3.6vw,1.2rem);
  font-weight:600; line-height:1.15}
.mast__name span{display:block; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--leaf2)}
.mast nav{margin-left:auto; display:flex; align-items:center; gap:4px}
.mast nav > ul{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.mast nav li{position:relative}
.mast nav a, .mast nav .navtop{display:inline-block; font-size:.87rem; font-weight:500;
  text-decoration:none; padding:9px 12px; border-radius:2px; background:none; border:0;
  color:inherit; font-family:inherit; cursor:pointer}
.mast nav > ul > li > a:hover, .mast nav .navtop:hover{background:rgba(255,255,255,.1)}
.mast nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--leaf)}
.mast .report{background:var(--hazard); color:#fff; font-weight:600; margin-left:8px}
.mast .report:hover{background:var(--hazard2)}
.submenu{position:absolute; top:100%; left:0; min-width:250px; background:var(--paper);
  border:1px solid var(--rule); box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
  list-style:none; margin:6px 0 0; padding:6px; display:none; z-index:70}
.mast nav .submenu a{display:block; color:var(--ink); padding:10px 12px;
  font-size:.87rem; border-radius:2px; background:none}
.mast nav .submenu a:hover,
.mast nav .submenu a:focus-visible{background:var(--paper2); color:var(--ever)}
.mast nav .submenu a[aria-current="page"]{background:var(--paper2); box-shadow:none;
  font-weight:600; color:var(--ever)}
li.open > .submenu{display:block}
.navtoggle{display:none; margin-left:auto; flex:none; background:none; border:1.5px solid rgba(255,255,255,.35);
  color:inherit; font:inherit; font-size:.82rem; font-weight:600; padding:8px 13px;
  border-radius:2px; cursor:pointer}

@media (max-width:980px){
  .navtoggle{display:inline-block}
  .mast nav{display:none; margin-left:0; width:100%; order:3; padding-bottom:10px}
  .mast nav.open{display:block}
  .mast nav > ul{flex-direction:column; align-items:stretch; gap:0}
  .mast nav > ul > li{border-top:1px solid rgba(255,255,255,.14)}
  .mast nav a, .mast nav .navtop{display:block; width:100%; text-align:left; padding:12px 6px}
  .submenu{position:static; display:block; background:transparent; border:0; box-shadow:none;
    margin:0 0 6px; padding:0 0 0 14px}
  .mast nav .submenu a{color:#CFE0C7; padding:10px 6px; font-size:.85rem; background:none}
  .mast nav .submenu a:hover,
  .mast nav .submenu a:focus-visible{background:rgba(255,255,255,.1); color:#fff}
  .mast nav .submenu a[aria-current="page"]{background:rgba(255,255,255,.1); color:#fff}
  .mast .report{margin:10px 0 0; text-align:center}
}

/* ---------- page header (interior) ---------- */
.phead{position:relative; background:var(--ever); color:#EFEDE3}
.phead img{width:100%; height:clamp(210px,26vw,330px); object-fit:cover;
  object-position:50% 45%; opacity:.58}
.phead__txt{position:absolute; inset:auto 0 0 0; padding-block:clamp(20px,4vw,38px);
  background:linear-gradient(to top,rgba(20,38,27,.92),rgba(20,38,27,0))}
.phead h1{font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4.2vw,2.9rem);
  line-height:1.08; margin:.3rem 0 0}
.phead p{margin:.5rem 0 0; color:#C3D2BD; max-width:60ch}
.phead .eyebrow{color:var(--leaf2)}

/* ---------- home hero ---------- */
.hero figure{margin:0; position:relative}
.hero img{width:100%; height:clamp(320px,52vw,560px); object-fit:cover; object-position:50% 60%}
.hero figcaption{position:absolute; right:14px; bottom:10px; font-size:.68rem; color:#fff;
  background:rgba(24,32,25,.62); padding:4px 9px; letter-spacing:.04em}
.hero__card{background:var(--paper); border-left:5px solid var(--leaf);
  padding:clamp(22px,3vw,32px) clamp(22px,3.4vw,36px); max-width:680px;
  margin:-90px auto 0; position:relative;
  box-shadow:0 26px 50px -34px rgba(24,32,25,.65)}
.hero__card p:not(.eyebrow){margin:0 0 20px; color:var(--ink2); max-width:56ch}
@media (max-width:900px){.hero__card{margin-top:-58px}}

/* ---------- ledger ---------- */
.ledger{border-block:1px solid var(--rule); background:var(--paper2); margin-top:56px}
.ledger .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding-block:22px; gap:18px}
.ledger div + div{border-left:1px solid var(--rule); padding-left:18px}
.ledger b{display:block; font-family:var(--serif); font-size:clamp(1.7rem,3.2vw,2.1rem);
  font-weight:500; font-variant-numeric:tabular-nums; line-height:1}
.ledger span{font-size:.73rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink2)}
@media (max-width:620px){
  .ledger .wrap{grid-template-columns:repeat(2,1fr); gap:20px 18px}
  .ledger div:nth-child(3){border-left:0; padding-left:0}
}

/* ---------- generic section ---------- */
.sec{padding-block:clamp(44px,6vw,66px)}
.sec--tint{background:var(--paper2); border-block:1px solid var(--rule)}
.sec--dark{background:var(--ever); color:#EFEDE3}
.sec--dark a{color:#EFEDE3}
.sec--dark .lede{color:#B9C6B3}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,52px); align-items:start}
.split--side{grid-template-columns:1fr 340px}
@media (max-width:900px){.split,.split--side{grid-template-columns:1fr}}

.pull{font-family:var(--serif); font-style:italic; font-size:1.22rem; line-height:1.5;
  color:var(--ever); border-top:2px solid var(--ever); padding-top:14px; margin-top:22px}
.sec--dark .pull{color:#EFEDE3; border-top-color:var(--leaf)}

.prose p{max-width:68ch}
.prose h3{font-family:var(--serif); font-weight:500; font-size:1.45rem; margin:1.8rem 0 .4rem}

/* ---------- definition rows ---------- */
.rows article{border-top:1px solid var(--rule); padding:16px 0;
  display:grid; grid-template-columns:170px 1fr; gap:18px}
.rows article:last-child{border-bottom:1px solid var(--rule)}
.rows h4{margin:0; font-size:.94rem; font-weight:700}
.rows p{margin:0; font-size:.89rem; color:var(--ink2); line-height:1.55}
@media (max-width:620px){.rows article{grid-template-columns:1fr; gap:4px}}

/* ---------- chips / filters ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; padding:0; list-style:none}
.chip{font:inherit; font-size:.76rem; font-weight:600; letter-spacing:.05em; padding:7px 14px;
  border:1px solid var(--rule2); border-radius:999px; color:var(--ink2); background:transparent;
  cursor:pointer; text-decoration:none; display:inline-block}
.chip:hover{border-color:var(--ever); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ever); border-color:var(--ever); color:#F1EFE6}
.sec--dark .chip{border-color:#3E6049; color:#CFDCC8}
.sec--dark .chip[aria-pressed="true"]{background:var(--leaf); border-color:var(--leaf); color:#10200F}

.searchbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.searchbar input{flex:1 1 260px; font:inherit; font-size:.92rem; padding:11px 14px;
  border:1px solid var(--rule2); background:#fff; color:var(--ink); border-radius:2px}
.searchbar .count{font-size:.82rem; color:var(--ink2); font-variant-numeric:tabular-nums}

/* ---------- specimen cards ---------- */
.specgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:18px;
  list-style:none; margin:0; padding:0}
.spec{display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--rule); overflow:hidden; height:100%;
  transition:transform .15s ease, box-shadow .15s ease}
.spec:hover{transform:translateY(-2px); box-shadow:0 14px 26px -18px rgba(24,32,25,.5)}
.spec img{aspect-ratio:4/3; object-fit:cover; width:100%; background:var(--paper2)}
.spec .meta{padding:16px 17px 18px; display:block}
.spec b{display:block; font-family:var(--serif); font-size:1.06rem; font-weight:500; line-height:1.25}
.spec i{display:block; font-size:.79rem; color:var(--ink3); font-style:italic;
  margin-top:5px; line-height:1.35}
.sec--dark .spec{background:var(--ever3); border-color:#33553D}
.sec--dark .spec i{color:#A7BCA1}

.badge{display:inline-block; margin-top:13px; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; padding:4px 9px; text-transform:uppercase; color:#fff; background:var(--c-3)}
.badge--1a{background:var(--c-1a)}
.badge--1b{background:var(--c-1b)}
.badge--class-2{background:var(--c-2)}
.badge--class-3{background:var(--c-3)}
.badge--class-4{background:var(--c-4)}
.badge--bio{background:var(--ever3)}

/* ---------- weed detail ---------- */
.weedhead{background:var(--ever); color:#EFEDE3; padding-block:clamp(26px,4vw,42px)}
.weedhead .wrap{display:flex; gap:20px; align-items:flex-end; flex-wrap:wrap}
.weedhead h1{font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4.2vw,2.8rem);
  line-height:1.05; margin:.3rem 0 .2rem}
.weedhead .sci{font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--leaf2); margin:0}
.weedhead .badge{margin-top:0}
.crumbs{font-size:.78rem; color:#A7BCA1; margin:0 0 4px}
.crumbs a{color:#CFE0C7; text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin:0 0 30px}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--rule); background:var(--paper2)}
.gallery a{display:block}
.gallery a:first-child{grid-column:span 2}
@media (max-width:620px){.gallery a:first-child{grid-column:span 1}}

.factbox{background:var(--paper2); border:1px solid var(--rule); padding:20px 22px}
.factbox dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.88rem}
.factbox dt{font-weight:700; color:var(--ink2)}
.factbox dd{margin:0}

.wsec{border-top:1px solid var(--rule); padding-top:18px; margin-top:26px}
.wsec h2{font-size:.74rem; letter-spacing:.17em; text-transform:uppercase; color:var(--tan);
  font-weight:600; margin:0 0 .5rem}
.wsec p{margin:0; max-width:68ch}

.agentlist{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;
  list-style:none; margin:0; padding:0}

.prevnext{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--rule); margin-top:36px; padding-top:18px; font-size:.88rem}
.prevnext a{text-decoration:none; font-weight:600}
.prevnext span{display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink3); font-weight:600}

/* ---------- events ---------- */
.entry{display:grid; grid-template-columns:82px 1fr; gap:20px; padding:18px 0;
  border-top:1px solid var(--rule)}
.entry:last-of-type{border-bottom:1px solid var(--rule)}
.date{font-family:var(--serif); text-align:center; line-height:1; padding-top:4px}
.date b{display:block; font-size:1.95rem; font-weight:500; font-variant-numeric:tabular-nums}
.date span{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tan)}
.date em{display:block; font-style:normal; font-family:var(--sans); font-size:.68rem; color:var(--ink3)}
.entry h3,.entry h4{margin:0 0 3px; font-size:1.04rem; font-family:var(--serif); font-weight:500}
.entry p{margin:0 0 4px; font-size:.87rem; color:var(--ink2)}
.entry .where{font-size:.8rem; color:var(--ink3)}
.entry .where::before{content:"◆ "; color:var(--leaf)}
.entry--past{opacity:.72}

.sidecard{background:var(--paper2); border:1px solid var(--rule); padding:22px}
.sidecard p{font-size:.89rem; color:var(--ink2); margin:0 0 16px}
.sidecard img{margin-top:16px; border:1px solid var(--rule)}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; list-style:none; margin:0; padding:0}
.steps li{border-top:3px solid var(--leaf); padding-top:14px}
.steps b{display:block; font-family:var(--serif); font-size:1.12rem; font-weight:500; margin-bottom:4px}
.steps b::before{content:counter(list-item) ". "; color:var(--tan); font-family:var(--sans);
  font-size:.82rem; font-weight:700; letter-spacing:.06em}
.steps p{margin:0; font-size:.88rem; color:var(--ink2)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}

/* ---------- projects ---------- */
.project{border-top:1px solid var(--rule); padding-block:26px}
.project h3{font-family:var(--serif); font-weight:500; font-size:1.4rem; margin:0 0 .35rem}
.project p{margin:0 0 12px; color:var(--ink2); max-width:68ch}
.embed{position:relative; border:1px solid var(--rule); background:var(--paper2); margin-top:14px}
.embed iframe{display:block; width:100%; height:min(70vh,560px); border:0}

/* ---------- county map + list ---------- */
.countywrap{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:32px; align-items:start}
@media (max-width:900px){.countywrap{grid-template-columns:1fr}}
.utahmap{background:#fff; border:1px solid var(--rule); padding:14px;
  max-width:480px; margin-inline:auto}
.utahmap svg{width:100%; height:auto; display:block}
.utahmap path{fill:var(--paper2); stroke:var(--rule2); stroke-width:1.1; cursor:pointer;
  transition:fill .12s ease}
.utahmap path:hover{fill:var(--leaf2)}
.utahmap path.cwma{fill:#CADEBE}
.utahmap path[aria-pressed="true"],.utahmap path.sel{fill:var(--leaf); stroke:var(--ever)}
.utahmap text{font-family:var(--sans); font-size:9px; fill:var(--ink2); pointer-events:none}

.countycard{background:var(--paper2); border:1px solid var(--rule); padding:22px; position:sticky; top:18px}
.countycard h3{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:.2rem 0 .1rem}
.countycard .role{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tan); margin:0 0 12px}
.countycard address{font-style:normal; font-size:.9rem; color:var(--ink2); line-height:1.65}
.countycard a{font-weight:600}

.clist{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.clist li{display:grid; grid-template-columns:120px 1fr auto; gap:12px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--rule); font-size:.88rem}
.clist b{font-weight:700}
.clist span{color:var(--ink2)}
.clist .cwmaflag{font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:var(--leaf); }
@media (max-width:620px){.clist li{grid-template-columns:1fr; gap:2px}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; padding:15px 34px 15px 0; font-weight:600; font-size:.98rem;
  list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:13px; font-size:1.3rem;
  color:var(--tan); font-weight:400; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 18px; color:var(--ink2); max-width:68ch; font-size:.93rem}

/* ---------- forms ---------- */
.form{display:grid; gap:16px; max-width:640px}
.field{display:grid; gap:5px}
.field label{font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--ink2)}
.field input,.field select,.field textarea{font:inherit; font-size:.95rem; padding:11px 13px;
  border:1px solid var(--rule2); background:#fff; color:var(--ink); border-radius:2px; width:100%}
.field textarea{min-height:130px; resize:vertical}
.field .hint{font-size:.78rem; color:var(--ink3)}
.field--two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:620px){.field--two{grid-template-columns:1fr}}
.formnote{font-size:.82rem; color:var(--ink3); max-width:60ch}
.formstatus{padding:12px 14px; border-left:4px solid var(--leaf); background:var(--paper2); font-size:.9rem}
.formstatus[data-state="error"]{border-left-color:var(--hazard)}

/* ---------- checklist ---------- */
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:14px; counter-reset:ck}
.checklist li{display:grid; grid-template-columns:30px 1fr; gap:14px; align-items:start}
.checklist li::before{counter-increment:ck; content:counter(ck);
  width:28px; height:28px; border-radius:50%; background:var(--leaf); color:#0F2410;
  display:grid; place-items:center; font-weight:700; font-size:.82rem}
.checklist p{margin:0; font-size:.93rem}

/* ---------- partner logos ---------- */
.logos{display:flex; flex-wrap:wrap; gap:26px 34px; align-items:center; justify-content:center;
  padding-block:8px}
.logos img{height:58px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72;
  transition:filter .15s ease, opacity .15s ease}
.logos img:hover{filter:none; opacity:1}

/* ---------- footer ---------- */
.foot{background:var(--ever2); color:#B9C6B3; padding-block:42px; font-size:.87rem}
.foot a{color:#DDE7D8}
.foot .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:30px}
.foot b{color:#EFEDE3; display:block; margin-bottom:7px; font-family:var(--serif);
  font-weight:500; font-size:1.06rem}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:3px}
.foot .base{border-top:1px solid #27412F; margin-top:30px; padding-top:16px;
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; font-size:.78rem; color:#8FA389}

/* ---------- utilities ---------- */
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.stack > * + *{margin-top:1rem}
[hidden]{display:none!important}
.tabnum{font-variant-numeric:tabular-nums}

/* ---------- scroll to top ---------- */
.totop{position:fixed; right:18px; bottom:18px; z-index:80;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--rule2);
  background:var(--paper); color:var(--ever); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 10px 24px -12px rgba(24,32,25,.55);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s}
.totop.show{opacity:1; visibility:visible; transform:none}
.totop:hover{background:var(--ever); color:var(--paper); border-color:var(--ever)}
.totop svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
@media (max-width:620px){.totop{right:12px; bottom:12px; width:42px; height:42px}}

/* ---------- calendar accordion ---------- */
.entry details{margin-top:10px}
.entry summary{cursor:pointer; list-style:none; font-size:.82rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tan); display:inline-flex;
  align-items:center; gap:7px; padding:3px 0}
.entry summary::-webkit-details-marker{display:none}
.entry summary::after{content:"+"; font-size:1.05rem; line-height:1; font-weight:400}
.entry details[open] summary::after{content:"\2013"}
.entry summary:hover{color:var(--ever)}
.evtbody{padding:12px 0 4px; border-top:1px solid var(--rule); margin-top:8px}
.evtbody dl{margin:0 0 12px; display:grid; grid-template-columns:auto 1fr; gap:6px 14px;
  font-size:.87rem}
.evtbody dt{font-weight:700; color:var(--ink2)}
.evtbody dd{margin:0}
.evtbody p{margin:0 0 9px; font-size:.88rem; color:var(--ink2); max-width:68ch}
.evtbody p:last-child{margin-bottom:0}
@media (max-width:520px){.evtbody dl{grid-template-columns:1fr; gap:2px 0}
  .evtbody dd{margin-bottom:7px}}

/* ---------- logo seal ---------- */
.seal{border-radius:50%; background:var(--paper); display:grid; place-items:center;
  flex:none; box-shadow:0 14px 30px -18px rgba(24,32,25,.6)}
.seal img{object-fit:contain; display:block}

/* home: rides the top edge of the hero card, over the photograph */
.hero__card .seal{width:104px; height:104px; margin:-74px 0 16px}
.hero__card .seal img{width:82px; height:82px}

/* dark sections: the mark needs a light disc to sit on */
.sec--dark .seal, .foot .seal{box-shadow:none; border:1px solid rgba(255,255,255,.12)}
.sealrow{display:flex; align-items:center; gap:18px; margin-bottom:20px}
.sealrow .seal{width:88px; height:88px}
.sealrow .seal img{width:68px; height:68px}
.sealrow p{margin:0; font-size:.88rem; color:#B9C6B3; max-width:32ch}

.foot .seal{width:66px; height:66px; margin-bottom:14px}
.foot .seal img{width:52px; height:52px}

@media (max-width:620px){
  .hero__card .seal{width:86px; height:86px; margin:-58px 0 12px}
  .hero__card .seal img{width:66px; height:66px}
  .sealrow{gap:14px}
}