/* ==========================================================================
   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. Marks
   -------------------------------------------------------------------------- */
.marks{border-top:1px solid var(--fg); padding:70px var(--pad-x) 90px;}
.marks h2{font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px;}
.marks .note{font-size:13px; color:var(--grey); max-width:520px; line-height:1.6;}

.mark-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border:1px solid var(--fg); border-right:none;
  margin-top:36px;
}
.mark{
  border-right:1px solid var(--fg);
  aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.m1{
  font-family:'Archivo Expanded',sans-serif; font-weight:600; letter-spacing:.08em;
  color:#7a4c9e;                 /* fallback, never invisible */
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .m1{
    background:linear-gradient(90deg,#7a4c9e,#e8a55c);
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
.m2{color:#0d0d0d; letter-spacing:.55em; text-indent:.55em; font-size:13px;}
.m3{font-family:'Fraunces',serif; font-style:italic; font-weight:300; color:#7a2020; font-size:24px;}
.m4{font-family:'Archivo Expanded',sans-serif; font-weight:600; color:#12233a;}
.m4 span{display:inline-block; transform:skewX(-8deg);}

/* --------------------------------------------------------------------------
   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:699px){
  .mark-row{
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--fg);
    border:1px solid var(--fg);
    margin-top:28px;
  }
  .mark{
    border-right:none;
    aspect-ratio:auto;
    height:90px;
    background:var(--bg);
    padding:0 8px;
    font-size:16px;
  }
  .m1{font-size:16px; letter-spacing:.06em;}
  .m2{font-size:10px; letter-spacing:.34em; text-indent:.34em;}
  .m3{font-size:19px;}
  .m4{font-size:16px;}
}

@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);}
}