/* ==================================================================
   East Texas Film Society — shared stylesheet
   Every page links this file. Edit here once, not six times.

   PALETTE
     pine      #0e1712   dark needle green, the page ground
     bayou     #12363d   deep water blue-green, masthead plate
     water     #17302c   panels that sit on the ground
     sage      #dde5d3   paper, body text
     goldenrod #d8b23c   rules, dates, the one bright thing
     moss      #8a9b84   secondary text
     mint      #a9c8c4   section headings

   TYPE
     Verdana for everything structural. Georgia italic for names,
     titles and headings. Both are web-safe, so nothing to load.
   ================================================================== */


/* ---------- ground ---------- */

html {
  background: #0e1712
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 12L12 0M6 12L12 6M0 6L6 0' stroke='%231a2a20' stroke-width='1'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  padding: 28px 16px 60px;
  font: 12px/1.6 Verdana, Geneva, sans-serif;
  color: #dde5d3;
}

.page { width: 840px; margin: 0 auto; }


/* ---------- masthead ---------- */

.plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #12363d;
  border: 1px solid #a8873a;
  padding: 18px 22px 16px;
}

.wordmark { min-width: 0; }

.plate h1 {
  margin: 0;
  font: italic 30px/1 Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  color: #f0f4e4;
}

.tagline { margin: 7px 0 0; color: #a9c8c4; }

.crest {
  display: block;
  flex: 0 0 auto;
  max-height: 88px;
  max-width: 200px;
  width: auto;
  height: auto;
}


/* ---------- navigation ----------
   A plain row of links with hairline dividers. The About submenu
   opens on hover and on keyboard focus, no script involved.
--------------------------------- */

.nav {
  position: relative;
  z-index: 5;
  margin-top: 14px;
  border-top: 1px solid #d8b23c;
  border-bottom: 1px solid #2b3d2f;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li { position: relative; }

.nav a {
  display: block;
  padding: 8px 13px;
  color: #dde5d3;
  text-decoration: none;
  border-right: 1px solid #2b3d2f;
}

.nav li:first-child a { border-left: 1px solid #2b3d2f; }

.nav a:hover { background: #17302c; color: #f0f4e4; }
.nav a:focus-visible { outline: 2px solid #d8b23c; outline-offset: -2px; }

/* the page you're on */
.nav [aria-current="page"] { color: #d8b23c; background: #16241b; }

/* submenu */
.nav .has-sub > a::after { content: " \25BE"; color: #8a9b84; }

.nav .has-sub > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 150px;
  background: #12363d;
  border: 1px solid #d8b23c;
  box-shadow: 4px 4px 0 #060d09;
}

.nav .has-sub:hover > ul,
.nav .has-sub:focus-within > ul { display: block; }

.nav .has-sub li a {
  border: 0;
  border-bottom: 1px solid #2b3d2f;
  padding: 8px 14px;
}

.nav .has-sub li:last-child a { border-bottom: 0; }

.social {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;   /* flex-start to move them to the left */
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.social img {
  display: block;
  height: 32px;                /* the only size to change */
  width: auto;
}

.social a:focus-visible { outline: 2px solid #d8b23c; outline-offset: 2px; }


/* ---------- rules ---------- */

.rule { height: 1px; background: #d8b23c; margin: 22px 0 2px; }
.rule + .rule { background: #2b3d2f; margin: 0 0 26px; }


/* ---------- panels ---------- */

.card {
  margin-bottom: 26px;
  padding: 20px 24px 22px;
  background: #14251c;
  border: 1px solid #2b3d2f;
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

h2 {
  margin: 0 0 14px;
  font: italic 21px/1.25 Georgia, "Times New Roman", serif;
  font-weight: normal;
  color: #a9c8c4;
}

h3 {
  margin: 22px 0 8px;
  font: italic 19px/1.3 Georgia, "Times New Roman", serif;
  font-weight: normal;
  color: #f0f4e4;
}

p { margin: 0 0 11px; max-width: 68ch; }

.lede {
  color: #f0f4e4;
  border-left: 3px solid #d8b23c;
  padding-left: 14px;
}

a { color: #d8b23c; }

ol, ul.plain { max-width: 68ch; }
ol { padding-left: 22px; }
ol li { margin-bottom: 10px; }

.note { color: #8a9b84; }


/* A card whose text runs the full width of the box instead of stopping
   at the default 68ch measure. Add "wide" to the class:
       <div class="card wide">
   Use it where the box would otherwise look half empty. Lines get long,
   so it suits dense reference copy more than long narrative reading. */

.card.wide p,
.card.wide ol,
.card.wide ul,
.card.wide li { max-width: none; }


/* Grid rather than flex on purpose. With flex, a row holding one
   card stretched it to full width — flex-grow fills the line. A grid
   column stays a column, so an odd last card keeps the same width as
   the others and leaves the next cell empty. */
.two {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
}

.two > * { min-width: 0; }


/* ---------- a card split into a main column and a narrow aside ----------
   <div class="card split">
     <div class="main"> ...the prose... </div>
     <div class="side"> ...the QR and its caption... </div>
   </div>
------------------------------------------------------------------------ */

.split { display: flex; gap: 28px; align-items: flex-start; }

.split .main { flex: 1 1 auto; min-width: 0; }
.split .side { flex: 0 0 190px; text-align: center; }

/* The white field is not decoration — a QR code needs light quiet space
   around it to scan. A black-on-transparent PNG would be unreadable
   straight onto the dark green. */
.qr {
  display: block;
  width: 100%;
  height: auto;
  padding: 9px;
  background: #fff;
  border: 1px solid #2b3d2f;
}

.split .side p {
  max-width: none;
  margin: 10px 0 0;
  color: #d8b23c;
}


/* ---------- QR codes side by side ----------
   <div class="qrs">
     <div>
       <h3>Stripe</h3>
       <a class="qrlink" href="..."><img class="qr" src="..." alt="..."></a>
       <p><a href="...">Scan or tap to donate</a></p>
     </div>
     ... second one ...
   </div>

   If a QR already comes with its own coloured card behind it, add
   "bare" so it isn't given a second white frame:
       <img class="qr bare" src="...">
------------------------------------------- */

.qrs {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 6px;
}

.qrs > div {
  flex: 1 1 220px;
  max-width: 280px;
  text-align: center;
}

.qrs h3 { margin: 0 0 11px; }
.qrs p { max-width: none; margin: 11px 0 0; }

.qr.bare { background: none; padding: 0; border: 0; }

/* makes the whole code clickable, and shows that it is */
.qrlink { display: block; }
.qrlink:hover .qr { border-color: #d8b23c; }
.qrlink:focus-visible .qr { outline: 2px solid #d8b23c; outline-offset: 2px; }

/* ---------- membership tiers ----------
   <div class="plans">
     <div class="plan">
       <h3>Crew</h3>
       <ul><li>...</li></ul>
       <div class="pricerow">
         <span><span class="price">$50</span> <span class="per">for 1 year</span></span>
         <a class="button" href="...">Select</a>
       </div>
     </div>
   </div>

   Each .plan is a flex column and .pricerow has margin-top:auto, so
   the price and button sit on the bottom edge however many benefits
   a tier lists. That's what keeps the four cards aligned.
--------------------------------------- */

.plans {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 26px;
}

.plan {
  display: flex;
  flex-direction: column;
  flex: 1 1 320px;
  padding: 20px 24px 20px;
  background: #14251c;
  border: 1px solid #2b3d2f;
}

.plan h3 {
  margin: 0 0 13px;
  padding-bottom: 9px;
  font-size: 19px;
  color: #d8b23c;              /* same treatment as the roster tiers */
  border-bottom: 1px solid #2b3d2f;
}

.plan ul {
  max-width: none;
  margin: 0 0 20px;
  padding-left: 20px;
}

.plan li { margin-bottom: 6px; color: #dde5d3; }

.pricerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;            /* pins this row to the bottom */
  padding-top: 13px;
  border-top: 1px solid #2b3d2f;
}

.price {
  font: italic 26px/1 Georgia, "Times New Roman", serif;
  color: #f0f4e4;
}

.per { color: #8a9b84; }

.button {
  flex: 0 0 auto;
  display: inline-block;
  padding: 8px 17px;
  background: #12363d;
  border: 1px solid #d8b23c;
  color: #d8b23c;
  text-decoration: none;
}

.button:hover { background: #17302c; color: #f0f4e4; }
.button:focus-visible { outline: 2px solid #d8b23c; outline-offset: 2px; }


/* ---------- embedded payment form ----------
   The provider's own page, framed in. White ground so there's no
   dark flash before it paints. Height comes from the provider's
   recommended size — if the form is taller than this you'll get a
   scrollbar inside the frame, so raise it rather than letting it
   scroll.
------------------------------------------- */

.payform {
  display: block;
  width: 100%;
  max-width: 860px;
  height: 1600px;
  margin: 0 auto;
  border: 1px solid #2b3d2f;
  background: #fff;
}

/* The provider asks for 860px but .page is 840px, so the form would
   be clipped by 20px. This lets the memberships page run a little
   wider than the rest of the site, only where the form needs it. */
.page.wide-page { width: 880px; }

@media (max-width: 920px) {
  .page.wide-page { width: 100%; }
  .payform { height: 1750px; }   /* forms grow taller as they narrow */
}


/* a call to action sitting under a block, separated by a hairline */
.ask {
  max-width: none;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid #2b3d2f;
  text-align: center;
  color: #f0f4e4;
}

@media (max-width: 880px) {
  .split { display: block; }
  .split .side { max-width: 190px; margin-top: 22px; text-align: left; }
}


/* ---------- a scattered pile of photographs ----------
   <ul class="pile">
     <li><img src="images/community/one.jpg" alt=""></li>
     <li><img src="images/community/two.jpg" alt=""></li>
   </ul>

   Works with any number of photos. The overlap comes from negative
   margins; the tilt from a repeating nth-child cycle, so you never
   set an angle by hand. Photos are square-cropped by object-fit, so
   mixing portrait and landscape originals is fine.

   Three knobs: img width/height (size), li margin (how much they
   overlap), and the rotate values (how messy the pile looks).
------------------------------------------------------ */

.pile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 30px 10px;
}

.pile li {
  position: relative;        /* needed for z-index on hover */
  margin: -12px -14px;       /* the overlap */
  transition: transform .18s ease;
}

.pile img {
  display: block;
  width: 148px;              /* the size */
  height: 148px;
  object-fit: cover;         /* crops any shape to a square */
  background: #ece5d3;
  border: 7px solid #ece5d3;
  border-bottom-width: 20px; /* the polaroid chin */
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
}

/* A cycle of 7 so the repetition isn't obvious at a glance. */
.pile li:nth-child(7n+1) { transform: rotate(-6deg); }
.pile li:nth-child(7n+2) { transform: rotate(3deg); }
.pile li:nth-child(7n+3) { transform: rotate(-2deg); }
.pile li:nth-child(7n+4) { transform: rotate(7deg); }
.pile li:nth-child(7n+5) { transform: rotate(-4deg); }
.pile li:nth-child(7n+6) { transform: rotate(1deg); }
.pile li:nth-child(7n+7) { transform: rotate(-8deg); }

/* Straighten and lift whichever one is under the pointer. Same
   specificity as the rules above, so it wins by coming later. */
.pile li:hover,
.pile li:focus-within {
  transform: rotate(0) scale(1.07);
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  .pile li { transition: none; }
}

@media (max-width: 880px) {
  .pile img { width: 108px; height: 108px; }
  .pile li { margin: -8px -10px; }
  .pile { padding: 22px 6px; }
}


/* ---------- overlapping sections ----------
   A generic stack of panels that overlap and alternate sides. Put
   anything inside a .slab — prose, a heading, a list, an image.

     <div class="stack">
       <div class="slab"> ... </div>
       <div class="slab"> ... </div>
     </div>

   Which side a panel sits on and which tint it gets both come from
   its position in the list, so nothing is set per panel. Later
   panels paint over earlier ones, so appending one puts it on top.

   Add class="plain" to a slab to keep the overlap but drop the tint:
     <div class="slab plain"> ... </div>
------------------------------------------- */

.stack { margin: 0 0 34px; }

.slab {
  position: relative;
  max-width: 640px;
  margin: -26px 0 0;
  /* deep bottom padding so the next panel's overlap doesn't cover
     the last line of this one */
  padding: 26px 34px 42px;
  border: 1px solid #0e1712;
  color: #2b2621;
}

.slab:first-child { margin-top: 0; }

.slab:nth-child(odd)  { margin-right: auto; }
.slab:nth-child(even) { margin-left: auto; }

.slab:nth-child(3n+1) { background: #cf9a7b; }
.slab:nth-child(3n+2) { background: #d0cf8f; }
.slab:nth-child(3n+3) { background: #6d9fc4; }

/* the site's headings, links and notes are tuned for the dark ground,
   so they have to be restated for a light panel */
.slab h2, .slab h3 { color: #24422f; }
.slab p { max-width: none; color: #2b2621; }
.slab p:last-child { margin-bottom: 0; }
.slab .note { color: #4f6b55; }
.slab a { color: #24422f; }
.slab blockquote { margin: 0; }

/* keeps the overlap, drops the colour */
.slab.plain {
  background: #14251c;
  border-color: #2b3d2f;
  color: #dde5d3;
}
.slab.plain h2 { color: #a9c8c4; }
.slab.plain h3 { color: #f0f4e4; }
.slab.plain p { color: #dde5d3; }
.slab.plain .note { color: #8a9b84; }
.slab.plain a { color: #d8b23c; }
.slab.plain .name { color: #f0f4e4; }
.slab.plain .role, .slab.plain .place { color: #8a9b84; }

/* optional right-aligned attribution, for quotes and the like */
.by { margin-top: 14px; text-align: right; }

.by .name {
  display: block;
  font: italic 19px/1.2 Georgia, "Times New Roman", serif;
  color: #24422f;
}

.by .role {
  display: block;
  margin-top: 3px;
  letter-spacing: .18em;
  color: #4f6b55;
}

.by .place {
  display: block;
  margin-top: 2px;
  font-weight: bold;
  letter-spacing: .12em;
  color: #24422f;
}

@media (max-width: 880px) {
  .slab {
    max-width: none;
    margin-top: -18px;
    padding: 22px 24px 32px;
  }
}


/* ---------- an event, with its poster ---------- */

.event { display: flex; gap: 18px; align-items: flex-start; }

.event .art {
  flex: 0 0 auto;
  width: 150px;      /* fallback if no size is set at all */
  height: auto;
  border: 1px solid #2b3d2f;
}

/* Readability depends on how much detail is packed into a given image,
   not on a formula — a bold one-word logo reads fine small; a poster
   with a paragraph of small text needs more room. Whoever adds the
   event picks the size in the sheet; this just supplies the widths.
   Height is always auto, so nothing gets cropped or distorted at any
   size — only how much room the image is given changes. */
.event .art.size-small  { width: 110px; }
.event .art.size-medium { width: 150px; }
.event .art.size-large  { width: 230px; }

.event .body { min-width: 0; }
.event p { max-width: none; }

.strand {
  display: block;
  max-width: 150px;
  height: auto;
  margin-bottom: 8px;
}

.when {
  display: block;
  color: #d8b23c;
  letter-spacing: .06em;
  margin-bottom: 4px;
}


/* ---------- team ---------- */

.member {
  padding: 18px 20px 20px;
  background: #14251c;
  border: 1px solid #2b3d2f;
}

.member .portrait {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #2b3d2f;
  margin-bottom: 12px;
}

.member .who {
  margin: 0 0 1px;
  font: italic 19px/1.2 Georgia, "Times New Roman", serif;
  font-weight: normal;
  color: #f0f4e4;
}

.member .role {
  display: block;
  color: #d8b23c;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.member .bio { max-width: none; }

.favourites {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #2b3d2f;
}

.favourites .label { display: block; color: #8a9b84; margin-bottom: 8px; }

.favourites .strip {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.favourites img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #2b3d2f;
}

.favourites .strip li { flex: 1 1 0; min-width: 0; }


/* ---------- screenings listing ----------
   Only screenings.html uses everything below this line.
--------------------------------------- */

.browse {
  position: relative;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.browse > input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  clip-path: inset(50%);
}

.filters { flex: 0 0 172px; }
.results { flex: 1 1 auto; min-width: 0; }

.filters h2 { font-size: 15px; margin-bottom: 12px; }

.filters label, .filters .label {
  display: block;
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid #2b3d2f;
  cursor: pointer;
}

.filters label:hover { border-color: #4c6b52; }

.filters img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 7px;
}

.filters .name { display: block; color: #dde5d3; }
.filters .tally { display: block; color: #8a9b84; }

.filters .off { cursor: default; border-style: dashed; opacity: .55; }

/* which films show — one rule per series */
#f-all:checked ~ .filters label[for="f-all"],
#f-kooky:checked ~ .filters label[for="f-kooky"],
#f-member:checked ~ .filters label[for="f-member"] {
  border-color: #d8b23c;
  background: #17302c;
}

#f-all:focus-visible ~ .filters label[for="f-all"],
#f-kooky:focus-visible ~ .filters label[for="f-kooky"],
#f-member:focus-visible ~ .filters label[for="f-member"] {
  outline: 2px solid #d8b23c;
  outline-offset: 2px;
}

#f-kooky:checked ~ .results .item:not(.s-kooky) { display: none; }
#f-member:checked ~ .results .item:not(.s-member) { display: none; }
#f-member:checked ~ .results .empty { display: block; }

/* LOCAL SHOWCASE — uncomment when the strand starts up
#f-local:checked ~ .filters label[for="f-local"] {
  border-color: #d8b23c; background: #17302c; }
#f-local:focus-visible ~ .filters label[for="f-local"] {
  outline: 2px solid #d8b23c; outline-offset: 2px; }
#f-local:checked ~ .results .item:not(.s-local) { display: none; }
*/

.intro { margin: 0 0 18px; max-width: 480px; color: #8a9b84; }
.intro b { color: #dde5d3; font-weight: normal; }

.list { list-style: none; margin: 0; padding: 0; }
.film { border-bottom: 1px dotted #33473a; }

summary {
  display: block;
  position: relative;
  padding: 12px 30px 12px 0;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }
summary:hover { background: #16241b; }
summary:focus-visible { outline: 2px solid #d8b23c; outline-offset: -2px; }

summary::after {
  content: "+";
  position: absolute;
  top: 12px; right: 8px;
  font: 15px/1.2 Verdana, Geneva, sans-serif;
  color: #d8b23c;
}

details[open] summary::after { content: "\2013"; }

.row { display: flex; gap: 15px; align-items: flex-start; }

.poster { flex: 0 0 auto; border: 1px solid #2b3d2f; background: #17302c; }

.meta { min-width: 0; }

.date { display: block; color: #d8b23c; letter-spacing: .06em; }
.time { color: #8a9b84; }

.title {
  display: block;
  margin-top: 3px;
  font: italic 17px/1.3 Georgia, "Times New Roman", serif;
  color: #f0f4e4;
}

.credit { display: block; color: #8a9b84; margin-top: 2px; }

.desc {
  max-width: 480px;
  margin: 0 0 14px 95px;
  padding: 12px 15px;
  background: #17302c;
  border: 1px solid #2b3d2f;
  border-left: 3px solid #d8b23c;
  color: #d5e0cd;
}

.empty {
  display: none;
  margin: 0 0 18px;
  padding: 12px 15px;
  border: 1px dashed #2b3d2f;
  color: #8a9b84;
}

.archive { margin-top: 38px; }
.archive > p { margin: 0 0 14px; color: #8a9b84; }

.archive ul {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid #2b3d2f;
  columns: 2;
  column-gap: 30px;
}

.archive li { margin-bottom: 4px; color: #b9c6ae; }
.ago { color: #6f7f6a; }


/* ---------- blog ----------
   Same mechanism as the screenings list: each post is a <details>
   sharing name="post", so opening one closes whichever was open.
   Borrows .date, .title, .credit and the summary rules above.
--------------------------- */

.post { border-bottom: 1px dotted #33473a; }

.post .body {
  margin: 0 0 22px;
  padding: 15px 18px 4px;
  background: #17302c;
  border: 1px solid #2b3d2f;
  border-left: 3px solid #d8b23c;
  color: #d5e0cd;
}

.post .body h3 { margin-top: 18px; }
.post .body h3:first-child { margin-top: 4px; }

.post .body ul { margin: 12px 0; padding-left: 22px; }
.post .body ul li { margin-bottom: 5px; }

.post .body cite {
  display: block;
  margin-top: 7px;
  font-style: normal;
  color: #8a9b84;
}

.post .body blockquote {
  margin: 14px 0 14px 18px;
  padding-left: 14px;
  border-left: 1px solid #4c6b52;
  color: #b9c6ae;
}

.permalink {
  display: block;
  margin-bottom: 14px;
  color: #6f7f6a;
}

/* A post linked to directly gets a marker, so someone arriving from a
   shared link can see which one they were sent to. */
.post:target { background: #16241b; }
.post:target > details > summary .title { color: #d8b23c; }


/* ---------- footer ---------- */

.foot {
  margin-top: 34px;
  padding-top: 12px;
  border-top: 1px solid #2b3d2f;
  color: #8a9b84;
}

.foot p { max-width: 68ch; }


/* ---------- narrow screens ---------- */

@media (max-width: 880px) {
  .page { width: 100%; }

  .plate { gap: 16px; }
  .crest { max-height: 58px; max-width: 110px; }

  .nav a { padding: 8px 10px; }
  .nav .has-sub > ul { position: static; border-width: 1px 0; box-shadow: none; }

  .browse { display: block; }
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
  }
  .filters h2 { flex: 0 0 100%; margin-bottom: 2px; }
  .filters label, .filters .label { flex: 1 1 140px; margin-bottom: 0; }

  .archive ul { columns: 1; }
  .desc { margin-left: 0; }
  .event { display: block; }
  .event .art { width: 100%; max-width: 260px; margin-bottom: 12px; }

  .plate h1 { font-size: 23px; }
}


/* ---------- members roster ----------
   Two columns via CSS multi-column, with break-inside: avoid so a
   tier never splits across the gap. Crew is long enough that the
   balancer puts it alone on the left and the rest on the right.
------------------------------------- */

.tiers { columns: 2; column-gap: 30px; }

.tier {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 24px;
}

.tier h3 {
  margin-top: 0;
  font-size: 17px;
  color: #d8b23c;              /* goldenrod, so the tiers carry the page */
  border-bottom: 1px solid #2b3d2f;
  padding-bottom: 6px;
}

/* the count stays quiet — it's a footnote to the tier, not part of it */
.tier .count { color: #8a9b84; font-size: 12px; }

.roster {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.roster li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 6px 11px;
  margin-bottom: 4px;
  background: #14251c;
  border: 1px solid #2b3d2f;
  border-left: 3px solid #2b3d2f;
}

.roster .who { min-width: 0; color: #f0f4e4; }
.roster .city { flex: 0 0 auto; color: #8a9b84; }

/* status messages while the CSV loads, or if it can't be read */
.status { color: #8a9b84; }

.status.bad {
  padding: 12px 15px;
  border: 1px dashed #a8873a;
  color: #dde5d3;
}

@media (max-width: 880px) {
  .tiers { columns: 1; }
}


/* ---------- livestream player ----------
   Ported from the standalone stream page. Every id below is
   referenced by the script in livestream.html — DO NOT RENAME THEM.
   Colours only have been changed, to match the rest of the site.

   The reset is scoped to #player-wrap so it can't affect any other
   page: the original player relied on a global * reset.
--------------------------------------- */

#player-wrap,
#player-wrap *,
#player-wrap *::before,
#player-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#player-wrap {
  width: 100%;
  padding: 20px 22px 22px;
  background: #14251c;
  border: 1px solid #2b3d2f;
}

#header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#video-title {
  font: italic 19px/1.25 Georgia, "Times New Roman", serif;
  color: #f0f4e4;
}

#live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 3px 8px;
  background: #17302c;
  border: 1px solid #d8b23c;
  font: 10px/1.4 Verdana, Geneva, sans-serif;
  letter-spacing: .1em;
  color: #d8b23c;
}

#live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8b23c;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

#video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #000;
  border: 1px solid #2b3d2f;
}

#video-container video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#sync-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(14, 23, 18, .9);
  color: #a9c8c4;
}

#sync-spinner {
  width: 30px;
  height: 30px;
  border: 2px solid #2b3d2f;
  border-top-color: #d8b23c;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#error-msg { padding: 0 16px; text-align: center; color: #d8b23c; }

/* The controls fade in on hover, or on tap on a touch screen. This is
   the one transition on the site — without it they blink. */
#custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  opacity: 0;
  transition: opacity .25s ease;
}

#video-container:hover #custom-controls,
#video-container.touched #custom-controls,
#custom-controls:focus-within { opacity: 1; }

#time-display {
  min-width: 82px;
  font: 11px/1.4 Verdana, Geneva, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #dde5d3;
}

#time-display span { color: #8a9b84; }

#right-controls, #volume-group { display: flex; align-items: center; gap: 8px; }

#mute-btn, #fullscreen-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: #dde5d3;
}

#mute-btn:hover, #fullscreen-btn:hover { color: #d8b23c; }
#mute-btn:focus-visible, #fullscreen-btn:focus-visible {
  outline: 2px solid #d8b23c;
  outline-offset: 1px;
}

#volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 74px;
  height: 3px;
  background: #2b3d2f;
  outline: none;
  cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d8b23c;
  cursor: pointer;
}

#volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: #d8b23c;
  cursor: pointer;
}

#volume-slider:focus-visible { outline: 2px solid #d8b23c; outline-offset: 3px; }

#meta-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

#meta-director { color: #f0f4e4; }
#meta-year { color: #8a9b84; }
#meta-desc { margin-top: 6px; color: #d5e0cd; line-height: 1.7; }

#upnext {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid #2b3d2f;
}

#upnext-label {
  margin-bottom: 5px;
  letter-spacing: .1em;
  color: #8a9b84;
}

#upnext-title { color: #f0f4e4; }
#upnext-director { margin-top: 2px; color: #8a9b84; }

@media (max-width: 880px) {
  #player-wrap { padding: 14px 15px 16px; }
  #video-title { font-size: 16px; }
  #volume-slider { width: 55px; }
}

/* Respect a reduced-motion preference: no pulsing, no spinning. */
@media (prefers-reduced-motion: reduce) {
  #live-dot, #sync-spinner { animation: none; }
  #custom-controls { transition: none; }
}

.embed {
  display: block;
  width: 100%;
  height: 700px;
  border: 1px solid #2b3d2f;
  background: #0e1712;
}

.embed-note { margin-top: 10px; color: #8a9b84; }

@media (max-width: 880px) {
  .embed { height: 520px; }
}

/* ==================================================================
   APPEND THIS TO THE END OF style.css
   Then bump the ?v= number in the <link> of every page.

   Production & casting calls (productions.html) and the member
   portal frame (portal.html). Reuses .browse / .filters / .results /
   .list / .film / .row / .meta / .date / .title / .credit / .desc
   from the screenings page — only the pieces those don't cover are
   defined here.
   ================================================================== */



/* ---------- calls: filter column ---------- */

.browse.calls { display: flex; gap: 30px; align-items: flex-start; }
.browse.calls .filters { flex: 0 0 196px; }

.views { margin-bottom: 22px; }

.view {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 7px;
  padding: 8px 10px;
  background: #17302c;
  border: 1px solid #2b3d2f;
  font: 12px/1.5 Verdana, Geneva, sans-serif;
  color: #dde5d3;
  cursor: pointer;
}

.view:hover { border-color: #4c6b52; }
.view:focus-visible { outline: 2px solid #d8b23c; outline-offset: -2px; }

.view.on {
  border-color: #d8b23c;
  background: #16241b;
}

.view .name { display: block; }
.view.on .name { color: #d8b23c; }
.view .tally { display: block; color: #8a9b84; }

.pick { margin-bottom: 14px; }

.pick label {
  display: block;
  margin-bottom: 4px;
  color: #a9c8c4;
  letter-spacing: .04em;
}

.pick select,
.pick input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 6px;
  background: #0e1712;
  border: 1px solid #2b3d2f;
  font: 12px/1.5 Verdana, Geneva, sans-serif;
  color: #dde5d3;
}

.pick select:focus,
.pick input:focus { outline: 2px solid #d8b23c; outline-offset: -2px; }

.pick .hint {
  display: block;
  margin-top: 4px;
  color: #6f7f6a;
  font-size: 11px;
  line-height: 1.4;
}

.filters .button.clear {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 18px;
  text-align: center;
  font: 12px/1.5 Verdana, Geneva, sans-serif;
  cursor: pointer;
}



/* ---------- calls: listings ---------- */

.calls .list .film summary { cursor: pointer; padding: 13px 0; }
.calls .list .film summary::-webkit-details-marker { display: none; }
.calls .list .film summary:focus-visible {
  outline: 2px solid #d8b23c;
  outline-offset: -2px;
}
.calls .list .film[open] summary .title { color: #d8b23c; }

.pills { display: block; margin-top: 7px; }

.pill {
  display: inline-block;
  margin: 0 5px 4px 0;
  padding: 1px 7px;
  background: #16241b;
  border: 1px solid #2b3d2f;
  color: #a9c8c4;
  font-size: 11px;
  letter-spacing: .03em;
}

.calls .desc h4 {
  margin: 16px 0 8px;
  font: italic 15px/1.3 Georgia, "Times New Roman", serif;
  color: #a9c8c4;
}

.roles { list-style: none; margin: 0; padding: 0; }

.roles li {
  margin-bottom: 12px;
  padding-left: 11px;
  border-left: 1px solid #2b3d2f;
}

.roles li:last-child { margin-bottom: 0; }

.roles .who {
  display: block;
  font: italic 14px/1.3 Georgia, "Times New Roman", serif;
  color: #f0f4e4;
}

.roles .sub { display: block; color: #8a9b84; }
.roles .line { display: block; margin-top: 3px; color: #dde5d3; }

.apply {
  margin: 16px 0 0;
  padding-top: 11px;
  border-top: 1px solid #2b3d2f;
  max-width: none;
}

.apply .sub { color: #6f7f6a; }



/* ---------- member portal frame ---------- */

.portal {
  display: block;
  width: 100%;
  height: 1100px;
  margin: 0 0 34px;
  border: 1px solid #2b3d2f;
  background: #17302c;
}



/* ---------- narrow screens ---------- */

@media (max-width: 700px) {
  .browse.calls { flex-direction: column; }
  .browse.calls .filters { flex: 1 1 auto; width: 100%; }
  .views { display: flex; gap: 7px; }
  .view { margin-bottom: 0; }
  .portal { height: 1400px; }
}



/* ---------- calls: past-deadline option ---------- */

.pastopt {
  display: block;
  margin-top: 20px;
  padding: 9px 10px;
  background: #16241b;
  border: 1px solid #2b3d2f;
  cursor: pointer;
}

.pastopt:hover { border-color: #4c6b52; }
.pastopt:focus-within { outline: 2px solid #d8b23c; outline-offset: -2px; }

.pastopt input { margin: 0 6px 0 0; vertical-align: baseline; }
.pastopt .name { color: #dde5d3; }
.pastopt .hint { display: block; margin-top: 3px; padding-left: 20px; }

.pastopt.off { opacity: .5; cursor: default; }
.pastopt.off:hover { border-color: #2b3d2f; }



/* ---------- calls: closed roles ---------- */

.roles li.past { border-left-color: #5c4a24; }
.roles li.past .who { color: #b9c6ae; }

.roles .flag {
  display: block;
  margin: 2px 0 3px;
  color: #d8b23c;
  font-size: 11px;
  letter-spacing: .03em;
}

.pill.closed {
  border-color: #5c4a24;
  background: #201a10;
  color: #d8b23c;
}



/* ---------- calls: grouped crew roles, permalinks ---------- */

.cgroup { margin-bottom: 10px; }

.cghead {
  display: block;
  margin-bottom: 4px;
  font: italic 13px/1.3 Georgia, "Times New Roman", serif;
  color: #a9c8c4;
}

.calls .permalink,
.desc .permalink { margin: 12px 0 0; }

.calls .film:target,
.list .film:target {
  background: #16241b;
  box-shadow: -11px 0 0 #16241b, 11px 0 0 #16241b;
}

.list .film:target summary .title { color: #d8b23c; }



/* ---------- nav: Resources as a menu title, not a page ---------- */

.nav .navtitle {
  display: block;
  padding: 8px 13px;
  color: #dde5d3;
  border-right: 1px solid #2b3d2f;
  cursor: default;    /* nothing happens on click, so no pointer cursor */
}

.nav .navtitle:hover { background: #17302c; color: #f0f4e4; }

/* tabindex="0" in the markup makes this focusable via Tab, same as a
   real link would be — without it, keyboard users could never reach or
   reveal this submenu at all, since :focus-within (which shows the
   dropdown) needs something inside the <li> to actually receive focus. */
.nav .navtitle:focus-visible { outline: 2px solid #d8b23c; outline-offset: -2px; }

.nav .has-sub > .navtitle::after { content: " \25BE"; color: #8a9b84; }



/* ---------- screenings: JS-driven filter buttons ----------
   Reuses .filters/.filters .label/.filters img/.filters .name/
   .filters .tally as-is (they already match .label regardless of tag,
   so a <button class="label"> picks up the existing border/padding/
   cursor for free). This only resets button-specific browser chrome
   and adds the "currently selected" state, which used to come from
   :checked on a radio input this page no longer uses. */

.filters button.label {
  width: 100%;
  text-align: left;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  font: 12px/1.6 Verdana, Geneva, sans-serif;
  color: inherit;
}

.filters button.label.on {
  border-color: #d8b23c;
  background: #17302c;
}

.filters button.label:focus-visible {
  outline: 2px solid #d8b23c;
  outline-offset: 2px;
}



/* ---------- screenings: fixed poster size ----------
   The site's own .poster rule (border/background) has no width or
   height, so nothing reserved space for the image before it loaded —
   on a slow load, or if a poster ever fails, the space could collapse
   to nothing. Every poster now gets the same box regardless of its
   real proportions; object-fit: cover crops to fill rather than
   distorting or leaving letterboxing. */

.poster {
  width: 80px;
  height: 120px;
  object-fit: cover;
}



/* ---------- homepage: alternating event cards ----------
   The site's own .event rule (display:flex, image first) already
   puts the picture on the left every time. This flips every OTHER
   generated card so the picture lands on the right instead, giving
   the zigzag down the page — image and text simply swap positions,
   nothing about their own individual styling changes. Mobile drops
   .event to display:block already (see style.css), so this has
   nothing to act on there — alternation only applies once there's an
   actual left/right to alternate. */

.event.reverse { flex-direction: row-reverse; }

/* a row of button links that wraps on narrow screens */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  max-width: none;
  margin-top: 4px;
}