/* ==========================================================================
   THE WEEKEND FILM SCHOOL — COMMUNITY JOIN SHEET
   One stylesheet. No build step.

   Same paperwork identity as the gateway at /wfs-join/, reduced to a single
   errand: one community, one code, one button. The tokens block below is
   lifted verbatim from gateway.css so this page can be deployed on its own.
   If that file changes, change this block to match.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Paper stocks, in the WGA script-revision order. */
  --wfs-ink:             #14161A;
  --wfs-ink-70:          #4A4E56;
  --wfs-ink-40:          #8A9099;
  --wfs-stock-white:     #EAE6DC;
  --wfs-stock-blue:      #C3D6E8;
  --wfs-stock-green:     #C6DEC6;
  --wfs-stock-goldenrod: #EFD27A;
  --wfs-stock-cherry:    #E9AEB2;
  --wfs-green:           #17693F;   /* the "go" button. Always this shade —
                                        it never flips with the theme. */
  --wfs-orange:          #FF4B1F;   /* the mark's second colour. Also fixed. */

  /* The clapperboard mark's own two colours. Gold stays fixed in both
     themes — it's the accent, plenty bright on either background. Navy
     is not fixed: at this dark a value it nearly disappears into the ink
     surface, so it lightens a few steps in dark mode purely so the
     silhouette stays visible. Same logo either way, not a re-colour. */
  --logo-navy: #182A45;
  --logo-gold: #F0A93C;

  /* Semantic. Reassigned wholesale for the ink surface further down. */
  --surface:  var(--wfs-stock-white);
  --text:     var(--wfs-ink);
  --text-dim: var(--wfs-ink-70);
  --line:     var(--wfs-ink);
  --accent:   var(--wfs-orange);

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  /* Rules, not shadows. Zero radius, zero shadow, zero gradient. */
  --rule-hair:  2px;
  --rule-mid:   3px;
  --rule-heavy: 6px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  --ease-cut: cubic-bezier(0.2, 0, 0, 1);
  --dur-tap:    120ms;
  --dur-ui:     200ms;
  --dur-reveal: 320ms;

  --pad: clamp(10px, 2.4vw, 22px);
  --shell: 1180px;

  color-scheme: light dark;
}

/* The ink surface. Only the page chrome flips: the coloured panels stay
   paper, because they are paper. Slips on a desk, in either light. */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:  var(--wfs-ink);
    --text:     var(--wfs-stock-white);
    --text-dim: var(--wfs-ink-40);
    --line:     var(--wfs-stock-white);
    /* --accent stays the fixed orange from :root — it is the mark's own
       colour, not a UI colour, so it does not flip with the theme. */
    --logo-navy: #4A6584;   /* lightened only so it reads against near-black */
  }
}

/* --- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  padding: var(--pad);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.28;
  letter-spacing: -0.012em;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

svg { display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: var(--rule-mid) solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: var(--surface); }

.skip {
  position: absolute;
  top: -100px; left: var(--pad);
  z-index: 80;
  padding: 10px 14px;
  background: var(--wfs-ink);
  color: var(--wfs-stock-white);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.skip:focus { top: calc(var(--pad) + 4px); }

.u-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Paper grain. Fixed and non-interactive, so it never repaints on scroll. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.055;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stagger {
  animation: view-in 300ms var(--ease-cut) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
  .stagger { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}

/* --- 3. The sheet ------------------------------------------------------- */
.sheet {
  max-width: var(--shell);
  margin: 0 auto;
  min-height: calc(100dvh - var(--pad) * 2);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
main { flex: 1; }

/* --- 4. Masthead -------------------------------------------------------- */
.mast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s4);
  border-bottom: var(--rule-hair) solid var(--line);
}
.mast__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.mast__mark svg { width: 33px; height: 30px; flex: none; }
.mast__name {
  font-weight: 600;
  font-variation-settings: 'wdth' 100, 'wght' 600;
  font-size: clamp(13px, 3.4vw, 15px);
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.mast__doc {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
  padding-left: var(--s3);
  border-left: var(--rule-hair) solid var(--line);
  margin-left: auto;
}
.mast__serial {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
}
/* The serial is a nicety, not information. First thing to go on a phone. */
@media (max-width: 560px) { .mast__serial { display: none; } }

/* --- 5. Lede ------------------------------------------------------------ */
.lede__h {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 112, 'wght' 900;
  letter-spacing: -0.04em;
  line-height: 0.86;
  font-size: clamp(52px, 13vw, 104px);
}
.lede__sub {
  margin-top: var(--s4);
  max-width: 46ch;
  font-size: clamp(15.5px, 3.6vw, 17.5px);
  line-height: 1.42;
  color: var(--text-dim);
}

/* --- 6. The fork --------------------------------------------------------
   Two doors, lifted from wfs-join/assets/css/gateway.css. There, they lead
   to three different communities; here, to two paths into the same one.
   Both stay clickable after a pick, so switching later costs one tap. */
.doors {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s3);
}
@media (min-width: 620px) { .doors { grid-template-columns: 1fr 1fr; } }

.door {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--s3);
  width: 100%;
  min-height: clamp(176px, 27vh, 240px);
  padding: clamp(16px, 3.4vw, 28px);
  border: var(--rule-hair) solid var(--wfs-ink);
  color: var(--wfs-ink);
  text-align: left;
  transition: transform var(--dur-tap) var(--ease-cut),
              border-width var(--dur-ui) var(--ease-cut),
              opacity var(--dur-ui) var(--ease-cut);
}
.door:active { transform: scale(0.99); }

.door--blue  { background: var(--wfs-stock-blue); }
.door--green { background: var(--wfs-stock-green); }

.door__doc {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--wfs-ink-70);
}
.door__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 112, 'wght' 900;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(28px, 6.4vw, 40px);
}
.door__blurb {
  align-self: end;
  max-width: 36ch;
  padding-right: 40px;
  color: var(--wfs-ink-70);
  font-size: 14.5px;
  line-height: 1.35;
}
.door__cue {
  position: absolute;
  right: clamp(16px, 3.4vw, 28px);
  bottom: clamp(14px, 3vw, 24px);
  font-size: 24px;
  line-height: 1;
}

/* The chosen door gets a heavier rule and a "your pick" tag appended to its
   doc line; the other steps back slightly rather than disappearing, so
   switching stays one visible tap away. */
.door[aria-pressed="true"] { border-width: var(--rule-heavy); }
.door[aria-pressed="true"] .door__doc::after { content: " \00b7 your pick"; }
#fork[data-chosen] .door[aria-pressed="false"] { opacity: 0.7; }

.fork__hint {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
  text-align: center;
}

/* --- 7. Two columns ----------------------------------------------------- */
/* The chit leads on a phone, because a phone can tap it. On a laptop the
   two sit side by side and the chit holds the right-hand column. */
.split {
  margin-top: var(--s7);
  display: grid;
  gap: var(--s6);
}
@media (min-width: 860px) {
  .split {
    grid-template-columns: 1fr minmax(340px, 400px);
    gap: var(--s8);
    align-items: start;
  }
  .chit  { order: 2; position: sticky; top: var(--pad); }
  .about { order: 1; }
}

/* --- 8. The chit --------------------------------------------------------
   Same stock colour as its door: blue to learn, green to teach. Matches the
   gateway's own colour-coding for these two communities. */
.chit {
  padding: var(--s5);
  border: var(--rule-hair) solid var(--wfs-ink);
  color: var(--wfs-ink);
}
.chit--blue  { background: var(--wfs-stock-blue); }
.chit--green { background: var(--wfs-stock-green); }
.chit__doc {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--wfs-ink-70);
}
.chit__title {
  margin-top: var(--s3);
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: 'wdth' 112, 'wght' 900;
  letter-spacing: -0.035em;
  line-height: 0.9;
  font-size: clamp(29px, 7.4vw, 38px);
}

/* --- 9. The code -------------------------------------------------------- */
.qr {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: var(--rule-hair) solid var(--wfs-ink);
}
.qr__code {
  width: min(232px, 62vw);
  padding: 11px;
  border: var(--rule-hair) solid var(--wfs-ink);
  background: #ffffff;
  color: var(--wfs-ink);
}
.qr__code svg {
  width: 100%;
  height: auto;
  /* Feeds out like paper from a printer once the sheet has settled. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-reveal) var(--ease-cut);
}
.qr[data-revealed] .qr__code svg { clip-path: inset(0 0 0 0); }
.qr__cap {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--wfs-ink-70);
  text-align: center;
}

/* --- 10. The form --------------------------------------------------------
   The whole card is one link — not a sentence with a few words underlined
   inside it. Same grammar as .door: a small mono meta line, a bold title,
   an arrow cue that shifts on hover. That's what already reads as "this
   goes somewhere" everywhere else on this page, so reuse it instead of
   inventing a second way to say the same thing. */
.formcard {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s5);
  padding: var(--s4);
  border: var(--rule-hair) solid var(--wfs-ink-40);
  color: var(--text);
  transition: border-color var(--dur-ui) var(--ease-cut);
}
.formcard:hover,
.formcard:focus-visible { border-color: var(--accent); }

.formcard__qr {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 4px;
  border: var(--rule-hair) solid var(--wfs-ink-40);
  background: var(--wfs-stock-white);
  color: var(--wfs-ink);
}
.formcard__qr svg { width: 100%; height: 100%; display: block; }

.formcard__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.formcard__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
}
.formcard__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 106, 'wght' 800;
  letter-spacing: -0.015em;
  font-size: 18px;
  color: var(--text);
}

.formcard__cue {
  flex: none;
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
  transition: transform var(--dur-ui) var(--ease-cut);
}
.formcard:hover .formcard__cue,
.formcard:focus-visible .formcard__cue { transform: translateX(3px); }

/* --- 11. Go --------------------------------------------------------------
   Always green, always "this opens WhatsApp" — the one colour on this page
   that means one specific thing, everywhere it appears. */
.go {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: var(--s5);
  padding: var(--s3) var(--s5);
  border: var(--rule-hair) solid var(--wfs-ink);
  background: var(--wfs-green);
  color: var(--wfs-stock-white);
  font-weight: 700;
  font-variation-settings: 'wdth' 100, 'wght' 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-align: center;
  transition: transform var(--dur-tap) var(--ease-cut);
}
.go:active { transform: scale(0.98); }

.chit__copy {
  display: block;
  min-height: 44px;
  margin: var(--s3) auto 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--wfs-ink-70);
  border-bottom: var(--rule-hair) solid var(--wfs-ink-70);
  transition: color var(--dur-ui) var(--ease-cut), border-color var(--dur-ui) var(--ease-cut);
}
.chit__copy:hover { color: var(--wfs-ink); border-color: var(--wfs-ink); }

/* Only ever shown when the clipboard was refused. Mono, so it reads as a
   value to be copied rather than as a sentence. */
.chit__url {
  margin-top: var(--s3);
  padding: var(--s2) var(--s3);
  border: var(--rule-hair) solid var(--wfs-ink-40);
  background: var(--wfs-stock-white);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--wfs-ink);
  text-align: center;
  word-break: break-all;
  user-select: all;
}

.chit__note {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: var(--rule-hair) solid var(--wfs-ink-40);
  font-size: 13px;
  line-height: 1.4;
  color: var(--wfs-ink-70);
}
.ast { margin-right: 6px; font-weight: 700; }

/* --- 12. What you get / what we handle ----------------------------------
   A short numbered list per path — the poster's numbered points, without
   the poster's density. Squares, not circles: zero radius stays the rule. */
.about__h {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
  padding-bottom: var(--s3);
  border-bottom: var(--rule-hair) solid var(--line);
}
.steps {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s4);
  list-style: none;
}
.step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s3);
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: var(--rule-hair) solid var(--wfs-ink-40);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
}
.step__t { font-size: 15.5px; line-height: 1.42; }

.about__fine {
  margin-top: var(--s5);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 52ch;
}
.about__fine a {
  color: var(--text);
  border-bottom: var(--rule-hair) solid var(--accent);
}

/* --- 13. Footer --------------------------------------------------------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding-top: var(--s4);
  border-top: var(--rule-hair) solid var(--line);
}
.foot__line,
.foot__nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
}
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
@media (min-width: 620px) { .foot__nav { gap: var(--s5); } }
.foot__nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: var(--rule-hair) solid transparent;
  transition: color var(--dur-ui) var(--ease-cut), border-color var(--dur-ui) var(--ease-cut);
}
.foot__nav a:hover { color: var(--text); border-color: var(--accent); }

/* The four words from the poster's right-hand rail. A small stack, not a
   fourth navigation — that's why it isn't a list of links. */
.foot__tags {
  display: flex;
  gap: var(--s2) var(--s4);
  flex-wrap: wrap;
  padding-left: var(--s4);
  border-left: var(--rule-hair) solid var(--line);
}
.foot__tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
}
@media (min-width: 620px) {
  .foot__tags { flex-direction: column; gap: var(--s1); }
}