/* Outfit, served from this site (/fonts/) since 19 Oct 2026, not from Google Fonts: one fewer
   connection before the first paint. Two files, both the whole variable font (every weight from
   one file), split the way Google splits it: plain Latin, and the extra Latin letters. */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-v15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/outfit-v15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* SEC website styles.

   The skin is the club's brand kit (v1.0): Outfit, white and black, one orange, 4px corners,
   1px rules, no shadows, no gradients. Change those in the kit first, then here.

   The geometry is copied from three references, measured at 375px wide on 4 Oct 2026. Each
   block below says which one, with the numbers, so it can be checked against the original:
     socratica.info          header, hero, the labelled parts, the footer columns
     a luma.com event page   the date rows and the Registration box
     luma.com/toronto        the month-by-month list
     noomoagency.com         the load screen
   Where the kit or a phone's tap size overrules a reference, the line says so. */

:root {
  --white: #FFFFFF; --black: #000000;
  --orange-l: #FF8033;            /* on white: fills, rules, the one headline word. Never small text */
  --orange-d: #FFA770;            /* on black: headlines, numbers, labels. Never body text */
  --ink: #111111; --body: #3A3A3A; --muted: #6B6B6B; --rule: #E4E4E4; --panel: #F5F5F5;
  --d-body: #E6E6E6; --d-muted: #9A9A9A; --d-rule: #2A2A2A;
  --radius: 4px;
  --edge: 24px;                   /* Socratica's hero margin */
  --inset: 32px;                  /* Socratica's margin for the labelled parts */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--white); color: var(--body);
  font-family: "Outfit", system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--ink); text-underline-offset: 2px; }
strong { font-weight: 600; color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dark :focus-visible { outline-color: var(--white); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 12px 16px; z-index: 30; }
.skip:focus { left: var(--edge); top: 8px; }
[tabindex="-1"]:focus { outline: none; }          /* a part of the page that a link jumped to, not a control */

/* ── load screen · noomoagency.com ────────────────────────────────────────
   Noomo: a full sheet in a pale tint of the page colour, the logo 180px wide in the centre,
   and the sheet's bottom edge rising to the top over about one second, starting just after
   the page has loaded. Kit: the sheet is the kit's pale neutral, the logo is the SEC wordmark. */
.loader { display: none; }
html.intro .loader, html.arrive .loader, html.leave .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--panel);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1000ms cubic-bezier(.65, 0, .35, 1);
}
.loader img { width: 180px; height: auto; }
html.intro.go .loader, html.arrive.go .loader { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
/* A safety net: if the script that lifts the sheet never arrives, the sheet lifts itself after
   4 seconds, so a failed download can never leave the page covered. */
html.intro .loader, html.arrive .loader { animation: lift 1ms linear 4s forwards; }
@keyframes lift { to { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); visibility: hidden; } }

/* Moving between pages: the same sheet, with the portfolio's timings. It comes down over the
   page being left in 520ms, and lifts off the page arrived at in 640ms. */
html.arrive .loader { transition-duration: 640ms; }
html.leave .loader { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); transition-duration: 520ms; }
html.leave.shut .loader { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ── type ─────────────────────────────────────────────────────────────── */
.eyebrow {
  font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before {                /* the kit's bar, in place of Socratica's outlined pill */
  content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 1px;
  background: var(--orange-l); vertical-align: middle; margin-right: 10px;
}
.display { font-weight: 500; font-size: 64px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.hl { font-weight: 700; background: var(--orange-l); color: var(--ink); padding: 0 .14em; border-radius: 3px; }
.statement { font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -.01em; color: var(--ink); }   /* Socratica: 20/28 */
.small { font-size: 14px; line-height: 21px; color: var(--body); }   /* Socratica sets these at 11px; 14px is the smallest the kit allows for sentences */
.say { font-size: 16px; line-height: 24px; color: var(--body); }     /* Socratica: 16/24 */

/* ── buttons · Socratica: 12px capitals, 8px 16px, stacked, 4px apart ──── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;   /* 33px tall there; 44px here, the tap size */
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--white);
  font: inherit; font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn.quiet { background: var(--white); color: var(--ink); border-color: #D1D5DC; }
.btn.wide { display: flex; justify-content: center; width: 100%; }
.btn.off { background: var(--panel); border-color: var(--rule); color: var(--muted); cursor: default; }
.dark .btn { background: var(--orange-d); border-color: var(--orange-d); color: var(--ink); }
.dark .btn.off { background: transparent; border-color: var(--d-rule); color: var(--d-muted); }

/* ── header · Socratica: mark at 16/20, a 40px black button at 12 from the right ── */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding: 0 10px 0 16px; background: var(--white);
}
.top .logo img { height: 40px; width: auto; }                 /* 32px there; the kit's minimum is 40 */
.top .actions { display: flex; align-items: center; gap: 4px; }
.links { display: none; }                                      /* the row of links is for wide screens */
.top .join {                                                   /* not on Socratica: the plan keeps Join in the header */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.menu summary {
  list-style: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 40px; height: 40px; margin: 2px; border-radius: var(--radius); background: var(--black); cursor: pointer;   /* round there; 4px corners are the kit's */
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 14px; height: 2px; background: var(--white); }
.menu nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--rule); padding: 8px var(--edge) 16px; }
.menu nav a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--rule); font-weight: 600; font-size: 20px; text-decoration: none; }
.menu nav li:last-child a { border-bottom: 0; }

/* ── hero · Socratica ─────────────────────────────────────────────────────
   There: the big mark's box starts 120px under the header and is 200px tall; the sentence
   starts 32px under the mark, 218px wide; the buttons 16px under that; the photograph 32px
   under the buttons, edge to edge, 375 by 117. */
.hero { padding-top: 104px; }                                  /* 72 header + 104 = 176, where the mark starts there */
.hero .display { display: flex; align-items: center; padding: 0 var(--edge); min-height: 192px; }
.hero .display > span { display: block; }
.hero .say { margin: 32px var(--edge) 0; max-width: 218px; }
.hero .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 16px var(--edge) 0; }
.hero .cta { display: grid; justify-items: start; gap: 4px; }
.hero .aside { min-width: 0; text-align: right; font-size: 12px; line-height: 16px; color: var(--ink); text-decoration: none; padding: 6px 0; }
.hero .aside strong, .hero .aside .on { display: block; font-weight: inherit; color: inherit; }
.hero .aside .tag { display: block; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.strip { margin-top: 32px; }
.strip img { width: 100%; aspect-ratio: 375 / 117; object-fit: cover; object-position: 50% 62%; }   /* no fade into the page: the kit has no gradients */

/* ── the labelled parts · Socratica ───────────────────────────────────────
   There: a label, then the statement about 24px under it, then a small paragraph 8 to 20px
   under that, then a photograph from edge to edge. The first part after the hero starts 160px
   under the photograph and is centred; the rest start 96px under the photograph above them. */
.part { padding: 96px var(--inset) 0; }
.part .eyebrow { margin-bottom: 24px; }
.part .statement + .small { margin-top: 12px; }
.part.centred { padding-top: 160px; text-align: center; }
.part.centred .statement { max-width: 286px; margin-inline: auto; }
.part.centred .small { max-width: 263px; margin-inline: auto; }
.part.centred .eyebrow::before { display: block; margin: 0 auto 12px; }
.shot, .cover, .side { margin-top: 24px; }
.shot, .cover, .side { margin-inline: calc(var(--inset) * -1); }      /* edge to edge on a phone */
.shot img, .cover img, .side img { width: 100%; aspect-ratio: 375 / 223; object-fit: cover; }   /* Socratica's second photograph: 375 by 223 */
.pair > .small { margin-top: 12px; }

/* ── date rows · a Luma event page ────────────────────────────────────────
   There: a 36px ruled tile, 12px, then two lines: 14/21 in weight 500, and a quieter line
   under it. Rows sit 18px apart. */
.when { margin-top: 32px; display: grid; gap: 18px; }
.when li { display: flex; align-items: center; gap: 12px; }
.when li > span:last-child { display: grid; font-size: 14px; line-height: 21px; color: var(--muted); }
.when strong { font-weight: 500; }
.tile {
  flex: none; display: grid; place-items: center; align-content: center; width: 36px; height: 36px;
  border: 1px solid var(--rule); border-radius: var(--radius);     /* 8px there */
  font-weight: 500; font-size: 14px; line-height: 16px; color: var(--ink);
}
.tile b { display: block; font-weight: 600; font-size: 11px; line-height: 11px; text-transform: uppercase; color: var(--muted); }   /* about 8px there; 11px is the kit floor */
.tile.pin::before { content: ""; width: 8px; height: 8px; border: 2px solid var(--ink); border-radius: 50%; }
.tile.seal { width: 28px; height: 28px; }
.tile.seal::before { content: ""; width: 10px; height: 2px; background: var(--ink); }

/* ── the Registration box · a Luma event page ─────────────────────────────
   There: one ruled box the full width of the column. A head band that says "Registration"
   (14/21, quiet). Then a 28px tile with the state in weight 500 and a quieter line under it,
   then a paragraph at 16/24, then one full-width button. Padding 12px 16px. */
.reg { margin-top: 24px; border: 1px solid var(--rule); border-radius: var(--radius); }   /* 24px corners there */
.reg-head { padding: 9px 16px; background: var(--panel); border-bottom: 1px solid var(--rule); font-weight: 500; font-size: 14px; line-height: 21px; color: var(--muted); }
.reg-body { padding: 12px 16px; }
.reg-state { display: flex; align-items: center; gap: 12px; }
.reg-state > span:last-child { display: grid; font-size: 14px; line-height: 21px; color: var(--muted); }
.reg-state strong { font-weight: 500; }
.reg-body > p { margin: 28px 0 12px; font-size: 16px; line-height: 24px; color: var(--ink); }

/* ── the year · Luma's event list ─────────────────────────────────────────
   There: a dashed rail down the left with a dot beside each day; the day in weight 500 and
   the weekday after it, quieter, both at 16/24; 12px under that, one card per event, set in
   from the rail. Inside a card, 13px in: a quiet line at 14px, the name in weight 500, a
   quiet by-line, then the state at 12px in weight 500. A 90px picture sits on the right. */
.year { margin-top: 32px; margin-left: -10px; border-left: 2px dashed var(--rule); padding-left: 17px; display: grid; gap: 28px; }
.year > li { position: relative; }
.year > li::before {                                            /* the dot on the rail */
  content: ""; position: absolute; left: -22px; top: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--muted);
}
.year > li.now::before { background: var(--orange-l); border-color: var(--orange-l); }
.year .day { font-size: 16px; line-height: 24px; color: var(--muted); }
.year .day strong { font-weight: 500; margin-right: 4px; }
.ev { display: block; margin-top: 12px; padding: 13px; border-radius: var(--radius); background: var(--panel); text-decoration: none; color: inherit; }   /* 12px corners there */
.ev .time, .ev .by { font-size: 14px; line-height: 21px; color: var(--muted); }
.ev h3 { margin-top: 2px; font-weight: 500; font-size: 20px; line-height: 24px; color: var(--ink); }   /* 18/21.6 there; 20 is the kit's nearest step */
.ev .by { margin-top: 4px; }
.ev .state { margin-top: 12px; font-weight: 500; font-size: 12px; line-height: 12px; color: var(--ink); }   /* coloured there; orange is never small text in the kit */
.ev.past h3 { font-weight: 400; color: var(--muted); }
.ev.pic { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 12px; align-items: start; }
.ev h3 { overflow-wrap: anywhere; }
.ev.pic img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius); }

/* ── motion ───────────────────────────────────────────────────────────────
   Each timing is the one measured on the site named beside it (4 Oct 2026). Hover rules sit
   inside (hover: hover) so they never stick after a tap on a phone; the press rules below
   them are what a finger gets instead. */

/* Buttons · socratica.info: the fill changes over .5s on cubic-bezier(.4, 0, .2, 1); black
   goes to a warm grey (#706F6B there, the kit's #6B6B6B here), the pale one to #F5F5F5; the
   arrow moves 2px. */
.btn { transition: background-color .5s cubic-bezier(.4, 0, .2, 1), border-color .5s cubic-bezier(.4, 0, .2, 1), color .5s cubic-bezier(.4, 0, .2, 1); }
.btn span[aria-hidden] { display: inline-block; transition: translate .5s cubic-bezier(.4, 0, .2, 1); }
.menu summary, .top .join { transition: background-color .5s cubic-bezier(.4, 0, .2, 1), color .5s cubic-bezier(.4, 0, .2, 1); }

/* Cards · luma.com: the edge changes over .3s on the same curve. The kit says the edge goes to
   ink and nothing else moves. */
.ev { border: 1px solid transparent; transition: border-color .3s cubic-bezier(.4, 0, .2, 1); }

/* Links · stripe.com: colour over .3s on cubic-bezier(.25, 1, .5, 1). */
.footer a, .menu nav a, .hero .aside { transition: color .3s cubic-bezier(.25, 1, .5, 1); }

@media (hover: hover) {
  .btn:not(.off):hover { background: var(--muted); border-color: var(--muted); }
  .btn.quiet:hover { background: var(--panel); border-color: #D1D5DC; }
  .dark .btn:not(.off):hover { background: var(--white); border-color: var(--white); }
  .btn:not(.off):hover span[aria-hidden] { translate: 2px 0; }
  .menu summary:hover { background: var(--muted); }
  .top .join:hover, .menu nav a:hover, .hero .aside:hover { color: var(--muted); }
  a.ev:hover { border-color: var(--ink); }
  .footer a:hover { color: var(--orange-d); }
}

/* Pressing · vercel.com and linear.app change colour in .1s. The same colours as hover, but
   quick, so a tap is answered at once. */
.btn:not(.off):active { background: var(--muted); border-color: var(--muted); transition-duration: .1s; }
.btn.quiet:active { background: var(--panel); transition-duration: .1s; }
.dark .btn:not(.off):active { background: var(--white); border-color: var(--white); }
.menu summary:active { background: var(--muted); transition-duration: .1s; }
a.ev:active { border-color: var(--ink); transition-duration: .1s; }

/* Fading in on the way down · stripe.com: opacity only, .5s, cubic-bezier(.33, 1, .68, 1).
   The script adds .rv to what is below the screen and .in when it arrives. */
.rv { opacity: 0; transition: opacity .5s cubic-bezier(.33, 1, .68, 1); }
.rv.in { opacity: 1; }

/* The dot beside this month · the "ping" on socratica.info (Tailwind's): it grows to twice
   its size and fades, once a second, on cubic-bezier(0, 0, .2, 1). */
.year > li.now::after {
  content: ""; position: absolute; left: -22px; top: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-l); animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* Smooth scrolling · the portfolio's Lenis. These three lines are what the library asks for. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Less motion, when the device asks for it: no fades, no ping, no slow colour changes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; }
}

/* ── the evidence row (the kit's own device) ──────────────────────────── */
.evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0 12px; }
.evidence > div { border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 12px; }
.evidence b { display: block; font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.evidence span { font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ── the dark closing block: join, then Socratica's two footer columns ─── */
.dark { margin-top: 96px; background: var(--black); color: var(--d-body); }
.dark a { color: var(--white); }
.dark .eyebrow { color: var(--d-muted); margin-bottom: 24px; }
.dark .eyebrow::before { background: var(--orange-d); }
.dark .display { color: var(--white); font-size: 46px; }
.dark .hl { background: none; color: var(--orange-d); padding: 0; }
.dark .say { color: var(--d-body); margin: 24px 0 16px; max-width: 280px; }
.dark .small { color: var(--d-muted); margin-top: 16px; }
section.join { padding: 96px var(--inset) 64px; }
.footer { border-top: 1px solid var(--d-rule); padding: 64px 40px 24px; }      /* Socratica: columns start 40px in, at 40 and 221 */
.footer .cols { display: grid; grid-template-columns: 181px 1fr; row-gap: 40px; margin-bottom: 24px; }
.footer .cols .logo { grid-column: 1 / -1; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; }   /* 12px on a 26px line there; 44px is the tap size */
.footer .logo { display: inline-flex; padding: 7px 0; justify-self: start; }
.footer .logo img { height: 40px; width: auto; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--d-rule); padding-top: 12px; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-muted); }

/* ── the pages beside Home ────────────────────────────────────────────────
   Each opens with Home's hero frame without the photograph, then the same parts. Cards are the
   month list's cards, used for programs, steps and ways to reach the club. */
.hero.page { padding-bottom: 8px; }
.hero.page .say { max-width: 601px; }                  /* Home keeps Socratica's narrow column; these pages have more to say */
.cards { margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.cards .ev { margin-top: 0; }
.ev .what { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--body); }
.part .small a { text-underline-offset: 3px; }
.links a[aria-current], .menu nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.footer h2 { padding-bottom: 16px; font-weight: 600; font-size: 11px; line-height: 20px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-muted); }

/* ── the smallest phones (under 360px): step the headline down so no word is cut ── */
@media (max-width: 359px) {
  .display { font-size: 46px; }
  .hero .display { min-height: 138px; }
  .dark .display { font-size: 36px; }
  .footer .cols { grid-template-columns: 1fr 1fr; }
  .ev.pic { grid-template-columns: minmax(0, 1fr); }
  .ev.pic img { display: none; }
  .evidence { gap: 4px; }
  .evidence > div { padding: 12px 8px; }
  .evidence b { font-size: 28px; }
  .evidence span { letter-spacing: .06em; }
  .hero .row { display: grid; justify-items: start; }
  .hero .aside { text-align: left; }
}

/* ── tablet, from 768px · measured on the references at 768 wide ─────────
   Socratica there: the mark's box runs from 78 to 528 and the sentence starts at 528, 345
   wide, at 20/28. The two buttons sit side by side, 49 tall, padding 12px 24px. The photograph
   starts 11 under them. Statements are 36/40. Parts start 80 in. The third part puts a tall
   photograph on the left (207 wide from 64) and its words on the right (from 371). Footer
   columns start at 56 and 216. */
@media (min-width: 768px) {
  :root { --edge: 32px; --inset: clamp(80px, calc(80px + (100vw - 768px) * .1875), 176px); }   /* 80 at 768, 176 at 1280 */
  .display { font-size: 84px; }
  .hero { padding-top: 6px; }
  .hero .display { min-height: 450px; }
  .hero .say { margin-top: 0; max-width: 345px; font-size: 20px; line-height: 28px; }
  .hero .cta { display: flex; gap: 5px; }
  .hero .row { position: relative; }
  .hero .aside { position: absolute; right: 0; bottom: 0; padding: 0; }   /* beside the buttons without pushing the photograph down */
  .btn { min-height: 49px; padding: 12px 24px; }
  .strip { margin-top: 11px; }
  .statement { font-size: 36px; line-height: 40px; letter-spacing: -.025em; }
  .part .small, .dark .say { max-width: 568px; }
  .part.centred { padding-inline: var(--edge); }
  .part.centred .statement { max-width: 617px; }
  .part.centred .small { max-width: 641px; }
  .when, .reg { max-width: 566px; }                     /* Luma's column */
  .year { margin-left: -1px; padding-left: 16px; max-width: 614px; }   /* Luma: rail at 175, label and 596px cards from 193 */
  .year > li::before, .year > li.now::after { left: -21px; }
  .ev .time { font-size: 16px; line-height: 24px; }      /* 16px on Luma from here up */
  .evidence { max-width: 596px; gap: 12px; }
  .evidence > div { padding: 24px; }
  .evidence b { font-size: 46px; }
  .split { display: grid; grid-template-columns: 207px 1fr; column-gap: 100px; align-items: center; padding-left: 64px; padding-right: var(--edge); }
  .split .side { order: -1; margin: 0; }
  .split .side img { aspect-ratio: 207 / 476; border-radius: var(--radius); }
  .split .statement { font-size: 28px; line-height: 36px; }      /* 30/36 there; 28 is the kit's step */
  .cover { margin-inline: 0; max-width: 566px; }
  .cover img { border-radius: var(--radius); }
  .dark .display { font-size: 64px; }
  section.join { padding-inline: var(--inset); }
  .footer { padding-inline: 56px; }
  .footer .cols { grid-template-columns: 160px 160px 1fr; }
  .footer .cols .logo { grid-column: auto; justify-self: end; align-self: start; }
  .hero.page .display { min-height: 0; padding-block: 96px 40px; }
  .cards { max-width: 614px; }
}

/* ── desktop, from 1024px · one grid ──────────────────────────────────────
   Looked at on a real 1440 by 900 screen on 4 Oct 2026, the first desktop layout had six
   different left edges (16, 32, 56, 80, 176, 256) and left the right half of the screen empty
   for most of the page. From here up everything hangs on one centred column:
     1216px wide    the width of Socratica's hero (its text starts 112px in on a 1440 screen
                    and 32px in on a 1280 one)
     44px           the least margin it ever gets: the kit's web margin, not Socratica's 32
     64px           the space between two columns
   The parts keep their references' shapes (Luma's two columns for the event, Socratica's
   words beside a photograph) but share that column's edges. Where a reference is left behind
   for the sake of the grid, the line says so. */
@media (min-width: 1024px) {
  :root { --edge: 44px; --gutter: max(var(--edge), calc((100% - 1216px) / 2)); --gap: 64px; }

  /* Header: a row of links, as on ycombinator.com, hackthenorth.com and luma.com. Socratica
     keeps its menu button at every width; with room for four links there is no reason to hide them. */
  .top { padding: 0 var(--gutter); }
  .top .actions { gap: 8px; }
  .menu { display: none; }
  .links { display: flex; align-items: center; gap: 4px; margin-right: 12px; }
  .links a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    font-weight: 500; font-size: 14px; text-decoration: none; transition: color .3s cubic-bezier(.25, 1, .5, 1);
  }
  .top .join { padding: 0 20px; border-radius: var(--radius); background: var(--ink); color: var(--white); }

  /* Hero: Socratica's, inside the column. The caption beside the buttons was 12px type alone
     in a corner; here it is a ruled card, so the right side of the screen carries the next date. */
  .hero .display { padding: 0 var(--gutter); min-height: 380px; }   /* 450 on a tablet held upright; a laptop screen is shorter */
  .hero .say, .hero .row { margin-inline: var(--gutter); }
  .hero .aside {
    display: grid; gap: 2px; min-width: 296px; padding: 16px 20px; border: 1px solid var(--rule); border-radius: var(--radius);
    text-align: left; font-size: 14px; line-height: 21px; color: var(--muted);
    transition: border-color .3s cubic-bezier(.4, 0, .2, 1);
  }
  .hero .aside .tag { margin-bottom: 6px; }
  .hero .aside strong { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--ink); }
  .strip img { max-height: 480px; }                      /* on a very wide screen the strip stops growing */

  /* Type: the short paragraphs go up to the kit's body size. Socratica sets them at 14px on a
     desktop too; at arm's length from a laptop, under a 36px statement, 14 reads as a footnote. */
  .small { font-size: 16px; line-height: 24px; }
  .part { padding: 128px var(--gutter) 0; }
  .part.centred { padding-top: 160px; }
  .part .statement + .small { margin-top: 16px; }
  .part.centred .small { max-width: 568px; }

  /* Next up · Luma's event page: the cover on the left, the column on the right. Luma's pair is
     929px wide and floats in the middle; here the column keeps Luma's 566px and the photograph
     takes the rest of the grid, as tall as the column beside it, so both end on one line. */
  #next { display: grid; grid-template-columns: minmax(0, 1fr) 566px; column-gap: var(--gap); align-items: start; }
  #next > * { grid-column: 2; }
  #next .cover { grid-column: 1; grid-row: 1 / span 6; align-self: stretch; position: relative; margin: 0; max-width: none; min-height: 332px; }
  #next .cover img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-position: 28% 50%; }

  /* The year · Luma's list. On Luma the list has a sidebar beside it; here the heading is that
     sidebar and stays in view while the months scroll past. A month's events sit side by side,
     so October is one row and not three. */
  #year { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start; }
  #year .head { position: sticky; top: 120px; }
  .year { margin: 0; max-width: none; }
  .year > li { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .year .day { grid-column: 1 / -1; }
  .year .ev { margin-top: 0; }
  .year .ev.pic { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 120px; }
  .ev.pic img { width: 120px; height: 120px; }           /* Luma's list puts 120px pictures in its cards */

  /* Compete, Learn, Belong, the numbers: words on one side, a photograph or the facts on the
     other, on alternate sides. Socratica's third part is the model (a photograph beside the
     words); its edge-to-edge second photograph is left behind, because at 1440 wide it was 857px
     tall, filled the whole screen and showed mostly chair legs. The kit puts photographs
     beside the text on a light ground. */
  .duo, .pair, .split { display: grid; column-gap: var(--gap); }
  .duo, .pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .duo { align-items: center; }
  .pair { align-items: start; }
  .duo .shot { margin: 0; }
  .duo .shot img { aspect-ratio: 3 / 2; border-radius: var(--radius); }
  .pair > .small { margin: 0; padding-top: 53px; }       /* its first line sits on the statement's baseline: 16 + 24 down to the statement, then 30 - 17 */
  .pair .evidence { max-width: none; margin: 0 0 12px; }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .split .side img { aspect-ratio: 1 / 1; }
  .split .statement { font-size: 36px; line-height: 40px; }

  /* Join and the footer, on the same edges. */
  section.join { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap); align-items: end; padding: 128px var(--gutter) 96px; }
  .dark .eyebrow { margin-bottom: 32px; }
  .dark .say { margin-top: 0; }
  .footer { padding-inline: var(--gutter); }

  /* The pages beside Home: a shorter hero, and a heading that stays in view beside its cards. */
  .hero.page .display { min-height: 0; padding-block: 72px 40px; }
  .beside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); align-items: start; }
  .beside .head { position: sticky; top: 120px; }
  .cards { margin: 0; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (hover: hover) {
  .links a:hover { color: var(--muted); }
  .top .join:hover { background: var(--muted); color: var(--white); }
  .hero .aside:hover { border-color: var(--ink); color: var(--muted); }
}

/* ── from 1280px · Socratica's hero numbers, measured at 1280 wide ────────
   There: the mark's box runs from 138 to 463 and the sentence starts at 444, 601 wide, at
   30/36. Buttons are 14px. The photograph starts 71 under them. Footer columns start 288 apart. */
@media (min-width: 1280px) {
  .display { font-size: 108px; }
  .hero { padding-top: 66px; }
  .hero:not(.page) .display { min-height: 306px; }
  .hero.page .say { min-height: 0; }
  .hero:not(.page) .say { min-height: 108px; }
  .hero .say { max-width: 601px; font-size: 28px; line-height: 36px; }   /* 30/36 there; 28 is the kit's step */
  .btn { font-size: 14px; }
  .strip { margin-top: 71px; }
  .evidence > div { padding: 32px 24px; }
  .evidence b { font-size: 64px; }
  .dark .display { font-size: 84px; }
  .footer .cols { grid-template-columns: 288px 289px 1fr; }
}

/* A short laptop screen (720 to 800 tall). Socratica's hero runs 688px before its photograph,
   which on these screens leaves the photograph off the first screen. Close the gaps so it shows. */
@media (min-width: 1280px) and (max-height: 800px) {
  .hero { padding-top: 24px; }
  .hero:not(.page) .display { min-height: 250px; }
  .strip { margin-top: 40px; }
}

/* ══ second look, 4 Oct 2026 ═══════════════════════════════════════════════
   Ian: the logo is too big, and the landing page is boring and plain. Eighteen reference
   sites were looked at again at 1440 by 900. What they share, and what is copied here:
     a filled first screen     slush.org, luma.com, uofthacks.com: a photograph or video edge to
                               edge, words set over it at the bottom left
     a band of moving words    slush.org, calhacks.io (61px tall there, and here)
     photographs as objects    hackclub.com's tilted prints, uofthacks.com's polaroid
     the date in the hero      stripe.com/sessions, hackthenorth.com
     a small logo              20 to 35px tall on eleven of them; Socratica's is 32, Linear's 32
     the mark set large to     socratica.info, config.figma.com
     close the page
   The kit's own web skeleton is a dark hero, with the photograph under a 62% scrim and one
   more dark block allowed (the join and footer). Everything stays in the kit's colours. */

/* The logo: 32px, Socratica's and Linear's size. ⚠ The kit's floor is 40px, the smallest at
   which the triangle's gradient still reads; this is under it, on Ian's word. */
.top .logo { display: inline-flex; align-items: center; min-height: 44px; }   /* the mark is 32 tall; the link is still a full tap */
.top .logo img { height: 32px; }
.loader img { width: 120px; }

/* ── the dark opening ─────────────────────────────────────────────────── */
.lead {
  position: relative; isolation: isolate; display: grid; align-items: end; overflow: hidden;
  min-height: calc(100svh - 72px - 48px); margin-top: 0;     /* the screen, less the header and the band under it */
}
.lead.page { min-height: 52svh; }
.lead .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .62); }   /* the kit's scrim */
.lead .in { min-width: 0; padding: 96px var(--edge) 32px; }
.lead .eyebrow { margin-bottom: 20px; color: var(--d-body); }
.lead .display { font-size: 64px; }
.lead .say { margin: 24px 0 0; max-width: 520px; color: var(--white); }
.lead .row { display: grid; gap: 16px; margin-top: 24px; }
.lead .cta { display: flex; flex-wrap: wrap; gap: 8px; }
.lead .btn.quiet { background: transparent; border-color: rgba(255, 255, 255, .5); color: var(--white); }
.lead .btn.off { background: rgba(0, 0, 0, .4); border-color: rgba(255, 255, 255, .35); color: var(--d-body); }
.lead .aside {
  display: grid; gap: 2px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius);
  background: rgba(0, 0, 0, .4); font-size: 14px; line-height: 21px; color: var(--d-body); text-decoration: none;
  transition: border-color .3s cubic-bezier(.4, 0, .2, 1);
}
.lead .aside .tag { margin-bottom: 4px; font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--orange-d); }
.lead .aside strong { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--white); }
@media (hover: hover) {
  .lead .btn.quiet:not(.off):hover { background: rgba(255, 255, 255, .14); border-color: var(--white); color: var(--white); }
  .lead .aside:hover { border-color: var(--white); }
}
.lead .btn.quiet:not(.off):active { background: rgba(255, 255, 255, .14); border-color: var(--white); color: var(--white); }

/* The opening's words rise into place as the sheet lifts. It runs by itself, so nothing is
   left hidden if a script fails; with reduced motion it does not run at all. */
.rise { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0s); }
html.intro .rise { animation-delay: calc(.45s + var(--d, 0s)); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ── the band of moving facts ─────────────────────────────────────────── */
.ticker { overflow: hidden; background: var(--orange-l); color: var(--ink); cursor: pointer; }
.ticker .run { display: flex; width: max-content; animation: run 40s linear infinite; }
.ticker.paused .run { animation-play-state: paused; }
.ticker span { position: relative; flex: none; padding: 0 26px; font-weight: 600; font-size: 16px; line-height: 48px; white-space: nowrap; }
.ticker span::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--ink); }
@keyframes run { to { transform: translateX(-50%); } }
@media (hover: hover) { .ticker:hover .run { animation-play-state: paused; } }

/* ── three picture cards ──────────────────────────────────────────────── */
.trio { display: grid; gap: 16px; margin-top: 32px; }
.tile3 { overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); transition: border-color .3s cubic-bezier(.4, 0, .2, 1); }
.tile3 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.tile3 > div { padding: 20px; }
.tile3 .num { margin-bottom: 12px; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tile3 h3 { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--ink); }
.tile3 h3 + p { margin-top: 8px; font-size: 14px; line-height: 21px; }
@media (hover: hover) { .tile3:hover { border-color: var(--ink); } }

/* ── last year in pictures: a row to swipe or drag ────────────────────── */
.reel {
  display: flex; align-items: flex-start; gap: 16px; margin: 24px 0 0; padding: 10px var(--inset) 18px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--inset); scrollbar-width: none; cursor: grab;
}
.reel::-webkit-scrollbar { display: none; }
.reel.dragging { cursor: grabbing; scroll-snap-type: none; }
.reel li { flex: none; scroll-snap-align: start; }
.reel figure { transition: rotate .4s cubic-bezier(.4, 0, .2, 1); }
.reel li:nth-child(odd) figure { rotate: -1.2deg; }
.reel li:nth-child(even) figure { rotate: 1.2deg; }
.reel img { width: auto; max-width: none; height: clamp(220px, 60vw, 320px); border-radius: var(--radius); user-select: none; -webkit-user-drag: none; }
.reel figcaption { margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--muted); }
@media (hover: hover) { .reel li:hover figure { rotate: 0deg; } }

/* ── days left ────────────────────────────────────────────────────────── */
.count { display: flex; align-items: baseline; gap: 12px; margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--muted); }
.count[hidden] { display: none; }
.count b { font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── the wordmark closes the page, at the header's size. (Set as large as the page for an hour,
   after socratica.info; taken back because Ian had just said the logo was too big.) ── */
.footer .big { width: auto; height: 32px; margin: 0 0 24px; }

@media (min-width: 768px) {
  .lead .in { padding: 120px var(--edge) 48px; }
  .lead .display { font-size: 84px; }
  .lead .say { font-size: 20px; line-height: 28px; }
  .lead .row { grid-template-columns: 1fr auto; align-items: end; }
  .lead .aside { min-width: 280px; }
  .ticker span { font-size: 20px; line-height: 61px; }
  .lead:not(.page) { min-height: calc(100svh - 72px - 61px); }
  .trio { max-width: 566px; }
  .reel img { height: 340px; }
}
@media (min-width: 1024px) {
  .lead .in { padding-inline: var(--gutter); }
  .lead .say { max-width: 601px; }
  .trio { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .reel { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .footer .cols { margin-bottom: 40px; }
}
@media (min-width: 1280px) {
  .lead .display { font-size: 108px; }
  .lead.page .display { font-size: 84px; }
  .lead .say { font-size: 28px; line-height: 36px; }
  .lead.page .say { font-size: 20px; line-height: 28px; }
}

/* ══ the header, 4 Oct 2026 ════════════════════════════════════════════════
   Ian: "I want a cooler header. I don't like how it's just a thick white bar."
   Measured on the references at 1440 wide the same day:
     slush.org          a bar that floats: 24px from the top, set in from the sides, 64px tall,
                        rgba(24, 24, 26, .5) with a 20px blur behind it, no line, no shadow
     linear.app         fixed, see-through, the same 20px blur, a 1px line under it
     hackthenorth.com   slides up out of the way on the way down the page, back on the way up
   So: Slush's floating bar, with the kit's 4px corners where Slush has 12. It is dark over the
   dark parts of the page and light over the rest (Slush's site is dark all the way down, so
   the light state is this site's own), and it steps aside like Hack the North's. */
html { scroll-padding-top: 104px; }
.top {
  position: fixed; z-index: 10; top: 12px; left: 12px; right: 12px; height: 56px; padding: 0 8px 0 16px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: rgba(24, 24, 26, .72);                    /* without the script it never turns light, so it is dark enough to read over white */
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--white);
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1), border-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), translate .4s cubic-bezier(.4, 0, .2, 1);
}
html.bar-js .top { background: rgba(24, 24, 26, .5); }                                   /* Slush's own value */
html.bar-js .top.light { background: rgba(255, 255, 255, .78); border-color: var(--rule); color: var(--ink); }
.top.away { translate: 0 calc(-100% - 28px); }
.top a, .top .join, .links a, .menu nav a { color: inherit; }
.top .logo .mark-light { display: none; }
.top.light .logo .mark-dark { display: none; }
.top.light .logo .mark-light { display: block; }

.menu summary { margin: 0; background: transparent; color: inherit; }
.menu summary span { background: currentColor; }
.menu nav {
  top: calc(100% + 8px); left: -1px; right: -1px; padding: 8px 16px 12px;
  border: 1px solid transparent; border-radius: var(--radius); background: rgba(24, 24, 26, .94);
}
.top.light .menu nav { background: rgba(255, 255, 255, .97); border-color: var(--rule); }
.menu nav a { border-bottom-color: rgba(128, 128, 128, .3); }

/* The opening now runs under the bar, to the top of the screen. */
.lead { min-height: calc(100svh - 48px); }
.lead.page { min-height: 56svh; }
.lead .in { padding-top: 112px; }

@media (hover: hover) {
  .top .join:hover, .menu nav a:hover, .links a:hover { color: inherit; opacity: .7; }
  .menu summary:hover { background: rgba(128, 128, 128, .28); }
}
.menu summary:active { background: rgba(128, 128, 128, .28); }

@media (min-width: 768px) {
  .lead:not(.page) { min-height: calc(100svh - 61px); }
  .lead .in { padding-top: 136px; }
}
@media (min-width: 1024px) {
  .top { top: 24px; height: 64px; padding: 0 10px 0 16px;                               /* Slush: 24 from the top, 64 tall */
         left: max(28px, calc((100% - 1216px) / 2 - 16px)); right: max(28px, calc((100% - 1216px) / 2 - 16px)); }
  .top .join { min-height: 44px; background: var(--orange-d); color: var(--ink); opacity: 1; }
  .top.light .join { background: var(--ink); color: var(--white); }
  .lead .in { padding-top: 152px; }
}
@media (min-width: 1024px) and (hover: hover) {
  .top .join:hover { background: var(--white); color: var(--ink); opacity: 1; }
  .top.light .join:hover { background: var(--muted); color: var(--white); }
}

/* ══ the rocket cursor ═════════════════════════════════════════════════════
   Ian's effect from his July site (4 Oct 2026), rebuilt on his word on 10 Oct 2026 so that it
   never trails: the script (js/rocket.js) now gives the computer a picture of the rocket to
   draw AS the pointer, in place of hiding the pointer and moving a page element after it. The
   script writes the picture, and which way it faces, onto the page's root as its cursor.
   The smoke is still a layer over the page, above everything, never catching a click.
   Everything is told to take the root's cursor, because this site has a menu button, a band
   and a photo row with cursors of their own, and the hand or the grab cursor would replace the
   rocket over them. Only on devices with a mouse, and only once the script has added the class. */
.rocket-smoke { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
@media (pointer: fine) {
  .custom-cursor-active * { cursor: inherit !important; }
}

/* ══ the sponsors page ═════════════════════════════════════════════════════
   The logo band and the logo wall follow Ian's July site, on his word ("like how it looks on the
   other sec site"). Its numbers: logos 32px tall (40 from 768), 56px apart, 60% strength and
   full on hover, one lap in 55 seconds; the wall in 2, 3, 4 then 6 columns, 16px apart, cards
   112px tall with the logo 32px tall and no wider than 80% of its card, 80% strength and full on
   hover, leaning up to 12 degrees toward the cursor. The kit overrules it in three places: 4px
   corners where that site has 16, a line that turns ink on hover where it has a shadow, and no
   orange glow under the cursor (the kit has no gradients). */
.logos { overflow: hidden; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.logos .run { display: flex; width: max-content; align-items: center; animation: run 55s linear infinite; }
.logos .row { display: flex; flex: none; align-items: center; gap: 56px; padding-right: 56px; }
.logos img { flex: none; width: auto; max-width: none; height: 32px; object-fit: contain; opacity: .6; transition: opacity .15s cubic-bezier(.16, 1, .3, 1); }
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.logo-card {
  display: flex; align-items: center; justify-content: center; height: 112px; padding: 24px;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: border-color .28s cubic-bezier(.16, 1, .3, 1), transform .28s cubic-bezier(.16, 1, .3, 1);
}
.logo-card img { width: auto; height: 32px; max-width: 80%; object-fit: contain; opacity: .8; transition: opacity .28s cubic-bezier(.16, 1, .3, 1); }
.evidence.six { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
.beside .head .small { margin-top: 12px; }
@media (hover: hover) {
  .logos img:hover { opacity: 1; }
  .logo-card:hover { border-color: var(--ink); }
  .logo-card:hover img { opacity: 1; }
}
@media (min-width: 640px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .logos img { height: 40px; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .evidence.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .evidence.six { max-width: none; margin: 0; }
  .links a { padding: 0 12px; }
}
@media (min-width: 1280px) { .evidence.six b { font-size: 46px; } }

/* ══ the events page, in the July site's layout ═══════════════════════════
   Ian, 4 Oct 2026: "add the other sites event page layout to the new ones". From that page:
   filter buttons; a heading; cards one across on a phone and three across from 768, 24px
   apart, 24px of padding, which lift 4px on hover; in each card a small capital label, the
   date in bold, the name, a quieter line, and an action underlined in orange 2px thick; a
   photograph 420px tall (520 from 768) that stays put while the page scrolls, under a scrim,
   with its words in the middle. The kit overrules it here: 4px corners where that site has
   pills and 16px; a line that turns ink on hover where it turns orange; no glow; the kit's
   62% scrim where it has 55%. ⚠ The photograph with words on it is a second scrimmed
   photograph and a third dark block on this page, which the kit's web rules do not allow
   (one dark hero, one more dark block, scrim only in the hero). It is here on Ian's word. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.filters button {
  min-height: 44px; padding: 8px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  font: inherit; font-weight: 600; font-size: 14px; line-height: 21px; color: var(--ink); cursor: pointer;
  transition: background-color .15s cubic-bezier(.16, 1, .3, 1), border-color .15s cubic-bezier(.16, 1, .3, 1), color .15s cubic-bezier(.16, 1, .3, 1);
}
.filters button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.hub-h { margin-bottom: 24px; font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -.01em; color: var(--ink); }
.grid3 { display: grid; gap: 24px; }
.card3 {
  display: block; height: 100%; padding: 24px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white);
  color: inherit; text-decoration: none;
  transition: translate .28s cubic-bezier(.16, 1, .3, 1), border-color .28s cubic-bezier(.16, 1, .3, 1);
}
.card3[hidden] { display: none; }
.card3 .kind { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card3 .date { margin-top: 8px; font-weight: 600; font-size: 14px; line-height: 21px; color: var(--body); }
.card3 h3 { margin-top: 4px; font-weight: 600; font-size: 20px; line-height: 28px; color: var(--ink); overflow-wrap: anywhere; }
.card3 .blurb { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--muted); }
.card3 .go {
  display: inline-block; margin-top: 16px; font-weight: 600; font-size: 14px; line-height: 21px; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--orange-l); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.grid3 .none { color: var(--muted); }
.band {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; margin-top: 96px;
  padding: 96px var(--edge); text-align: center; color: var(--white);
  background-image: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62)), var(--photo); background-size: cover; background-position: center;
}
.band .eyebrow { color: var(--d-body); margin-bottom: 12px; }
.band .eyebrow::before { display: none; }
.band h2 { max-width: 22ch; font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -.02em; }
.band h2 + p { max-width: 568px; margin-top: 16px; color: var(--d-body); }
@media (hover: hover) {
  .filters button:not([aria-pressed="true"]):hover { border-color: var(--ink); }
  .card3:hover { translate: 0 -4px; border-color: var(--ink); }
}
@media (min-width: 768px) {
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .band { min-height: 520px; }
  .band h2 { font-size: 46px; line-height: 50px; }
}
/* The photograph holds still only where there is a mouse: phones scroll past it in the
   ordinary way, as the July site accepts they must (iOS has no fixed backgrounds). */
@media (min-width: 1024px) and (hover: hover) { .band { background-attachment: fixed; } }
@media (min-width: 1024px) { .band { margin-top: 128px; } }

/* ══ rounder, and the closing card · 4 Oct 2026 ════════════════════════════
   Ian: "make things more rounded too many things are too square looking."
   ⚠ The brand kit says 4px corners. This replaces that on Ian's word; the kit needs changing to
   match. The new scale is the one his July site used, which he built before the kit: buttons
   and small controls fully round, small things 12px, cards 16 to 20px, photographs and large
   panels 24 to 28px. */
:root { --radius: 16px; --radius-s: 12px; --radius-l: 28px; --pill: 999px; }
.btn, .filters button, .top .join, .skip { border-radius: var(--pill); }
.btn { padding-inline: 20px; }
.tile, .tile.seal { border-radius: 10px; }
.eyebrow::before { border-radius: 3px; }
.hl { border-radius: 12px; }
.reg { border-radius: 20px; overflow: hidden; }
.card3, .tile3 { border-radius: 20px; }
.ev.pic img { border-radius: var(--radius-s); }
.reel img { border-radius: 20px; }
.menu summary { border-radius: var(--radius-s); }
.menu nav { border-radius: 20px; }
.top { border-radius: 20px; top: 16px; left: 16px; right: 16px; }

/* Photographs sit inside the page with round corners, at every width. On a phone they used to
   run edge to edge with square corners. */
.shot, .cover, .side { margin-inline: 0; }
.shot img, .cover img, .side img { border-radius: 20px; }

/* The opening is a rounded panel set in from the edges of the screen, with the header floating
   inside it (stripe.com/sessions sets its opening picture the same way). The band under it is a
   capsule. */
.lead { margin: 8px 8px 0; border-radius: 24px; min-height: calc(100svh - 48px - 24px); }
.lead.page { min-height: 56svh; }
.ticker { margin: 8px 8px 0; border-radius: var(--pill); }
.band { margin-inline: 8px; border-radius: 24px; }
.logo-card { border-radius: var(--radius); }

@media (min-width: 768px) {
  .lead { margin: 12px 12px 0; border-radius: var(--radius-l); }
  .lead:not(.page) { min-height: calc(100svh - 61px - 32px); }
  .ticker { margin: 8px 12px 0; }
  .band { margin-inline: 12px; border-radius: var(--radius-l); }
  .shot img, .cover img, .side img { border-radius: 24px; }
}
@media (min-width: 1024px) {
  .top { top: 24px; left: max(28px, calc((100% - 1216px) / 2 - 16px)); right: max(28px, calc((100% - 1216px) / 2 - 16px)); }
}

/* ── the closing card · landonorris.com's footer ─────────────────────────
   Measured there at 1440 by 900: the frame is the brand colour, fading in from the page above;
   the card is 17px in from each side and starts 172px down, with corners of about 28px and a
   tab 290 wide rising 36 from the middle of its top edge; headline 70/60 in capitals, 124px
   down the card, in two lines and two colours; a mark above it; the figure rises from the
   bottom centre and runs off the card's bottom edge; link columns centred 228px in from each
   side, a 10px label then links at about 24/29 in capitals, and one link in the brand colour
   33px under the rest; sponsors' logos about 28px tall along the bottom, behind the figure; one
   button 40px tall in the middle of the bottom edge; the middle of the bottom edge drops 25px
   lower than the corners, and the small print sits on the frame beside it, 14px.
   On a phone (375): the card is 13px in; the logos run along the top; the two columns sit side
   by side; then the headline at 38/32, the figure, the button; small print centred beneath.
   Here: the frame is SEC's orange, the card is ink, the mark
   is the wordmark, and the button is round. The headline is in capitals as it is there: the
   kit allows capitals for one short phrase on the big thing. ⚠ The fade into the frame is a
   gradient, which the kit does not have. */
.end {
  position: relative; margin-top: 96px; padding: 120px 13px 44px; color: var(--white);
  background: linear-gradient(var(--white) 0, var(--orange-l) 120px);
}
.end a { color: inherit; text-decoration: none; }
.end-card { position: relative; border-radius: 24px; background: var(--ink); padding: 0 0 78px; }
/* The tab and the dropped middle of the bottom edge are drawn shapes (in the page, as SVG), filled
   with the card's colour and overlapping it by a pixel. They were first built from separate
   corner pieces placed beside each other, which showed as detached fins on a screen scaled to
   125%: pieces that only touch can part; shapes that overlap cannot. */
.end-tab, .end-foot svg { display: block; fill: var(--ink); }
.end-tab { position: absolute; left: 50%; translate: -50% 0; top: -14px; width: 170px; height: 15px; }
.end-foot { display: none; }

.end-art { position: relative; overflow: hidden; border-radius: 24px 24px 0 0; padding-top: 28px; }
.end-cap { display: none; }
.end-logos { overflow: hidden; }
.end-logos .run { display: flex; width: max-content; align-items: center; animation: run 70s linear infinite; }
.end-logos .row { display: flex; flex: none; align-items: center; gap: 44px; padding-right: 44px; }
.end-logos img { flex: none; width: auto; max-width: none; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; }

/* on a phone the pieces stack in the order they do there: logos, columns, headline, figure, button */
.end-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
.end-art { grid-column: 1 / -1; grid-row: 1; }
.end-col { grid-row: 2; padding-top: 36px; text-align: center; }
.end-col .lbl { margin-bottom: 8px; font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-muted); }
.end-col li a { display: block; padding: 6px 0; font-weight: 700; font-size: 18px; line-height: 20px; text-transform: uppercase; transition: color .3s cubic-bezier(.25, 1, .5, 1); }
.end-col .hot { display: inline-block; margin-top: 12px; padding: 8px 12px; font-weight: 700; font-size: 16px; line-height: 20px; text-transform: uppercase; color: var(--orange-d); }
.end-top { grid-column: 1 / -1; grid-row: 3; padding: 44px 16px 0; text-align: center; }
.end-mark { width: auto; height: 32px; margin: 0 auto 16px; }
.end-line { font-weight: 700; font-size: 38px; line-height: 34px; letter-spacing: -.02em; text-transform: uppercase; }
.end-line span { display: block; color: var(--orange-d); }
.end-btn {
  position: absolute; left: 50%; bottom: -20px; translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: var(--pill);
  background: var(--orange-d); color: var(--ink) !important; font-weight: 700; font-size: 13px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .5s cubic-bezier(.4, 0, .2, 1);
}
.end-legal { display: grid; justify-items: center; gap: 2px; margin-top: 36px; font-size: 12px; line-height: 18px; color: var(--ink); }
@media (hover: hover) {
  .end-col a:hover { color: var(--orange-d); }
  .end-col .hot:hover { color: var(--white); }
  .end-btn:hover { background: var(--white); }
}

@media (min-width: 900px) {
  .end { margin-top: 128px; padding: 172px 17px 42px; background: linear-gradient(var(--white) 0, var(--orange-l) 172px); }
  .end-card { display: block; height: 686px; padding: 0; border-radius: var(--radius-l); }
  .end-tab { top: -36px; width: 346px; height: 37px; }
  .end-foot { display: block; position: absolute; left: 248px; right: 248px; top: calc(100% - 1px); height: 27px; }
  .end-foot::before { content: ""; position: absolute; left: 55px; right: 55px; top: 0; bottom: 0; background: var(--ink); }
  .end-foot svg { position: absolute; top: 0; width: 56px; height: 27px; }
  .end-foot svg:first-child { left: 0; }
  .end-foot svg:last-child { right: 0; }

  .end-top { position: absolute; left: 0; right: 0; top: 44px; padding: 0; z-index: 1; }
  .end-mark { height: 40px; margin-bottom: 28px; }
  .end-line { font-size: 70px; line-height: 60px; }
  .end-col { position: absolute; top: 349px; z-index: 1; padding: 0; translate: -50% 0; }
  .end-col.left { left: max(150px, 16.2%); }
  .end-col.right { left: min(calc(100% - 150px), 83.4%); }
  .end-col .lbl { margin-bottom: 10px; }
  .end-col li a { padding: 0; font-size: 24px; line-height: 29px; }
  .end-col .hot { margin-top: 33px; padding: 0; }

  .end-art { position: absolute; inset: 0; padding: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; overflow: hidden; }
  .end-cap { display: block; position: absolute; left: 40px; bottom: 82px; font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-muted); }
  .end-logos { position: absolute; left: 0; right: 0; bottom: 30px; }
  .end-logos .row { gap: 96px; padding-right: 96px; }
  .end-logos img { height: 28px; }
  .end-btn { bottom: -2px; min-height: 40px; }
  .end-legal { display: flex; justify-content: space-between; position: absolute; left: 17px; right: 17px; bottom: 14px; margin: 0; font-size: 14px; line-height: 20px; }
}

/* ══ the July site's header; a square opening again; a taller footer · 4 Oct 2026 ══
   Ian: "copy how the header looks and works from the other sec site." Every number below was
   measured on that site as it runs. New class names (hdr-…) so nothing written for the two
   earlier headers can reach it; those older rules (.top, .menu, .links) are now unused. */
html { scroll-padding-top: 84px; }
/* The header has its ground by default and loses it only while the page is at the top. It was
   first written the other way round (no ground until a separate script added one), and on
   Ian's browser, which held an older copy of that script, the ground never came: the links
   floated over the photograph. The "at the top" mark is set by a few lines in each page. */
.hdr {
  position: sticky; top: 0; z-index: 50; width: 100%; padding: 12px 0;
  background: rgba(246, 243, 239, .8);                 /* that site's off-white at 80%: bg-offwhite/80 in its Nav.tsx */
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: all 280ms cubic-bezier(.65, 0, .35, 1);
}
html.at-top .hdr { padding: 20px 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html.at-top .hdr.open { background: rgba(255, 255, 255, .96); }
.hdr-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; }
.hdr-logo { display: flex; align-items: center; height: 44px; }
.hdr-logo img { width: auto; height: 18px; }                 /* 17.6px there: a 44px square holding the mark */
.hdr-links { display: none; }
.hdr-links a { position: relative; display: inline-block; font-weight: 500; font-size: 14.4px; line-height: 20px; color: var(--ink); text-decoration: none; }
.hdr-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--orange-l);
  transform: scaleX(0); transform-origin: left; transition: transform 150ms cubic-bezier(.16, 1, .3, 1);
}
.hdr-links a[aria-current]::after { transform: scaleX(1); }
.hdr-join {
  display: none; padding: 10px 20px; border-radius: 999px; background: var(--orange-l); color: var(--black);
  font-weight: 600; font-size: 14.4px; line-height: 22px; text-decoration: none; transition: transform 150ms cubic-bezier(.16, 1, .3, 1);
}
.hdr-burger { display: flex; flex-direction: column; gap: 6px; padding: 14px 0 14px 12px; border: 0; background: none; cursor: pointer; }
.hdr-burger span { display: block; width: 24px; height: 2px; background: var(--black); }
.hdr-drop { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 280ms cubic-bezier(.16, 1, .3, 1), opacity 280ms cubic-bezier(.16, 1, .3, 1), visibility 0s 280ms; }
.hdr-drop.open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.hdr-drop > ul { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: hidden; padding: 0 24px; }
.hdr-drop.open > ul { padding: 8px 24px 24px; }
.hdr-drop a { display: block; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--ink); text-decoration: none; }
.hdr-drop .hdr-join { display: inline-block; font-weight: 600; font-size: 14.4px; line-height: 22px; color: var(--black); }
.hdr.open { background: rgba(255, 255, 255, .96); }          /* this site's own: the menu opens over a photograph here, so it needs a ground */
@media (hover: hover) {
  .hdr-links a:hover::after { transform: scaleX(1); }
  .hdr-join:hover { transform: scale(1.05); }
}
@media (min-width: 768px) {
  .hdr-bar { padding: 0 40px; }
  .hdr-links { display: flex; gap: 32px; }
  .hdr-bar > .hdr-join { display: inline-block; }
  .hdr-burger, .hdr-drop { display: none; }
}
@media (min-width: 1024px) { .hdr-bar { padding: 0 var(--gutter); } }   /* the header's edges are the page's, as they are there */

/* The opening photograph and the orange band: edge to edge, square, as before the rounding pass.
   Ian: "I never wanted the hero image and the orange bar below that to get rounded." */
.lead { margin: 0; border-radius: 0; min-height: calc(100svh - 84px - 48px); }
.lead.page { min-height: 52svh; }
.lead .in { padding-top: 96px; }
.ticker { margin: 0; border-radius: 0; }
@media (min-width: 768px) {
  .lead { margin: 0; border-radius: 0; }
  .lead:not(.page) { min-height: calc(100svh - 84px - 61px); }
  .lead .in { padding-top: 120px; }
  .ticker { margin: 0; }
}

/* The footer: the Join button sat on top of the moving logos. The card is 34px taller and the
   logos ride above the button, with 26px between them. */
@media (min-width: 900px) {
  .end-card { height: 720px; }
  .end-logos { bottom: 64px; }
  .end-cap { bottom: 106px; }
}

/* ── cards with a photograph (Events' past events; About's programs) ──── */
.card3.pic { padding: 0; overflow: hidden; }
.card3.pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card3.pic > div { padding: 20px 24px 24px; }
.cards .ev.pic { grid-template-columns: minmax(0, 1fr) 96px; }
.cards .ev.pic img { width: 96px; height: 96px; }
@media (max-width: 359px) { .cards .ev.pic { grid-template-columns: minmax(0, 1fr); } }

/* ══ an event's own page ═══════════════════════════════════════════════════
   The same parts as every other page. An event with no photograph of its own opens on a plain
   dark panel, so that no other event's photograph stands in for it. */
.lead.plain { background: var(--ink); min-height: 44svh; }
.lead.plain::after { display: none; }
.lead .eyebrow a { color: inherit; text-underline-offset: 3px; }
.facts-col .when { margin-top: 0; }
.facts-col .reg { margin-top: 28px; }
.when .tile b:only-child { font-size: 12px; line-height: 12px; color: var(--ink); }   /* a month with no day yet */
.links-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.more-link { margin-top: 20px; }
.go { font-weight: 600; font-size: 14px; line-height: 21px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange-l); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.band a { color: var(--white); text-underline-offset: 3px; }
.beside .head .count { margin-top: 20px; }
a.ev { transition: border-color .3s cubic-bezier(.4, 0, .2, 1); }
@media (min-width: 1024px) {
  .pair .facts.text { padding-top: 53px; }
  .pair .facts.text .small { max-width: 568px; }
  .facts-col { max-width: 640px; }
}

/* ══ About ═════════════════════════════════════════════════════════════════
   Twenty About pages were read for this one (2026-10-04). The ones that hold up, Stripe,
   Pentagram and Anthropic, open with one plain sentence saying what the organisation is, keep to
   a text column with a lot of air, and use rules where others use boxes. So the three parts added
   here have no cards: a sentence set large, three columns under a rule, names under rules. */

/* What we believe: one sentence, set one step below a statement so it does not outrank the
   headings. Its first half is grey and its second black, following the sentence (not this; this). */
.creed { margin: 0; }
.creed blockquote { margin: 0; max-width: 800px; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -.01em; color: var(--ink); }
.creed blockquote span { color: var(--muted); }
.creed figcaption { margin-top: 20px; font-size: 14px; line-height: 21px; color: var(--muted); }

/* The three pillars: number, word, where a member meets it, then the club's own sentence, quieter. */
.pillars { list-style: none; margin: 32px 0 0; padding: 0; display: grid; }
.pillars > li { padding: 20px 0 28px; border-top: 1px solid var(--ink); }
.pillars .num { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; color: var(--muted); font-variant-numeric: tabular-nums; }
.pillars h3 { margin-top: 12px; font-weight: 500; font-size: 28px; line-height: 36px; letter-spacing: -.02em; color: var(--ink); }
.pillars .how { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--ink); }
.pillars .own { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--muted); }

/* The team, by department: names under rules. No portraits, because there are none yet. */
.team { list-style: none; margin: 0; padding: 0; display: grid; }
.team > li { padding: 16px 0 24px; border-top: 1px solid var(--rule); }
.team h3 { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.team .vp { margin-top: 10px; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -.01em; color: var(--ink); }
.team .vp span { margin-left: 4px; font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--muted); }
.team .dirs { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--body); }
.part.follows { padding-top: 48px; }      /* a block that belongs to the part above it */

.part .small.note { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--muted); }
.part .small + .links-row { margin-top: 24px; }
.find { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; }

@media (min-width: 768px) {
  .creed blockquote { font-size: 28px; line-height: 36px; letter-spacing: -.02em; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1024px) {
  .pair > .pillars { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 64px; }
  .pillars > li { padding: 20px 0 0; }
  .duo.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }   /* the photograph on the left, so two photographs in a row don't stack on one side */
  .duo.flip .shot { order: -1; }
  .pair .facts .evidence + .small { max-width: 568px; margin-top: 20px; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .team .dirs { font-size: 16px; line-height: 24px; }
  .part.follows { padding-top: 64px; }
}

/* ══ the light bulb in the footer's empty middle · 4 Oct 2026 ══════════════
   Ian: "a high quality 3d lightbulb in the center empty space that you can click and drag to
   rotate and flip around everywhere", and something that happens when it is clicked.
   The bulb is drawn on black and laid over the card with "screen" blending: black adds nothing,
   light adds light. The blending is on the holder and not on the canvas inside it, because the
   holder has its own layer and a canvas inside would only blend with that empty layer. */
.end-bulb { grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 1; width: 236px; height: 268px; margin: 20px auto 0; mix-blend-mode: screen; }
/* the canvas fades out towards its edges, so the glow can never show the box it is drawn in */
.end-bulb canvas { display: block; width: 100%; height: 100%; border-radius: 20px;
  -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); cursor: grab; opacity: 0; transition: opacity .9s cubic-bezier(.33, 1, .68, 1); }
.end-bulb.ready canvas { opacity: 1; }
.end-bulb.held canvas { cursor: grabbing; }
.end-bulb canvas:focus-visible { outline: 2px solid var(--orange-d); outline-offset: -2px; }
.end-hint { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-weight: 600; font-size: 10px; line-height: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-muted); pointer-events: none; opacity: 0; transition: opacity .9s; }
.end-bulb.ready .end-hint { opacity: 1; }
/* with the bulb on, the headline's orange word catches the light */
.end-line span { transition: text-shadow .5s cubic-bezier(.33, 1, .68, 1); }
html.lit .end-line span { text-shadow: 0 0 34px rgba(255, 128, 51, .62); }
@media (min-width: 900px) {
  .end-bulb { position: absolute; left: 50%; top: 228px; translate: -50% 0; width: min(440px, 38%); height: 372px; margin: 0; }
}

/* ══ the footer on a phone, rearranged · 4 Oct 2026 ══════════════════════════
   Ian, from his phone: "The layout on a phone looks horrible and doesnt make sense. The sec start
   something real should be at the top with lightbulb under and I would like everything to fit
   nicely in one screen its too long. Also the most important thing is the join sec button."
   So, below 900px: mark and headline, the bulb, Join SEC as a wide button, the page links in a
   line, the two "find us" links in a line, the logos last. The earlier order came from the
   reference (logos, link columns, headline) and ran to about two screens.
   Left out on a phone only: the two small labels "Pages" and "Find us", and the small orange
   "Join" link, which would sit directly under the Join SEC button. Everything else is kept. */
@media (max-width: 899px) {
  .end { padding: 96px 12px 18px; background: linear-gradient(var(--white) 0, var(--orange-l) 96px); }
  .end-card { padding: 0; column-gap: 0; }
  .end-top { grid-row: 1; padding: 30px 16px 0; }
  .end-mark { height: 26px; margin-bottom: 12px; }
  .end-line { font-size: clamp(27px, 8.6vw, 40px); line-height: .92; }          /* "Start something" stays on one line */
  .end-bulb { grid-row: 2; width: 240px; height: clamp(128px, 29svh, 270px); margin: 2px auto 0; }   /* as tall as the screen can spare */
  /* the one thing the footer is for: as wide as a thumb's reach, 56px tall */
  .end-btn {
    position: static; translate: none; grid-column: 1 / -1; grid-row: 3; justify-self: center; justify-content: center;
    width: min(calc(100% - 48px), 340px); min-height: 56px; margin-top: 14px; font-size: 16px; line-height: 20px;
  }
  .end-col { grid-column: 1 / -1; padding: 0 16px; }
  .end-col.left { grid-row: 4; margin-top: 12px; }
  .end-col.right { grid-row: 5; }
  .end-col, .end-col ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(8px, 2.6vw, 16px); }
  .end-col .lbl, .end-col .hot { display: none; }
  .end-col li a { display: block; padding: 9px 2px; font-size: clamp(11px, 3.2vw, 14px); line-height: 16px; letter-spacing: .02em; }   /* five page links on one line from 320px up */
  .end-art { grid-row: 6; border-radius: 0 0 24px 24px; padding: 14px 0 22px; }
  .end-legal { margin-top: 14px; }
}
/* a short screen (a small phone, or the address bar showing): the same order, drawn tighter */
@media (max-width: 899px) and (max-height: 640px) {
  .end-top { padding-top: 22px; }
  .end-btn { min-height: 52px; margin-top: 10px; }
  .end-col.left { margin-top: 8px; }
  .end-art { padding: 4px 0 16px; }
  .end-legal { margin-top: 10px; }
}

/* ══ Sponsors and Contact, for companies · 4 Oct 2026 ══════════════════════
   Ian: "The sponsor and contact page needs to be geared towards companies interested in sec."
   Thirty-three sponsor and contact pages were opened for this. The ones that work (MLH, DMZ,
   Web Summit) say what the company gets before what the organiser wants, put numbers straight
   after the opening, and repeat one way to get in touch. The parts below serve that. */

/* what SEC's members study: one bar in four parts, and the four figures under it */
.fields { margin: 28px 0 0; }
.fields figcaption { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fields .bar { display: flex; gap: 3px; height: 10px; margin-top: 12px; }
.fields .bar span { border-radius: 3px; background: var(--ink); }
.fields .bar span:nth-child(2) { opacity: .62; }
.fields .bar span:nth-child(3) { opacity: .4; }
.fields .bar span:nth-child(4) { opacity: .22; }
.fields ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 14px 0 0; padding: 0; font-size: 14px; line-height: 21px; color: var(--body); }
.fields li b { margin-right: 6px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.reach .fields { grid-column: 2; }

/* lists inside the three columns (what a sponsor gets) */
.pillars ul { list-style: none; margin: 14px 0 0; padding: 0; }
.pillars ul li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 21px; color: var(--body); }
.pillars ul li::before { content: ""; position: absolute; left: 0; top: 18px; width: 8px; height: 2px; border-radius: 1px; background: var(--orange-l); }


.links-row.wide-row { margin-top: 32px; }
/* on a phone the wall of logos is three across and its cards are shorter: 13 rows where there were 19 */
@media (max-width: 639px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .logo-card { height: 76px; padding: 14px 10px; }
  .logo-card img { height: 22px; max-width: 88%; }
}
.cards .ev.full { grid-column: 1 / -1; }      /* the one paid way to take part, across the full width */
.lead .say a { color: inherit; text-underline-offset: 3px; }
.part .small a, .beside .head .small a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange-l); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lead .cta .btn.quiet { text-decoration: none; }

@media (min-width: 768px) {
  .fields ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pillars ul li { font-size: 16px; line-height: 24px; }
  .pillars ul li::before { top: 20px; }
  .pair > .links-row.wide-row, .pair > .team.two { grid-column: 1 / -1; }
  .pair > .team.two { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* ══ the Join page, rebuilt for a phone · 5 Oct 2026 ═══════════════════════
   Ian: "The join page should be one of the most important pages... make this page as engaging
   interesting and interactive as possible on a phone." Thirty-three membership and sign-up pages
   were opened at a phone's size for it. What is here: the price and the button on the first
   screen, a button that follows the reader, one real deadline, a chooser, rows that open. */

/* the one button that matters: 56px tall, full width on a phone */
.btn.big { min-height: 56px; padding: 0 28px; font-size: 16px; line-height: 20px; gap: 10px; }
.lead .cta .btn.big { width: 100%; justify-content: center; }
.proof { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; padding: 0; font-size: 14px; line-height: 20px; color: var(--d-body); }
.proof b { font-weight: 600; color: var(--white); }

/* the deadline card */
.deadline { margin: 24px var(--inset) 0; padding: 20px; border: 1px solid var(--ink); border-radius: 20px; background: var(--white); }
.deadline[hidden] { display: none; }
.deadline .lbl { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.deadline .left { margin-top: 8px; }
.deadline .left b { display: inline-block; padding: 2px 10px; border-radius: 8px; background: var(--orange-l); font-weight: 700; font-size: 20px; line-height: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.deadline h2 { margin-top: 12px; font-weight: 500; font-size: 20px; line-height: 26px; letter-spacing: -.01em; color: var(--ink); }
.deadline h2 + p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--body); }
.deadline .links-row { margin-top: 16px; }

/* the chooser */
.pick .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.pick .chips button {
  min-height: 48px; padding: 0 12px; border: 1px solid #D1D5DC; border-radius: var(--pill); background: var(--white);
  font: inherit; font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); cursor: pointer;
  transition: background-color .25s cubic-bezier(.33, 1, .68, 1), border-color .25s, color .25s, scale .15s;
}
.pick .chips button[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); }
.pick .chips button:active { scale: .97; }
.pick .panel { margin-top: 16px; overflow: hidden; border-radius: 20px; background: var(--panel); }
.pick .panel[hidden] { display: none; }
.pick .panel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pick .panel ul { list-style: none; margin: 0; padding: 4px 20px 8px; }
.pick .panel li + li { border-top: 1px solid var(--rule); }
.pick .panel a { display: grid; gap: 2px; padding: 14px 0; color: inherit; text-decoration: none; }
.pick .panel .time { font-size: 13px; line-height: 18px; color: var(--muted); }
.pick .panel b { font-weight: 600; font-size: 18px; line-height: 24px; color: var(--ink); }
.pick .panel b + span { font-size: 14px; line-height: 21px; color: var(--body); }
.pick .panel em { justify-self: start; margin-top: 6px; padding: 2px 10px; border: 1px solid var(--ink); border-radius: var(--pill); font-style: normal; font-weight: 600; font-size: 12px; line-height: 18px; color: var(--ink); }
.pick .statement + .small { margin-top: 8px; }
/* the Join page is read on a phone in one go: less air between its parts than elsewhere */
main.tight .part { padding-top: 72px; }
main.tight .deadline { margin-top: 28px; }
.reel.small img { height: 204px; }                /* short enough that the next photograph shows at the edge */
.lead.page:has(.btn.big)::after { background: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .74)); }   /* darker towards the foot, where the small figures sit */
html.js-pick .pick .panel.show { animation: pick-in .35s cubic-bezier(.33, 1, .68, 1); }
@keyframes pick-in { from { opacity: 0; translate: 0 8px; } }

/* the three steps: numbered, joined by a line */
.steps { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; }
.steps > li { position: relative; counter-increment: step; padding: 0 0 28px 52px; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); font-weight: 600; font-size: 16px; color: var(--white);
}
.steps > li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--rule); }
.steps h3 { padding-top: 5px; font-weight: 600; font-size: 20px; line-height: 26px; color: var(--ink); }
.steps p { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--body); }
.asks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.asks li { padding: 5px 12px; border: 1px solid var(--rule); border-radius: var(--pill); font-size: 13px; line-height: 18px; color: var(--ink); }
.asks i { font-style: normal; color: var(--muted); }

/* questions that open */
.faq { margin-top: 24px; border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { position: relative; list-style: none; padding: 18px 40px 18px 0; font-weight: 500; font-size: 17px; line-height: 24px; color: var(--ink); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 4px; top: 29px; width: 16px; height: 2px; border-radius: 1px; background: var(--ink); transition: rotate .25s cubic-bezier(.33, 1, .68, 1); }
.faq summary::after { rotate: 90deg; }
.faq details[open] summary::after { rotate: 0deg; }
.faq details p { margin: -4px 0 20px; max-width: 568px; font-size: 15px; line-height: 23px; color: var(--body); }
.faq details a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange-l); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.part.last { text-align: center; }
.part.last .statement { max-width: 16em; margin-inline: auto; }
.part.last .links-row { justify-content: center; }
.part.last .btn.big { width: min(100%, 340px); justify-content: center; }

/* the bar that follows the reader on a phone */
.joinbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(17, 17, 17, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white); translate: 0 110%; transition: translate .35s cubic-bezier(.33, 1, .68, 1);
}
.joinbar.on { translate: 0 0; }
.joinbar p { font-size: 14px; line-height: 20px; color: var(--d-body); }
.joinbar p b { font-weight: 700; font-size: 18px; color: var(--white); }
.joinbar .btn { min-height: 48px; padding: 0 22px; border-color: var(--orange-d); background: var(--orange-d); color: var(--ink); }

@media (min-width: 768px) {
  .lead .cta .btn.big { width: auto; }
  .deadline { max-width: 640px; margin-top: 32px; padding: 24px 28px; }
  .pick .chips { display: flex; flex-wrap: wrap; }
  .pick .chips button { padding: 0 22px; }
  .pick .panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; max-width: 900px; }
  .pick .panel[hidden] { display: none; }
  .pick .panel img { height: 100%; aspect-ratio: auto; min-height: 240px; }
  .pick .panel ul { padding: 12px 28px; align-self: center; }
  .joinbar { display: none; }
}
@media (min-width: 1024px) {
  .deadline { margin-inline: var(--gutter); }
  main.tight .part { padding-top: 112px; }
  .reel.small img { height: 300px; }
  .steps { margin-top: 0; }
  .steps p, .faq details p { font-size: 16px; line-height: 24px; }
  .faq { margin-top: 0; }
  .part.last { padding-top: 112px; }
}
/* a very short phone: the opening gives up some of its top space so the button stays on the first screen */
@media (max-width: 767px) and (max-height: 620px) {
  .lead.page:has(.btn.big) .in { padding-top: 64px; }
  .lead.page:has(.btn.big) .display { font-size: 52px; }
}
@media (max-width: 340px) { .lead.page:has(.btn.big) .display { font-size: 42px; } .lead.page:has(.btn.big) .in { padding-top: 56px; } }
@media (prefers-reduced-motion: reduce) {
  .joinbar, .pick .chips button, .faq summary::after { transition: none; }
  html.js-pick .pick .panel.show { animation: none; }
}

/* ══ the phone menu, on the right · 5 Oct 2026 ═════════════════════════════
   Ian: "Most people are right handed so I think it makes more sense to align all the nav to the
   right." The menu button was already on the right; its links now open directly under it, where a
   right thumb already is. Only the menu that opens on a phone changes; the desktop header does not. */
.hdr-drop > ul { align-items: flex-end; text-align: right; }

/* ══ the phone menu: hairlines, a moving line, and a picture on the left · 5 Oct 2026 ══
   Ian: "I need something extremely subtle and minimal to help separate. Also I need something to
   take up space on the left... a highlight or underline or something keeps cycling between each
   nav item and on the left you get either a brief description, a image, a nice graphic."
   So: a 1px rule between the links; an orange line that draws itself under one link at a time and
   moves on every 2.6 seconds; and on the left a picture with one line of words for that link.
   The picture and the words are made by motion.js (the list is there, in one place). */
.hdr-drop { grid-template-columns: minmax(0, 1fr) auto; }
.hdr-drop > ul { grid-column: 2; grid-row: 1; gap: 0; align-items: stretch; padding: 0 24px 0 20px; }
.hdr-drop.open > ul { padding: 8px 24px 24px 20px; }
.hdr-drop > ul li + li { border-top: 1px solid var(--rule); }
.hdr-drop > ul li:last-child { margin-top: 4px; padding-top: 16px; }
.hdr-drop > ul li:not(:last-child) a { position: relative; display: inline-block; padding: 12px 0; }
.hdr-drop > ul li:not(:last-child) a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 1px; background: var(--orange-l);
  transform: scaleX(0); transform-origin: right; transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.hdr-drop > ul li:not(:last-child) a.on::after { transform: scaleX(1); }
.hdr-drop > ul a[aria-current] { font-weight: 600; }

.hdr-drop .hdr-peek {
  grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: hidden; margin-left: 24px;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; padding: 0; text-decoration: none;
}
.hdr-drop.open .hdr-peek { padding: 12px 0 24px; }
.hdr-peek .pics { position: relative; min-height: 0; overflow: hidden; border-radius: 16px; background: var(--panel); }
.hdr-peek .pics img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.04; transition: opacity .6s cubic-bezier(.33, 1, .68, 1), scale 3s linear; }
.hdr-peek .pics img.on { opacity: 1; scale: 1; }
.hdr-peek .words { display: grid; gap: 2px; min-height: 58px; align-content: start; }
.hdr-peek .words b { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hdr-peek .words span { font-weight: 400; font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .hdr-peek .pics img, .hdr-drop > ul li:not(:last-child) a::after { transition: none; scale: 1; }
}

/* The menu's picture, second version · 5 Oct 2026. Ian: "add the text description on top of the image
   by adding a gradient shadow. And make the image a bit smaller and slightly rectangle horizontally."
   The picture is 5 wide to 4 tall and sits at the top of its column, level with the first link; its
   label and words are white over a fade to dark along its lower edge. */
.hdr-drop .hdr-peek { display: block; }
.hdr-peek .pics { display: block; aspect-ratio: 5 / 4; min-height: auto; }
.hdr-peek .words {
  position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; gap: 1px; padding: 40px 12px 11px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .82));
}
.hdr-peek .words b { color: var(--orange-d); }
.hdr-peek .words span { font-size: 13px; line-height: 18px; color: var(--white); }
@media (max-width: 359px) { .hdr-peek .words { padding: 28px 10px 9px; } .hdr-peek .words b { display: none; } .hdr-peek .words span { font-size: 12px; line-height: 16px; } }

/* ══ audit of 5 Oct 2026: things a thumb could miss ══════════════════════════
   The "Events" link above an event's name was 14px tall and the underlined links 18 to 21px. Each
   keeps its look and gains room to be pressed. */
.lead .eyebrow a { display: inline-block; margin: -12px -6px; padding: 12px 6px; }
.go { display: inline-block; padding: 9px 0; margin: -9px 0; }
.find .go, .links-row .go { margin: 0; }

/* ══ audit of 5 Oct 2026: what an outside reviewer saw in the screenshots ════
   (The list style ".plain" that used to sit above was removed: it also matched the photo-less event
   pages' opening, class "lead page dark plain", and halved its width on a phone. A lesson: a class
   name added for one page is a rule for every page.) */
.facts-col { margin-top: 24px; }                         /* the date rows no longer touch the heading above them */
.band a { white-space: nowrap; }                         /* "See how it went." stays on one line */
.part .small + .small { margin-top: 12px; }
/* the form's seven questions on Join: words, not chips, so they do not look like buttons */
.asks { gap: 2px 0; }
.asks li { padding: 0; border: 0; border-radius: 0; font-size: 14px; line-height: 21px; color: var(--body); }
.asks li:not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--muted); }
.reg-body .btn.wide.quiet { text-decoration: none; }
@media (max-width: 767px) {
  .lead .cta .btn { min-height: 48px; }                  /* the opening's buttons: 48px tall on a phone, as on Join */
}
@media (min-width: 1024px) {
  .facts-col { margin-top: 0; }
}

/* The menu's picture, third version · 5 Oct 2026. Ian, from his phone: "The bottom of the photo turns
   sharp and not rounded for some reason and also the image and text on the left of nav needs to be
   centered so lowered a bit more till its centered."
   The corners: the dark fade over the picture's lower edge was drawn on a layer of its own (the
   picture under it is being faded and scaled), and on his phone that layer was not cut to the
   picture's round corners. The fade and the pictures now carry the round corners themselves, and the
   frame is made a layer too, so nothing depends on the browser doing the cutting.
   The position: the picture is centred against the links and the button beside it. */
.hdr-drop .hdr-peek { display: flex; align-items: center; }
.hdr-drop.open .hdr-peek { padding: 8px 0 24px; }
.hdr-peek .pics { flex: 1 1 auto; min-width: 0; isolation: isolate; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.hdr-peek .pics img { border-radius: 16px; }
.hdr-peek .words { border-radius: 0 0 16px 16px; }

/* About: the club's vision and mission, word for word. Stacked on a phone, side by side on a wide
   screen. Each has a small label and is set at the size of a statement. (Class names begin with
   "purpose" and are used nowhere else.) */
.purpose-two { display: grid; gap: 32px; }
.purpose-k { margin-bottom: 10px; font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.purpose-t { max-width: 24em; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -.01em; color: var(--ink); }
@media (min-width: 768px) { .purpose-t { font-size: 24px; line-height: 32px; } }
@media (min-width: 1024px) {
  .purpose-two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .purpose-t { font-size: 28px; line-height: 36px; letter-spacing: -.02em; }
}

/* ── Events: the opening copied from the Work page of Ian's portfolio ("Gather") ──────────────
   Every class here begins with "gather" and is used on the Events page only.
   Written still first: without the script, or with less motion asked for, the opening is the
   full-screen photograph, then two lines of words over a plain grid of twelve photographs.
   The rules under html.gather-go are the portfolio's own, number for number, and apply only once
   the page's head has said the animation is going to run.
   Kit over portfolio: Outfit in place of its italic serif, the kit's label, ink on white, and
   the flat 62% scrim on the photograph in place of its gradient. */
.lead.gather-lead { min-height: calc(100svh - 84px); }       /* with the 84px header above it, one screen exactly */
/* The header is 84px tall at the top of a page and 68px once the page has moved, and it takes up
   room, so everything under it rises 16px on the first scroll. The animation measures the page
   once, at the top, and would run 16px out of step. While it is on, the header keeps its room. */
html.gather-go:not(.at-top) .hdr { margin-bottom: 16px; }
.gather-photo { position: absolute; inset: -8% 0; z-index: -2; }   /* taller than its frame, so it can drift */
html.gather-pre .gather-photo { opacity: 0; }
html.gather-pre .gather-lead .in { visibility: hidden; }
html.gather-go .gather-lead { cursor: pointer; }
.gather-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.gather-word span { display: inline-block; will-change: transform; }

.gather { position: relative; }
.gather-wrap { padding: 72px var(--edge) 0; }
.gather-words { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gather-say { width: min(86vw, 720px); margin: 16px 0 0; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -.01em; color: var(--ink); }
.gather-more { display: none; }
.gather-abs { width: min(88vw, 720px); margin: 32px auto 0; }
.gather-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.22vw; row-gap: 2.78vw; }
.gather-tile { width: 100%; aspect-ratio: 1; }
.gather-tile > div { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: var(--panel); }
@media (min-width: 861px) {
  .gather-say { width: min(46vw, 720px); margin-top: 1.7vw; }
}
@media (min-width: 1024px) {
  .gather-say { font-size: 28px; line-height: 36px; letter-spacing: -.02em; }
}

html.gather-go .gather { height: 425vh; }
/* no background on purpose: at scroll 0 the wrapper already sits over the opening (moved up by its
   own height while the section is still below), see-through, with its photographs parked off-screen */
html.gather-go .gather-wrap { position: sticky; top: 0; padding: 0 1.7vw; will-change: transform; overflow: hidden; pointer-events: none; }
html.gather-go .gather:not(.armed) .gather-wrap { visibility: hidden; }      /* until the script has parked them */
html.gather-go .gather-words { position: relative; justify-content: center; width: 100%; height: 100vh; z-index: 1; }
html.gather-go .gather-more {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(28px, 4.5vh, 52px);
  font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.gather-line { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(17, 17, 17, 0), rgba(17, 17, 17, .55)); }
html.gather-go .gather-abs { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); width: 51.1vw; margin: 0; }
html.gather-go .gather-grid, html.gather-go .gather-tile { will-change: transform; }
@media (max-width: 860px) {
  html.gather-go .gather-abs { width: 88vw; }
}
/* Soft edges (Ian, 11 Oct 2026: he did not like the photographs being cut off by the screen). The
   photographs still run past the screen's edges, as in the portfolio's opening, but they fade out
   on the way there: under the header, towards the bottom, and at the two sides. It is a mask on
   the wrapper, so it moves nothing and is see-through like the wrapper itself. Two gradients, one
   up-and-down and one across, kept only where both are solid. On a phone the bands are narrower,
   because the gathered grid fills most of the screen and must not be faded while it is whole. */
html.gather-go .gather-wrap {
  --gather-fade: linear-gradient(to bottom, transparent 60px, #000 190px, #000 calc(100% - 130px), transparent 100%),
                 linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-image: var(--gather-fade); mask-image: var(--gather-fade);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 860px) {
  html.gather-go .gather-wrap {
    --gather-fade: linear-gradient(to bottom, transparent 56px, #000 104px, #000 calc(100% - 56px), transparent 100%),
                   linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
}

/* ══ the belt of logos, behind the bulb · 5 Oct 2026 ══════════════════════════
   Ian: "moving the carousel company logo belt to behind the light bulb and make it larger and
   lower opacity and if you spin the lightbulb its tied to the moving of the logos so if you move
   the lightbulb around slowly it doesnt make it any much faster but if you really spin it the belt
   goes really fast."
   The belt now runs across the card at the bulb's height, under it (the bulb is laid on with
   "screen" blending, so the logos show through its glass). The logos are two to two and a half
   times the size they were and a fifth as strong; a little stronger when the bulb is lit.
   The speed is set in js/bulb-scene.js, which takes the belt over from the plain animation once
   the bulb has loaded. If the bulb never loads, or less motion is asked for, the belt keeps its
   steady pace (or stands still), as before.
   On a wide screen the belt fades out before it reaches the two columns of links, so nothing
   moves behind words. The small line "Past sponsors and partners" sits under the bulb there. */
.end-art { pointer-events: none; }
.end-logos { opacity: .2; transition: opacity .6s cubic-bezier(.33, 1, .68, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
html.lit .end-logos { opacity: .8; }
/* The bulb lights the logos · 5 Oct 2026. Ian: "the light turning on doesnt do much right now so i
   want the logos to turn brighter when the lightbulb is turned on."
   --belt-lit runs from 0 (bulb off) to 1 (on). Off, the belt is 20% strong all the way across, as
   before. On, it is 96% strong beside the bulb and falls away to 34% at the far ends, the way
   light from one lamp does. Directly behind the bulb it is held to 50%, so bright letters do not
   cross the glass and the filament stays the brightest thing there. The falling away is a second mask, round, centred on the bulb, kept
   where it overlaps the first (the fade at the ends).
   The bulb's script writes --belt-lit every frame from how brightly the filament is burning, so
   the logos catch, dip and settle with it, and cool slowly when it is switched off. If that script
   is not there, the two rules above still make the belt brighter, evenly, when the page is "lit". */
@property --belt-lit { syntax: "<number>"; inherits: true; initial-value: 0; }
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .end-logos, html.lit .end-logos { opacity: 1; }
  .end-logos { --belt-lit: 0; --belt-fade: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); transition: --belt-lit .7s cubic-bezier(.33, 1, .68, 1);
    -webkit-mask-image: var(--belt-fade), radial-gradient(circle farthest-side at 50% 50%, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 0, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 13%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 27%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 36%, rgba(0, 0, 0, calc(.2 + .14 * var(--belt-lit))) 100%);
    mask-image: var(--belt-fade), radial-gradient(circle farthest-side at 50% 50%, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 0, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 13%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 27%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 36%, rgba(0, 0, 0, calc(.2 + .14 * var(--belt-lit))) 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
  html.lit .end-logos { --belt-lit: 1; }
  .end-logos.synced { transition: none; }             /* the script is writing the value itself */
}
.end-logos img { opacity: 1; }                       /* the belt as a whole carries the faintness now */
.end-logos .run.driven { animation: none; will-change: transform; }
@media (max-width: 899px) {
  .end-art { grid-row: 2; align-self: center; margin-top: 2px; padding: 0; border-radius: 0; }
  .end-logos img { height: clamp(34px, 7.4svh, 58px); }
  .end-logos .row { gap: 56px; padding-right: 56px; }
  .end-col.right { padding-bottom: 16px; }            /* the last row of the card, now the logos have left it */
}
@media (max-width: 899px) and (max-height: 640px) {
  .end-art { padding: 0; }
  .end-col.right { padding-bottom: 10px; }
}
@media (min-width: 900px) {
  .end-card { height: 686px; }                        /* the 34px the belt needed at the bottom are given back */
  .end-logos { top: 414px; bottom: auto; translate: 0 -50%;      /* 414: the middle of the bulb's box (228 + 372 / 2) */
    --belt-fade: linear-gradient(90deg, transparent 23%, #000 37%, #000 63%, transparent 77%);
    -webkit-mask-image: linear-gradient(90deg, transparent 23%, #000 37%, #000 63%, transparent 77%); mask-image: linear-gradient(90deg, transparent 23%, #000 37%, #000 63%, transparent 77%); }
  @supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
    /* the round light is as wide as the part of the belt that shows here, not as the whole card */
    .end-logos { -webkit-mask-image: var(--belt-fade), radial-gradient(circle 30vw at 50% 50%, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 0, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 12%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 24%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 34%, rgba(0, 0, 0, calc(.2 + .14 * var(--belt-lit))) 100%);
      mask-image: var(--belt-fade), radial-gradient(circle 30vw at 50% 50%, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 0, rgba(0, 0, 0, calc(.2 + .3 * var(--belt-lit))) 12%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 24%, rgba(0, 0, 0, calc(.2 + .76 * var(--belt-lit))) 34%, rgba(0, 0, 0, calc(.2 + .14 * var(--belt-lit))) 100%); }
  }
  .end-logos img { height: 72px; }
  .end-logos .row { gap: 120px; padding-right: 120px; }
  .end-cap { left: 0; right: 0; top: 612px; bottom: auto; text-align: center; }
}

/* ══ the phone menu, third pass · 8 Oct 2026 ════════════════════════════════
   Ian: a blue rectangle flashed when the menu button or the logo was tapped; the menu could only be
   closed with its own button; and he asked for the opening and closing to be "as smooth and
   polished as possible".

   THE FLASH   is the browser's own mark for a tap on a link or a button. It is switched off for the
               whole site. Keyboard focus rings are a different thing and are untouched.

   HOW IT MOVED BEFORE   the menu grew in height inside the header, which pushed the whole page down
               a little on every frame, and its padding appeared in one jump at the start.
   HOW IT MOVES NOW      the menu hangs under the bar, over the page, at its full size from the
               start, and is uncovered from the top down (a clip, which costs the phone almost
               nothing). Nothing on the page moves. Then, in order: the picture settles, the links
               arrive one after another 40ms apart, and the two lines of the button cross into an X.
               Closing is quicker than opening (340ms against 560ms) and has no stagger: the
               contents let go at once and the cover comes back up.
   BEHIND IT   a dim sheet over the page (.hdr-veil, made by motion.js). It is what a tap "outside
               the menu" lands on, so that tap closes the menu and does not also press whatever
               was underneath.
   Only screens under 768px have this menu; nothing here applies to wider ones. */
html { -webkit-tap-highlight-color: transparent; }

@media (max-width: 767px) {
  .hdr { transition: padding 280ms cubic-bezier(.65, 0, .35, 1), background-color 280ms ease, box-shadow 280ms ease; }
  .hdr.open, html.at-top .hdr.open { background: #fff; box-shadow: none; }

  .hdr-drop, .hdr-drop.open {
    position: absolute; left: 0; right: 0; top: 100%; grid-template-rows: auto; opacity: 1;
    max-height: calc(100svh - 84px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border-radius: 0 0 24px 24px;
  }
  .hdr-drop {
    clip-path: inset(0 0 100% 0 round 0 0 24px 24px); visibility: hidden; pointer-events: none;
    transition: clip-path 340ms cubic-bezier(.4, 0, .2, 1), visibility 0s 340ms;
  }
  .hdr-drop.open {
    clip-path: inset(0 0 0 0 round 0 0 24px 24px); visibility: visible; pointer-events: auto;
    transition: clip-path 560ms cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }
  /* the same padding open and shut, so nothing jumps when it starts to move */
  .hdr-drop > ul, .hdr-drop.open > ul { padding: 8px 24px 24px 20px; overflow: visible; }
  .hdr-drop .hdr-peek, .hdr-drop.open .hdr-peek { padding: 8px 0 24px; }

  /* the contents: gone at once on closing, arriving in turn on opening */
  .hdr-drop > ul li { opacity: 0; transform: translateY(-10px); transition: opacity 140ms ease, transform 140ms ease; }
  .hdr-drop .hdr-peek .pics { opacity: 0; transform: translateZ(0) scale(.96); transform-origin: 50% 0; transition: opacity 140ms ease, transform 140ms ease; }
  .hdr-drop.open > ul li { opacity: 1; transform: none; transition: opacity 420ms cubic-bezier(.22, 1, .36, 1) var(--d, 0ms), transform 520ms cubic-bezier(.22, 1, .36, 1) var(--d, 0ms); }
  .hdr-drop.open .hdr-peek .pics { opacity: 1; transform: translateZ(0); transition: opacity 480ms cubic-bezier(.22, 1, .36, 1) 100ms, transform 600ms cubic-bezier(.22, 1, .36, 1) 100ms; }
  .hdr-drop > ul li:nth-child(1) { --d: 90ms; }
  .hdr-drop > ul li:nth-child(2) { --d: 130ms; }
  .hdr-drop > ul li:nth-child(3) { --d: 170ms; }
  .hdr-drop > ul li:nth-child(4) { --d: 210ms; }
  .hdr-drop > ul li:nth-child(5) { --d: 250ms; }
  .hdr-drop > ul li:nth-child(6) { --d: 310ms; }

  /* the button: two lines that cross into an X */
  .hdr-burger span { transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
  .hdr-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .hdr-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  /* the sheet behind the menu */
  .hdr-veil { position: fixed; inset: 0; z-index: 49; background: rgba(17, 17, 17, .36); opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s 300ms; }
  .hdr-veil.on { opacity: 1; visibility: visible; transition: opacity 420ms ease, visibility 0s; }
}
@media (min-width: 768px) { .hdr-veil { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hdr-drop, .hdr-drop.open, .hdr-drop > ul li, .hdr-drop.open > ul li, .hdr-drop .hdr-peek .pics, .hdr-drop.open .hdr-peek .pics, .hdr-burger span, .hdr-veil, .hdr-veil.on { transition: none !important; }
}