/* ═══════════════════════════════════════════════════════════════
   Haya Al Badarneh — editorial dossier
   Midnight charcoal ground · warm ivory type · antique gold accents
   Pages: index (work) · about (story) · contact
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:        #151719;
  --ink-2:      #151719;
  --ink-3:      #151719;
  --paper:      #F2EDE3;
  --paper-dim:  #B8B6B0;
  --paper-mute: #B8B6B0;
  --signal:     #BDA47B;
  --rule:       rgba(189,164,123,.18);

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gut: clamp(1.25rem, 5vw, 5rem);
  --max: 1320px;
  --bar: 4.25rem;              /* height of the fixed menu */
  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto is required — without it the width/height attributes win over
   aspect-ratio and every cropped image renders at its intrinsic height. */
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--signal); }

/* The UA's [hidden]{display:none} and a class selector have equal specificity,
   so any `display` set on a class would beat it and leave a "hidden" element
   laid out and swallowing clicks. Make hidden mean hidden. */
[hidden]{ display:none !important; }

::selection{ background:var(--signal); color:var(--ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--paper); color:var(--ink);
  padding:.75rem 1.25rem; font:500 .8rem/1 var(--mono);
}
.skip:focus{ left:1rem; top:1rem; }

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

/* ── film grain ─────────────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:9000; pointer-events:none;
  opacity:.042; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,-1%)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){ .grain{ animation:none; } }

/* ── layout primitives ──────────────────────────────────────── */
/* One content column for the whole site: --max wide, never closer than --gut
   to the viewport edge. Full-bleed bars (menu, section rules) use the same
   edge so everything lines up on one vertical. */
.wrap{ max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(4.5rem,10vw,9rem); position:relative; }
.section--rule::before{
  content:""; position:absolute; top:0;
  left:max(var(--gut), calc((100% - var(--max)) / 2));
  right:max(var(--gut), calc((100% - var(--max)) / 2));
  height:1px; background:var(--rule);
}
/* first section on a page that has no full-bleed intro */
.section--lead{ padding-top:calc(var(--bar) + clamp(3rem,7vw,6rem)); }

/* ═══════════════════ MENU ═══════════════════ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:var(--bar);
  padding:.75rem max(var(--gut), calc((100% - var(--max)) / 2));
  background:rgba(21,23,25,0);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.topbar.is-stuck{
  background:rgba(21,23,25,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--rule);
}

.logo{
  color:var(--paper);
  font-family:var(--serif); font-size:clamp(1.05rem,.95rem + .45vw,1.45rem);
  letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.55rem;
}
.logo::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--signal); flex:none;
  transition:transform .4s var(--ease);
}
.logo:hover::before{ transform:scale(1.5); }

.menu{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2.5rem); }
.menu a{
  font:500 .7rem/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--signal); text-decoration:none;
  padding:.45rem 0; position:relative; transition:color .25s;
}
.menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.menu a:hover{ color:var(--paper); }
.menu a:hover::after{ transform:scaleX(1); }
.menu a.is-here{ color:var(--paper); }
.menu a.is-here::after{ transform:scaleX(1); }

/* email + social icons — header and footer */
.icons{ list-style:none; display:flex; align-items:center; gap:.2rem; margin:0; padding:0; }
.icons a{
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  color:var(--signal); transition:color .25s, background .25s;
}
.icons a:hover, .icons a:focus-visible{ color:var(--paper); background:rgba(189,164,123,.05); }
.icons svg{ width:17px; height:17px; display:block; }
.topbar .menu{ margin-left:auto; }
.icons--bar{ padding-left:clamp(.75rem,1.5vw,1.25rem); border-left:1px solid var(--rule); }
.icons--foot{ margin-inline:-.4rem; }

/* burger — only shown on small screens */
.burger{
  display:none; position:relative; width:2.25rem; height:2.25rem; flex:none;
  margin:0 -.4rem 0 0; padding:0; border:0; background:none; cursor:pointer; color:var(--paper);
}
.burger span{
  position:absolute; left:.5rem; right:.5rem; height:1.5px; background:currentColor;
  transition:transform .35s var(--ease);
}
.burger span:first-child{ top:calc(50% - 4px); }
.burger span:last-child{ top:calc(50% + 3px); }
.topbar.is-open .burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.topbar.is-open .burger span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

@media (max-width:720px){
  .topbar{ gap:.5rem; }
  .topbar.is-open{ background:var(--ink); border-bottom-color:var(--rule); }
  .burger{ display:block; }
  .icons--bar{ margin-left:auto; padding-left:0; border-left:0; gap:0; }
  .icons--bar a{ width:1.9rem; height:1.9rem; }
  .icons--bar svg{ width:16px; height:16px; }

  /* the menu becomes a full-screen panel under the bar */
  .topbar .menu{
    position:absolute; top:100%; left:0; right:0; height:calc(100dvh - var(--bar));
    margin:0; padding:clamp(2rem,8vh,4rem) var(--gut);
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.25rem;
    background:var(--ink);
    opacity:0; visibility:hidden; transform:translateY(-.5rem);
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
  }
  .topbar.is-open .menu{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .3s var(--ease), transform .35s var(--ease), visibility 0s;
  }
  .topbar .menu a{
    font:400 clamp(2.5rem,12vw,3.5rem)/1.15 var(--serif); letter-spacing:-.01em;
    text-transform:none; color:var(--paper); padding:.2rem 0;
  }
  .topbar .menu a::after{ display:none; }
  .topbar .menu a.is-here{ color:var(--signal); font-style:italic; }
  html.menu-open{ overflow:hidden; }
}
@media (max-width:360px){
  .icons--bar a{ width:1.65rem; height:1.65rem; }
  .logo{ font-size:.92rem; }
}

@media (max-width:520px){
  :root{ --bar:3.75rem; }
  .menu{ gap:1rem; }
  .menu a{ font-size:.62rem; letter-spacing:.1em; }
  .logo{ font-size:1rem; }
  .logo::before{ width:6px; height:6px; }
}

/* ── shared bits ────────────────────────────────────────────── */
/* Deliberately not flex: as a flex item the wrapping text jumps to its own
   line and strands the dot above it. Inline keeps the dot leading line one. */
.eyebrow{
  font:500 .7rem/1.7 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-dim); margin:0 0 1.6rem;
}
.dot{
  display:inline-block; vertical-align:middle; margin:-2px .65rem 0 0;
  width:7px; height:7px; border-radius:50%; background:var(--signal);
  box-shadow:0 0 0 0 rgba(189,164,123,.6); animation:ping 2.4s infinite;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(189,164,123,.55)}
  70%{box-shadow:0 0 0 9px rgba(189,164,123,0)}
  100%{box-shadow:0 0 0 0 rgba(189,164,123,0)}
}
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; } }

.rail__label{
  font:500 .7rem/1.4 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-mute); margin:0 0 1.1rem;
}

.head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.head__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.75rem,8vw,5.75rem); line-height:.95;
  letter-spacing:-.015em; margin:0;
}
.head__title em{ font-style:italic; color:var(--signal); }

/* ═══════════════════ HERO ═══════════════════ */
.hero{
  position:relative; isolation:isolate;
  padding:calc(var(--bar) + clamp(1.5rem,4vw,3rem)) var(--gut) clamp(3.5rem,8vw,6.5rem);
  max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto;
}
.hero::after{
  content:""; position:absolute; inset:0 calc(50% - 50vw); pointer-events:none; z-index:-1;
  background:
    radial-gradient(80ch 60ch at 88% 8%, rgba(189,164,123,.04), transparent 70%),
    radial-gradient(60ch 50ch at 0% 100%, rgba(242,237,227,.045), transparent 70%);
}

/* top metadata strip */
.hero__meta{
  display:flex; justify-content:space-between; gap:1rem 2rem; flex-wrap:wrap;
  font:400 .68rem/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mute);
  padding-bottom:1rem; border-bottom:1px solid var(--rule);
}
.hero__meta > span{ display:inline-flex; align-items:center; gap:.6rem; }

/* the name — sized to the viewport so "Al Badarneh" fills the measure */
.hero__name{
  font-family:var(--serif); font-weight:400; margin:clamp(1.5rem,4vw,3rem) 0 0;
  font-size:clamp(3rem,9vw,9rem); line-height:.84; letter-spacing:-.035em;
}
.hero__line{ display:block; }
.hero__line--em{
  font-style:italic; color:var(--signal);
  padding-left:clamp(0rem,9vw,9rem);
}

/* three columns under a hairline */
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,4rem);
  margin-top:clamp(2rem,5vw,4rem); padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--rule);
}
.hero__lede{
  font-family:var(--serif); margin:0;
  font-size:clamp(1.45rem,1.1rem + 1.1vw,2.1rem); line-height:1.22; letter-spacing:-.01em;
  max-width:18ch;
}
.hero__body p{
  color:var(--paper-dim); margin:0 0 1.1rem; max-width:50ch;
  font-size:clamp(.98rem,.94rem + .2vw,1.08rem); line-height:1.65;
}
.hero__body p:last-child{ margin-bottom:0; }

.hero__facts{ margin:0 0 1.75rem; }
.hero__facts div{
  display:grid; grid-template-columns:7.5rem 1fr; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--rule);
}
.hero__facts div:first-child{ padding-top:0; }
.hero__facts dt{
  font:400 .64rem/1.7 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-mute);
}
.hero__facts dd{ margin:0; font-size:.95rem; color:var(--paper); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; }

@media (max-width:1000px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero__lede{ grid-column:1 / -1; max-width:24ch; }
}
@media (max-width:640px){
  .hero__meta > .hero__meta-mid{ display:none; }
  .hero__name{ font-size:clamp(2.8rem,13vw,4.5rem); }
  .hero__grid{ grid-template-columns:minmax(0,1fr); }
  .hero__line--em{ padding-left:0; }
}

.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  font:500 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:1.05rem 1.9rem;
  border:1px solid var(--signal); border-radius:999px;
  color:var(--ink); background:var(--signal);
  transition:background .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.btn i{ font-style:normal; transition:transform .3s var(--ease); }
.btn:hover{ background:var(--signal); border-color:var(--paper); gap:1.1rem; }
.btn:hover i{ transform:translateX(2px); }
.btn--ghost{ background:transparent; border-color:var(--rule); color:var(--signal); }
.btn--ghost:hover{ background:transparent; border-color:var(--paper); }

/* ═══════════════════ FILMS ═══════════════════ */
.films{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.75rem,4vw,3.25rem);
}
.film__link{ display:block; text-decoration:none; position:relative; }

/* the 16:9 still */
.film__shot{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  background:var(--ink-2);
  outline:1px solid var(--rule); outline-offset:-1px;
}
.film__shot img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  filter:grayscale(.45) contrast(1.06) brightness(.94);
  transition:filter .7s var(--ease), transform .9s var(--ease);
}
.film__link:hover .film__shot img,
.film__link:focus-visible .film__shot img{ filter:none; transform:scale(1.04); }
.film__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(21,23,25,.5), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
.film__link:hover .film__shot::after{ opacity:1; }

/* placeholder shown until the real still is dropped in */
.film__shot--empty{
  display:grid; place-content:center; gap:.7rem; text-align:center;
  padding:1.5rem; outline-style:dashed; outline-color:rgba(189,164,123,.2);
  background:
    repeating-linear-gradient(45deg,
      rgba(242,237,227,.022) 0 12px, transparent 12px 24px), var(--ink-2);
}
.film__slot{
  font:500 .66rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--signal);
}
.film__slotfile{
  font:400 .66rem/1.5 var(--mono); letter-spacing:.04em;
  color:var(--paper-mute); word-break:break-all;
}

.film__bar{
  display:grid; align-items:baseline;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:clamp(.75rem,2vw,1.4rem);
  padding-top:1.1rem;
}
.film__no{
  font:500 .68rem/1 var(--mono); letter-spacing:.1em; color:var(--paper-mute);
}
.film__title{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(1.45rem,1.1rem + 1.5vw,2.4rem); line-height:1.05;
  letter-spacing:-.015em;
  background-image:linear-gradient(var(--signal),var(--signal));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease);
}
.film__link:hover .film__title{ background-size:100% 1px; }
.film__year{ font:500 .8rem/1 var(--mono); letter-spacing:.08em; color:var(--signal); }
.film__arrow{
  font-size:1.05rem; color:var(--paper-mute);
  transition:color .35s var(--ease), transform .35s var(--ease);
}
.film__link:hover .film__arrow{ color:var(--paper); transform:translate(3px,-3px); }

@media (max-width:760px){ .films{ grid-template-columns:minmax(0,1fr); } }

/* ═══════════════════ CARDS (reports & interviews) ═══════════════════ */
/* one row of five; below 1000px the row scrolls sideways instead of wrapping */
.cards{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.card{
  background:var(--ink); padding:clamp(1.4rem,2vw,1.9rem);
  text-decoration:none; display:flex; flex-direction:column; gap:.65rem;
  min-height:260px; position:relative; overflow:hidden;
  transition:background .35s var(--ease);
}
.card::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--signal); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.card:hover{ background:var(--ink-3); }
.card:hover::after{ transform:scaleX(1); }
@media (max-width:1000px){
  .cards{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(240px,40%);
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
  }
  .card{ scroll-snap-align:start; }
}
@media (max-width:600px){ .cards{ grid-auto-columns:78%; } }

.card__tag{
  font:500 .62rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal);
}
.card h3{
  font-family:var(--serif); font-weight:400; margin:0;
  font-size:clamp(1.3rem,1.1rem + .5vw,1.6rem); line-height:1.12; letter-spacing:-.01em;
}
.card p{ margin:0; font-size:.88rem; color:var(--paper-dim); line-height:1.55; }
.card__go{
  margin-top:auto; padding-top:1.1rem;
  font:500 .66rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-dim); display:inline-flex; align-items:center; gap:.45rem;
  transition:color .3s var(--ease);
}
.card:hover .card__go{ color:var(--paper); }
.card__go i{ font-style:normal; transition:transform .3s var(--ease); }
.card:hover .card__go i{ transform:translate(3px,-3px); }


/* ═══════════════════ PRESS ═══════════════════ */
.press{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.press li{ border-bottom:1px solid var(--rule); }
.press a{
  display:grid; grid-template-columns:minmax(150px,.3fr) minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2.5rem); align-items:center;
  padding:1.4rem clamp(.5rem,2vw,1.25rem); text-decoration:none;
  transition:background .3s var(--ease), padding-left .4s var(--ease);
}
.press a:hover{ background:rgba(189,164,123,.04); padding-left:clamp(1.2rem,3vw,2.25rem); }
.press__outlet{
  font:500 .68rem/1.3 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--signal);
}
.press__title{
  font-family:var(--serif); font-size:clamp(1.1rem,1rem + .55vw,1.5rem); line-height:1.25;
}
.press__go{ opacity:.3; transition:opacity .3s, transform .3s var(--ease); }
.press a:hover .press__go{ opacity:1; transform:translate(3px,-3px); }
@media (max-width:640px){
  .press a{ grid-template-columns:minmax(0,1fr) auto; row-gap:.4rem; }
  .press__outlet{ grid-column:1 / -1; }
}

/* ═══════════════════ ABOUT — prose ═══════════════════ */
.wrap--split{
  display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,6rem);
}
.rail{ position:sticky; top:calc(var(--bar) + 1.5rem); align-self:start; }
.rail__img{ margin:0; }
.rail__img img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(1) contrast(1.1); transition:filter .7s var(--ease);
}
.rail__img:hover img{ filter:grayscale(0) contrast(1); }
.rail__img figcaption{
  font:400 .64rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--paper-mute); margin-top:.8rem;
}
@media (max-width:860px){
  .wrap--split{ grid-template-columns:1fr; }
  .rail{ position:static; }
  .rail__img{ display:none; }
}

.prose p{ margin:0 0 1.5rem; max-width:64ch; color:var(--paper-dim); }
.prose em{ font-family:var(--serif); font-style:italic; font-size:1.1em; color:var(--paper); }
.prose__open{
  font-family:var(--serif); font-size:clamp(1.45rem,1.1rem + 1.4vw,2.15rem);
  line-height:1.3; color:var(--paper) !important; letter-spacing:-.008em;
  margin-bottom:2rem !important;
}
.prose__open em{ font-size:1em; }

.pull{
  margin:3rem 0 0; padding:1.75rem 0 0; max-width:60ch;
  border-top:1px solid var(--rule);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,1rem + 1vw,1.75rem); line-height:1.4;
  color:var(--paper); position:relative;
}
.pull::before{
  content:"“"; position:absolute; top:.6rem; left:-.65em;
  font-family:var(--serif); font-size:4rem; color:var(--signal); line-height:1;
}
@media (max-width:640px){ .pull::before{ display:none; } }

.facts{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.5rem;
  border-top:1px solid var(--rule); padding-top:1.75rem;
}
.facts li{ font-size:.9rem; color:var(--paper); }
.facts span{
  display:block; font:500 .64rem/1 var(--mono); letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper-mute); margin-bottom:.5rem;
}

/* ═══════════════════ AWARDS ═══════════════════ */
/* BAFTA spans two so the 7 awards fill an 8-cell grid with no gap */
.awards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule);
}
.awards li{
  background:var(--ink); padding:1.6rem clamp(1.1rem,2.5vw,1.6rem);
  display:flex; flex-direction:column; gap:.45rem; min-height:130px;
  transition:background .35s var(--ease);
}
.awards li:hover{ background:var(--ink-3); }
.awards li:first-child{ grid-column:span 2; }
.awards li:first-child b{ font-size:1.85rem; }
.awards b{ font-family:var(--serif); font-weight:400; font-size:1.4rem; line-height:1.1; }
.awards span{
  font:400 .68rem/1.4 var(--mono); letter-spacing:.06em; color:var(--paper-mute);
  margin-top:auto;
}
@media (max-width:900px){ .awards{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){
  .awards{ grid-template-columns:minmax(0,1fr); }
  .awards li:first-child{ grid-column:span 1; }
}

/* ═══════════════════ GALLERY ═══════════════════ */
.gallery{
  display:grid; gap:clamp(.4rem,1vw,.85rem);
  grid-template-columns:repeat(4,1fr);
  padding-inline:var(--gut); max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto;
}
.g{ margin:0; }
.g button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  position:relative; overflow:hidden;
}
.g img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:grayscale(.82) contrast(1.08) brightness(.9);
  transition:filter .6s var(--ease), transform .9s var(--ease);
}
.g button:hover img, .g button:focus-visible img{ filter:none; transform:scale(1.045); }
.g button::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(189,164,123,.1);
  transition:box-shadow .4s var(--ease);
}
.g button:hover::after{ box-shadow:inset 0 0 0 1px var(--signal); }
.g--tall{ grid-row:span 2; }
.g--tall img{ aspect-ratio:3/6.15; }
.g--wide{ grid-column:span 2; }
.g--wide img{ aspect-ratio:6.1/4; }
@media (max-width:900px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .g--tall{ grid-row:span 1; }
  .g--tall img{ aspect-ratio:3/4; }
  .g--wide{ grid-column:span 2; }
  .g--wide img{ aspect-ratio:16/9; }
}

/* ═══════════════════ CONTACT ═══════════════════ */
.contact{ text-align:center; }
.contact .rail__label{ margin-bottom:1.5rem; }
.contact__title{
  font-family:var(--serif); font-weight:400; margin:0 0 1.25rem;
  font-size:clamp(2.2rem,1.4rem + 4.4vw,5rem); line-height:1; letter-spacing:-.02em;
}
.contact__title em{ font-style:italic; color:var(--signal); }
.contact__body{ max-width:44ch; margin:0 auto 2.75rem; color:var(--paper-dim); }
.contact__mail{
  display:inline-block; font-family:var(--serif);
  font-size:clamp(1.3rem,1rem + 1.6vw,2.4rem); text-decoration:none;
  padding-bottom:.2rem; background-image:linear-gradient(var(--signal),var(--signal));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease), color .45s var(--ease);
}
.contact__mail:hover{ background-size:100% 1px; color:var(--signal); }

/* contact.html is short — let it fill the viewport so the footer sits low */
.page--contact{
  min-height:calc(100svh - var(--bar));
  display:flex; flex-direction:column; justify-content:center;
}

.social{
  list-style:none; display:flex; justify-content:center; flex-wrap:wrap;
  gap:clamp(1rem,3vw,2.5rem); margin:3rem 0 0; padding:0;
}
.social a{
  font:500 .68rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal); text-decoration:none; transition:color .3s;
}
.social a:hover{ color:var(--paper); }

/* ═══════════════════ FOOTER ═══════════════════ */
.foot{ border-top:1px solid var(--rule); padding-block:2.25rem; }
.foot__in{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap;
}
.foot p, .foot a{
  margin:0; font:400 .68rem/1.5 var(--mono); letter-spacing:.08em;
  color:var(--paper-mute); text-decoration:none;
}
.foot__top:hover{ color:var(--paper); }

/* ═══════════════════ LIGHTBOX ═══════════════════ */
.lb{
  --paper:      #F2EDE3;
  --paper-dim:  #B8B6B0;
  --paper-mute: #B8B6B0;
  --rule:       rgba(189,164,123,.2);
  position:fixed; inset:0; z-index:8000;
  background:rgba(21,23,25,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:clamp(1rem,5vw,4rem);
  opacity:0; transition:opacity .35s var(--ease);
}
.lb.is-open{ opacity:1; }
.lb__fig{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:1rem; }
.lb__fig img{
  max-width:100%; max-height:78svh; object-fit:contain; margin-inline:auto;
  transform:scale(.97); opacity:0; transition:transform .45s var(--ease), opacity .35s;
}
.lb.is-open .lb__fig img{ transform:none; opacity:1; }
.lb__fig figcaption{
  text-align:center; font:400 .7rem/1.5 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-dim);
}
.lb__close,.lb__nav{
  position:absolute; background:none; border:1px solid var(--rule);
  color:var(--paper); cursor:pointer; border-radius:999px;
  display:grid; place-items:center;
  transition:background .25s, border-color .25s;
}
.lb__close:hover,.lb__nav:hover{ background:rgba(189,164,123,.1); border-color:var(--signal); }
.lb__close{ top:1.1rem; right:1.1rem; width:2.6rem; height:2.6rem; font-size:.9rem; }
.lb__nav{ top:50%; transform:translateY(-50%); width:2.9rem; height:2.9rem; font-size:1.7rem; line-height:1; padding-bottom:.2rem; }
.lb__nav--prev{ left:1.1rem; }
.lb__nav--next{ right:1.1rem; }

body.lb-open{ overflow:hidden; }

/* ═══════════════════ REVEALS ═══════════════════ */
.r{ opacity:0; transform:translateY(22px); animation:rise .95s var(--ease) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .r{ animation:none; opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ transition-duration:.01ms !important; }
}