/* ==========================================================================
   EXPRMNTL — digital collection of the Knokke-le-Zoute film festival
   Design tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:        #0F1D17;
  --bg-alt:    #152820;
  --panel:     #1A2E25;
  --paper:     #F1ECDC;
  --paper-dim: #E4DDC6;
  --ink:       #16201A;
  --ink-soft:  #4A5850;
  --brass:     #C6A15B;
  --brass-dim: #8E784A;
  --red:       #9C4635;
  --sage:      #8FA08B;
  --line:      rgba(241,236,220,0.14);
  --line-strong: rgba(241,236,220,0.28);

  --font-display: "Archivo", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Inter", sans-serif;

  --edge-gap: clamp(24px, 7vw, 64px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* ---------- layout shell ---------- */
.shell{
  padding-left:var(--edge-gap);
  padding-right:var(--edge-gap);
  max-width:1200px;
  margin:0 auto;
}

.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(15,29,23,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; padding-bottom:18px;
}
.logotype{
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:0.02em;
  display:flex; align-items:baseline; gap:8px;
}
.logotype .dot{ color:var(--red); }
.logotype small{
  font-family:var(--font-mono);
  font-size:0.6rem;
  color:var(--sage);
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:400;
}

nav.primary-nav ul{ display:flex; gap:2px; }
nav.primary-nav a{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:8px 14px;
  border-radius:2px;
  color:var(--paper-dim);
  transition:color .15s ease, background .15s ease;
}
nav.primary-nav a:hover{ color:var(--paper); background:rgba(198,161,91,0.1); }
nav.primary-nav a.active{ color:var(--brass); }
nav.primary-nav a.active::after{
  content:"";
}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line-strong); color:var(--paper);
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  padding:8px 12px; border-radius:2px; cursor:pointer;
}
@media (max-width:760px){
  .nav-toggle{ display:inline-block; }
  nav.primary-nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--bg-alt);
    border-bottom:1px solid var(--line);
    display:none;
  }
  nav.primary-nav.open{ display:block; }
  nav.primary-nav ul{ flex-direction:column; padding:8px var(--edge-gap) 18px; }
  nav.primary-nav a{ display:block; padding:12px 4px; border-bottom:1px solid var(--line); }
}

/* ---------- eyebrow / kicker ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brass);
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--brass);
  display:inline-block;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  overflow:hidden;
}
.hero-media{
  position:absolute;
  top:0; left:0; right:0;
  aspect-ratio:16/9;
  z-index:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,29,23,.35) 0%, rgba(15,29,23,.78) 65%, var(--bg) 100%);
}
.hero > .shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:56px;
  align-items:center;
  padding-top:116px; padding-bottom:104px;
}

@media (max-width:820px){
  .hero > .shell{ grid-template-columns:1fr; padding-top:48px; padding-bottom:40px; }
}
.hero h1{
  font-size:clamp(2rem, 4.4vw, 3.4rem);
  line-height:1.06;
  margin-top:16px;
  color:var(--paper);
}
.hero h1 em{
  font-style:italic;
  color:var(--brass);
}
.hero-lede{
  margin-top:22px;
  max-width:52ch;
  color:var(--paper-dim);
  font-size:1.02rem;
}

/* countdown leader — animated signature element */
.leader{
  width:min(220px, 100%);
  aspect-ratio:1/1;
  margin:0 auto;
  position:relative;
  display:grid; place-items:center;
}
.leader svg{ width:100%; height:100%; }
.leader-circle-bg{ fill:none; stroke:var(--line-strong); stroke-width:1.5; }
.leader-circle-fg{
  fill:none; stroke:var(--brass); stroke-width:1.5;
  stroke-dasharray:528; stroke-dashoffset:528;
  transform-origin:center; transform:rotate(-90deg);
  animation:sweep 8s steps(8) infinite;
}
.leader-crosshair{ stroke:var(--line-strong); stroke-width:1; }
.leader-number{
  font-family:var(--font-mono);
  font-size:2.6rem;
  fill:var(--paper);
}
.leader-caption{
  position:absolute; bottom:-30px; left:0; right:0; text-align:center;
  font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--sage);
}
@keyframes sweep{
  to{ stroke-dashoffset:0; }
}

/* ---------- timeline of editions (real chronological sequence) ---------- */
.timeline{
  padding-top:44px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
}
.timeline-track{
  display:flex;
  overflow-x:auto;
  gap:0;
  padding: 8px 6px 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.timeline-item{
  flex:1 0 150px;
  padding:0 18px 0 19px;
  border-left:1px solid var(--line-strong);
}
.timeline-dot{
  display:block;
  width:6px; height:6px; border-radius:50%;
  background:var(--brass);
  margin:21px 0 0 -22px;
}
.timeline-year{
  font-family:var(--font-mono); font-size:1.4rem; color:var(--paper);
}
.timeline-label{
  display:block; margin-top:6px;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.06em;
  color:var(--sage); text-transform:uppercase;
}
.timeline-item a{ display:block; padding-top:9px; padding-bottom:16px; }
.timeline-item:hover .timeline-year{ color:var(--brass); }
.timeline-track::-webkit-scrollbar{ height: 6px; }
.timeline-track::-webkit-scrollbar-track{ background: transparent; }
.timeline-track::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 3px; }
.timeline-track::-webkit-scrollbar-thumb:hover{ background: var(--brass-dim); }


@media (max-width:760px){
  .timeline-track{
    flex-wrap:wrap;
    overflow-x:visible;
  }
  .timeline-item{
    flex:1 0 40%;
    padding-top:20px;
    margin-top:16px;
  }
  .timeline-item:nth-child(-n+2){ margin-top:0; }
}
@media (max-width:420px){
  .timeline-item{ flex:1 0 100%; }
  .timeline-item{ margin-top:16px; }
  .timeline-item:first-child{ margin-top:0; }
  .timeline-item:nth-child(odd){ border-left:1px solid var(--line-strong); }
  /* .timeline-item:first-child{ border-left:none; } */
}

/* ---------- section scaffolding ---------- */
.section{ padding-top:64px; padding-bottom:64px; border-bottom:1px solid var(--line); }
.section:last-of-type{ border-bottom:none; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:36px; flex-wrap:wrap;
}
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:10px; }
.section-note{
  font-family:var(--font-mono); font-size:0.78rem; color:var(--sage);
  max-width:34ch; text-align:right;
}
@media (max-width:640px){ .section-note{ text-align:left; } }

.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
}
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }
.media-caption{
  margin-top:10px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.01em;
  color:var(--paper-dim); line-height:1.5;
}
.body-copy{ color:var(--paper-dim); max-width:56ch; }
.body-copy + .body-copy{ margin-top:14px; }
.body-copy p + p{ margin-top:12px; }
.body-copy ul, .body-copy ol{ margin-top:12px; padding-left:1.2em; list-style:revert; }
.body-copy li + li{ margin-top:4px; }

/* ---------- card grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px,1fr));
  gap:22px;
}
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.card-link{ display:flex; flex-direction:column; height:100%; }

.placeholder-frame{
  aspect-ratio:4/3;
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(241,236,220,0.05) 0 2px, transparent 2px 10px),
    var(--bg-alt);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.placeholder-frame::before,
.placeholder-frame::after{
  content:"";
  position:absolute; left:0; right:0; height:14px;
  background-image: repeating-linear-gradient(to right, transparent 0 6px, rgba(241,236,220,0.18) 6px 14px, transparent 14px 20px);
}
.placeholder-frame::before{ top:0; }
.placeholder-frame::after{ bottom:0; }
.placeholder-mark{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px dashed var(--line-strong); padding:8px 12px; border-radius:2px;
  color:var(--sage);
}

.card-body{ padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; gap:8px; }
.card-kicker{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--brass);
}
.card-title{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.card-meta{ font-family:var(--font-mono); font-size:0.74rem; color:var(--sage); }
.card-desc{ font-size:0.9rem; color:var(--paper-dim); margin-top:4px; }

.tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink);
  background:var(--brass); padding:3px 8px; border-radius:2px;
  width:fit-content;
}
.tag.alt{ background:transparent; border:1px solid var(--line-strong); color:var(--sage); }

/* ---------- catalog list (documents) ---------- */
.doc-list{ border-top:1px solid var(--line); }
.doc-row{
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:18px; align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
@media (max-width:600px){
  .doc-row{ grid-template-columns:56px 1fr; }
  .doc-row .doc-status{ grid-column:2; }
}
.doc-num{ font-family:var(--font-mono); font-size:0.78rem; color:var(--sage); }
.doc-name{ font-family:var(--font-body); font-weight:500; }
.doc-sub{ font-family:var(--font-mono); font-size:0.72rem; color:var(--sage); margin-top:3px; display:block; }
.doc-status{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--sage);
  border:1px dashed var(--line-strong); padding:5px 10px; border-radius:2px;
  white-space:nowrap;
}

/* ---------- quote / story block ---------- */
.story-card{
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  padding:26px 26px 22px; position:relative;
}
.story-card .quote-mark{
  font-family:var(--font-display); font-size:2.6rem; color:var(--brass-dim);
  line-height:1; margin-bottom:4px; display:block;
}
.story-card p{ color:var(--paper-dim); font-size:0.98rem; }
.story-attrib{
  margin-top:16px; font-family:var(--font-mono); font-size:0.72rem;
  color:var(--sage); text-transform:uppercase; letter-spacing:0.06em;
}
.story-card-link{
  display:block; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.story-card-link:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.story-card-image{
  aspect-ratio:16/10; overflow:hidden; border-radius:2px;
  margin:-26px -26px 16px; position:relative;
}
.story-card-image img{ width:100%; height:100%; object-fit:cover; display:block; }
.story-empty{
  color:var(--sage); font-family:var(--font-mono); font-size:0.85rem;
  padding:24px 0;
}

/* ---------- buttons / inline links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink);
  background:var(--brass); padding:12px 20px; border-radius:2px;
  border:1px solid var(--brass);
  transition:background .15s ease, color .15s ease;
}
.btn:hover{ background:transparent; color:var(--brass); }
.btn.ghost{ background:transparent; color:var(--paper); border-color:var(--line-strong); }
.btn.ghost:hover{ border-color:var(--brass); color:var(--brass); }

.link-arrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.04em;
  color:var(--brass); display:inline-flex; align-items:center; gap:6px;
}

/* ---------- page hero (interior pages) ---------- */
.page-head{ padding-top:56px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.page-head h1{ font-size:clamp(1.9rem,4vw,2.8rem); margin-top:14px; }
.page-head .body-copy{ margin-top:18px; }

/* ---------- people directory ---------- */
.people-section{ padding-top:42px; }
.people-directory-head{ margin-bottom:18px; }
.people-directory-head h2{ font-size:1.35rem; }
.people-index{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:28px; }
.people-index a{ width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); color:var(--sage); font-family:var(--font-mono); font-size:.72rem; }
.people-index a:hover{ color:var(--brass); border-color:var(--brass); }
.people-directory{ border-top:1px solid var(--line-strong); }
.people-group{ display:grid; grid-template-columns:70px minmax(0, 1fr); border-bottom:1px solid var(--line); }
.people-group h3{ grid-column:1; grid-row:1 / -1; padding:18px 12px 18px 0; color:var(--brass); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.12em; }
.person-row{ grid-column:2; display:grid; grid-template-columns:minmax(180px, 1.25fr) minmax(130px, .9fr) minmax(120px, .7fr) 18px; align-items:center; gap:18px; min-height:62px; padding:12px 0; border-top:1px solid var(--line); transition:color .15s ease; }
.people-group h3 + .person-row{ border-top:0; }
.person-row:hover{ color:var(--brass); }
.person-name{ font-family:var(--font-display); font-size:1.08rem; font-weight:600; }
.person-role,.person-edition{ color:var(--paper-dim); font-size:.82rem; }
.person-edition{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--sage); }
@media (max-width:640px){ .people-group{ grid-template-columns:38px minmax(0, 1fr); } .person-row{ grid-template-columns:minmax(0, 1fr) 18px; gap:8px; padding:15px 0; } .person-role,.person-edition{ grid-column:1; } .person-row > span[aria-hidden]{ grid-column:2; grid-row:1; } }

/* ---------- footer ---------- */
footer.site-footer{
  padding-top:48px; padding-bottom:56px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
}
.footer-col{ min-width:200px; }
.footer-title{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--sage); margin-bottom:10px;
}
.footer-col p, .footer-col a{ font-size:0.85rem; color:var(--paper-dim); display:block; margin-bottom:6px; }
.footer-col a:hover{ color:var(--brass); }
.footer-legend{
  font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-soft);
}
.footer-logo{
  display:block;
  height:22px;
  width:auto;
  margin-top:24px;
  opacity:0.85;
}

/* ---------- generic ---------- */
.stack{ display:flex; flex-direction:column; gap:14px; }
.hr{ height:1px; background:var(--line); border:none; margin:0; }
.center{ text-align:center; }

/* ---------- gallery modal ---------- */
.gallery-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 29, 23, 0.95);
  z-index: 100;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.gallery-modal.open {
  display: flex;
}

.gallery-container {
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 80vh;
}

.gallery-image {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: none;
}

.gallery-image.active {
  display: block;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(198, 161, 91, 0.9);
  color: var(--ink);
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 600;
  border-radius: 2px;
  transition: background 0.15s ease;
  font-size: 18px;
}

.gallery-nav:hover {
  background: var(--brass);
}

.gallery-prev {
  left: -70px;
}

.gallery-next {
  right: -70px;
}

.gallery-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: transparent;
  color: var(--paper);
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}

.gallery-close:hover {
  color: var(--brass);
}

.gallery-caption{
  text-align:center;
  color:var(--paper-dim);
  font-family:var(--font-mono);
  font-size:0.82rem;
  margin:12px 0 0;
  padding:0 20px;
}

.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery-thumb {
  width: 60px;
  height: 60px;
  border: 1px solid var(--line);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
  border-radius: 2px;
}

.gallery-thumb:hover,
.gallery-thumb.active {
  opacity: 1;
  border-color: var(--brass);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--brass);
  padding: 5px 10px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gallery-btn:hover {
  background: transparent;
  color: var(--brass);
  border: 1px solid var(--brass);
}

@media (max-width: 768px) {
  .gallery-nav {
    position: static;
    transform: none;
    margin: 0 8px;
  }
  .gallery-prev, .gallery-next {
    left: auto;
    right: auto;
  }
}

/* ---------- Site search (overlay) ---------- */
.search-trigger{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; margin-left:12px;
  background:none; border:1px solid var(--line-strong); color:var(--paper);
  cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.search-trigger:hover{ color:var(--brass); border-color:var(--brass); }

body.search-lock{ overflow:hidden; }

.search-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(22,32,26,0.92);
  display:flex; align-items:flex-start; justify-content:center;
  padding:80px 20px 20px;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.search-overlay.open{ opacity:1; pointer-events:auto; }

.search-panel{
  width:100%; max-width:640px;
  background:var(--ink); border:1px solid var(--line-strong);
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}

.search-field{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line);
  color:var(--sage);
}
.search-field input{
  flex:1; background:none; border:none; outline:none;
  color:var(--paper); font-family:var(--font-mono); font-size:1rem;
}
.search-field input::placeholder{ color:var(--ink-soft); }
.search-close{
  background:none; border:none; color:var(--sage); font-size:1.4rem;
  line-height:1; cursor:pointer; padding:0 4px;
}
.search-close:hover{ color:var(--brass); }

.search-hint{
  padding:14px 18px; margin:0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-soft);
}

.search-results{
  max-height:60vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.search-results:not(:empty){ border-top:0; }

.search-result{
  display:flex; flex-direction:column; gap:2px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  text-decoration:none; transition:background .12s ease;
}
.search-result:hover, .search-result:focus{ background:rgba(198,161,91,0.08); }
.search-result-kicker{
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass);
}
.search-result-title{ color:var(--paper); font-size:.98rem; }
.search-result-sub{
  font-family:var(--font-mono); font-size:.72rem; color:var(--sage);
}
.search-empty{
  padding:18px; margin:0; color:var(--ink-soft); font-family:var(--font-mono); font-size:.8rem;
}

@media (max-width:640px){
  .search-overlay{ padding:60px 12px 12px; }
}

/* ---------- Collapsible film grids (per edition) ---------- */
.grid-wrap{
  position:relative;
  overflow:hidden;
  transition:max-height .35s ease;
}
.grid-wrap .grid{ margin:0; }
.grid-fade{
  position:absolute; left:0; right:0; bottom:0; height:90px;
  background:linear-gradient(to bottom, transparent, var(--bg) 88%);
  pointer-events:none;
  opacity:1; transition:opacity .25s ease;
}
.grid-wrap.expanded .grid-fade{ opacity:0; }
.grid-toggle{
  display:inline-block;
  margin-top:20px;
  background:none; border:1px solid var(--line-strong); color:var(--paper);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 20px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.grid-toggle:hover{ color:var(--brass); border-color:var(--brass); }
.grid-toggle:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

/* ---------- Poster frames (editions.html) — plain, no film-strip decoration ---------- */
.poster-frame{
  background: transparent;
  border-bottom: none;
}
.poster-frame::before,
.poster-frame::after{
  display:none;
}

.poster-gallery-hint{
  position:absolute; right:10px; bottom:10px;
  background:rgba(15,29,23,0.85); color:var(--brass);
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em;
  padding:5px 10px; border:1px solid var(--brass-dim); border-radius:2px;
  pointer-events:none;
}


/* ---------- Awards ---------- */
.awards-block{
  margin-top:14px;
  border:1px solid var(--brass-dim);
  border-left:3px solid var(--brass);
  background:rgba(198,161,91,0.06);
  padding:12px 16px;
}
.awards-block .awards-heading{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--brass);
  margin:0 0 8px;
}
.awards-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
}
.awards-list li{
  display:flex; align-items:flex-start; gap:8px;
  color:var(--paper); font-size:0.95rem;
}
.awards-list li::before{
  content:"\1F3C6";
  flex-shrink:0; line-height:1.3;
}

@media (max-width:640px){
  .hero{ aspect-ratio:3/4; }
  .hero-media{ position:absolute; inset:0; aspect-ratio:auto; }
  .hero > .shell{ position:absolute; inset:0; padding-top:24px; padding-bottom:28px; display:flex; align-items:flex-end; }
}