/* ==========================================================================
   EVERFELT
   Shared stylesheet for index.html, film.html, notes.html
   Chrome is strictly monochrome. Color appears only inside poster art,
   per-film wordmark treatments, and film stills.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --white:#FFFFFF;
  --black:#000000;
  --grey:#767676;
  --line:rgba(0,0,0,.14);

  /* Surface pair. Flipped by .is-dark for the premiere page. */
  --bg:var(--white);
  --fg:var(--black);
  --hairline:var(--line);

  --pad-x:clamp(20px,3vw,72px);
}

.is-dark{
  --bg:var(--black);
  --fg:var(--white);
  --hairline:rgba(255,255,255,.18);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Archivo',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--fg); color:var(--bg);}

a{color:inherit; text-decoration:none;}

img,video{max-width:100%; display:block;}

/* Visible keyboard focus, monochrome, works on either surface. */
:focus-visible{
  outline:2px solid var(--fg);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fg); color:var(--bg);
  padding:12px 18px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus{left:0;}

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

/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--fg);
  display:flex; justify-content:space-between; align-items:center;
  padding:16px var(--pad-x);
}
.nav .logo{
  font-family:'Archivo Expanded',sans-serif;
  font-weight:600; font-size:17px; letter-spacing:.06em;
}
.nav .menu{
  display:flex; flex-wrap:wrap; gap:10px 24px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.nav .menu a{opacity:.6; transition:opacity .2s;}
.nav .menu a:hover,
.nav .menu a:focus-visible,
.nav .menu a[aria-current="page"]{opacity:1;}

/* --------------------------------------------------------------------------
   4. Intro
   -------------------------------------------------------------------------- */
.intro{
  padding:70px var(--pad-x) 40px;
}
.intro h1{
  font-family:'Archivo Expanded',sans-serif;
  font-weight:600;
  font-size:clamp(30px,5vw,58px);
  line-height:1.02; letter-spacing:-.01em;
  max-width:860px; text-transform:uppercase;
  text-wrap:balance;
}
.intro p{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
}

/* --------------------------------------------------------------------------
   5. Studio films grid
   16:9 video tiles that play in place on the homepage. The 2:3 poster
   artwork this replaced has been removed.
   -------------------------------------------------------------------------- */
/* Shared section head: small uppercase label plus an optional note. */
.sect-head{
  position:relative;
  padding:0 var(--pad-x);
  margin-bottom:30px;
}

/* Same 12px as the WORK label and pinned to its line, so the two sit level
   at opposite margins without wrapping either one in extra markup. */
.sect-tag{
  position:absolute; top:0; right:var(--pad-x);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
}
.sect-head h2{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:10px;
}
.sect-note{font-size:13px; color:var(--grey); max-width:520px; line-height:1.6;}

.films-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(460px,1fr));
  gap:40px 24px;
  padding:0 var(--pad-x) 90px;
  list-style:none;
}

.wall-empty{
  grid-column:1 / -1;
  font-size:13px; color:var(--grey); line-height:1.6;
}

/* --------------------------------------------------------------------------
   5b. Work tiles
   -------------------------------------------------------------------------- */
.spot{display:block; cursor:pointer;}

.spot__frame{
  aspect-ratio:16/9;
  background:var(--black);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s;
}
.spot:hover .spot__frame{transform:translateY(-6px);}
.spot:focus-visible{outline:none;}
.spot:focus-visible .spot__frame{
  transform:translateY(-6px);
  outline:2px solid var(--fg); outline-offset:3px;
}

.spot__frame img,
.spot__frame video{width:100%; height:100%; object-fit:cover;}

/* A portrait clip is fitted inside the landscape tile, not cropped to it. */
.spot__frame video.is-contain{object-fit:contain; background:var(--black);}

/* Film tiles play in place, so they are not links and take no pointer. */
.spot--inline{cursor:pointer;}
.spot--inline:hover .spot__frame{transform:translateY(-6px);}

/* The play mark steps aside once a clip is running. */
.spot.is-playing .spot__play{opacity:0; pointer-events:none;}
.spot__play{transition:border-color .3s, opacity .3s;}

/* Title in the credit line deep links to the film page. */
.spot__credit a{border-bottom:1px solid transparent; transition:border-color .2s;}
.spot__credit a:hover,
.spot__credit a:focus-visible{border-bottom-color:currentColor;}

/* Format sits in the corner of the frame, like a slate. */
.spot__tag{
  position:absolute; top:20px; left:22px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.68);
}

/* Play mark, drawn in CSS so an empty slot still looks intentional. */
.spot__play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:62px; height:62px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s;
}
.spot:hover .spot__play{border-color:rgba(255,255,255,.9);}
.spot__play::after{
  content:"";
  width:0; height:0;
  margin-left:3px;
  border-left:14px solid rgba(255,255,255,.85);
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}

.spot__credit{
  margin-top:14px;
  display:flex; justify-content:space-between; gap:16px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.spot__credit span:last-child{color:var(--grey); text-align:right;}

/* --------------------------------------------------------------------------
   6. Client logo wall
   Logos are rendered greyscale so third party brand colour never enters the
   monochrome system.
   -------------------------------------------------------------------------- */
.clients{border-top:1px solid var(--fg); padding:70px var(--pad-x) 90px;}
.clients h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px;}

.client-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:60px 48px;
  align-items:center;
  margin-top:52px;
  list-style:none;
}
.client-grid li{
  display:flex; align-items:center; justify-content:center;
  min-height:64px;
}
.client-grid img{
  max-height:64px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  filter:brightness(0);
  opacity:.85;
  transition:opacity .25s;
}
.client-grid img:hover{opacity:1;}

/* Compact marks are square rather than wide, so at a shared max-height they
   read smaller than the wordmarks beside them. This lifts them to match. */
.client-grid img.logo-tall{max-height:84px;}

/* The mirror case: a very wide wordmark hits the column edge long before the
   height cap, so it is capped on width instead and sized to match its
   neighbours optically rather than by bounding box. */
.client-grid img.logo-wide{max-width:160px;}

/* --------------------------------------------------------------------------
   7. Notes strip on the homepage
   Scoped as .notes-strip so it cannot collide with the notes.html page rules.
   -------------------------------------------------------------------------- */
.notes-strip{border-top:1px solid var(--fg); padding:70px var(--pad-x) 90px;}
.notes-strip h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:36px;}

.note-item{
  display:flex; justify-content:space-between; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--hairline);
  align-items:baseline;
}
.note-item h3{font-family:'Fraunces',serif; font-weight:300; font-size:22px;}
.note-item span{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap;
}
a.note-item h3{transition:opacity .2s;}
a.note-item:hover h3,
a.note-item:focus-visible h3{opacity:.55;}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer{background:var(--black); color:var(--white); padding:80px var(--pad-x) 40px;}
.site-footer .big{
  font-family:'Archivo Expanded',sans-serif; font-weight:600;
  font-size:clamp(34px,11vw,150px); line-height:.95; letter-spacing:-.01em;
}
.site-footer .row{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-top:50px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.site-footer a{border-bottom:1px solid var(--white); padding-bottom:2px;}

/* Social marks. Drawn in currentColor so they stay monochrome on any ground. */
.social{
  display:flex; align-items:center; gap:18px;
  list-style:none;
}
.social a{
  display:inline-flex;
  border-bottom:none;      /* overrides the underline on footer links */
  padding:2px;
  opacity:.75;
  transition:opacity .2s;
}
.social a:hover,
.social a:focus-visible{opacity:1;}
.social svg{display:block; width:20px; height:20px;}

/* --------------------------------------------------------------------------
   9. Premiere page (film.html)
   -------------------------------------------------------------------------- */
.premiere{padding:60px var(--pad-x) 0;}

.premiere__meta{
  display:flex; flex-wrap:wrap; gap:10px 22px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
  margin-bottom:26px;
}

.frame{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  aspect-ratio:2.39 / 1;
  background:#000;
  border:1px solid var(--hairline);
  position:relative;
  overflow:hidden;
}
.frame--portrait{aspect-ratio:4 / 5; max-width:560px;}

.frame video{
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}

.premiere__title{
  font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:clamp(38px,7vw,86px);
  line-height:1.04;
  text-align:center;
  margin:46px auto 0;
  max-width:16ch;
  text-wrap:balance;
}
.premiere__logline{
  margin:22px auto 0;
  max-width:52ch;
  text-align:center;
  font-size:15px; line-height:1.65;
  color:var(--grey);
}

.credits{
  max-width:760px;
  margin:80px auto 0;
  border-top:1px solid var(--hairline);
}
.credits h2{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:26px 0 6px;
}
.credits dl{
  display:grid;
  grid-template-columns:minmax(140px,220px) 1fr;
  gap:0;
}
.credits dt,
.credits dd{
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
  font-size:13px;
}
.credits dt{
  letter-spacing:.12em; text-transform:uppercase;
  font-size:11px; color:var(--grey);
  align-self:center;
}
.credits dd{letter-spacing:.02em;}

/* Credit line and back link on the felt-films pages. */
.premiere__credit{
  margin-top:18px;
  text-align:center;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
.premiere__nav{text-align:center;}

/* Per-film wordmark, shown full width at the foot of the premiere. */
.film-mark{
  margin:110px 0 0;
  padding:70px var(--pad-x) 90px;
  border-top:1px solid var(--hairline);
  text-align:center;
}
.film-mark__label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
  margin-bottom:34px;
}
.film-mark__art{
  font-family:'Archivo Expanded',sans-serif; font-weight:600;
  font-size:clamp(34px,9vw,112px);
  letter-spacing:.08em;
  line-height:1;
  background:linear-gradient(90deg,#7a4c9e,#e8a55c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --------------------------------------------------------------------------
   10. Zine index (notes.html)
   -------------------------------------------------------------------------- */
.zine-head{padding:70px var(--pad-x) 44px;}
.zine-head h1{
  font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:clamp(40px,7vw,84px);
  line-height:1.02;
  max-width:14ch;
  text-wrap:balance;
}
.zine-head p{
  margin-top:22px;
  max-width:46ch;
  font-size:14px; line-height:1.7; color:var(--grey);
}

.zine{padding:0 var(--pad-x) 90px;}
.zine__group{border-top:1px solid var(--fg); padding-top:14px; margin-top:44px;}
.zine__group:first-child{margin-top:0;}
.zine__group > h2{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:10px;
}

.entry{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px 24px;
  align-items:baseline;
  padding:26px 0;
  border-bottom:1px solid var(--hairline);
}
.entry h3{
  font-family:'Fraunces',serif; font-weight:300; font-size:clamp(21px,2.6vw,30px);
  line-height:1.22;
  grid-column:1;
  transition:opacity .2s;
}
.entry__meta{
  grid-column:2; grid-row:1;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey); white-space:nowrap;
}
.entry__dek{
  grid-column:1 / -1;
  font-size:14px; line-height:1.65; color:var(--grey);
  max-width:62ch;
}
a.entry:hover h3,
a.entry:focus-visible h3{opacity:.55;}

/* --------------------------------------------------------------------------
   11. Negative cursor
   A white disc under difference blending, so it inverts whatever sits below.
   It is only ever white, which is why it can never break the monochrome rule:
   over chrome it reads black or white, over poster art it reads as a negative.
   Decoration only. The real cursor stays visible and focus states are untouched.
   -------------------------------------------------------------------------- */
.cursor{
  position:fixed; top:0; left:0;
  width:14px; height:14px;
  margin:0; border-radius:50%;
  background:var(--white);
  mix-blend-mode:difference;
  pointer-events:none;
  z-index:200;
  transform:translate(-50%,-50%);
  opacity:0;
  display:flex; align-items:center; justify-content:center;
  transition:width .28s cubic-bezier(.22,.61,.36,1),
             height .28s cubic-bezier(.22,.61,.36,1),
             opacity .2s linear;
  will-change:transform;
}
.cursor.is-visible{opacity:1;}

.cursor.is-over-film{width:96px; height:96px;}

/* A small contraction on press, like a shutter closing. */
.cursor.is-pressed{width:9px; height:9px;}
.cursor.is-over-film.is-pressed{width:82px; height:82px;}

.cursor__label{
  font-family:'Archivo Expanded',sans-serif;
  font-weight:600;
  font-size:11px; letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase;
  color:var(--black);
  opacity:0;
  transition:opacity .18s linear;
}
.cursor.is-over-film .cursor__label{opacity:1; transition-delay:.08s;}

/* The effect is pointer only. Touch, coarse pointers and reduced motion opt out. */
@media (hover:none),(pointer:coarse){
  .cursor{display:none;}
}

/* --------------------------------------------------------------------------
   12. Why Everfelt
   -------------------------------------------------------------------------- */
.why{border-top:1px solid var(--fg); padding:70px var(--pad-x) 90px;}
.why > h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:30px;}

/* The one editorial moment in this section, so Fraunces earns its place. */
.why-statement{
  font-family:'Fraunces',serif; font-weight:300; font-style:normal;
  font-size:clamp(26px,4vw,42px);
  line-height:1.35;
  /* Measured in ch so it tracks the clamped font size. The longest sentence
     is 39 characters, so 42ch keeps each one on a single line and stops
     "spot." and "watching." orphaning onto lines of their own. */
  max-width:42ch;
  text-wrap:pretty;
  margin-bottom:60px;
}
.why-statement em{font-style:italic;}
@media (max-width:700px){ .why-statement br{display:none;} }

.why__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:34px 36px;
}
.why__item{border-top:1px solid var(--fg); padding-top:18px;}
.why__item h3{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:12px;
}
.why__item p{font-size:13px; line-height:1.62; color:var(--grey);}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */
.contact{border-top:1px solid var(--fg); padding:70px var(--pad-x) 100px;}
.contact > h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:26px;}
.contact__lead{
  max-width:48ch;
  font-size:15px; line-height:1.68; color:var(--grey);
}

.contact__mail{
  display:inline-block;
  margin-top:40px;
  font-family:'Archivo Expanded',sans-serif; font-weight:600;
  font-size:clamp(24px,5.2vw,62px);
  line-height:1.06; letter-spacing:-.01em;
  border-bottom:2px solid currentColor;
  padding-bottom:8px;
  transition:opacity .2s;
  overflow-wrap:anywhere;
}
.contact__mail:hover,
.contact__mail:focus-visible{opacity:.55;}

.contact__meta a{
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:opacity .2s;
}
.contact__meta a:hover,
.contact__meta a:focus-visible{opacity:.6;}

.contact__meta{
  display:flex; flex-wrap:wrap; gap:10px 34px;
  margin-top:54px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
}

/* --------------------------------------------------------------------------
   14. Felt Notes article pages
   Monochrome only. Fraunces carries the headline and the FAQ questions,
   Archivo carries the section questions and all body copy.
   -------------------------------------------------------------------------- */
.post{
  max-width:720px;
  margin:0 auto;
  padding:64px var(--pad-x) 96px;
}

.post__eyebrow{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
  margin-bottom:28px;
}

.post__title{
  font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:clamp(34px,6vw,60px);
  line-height:1.08;
  letter-spacing:-.005em;
  text-wrap:balance;
}

/* The direct answer sits immediately under the H1 for answer engines. */
.post__answer{
  margin-top:34px;
  font-size:19px; line-height:1.62;
}

/* Article imagery. Treated as a film still, which is where colour is allowed.
   Everything around it stays monochrome. */
.post__figure{margin:46px 0 8px;}
.post__figure img{
  width:100%; height:auto;
  display:block;
  background:var(--black);
}
.post__figure figcaption{
  margin-top:14px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
  line-height:1.55;
}

.post__body{margin-top:8px;}

.post__body h2{
  margin-top:58px;
  font-family:'Archivo',sans-serif; font-weight:600;
  font-size:clamp(19px,2.3vw,24px);
  line-height:1.26;
  letter-spacing:-.005em;
  text-wrap:balance;
}

.post__body p{
  margin-top:18px;
  font-size:16.5px; line-height:1.72;
}

/* FAQ */
.post__faq{
  margin-top:86px;
  border-top:1px solid var(--black);
  padding-top:26px;
}
.post__faq > h2{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:6px;
}
.faq-item{
  padding:24px 0;
  border-bottom:1px solid var(--hairline);
}
.faq-item h3{
  font-family:'Fraunces',serif; font-weight:300;
  font-size:21px; line-height:1.3;
}
.faq-item p{
  margin-top:11px;
  font-size:15px; line-height:1.66; color:var(--grey);
}

.post__back{
  display:inline-block;
  margin-top:56px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:opacity .2s;
}
.post__back:hover,
.post__back:focus-visible{opacity:.55;}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .client-grid{
    grid-template-columns:repeat(2,1fr);
    gap:40px 26px;
    margin-top:44px;
  }
  .client-grid li{min-height:48px;}
  .client-grid img{max-height:48px;}
  .client-grid img.logo-tall{max-height:62px;}
  .client-grid img.logo-wide{max-width:130px;}
}

@media (max-width:720px){
  .sect-tag{position:static; margin-top:8px;}
  .nav{flex-direction:column; align-items:flex-start; gap:12px;}
  .nav .menu{gap:10px 18px;}
  .intro{padding-top:48px;}

  /* Title and runtime cannot share a row on a phone. */
  .spot__credit{flex-direction:column; gap:4px;}
  .spot__credit span:last-child{text-align:left;}

  .post{padding-top:44px;}
  .premiere{padding-top:36px;}
  .films-grid{grid-template-columns:1fr; gap:24px;}
  .credits dl{grid-template-columns:1fr;}
  .credits dt{padding-bottom:0; border-bottom:none;}
  .credits dd{padding-top:4px;}
  .entry{grid-template-columns:1fr;}
  .entry__meta{grid-column:1; grid-row:auto;}
  .site-footer{padding-top:56px;}
}

/* --------------------------------------------------------------------------
   16. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .spot:hover .spot__frame,
  .spot:focus-visible .spot__frame{transform:none;}
  .cursor{display:none;}
}

@media print{
  .nav{position:static;}
  .site-footer{background:none; color:var(--black);}
  .site-footer a{border-bottom-color:var(--black);}
}