/* Interactive Lecture · Dunedin 2026 · edition world E, Two Ways of Seeing.
   Contract: brand-system/runs/2026-09-08-interactive-lecture-worlds/06-direction-contract.md
   Law: one band per field. Everything else is interlaced image or the black plain. */

@font-face{font-family:"Unbounded";src:url("assets/fonts/Unbounded-Variable.woff2") format("woff2-variations");font-weight:200 900;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("assets/fonts/FamiljenGrotesk-Variable.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("assets/fonts/MartianMono-Variable.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}

:root{
  --ground:#0A0A0A;
  --band:#F2FF2A;
  --cobalt:#1A2FE0;
  --vermilion:#F0341F;

  --display:"Unbounded",system-ui,sans-serif;
  --text:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --meta:"Martian Mono",ui-monospace,monospace;

  /* interlace: --p is the duty cycle. 0 = Rachel whole, 1 = Chloé whole, .5 = interlaced. */
  --p:.5;
  --period:48px;

  --edge:clamp(20px,4vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0;background:var(--ground);color:var(--band);
  font-family:var(--text);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--band);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--band);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--band);color:var(--ground);
  padding:12px 18px;font-family:var(--meta);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:0}

/* ---------- the band: the only place type sits flat and reversed ---------- */

.band{
  background:var(--band);color:var(--ground);
  padding:clamp(18px,2.4vw,34px) var(--edge);
  width:100%;
}
.band h1,.band h2{
  margin:0;font-family:var(--display);font-weight:900;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  text-wrap:balance;
}
.band h1{font-size:clamp(38px,6.1vw,88px)}
.band h2{font-size:clamp(22px,2.6vw,38px)}
.band .credit{
  margin:clamp(12px,1.4vw,18px) 0 0;
  font-family:var(--display);font-weight:500;font-size:clamp(10px,.86vw,12px);
  letter-spacing:.05em;text-transform:uppercase;line-height:1.6;
}
.band .credit .nb{white-space:nowrap}
/* the band inverts the page: a link here takes the band ink, not the band colour */
.band a{color:inherit}
/* the whole invitation is the target, not just the address; only the address
   carries the underline, so the band looks the same and the click area is the line */
.beat .band h2 a{text-decoration:none}
.beat .band h2 .addr{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ---------- 1 · first screen ---------- */

.first{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}

.lent{position:absolute;inset:0;background:var(--ground)}
.lent img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
/* duty-cycle mask: Chloé's stripe grows from 0 to the full period as --p runs 0 to 1 */
.lent img.over{
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--p) * var(--period)),transparent calc(var(--p) * var(--period)) var(--period));
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(var(--p) * var(--period)),transparent calc(var(--p) * var(--period)) var(--period));
}

.mark{
  position:absolute;top:var(--edge);left:var(--edge);margin:0;z-index:3;
  font-family:var(--meta);font-weight:500;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--band);line-height:1.9;
}
.first .band{position:relative;z-index:2;margin-bottom:clamp(40px,9vh,120px)}

/* ---------- 2 · the two · charged ---------- */

/* one image cut once, at unequal widths, on one shared row so the eyes line up.
   this is the interlace at a stripe width of half the screen. */
.strip{display:grid;grid-template-columns:58fr 42fr;width:100%;height:clamp(300px,42vw,600px)}
.strip figure{margin:0;height:100%;overflow:hidden;background:var(--ground)}
.strip img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}

.two{padding:clamp(34px,4vw,58px) var(--edge) clamp(56px,8vw,120px);
  display:grid;grid-template-columns:58fr 42fr;column-gap:clamp(24px,4vw,72px);row-gap:44px}
.two .who p{margin:0 0 1em;font-size:clamp(17px,1.35vw,19px);max-width:52ch}
.two .who p:last-child{margin-bottom:0}
.two .name{margin:0 0 clamp(16px,1.8vw,26px);display:flex;align-items:flex-start;gap:14px;
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(21px,2.4vw,36px);line-height:1}
.two .swatch{flex:0 0 auto;width:clamp(14px,1.5vw,22px);height:clamp(14px,1.5vw,22px);margin-top:.18em}
.two .swatch.b{background:var(--cobalt)}
.two .swatch.r{background:var(--vermilion)}
.placeholder{font-family:var(--meta);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  display:block;margin-top:16px;line-height:1.9;max-width:44ch}

/* ---------- 3 · the final beat · charged ---------- */

.beat .band{padding-top:clamp(34px,5vw,72px);padding-bottom:clamp(34px,5vw,72px)}
.after-note{padding:clamp(36px,4.4vw,64px) var(--edge) clamp(48px,6vw,88px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,5vw,96px);
  row-gap:32px;align-items:start}
.after-note p{margin:0;max-width:44ch;font-size:clamp(18px,1.6vw,22px);line-height:1.4}
.after-note .prov .studio{display:inline-block;margin-top:1.2em}
.after-note .prov{font-family:var(--meta);font-size:11px;letter-spacing:.06em;line-height:2.1;
  text-transform:uppercase;justify-self:end;text-align:right}

/* ---------- state ---------- */

.only-after{display:none}
[data-state="after"] .only-before{display:none}
[data-state="after"] .only-after{display:block}

/* ---------- responsive ---------- */

@media (max-width:760px){
  :root{--period:26px}

  /* a head crop blown to fill 844px is not a face. on the phone the interlace
     becomes a portrait block at the top and the band sits under it, on the plain. */
  .first{justify-content:flex-start}
  .lent{position:relative;inset:auto;width:100%;height:56svh;min-height:340px}
  .first .band{margin-bottom:0;margin-top:0}
  .band h1{font-size:clamp(34px,9.4vw,44px)}
  /* the attribution starts its own line on the phone; the separator that carried it
     in the run of facts goes with it. */
  .band .credit .sep{display:none}
  .band .credit .nb{display:block;white-space:normal}
  .strip{grid-template-columns:1fr;height:auto}
  .strip figure{height:auto;aspect-ratio:5/4}
  .two,.after-note{grid-template-columns:1fr}
  .after-note .prov{justify-self:start;text-align:left}
  .first .band{margin-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  :root{--p:.5}
}