/* VeeVeeVee Productions. Avoc register: serif headlines, heavy white space,
   quiet palette, images carrying the weight, no gradients.
   One stylesheet for all seven pages. Edit here, not in the HTML. */

:root{
  --ground:      #FAF9F5;
  --ground-alt:  #F2F0EA;
  --ink:         #16181A;
  --ink-soft:    #55595E;
  --ink-faint:   #8B8F94;
  --rule:        #E0DDD4;
  --accent:      #0A6FA6;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --gutter: clamp(24px, 6vw, 120px);
  --stack:  clamp(80px, 12vw, 170px);
}
:root{ color-scheme: light; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1240px; margin:0 auto; padding-inline:var(--gutter); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-0.01em; margin:0; }
h1{ font-size:clamp(42px,7vw,92px); line-height:1.06; }
h2{ font-size:clamp(30px,4.2vw,54px); line-height:1.14; }
h3{ font-size:clamp(21px,2.2vw,27px); line-height:1.3; }
p{ margin:0 0 1.2em; } p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 22px;
}
.lede{ font-size:clamp(18px,1.7vw,21px); line-height:1.7; color:var(--ink-soft); max-width:46ch; }
.body-col{ color:var(--ink-soft); max-width:58ch; }
.link{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:3px;
  display:inline-block;
}

/* header */
header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
header.scrolled{ border-bottom-color:var(--rule); }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:84px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; }
.brand .mark{ width:34px; flex:none; }
.brand-name{
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; line-height:1.1;
}
nav ul{ display:flex; gap:clamp(16px,2.2vw,32px); list-style:none; margin:0; padding:0; }
nav a{
  text-decoration:none; font-size:13px; letter-spacing:.04em; color:var(--ink-soft);
  padding-bottom:3px; border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
nav a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
nav a[aria-current]{ color:var(--ink); border-bottom-color:var(--ink); }
.menu-btn{ display:none; background:none; border:0; font:inherit; font-size:13px; cursor:pointer; padding:8px 0; color:var(--ink); }
@media (max-width:900px){
  nav{ display:none; }
  nav.open{ display:block; position:absolute; left:0; right:0; top:84px;
    background:var(--ground); border-block:1px solid var(--rule); padding:22px var(--gutter) 30px; }
  nav.open ul{ flex-direction:column; gap:16px; }
  nav.open a{ font-size:17px; }
  .menu-btn{ display:block; }
}

/* sections */
section{ padding-block:var(--stack); }
.rule-top{ border-top:1px solid var(--rule); }
.hero{ padding-top:clamp(70px,11vw,150px); padding-bottom:clamp(56px,8vw,110px); }
.hero h1{ max-width:16ch; }
.hero .lede{ margin-top:clamp(28px,4vw,44px); }
.page-head{ padding-top:clamp(64px,9vw,130px); padding-bottom:clamp(40px,6vw,80px); }

.figure{ margin:clamp(52px,8vw,100px) 0 0; aspect-ratio:21/9; background:var(--ground-alt); overflow:hidden; }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure.square{ aspect-ratio:1/1; }
.figure.tall{ aspect-ratio:4/5; }

/* cycling hero. Same 21:9 frame, crossfading stills from the films. */
.cycle{ position:relative; }
.cycle .frame{
  position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease;
  background:var(--ground-alt);
}
.cycle .frame.on{ opacity:1; }
.cycle .frame img{ width:100%; height:100%; object-fit:cover; }
.cycle .cap{
  position:absolute; left:0; bottom:0; z-index:3;
  padding:14px 18px; background:color-mix(in srgb, var(--ink) 74%, transparent);
  color:var(--ground); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; transition:opacity .6s ease;
}
.cycle .cap.on{ opacity:1; }
.cycle .dots{
  position:absolute; right:16px; bottom:16px; z-index:3; display:flex; gap:8px;
}
.cycle .dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb, #fff 45%, transparent); transition:background .3s;
}
.cycle .dots button[aria-current]{ background:#fff; }
@media (prefers-reduced-motion:reduce){ .cycle .frame{ transition:none; } }

.two-col{
  display:grid; gap:clamp(32px,6vw,92px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start;
}
@media (max-width:900px){ .two-col{ grid-template-columns:1fr; } }

.split{ display:grid; gap:clamp(34px,5vw,72px); align-items:center; }
@media (min-width:860px){ .split{ grid-template-columns:1fr 1fr; } }

/* placeholder wells */
.well{ background:var(--ground-alt); display:grid; place-items:center; }
.well span{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; padding:18px; max-width:34ch;
}

/* division / card grid */
.grid{ display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule); margin-top:clamp(44px,6vw,72px); }
@media (min-width:700px){ .grid.two{ grid-template-columns:1fr 1fr; } }
@media (min-width:760px){ .grid.three{ grid-template-columns:repeat(3,1fr); } }
.cell{
  background:var(--ground); padding:clamp(32px,4.2vw,54px) clamp(24px,3.2vw,46px);
  display:flex; flex-direction:column; gap:15px; text-decoration:none; transition:background .25s;
}
a.cell:hover{ background:var(--ground-alt); }
.cell .num{ font-size:11px; letter-spacing:.18em; color:var(--ink-faint); }
.cell p{ color:var(--ink-soft); font-size:16px; max-width:42ch; }
.cell .go{ margin-top:auto; padding-top:18px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }

/* track list */
.tracks{ margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--rule); }
.track{
  display:grid; grid-template-columns:44px 1fr auto; gap:20px; align-items:baseline;
  padding:22px 4px; border-bottom:1px solid var(--rule); text-decoration:none;
}
.track:hover{ background:var(--ground-alt); }
.track .n{ font-size:12px; color:var(--ink-faint); letter-spacing:.1em; }
.track .t{ font-family:var(--serif); font-size:clamp(20px,2.1vw,26px); }
.track .m{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.track .m.soon{ color:var(--ink-faint); }

/* quote */
.quote{ text-align:center; }
.quote blockquote{
  font-family:var(--serif); font-size:clamp(25px,3.4vw,42px); line-height:1.32;
  margin:0 auto; max-width:22ch; font-style:italic; font-weight:300;
}
.quote .attrib{ margin-top:30px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }

/* contact */
/* The address is 38 characters, so it cannot carry display sizing without
   breaking mid-domain. Sized to sit on one line in the content column. */
a.mail{
  font-family:var(--serif); font-size:clamp(18px,2.1vw,29px); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:4px; transition:border-color .25s;
  overflow-wrap:anywhere; line-height:1.4; display:inline-block; max-width:100%;
}
a.mail:hover{ border-bottom-color:var(--ink); }

/* footer */
footer{ border-top:1px solid var(--rule); padding-block:52px 62px; font-size:13px; color:var(--ink-faint); }
.foot-grid{ display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:space-between; align-items:flex-start; }
footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 26px; }
footer a{ text-decoration:none; color:var(--ink-soft); }
footer a:hover{ color:var(--ink); }
.legal{ margin-top:38px; font-size:12px; }

/* reveal */
/* Content is visible by default. The fade is an enhancement that only
   applies once JS has confirmed it is running, so a script failure can
   never leave the page blank. */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }
.cycle.nofade .frame{ transition:none; }