/* The Acting Retreat 2026, coming-soon page.
   Restyled 2026-08-11 onto the TCDC brand system: navy + mint,
   Archivo / Inter Tight / Instrument Serif, the bracket motif.
   Still one page, one stylesheet, no JavaScript, no build step.
   The old page was a warm gold-on-black palette with no connection
   to the rest of the site. This one borrows the exact tokens and
   devices from tcdc-design-system.css (the hero glow arc, the
   credit marquee, the bracket corners, the serif pull-quote mark)
   so the page reads as the same brand having a bigger moment, not
   a different site. */

:root{
  --navy-deep:  #0A0E26;
  --navy-chrome:#1D1F43;
  --navy:       #151941;
  --abyss:      #05081A;

  --mint:       #A4F4E4;
  --mint-deep:  #6FD8C2;
  --mint-ink:   #168572;

  --bone:       #F4F2EE;
  --paper:      #FFFFFF;
  --slate:      #8B96A8;
  --slate-dim:  #5D6980;

  --surface:      #FFFFFF;
  --surface-tint: #F4FAF8;
  --ink:          #151941;
  --ink-soft:     #3E4A63;

  --font:'Inter Tight',system-ui,sans-serif;
  --display:'Archivo',system-ui,sans-serif;
  --serif:'Instrument Serif',serif;

  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--mint);color:var(--navy-deep);padding:10px 16px;z-index:100;text-decoration:none;font-weight:700}
.skip:focus{left:8px;top:8px}

.shell{width:min(760px,100% - 3rem);margin-inline:auto}

/* ============================================================
   STAGE. The dark cinematic open, same navy-deep the main site
   uses for its hero and closing CTA. This is the one dark moment
   on the page, on purpose, the same rule the rest of the site
   follows: dark bookends, everything else bright.
   ============================================================ */
.stage{
  position:relative;overflow:clip;isolation:isolate;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:7rem 24px 4rem;
  background:var(--navy-deep);color:var(--bone);
}
.stage__wash{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(70% 55% at 50% 8%, rgba(21,25,65,.55), transparent 70%),
    linear-gradient(178deg, var(--abyss) 0%, var(--navy-deep) 55%, var(--abyss) 100%);
}
/* The disciplined arc of light, borrowed from the site's hero */
.stage__arc{
  position:absolute;z-index:-1;right:-22vw;top:2%;width:64vw;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(164,244,228,.28);
  box-shadow:0 0 140px -20px rgba(164,244,228,.20), inset 0 0 180px -70px rgba(164,244,228,.38);
  mask-image:conic-gradient(from 190deg,#000 0deg 96deg,transparent 130deg);
  pointer-events:none;
  animation:fadeIn 1.6s var(--ease-out) both;
}

h1{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(42px,8.6vw,88px);line-height:.96;letter-spacing:-.03em;
  margin:0;color:var(--bone);
  animation:fadeUp .9s .1s var(--ease-out) both;
}
h1 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--mint);text-transform:none;letter-spacing:-.01em;
}

.year{
  font-family:var(--serif);font-style:italic;font-size:clamp(22px,4.2vw,32px);
  color:var(--mint-deep);margin:.6rem 0 0;
  animation:fadeUp .9s .18s var(--ease-out) both;
}

/* Sits under the year now, not above the title: the title should
   land first, the presenting credit reads as a signature under it. */
.badge{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:.5rem 1.4rem;margin:1.8rem 0 0;
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mint);
  animation:fadeUp .8s .24s var(--ease-out) both;
}
.badge::before,.badge::after{
  content:'';position:absolute;width:16px;height:16px;
  border:1.5px solid var(--mint-deep);opacity:.85;pointer-events:none;
}
.badge::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.badge::after{bottom:-2px;right:-2px;border-left:0;border-top:0}

.sub{
  font-size:18px;font-weight:300;color:#CBD3E4;
  max-width:46ch;margin:1.8rem auto 0;
  animation:fadeUp .9s .32s var(--ease-out) both;
}

.status{
  display:inline-block;margin:2.2rem 0 0;padding:.55rem 1.3rem;
  border:1px solid rgba(255,255,255,.22);border-radius:100px;
  font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);
  animation:fadeUp .9s .34s var(--ease-out) both;
}

.status-detail{
  font-size:14px;font-weight:300;color:#CBD3E4;
  max-width:38ch;margin:1rem auto 0;line-height:1.5;
  animation:fadeUp .9s .38s var(--ease-out) both;
}

.cta{
  display:inline-block;margin:1.6rem 0 0;padding:14px 26px;
  background:var(--mint);color:var(--navy-deep);border-radius:2px;
  font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
  animation:fadeUp .9s .42s var(--ease-out) both;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(5,8,26,.4)}

.scrollcue{
  position:absolute;bottom:1.8rem;left:50%;translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-family:var(--display);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate-dim);
}
.scrollcue i{display:block;width:1px;height:42px;background:linear-gradient(var(--mint),transparent);animation:cue 2.4s var(--ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:640px){.scrollcue{display:none}}

/* ============================================================
   MARQUEE. The same credit-ticker device the main site uses
   under its hero. Here it carries the one thing that actually
   proves "this is a big deal": the names. Text only, on purpose;
   the leftover Squarespace photos aren't reliably matched to the
   right teacher and a wrong face next to a real name is worse
   than no photo at all.
   ============================================================ */
.marquee-wrap{background:var(--abyss);padding-block:2.4rem;text-align:center}
.marquee-wrap .eyebrow{
  display:flex;align-items:center;justify-content:center;gap:.85rem;
  font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mint-deep);margin:0 0 1.4rem;
}
.marquee-wrap .eyebrow::before,.marquee-wrap .eyebrow::after{content:'';width:28px;height:1px;background:var(--mint-deep);opacity:.7}
.marquee{border-block:1px solid rgba(255,255,255,.09);overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);padding-block:1.2rem}
.marquee__track{display:flex;gap:3.2rem;width:max-content;animation:slide 34s linear infinite}
.marquee-wrap:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee span{
  font-family:var(--display);font-weight:600;font-size:clamp(.86rem,1.6vw,1.05rem);
  letter-spacing:.14em;text-transform:uppercase;color:#7A86A4;white-space:nowrap;
  display:flex;align-items:center;gap:3.2rem;
}
.marquee span::after{content:'';width:4px;height:4px;background:var(--mint);opacity:.6;border-radius:50%;flex:none}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ============================================================
   THE CASE. White body, the same rhythm as the rest of the site.
   A sourced pull-quote plus a short, factual credibility list,
   nothing invented, nothing that overpromises before dates exist.
   ============================================================ */
.case{background:var(--surface);padding-block:clamp(3.5rem,7vw,6rem)}
.quote{max-width:640px;margin:0 auto;text-align:center}
.quote__mark{font-family:var(--serif);font-size:3.4rem;color:var(--mint-ink);opacity:.4;line-height:.6;display:block;margin-bottom:.6rem}
.quote p{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.4;color:var(--ink);margin:0 0 1.1rem;
}
.quote cite{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dim)}

.eyebrow{
  font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--mint-ink);display:flex;align-items:center;gap:.85rem;margin:0 0 1.2rem;
}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--mint-ink);opacity:.7;flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:'';width:30px;height:1px;background:var(--mint-ink);opacity:.7;flex:none}
.teachers-label{margin:3.4rem 0 1.8rem;padding-top:3rem;border-top:1px solid rgba(21,25,65,.10)}
.teachers{
  max-width:640px;margin:0 auto;text-align:left;
  display:grid;gap:1.5rem 2.2rem;grid-template-columns:1fr;
}
@media(min-width:600px){.teachers{grid-template-columns:1fr 1fr}}
.teacher{padding-left:1rem;border-left:2px solid var(--mint-ink)}
/* Larry Moss leads the list and carries the full width, per David's
   note that he should be at the top, not just first-in-reading-order
   inside a two-column grid where he could visually tie with anyone. */
.teacher:first-child{grid-column:1 / -1;border-left-color:var(--mint)}
.teacher b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:.3rem}
.teacher p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.teacher p em{font-style:italic;color:var(--slate-dim)}

.case-note{
  max-width:640px;margin:2.6rem auto 0;text-align:center;
  font-size:.86rem;color:var(--slate-dim);
}

/* ============================================================
   NOTIFY. Mint carries it, the same way .band carries the classes
   CTA on the main site. Loudest color moment on the page, saved
   for the one action that matters.
   ============================================================ */
.notify-band{background:var(--mint);color:var(--navy-deep);padding-block:clamp(3rem,6vw,5rem)}
.notify{max-width:520px;margin:0 auto;text-align:center}
.notify h2{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,38px);letter-spacing:-.02em;margin:0 0 .7rem;
}
.notify-lede{font-size:15px;margin:0 0 2rem;color:rgba(5,8,26,.72)}

.notify form{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.notify input[type=email]{
  flex:1 1 240px;min-width:0;padding:14px 16px;
  background:var(--surface);border:1px solid rgba(5,8,26,.18);border-radius:2px;
  color:var(--navy-deep);font-size:16px;font-family:inherit;
}
.notify input[type=email]::placeholder{color:#7A86A4}
.notify input[type=email]:focus{outline:2px solid var(--navy-deep);outline-offset:1px}

.btn{
  flex:0 0 auto;background:var(--navy-deep);color:var(--mint);
  padding:14px 26px;border:0;border-radius:2px;
  font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(5,8,26,.4)}

.bot-trap{position:absolute;left:-5000px}
.fineprint{font-size:12px;margin:1rem 0 0;color:rgba(5,8,26,.6)}

/* ============================================================
   FOOTER. Dark, matches the main site's footer exactly: same
   navy, same logo, same legal line.
   ============================================================ */
.foot{background:var(--navy-deep);color:var(--bone);padding-block:2.8rem;text-align:center}
.foot__mark{font-family:var(--display);font-weight:800;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);margin:0 0 1.4rem;opacity:.92}
.foot .backlink{font-size:14px;color:var(--slate);margin:0 0 1.6rem}
.foot .backlink a{color:var(--mint-deep);text-decoration:none;border-bottom:1px solid rgba(111,216,194,.35)}
.foot .backlink a:hover{color:var(--mint)}
.foot .social{display:flex;justify-content:center;gap:20px;margin-bottom:1.4rem;flex-wrap:wrap}
.foot .social a{color:var(--slate);text-decoration:none;font-size:13px}
.foot .social a:hover{color:var(--bone)}
.foot .legal{margin:0;font-size:12px;color:var(--slate-dim);line-height:1.7}

@keyframes fadeUp{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  h1,.badge,.year,.sub,.status,.stage__arc{animation:none;opacity:1;transform:none}
}

@media(max-width:640px){
  .stage{padding:6rem 20px 3.5rem}
  .sub{font-size:16px}
  .notify form{flex-direction:column}
  .btn{width:100%}
  .credits{gap:1.2rem}
}