/* ==========================================================================
   THE ECHO PROJECT
   --------------------------------------------------------------------------
   One stylesheet for the whole site. No inherited rules, no overrides, no
   competing palettes. Everything the site needs is defined here once.

   The design is an archive: dense tiling, hairline gutters, hard edges, and a
   cinematic overlay above every image. The photography carries the pages and
   the type stays out of its way.

   Contents
     1.  Tokens
     2.  Reset and base
     3.  Typography
     4.  Buttons
     5.  Masthead
     6.  Cinematic overlay
     7.  Ambient echo rings
     8.  Featured banner
     9.  Filter bar
     10. Archive grid
     11. Status markers
     12. Strand index
     13. Interior pages
     14. Single film and story
     15. Forms and contact
     16. Statement band
     17. Close section
     18. Footer
     19. Story map
     20. Reveals and motion
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* type */
  --font-title:'Fraunces',Georgia,serif;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;

  /* rhythm */
  --edge:clamp(14px,2.4vw,30px);
  --gutter:1px;

  /* surfaces */
  --bg:#0A0A0A;
  --bg-raised:#141312;
  --line:rgba(242,238,231,.14);
  --line-strong:rgba(242,238,231,.24);

  /* text */
  --fg:#B8B3AC;
  --fg-strong:#F2EEE7;
  --fg-mute:#8C8780;
  --fg-faint:#807A72;

  /* brand */
  --accent:#E08348;
  --accent-hi:#F29A62;
  --accent-on:#0A0A0A;
  --teal:#2F7A83;

  /* recording light */
  --rec:#E5484D;
  --rec-rgb:229,72,77;

  /* text over photography */
  --on-media:#F7F4EF;
  --on-media-mute:#C6C0B7;

  /* scrims */
  --scrim-feature:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.05) 38%,rgba(10,10,10,.94) 100%);
  --scrim-tile:linear-gradient(180deg,rgba(10,10,10,.15) 0%,transparent 34%,rgba(10,10,10,.9) 100%);
  --scrim-statement:linear-gradient(90deg,rgba(10,10,10,.93) 0%,rgba(10,10,10,.7) 55%,rgba(10,10,10,.4) 100%);

  /* overlay defaults, overridable per frame */
  --tint:.38;
  --grain:.10;

  /* the scissors mark used by the post production badge */
  --scissors:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E");
}



/* --------------------------------------------------------------------------
   TOKEN GUARD
   The content plugin ships a stylesheet with its own :root block carrying the
   previous design's palette. If it loads, whichever file WordPress prints last
   wins, and the site ends up half one design and half the other.

   Declaring the tokens again here, on a selector with higher specificity than
   :root, means this theme's values apply no matter which file loads last.
   html has the same specificity as :root but comes later in this file, so it
   settles the question outright.
   -------------------------------------------------------------------------- */
html{
  --bg:#0A0A0A;
  --bg-raised:#141312;
  --bg-soft:#141312;
  --card:#141312;
  --line:rgba(242,238,231,.14);
  --fg:#B8B3AC;
  --fg-strong:#F2EEE7;
  --fg-mute:#8C8780;
  --fg-faint:#807A72;
  --accent:#E08348;
  --accent-hi:#F29A62;
  --accent-on:#0A0A0A;
  --teal:#2F7A83;
  --teal-light:#3A8B93;
  --rust:#E08348;
  --rust-light:#F29A62;
  --cream:#F2EEE7;
  --cream-dim:#B8B3AC;
  --ink:#0A0A0A;
  --stone:#8C8780;
  /* the old design was built on pills and large radii; this one is not */
  --r-lg:0px;
  --r-md:0px;
  --r-sm:0px;
  --r-pill:0px;
}

/* --------------------------------------------------------------------------
   2. RESET AND BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}

/* skip link, for keyboard users */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--accent);color:var(--accent-on);
  padding:12px 20px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:0}
.screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.kicker{
  display:block;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.lbl{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-faint);
}


/* --------------------------------------------------------------------------
   4. BUTTONS
   Colours are literal rather than inherited, so a button can never end up
   unreadable because something upstream changed a variable.
   -------------------------------------------------------------------------- */
.btn{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-ui);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

/* primary */
.btn-fill{background:#E08348;border-color:#E08348;color:#0A0A0A;font-weight:600}
.btn-fill:hover,.btn-fill:focus-visible{background:#F29A62;border-color:#F29A62;color:#0A0A0A}

/* outlined, over photography */
.btn-line{background:transparent;border-color:#F7F4EF;color:#F7F4EF}
.btn-line:hover,.btn-line:focus-visible{background:#F7F4EF;border-color:#F7F4EF;color:#0A0A0A}

/* outlined, on the page */
.btn-ink{background:transparent;border-color:#807A72;color:#F2EEE7}
.btn-ink:hover,.btn-ink:focus-visible{background:#F2EEE7;border-color:#F2EEE7;color:#0A0A0A}

.btn:focus-visible{outline:2px solid #E08348;outline-offset:2px}


/* --------------------------------------------------------------------------
   5. MASTHEAD
   -------------------------------------------------------------------------- */
.mast{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:52px;padding:0 var(--edge);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.mast-brand{display:flex;align-items:center;gap:9px;flex:none}
.mast-logo{height:26px;width:auto;flex:none}
.mast-name{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-strong);white-space:nowrap;
}
.mast-nav{display:flex;gap:22px;align-items:center;overflow-x:auto;scrollbar-width:none}
.mast-nav::-webkit-scrollbar{display:none}
.mast-nav a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-mute);white-space:nowrap;
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.mast-nav a:hover,.mast-nav a[aria-current]{color:var(--fg-strong);border-bottom-color:var(--accent)}
.mast-act{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-strong);
  border:1px solid var(--line);
  padding:8px 15px;
  transition:background .2s ease,color .2s ease;
}
.mast-act:hover{background:var(--fg-strong);color:var(--bg)}
.mast-toggle{
  display:none;background:none;border:1px solid var(--line);
  color:var(--fg-strong);padding:8px 14px;cursor:pointer;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
@media(max-width:820px){
  .mast-nav{
    display:none;
    position:absolute;top:52px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);
    padding:8px var(--edge) 16px;
  }
  .mast-nav.open{display:flex}
  .mast-nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .mast-toggle{display:block}
  .mast-act{display:none}
  .mast-name{display:none}
}


/* --------------------------------------------------------------------------
   6. CINEMATIC OVERLAY
   The wash sits above the photograph, so an uploaded still is graded by it.
   Strength is one value, --tint, from 0 to 1.
   -------------------------------------------------------------------------- */
.media{position:relative;overflow:hidden;isolation:isolate;background:var(--bg-raised)}
.media > img,
.media > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.media > .grade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:var(--tint);
  mix-blend-mode:color;
  transition:opacity .45s ease;
}
.media > .grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:var(--grain);
  mix-blend-mode:overlay;
  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='0.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.media > *:not(img):not(video):not(.grade):not(.grain){position:relative;z-index:4}

/* Before a photograph is uploaded the grade paints as a flat wash, so the
   frame still reads as a cinematic plate rather than an empty box.

   This uses a plain class rather than :not(:has(img)), because some CSS
   minifiers do not understand :has() and will silently drop every rule after
   it, which leaves most of the site unstyled. The class is added by the
   templates, which already know whether an image exists. */
.media.is-empty > .grade{mix-blend-mode:normal;opacity:1}
.media.is-empty > .grain{opacity:calc(var(--grain) * 1.5)}

/* Ten lighting situations. Each is a different key position and warmth, so no
   two frames repeat, while the shared teal and orange hold them together. */
.grade-a > .grade{background:
  radial-gradient(62% 50% at 76% 16%,rgba(224,131,72,.40) 0%,rgba(224,131,72,.17) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(152deg,rgba(13,59,66,.70) 0%,rgba(31,92,99,.55) 52%,rgba(13,59,66,.67) 100%)}
.grade-b > .grade{background:
  radial-gradient(70% 56% at 16% 62%,rgba(244,178,120,.34) 0%,rgba(244,178,120,.14) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(118deg,rgba(13,59,66,.74) 0%,rgba(31,92,99,.58) 52%,rgba(13,59,66,.70) 100%)}
.grade-c > .grade{background:
  radial-gradient(90% 72% at 50% 20%,rgba(47,122,131,.30) 0%,rgba(47,122,131,.13) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(170deg,rgba(13,59,66,.80) 0%,rgba(31,92,99,.62) 52%,rgba(13,59,66,.76) 100%)}
.grade-d > .grade{background:
  radial-gradient(52% 42% at 44% 58%,rgba(193,98,44,.46) 0%,rgba(193,98,44,.19) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(140deg,rgba(13,59,66,.66) 0%,rgba(31,92,99,.51) 52%,rgba(13,59,66,.63) 100%)}
.grade-e > .grade{background:
  radial-gradient(66% 53% at 26% 18%,rgba(224,131,72,.38) 0%,rgba(224,131,72,.16) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(196deg,rgba(31,92,99,.68) 0%,rgba(31,92,99,.53) 52%,rgba(13,59,66,.65) 100%)}
.grade-f > .grade{background:
  radial-gradient(78% 62% at 50% 82%,rgba(244,178,120,.32) 0%,rgba(244,178,120,.13) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(10deg,rgba(13,59,66,.76) 0%,rgba(31,92,99,.59) 52%,rgba(13,59,66,.72) 100%)}
.grade-g > .grade{background:
  radial-gradient(46% 37% at 84% 74%,rgba(193,98,44,.44) 0%,rgba(193,98,44,.18) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(128deg,rgba(13,59,66,.72) 0%,rgba(31,92,99,.56) 52%,rgba(13,59,66,.68) 100%)}
.grade-h > .grade{background:
  radial-gradient(54% 43% at 92% 40%,rgba(224,131,72,.28) 0%,rgba(224,131,72,.12) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(160deg,rgba(31,92,99,.74) 0%,rgba(31,92,99,.58) 52%,rgba(13,59,66,.70) 100%)}
.grade-i > .grade{background:
  radial-gradient(74% 59% at 58% 88%,rgba(224,131,72,.30) 0%,rgba(224,131,72,.13) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(186deg,rgba(13,59,66,.78) 0%,rgba(31,92,99,.61) 52%,rgba(13,59,66,.74) 100%)}
.grade-j > .grade{background:
  radial-gradient(44% 35% at 68% 28%,rgba(244,178,120,.48) 0%,rgba(244,178,120,.20) 38%,rgba(31,92,99,0) 76%),
  linear-gradient(146deg,rgba(13,59,66,.82) 0%,rgba(31,92,99,.64) 52%,rgba(13,59,66,.78) 100%)}


/* --------------------------------------------------------------------------
   7. AMBIENT ECHO RINGS
   Ripples spreading like sound, drawn from the concentric arcs in the mark.
   Position, size and count are set per section by echo.js, so no two sections
   repeat. The field is inset and masked so a ring always fades before it can
   reach an edge and be clipped.
   -------------------------------------------------------------------------- */
.has-rings{position:relative;overflow:hidden;isolation:isolate}
.has-rings > *:not(.ringfield){position:relative;z-index:2}
.ringfield{
  position:absolute;inset:-8%;z-index:0;
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);
}
.ringfield .ring{
  position:absolute;border-radius:50%;
  border:1px solid var(--ring-colour,rgba(47,122,131,.55));
  opacity:0;transform:translate(-50%,-50%);
  animation:ripple 8s ease-out infinite;
  will-change:width,height,opacity;
}
@keyframes ripple{
  0%  {width:0;height:0;opacity:0}
  10% {opacity:.34}
  70% {opacity:.09}
  100%{width:var(--ring-size,280px);height:var(--ring-size,280px);opacity:0}
}


/* --------------------------------------------------------------------------
   8. FEATURED BANNER
   -------------------------------------------------------------------------- */
.feature{position:relative;height:clamp(420px,74vh,760px);overflow:hidden;border-bottom:1px solid var(--line)}
.feature > .media{position:absolute;inset:0}
.feature-scrim{position:absolute;inset:0;z-index:5;background:var(--scrim-feature)}
.feature-body{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:var(--edge);
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.feature-tags{
  display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-media-mute);
}
.feature-tags .lead{color:var(--accent)}
.feature h1{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(34px,6.4vw,88px);line-height:.94;letter-spacing:-.02em;
  color:var(--on-media);max-width:16ch;
}
.feature p{
  margin-top:14px;max-width:52ch;
  color:var(--on-media-mute);font-size:14px;line-height:1.6;
}
.feature-actions{display:flex;gap:10px;flex-wrap:wrap}


/* --------------------------------------------------------------------------
   9. FILTER BAR
   -------------------------------------------------------------------------- */
.filters{
  position:sticky;top:52px;z-index:70;
  display:flex;align-items:center;gap:8px;
  height:46px;padding:0 var(--edge);
  background:var(--bg);border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.filters .lbl{margin-right:4px;white-space:nowrap}
.filters .sep{width:1px;height:18px;background:var(--line);margin-inline:6px;flex:none}
.chip{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 13px;
  border:1px solid var(--line);border-radius:0;
  color:var(--fg-mute);background:none;
  cursor:pointer;white-space:nowrap;
  transition:color .18s ease,border-color .18s ease;
}
.chip:hover{color:var(--fg-strong);border-color:var(--fg-faint)}
.chip[aria-pressed="true"]{background:var(--fg-strong);border-color:var(--fg-strong);color:var(--bg)}
.filters .count{
  margin-left:auto;padding-left:14px;white-space:nowrap;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
}


/* --------------------------------------------------------------------------
   10. ARCHIVE GRID
   -------------------------------------------------------------------------- */
.archive-note{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:16px var(--edge);
  background:var(--bg-raised);border-bottom:1px solid var(--line);
}
.archive-note strong{font-family:var(--font-title);font-size:15px;color:var(--fg-strong)}
.archive-note p{color:var(--fg-mute);font-size:12.5px;max-width:70ch}

.film-grid{
  display:grid;
  grid-template-columns:repeat(var(--cols,4),1fr);
  gap:var(--gutter);
  background:var(--line);
}
@media(max-width:1180px){.film-grid{--cols:3}}
@media(max-width:760px){.film-grid{--cols:2}}
@media(max-width:430px){.film-grid{--cols:1}}

.tile{
  position:relative;display:block;overflow:hidden;isolation:isolate;
  aspect-ratio:4/5;background:var(--bg-raised);
  transition:opacity .3s ease;
}
.tile.wide{grid-column:span 2;aspect-ratio:8/5}
@media(max-width:430px){.tile.wide{grid-column:span 1;aspect-ratio:4/5}}
.tile-scrim{position:absolute;inset:0;z-index:6;background:var(--scrim-tile);transition:opacity .4s ease}
.tile:hover .tile-scrim{opacity:.88}
.tile-body{position:absolute;left:0;right:0;bottom:0;z-index:7;padding:16px 15px 15px}
.tile-kind{
  display:block;margin-bottom:7px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.tile h3{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(16px,1.35vw,21px);line-height:1.1;letter-spacing:-.01em;
  color:var(--on-media);
  /* Fraunces redraws itself sturdier at small sizes; pinning the optical
     size keeps the elegant display cut the heroes use, so every title on
     the site speaks with one voice. */
  font-optical-sizing:none;
  font-variation-settings:'opsz' 84;
}
.tile-desc{
  margin:6px 0 10px;max-width:34ch;
  color:var(--on-media-mute);font-size:13px;line-height:1.5;
}
.tile-meta{
  margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-media-mute);
}
.tile-bar{
  position:absolute;left:0;bottom:0;height:2px;width:0;z-index:8;
  background:var(--accent);
  transition:width .7s cubic-bezier(.2,.7,.3,1);
}
.tile:hover .tile-bar{width:100%}
.tile.upcoming .tile-kind{color:var(--fg-faint)}
.tile.upcoming h3{color:var(--on-media-mute)}
.tile[hidden]{display:none}

/* the invitation tile, which sits in the grid while the archive is small */
.tile-invite{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--bg-raised);aspect-ratio:4/5;padding:26px;
}
.tile-invite .inner span{
  display:block;margin-bottom:10px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.tile-invite .inner h3{
  font-family:var(--font-title);font-weight:600;
  font-size:20px;line-height:1.15;color:var(--fg-strong);margin-bottom:10px;
}
.tile-invite .inner p{
  color:var(--fg-mute);font-size:12.5px;line-height:1.55;
  max-width:26ch;margin:0 auto 16px;
}


/* --------------------------------------------------------------------------
   11. STATUS MARKERS
   Each production stage carries its own marker, escalating in urgency so the
   archive stays scannable.
   -------------------------------------------------------------------------- */
.status{
  position:absolute;top:0;left:0;z-index:9;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 12px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--bg);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* in discussion: nothing committed yet, so the dot is hollow */
.status.is-discussion{color:var(--fg-faint)}
.status.is-discussion::before{
  content:'';width:6px;height:6px;border-radius:50%;
  border:1px solid var(--fg-faint);
}

/* in development: taking shape */
.status.is-development{color:var(--fg-mute)}
.status.is-development::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--fg-mute);
}

/* filming now: a camera recording light */
.status.is-filming{color:var(--rec)}
.status.is-filming::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--rec);
  box-shadow:0 0 0 0 rgba(var(--rec-rgb),.65);
  animation:rec 1.6s ease-out infinite;
}
@keyframes rec{
  0%  {box-shadow:0 0 0 0 rgba(var(--rec-rgb),.6);opacity:1}
  70% {box-shadow:0 0 0 6px rgba(var(--rec-rgb),0);opacity:.55}
  100%{box-shadow:0 0 0 0 rgba(var(--rec-rgb),0);opacity:1}
}

/* post production: being cut */
.status.is-post{color:var(--accent)}
.status.is-post::before{
  content:'';width:11px;height:11px;flex:none;
  background-color:var(--accent);
  -webkit-mask:var(--scissors) center/contain no-repeat;
          mask:var(--scissors) center/contain no-repeat;
  transform-origin:50% 70%;
  animation:snip 1.9s ease-in-out infinite;
}
@keyframes snip{
  0%,100%{transform:rotate(0deg);opacity:1}
  45%,55%{transform:rotate(-16deg);opacity:.6}
}


/* --------------------------------------------------------------------------
   12. STRAND INDEX
   A text index rather than picture cards, so each description has room to say
   what belongs in that strand.
   -------------------------------------------------------------------------- */
.band{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding:var(--edge) var(--edge) 18px;
  border-top:1px solid var(--line);
}
.band h2{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(20px,2.3vw,32px);letter-spacing:-.01em;color:var(--fg-strong);
}
.band p{color:var(--fg-mute);font-size:13.5px;max-width:56ch}
.band .more{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-mute);border-bottom:1px solid var(--accent);padding-bottom:3px;
}
.band .more:hover{color:var(--fg-strong)}

.strand-index{border-top:1px solid var(--line)}
.strand-row{
  display:grid;
  grid-template-columns:56px minmax(150px,.9fr) minmax(0,2.4fr) 110px;
  gap:24px;align-items:start;
  padding:24px var(--edge);
  border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
.strand-row:hover{background:var(--bg-raised)}
.strand-row .num{
  font-family:var(--font-title);font-style:italic;font-size:15px;
  color:var(--accent);padding-top:4px;
}
.strand-row h3{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(18px,2vw,26px);letter-spacing:-.01em;
  color:var(--fg-strong);padding-top:1px;
}
.strand-row p{color:var(--fg-mute);font-size:14px;line-height:1.6;max-width:64ch}
.strand-row .n{
  text-align:right;padding-top:5px;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);
}
@media(max-width:820px){
  .strand-row{grid-template-columns:44px minmax(0,1fr) 84px;gap:14px 18px;padding-block:20px}
  .strand-row p{grid-column:2 / -1;font-size:13.5px;max-width:none}
}
@media(max-width:520px){
  .strand-row{grid-template-columns:34px minmax(0,1fr)}
  .strand-row .n{grid-column:2;text-align:left;padding-top:0}
}


/* --------------------------------------------------------------------------
   13. INTERIOR PAGES
   -------------------------------------------------------------------------- */
.page-open{
  position:relative;
  padding:clamp(48px,7vw,104px) var(--edge) clamp(24px,3.5vw,44px);
  max-width:900px;
  border-bottom:1px solid var(--line);
}
.page-open h1{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(30px,5.2vw,64px);line-height:1.02;letter-spacing:-.02em;
  color:var(--fg-strong);
}
.page-open p{
  margin-top:18px;max-width:62ch;
  color:var(--fg-mute);font-size:15px;line-height:1.7;
}
.page-open .post-date{
  margin-top:14px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);
}

.page-body{padding:clamp(32px,4.5vw,64px) var(--edge)}
/*
 * The reading measure.
 *
 * .page-body already centres its content with padding. Putting a max-width on
 * the same element as well narrows it twice, which is what left film write ups
 * in a column a few words wide. The measure now applies to the text inside
 * rather than to the padded box itself.
 */
.prose > *{max-width:62ch}
.prose > .film-keywords,
.prose > figure,
.prose > table{max-width:none}
.prose p{color:var(--fg);font-size:15.5px;line-height:1.75;margin:0 0 1.2em}
.prose h2{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(21px,2.6vw,32px);letter-spacing:-.01em;
  color:var(--fg-strong);margin:2em 0 .6em;
}
.prose h3{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(18px,2vw,23px);color:var(--fg-strong);margin:1.8em 0 .5em;
}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--accent-hi)}
.prose ul,.prose ol{margin:0 0 1.2em 1.2em;color:var(--fg);font-size:15.5px;line-height:1.75}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:.5em}
.prose blockquote{
  margin:1.6em 0;padding-left:20px;
  border-left:2px solid var(--accent);
  font-family:var(--font-title);font-style:italic;font-size:19px;line-height:1.5;
  color:var(--fg-strong);
}

/* a strand page */
.strand-open{position:relative}
.strand-numeral{
  position:absolute;top:clamp(30px,5vw,64px);right:var(--edge);
  font-family:var(--font-title);font-style:italic;
  font-size:clamp(48px,9vw,120px);line-height:1;
  color:var(--accent);opacity:.16;pointer-events:none;
}
.strand-empty{padding:clamp(50px,8vw,110px) var(--edge);border-bottom:1px solid var(--line)}
.strand-empty-inner{max-width:56ch}
.strand-empty h2{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(22px,3vw,34px);letter-spacing:-.01em;
  color:var(--fg-strong);margin-bottom:14px;
}
.strand-empty p{color:var(--fg-mute);font-size:15px;line-height:1.7;margin-bottom:26px}
.strand-empty .cta{display:flex;gap:10px;flex-wrap:wrap}

/* a gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);background:var(--line)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr}}


/* --------------------------------------------------------------------------
   14. SINGLE FILM AND STORY
   -------------------------------------------------------------------------- */
.film-player{background:#000}
.film-player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/*
 * The plate and the player are capped in height.
 *
 * With only an aspect ratio and no ceiling, a 16/9 frame on a wide monitor
 * becomes as tall as the screen, so the page opens on an enormous banner and
 * the title is pushed below the fold. The cap keeps the shape until the screen
 * is wide enough that height would become the problem, then holds it.
 */
.film-plate,
.film-banner,
.film-player{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:min(72vh,620px);
  overflow:hidden;
  margin-inline:auto;
}
.film-plate,
.film-banner{background:var(--bg-raised)}

/*
 * The banner is always the film's photo with the title set into it, whether
 * or not the film is out yet. A scrim rises from the bottom so the title
 * stays readable over any photo.
 */
.film-banner .banner-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  padding:var(--edge);
  padding-top:clamp(60px,10vw,140px);
  background:linear-gradient(to top, rgba(10,12,13,.72) 0%, rgba(10,12,13,.38) 55%, transparent 100%);
}
.film-banner .banner-caption h1{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(34px,6.4vw,88px);line-height:.94;letter-spacing:-.02em;
  color:var(--on-media);max-width:16ch;
}
.film-banner .banner-caption .feature-tags{margin-bottom:10px}
.film-banner .banner-caption .tagline{
  margin-top:12px;
  font-family:var(--font-title);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.8vw,19px);line-height:1.5;
  color:var(--on-media-mute);max-width:52ch;
}

/*
 * Below the banner: the write-up on the left, and when the film is released,
 * the player beside it on the right. Without a video the text simply takes
 * the full measure.
 */
.film-body{
  padding-block:clamp(26px,3.5vw,44px) clamp(30px,4vw,50px);
  padding-inline:var(--edge);
}
.film-body.has-video{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,44%);
  gap:clamp(24px,4vw,56px);
  align-items:start;
}
.film-body .film-side{position:sticky;top:90px}
.film-body .film-side .film-player{max-height:none}
@media (max-width:860px){
  .film-body.has-video{display:flex;flex-direction:column-reverse}
  .film-body .film-side{position:static;width:100%}
}
.film-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
  padding:clamp(26px,3.5vw,44px) var(--edge) 0;
}
.film-head h1{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(28px,4.6vw,58px);line-height:1.02;letter-spacing:-.02em;
  color:var(--fg-strong);margin-top:10px;max-width:18ch;
}
.film-head .feature-tags{position:static;margin:0}
.film-contrib .cname{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
.film-keywords{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(22px,3vw,36px);
}


/* --------------------------------------------------------------------------
   15. FORMS AND CONTACT
   -------------------------------------------------------------------------- */
label{
  display:block;margin-bottom:7px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
input[type=text],
input[type=email],
input[type=url],
textarea,
select{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0;
  color:var(--fg);
  padding:13px 15px;
  font-size:14px;
  transition:border-color .2s ease;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical;min-height:130px}
::placeholder{color:var(--fg-faint)}

button[type=submit]{
  background:#E08348;border:1px solid #E08348;color:#0A0A0A;
  border-radius:0;
  padding:14px 28px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
button[type=submit]:hover{background:#F29A62;border-color:#F29A62}

.contact-layout{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);align-items:start;
}
.contact-card{background:var(--bg-raised);border:1px solid var(--line);padding:clamp(24px,3.2vw,40px)}
.contact-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-card .field{margin-bottom:20px}
/* Honeypot: off-screen for people, irresistible to bots. */
.echo-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-consent{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:22px;
  font-size:13px;letter-spacing:0;text-transform:none;color:var(--fg-mute);line-height:1.55;
}
.contact-consent input{width:auto;margin-top:3px}
.contact-aside h3{font-family:var(--font-title);font-size:22px;color:var(--fg-strong);margin-bottom:20px}
.next-steps{counter-reset:step;display:flex;flex-direction:column;gap:18px}
.next-steps li{position:relative;padding-left:42px;color:var(--fg-mute);font-size:14px;line-height:1.6}
.next-steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:-1px;width:28px;height:28px;
  border:1px solid var(--line);color:var(--accent);
  font-size:12px;display:flex;align-items:center;justify-content:center;
}
.next-steps strong{color:var(--fg-strong);font-weight:600}
.aside-note{margin-top:22px;color:var(--fg-faint);font-size:13px;line-height:1.65}
.aside-alt{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.aside-alt h4{font-family:var(--font-title);font-size:17px;color:var(--fg-strong);margin-bottom:8px}
.aside-alt p{color:var(--fg-mute);font-size:14px;line-height:1.6}
.aside-alt a{color:var(--accent)}
.aside-alt a:hover{text-decoration:underline}
.form-notice{
  padding:14px 16px;margin-bottom:20px;
  border:1px solid var(--accent);color:var(--accent);
  font-size:13px;line-height:1.55;
}
@media(max-width:820px){
  .contact-layout{grid-template-columns:1fr}
  .contact-card .row2{grid-template-columns:1fr;gap:0}
}


/* --------------------------------------------------------------------------
   16. STATEMENT BAND
   -------------------------------------------------------------------------- */
.statement{
  position:relative;min-height:clamp(340px,58vh,540px);
  display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.statement > .media{position:absolute;inset:0}
.statement-scrim{position:absolute;inset:0;z-index:5;background:var(--scrim-statement)}
.statement-inner{
  position:relative;z-index:6;
  padding-block:clamp(40px,6vw,80px);
  padding-inline:max(var(--edge), calc((100% - var(--measure)) / 2));
  width:100%;
}
.statement blockquote{max-width:22ch}
.statement blockquote{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(20px,3.1vw,44px);line-height:1.2;letter-spacing:-.015em;
  color:var(--on-media);
}
.statement cite{
  display:block;margin-top:20px;font-style:normal;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}


/* --------------------------------------------------------------------------
   17. CLOSE SECTION
   The nomination and the email signup sit together, since both are asking the
   same thing: to stay in touch with the project.
   -------------------------------------------------------------------------- */
.close{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);align-items:start;
  padding:clamp(48px,7vw,96px) var(--edge);
  border-top:1px solid var(--line);
}
.close h2{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(26px,4vw,54px);line-height:1.02;letter-spacing:-.02em;
  color:var(--fg-strong);
}
.close p{color:var(--fg-mute);font-size:14px;line-height:1.7;max-width:50ch}
.close .cta{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.close-subscribe{margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}
.close-subscribe h3{
  font-family:var(--font-title);font-weight:600;font-size:19px;
  color:var(--fg-strong);margin-bottom:8px;
}
.close-sub-note{color:var(--fg-mute);font-size:13px;line-height:1.6;margin-bottom:14px}
.close-sub-form{display:flex;gap:8px;flex-wrap:wrap}
.close-sub-form input[type=email]{flex:1 1 220px;width:auto}
.close-sub-ok{color:var(--accent);font-size:13px;margin-bottom:12px}
.close-sub-fine{margin-top:12px;color:var(--fg-faint);font-size:11.5px;line-height:1.6}
.close-sub-fine a{color:var(--fg-mute);text-decoration:underline;text-underline-offset:2px}
.close-sub-fine a:hover{color:var(--accent)}
@media(max-width:760px){.close{grid-template-columns:1fr}}


/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.ft{padding:clamp(40px,5vw,64px) var(--edge) 26px;border-top:1px solid var(--line)}
.ft-location{
  margin-bottom:26px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);
}
.ft-grid{
  display:grid;grid-template-columns:2fr repeat(3,minmax(0,1fr));
  gap:26px;padding-bottom:32px;border-bottom:1px solid var(--line);
}
.ft-mail{font-family:var(--font-title);font-size:clamp(17px,2vw,26px);color:var(--fg-strong)}
.ft-mail:hover{color:var(--accent)}
.ft-wordmark{margin-top:12px;font-size:9.5px;letter-spacing:.2em;color:var(--fg-faint)}
.ft-col h5{
  margin-bottom:12px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-strong);
}
.ft-col a{display:block;margin-bottom:9px;color:var(--fg-mute);font-size:12.5px}
.ft-col a:hover{color:var(--accent)}
.ft-base{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:20px;margin-top:22px;border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-faint);
}
.ft-social{display:flex;gap:18px}
.ft-social a:hover{color:var(--accent)}
@media(max-width:760px){.ft-grid{grid-template-columns:1fr 1fr}}


/* --------------------------------------------------------------------------
   19. STORY MAP
   -------------------------------------------------------------------------- */
.map-wrap{display:grid;grid-template-columns:1fr 300px;gap:30px;align-items:start}
@media(max-width:900px){.map-wrap{grid-template-columns:1fr}}
#tep-story-map{height:min(74vh,660px);border:1px solid var(--line);background:var(--bg-raised)}
.map-scope-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.map-scope{
  appearance:none;-webkit-appearance:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  padding:9px 16px;
  font-family:var(--font-ui);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.map-scope:hover{color:var(--fg-strong);border-color:var(--line-strong)}
.map-scope.active{
  color:var(--accent-on);
  background:var(--accent);
  border-color:var(--accent);
}
.map-side h3{font-family:var(--font-title);font-size:21px;color:var(--fg-strong);margin-bottom:10px}
.map-side .muted{color:var(--fg-mute);font-size:13.5px;line-height:1.65;margin-bottom:20px}
.map-legend{display:flex;flex-direction:column;gap:11px}
.map-legend div{
  display:flex;align-items:center;gap:10px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);
}
.map-legend i{width:11px;height:11px;border-radius:50%;flex:none}
.leaflet-container{background:var(--bg-raised);font-family:var(--font-ui)}
.leaflet-tile-pane{filter:saturate(.85) brightness(.92) contrast(1.02) sepia(.1) hue-rotate(-6deg)}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip{background:var(--bg-raised);color:var(--fg);border:1px solid var(--line);border-radius:0}
.leaflet-popup-content strong{font-family:var(--font-title);font-size:16px;color:var(--fg-strong)}
.leaflet-popup-content a{color:var(--accent);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.leaflet-control-attribution{background:rgba(10,10,10,.72)!important;color:var(--fg-faint)!important}
.leaflet-control-attribution a{color:var(--fg-faint)!important}
.leaflet-bar a{background:var(--bg-raised)!important;color:var(--fg-strong)!important;border-color:var(--line)!important}
.tep-pin span{display:block;width:19px;height:19px;border-radius:50%;border:2px solid rgba(10,10,10,.7)}
.tep-cluster div{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-on);
  font-size:14px;font-weight:700;
  border:3px solid rgba(10,10,10,.7);
}
.tep-neigh span{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--fg-strong);text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap;
}


/* --------------------------------------------------------------------------
   20. REVEALS AND MOTION
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

.empty-note{
  padding:28px;border:1px dashed var(--line);
  color:var(--fg-mute);font-size:13.5px;text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .ringfield .ring{opacity:.08;width:var(--ring-size,280px);height:var(--ring-size,280px)}
  .reveal{opacity:1;transform:none}
}


/* --------------------------------------------------------------------------
   21. STRAND AND ABOUT CONTENT
   The strand pages carry most of the weight while the archive is young, so
   they are given room to read rather than being a filter view with a heading.
   -------------------------------------------------------------------------- */

/* the question a strand asks, held on its own */
.strand-question{
  padding:clamp(40px,6vw,80px) var(--edge);
  border-bottom:1px solid var(--line);
}
.strand-q{
  font-family:var(--font-title);font-style:italic;font-weight:400;
  font-size:clamp(22px,3.4vw,44px);line-height:1.25;letter-spacing:-.015em;
  color:var(--fg-strong);max-width:24ch;
}

/* why the strand exists, and who belongs in it */
.strand-why{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,72px);
  padding:clamp(40px,6vw,80px) var(--edge);
  border-bottom:1px solid var(--line);
}
.strand-why h2,
.strand-method h2,
.strand-shape h2,
.strand-taking-part h2,
.about-head h2{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(21px,2.8vw,36px);line-height:1.08;letter-spacing:-.015em;
  color:var(--fg-strong);margin-bottom:16px;
}
.strand-why p{color:var(--fg);font-size:15.5px;line-height:1.75;max-width:56ch}
.strand-why h3,
.strand-method h3,
.strand-taking-part h3{
  font-family:var(--font-title);font-weight:600;font-size:17px;
  color:var(--fg-strong);margin-bottom:14px;
}
.strand-col-second{margin-top:26px}

/* the lists used across these pages */
.strand-list{display:flex;flex-direction:column;gap:11px}
.strand-list li{
  position:relative;padding-left:20px;
  color:var(--fg);font-size:14.5px;line-height:1.6;
}
.strand-list li::before{
  content:'';position:absolute;left:0;top:9px;
  width:6px;height:1px;background:var(--accent);
}
.strand-note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--fg-faint);font-size:13px;line-height:1.65;max-width:52ch;
}

/* how the films are made */
.strand-method{padding:clamp(40px,6vw,80px) var(--edge);border-bottom:1px solid var(--line)}
.strand-method-head{max-width:62ch;margin-bottom:clamp(26px,4vw,44px)}
.strand-method-head p,
.strand-shape-head p,
.about-head p{color:var(--fg-mute);font-size:15px;line-height:1.7;max-width:62ch}
.strand-method-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px);
}
.strand-method-cols p{color:var(--fg);font-size:14.5px;line-height:1.7;max-width:48ch}

/* the four movements */
.strand-shape,
.about-shape{padding:clamp(40px,6vw,80px) var(--edge);border-bottom:1px solid var(--line)}
.strand-shape-head,
.about-shape .about-head{max-width:62ch;margin-bottom:clamp(26px,4vw,44px)}
.movements{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.movement{background:var(--bg);padding:26px 22px}
.movement-share{
  display:block;margin-bottom:10px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.movement h3{
  font-family:var(--font-title);font-weight:600;font-size:19px;
  color:var(--fg-strong);margin-bottom:8px;
}
.movement p{color:var(--fg-mute);font-size:13.5px;line-height:1.6}

/* what taking part involves */
.strand-taking-part{padding:clamp(40px,6vw,80px) var(--edge);border-bottom:1px solid var(--line)}
.strand-tp-head{max-width:62ch;margin-bottom:26px}
.strand-tp-head p{color:var(--fg-mute);font-size:15px;line-height:1.7}
.strand-tp-list{max-width:70ch}

/* the about page */
.about-lead{padding:clamp(40px,6vw,80px) var(--edge);border-bottom:1px solid var(--line)}
.about-standfirst{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(19px,2.4vw,30px);line-height:1.35;letter-spacing:-.01em;
  color:var(--fg-strong);margin-bottom:1em;
}
.about-head{max-width:62ch;margin-bottom:clamp(26px,4vw,44px)}
.about-principles,
.about-method,
.about-promise,
.about-purpose{padding:clamp(40px,6vw,80px) var(--edge);border-bottom:1px solid var(--line)}

.principles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.principle{background:var(--bg);padding:28px 24px}
.principle-n{
  display:block;margin-bottom:14px;
  font-family:var(--font-title);font-style:italic;font-size:15px;color:var(--accent);
}
.principle h3{
  font-family:var(--font-title);font-weight:600;font-size:20px;
  color:var(--fg-strong);margin-bottom:10px;
}
.principle p{color:var(--fg-mute);font-size:14px;line-height:1.65}

.method-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,52px);
}
.method-item h3{
  font-family:var(--font-title);font-weight:600;font-size:18px;
  color:var(--fg-strong);margin-bottom:8px;
}
.method-item p{color:var(--fg-mute);font-size:14.5px;line-height:1.7;max-width:46ch}
.method-test{
  margin-top:clamp(26px,4vw,44px);padding-top:22px;
  border-top:1px solid var(--line);
  color:var(--fg);font-size:14.5px;line-height:1.75;max-width:64ch;
}

.promise-list{display:flex;flex-direction:column;gap:0}
.promise-list li{
  padding:20px 0;border-bottom:1px solid var(--line);
  color:var(--fg);font-size:15px;line-height:1.7;max-width:74ch;
}
.promise-list li:first-child{border-top:1px solid var(--line)}

.about-purpose .prose h2{margin-top:0}

@media(max-width:900px){
  .movements{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles{grid-template-columns:1fr}
}
@media(max-width:760px){
  .strand-why,
  .strand-method-cols,
  .method-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .movements{grid-template-columns:1fr}
}


/* --------------------------------------------------------------------------
   22. RELEASE FORMS
   Read and download, never sign here. The agreement is set at a comfortable
   reading measure, because somebody deciding whether to take part should not
   have to fight the typography to do it.
   -------------------------------------------------------------------------- */
.release-plain,
.release-download,
.release-choose,
.release-agreement,
.release-questions{
  padding:clamp(40px,6vw,80px) var(--edge);
  border-bottom:1px solid var(--line);
}
.release-distinction,
.release-notpromised{
  margin-top:clamp(26px,4vw,44px);
  padding-top:24px;
  border-top:1px solid var(--line);
  max-width:70ch;
}
.release-distinction h3,
.release-notpromised h3{
  font-family:var(--font-title);font-weight:600;font-size:18px;
  color:var(--fg-strong);margin-bottom:10px;
}
.release-distinction p,
.release-notpromised p{color:var(--fg-mute);font-size:14.5px;line-height:1.75}
.release-download .cta{display:flex;gap:10px;flex-wrap:wrap}

/* the agreements stay hidden until asked for, one at a time */
.release-choose .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.release-choose .btn[aria-expanded="true"]{
  background:var(--fg-strong);color:var(--bg);border-color:var(--fg-strong);
}
.release-agreement[hidden]{display:none}

/* the agreement itself */
.legal .clauses{
  counter-reset:clause;
  list-style:none;
  display:flex;flex-direction:column;gap:0;
  margin:26px 0 0;padding-left:0;
}
.legal .clauses li{
  counter-increment:clause;
  position:relative;
  padding:18px 0 18px 42px;
  border-bottom:1px solid var(--line);
  color:var(--fg);font-size:14.5px;line-height:1.75;
}
.legal .clauses li:first-child{border-top:1px solid var(--line)}
.legal .clauses li::before{
  content:counter(clause);
  position:absolute;left:0;top:19px;
  font-size:11px;letter-spacing:.1em;color:var(--fg-faint);
}
.legal .clauses li strong{color:var(--fg-strong);font-weight:600}
.legal > p:first-child{color:var(--fg-mute);font-size:14px;line-height:1.7;max-width:74ch}

.release-questions h2{
  font-family:var(--font-title);font-weight:600;
  font-size:clamp(21px,2.8vw,32px);color:var(--fg-strong);margin-bottom:14px;
}
.release-questions p{color:var(--fg-mute);font-size:15px;line-height:1.75;max-width:62ch}
.release-questions a{color:var(--accent)}
.release-questions a:hover{text-decoration:underline}


/* --------------------------------------------------------------------------
   23. LARGE SCREENS
   --------------------------------------------------------------------------
   Everything above is built edge to edge, which suits the archive grid but
   leaves the reading sections stranded on a wide monitor: a column of text on
   the left and a great deal of nothing on the right.

   This holds the page to a comfortable maximum and centres it, so a 27 inch
   display looks composed rather than half empty. The archive grid and the
   full bleed bands are deliberately left alone, because they are meant to run
   the full width.
   -------------------------------------------------------------------------- */

:root{
  /* the widest the reading content is allowed to get */
  --measure:1360px;
}

/* the masthead and footer keep their full width bar, but their contents
   line up with everything else */
.mast,
.ft{
  padding-inline:max(var(--edge), calc((100% - var(--measure)) / 2));
}

/* every section that holds text is centred and capped */
.page-open,
.strand-question,
.strand-why,
.strand-method,
.strand-shape,
.strand-taking-part,
.strand-empty,
.about-lead,
.about-principles,
.about-method,
.about-shape,
.about-promise,
.about-purpose,
.release-plain,
.release-download,
.release-choose,
.release-agreement,
.release-questions,
.band,
.strand-row,
.archive-note,
.filters,
.close,
.film-body,
.page-body{
  padding-inline:max(var(--edge), calc((100% - var(--measure)) / 2));
}

/* the page-open block was capped at 900px, which looked narrow beside the
   wider sections below it; it now shares the same measure */
.page-open{max-width:none}
.page-open h1{max-width:20ch}

/* the archive grid and the full bleed bands stay edge to edge on purpose */
.film-grid,
.feature{padding-inline:0}

/* the statement band runs full width, but its text lines up with the rest */
.statement{padding-inline:0}

/* their inner content still lines up with the rest */
.feature-body,
.statement-inner{
  padding-inline:max(var(--edge), calc((100% - var(--measure)) / 2));
}

/* on a very wide screen the archive tiles would become enormous, so the grid
   gains columns rather than stretching */
@media(min-width:1700px){
  .film-grid{--cols:5}
}
@media(min-width:2200px){
  .film-grid{--cols:6}
}