/* ---------------------------------------------------------------
   Osprey Fly Fishers of B.C. — single-file static site
   Palette lifted from the original WordPress theme
   --------------------------------------------------------------- */
:root{
  --navy:#13416b;          /* page + main content panel */
  --navy-light:#224c72;    /* sidebar panel */
  --gold:#ffc638;          /* headings & links on navy */
  --gold-pale:#ffeab0;     /* the lighter half of a stacked bar */
  --gold-btn:#f7c225;      /* button fill */
  --btn-ink:#405e7a;       /* button label */
  --rule:rgba(255,255,255,.35);
  --wrap:1180px;
  --sans:"Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Merriweather",Georgia,"Times New Roman",serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  color:#fff;
  background-color:var(--navy);
  background-image:url("../images/background.d6085e93ebdd.jpg");
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  background-attachment:scroll;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover,a:focus{text-decoration:underline}

.wrap{width:90%;max-width:var(--wrap);margin:0 auto}

.skip-link{position:absolute;left:-9999px;top:0;background:#fff;color:#000;padding:10px 16px;z-index:100}
.skip-link:focus{left:0}

/* ---------- header / logo ---------- */
.site-header{padding:18px 0 0;text-align:center}
.site-header .logo{display:inline-block}
.site-header .logo img{width:197px;height:auto;margin:0 auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.site-title{position:absolute;left:-9999px}

/* ---------- navigation ---------- */
.main-nav{margin-top:14px}
.nav-toggle{
  display:none;width:100%;border:0;background:#fff;color:#000;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:14px 16px;cursor:pointer;
  border-bottom:5px solid var(--gold-btn);
}
.nav-menu{
  list-style:none;margin:0;padding:0;
  background:#fff;border-bottom:5px solid var(--gold-btn);
  display:flex;flex-wrap:wrap;
}
.nav-menu > li{position:relative}
.nav-menu a{
  display:block;color:#000;font-size:15px;font-weight:400;
  letter-spacing:.5px;text-transform:uppercase;padding:15px 16px;
}
.nav-menu > li.current > a{font-weight:700}
.nav-menu a:hover,.nav-menu a:focus{color:#13416b;text-decoration:none}
.nav-menu > li:hover > a{background:#f4f4f4}
.has-sub > a::after{content:"\25BE";font-size:11px;margin-left:6px;vertical-align:1px}

.sub-menu{
  list-style:none;margin:0;padding:0;
  position:absolute;left:0;top:100%;min-width:220px;
  background:#fff;border-top:3px solid var(--gold-btn);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .15s ease,transform .15s ease;z-index:30;
}
.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:none}
.sub-menu a{padding:12px 16px;text-transform:none;letter-spacing:0;font-size:15px}
.sub-menu a:hover{background:#f4f4f4}

/* ---------- banner ---------- */
.banner img{width:100%;display:block}

/* ---------- layout ---------- */
.site-content{display:flex;align-items:stretch;background:var(--navy)}
.content-area{flex:1 1 auto;min-width:0;background:var(--navy)}
.sidebar{flex:0 0 354px;width:354px;background:var(--navy-light);padding:30px 24px 36px;text-align:center}

article.page{padding:25px 70px 45px}

/* ---------- main content typography ---------- */
.lead{
  font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.45;
  color:#fff;margin:18px 0 22px;
}
.lead .term{color:var(--gold);font-weight:700}
article.page p{font-size:16px;line-height:1.5;color:#fff;margin:0 0 18px}

blockquote{
  margin:22px 0;padding:4px 40px;
  border-left:6px solid rgba(0,0,0,.2);
  font-style:italic;font-size:16px;line-height:1.55;color:#fff;
  position:relative;
}
blockquote::before{
  content:"\201C";position:absolute;left:-2px;top:16px;
  font-family:var(--serif);font-size:62px;line-height:1;color:rgba(255,255,255,.35);
}
.quote-source{font-size:14px;font-style:italic;color:#e7eef5;margin:0 0 6px 40px}

hr.sep{border:0;border-top:1px solid var(--rule);margin:30px 0 24px}

h3.block-title{
  font-family:var(--serif);font-size:18.72px;font-weight:400;
  color:var(--gold);margin:0 0 14px;
}

/* ---------- events ---------- */
.events{list-style:none;margin:0 0 18px;padding:0}
.events li{display:flex;align-items:flex-start;gap:14px;padding:7px 0}
.events .date{flex:0 0 42px;text-align:center;line-height:1.05}
.events .mon{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--gold)}
.events .day{display:block;font-size:21px;font-weight:700;color:#fff}
.events .meta{flex:1 1 auto}
.events .dow{font-size:11px;letter-spacing:.4px;color:#cfdced;text-transform:uppercase}
.events .what{font-size:16px;color:#fff}

/* ---------- simple lists ---------- */
ul.linklist{margin:0 0 18px;padding-left:20px}
ul.linklist li{margin:0 0 6px;color:#fff}

.more-link{display:inline-block;font-size:14px;margin-bottom:4px;text-decoration:underline}

/* ---------- sidebar ---------- */
.sidebar h3{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.35;
  color:var(--gold);margin:0 0 18px}
.sidebar h4{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--gold);
  margin:34px 0 14px;text-align:left}
.sidebar p{margin:0 0 6px;font-size:15px;line-height:1.5;color:#fff}
.sidebar .book-title{font-size:16px}
.sidebar .book-sub{font-style:italic;font-size:15px}
.sidebar .spec{margin-top:16px}
.sidebar .book-cover{margin:18px auto 10px;width:225px;max-width:100%;
  box-shadow:0 6px 16px rgba(0,0,0,.4)}
.sidebar .format{margin-bottom:14px}

.btn{
  display:block;width:100%;background:var(--gold-btn);color:var(--btn-ink);
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.3px;
  text-align:center;padding:9px 14px;border-radius:5px;border:0;cursor:pointer;
  margin:0 auto;
}
.btn:hover,.btn:focus{background:#ffd45c;color:#20364a;text-decoration:none}
.btn.inline{display:inline-block;width:auto;min-width:160px}

.video-thumb{position:relative;display:block;margin:0 0 14px;
  box-shadow:0 6px 16px rgba(0,0,0,.4)}
.video-thumb img{width:100%}
.video-thumb .play{
  position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  background:rgba(255,255,255,.88);display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease,background .15s ease;
}
.video-thumb .play::after{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--navy);margin-left:4px;
}
.video-thumb:hover .play{transform:scale(1.08);background:#fff}

.welcome{margin-top:34px;text-align:left}
.welcome h4{margin-top:0}
.welcome .tagline{font-family:var(--sans);font-size:28px;font-weight:300;line-height:1.25;
  color:#fff;margin:0 0 22px}

/* ---------- footer ---------- */
.site-footer{padding:26px 0 30px;background:var(--navy)}
.footer-columns{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.footer-left{flex:1 1 320px;font-size:16.8px;line-height:1.45;color:#fff}
.footer-right{flex:1 1 320px;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.footer-right p{margin:0;text-align:right;font-size:16.8px;line-height:1.45;color:#fff}
.footer-right img{width:98px;height:98px;flex:0 0 98px;border-radius:50%}
.site-info{
  margin-top:22px;border-top:1px solid #fff;padding:20px 0 0;
  font-size:14px;color:#fff;
}
.site-info-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.site-info a{color:var(--gold)}
.site-credit{margin:10px 0 0;font-size:13px;color:#fff;opacity:.75}
.site-credit .heart{color:#e2574c}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  article.page{padding:25px 40px 40px}
  .sidebar{flex-basis:300px;width:300px}
}
@media (max-width:900px){
  body{background-attachment:scroll}
  .site-content{display:block}
  .sidebar{width:auto;flex:none;padding:30px 40px 40px}
  .sidebar .welcome,.sidebar h4{text-align:center}
  .btn{max-width:360px}
  .nav-toggle{display:block}
  .nav-menu{display:none;flex-direction:column;border-bottom:5px solid var(--gold-btn)}
  .nav-menu.open{display:flex}
  .nav-menu a{border-top:1px solid #e6e6e6}
  .has-sub > a::after{content:none}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;min-width:0}
  .sub-menu a{padding-left:34px;background:#fafafa}
  .footer-right{justify-content:flex-start}
  .footer-right p{text-align:left}
}
/* The contact table stacks on its CONTAINER's width, not the viewport's.
   The content column is cramped in two disjoint ranges — roughly 900-1050px,
   where the sidebar squeezes it to ~515px, and below 720px, where the layout
   is single-column but narrow. A viewport media query cannot express that,
   and getting it wrong clipped the phone column with no way to scroll to it. */
article.page{container-type:inline-size;container-name:page}

@container page (max-width: 560px){
  .prose table,
  .prose tbody,
  .prose tr,
  .prose th,
  .prose td{display:block;width:auto}

  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

  .prose tbody tr{padding:12px 0;border-bottom:1px solid var(--rule)}
  .prose tbody tr:last-child{border-bottom:0}

  .prose tbody th[scope="row"]{
    font-family:var(--serif);font-size:17px;color:var(--gold);
    padding:0 0 6px;border-bottom:0;
  }

  .prose tbody td{
    display:grid;grid-template-columns:5.5rem 1fr;gap:10px;
    padding:2px 0;border-bottom:0;font-size:15px;
  }
  .prose tbody td[data-label]::before{
    content:attr(data-label);
    font-size:11px;letter-spacing:.4px;text-transform:uppercase;
    color:#9fb4c9;padding-top:3px;
  }
  .prose tbody td:empty{display:none}
  /* Long addresses must wrap rather than widen the page. */
  .prose tbody td a{overflow-wrap:anywhere}
  /* Stacked, there is room for the number on its own line. */
  .prose td[data-label="Phone"]{white-space:normal}
}

@media (max-width:600px){
  article.page{padding:22px 22px 32px}
  .sidebar{padding:26px 22px 34px}
  .lead{font-size:21px}
  blockquote{padding:4px 18px}
  blockquote::before{display:none}
  .quote-source{margin-left:18px}
  .site-info-line{flex-direction:column}
}

/* =================================================================
   Phase 2 — components for the dynamic pages.
   Everything above this line is the approved static design, lifted
   verbatim; everything below extends it for views WordPress rendered
   via plugins (fly catalogue, search, galleries, paginated lists).
   ================================================================= */

/* ---------- shared page furniture ---------- */
.page-title{font-family:var(--serif);font-size:26px;font-weight:400;color:#fff;margin:18px 0 6px}
.page-sub{font-size:15px;color:#cfdced;margin:0 0 22px}
.breadcrumb{font-size:13px;color:#cfdced;margin:16px 0 0}
.breadcrumb a{color:var(--gold)}
.breadcrumb span{opacity:.6;padding:0 6px}

.prose{font-size:16px;line-height:1.6}
.prose h2,.prose h3,.prose h4{font-family:var(--serif);color:var(--gold);font-weight:400;
  margin:26px 0 12px;line-height:1.3}
.prose h2{font-size:22px}
.prose h3{font-size:18.72px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose a{text-decoration:underline}
.prose img{margin:14px 0;border-radius:3px}
.prose blockquote{margin:18px 0;padding:4px 24px;border-left:6px solid rgba(0,0,0,.2);font-style:italic}
.prose table{width:100%;border-collapse:collapse;margin:0 0 18px}
.prose thead th{white-space:nowrap}
/* A phone number broken across three lines reads as gibberish. The column is
   identifiable because every data cell carries its label. */
.prose td[data-label="Phone"]{white-space:nowrap}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose figure{margin:14px 0}
.prose figcaption{font-size:13px;color:#cfdced}

.empty{padding:22px;border:1px dashed var(--rule);border-radius:4px;color:#cfdced;font-size:15px}

/* ---------- search ---------- */
.searchbar{display:flex;gap:8px;margin:0 0 24px;flex-wrap:wrap}
.searchbar input[type=search]{
  flex:1 1 240px;min-width:0;font-family:var(--sans);font-size:15px;
  padding:9px 12px;border:1px solid rgba(255,255,255,.25);border-radius:4px;
  background:rgba(255,255,255,.07);color:#fff;
}
.searchbar input[type=search]::placeholder{color:#9fb4c9}
.searchbar input[type=search]:focus{outline:2px solid var(--gold);outline-offset:1px;
  background:rgba(255,255,255,.12)}
.searchbar .btn{flex:0 0 auto;width:auto;padding:9px 20px}
.search-meta{font-size:14px;color:#cfdced;margin:-10px 0 20px}
mark{background:var(--gold);color:#13416b;padding:0 2px;border-radius:2px}

/* ---------- fly catalogue ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:0 0 10px}
.cat-card{display:block;padding:14px 16px;border:1px solid var(--rule);border-radius:4px;
  background:rgba(255,255,255,.04);transition:background .15s ease,border-color .15s ease}
.cat-card:hover{background:rgba(255,255,255,.09);border-color:var(--gold);text-decoration:none}
.cat-card .name{font-family:var(--serif);font-size:16px;color:var(--gold);display:block}
.cat-card .count{font-size:13px;color:#cfdced}

.fly-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;margin:0 0 24px}
/* The "recently added" strip is a fixed four, so give it one tidy row
   rather than letting auto-fill wrap three-plus-an-orphan. */
.fly-grid.is-recent{grid-template-columns:repeat(4,1fr)}
@media (max-width:620px){.fly-grid.is-recent{grid-template-columns:repeat(2,1fr)}}
.fly-card{display:flex;flex-direction:column;text-align:center}
.fly-card .thumb{display:block;aspect-ratio:1;background:rgba(255,255,255,.06);
  border-radius:3px;overflow:hidden;margin-bottom:8px}
.fly-card .thumb img{width:100%;height:100%;object-fit:cover}
.fly-card .thumb.is-empty{display:flex;align-items:center;justify-content:center;
  color:#7f9ab5;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.fly-card .name{font-size:15px;font-weight:700;color:#fff}
.fly-card a.name:hover{color:var(--gold)}
.fly-card .by{font-size:13px;font-style:italic;color:#cfdced}

/* ---------- fly detail ---------- */
.fly-head{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;margin:0 0 22px}
.fly-head .photo{flex:0 0 220px;max-width:100%;border-radius:3px;
  box-shadow:0 6px 16px rgba(0,0,0,.4)}
.fly-head .meta{flex:1 1 260px;min-width:0}
.fly-head .by{font-style:italic;color:#cfdced;margin:0 0 10px}
.fly-head .tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.fly-head .tags a{display:inline-block;font-size:12px;letter-spacing:.3px;text-transform:uppercase;
  padding:3px 9px;border:1px solid var(--rule);border-radius:999px;color:#cfdced}
.fly-head .tags a:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}

.materials{width:100%;border-collapse:collapse;margin:0 0 22px}
.materials th{width:120px;text-align:left;padding:7px 12px 7px 0;font-weight:700;
  color:var(--gold);vertical-align:top;white-space:nowrap}
.materials td{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.materials tr:last-child td{border-bottom:0}

.provenance{font-size:14px;color:#cfdced;margin:18px 0 0;padding-top:14px;
  border-top:1px solid var(--rule)}

/* ---------- events ---------- */
.event-list{list-style:none;margin:0 0 24px;padding:0}
.event-list li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.event-list li:last-child{border-bottom:0}
.event-list .date{flex:0 0 54px;text-align:center;line-height:1.05}
.event-list .mon{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--gold)}
.event-list .day{display:block;font-size:24px;font-weight:700}
.event-list .thru{display:block;font-size:11px;color:#cfdced;margin-top:2px}
.event-list .what{font-size:17px;margin:0 0 2px}
.event-list .kind{display:inline-block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
  color:#13416b;background:var(--gold);border-radius:3px;padding:1px 7px;margin-right:8px}
.event-list .who{font-size:14px;color:#cfdced}
.event-list .details{font-size:14px;color:#dbe6f0;margin:8px 0 0;white-space:pre-line}
.event-list.is-past{opacity:.72}

/* ---------- gallery ---------- */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.album-card .cover{display:block;aspect-ratio:4/3;border-radius:3px;overflow:hidden;
  background:rgba(255,255,255,.06);margin-bottom:8px}
.album-card .cover img{width:100%;height:100%;object-fit:cover}
.album-card .title{font-size:16px;color:#fff}
.album-card a.title:hover{color:var(--gold)}
.album-card .when{font-size:13px;color:#cfdced}

/* Page photo strips — a few illustrative images under a flat page's body,
   e.g. the Membership page's "what the club does". */
.strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:0 0 6px}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.strip figcaption{font-size:12.5px;color:#cfdced;margin-top:5px;line-height:1.35}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.photo-grid figure{margin:0}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.photo-grid figcaption{font-size:13px;color:#cfdced;margin-top:5px}

/* ---------- recorded sessions ---------- */
.session-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12)}
.session-list > li{border-bottom:1px solid rgba(255,255,255,.12)}

.session-list summary{list-style:none;cursor:pointer;padding:11px 0;
  transition:background .12s ease}
.session-list summary::-webkit-details-marker{display:none}
.session-list summary:hover{background:rgba(255,255,255,.05)}
.session-list summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.session-list .row{display:grid;grid-template-columns:86px 1fr auto;gap:12px;
  align-items:baseline}
.session-list .row::before{content:"\25B8";position:absolute;margin-left:-13px;
  color:var(--gold);font-size:11px;transition:transform .12s ease}
.session-list details[open] .row::before{transform:rotate(90deg)}
.session-list .when{font-size:12.5px;color:#9fb4c9;white-space:nowrap}
.session-list .what{min-width:0}
.session-list .session-title{font-family:var(--serif);font-size:16px;color:#fff;
  display:block;line-height:1.35}
.session-list details[open] .session-title{color:var(--gold)}
.session-list .who{font-size:13px;font-style:italic;color:#cfdced}
.session-list .kind{font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  color:#13416b;background:var(--gold);border-radius:2px;padding:1px 6px;white-space:nowrap}

.session-body{padding:4px 0 18px 98px}
.session-list .extras{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0;font-size:13px}
.session-list .extras a{text-decoration:underline}
.session-list .extras:empty{display:none}
.session-list .note{font-size:13px;color:#cfdced;margin:8px 0 0}
.session-list .details{font-size:14px;color:#dbe6f0;margin:10px 0 0;white-space:pre-line}

.video{position:relative;padding-top:56.25%;border-radius:4px;overflow:hidden;
  background:#000;max-width:620px}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video video{background:#000;object-fit:contain}

@media (max-width:600px){
  .session-list .row{grid-template-columns:1fr;gap:3px}
  .session-list .kind{justify-self:start}
  .session-body{padding-left:0}
}

/* ---------- newsletter: one issue, as a card ---------- */
.issue-card{margin:0 0 4px;padding:18px 20px 20px;border:1px solid var(--rule);
  border-radius:5px;background:rgba(255,255,255,.05)}
.issue-card-head{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.issue-art{flex:0 0 150px;width:150px}
.issue-art img{width:100%;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
/* A column rather than margins on each line: the volume, the Fly of the Month
   and the PDF button are each optional, and the gap keeps the spacing even
   whichever of them an issue has. */
.issue-id{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:4px}
.issue-id > *{margin:0}
.issue-card .flag{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--gold)}
.issue-month{font-family:var(--serif);font-size:24px;font-weight:400;line-height:1.2;color:#fff}
.issue-month a{color:#fff}
.issue-month a:hover{color:var(--gold)}
.issue-sub{font-size:14px;color:#cfdced}
.issue-fly{font-size:14.5px;color:#cfdced}
.issue-fly a{text-decoration:underline}
.issue-id .btn{margin-top:11px}

/* The issue's own subject headings. auto-fill rather than a fixed count: an
   issue carries anywhere from two topics to a dozen, and a wide column should
   not leave eight headings in one tall stack. */
.issue-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));
  gap:16px 26px;margin:20px 0 0;padding-top:17px;border-top:1px solid rgba(255,255,255,.12)}
.topic-group h4{font-family:var(--serif);font-size:15px;font-weight:400;margin:0 0 6px}
.topic-group h4 a{color:var(--gold)}
.topic-group ul{list-style:none;margin:0;padding:0}
.topic-group li{display:flex;gap:10px;justify-content:space-between;align-items:baseline;
  padding:3px 0;font-size:15px;line-height:1.4}
.topic-group .what{color:#fff;min-width:0}
.topic-group a.what:hover{color:var(--gold)}
.topic-group .pg{font-size:12px;color:#9fb4c9;white-space:nowrap}

/* ---------- newsletter: one issue, the way to another ---------- */
.issue-nav{margin:0 0 6px}
.issue-nav .step{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:14.5px;margin:0 0 14px}
.issue-nav .step .is-off{color:#5b7a96}

/* One row of the year grid, in effect, so the strip reads the same way the
   grid does: a cell per month, gold where there is an issue. */
.issue-nav .pick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border:1px solid var(--rule);border-radius:5px;
  background:rgba(255,255,255,.05)}
.issue-nav .pick .yr{font-size:12.5px;white-space:nowrap}
.issue-nav .pick .in{font-family:var(--serif);font-size:16px;color:#fff}
.issue-nav .mons{display:flex;flex:1 1 300px;gap:3px;list-style:none;margin:0;padding:0}
.issue-nav .mons li{flex:1 1 0;min-width:34px;text-align:center;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.3px;border:1px solid rgba(255,255,255,.12);
  border-radius:2px}
.issue-nav .mons li > *{display:block;padding:3px 2px}
.issue-nav .mons .has{background:rgba(255,198,56,.16)}
.issue-nav .mons .is-on{background:var(--gold);border-color:var(--gold)}
.issue-nav .mons .is-on span{color:#13416b;font-weight:700}
.issue-nav .mons .gap span{color:#5b7a96;font-size:11px}
.issue-nav .mons .brk{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
.issue-nav .more{font-size:13px;margin:12px 0 0}
.issue-nav .more a{text-decoration:underline}

/* ---------- newsletter archive ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  padding:4px 11px;border-radius:999px;border:1px solid var(--rule);color:#dbe6f0}
.chip:hover{border-color:var(--gold);color:var(--gold);text-decoration:none}
.chip.is-on{background:var(--gold);border-color:var(--gold);color:#13416b;font-weight:700}
.chip.is-empty{opacity:.4}
.chip .n{font-size:11px;opacity:.75}
.chip.is-on .n{opacity:.85}

.result-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap}
.result-head .clear{font-size:13px;text-decoration:underline}
.result-tools{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sorts{display:flex;align-items:baseline;gap:9px;font-size:13px}
.sorts .lbl{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:#9fb4c9}
.sorts .sort{color:#dbe6f0;border-bottom:1px solid transparent;padding-bottom:1px}
.sorts .sort:hover{color:var(--gold);text-decoration:none}
.sorts .sort.is-on{color:var(--gold);border-bottom-color:var(--gold);font-weight:700}

.result-list{list-style:none;margin:0 0 10px;padding:0}
.result-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.result-list li:last-child{border-bottom:0}
/* No badge column when every result carries the same topic: the summary
   line above says it once instead (see newsletter/views.py, _sole_topic). */
.result-list.no-topic li{grid-template-columns:1fr auto}
.result-list .topic{font-size:10px;letter-spacing:.4px;text-transform:uppercase;
  color:#13416b;background:var(--gold);border-radius:2px;padding:1px 6px;white-space:nowrap}
.result-list .what{font-size:16px;color:#fff;min-width:0}
.result-list .where{font-size:13px;color:#cfdced;white-space:nowrap}

.grid-scroll{overflow-x:auto;margin:0 0 10px}
table.year-grid{border-collapse:collapse;font-size:13px;width:100%;min-width:520px}
table.year-grid th,table.year-grid td{padding:3px;text-align:center;
  border:1px solid rgba(255,255,255,.12)}
table.year-grid thead th{font-size:10px;font-weight:700;color:#9fb4c9;
  border:0;padding-bottom:5px}
table.year-grid th.yr{width:1%;white-space:nowrap;text-align:right;padding-right:9px;
  font-weight:700;border-left:0}
table.year-grid th.yr a{color:#fff}
table.year-grid th.yr a:hover{color:var(--gold)}
table.year-grid td.has{background:rgba(255,198,56,.16)}
table.year-grid td.has a{display:block;padding:2px 4px;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.3px}
table.year-grid td.has span{display:block;padding:2px 4px;font-size:11.5px;
  text-transform:uppercase;color:#9fb4c9}
table.year-grid td.gap span{color:#5b7a96;font-size:11px}
table.year-grid td.brk{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
table.year-grid td.n,table.year-grid th.n{width:1%;white-space:nowrap;
  color:#9fb4c9;font-size:11px;border-right:0}

.grid-key{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12px;color:#9fb4c9;margin:0 0 6px}
.grid-key .k{display:inline-block;width:13px;height:13px;border-radius:2px;
  border:1px solid rgba(255,255,255,.18);margin-left:10px}
.grid-key .k:first-child{margin-left:0}
.grid-key .k.has{background:rgba(255,198,56,.35)}
.grid-key .k.gap{background:transparent}
.grid-key .k.brk{background:rgba(255,255,255,.08)}

.issue-list{list-style:none;margin:0;padding:0}
.issue-list > li{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.issue-list .issue-title{font-family:var(--serif);font-size:18px;color:var(--gold)}
.issue-list .vol{font-size:13px;color:#cfdced;margin-left:8px}

/* On the CONTAINER's width, not the viewport's, for the reason given above
   the .prose table rules: the sidebar squeezes this column to ~515px around
   900-1050px, where the page is still "desktop" but just as cramped as a phone. */
@container page (max-width: 560px){
  .issue-card{padding:16px}
  /* The photo wraps above the title here rather than beside it: the text that
     would sit alongside — a fly's name, a button — needs more than the
     ~150px a phone leaves next to it, and wraps to ribbons in less. */
  .issue-card-head{gap:13px}
  .issue-art{flex-basis:104px;width:104px}
  .issue-month{font-size:21px}
  .issue-id .btn{width:100%;min-width:0}
  .issue-topics{grid-template-columns:1fr;gap:15px}

  /* Twelve cells in a row want ~440px, so they wrap into three. All twelve
     stay, unlike the year grid below, which drops its empty cells: here the
     strip is the only thing holding the current month in place. */
  .issue-nav .step{font-size:14px}
  .issue-nav .pick{gap:8px;justify-content:space-between}
  /* The strip to its own line, which puts the year and both arrows together
     on the one above rather than stranding the second arrow below. */
  .issue-nav .mons{flex-wrap:wrap;flex-basis:100%;order:1}
  .issue-nav .mons li{flex:1 1 52px}

  /* Results stack: the topic badge and the issue reference go above and below
     the title rather than squeezing it into a third of the width. */
  .result-list li{grid-template-columns:1fr}
  .result-list .topic{justify-self:start}
  .result-list .where{white-space:normal}

  /* The twelve-column grid needs 520px, so on a phone it was a sideways
     scroll inside a vertical one. Each year becomes a block of month pills
     instead — the months it actually carries, plus the count. Gaps and the
     summer break are dropped: stacked, they are unlabelled cells that say
     nothing, and the count still shows how complete the year is. */
  .grid-scroll{overflow-x:visible}
  table.year-grid{display:block;min-width:0}
  table.year-grid thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%)}
  table.year-grid tbody,table.year-grid tr{display:block}
  table.year-grid tr{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  table.year-grid tr:last-child{border-bottom:0}
  table.year-grid th.yr{display:block;width:auto;text-align:left;padding:0 0 7px;border:0;
    font-family:var(--serif);font-size:17px;font-weight:400}
  table.year-grid th.yr a{color:var(--gold)}
  table.year-grid td.gap,table.year-grid td.brk{display:none}
  table.year-grid td.has{display:inline-block;width:auto;border:0;border-radius:3px;
    margin:0 5px 5px 0;padding:0}
  table.year-grid td.has a,table.year-grid td.has span{padding:5px 10px;font-size:12px}
  table.year-grid td.n{display:block;width:auto;border:0;padding:0;margin-top:3px;
    text-align:left;font-size:12px}
  /* Reads for any count, where " issues" would not. */
  table.year-grid td.n::after{content:" in the archive"}
  .grid-key{display:none}
}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:26px 0 0;
  padding-top:18px;border-top:1px solid var(--rule);font-size:14px}
.pagination a,.pagination .current{padding:5px 11px;border-radius:3px;border:1px solid var(--rule)}
.pagination .current{background:var(--gold);color:#13416b;font-weight:700;border-color:var(--gold)}
.pagination a:hover{border-color:var(--gold);text-decoration:none}
.pagination .gap{border:0;color:#9fb4c9}

/* ---------- members gate ---------- */
.gate{max-width:420px;margin:10px 0 30px}
.gate label{display:block;font-size:14px;margin:0 0 6px;color:#cfdced}
/* Matched on the wrapper, not on [type=password]: revealing the password
   flips the input to type=text, which would otherwise strip its styling. */
.gate-field{position:relative}
.gate-field input{width:100%;font-family:var(--sans);font-size:16px;
  padding:10px 62px 10px 12px;
  border:1px solid rgba(255,255,255,.25);border-radius:4px;
  background:rgba(255,255,255,.07);color:#fff}
.gate-field input:focus{outline:2px solid var(--gold);outline-offset:1px}
.gate-field .reveal{position:absolute;top:1px;right:1px;bottom:1px;
  padding:0 12px;border:0;border-radius:0 3px 3px 0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;color:#cfdced}
.gate-field .reveal:hover{color:var(--gold)}
.gate-field .reveal:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.gate .errorlist,.gate .gate-notice{list-style:none;margin:0 0 12px;padding:10px 12px;border-radius:4px;
  background:rgba(190,60,60,.25);border:1px solid rgba(255,140,140,.5);font-size:14px}
.gate .btn{margin-top:14px}
.gate .hint{font-size:13px;color:#cfdced;margin-top:14px}

@media (max-width:600px){
  .fly-head .photo{flex-basis:100%}
}

/* ---------- public forms (guest registration) ---------- */
/* Follows the members' gate above: same field colours and focus ring, laid out
   in rows because the printed form puts name, address and phone on one line. */
.site-form{max-width:760px;margin:10px 0 30px}
.site-form fieldset{border:1px solid var(--rule);border-radius:4px;padding:16px 18px;margin:0 0 22px}
.site-form legend{font-family:var(--serif);font-size:19px;color:var(--gold);padding:0 8px}
.site-form .row{display:flex;gap:14px;flex-wrap:wrap}
.site-form .row .field{flex:1 1 180px}
.field{margin:0 0 16px}
.field label{display:block;font-size:14px;margin:0 0 6px;color:#cfdced}
.field .req{color:var(--gold)}
.field input[type=text],.field input[type=email],.field input[type=date],.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.25);border-radius:4px;
  background:rgba(255,255,255,.07);color:#fff}
.field input:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.field .hint{font-size:13px;color:#cfdced;margin:6px 0 0}
.field .errorlist,.form-errors .errorlist{list-style:none;margin:0 0 8px;padding:8px 12px;
  border-radius:4px;background:rgba(190,60,60,.25);
  border:1px solid rgba(255,140,140,.5);font-size:14px}
.site-form .initials{max-width:160px}
.release{max-height:360px;overflow-y:auto;padding:14px 16px;margin:0 0 20px;
  border:1px solid var(--rule);border-radius:4px;background:rgba(0,0,0,.18);font-size:14px}
.release h3{font-family:var(--serif);font-size:17px;margin:0 0 10px}
.release h4{font-size:14px;letter-spacing:.4px;text-transform:uppercase;color:var(--gold);margin:16px 0 8px}
.release p,.release li{font-size:14px;line-height:1.5;margin:0 0 10px}
.release .shout{font-weight:700}
.sigpad{margin:0 0 6px}
.sigpad-canvas{display:block;width:100%;height:170px;background:#fff;border-radius:4px;
  border:1px solid rgba(255,255,255,.25);touch-action:none;cursor:crosshair}
.sigpad-clear{margin-top:8px;font-family:var(--sans);font-size:13px;letter-spacing:.3px;
  text-transform:uppercase;padding:7px 14px;border-radius:3px;cursor:pointer;
  border:1px solid var(--rule);background:transparent;color:#cfdced}
.sigpad-clear:hover{border-color:var(--gold);color:#fff}
.cf-turnstile{margin:0 0 18px}

@media (max-width:600px){
  .site-form .row{display:block}
}

/* ---------- site statistics (staff only) ---------- */
.ranges{display:flex;gap:10px;font-size:13px;letter-spacing:.3px;text-transform:uppercase;
  margin:0 0 20px;flex-wrap:wrap}
.ranges a,.ranges .current{padding:5px 11px;border-radius:3px;border:1px solid var(--rule)}
.ranges .current{background:var(--gold);color:#13416b;font-weight:700;border-color:var(--gold)}
.ranges a:hover{border-color:var(--gold);text-decoration:none}
.stat-row{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.stat{flex:1 1 140px;padding:14px 16px;border:1px solid var(--rule);border-radius:4px;
  font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:#cfdced}
.stat .n{display:block;font-family:var(--serif);font-size:28px;letter-spacing:0;
  text-transform:none;color:#fff;margin-bottom:4px}

/* Views per day. The bar is the day's page views, split where the numbers
   really divide: every visit reads a first page, and the rest are the pages
   read after it, so the two segments add up to the bar and to nothing made
   up. The card on hover is drawn by js/stats.js; with no JavaScript each bar
   still carries the same numbers in its title. */
.chart{position:relative;margin:0 0 30px}
.chart-key{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#cfdced;margin:0 0 12px}
.chart-key span{display:flex;align-items:center;gap:7px}
.chart-key span::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--gold)}
.chart-key .repeat::before{background:var(--gold-pale)}
.chart-plot{position:relative;height:190px;padding-left:46px}
.chart-grid{position:absolute;inset:0 0 0 46px;pointer-events:none}
.chart-line{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.1)}
.chart-line.base{border-top-color:var(--rule)}
.chart-line b{position:absolute;right:calc(100% + 9px);top:-.75em;
  font-size:12px;font-weight:400;color:#9fb4c9}
.bars{position:relative;display:flex;align-items:flex-end;gap:2px;height:100%;
  list-style:none;margin:0;padding:0}
.bars li{position:relative;flex:1 1 0;height:100%;display:flex;align-items:flex-end}
.bars li::before{content:"";position:absolute;inset:0 -2px;background:rgba(255,255,255,.09);
  opacity:0;transition:opacity .08s}
.bars li:hover::before,.bars li.lit::before{opacity:1}
.bars .bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;min-height:1px;background:var(--gold);border-radius:2px 2px 0 0;overflow:hidden}
.bars .seg{display:block;width:100%}
.bars .seg.visits{background:var(--gold)}
.bars .seg.repeat{background:var(--gold-pale)}
.chart-dates{position:relative;height:1.4em;margin-left:46px;font-size:12px;color:#9fb4c9}
.chart-dates span{position:absolute;top:4px;transform:translateX(-50%);white-space:nowrap}
.days-90 .bars{gap:1px}
.days-365 .bars{gap:0}
.days-365 .bars li::before{inset:0 -1px}

.chart-tip{position:absolute;z-index:5;min-width:168px;padding:10px 12px;
  border:1px solid rgba(255,255,255,.2);border-radius:7px;background:rgba(10,30,51,.97);
  box-shadow:0 10px 26px rgba(0,0,0,.4);font-size:13px;line-height:1.4;pointer-events:none}
.chart-tip[hidden]{display:none}
.chart-tip .when{color:#cfdced;margin:0 0 7px}
.chart-tip .rows{display:grid;grid-template-columns:10px auto 1fr;gap:5px 9px;align-items:center}
.chart-tip .swatch{width:10px;height:10px;border-radius:2px;background:var(--gold)}
.chart-tip .swatch.repeat{background:var(--gold-pale)}
.chart-tip .n{font-weight:700;text-align:right;white-space:nowrap}
.chart-tip .sum{display:flex;gap:9px;margin-top:7px;padding-top:7px;
  border-top:1px solid rgba(255,255,255,.18)}
.chart-tip .sum .n{margin-left:19px}
.chart-tip .aside{margin-top:6px;font-size:12px;color:#9fb4c9}
.stat-tables{display:flex;gap:26px;flex-wrap:wrap}
.stat-tables > div{flex:1 1 300px;min-width:0}
.stat-tables table{width:100%}
.stat-tables h4{font-size:14px;letter-spacing:.4px;text-transform:uppercase;
  color:var(--gold);margin:18px 0 8px}
.stat-tables th[scope=row]{font-weight:400;word-break:break-word}
.stat-tables .by{display:block;font-size:12px;color:#9fb4c9}
.stat-tables td{text-align:right;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}