/* ---------- fonts ---------- */
@font-face{
  font-family:"Calendas";
  src:url(assets/fonts/calendas-regular.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Calendas";
  src:url(assets/fonts/calendas-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Calendas";
  src:url(assets/fonts/calendas-bold.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --paper:#F1EADE;
  --paper-2:#ECE3D4;
  --ink:#191410;
  --ink-70:rgba(25,20,16,.68);
  --ink-45:rgba(25,20,16,.45);
  --line:rgba(25,20,16,.16);
  --gold:#A9762F;
  --serif:"Calendas", "Times New Roman", Georgia, serif;
  --sans:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}

.eyebrow{
  font-family:var(--sans);
  font-size:clamp(9.5px,1vw,12px);
  letter-spacing:.34em; text-transform:uppercase; font-weight:600;
  line-height:1.55; margin:0; color:var(--ink-70);
}

/* ================= HERO ================= */
.hero{
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden;
  background:var(--paper);
  cursor:pointer;
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  transform:scale(1.04);
  transition:transform 2.4s var(--ease), filter 1.2s ease;
  filter:saturate(1.02);
}
.hero__sheet{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
  transition:opacity 1.1s var(--ease), transform 1.6s var(--ease);
  transform-origin:center;
}

/* overlay copy */
.hero__ui{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  transition:opacity .7s var(--ease);
}
.eyebrow--top{
  position:absolute; left:0; right:0;
  top:calc(50% - var(--wm-h,80px)/2 - clamp(26px,4.4vh,54px));
  transform:translateY(-100%);
  text-align:center;
}
.enter{
  position:absolute; left:50%;
  top:calc(50% + var(--wm-h,80px)/2 + clamp(26px,4.4vh,54px));
  transform:translateX(-50%);
  pointer-events:auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:.7em;
  padding:0; border:0; background:none;
  font-family:var(--sans);
  font-size:clamp(10px,1.05vw,12.5px);
  letter-spacing:.28em; text-transform:uppercase; font-weight:600;
  color:var(--ink);
  opacity:.9; transition:opacity .4s ease, gap .4s var(--ease);
}
.enter:hover{opacity:1; gap:1em}
.enter__dot{
  width:2.4em; height:2.4em; border-radius:50%;
  border:1px solid var(--ink);
  display:grid; place-items:center;
  transition:background .35s var(--ease);
}
.enter:hover .enter__dot{background:rgba(25,20,16,.06)}
.enter__tri{
  width:0; height:0; margin-left:.15em;
  border-left:.62em solid var(--ink);
  border-top:.4em solid transparent;
  border-bottom:.4em solid transparent;
}

/* film-playing chrome */
.brandmark,.sound,.scrollcue{
  position:absolute; z-index:3;
  opacity:0; pointer-events:none;
  transition:opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s;
  font-family:var(--sans);
}
.hero.is-live .brandmark,
.hero.is-live .sound,
.hero.is-live .scrollcue{opacity:1; pointer-events:auto}

.brandmark{
  top:clamp(18px,3.2vh,34px); left:clamp(20px,3.2vw,40px);
  font-family:var(--serif); font-weight:700;
  font-size:clamp(19px,2vw,25px);
  letter-spacing:.02em; color:var(--paper);
  text-transform:uppercase;
  mix-blend-mode:difference;
  transform:translateY(-8px);
}
.hero.is-live .brandmark{transform:translateY(0)}

.sound{
  bottom:clamp(20px,3.4vh,36px); right:clamp(20px,3.2vw,40px);
  border:1px solid rgba(241,234,222,.5); background:rgba(20,15,10,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--paper); border-radius:100px;
  padding:.75em 1.2em; cursor:pointer;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  transform:translateY(8px);
}
.hero.is-live .sound{transform:translateY(0)}
.sound__off{display:none}
.hero.is-muted .sound__on{display:none}
.hero.is-muted .sound__off{display:inline}

.scrollcue{
  bottom:clamp(20px,3.4vh,36px); left:50%; transform:translate(-50%,8px);
  display:inline-flex; align-items:center; gap:.7em;
  color:var(--paper); mix-blend-mode:difference;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
}
.hero.is-live .scrollcue{transform:translate(-50%,0)}
.scrollcue__arr{display:inline-block; animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* entered state */
.hero.is-live{cursor:default}
.hero.is-live .hero__sheet{opacity:0; transform:scale(1.08)}
.hero.is-live .hero__ui{opacity:0; pointer-events:none}
.hero.is-live .hero__video{transform:scale(1)}

/* ================= JOIN ================= */
.join{
  position:relative; z-index:1;
  background:var(--paper);
  padding:clamp(28px,5vh,64px) clamp(20px,6vw,88px) clamp(32px,6vh,64px);
  text-align:center;
}
.join__head{max-width:none}
.join__title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(38px,5.2vw,68px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:.5em 0 0;
  text-wrap:balance;
}
.join__title em{font-style:italic; font-weight:400; color:var(--gold); display:block}
.join__lede{
  font-size:clamp(16px,1.7vw,21px); line-height:1.5;
  color:var(--ink-70); max-width:40ch; margin:1.4em auto 0;
}

/* learn more + apply flow */
.learn,.submit{
  margin-top:clamp(26px,4vh,40px);
  display:inline-flex; align-items:center; gap:.8em;
  padding:1em 1.6em; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-family:var(--sans); font-weight:600;
  font-size:clamp(11px,1.05vw,13px);
  letter-spacing:.22em; text-transform:uppercase;
  cursor:pointer; border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
@media (hover:hover){
  .learn:hover,.submit:hover{background:transparent; color:var(--ink); transform:translateY(-2px)}
}
.learn__arr{display:inline-block; transition:transform .35s var(--ease)}
.learn[aria-expanded="true"] .learn__arr{transform:none}

.apply{
  margin:clamp(34px,6vh,64px) auto 0;
  padding-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--line);
  max-width:900px;
}
.field{display:flex; flex-direction:column; gap:.35em}
.field--side{max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:.9em}
.pills{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.pill{
  font-family:var(--sans); font-size:13px; letter-spacing:.04em; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:.75em 1.35em; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.pill.is-on{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.field__label{
  font-family:var(--sans); font-weight:600; font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-45);
}
.field input,.field select{
  text-align:center;
  font-family:var(--serif); font-size:clamp(17px,1.7vw,21px); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.25em 0 .3em; width:100%; border-radius:0; line-height:1.2;
  appearance:none; -webkit-appearance:none;
  transition:border-color .35s var(--ease);
}
/* Each field reads as its own distinct cell */
.lead .field,.indiv .field{
  display:flex; flex-direction:column; gap:.5em;
  padding:.85em 1.1em .95em;
  border:1px solid var(--line); border-radius:14px;
  background:transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lead .field:focus-within,.indiv .field:focus-within{
  border-color:var(--ink);
  background:color-mix(in srgb, var(--ink) 3%, transparent);
}
.lead .field input,.indiv .field input,
.lead .field select,.indiv .field select{
  border-bottom:0; padding:0;
}

.field input:focus,.field select:focus{outline:none; border-bottom-color:var(--ink)}
.select{position:relative}
.select__arr{
  position:absolute; right:0; bottom:.35em; pointer-events:none;
  font-size:14px; color:var(--ink-45);
}
.lead,.indiv{
  margin:clamp(26px,4vh,40px) auto 0;
  max-width:720px;
  padding:clamp(26px,4vh,40px) clamp(20px,4vw,44px) clamp(24px,3.5vh,34px);
  border:1px solid var(--line);
  border-radius:24px;
  background:transparent;
}
.lead__grid{
  display:grid; gap:clamp(16px,2vh,20px) clamp(24px,4vw,48px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.lead__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.2em; flex-direction:column; margin-top:clamp(24px,3.5vh,34px)}
.lead__note{
  font-family:var(--sans); font-size:12px; letter-spacing:.06em;
  color:var(--ink-70); margin:0;
}
.indiv__copy{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,26px);
  color:var(--ink); margin:0 0 clamp(22px,3.5vh,32px);
}

.apply [hidden]{display:none}
@media (max-width:640px){
  .lead__grid{grid-template-columns:1fr}
}


/* footer */
.foot{
  margin-top:clamp(56px,10vh,120px);
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.9em 1.6em; align-items:center; justify-content:center; text-align:center;
}
.foot__mark{
  font-family:var(--serif); font-weight:700; text-transform:uppercase;
  font-size:clamp(15px,1.6vw,19px); letter-spacing:.02em;
}
.foot__nav{display:flex; flex-wrap:wrap; gap:.6em 1.4em; justify-content:center}
.foot__tag,.foot__yr,.foot__link{
  font-family:var(--sans); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:600; color:var(--ink-45);
}
.foot__link{text-decoration:none; transition:color .2s ease}
.foot__link:hover{color:var(--ink)}
.foot__yr{width:100%}


@media (max-width:640px){
  .eyebrow--top{top:calc(50% - var(--wm-h,60px)/2 - 22px)}
  .enter{top:calc(50% + var(--wm-h,60px)/2 + 24px)}
  .roster a{grid-template-columns:auto 1fr; gap:14px 18px}
  .roster__go{grid-column:2; justify-self:start; opacity:1; transform:none; margin-top:.2em}
  @media (hover:hover){.roster a:hover .roster__name{transform:translateX(10px)}}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.001s !important; animation:none !important}
}

[hidden]{display:none !important}