/* ==========================================================================
   PASSENGER CINEMA
   Brand: Midnight Green #114C5C · Ivory #FBFAED (from the official logo kit)
   ========================================================================== */

/* --------------------------------------------------------------- tokens - */
:root {
  --ink:            #06202A;
  --midnight:       #114C5C;
  --midnight-2:     #0D3C49;
  --midnight-soft:  #2A6C7D;
  --ivory:          #FBFAED;
  --paper:          #F2EDDB;
  --paper-2:        #E8E1CB;
  --stamp:          #B8402C;
  --ochre:          #D2913A;

  --rule:           color-mix(in srgb, var(--midnight) 22%, transparent);
  --rule-strong:    color-mix(in srgb, var(--midnight) 42%, transparent);
  --rule-dark:      rgba(251, 250, 237, .20);

  /* two typefaces, not three: Fraunces for display, Archivo for everything
     else. The small letterspaced labels that used to be set in a monospace
     are Archivo at 500 now. */
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut:   clamp(1.25rem, 4vw, 3.5rem);
  --maxw:  1320px;
  --readw: 62ch;

  /* height of the sticky masthead — the mobile nav drops from underneath it,
     so change it here and everything follows */
  --headerH: clamp(84px, 7.5vw, 112px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------- reset - */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--midnight);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

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

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--midnight); color: var(--ivory);
  padding: .75rem 1.25rem; font-family: var(--sans); font-weight: 500; font-size: .8rem;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- primitives */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 880px; }

.section { padding-block: clamp(3.25rem, 5vw, 4.5rem); }
.section--tight { padding-block: clamp(2.25rem, 3.2vw, 2.75rem); }

.dark  { background: var(--midnight); color: var(--ivory); }
.dark  { --rule: var(--rule-dark); --rule-strong: rgba(251,250,237,.4); }
.deep  { background: var(--ink);     color: var(--ivory); }
.deep  { --rule: var(--rule-dark); --rule-strong: rgba(251,250,237,.4); }
.ivory { background: var(--ivory);   color: var(--midnight); }

/* labels: the small letterspaced mono used all over the site.
   These hold editable content, so they have to survive someone typing a long
   value into the CMS. Wrap rather than overflow, and never exceed the column. */
.label {
  font-family: var(--sans); font-weight: 500;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.label--muted { opacity: .62; }
.label--stamp { color: var(--stamp); }
/* the stamp red goes muddy on dark grounds, so switch to ochre there */
.dark .label--stamp, .deep .label--stamp, .hero .label--stamp, .ehero .label--stamp { color: var(--ochre); }
/* over photography, muted labels lose the fight: keep them legible */
.hero .label--muted, .ehero .label--muted {
  opacity: .95; color: var(--ochre);
  text-shadow: 0 1px 12px rgba(6,32,42,.85);
}

/* display type */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 60;
  line-height: 1.02;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.75rem, 8.5vw, 6.5rem); }
.d2 { font-size: clamp(2.1rem, 5.4vw, 4rem); }
.d3 { font-size: clamp(1.55rem, 3.2vw, 2.4rem); line-height: 1.08; }
.d4 { font-size: clamp(1.25rem, 2vw, 1.6rem);  line-height: 1.15; letter-spacing: -.01em; }

.lede {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 1vw, 1.65rem);
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -.008em;
  max-width: 34ch;
}
.prose { max-width: var(--readw); }
.prose p { margin-bottom: 1.25em; }
.prose em { font-style: italic; }
.prose a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

.rule { border-top: 1px solid var(--rule); }
.rule-strong { border-top: 1px solid var(--rule-strong); }

/* section heading: label + rule + title */
.shead { display: grid; gap: .8rem; margin-bottom: clamp(1.5rem, 2.4vw, 1.9rem); }
.shead__top {
  display: flex; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--rule-strong); padding-top: .7rem;
}
.shead__top .label { flex: 0 0 auto; }
.shead__top .shead__note { margin-left: auto; text-align: right; }

/* ------------------------------------------------------------------ links */
.link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 500; font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  padding-bottom: .25rem;
  border-bottom: 1px solid currentColor;
  transition: gap .25s var(--ease), opacity .2s;
}
.link:hover { gap: .9rem; }
.link .arw { transition: transform .25s var(--ease); }
.link:hover .arw { transform: translateX(2px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  padding: 1rem 1.7rem;
  background: var(--midnight); color: var(--ivory);
  border: 1px solid var(--midnight);
  cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { background: var(--stamp); border-color: var(--stamp); color: var(--ivory); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--ghost:hover { background: currentColor; color: var(--paper); }
.dark .btn, .deep .btn { background: var(--ivory); color: var(--midnight); border-color: var(--ivory); }
.dark .btn:hover, .deep .btn:hover { background: var(--ochre); border-color: var(--ochre); color: var(--ink); }
.dark .btn--ghost, .deep .btn--ghost { background: transparent; color: var(--ivory); border-color: rgba(251,250,237,.45); }
.dark .btn--ghost:hover, .deep .btn--ghost:hover { background: var(--ivory); color: var(--midnight); border-color: var(--ivory); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ----------------------------------------------------------------- stamps */
.stamp {
  display: inline-block;
  font-family: var(--sans); font-weight: 500; font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .45rem .75rem;
  border: 1.5px solid currentColor;
  color: var(--stamp);
  transform: rotate(-2.2deg);
  opacity: .9;
}
.stamp--ochre { color: var(--ochre); }
.stamp--flat  { transform: none; }
.dark .stamp, .deep .stamp, .hero .stamp, .ehero .stamp { color: var(--ochre); }
.ticket__stub .stamp { color: var(--stamp); }

/* -------------------------------------------------------------- site head */
.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead--onDark {
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  color: var(--ivory);
  border-bottom-color: var(--rule-dark);
}
.masthead__in {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--headerH);
  padding-block: clamp(1rem, 1.6vw, 1.6rem);
}
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; flex: 0 0 auto; }
.brand img { width: clamp(92px, 10vw, 116px); }
.brand__tag {
  display: none;
  font-family: var(--sans); font-weight: 500; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  opacity: .6; padding-left: .85rem; border-left: 1px solid var(--rule);
}
@media (min-width: 900px) { .brand__tag { display: block; } }

/* Archivo sets wider than the monospace it replaced, so the six items no
   longer fitted beside the logo at the narrowest desktop width. The gap and
   the tracking come in a little to buy that space back. */
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.8rem, 1.7vw, 1.9rem); }
.nav a {
  font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; padding: .35rem 0; position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  border-bottom: 1px solid currentColor; transition: right .28s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav a[aria-current="page"] { color: var(--stamp); }
.masthead--onDark .nav a[aria-current="page"] { color: var(--ochre); }

.navToggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--rule-strong); cursor: pointer;
  padding: .5rem .8rem;
  font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
@media (min-width: 1000px) { .navToggle { display: none; } }
@media (max-width: 999px) {
  .nav {
    position: fixed; inset: var(--headerH) 0 auto 0;
    background: var(--midnight); color: var(--ivory);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 1rem var(--gut) 2rem;
    border-bottom: 1px solid var(--rule-dark);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
    max-height: calc(100dvh - var(--headerH)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { width: 100%; padding: .95rem 0; border-bottom: 1px solid rgba(251,250,237,.14); font-size: .82rem; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--ochre); }
}

/* ------------------------------------------------------------------- hero */
.hero { position: relative; background: var(--ink); color: var(--ivory); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
/* the crowd sits right of centre, away from the headline, so hold that side
   when a narrow screen crops the frame */
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 65% center;
  opacity: .52; filter: saturate(.85) contrast(1.03);
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,32,42,.72) 0%, rgba(6,32,42,.35) 38%, rgba(6,32,42,.88) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, rgba(6,32,42,.6) 100%);
}
.hero__in {
  position: relative;
  min-height: min(74vh, 640px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(4rem, 12vh, 7rem) clamp(2rem, 5vh, 3rem);
}
.hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.hero h1 { max-width: 16ch; margin-bottom: 1.5rem; }
.hero__sub { max-width: 46ch; opacity: .88; margin-bottom: 2.25rem; }
.hero__foot { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }

/* grain */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.55'/></svg>");
}

/* A portrait image beside a column of text, used for the film poster on the
   screenings page and the founders photograph on the About page. Each fills
   the white space the other would leave. */
.filmgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 780px) {
  .filmgrid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
.filmgrid__fig { margin: 0; }
.filmgrid__fig img { width: 100%; }
.filmgrid .prose { max-width: none; }

/* ------------------------------------------------------- boarding / ticket */
.ticket {
  position: relative;
  background: var(--ivory); color: var(--midnight);
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--rule-strong);
}
.dark .ticket, .deep .ticket { border-color: transparent; }
@media (min-width: 860px) { .ticket { grid-template-columns: 1.35fr .85fr; } }

.ticket__main { padding: clamp(1.6rem, 3.5vw, 2.75rem); }
.ticket__stub {
  padding: clamp(1.6rem, 3.5vw, 2.75rem);
  background: var(--paper-2);
  display: flex; flex-direction: column; gap: 1.1rem; justify-content: center;
  position: relative;
}
/* perforation */
.ticket__stub::before {
  content: ""; position: absolute; inset-block: 0; left: 0; width: 1px;
  background-image: linear-gradient(var(--rule-strong) 55%, transparent 0);
  background-size: 1px 11px;
}
@media (max-width: 859px) {
  .ticket__stub::before { inset: 0 0 auto 0; width: auto; height: 1px;
    background-image: linear-gradient(90deg, var(--rule-strong) 55%, transparent 0);
    background-size: 11px 1px; }
}
.ticket__row { display: grid; gap: .2rem; }
.ticket__row dt { font-family: var(--sans); font-weight: 500; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.ticket__row dd { margin: 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.ticket__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.1rem; margin: 1.6rem 0 1.8rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: 1.2rem; }

.runorder { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.75rem; }
.runorder li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline;
  padding-bottom: .55rem; border-bottom: 1px dotted var(--rule-strong); }
.runorder time { font-family: var(--sans); font-weight: 500; font-size: .8rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* a smaller button, for places that should not shout */
.btn--sm { padding: .62rem 1.05rem; font-size: .68rem; letter-spacing: .12em; gap: .45rem; }

/* Stay in touch: deliberately compact. It sits at the foot of the page
   and should not compete with the screening above it. */
.stayintouch__lede { font-family: var(--display); font-size: 1.35rem; line-height: 1.25; margin: 0 0 .5rem; }
.stayintouch__p { opacity: .82; font-size: .92rem; max-width: 48ch; margin: 0; }
.stayintouch__row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.1rem 0 0; }
.stayintouch .field input { padding: .62rem .85rem; }

/* email signup: field and button on one line where there is room */
.signup { display: grid; gap: .75rem; }
@media (min-width: 520px) { .signup { grid-template-columns: 1fr auto; align-items: start; } }
.signup .btn { white-space: nowrap; }

/* A single row of photographs you drag or swipe sideways. Full bleed on
   purpose, so it is obvious there is more past the edge. */
.reelwrap { position: relative; }
.reel {
  display: flex; gap: .75rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.5rem,3vw,2.25rem) var(--gut);
  /* without this the first snap point sits one gutter in, so the strip never
     quite returns to the beginning */
  scroll-padding-inline: var(--gut);
  scrollbar-width: none;                 /* moved with the arrows instead */
}
.reel::-webkit-scrollbar { display: none; }

/* the two arrows, sitting over the ends of the strip */
.reelbtn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: var(--ivory); color: var(--midnight);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 14px rgba(17, 76, 92, .16);
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.reelbtn--prev { left: max(.5rem, calc(var(--gut) - 1.5rem)); }
.reelbtn--next { right: max(.5rem, calc(var(--gut) - 1.5rem)); }
.reelbtn:hover { background: #fff; }
.reelbtn:disabled { opacity: 0; pointer-events: none; }
.reelbtn[hidden] { display: none; }
@media (max-width: 600px) { .reelbtn { width: 2.6rem; height: 2.6rem; } }
/* a strip of prints: each photo keeps its own shape, they share a height */
.reel__item {
  margin: 0; flex: 0 0 auto; scroll-snap-align: start;
  max-width: 86vw;
}
.reel__item img {
  height: clamp(210px, 30vw, 330px);
  width: auto; max-width: 100%;
  /* an unloaded image is auto-width, so it measures zero, the strip collapses
     and lazy loading never fires. This keeps a box for it to arrive into and
     is always narrower than the real photograph, so it never crops. */
  min-width: 110px;
  object-fit: cover; display: block;
}
.reel__item .figcap { margin-top: .5rem; }

/* ------------------------------------------------------------- subscribe */
.subscribe {
  display: grid; gap: 1.5rem; align-items: center;
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
@media (min-width: 820px) {
  .subscribe { grid-template-columns: 1fr auto; gap: 2.5rem; }
}

/* --------------------------------------------------------------- pillars */
.pillars { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 780px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem); }
.ivory .pillars .pillar { background: var(--ivory); }
.pillar__n { font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .2em; opacity: .5; display: block; margin-bottom: 1.1rem; }
.pillar h3 { margin-bottom: .6rem; }
.pillar p { margin: 0; font-size: .96rem; opacity: .82; }

/* --------------------------------------------------------------- passport -
   The stamps are SVG, drawn in site.js, so all the box styling that used to
   live here is gone. What is left positions them and sets the ink colour.
   -------------------------------------------------------------------------- */
.passport {
  display: flex; flex-wrap: wrap;
  gap: clamp(.9rem, 2vw, 1.6rem);
  padding-block: 1rem;
}

/* The wrapper exists so the hover postcard has somewhere to live: the SVG
   would otherwise clip it. */
.pstamp-wrap { position: relative; display: inline-block; }

.pstamp {
  --ink: var(--stamp);
  position: relative;
  display: inline-grid; justify-items: center; gap: .18rem;
  padding: .7rem 1rem .6rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--sans); font-weight: 500;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.3;
  border: 2px solid currentColor;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px currentColor;   /* the inner rule of the double frame */
  background-clip: padding-box;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 -.28'/></filter><rect width='240' height='120' fill='white'/><rect width='240' height='120' filter='url(%23r)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' seed='7'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 -.28'/></filter><rect width='240' height='120' fill='white'/><rect width='240' height='120' filter='url(%23r)'/></svg>");
  -webkit-mask-size: 240px 120px;
          mask-size: 240px 120px;
}
.pstamp__n {
  font-weight: 700;
  max-width: 22ch;
  text-align: center;
  overflow-wrap: anywhere;
}
.pstamp em { font-style: normal; opacity: .75; }

/* every stamp sits at its own angle, like a page that has been filling up */
.pstamp-wrap:nth-child(6n+1) .pstamp { transform: rotate(-3.4deg); }
.pstamp-wrap:nth-child(6n+2) .pstamp { transform: rotate(2.1deg)  translateY(3px); }
.pstamp-wrap:nth-child(6n+3) .pstamp { transform: rotate(-1.2deg) translateY(-2px); }
.pstamp-wrap:nth-child(6n+4) .pstamp { transform: rotate(4.1deg); }
.pstamp-wrap:nth-child(6n+5) .pstamp { transform: rotate(-2.6deg) translateY(2px); }
.pstamp-wrap:nth-child(6n+6) .pstamp { transform: rotate(1.4deg)  translateY(-3px); }

/* three ink colours, cycling, so the page looks stamped over time */
.pstamp-wrap:nth-child(3n+2) .pstamp { --ink: #2E6E7E; }
.pstamp-wrap:nth-child(3n+3) .pstamp { --ink: #7A6A2F; }
.deep .pstamp                        { --ink: #E0705C; }
.deep .pstamp-wrap:nth-child(3n+2) .pstamp { --ink: #7FC3D4; }
.deep .pstamp-wrap:nth-child(3n+3) .pstamp { --ink: var(--ochre); }

.pstamp-wrap:hover .pstamp { opacity: .82; transform: rotate(0deg) scale(1.04); }

/* the one we have not been to yet: not stamped, just pencilled in */
.pstamp[data-next="true"] {
  --ink: var(--ochre);
  border-style: dashed;
  box-shadow: none;
  -webkit-mask-image: none; mask-image: none;
  opacity: .9;
}
/* ---- the postcard that appears on hover -------------------------------- */
.pcard {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  width: 168px;
  z-index: 30;
  display: grid; gap: .1rem;
  padding: 8px 8px 10px;
  background: var(--ivory);
  color: var(--midnight);
  box-shadow: 0 2px 3px rgba(6,32,42,.14), 0 18px 34px -14px rgba(6,32,42,.6);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) rotate(-2.5deg) scale(.94);
  transform-origin: bottom center;
  transition: opacity .22s var(--ease), transform .28s var(--ease), visibility .22s;
  pointer-events: none;
}
.pcard__fig { display: block; overflow: hidden; }
.pcard__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pcard__t {
  font-family: var(--display); font-size: .82rem; line-height: 1.2;
  letter-spacing: 0; text-transform: none; margin-top: .45rem;
}
.pcard__n {
  font-family: var(--sans); font-weight: 500; font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; opacity: .55;
}
.pcard::after {
  content: ""; position: absolute; top: 100%; left: 50%; translate: -50% 0;
  border: 6px solid transparent; border-top-color: var(--ivory);
}

/* Hover only. On a touch screen tapping should just follow the link. */
@media (hover: hover) and (pointer: fine) {
  .pstamp-wrap:hover .pcard,
  .pstamp-wrap:focus-within .pcard {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) rotate(-2.5deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pstamp-wrap:hover .pstamp { transform: none; }
  .pcard { transition: opacity .01ms, visibility .01ms; }
}
/* ------------------------------------------------------------ event cards */
.cards { display: grid; gap: clamp(1.5rem, 2.4vw, 2.1rem); }
@media (min-width: 720px)  { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px)  { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

/* Cards are postcards: a photographic print with a white margin, dropped on
   the page at a slight angle. The tilt alternates so a grid of them looks
   placed by hand rather than mechanically rotated. */
.card { display: flex; flex-direction: column; text-decoration: none; }

.card__fig {
  position: relative;
  background: var(--ivory);
  padding: 11px 11px 13px;
  box-shadow:
    0 1px 1px rgba(6,32,42,.10),
    0 10px 26px -12px rgba(6,32,42,.40);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  transform: rotate(-.7deg);
}
.card:nth-child(even) .card__fig { transform: rotate(.8deg); }
.card:nth-child(3n)   .card__fig { transform: rotate(-.35deg); }

.card:hover .card__fig,
.card:focus-visible .card__fig {
  transform: rotate(0deg) translateY(-4px);
  box-shadow:
    0 2px 2px rgba(6,32,42,.10),
    0 20px 40px -14px rgba(6,32,42,.45);
}

.card__fig img,
.card__fig .poster {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--midnight-2);
}

/* the index number sits on the white margin, like a pencilled note */
.card__no {
  position: absolute; right: 14px; bottom: 16px; z-index: 2;
  font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .16em;
  color: var(--midnight); opacity: .45;
}

.card__body { padding-top: 1.15rem; display: grid; gap: .45rem; }
.card__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.card h3 { font-family: var(--display); font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.12; letter-spacing: -.012em; }
.card__dir { font-size: .9rem; opacity: .7; margin: 0; }
.card__beyond { font-size: .88rem; opacity: .78; margin: .35rem 0 0; padding-top: .55rem; border-top: 1px solid var(--rule); }

/* placeholder poster when an event has no photos yet */
.poster {
  display: grid; place-content: center; gap: .6rem; text-align: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(135deg, rgba(251,250,237,.045) 0 2px, transparent 2px 9px),
    linear-gradient(155deg, var(--midnight) 0%, var(--ink) 100%);
  color: var(--ivory);
}
.poster__t { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; max-width: 16ch; margin-inline: auto; }
.poster__n { font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .2em; opacity: .55; text-transform: uppercase; }

/* ---------------------------------------------------------- archive index */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.filters button {
  background: transparent; border: 1px solid var(--rule-strong); cursor: pointer;
  padding: .5rem .8rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.filters button:hover { border-color: var(--midnight); }
.filters button[aria-pressed="true"] { background: var(--midnight); border-color: var(--midnight); color: var(--ivory); }

/* ------------------------------------------------------------ event page  */
.ehero { position: relative; background: var(--ink); color: var(--ivory); overflow: hidden; }
.ehero__media { position: absolute; inset: 0; }
.ehero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.ehero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,32,42,.7) 0%, rgba(6,32,42,.3) 40%, rgba(6,32,42,.92) 100%); }
.ehero__in { position: relative; padding-block: clamp(3.5rem, 10vh, 6rem) clamp(2.25rem, 5vh, 3.5rem);
  min-height: min(62vh, 540px); display: flex; flex-direction: column; justify-content: flex-end; }
.ehero h1 { max-width: 18ch; margin-block: 1.1rem .9rem; }

.emeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.4rem;
  border-block: 1px solid var(--rule); padding-block: 1.5rem; }
.emeta div { display: grid; gap: .3rem; }
.emeta dt { font-family: var(--sans); font-weight: 500; font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.emeta dd { margin: 0; font-family: var(--display); font-size: 1.05rem; line-height: 1.3; }


/* Contributors. A round photograph if there is one, initials if not, so a
   venue with no picture still lines up with a person who has one. */
.credits { list-style: none; display: grid; gap: .1rem; }
.credit {
  display: grid; grid-template-columns: 40px 1fr; gap: .85rem; align-items: center;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.credit:first-child { border-top: 1px solid var(--rule); }
.credit__pic {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; display: grid; place-items: center;
  background: var(--paper-2); color: var(--midnight);
  font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .06em;
}
.dark .credit__pic, .deep .credit__pic { background: var(--midnight-soft); color: var(--ivory); }
.credit__pic--initials { border: 1px solid var(--rule-strong); }
.credit__t { display: grid; gap: .1rem; font-size: .95rem; }
.credit__t b { font-weight: 600; }
.credit__r {
  font-family: var(--sans); font-weight: 500; font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; opacity: .6;
}

/* ---------------------------------------------------------------- gallery */
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
@media (min-width: 760px)  { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery button {
  padding: 0; border: 0; background: var(--midnight-2); cursor: zoom-in; overflow: hidden;
  aspect-ratio: 1; display: block;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .3s; }
.gallery button:hover img { transform: scale(1.05); opacity: .9; }
.gallery button:nth-child(6n+1) { grid-column: span 2; aspect-ratio: 2 / 1; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(6,32,42,.96);
  padding: clamp(1rem, 4vw, 3rem);
  overflow: hidden;
}
/* minmax(0, 1fr) rather than 1fr: a plain 1fr row refuses to shrink below the
   photograph's own height, so tall pictures ran off the screen on desktop. */
.lightbox[data-open="true"] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1rem; }
.lightbox__bar { display: flex; align-items: center; gap: 1rem; color: var(--ivory); }
.lightbox__bar .label { opacity: .7; }
/* flex, not grid: a grid row here sizes itself to the photograph's own height,
   so max-height: 100% on the image had nothing smaller to measure against */
.lightbox__fig {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0; overflow: hidden;
}
.lightbox__fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lightbox__nav { display: flex; justify-content: center; gap: .6rem; }
.lightbox button {
  background: transparent; border: 1px solid rgba(251,250,237,.45); color: var(--ivory); cursor: pointer;
  padding: .6rem 1rem; font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
}
.lightbox button:hover { background: var(--ivory); color: var(--midnight); }
.lightbox__close { margin-left: auto; }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: 1.6rem; }
.field { display: grid; gap: .5rem; }
/* The role questions are injected into a plain wrapper, so they would
   otherwise stack with no gap at all while the rest of the form breathes.
   Long answer boxes need more air than the short fields above them. */
[data-role-questions] { display: grid; gap: 2.4rem; }
.field > label { font-family: var(--sans); font-weight: 500; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.field .hint { font-size: .85rem; opacity: .68; line-height: 1.5; margin: 0; }
.field .req { color: var(--stamp); }
.dark .field .req, .deep .field .req { color: var(--ochre); }

.field input, .field textarea, .field select {
  width: 100%;
  background: var(--ivory);
  border: 1px solid var(--rule-strong);
  padding: .85rem 1rem;
  font-family: var(--sans); font-size: 1rem; line-height: 1.5;
  border-radius: 0;
  transition: border-color .18s, background .18s;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' fill='none' stroke='%23114C5C' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--midnight); outline-offset: 1px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 6%, var(--ivory)); }
.field .err { color: var(--stamp); font-family: var(--sans); font-weight: 500; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.grid2 { display: grid; gap: 1.6rem; }
@media (min-width: 680px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.formNote { font-size: .85rem; opacity: .7; max-width: 52ch; }

.formMsg { display: none; padding: 1.25rem 1.4rem; border: 1px solid var(--rule-strong); font-size: .95rem; }
.formMsg[data-state="ok"]   { display: block; border-color: var(--midnight); background: color-mix(in srgb, var(--midnight) 8%, transparent); }
.formMsg[data-state="err"]  { display: block; border-color: var(--stamp);   background: color-mix(in srgb, var(--stamp) 8%, transparent); }
.formMsg[data-state="mail"] { display: block; border-color: var(--ochre);   background: color-mix(in srgb, var(--ochre) 12%, transparent); }

/* role picker */
.roles { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-bottom: 2rem; }
@media (min-width: 820px) { .roles { grid-template-columns: repeat(2, 1fr); } }
.role { background: var(--ivory); }
.role label { display: block; padding: 1.4rem 1.5rem; cursor: pointer; height: 100%; transition: background .18s; }
.role label:hover { background: var(--paper); }
/* visually hidden but still a real, focusable, screen-reader-visible radio */
.role input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.role input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 4px; }
.role__t { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; }
.role__dot { width: 11px; height: 11px; border: 1.5px solid var(--midnight); border-radius: 50%; flex: 0 0 auto; transform: translateY(-1px); }
.role input:checked ~ span .role__dot { background: var(--stamp); border-color: var(--stamp); box-shadow: inset 0 0 0 2px var(--ivory); }
.role input:checked ~ span { color: var(--midnight); }
.role:has(input:checked) label { background: var(--paper); }
.role:has(input:checked) { box-shadow: inset 3px 0 0 var(--stamp); }
.role h3 { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; }
.role p { margin: 0; font-size: .9rem; opacity: .75; }

/* offer list */
.offer { list-style: none; display: grid; gap: 0; }
.offer li { display: grid; grid-template-columns: 2.2rem 1fr; gap: .75rem; align-items: start;
  padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.offer li:first-child { border-top: 1px solid var(--rule); }
.offer .n { font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .1em; opacity: .5; padding-top: .3rem; }

/* ----------------------------------------------------------------- footer */
.foot { background: var(--ink); color: var(--ivory); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot a { text-decoration: none; }
.foot__grid { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule-dark); }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; } }
.foot__brand img { width: 132px; margin-bottom: 1.25rem; }
.foot__brand p { max-width: 34ch; opacity: .8; font-size: .95rem; }
.foot h4 { font-family: var(--sans); font-weight: 500; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity: .55; margin-bottom: 1rem; }
.foot ul { list-style: none; display: grid; gap: .7rem; }
.foot ul a { font-size: .95rem; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.foot ul a:hover { border-bottom-color: currentColor; }
.foot__base { display: flex; flex-wrap: wrap; gap: .75rem 2rem; padding-top: 2rem; align-items: center; }
.foot__base .label { opacity: .5; }
.foot__base .foot__awards { margin-left: auto; }

/* ------------------------------------------------------------------- misc */
.marquee-rule {
  border-block: 1px solid var(--rule);
  padding-block: .8rem;
  overflow: hidden;
}
.marquee-rule__in { display: flex; gap: 2.5rem; white-space: nowrap; font-family: var(--sans); font-weight: 500;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }

.two-col { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0,.42fr) minmax(0,1.58fr); } }
.two-col--even { grid-template-columns: 1fr; }
@media (min-width: 900px) { .two-col--even { grid-template-columns: 1fr 1fr; } }

.figcap { font-family: var(--sans); font-weight: 500; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .55; margin-top: .7rem; }
/* Turkish needs a dotted capital İ, which the CSS transform cannot give us.
   These captions are written in capitals already and left exactly as typed. */
.figcap--asis { text-transform: none; }

.empty {
  border: 1px dashed var(--rule-strong); padding: clamp(1.75rem, 4vw, 2.75rem);
  text-align: center;
}
.empty p { margin: 0 auto; max-width: 42ch; opacity: .8; }