/* THE OFFICIAL SITE'S STYLESHEET (official-working-draft/, 2026-10-06). Copied from mockup/v6/v2.css when
   flow became the official version and all six pages were brought into one folder; v6's copy is
   frozen with the old draft. Edit this one.

    TEDxPenn mockup v6 (2026-09-20).
   The duotone concept: every photograph on this site is pushed to two colours, TED red and
   black, and the homepage alternates between white paper with black type and full-bleed
   duotone photographic bands. Red is the only accent. The rounded dot-grid panels, the
   caption-plus-arrow pattern and the pill buttons of v2-v5 are gone with it — they were the
   "tech startup" language Christina flagged.
   Structure still traces to the TEDxPortland screenshots; type and spacing to the Ramp ones.
   Palette is TED's own (PRIMER 2c), which is a closed set: nothing outside it is used.
   All CSS is ours. No Ramp or TEDxPortland code, image or wording is used. */

/* One typeface for the whole site: Clarity City (Christina, 2026-10-06: "Throughout the entire
   website, can you change the font to be Clarity City"). It replaces both Manrope (text) and
   Helen Bold (headings). Self-hosted from VMware's own repository, github.com/vmware/clarity-city,
   under the SIL Open Font License; the licence text sits beside the files. */
@font-face{font-family:"Clarity City";font-style:normal;font-weight:300;font-display:swap;
  src:url(assets/fonts/ClarityCity/ClarityCity-Light.woff2) format("woff2")}
@font-face{font-family:"Clarity City";font-style:italic;font-weight:300;font-display:swap;
  src:url(assets/fonts/ClarityCity/ClarityCity-LightItalic.woff2) format("woff2")}
@font-face{font-family:"Clarity City";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/ClarityCity/ClarityCity-Regular.woff2) format("woff2")}
@font-face{font-family:"Clarity City";font-style:normal;font-weight:500;font-display:swap;
  src:url(assets/fonts/ClarityCity/ClarityCity-Medium.woff2) format("woff2")}
@font-face{font-family:"Clarity City";font-style:normal;font-weight:600;font-display:swap;
  src:url(assets/fonts/ClarityCity/ClarityCity-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Clarity City";font-style:normal;font-weight:700;font-display:swap;
  src:url(assets/fonts/ClarityCity/ClarityCity-Bold.woff2) format("woff2")}

:root{
  --ink:#121212;        /* TED black */
  --text:#494949;       /* TED gray-6 */
  --faint:#828282;      /* TED gray-4 */
  --hair:#ECECEC;       /* TED gray-2 */
  --rule:#D0D0D0;       /* TED gray-3 */
  --red:#EB0028;        /* TED red */
  --deep:#8E0019;       /* TED red, darkened — duotone and wheel only */
  --dark:#4A000E;       /* TED red, darkened further */
  --yellow:#FFBC00;     /* TED membership yellow */
  --purple:#622667;     /* TED purple */
  --teal:#68C8BB;       /* TED teal */
  --seafoam:#80B7CA;    /* TED seafoam */
  --lavender:#AE97D8;   /* TED lavender */
  --persimmon:#FF8561;  /* TED light persimmon */
  --warm:#B6ACA3;       /* TED warm gray */
  --paper:#FFFFFF;      /* the page, plain white */
  --panel:#F6F6F6;      /* TED gray-1 — panel fill. No eggshell anywhere (Christina). */
  --bar:68px;
  --shell:75rem;        /* wide container, for panels */
  --prose:42rem;        /* narrow container, for reading */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);
  font-family:"Clarity City",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;line-height:1.65;font-weight:300;letter-spacing:0}
img{max-width:100%}

h1,h2,h3,h4{color:var(--ink);margin:0;font-family:"Clarity City",system-ui,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.04}
h1{font-size:clamp(2.6rem,7.4vw,6rem);line-height:.96;letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.8vw,3.25rem);line-height:1}
h3{font-size:1.4rem;letter-spacing:-.025em}
h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1.1rem}
/* No underlines anywhere on the site (Christina, 2026-10-06). Links inside running text are told
   apart by weight, and by turning red on hover. */
a{color:var(--ink);text-decoration:none}
p a:not(.btn){font-weight:600}
p a:not(.btn):hover{color:var(--red)}
strong{font-weight:600;color:var(--ink)}

/* The second line of a headline drops to grey, as on the Ramp reference */
.muted{color:var(--faint)}

.shell{max-width:var(--shell);margin:0 auto;padding:0 1.5rem}
.prose{max-width:var(--prose)}
section{padding:7.5rem 0}
.eyebrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 1.5rem}
.chip{background:#fff;border:1px solid var(--hair);
  padding:.15rem .5rem;color:var(--ink);letter-spacing:0;font-size:.78rem}
.lead{font-size:1.25rem;line-height:1.55;font-weight:300;color:var(--text)}
/* headings need air before their first paragraph; the homepage was carrying this inline */
h1+p,h2+p,h3+p,h2+ul,h1+ul{margin-top:1.25rem}

/* ---------- Header: no bar ----------
   Christina, 2026-09-20: *"get rid of the floating header on V6 and just turn it into a 3 bar
   menu on the upper right corner and keep the TEDxPenn logo discretely on the top right"*.
   So the black bar is gone and the page runs to the very top of the screen. The wordmark and
   the button sit together in the top right, over whatever is behind them, and the links move
   into a full-screen panel.

   NOTE ON THE LOGO: TED's guidelines say the wordmark is preferably placed on solid white or
   black (PRIMER 2c). Over a photograph it is neither, so it carries a soft dark wash behind it
   to guarantee contrast. If we want to be strict, the alternative is a small black tile —
   which is the thing she asked me to remove back in pass 3. */
.top{position:fixed;top:0;right:0;z-index:60;display:flex;align-items:center;gap:1.1rem;
  padding:1.5rem 1.75rem}
.top::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 140% at 100% 0,rgba(12,0,4,.55) 0%,rgba(12,0,4,0) 70%);
  transition:opacity .25s ease}
/* No box, at Christina's instruction (2026-09-20). The header stays transparent all the way
   down and reads what is behind it instead: over the dark blocks — the photograph, the photo
   band, the closing block, a page head — the bars and the wordmark are white; over the white
   page the bars turn black and the wordmark is hidden, because our only wordmark is
   white-lettered and there is still no dark-on-light file (PRIMER 6).
   `body.on-light` is set by the script on each page. */
.on-light .top::before{opacity:0}
.on-light .burger span{background:var(--ink)}
.on-light .burger:hover span{background:var(--red)}
.on-light .logo{opacity:0;pointer-events:none}
.menu-open .burger span{background:#fff}
.menu-open .logo{opacity:.92;pointer-events:auto}
.logo,.burger span{transition:opacity .2s ease,background .2s ease}
body{padding-top:0}
html{scroll-padding-top:6rem}
.logo{flex:none;display:block;opacity:.92}
.logo:hover{opacity:1}
.logo span{--w:96px;display:block;width:var(--w);height:calc(var(--w) * 452 / 2957);
  background:url(assets/tedxpenn-logo-white.png) no-repeat;
  background-size:calc(var(--w) * 3650 / 2957) auto;
  background-position:calc(var(--w) * -207 / 2957) calc(var(--w) * -153 / 2957);
  text-indent:-9999px;overflow:hidden}
/* on the white pages the white wordmark would vanish, so those pages open on a black strip */
.dark-top{background:var(--ink);height:5.5rem}

/* the three-bar button */
.burger{flex:none;width:2.9rem;height:2.9rem;border:0;background:transparent;cursor:pointer;
  display:grid;align-content:center;gap:6px;padding:0 .35rem}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.burger:hover span{background:var(--red)}
.menu-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* the panel it opens */
/* true black, not the charcoal --ink (her note, 2026-10-06): the header's dark corner showed
   against the charcoal as a patch */
.menu{position:fixed;inset:0;z-index:55;background:#000;color:#fff;
  display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .28s ease;
  padding:7rem 0 4rem}
.menu-open .menu{opacity:1;visibility:visible}
.menu nav{display:flex;flex-direction:column;gap:.35rem}
.menu a{font-family:"Clarity City",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  text-decoration:none;color:#fff;font-size:clamp(2rem,5.6vw,4.25rem);line-height:1.06;
  letter-spacing:.005em}
.menu a:hover,.menu a[aria-current]{color:var(--red)}
.menu .menu-foot{margin-top:3.5rem;display:flex;gap:2rem;flex-wrap:wrap;
  font-size:.9375rem;color:rgba(255,255,255,.6)}
.menu .menu-foot a{font-family:inherit;font-size:.9375rem;text-transform:none;
  color:rgba(255,255,255,.6);letter-spacing:0;word-spacing:0}
.menu .menu-foot a:hover{color:#fff}

.btn{flex:none;display:inline-block;text-decoration:none;border-radius:0;
  font-size:.9375rem;font-weight:600;padding:.55rem 1.1rem;white-space:nowrap;border:0;
  cursor:pointer;font-family:inherit}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
/* 2026-10-07, her notes: no red box, thinner type; then "a touch bigger and put a
   clear white box around it". See-through, with a thin white outline. Every one of these
   sits on a dark ground. */
.btn-red{background:transparent;color:#fff;font-size:1.0625rem;font-weight:300;padding:.6rem 1.25rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.btn-red:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px #fff}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn-line:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* two sections sharing one row, each opened by a red keyline */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.duo-col{border-top:3px solid var(--red);padding-top:1.75rem}
.duo-col .facts{margin-top:2rem;gap:1.25rem}

/* a hairline between homepage sections */
.divider{height:1px;background:var(--hair);max-width:var(--shell);margin:0 auto}

/* ---------- Panels: how every graphic sits on the page ---------- */
.panel{background:var(--panel);border:1px solid var(--hair);
  overflow:hidden;position:relative}
.panel-pad{position:relative;padding:clamp(1.5rem,4vw,3.5rem)}
.panel.photo{padding:0}
.panel.photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.cap{padding-top:1.5rem}
.cap h3{margin-bottom:.6rem}
.cap p{color:var(--text);margin-bottom:.9rem}

/* ---------- Theme wheel: 17 editions, compact but loud ---------- */
.wheel-wrap{position:relative}
.wheel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem .25rem 1.5rem;scrollbar-width:none}
.wheel::-webkit-scrollbar{display:none}
.wcard{flex:none;width:14.5rem;height:18.5rem;scroll-snap-align:center;
  padding:1.4rem;display:flex;flex-direction:column;text-decoration:none;color:#fff;
  background:var(--ink);transition:transform .2s ease}
.wcard:hover{transform:translateY(-4px)}
.wcard .wy{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  opacity:.75}
.wcard .wt{margin:auto 0 0;font-family:"Clarity City",system-ui,sans-serif;font-size:1.85rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.02;
  font-size:1.6rem;word-break:break-word;hyphens:auto}
.wcard .wd{margin-top:.7rem;font-size:.8125rem;opacity:.78;line-height:1.35}
.wcard.empty{background:#fff;border:1px dashed var(--rule);color:var(--faint)}
.wcard.empty .wt{font-family:"Clarity City",system-ui,sans-serif;font-style:italic;font-size:1.05rem;
  font-weight:500;letter-spacing:-.01em;text-transform:none}
.c-red{background:var(--red)}
.c-deep{background:var(--deep)}
.c-dark{background:var(--dark)}
.c-purple{background:var(--purple)}
.c-ink{background:var(--ink)}
.c-teal{background:var(--teal);color:var(--ink)}
.c-seafoam{background:var(--seafoam);color:var(--ink)}
.c-lavender{background:var(--lavender);color:var(--ink)}
.c-persimmon{background:var(--persimmon);color:var(--ink)}
.c-yellow{background:var(--yellow);color:var(--ink)}
.c-warm{background:var(--warm);color:var(--ink)}
/* The controls used to be two ‹ › glyphs in circles floating over the cards — typographic
   quote marks pretending to be arrows. They are now drawn chevrons in square buttons, sitting
   in the heading row beside "Past Conferences", with a rail under the cards showing position. */
.wheel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.wheel-nav{display:flex;gap:.5rem;flex:none}
.wheel-btn{width:3rem;height:3rem;padding:0;border:1px solid var(--rule);background:transparent;
  cursor:pointer;color:var(--ink);display:grid;place-items:center}
.wheel-btn svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:square;stroke-linejoin:miter;display:block}
.wheel-btn:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.wheel-btn:disabled{opacity:.28;cursor:default}
.wheel-rail{position:relative;height:2px;background:var(--hair);overflow:hidden;
  margin-top:.5rem}
.wheel-rail span{position:absolute;inset:0 auto 0 0;display:block;background:var(--red);
  transition:transform .15s linear}
@media (max-width:860px){
  .wheel-nav{display:none}
}

/* ---------- Stat band: the same photograph, same duotone ---------- */
.ticker{position:relative;padding:4rem 0;background:#1c0006;overflow:hidden;isolation:isolate}
.ticker .dt{position:absolute;inset:0;z-index:0;
  filter:grayscale(1) brightness(1.15) contrast(1.2)}
.ticker::before{content:"";position:absolute;inset:0;z-index:1;background:var(--red);
  mix-blend-mode:multiply}
.ticker::after{content:"";position:absolute;inset:0;z-index:2;background:#320a12;
  mix-blend-mode:lighten;opacity:.8}
.ticker .shade{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(rgba(12,0,4,.34),rgba(12,0,4,.58))}
.ticker ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2rem}
.ticker li{display:block}
.ticker .n{display:block;font-size:clamp(2.25rem,4vw,3.5rem);font-weight:700;
  letter-spacing:-.04em;line-height:1;color:#fff}
.ticker .l{display:block;margin-top:.7rem;font-size:.8125rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--red)}


/* ---------- Lists ---------- */
.people{list-style:none;margin:2.5rem 0 0;padding:0}
.people li{padding:1.15rem 0;border-top:1px solid var(--hair)}
.people li:first-child{border-top:0;padding-top:0}
.people .role{display:block;color:var(--faint);font-size:.9375rem;margin-top:.15rem}
.people .bio{display:block;margin-top:.5rem;font-size:.9375rem}
.years{list-style:none;margin:2.5rem 0 0;padding:0}
.years li{display:grid;grid-template-columns:6.5rem 1fr;gap:1.5rem;align-items:baseline;
  padding:1.15rem 0;border-top:1px solid var(--hair)}
.years li:first-child{border-top:0}
.years .y{font-size:1.25rem;font-weight:700;color:var(--ink);letter-spacing:-.03em}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2.5rem}
.facts p{margin:0;color:var(--ink);font-weight:600}
.facts .label{font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .3rem}
.label{font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 .5rem}

/* ---------- Placeholders (visible on purpose) ---------- */
.ph{display:inline-block;color:var(--faint);font-style:italic;
  border:1px dashed var(--rule);padding:.05rem .45rem;font-size:.9375rem}
.ph-box{border:1px dashed var(--rule);color:var(--faint);font-style:italic;
  padding:1.75rem;font-size:.9375rem;background:#fff}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:1rem;
  margin-top:2.5rem}
.logos .ph-box{aspect-ratio:5/2;display:grid;place-items:center;padding:.5rem;text-align:center}
.shot{aspect-ratio:4/3;display:grid;place-items:center;text-align:center;
  padding:1rem;font-size:.8125rem;font-style:italic;color:var(--faint);
  border:1px dashed var(--rule);background:#fff}

/* ---------- Closing band + footer ---------- */
.band{background:var(--ink);color:#fff;padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem)}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.72)}
.band .ph{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.35)}
.band .btn-line{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}

/* ---------- Site footer: a dark panel with rounded top corners, in the flow ---------- */
.site-footer{background:var(--ink);color:#fff;margin-top:0;padding:3.5rem 0 1.75rem}
.foot-grid{display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr;gap:1.75rem 3rem;align-items:start}
/* the logo block runs down the left; on the right, the page links and then the buttons */
.foot-grid>div:first-child{grid-row:1 / span 2}
.foot-mark{display:block;margin-bottom:1.25rem;width:max-content}
.foot-mark span{--w:150px;display:block;width:var(--w);height:calc(var(--w) * 452 / 2957);
  background:url(assets/tedxpenn-logo-white.png) no-repeat;
  background-size:calc(var(--w) * 3650 / 2957) auto;
  background-position:calc(var(--w) * -207 / 2957) calc(var(--w) * -153 / 2957);
  text-indent:-9999px;overflow:hidden}
.foot-blurb{color:rgba(255,255,255,.7);max-width:44ch;margin:0;font-size:.875rem}
.foot-arrow{display:inline-block;margin-top:1.25rem;text-decoration:none;color:#fff;
  font-size:.875rem;font-weight:600;   /* was small spaced-out capitals; she found that look generic */
  padding-bottom:.25rem}
.foot-arrow:hover{color:var(--red)}
.socials{display:flex;gap:.5rem;margin:1.5rem 0 0;list-style:none;padding:0}
.socials a{width:2.2rem;height:2.2rem;background:rgba(255,255,255,.09);
  display:grid;place-items:center;color:#fff;text-decoration:none}
.socials a:hover{background:rgba(255,255,255,.18)}
.socials svg{width:1.05rem;height:1.05rem;fill:currentColor;display:block}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;align-content:start}
.foot-links a{display:block;color:#fff;text-decoration:none;
  font-family:"Clarity City",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.9375rem;letter-spacing:.02em;
  padding:.45rem 0}   /* the lines between these went with the underlines, 2026-10-06 */
.foot-links a:hover{color:var(--red)}
/* beneath the page links: nominate a speaker, partner with us, mailing list. These are
   things to do, not pages, so they are light outlined buttons in plain words rather than bold
   capitals (her notes, 2026-10-06); they fill red when pointed at */
.foot-links.foot-do{grid-column:2;display:flex;flex-wrap:wrap;gap:.6rem}
.foot-links.foot-do a{font-weight:400;font-size:.875rem;text-transform:none;letter-spacing:0;
  padding:.45rem .9rem;border:1px solid rgba(255,255,255,.35);
  transition:background .2s ease,border-color .2s ease}
.foot-links.foot-do a:hover{background:var(--red);border-color:var(--red);color:#fff}
.foot-rule{border:0;border-top:1px solid rgba(255,255,255,.14);margin:2.5rem 0 1.25rem}
.foot-base{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.8125rem;color:rgba(255,255,255,.45)}
.foot-base p{margin:0}
.foot-base a{color:rgba(255,255,255,.45)}
.foot-base a:hover{color:rgba(255,255,255,.8)}

@media (max-width:860px){
  .top{padding:1.1rem 1.1rem}
  .logo span{--w:78px}
  .ticker ul{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr;gap:2.5rem}
  .foot-grid{grid-template-columns:1fr;gap:2.5rem}
  .foot-links{grid-template-columns:repeat(2,1fr)}
  .foot-grid>div:first-child{grid-row:auto}
  .foot-links.foot-do{grid-column:auto}
  .site-footer{padding-top:3rem}
  .panel-grid{grid-template-columns:1fr}
  section{padding:3.5rem 0}
  .tl-count{text-align:left}
}
@media (max-width:600px){
  .ticker ul{grid-template-columns:repeat(2,1fr);gap:1.75rem}
  .facts{grid-template-columns:1fr}
  .years li{grid-template-columns:1fr;gap:.25rem}
}

/* ---------- The duotone system ----------
   One treatment, used by every photograph on the site: desaturate and lift the picture, lay
   TED red over it in `multiply` so the shadows go black and the highlights go red, then lift
   the blacks again so the darkest areas keep some colour. `isolation:isolate` keeps the
   blending inside the wrapper instead of leaking onto the page.

   TWO RULES that come with it:
   - Never let the TEDxPenn wordmark fall inside a duotone frame. Tinting it would recolour the
     logo, which TED's guidelines forbid (PRIMER 2c). Every crop here is chosen for that.
   - Check the crop at the size it actually renders: with `cover` in a frame that is taller
     than it is wide, the photo's full height already fits, so a vertical offset does nothing.
     Sizing to a multiple of the frame's height is what actually crops. */
.duotone{position:relative;overflow:hidden;isolation:isolate;background:#1c0006}
.duotone img,.duotone .dt{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;filter:grayscale(1) brightness(1.7) contrast(1.15)}
.duotone::before,.duotone::after{content:"";position:absolute;inset:0;pointer-events:none}
.duotone::before{z-index:1;background:var(--red);mix-blend-mode:multiply}
.duotone::after{z-index:2;background:#3d0a14;mix-blend-mode:lighten;opacity:.85}
/* Cropped files, not CSS crops. `irvine-house.jpg` and `irvine-seats.jpg` both show the stage
   screen with the wordmark on it, and cropping that away in CSS needs a zoom so large that the
   photo softens — and the zoom then depends on the frame's proportions, which letterboxed the
   short stat band. `*-rows.jpg` are the seat rows cut out of each frame at full resolution
   (rendered in headless Chrome; sips can only crop from the centre). They carry no wordmark,
   so they can be used with plain `cover` anywhere. */
.dt-seats{background:url(assets/photos/irvine-house-rows.jpg) 50% 50%/cover no-repeat}
.dt-rows{background:url(assets/photos/irvine-seats-rows.jpg) 50% 50%/cover no-repeat}
/* the same frame pushed right, which crops out the one person standing in the rows */
.dt-house-r{background:url(assets/photos/irvine-house-rows.jpg) 88% 50%/cover no-repeat}
.dt-booth{background:url(assets/photos/tech-booth.jpg) 50% 45%/cover no-repeat}
.dt-board{background:url(assets/photos/idea-board.jpg) 50% 50%/cover no-repeat}

/* ---------- Full-screen duotone entry (v6) ----------
   The page opens on the photograph and nothing else: full viewport height, running up behind
   the floating header. The scrim is one soft vertical gradient — the picture is already dark
   enough on the left that the headline does not need a second, horizontal one. */
/* The entry fills the screen exactly: no negative margin. It had one, left from the floating
   bar that used to sit above it — with `body` no longer padded for that bar, it was pulling
   the picture 100px up the page, so the section below showed before the fold. */
.hero-duo{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:100svh;background:#1c0006}
.hero-duo .dt{position:absolute;inset:0;z-index:0;
  filter:grayscale(1) brightness(1.7) contrast(1.15)}
.hero-duo::before{content:"";position:absolute;inset:0;z-index:1;background:var(--red);
  mix-blend-mode:multiply}
.hero-duo::after{content:"";position:absolute;inset:0;z-index:2;background:#3d0a14;
  mix-blend-mode:lighten;opacity:.85}
.hero-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,0,4,.72) 0%,rgba(12,0,4,.20) 34%,
    rgba(12,0,4,.55) 72%,rgba(12,0,4,.92) 100%)}
.hero-duo .shell{position:relative;z-index:4;width:100%}
.hero-duo h1{color:#fff;max-width:14ch;font-size:clamp(2.1rem,5.2vw,4.4rem);line-height:1.01}
.hero-duo .lead{color:rgba(255,255,255,.88);max-width:46ch;margin-top:1.75rem}
.hero-actions{margin-top:2.25rem;display:flex;gap:.75rem;flex-wrap:wrap}
.btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px #fff}
.hero-credit{margin:3.5rem 0 0;font-size:.8125rem;color:rgba(255,255,255,.62);
  letter-spacing:.01em}

/* ---------- Photographic bands: the concept carried down the page ----------
   A full-bleed duotone photograph with the words on it, alternating side. This replaces the
   rounded panel with its caption underneath. */
.photo-band{position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;
  min-height:min(72vh,620px);padding:4.5rem 0;background:#1c0006}
.photo-band .dt{position:absolute;inset:0;z-index:0;
  filter:grayscale(1) brightness(1.7) contrast(1.15)}
.photo-band::before{content:"";position:absolute;inset:0;z-index:1;background:var(--red);
  mix-blend-mode:multiply}
.photo-band::after{content:"";position:absolute;inset:0;z-index:2;background:#3d0a14;
  mix-blend-mode:lighten;opacity:.85}
.photo-band .band-scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,0,4,.86) 0%,rgba(12,0,4,.58) 42%,
    rgba(12,0,4,.16) 78%,rgba(12,0,4,.08) 100%)}
.photo-band.right .band-scrim{background:linear-gradient(270deg,rgba(12,0,4,.86) 0%,
  rgba(12,0,4,.58) 42%,rgba(12,0,4,.16) 78%,rgba(12,0,4,.08) 100%)}
.photo-band .shell{position:relative;z-index:4;width:100%}
.photo-band .band-copy{max-width:38rem}
.photo-band.right .band-copy{margin-left:auto}
.photo-band h2{color:#fff;font-size:clamp(1.9rem,3.6vw,3rem)}
.photo-band p{color:rgba(255,255,255,.86);margin-top:1.25rem;max-width:44ch}
.photo-band .btn-red{margin-top:2rem}

@media (max-width:860px){
  .photo-band{min-height:min(66vh,520px)}
  .photo-band .band-scrim,.photo-band.right .band-scrim{
    background:linear-gradient(180deg,rgba(12,0,4,.55) 0%,rgba(12,0,4,.35) 40%,
      rgba(12,0,4,.88) 100%)}
  .photo-band .band-copy,.photo-band.right .band-copy{max-width:none;margin:0}
}
@media (max-width:600px){
  .hero-duo{padding-bottom:3.5rem}
  .hero-credit{margin-top:2.5rem}
}

/* ---------- Page head: the black title block the inner pages open on ---------- */
.page-head{background:var(--ink);color:#fff;padding:9rem 0 4.5rem}
.page-head h1{color:#fff}
.page-head + *{padding-top:0}
.page-head + .shell > section:first-of-type,
.page-head + section{padding-top:4.5rem}

/* ---------- Hero, on the proportions TEDxAmsterdam uses ----------
   Their overlay is `space-between`: the headline sits high, the event's date and venue sit on
   the floor of the picture, and the display size is enormous against a small meta line. Ours
   is the same arrangement, in our type and our duotone. */
.hero-duo{justify-content:flex-start;align-items:stretch;padding:0}
.hero-inner{position:relative;z-index:4;width:100%;display:flex;flex-direction:column;
  justify-content:space-between;padding:8.5rem 1.5rem 3.25rem}
.hero-duo .eyebrow-line{color:#fff;font-family:"Clarity City",system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;font-size:clamp(1.1rem,2vw,1.75rem);letter-spacing:.005em;
  ;margin:0 0 .35rem}
.hero-duo h1{max-width:none}
.hero-meta{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;margin-top:3rem}
.hero-when{color:#fff;font-size:1.125rem;font-weight:600;margin:0}
.hero-where{display:flex;align-items:center;gap:.6rem;margin:.5rem 0 0;
  font-size:.8125rem;color:rgba(255,255,255,.7)}
.hero-where::before{content:"";width:.6rem;height:.6rem;background:var(--red);flex:none}

/* ---------- One line, set large, in caps ----------
   Their homepage hangs on a single statement between blocks. Ours states a fact we already
   make elsewhere on the site rather than a slogan. */
.statement{padding:8rem 0}
.statement p{font-family:"Clarity City",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,4.6vw,4rem);line-height:1.02;letter-spacing:.005em;
  ;color:var(--ink);margin:0;max-width:22ch}
.statement .red{color:var(--red)}

/* ---------- Lists in their date @ venue rhythm ---------- */
.agenda{list-style:none;margin:3.5rem 0 0;padding:0}
.agenda li{display:grid;grid-template-columns:14rem 1fr auto;gap:2rem;align-items:baseline;
  padding:2rem 0;border-top:1px solid var(--hair)}
.agenda .when{font-size:.9375rem;color:var(--faint)}
.agenda h3{font-size:clamp(1.25rem,2.2vw,1.9rem);letter-spacing:.005em}
.agenda .at{font-size:.9375rem;color:var(--faint);white-space:nowrap}
.agenda .at b{color:var(--ink);font-weight:600}

/* speakers, as a plain roll of names — no portraits to show yet */
.roll{list-style:none;margin:3.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 2.5rem}
.roll li{padding:1.4rem 0;border-top:1px solid var(--hair)}
.roll .who{display:block;font-family:"Clarity City",system-ui,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.25rem;letter-spacing:.005em;color:var(--ink)}
.roll .what{display:block;margin-top:.25rem;font-size:.9375rem;color:var(--faint)}

/* their images carry a red cast under them, and arrive out of a blur */
.glow{box-shadow:0 34px 90px rgba(235,0,40,.28)}
.reveal{opacity:.08;filter:blur(18px);transform:translateY(28px);
  transition:opacity .9s ease,filter .9s ease,transform .9s ease}
.reveal.in{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;filter:none;transform:none;transition:none}
}

@media (max-width:860px){
  .hero-duo{align-items:flex-end}
  .hero-inner{padding:7rem 1.5rem 2.5rem;justify-content:flex-end;gap:2.5rem}
  .hero-stats .n{font-size:1.45rem}
  .statement{padding:4.5rem 0}
  .agenda li{grid-template-columns:1fr;gap:.5rem}
  .agenda .at{white-space:normal}
  .roll{grid-template-columns:1fr}
  .page-head{padding:7rem 0 3rem}
}

/* placeholder chips sitting on the photograph */
.hero-meta .ph{color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.4)}

/* ---------- The figures, on the photograph ----------
   They had a band of their own; Christina, 2026-09-20: put them low on the homepage graphic.
   Same five numbers, same red labels, now sitting on the floor of the hero. */
.hero-stats{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(5,auto);justify-content:start;gap:2.75rem}
.hero-stats .n{display:block;font-family:"Clarity City",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1;letter-spacing:.005em;color:#fff}
.hero-stats .l{display:block;margin-top:.5rem;font-size:.8125rem;font-weight:700;
  text-transform:uppercase;color:var(--red)}   /* capitals at normal spacing: she asked for the
  wide letter-spacing to go, then for capitals back (2026-10-06) */
@media (max-width:860px){
  .hero-stats{grid-template-columns:repeat(3,auto);gap:1.5rem 2rem}
}
@media (max-width:520px){
  .hero-stats{grid-template-columns:repeat(2,auto)}
}

/* The subscribe band is black and so is the footer: the band is full bleed and runs straight
   into it, so the page ends in one black mass rather than a floating box on a white gap.
   Its own bottom padding has to stay — zeroing it let the last paragraph's margin collapse
   out of the band and reopen an 18px white line above the footer. */

/* ---------- The closing block ----------
   Next Conference and the sign-up were two sections, one white and one black, with a rule
   between them. Christina asked for them merged: one black block, the conference on the left
   and the sign-up on the right, running straight into the footer. */
.closing-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:4rem;align-items:start}
.closing h2,.closing h3{color:#fff}
.closing h3{font-size:clamp(1.35rem,2.2vw,1.9rem)}
.closing p{color:rgba(255,255,255,.72)}
.closing .facts{grid-template-columns:repeat(3,auto);justify-content:start;gap:2.5rem;
  margin-top:2.5rem}
.closing .facts p{color:#fff;font-weight:600}
.closing .facts .label{color:var(--red)}
.closing .ph{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.35)}
.closing-sub{border-left:1px solid rgba(255,255,255,.16);padding-left:4rem}
@media (max-width:860px){
  .closing-grid{grid-template-columns:1fr;gap:3rem}
  .closing-sub{border-left:0;border-top:1px solid rgba(255,255,255,.16);
    padding-left:0;padding-top:3rem}
  .closing .facts{grid-template-columns:1fr;gap:1.5rem}
}

/* ---------- The entrance in motion (pass 25) ----------
   Three movements layered, picked off `mockup/hero-motion.html`: the entrance assembles itself
   once on load, the photograph drifts for as long as anyone stays on it, and it leaves slower
   than the words sitting on it. Each is dialled below the point where it asks for attention —
   the drift is a 44-second cycle, the lean towards the pointer is eight pixels.

   The photograph takes three nested elements because three things move it and a transform can
   only be written once per element:
     .dt-wrap  the scroll offset and the pointer lean, written by JS every frame
     .dt-zoom  the arrival: one scale, eased out over two seconds
     .dt       the drift loop, running for as long as the page is open
   Collapse any two of them and the loop and the parallax overwrite each other silently. */
/* the 9% of slack above and below is what the scroll offset travels into: less than the
   70px of travel and the foot of the photograph lifts off its own frame on the way out */
.dt-wrap{position:absolute;inset:-9% 0;z-index:0;will-change:transform}
.dt-zoom{position:absolute;inset:0;transform:scale(1.1);
  transition:transform 2s cubic-bezier(.16,.84,.34,1)}
.hero-duo.play .dt-zoom{transform:none}
@keyframes hero-drift{
  0%  {transform:scale(1.04) translate3d(0,0,0)}
  50% {transform:scale(1.1) translate3d(-1.2%,-.9%,0)}
  100%{transform:scale(1.04) translate3d(0,0,0)}
}
/* paused until the arrival starts, so the loop never begins mid-blur */
.hero-duo .dt{animation:hero-drift 44s ease-in-out infinite;animation-play-state:paused;
  filter:grayscale(1) brightness(1.7) contrast(1.15) blur(16px);
  transition:filter 1.7s cubic-bezier(.16,.84,.34,1)}
.hero-duo.play .dt{animation-play-state:running;
  filter:grayscale(1) brightness(1.7) contrast(1.15) blur(0)}

/* The headline rises out of its own line. Each line is a clipped box with the type inside it;
   the padding-and-negative-margin pair is there because Helen's caps clip against a plain
   `overflow:hidden` at this line-height. */
.hero-duo .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero-duo .ln>i{display:block;font-style:normal;transform:translateY(106%);
  transition:transform 1.05s cubic-bezier(.16,.84,.34,1)}
.hero-duo .eyebrow-line{opacity:0;transform:translateY(12px);
  transition:opacity .8s ease .15s,transform .8s cubic-bezier(.16,.84,.34,1) .15s}
.hero-duo .hero-stats li{opacity:0;transform:translateY(16px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.16,.84,.34,1)}
.hero-duo .hero-stats .l{color:transparent;transition:color .5s ease .15s}
.hero-duo.play .eyebrow-line{opacity:1;transform:none}
.hero-duo.play .ln>i{transform:none}
.hero-duo.play .hero-stats li{opacity:1;transform:none}
.hero-duo.play .hero-stats .l{color:var(--red)}
/* the order it arrives in: the line of type, the headline line by line, then the five figures
   from the left, 80ms apart */
.hero-duo .ln:nth-child(1)>i{transition-delay:.3s}
.hero-duo .ln:nth-child(2)>i{transition-delay:.42s}
.hero-duo .hero-stats li:nth-child(1){transition-delay:.78s}
.hero-duo .hero-stats li:nth-child(2){transition-delay:.86s}
.hero-duo .hero-stats li:nth-child(3){transition-delay:.94s}
.hero-duo .hero-stats li:nth-child(4){transition-delay:1.02s}
.hero-duo .hero-stats li:nth-child(5){transition-delay:1.1s}
.hero-inner{will-change:transform,opacity}

/* ---------- Sections arriving, down the rest of the page ----------
   `.reveal` (above) comes out of a blur and is for photographs. Type blurred is type smeared,
   so blocks of words use `.rise` instead: one short lift and a fade, nothing else.
   `.rise-2` and `.rise-3` stagger the pieces of a block that arrive together. */
.rise{opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.16,.84,.34,1),
             transform .85s cubic-bezier(.16,.84,.34,1)}
.rise.in{opacity:1;transform:none}
.rise-2{transition-delay:.12s}
.rise-3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .hero-duo .dt{animation:none;transition:none;
    filter:grayscale(1) brightness(1.7) contrast(1.15)}
  .dt-zoom{transform:none;transition:none}
  .hero-duo .ln>i,.hero-duo .eyebrow-line,.hero-duo .hero-stats li,
  .hero-duo .hero-stats .l,.rise{transition:none}
  .hero-inner{transform:none!important;opacity:1!important}
}

/* ---------- Inner pages of the official site (2026-10-06) ----------
   The title sits in the same place on every inner page: Team, About TEDx, Past Conferences
   and each conference page (Christina: "the header needs to be higher up… the same vertical
   height as the team and about tedx page. These details should be constant throughout the
   website"). Put class="pg" on the page's one section and the h1 directly inside its .shell.
   Change it here, not page by page. */
.pg{padding:7rem 0 8rem}
.pg>.shell>h1{color:#fff;font-size:clamp(2.6rem,6.4vw,5.5rem);line-height:.9;margin-bottom:3.5rem}
@media (max-width:620px){.pg{padding:6.5rem 0 5rem}.pg>.shell>h1{margin-bottom:2rem}}

/* ---------- Conference pages (conference-2026.html and the other years) ---------- */
/* the theme, then the year beneath it a little smaller; no "TEDxPenn" in the title
   (Christina, 2026-10-06) */
/* larger than the other inner pages' titles, in the same place (her note, 2026-10-06) */
.cf>.shell>h1{font-size:clamp(3.4rem,10vw,9rem)}
/* a one-word theme too long for a phone at that size, "(r)evolution": let it shrink further */
.cf>.shell>h1.cf-long{font-size:clamp(2rem,10vw,9rem)}
.cf-year{display:block;font-size:.55em;margin-top:.35em}
/* a year's theme logo sits to the right of the theme text and the facts (pass 61) */
.cf-top{display:grid;grid-template-columns:minmax(0,52rem) minmax(0,1fr);gap:2rem 3.5rem;align-items:center}
.cf-logo{display:block;width:100%;max-width:17rem;height:auto;justify-self:center}
/* a logo that carries its own faded surround, the (r)evolution spiral: shown larger, and
   allowed to run past its box so the ring in the middle stays a good size */
@media (min-width:901px){.cf-top.wide{grid-template-columns:auto minmax(0,1fr)}}
.cf-logo.big{max-width:none;width:30rem;justify-self:end;margin:-7rem -5rem -7rem -6rem;pointer-events:none}
@media (max-width:900px){.cf-logo.big{width:19rem;margin:-3rem 0 -2rem -3.5rem}}
/* a logo stood on end, MOSAIC and VOLTA (her note, 2026-10-08: "make the logo go vertical in
   order to occupy the space better"): it runs down the right of the page from the top of the
   title, out of the grid, and the text keeps clear of it. Its width is set on each page as
   --logo-w, chosen so it ends level with the facts. On phones the page shows the flat logo
   above the text as before (the <picture> swaps the file). */
.cf-top picture{display:contents}
@media (min-width:901px){.cf>.shell{position:relative}
  .cf-top.tall{grid-template-columns:minmax(0,52rem);padding-right:calc(var(--logo-w) + 3rem)}
  .cf-top.tall .cf-facts{gap:1.5rem 2rem}
  .cf-top.tall .cf-logo{position:absolute;top:.5rem;right:1.5rem;width:var(--logo-w);max-width:none}}
@media (max-width:900px){.cf-top{grid-template-columns:1fr}
  .cf-logo{grid-row:1;max-width:11rem;justify-self:start;margin-bottom:1rem}}
.cf-about{max-width:52rem;margin-bottom:3.5rem}
.cf-about p{color:rgba(255,255,255,.82);margin:0}
.cf-about p+p{margin-top:1rem}
.cf-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:1.5rem 4rem;margin:0}
.cf-facts dt{font-size:.75rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.cf-facts dd{margin:.45rem 0 0;color:#fff;font-weight:600}
.cf-sec{margin-top:5.5rem}
.cf-sec h2{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05;margin-bottom:2rem}
.cf-people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:3rem 1rem}
/* each tile is a column whose button is pushed to the bottom, so the buttons in a row sit on
   one line however many lines the name and role take */
.cf-people li{display:flex;flex-direction:column}
.cf-card{flex:1;outline:0;cursor:default}
.cf-pic{background:#1b1b1b}
.cf-pic img,.cf-win img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  filter:grayscale(1)}
.cf-card:focus-visible .cf-pic{box-shadow:0 0 0 2px #fff}
.cf-people h3,.cf-win h3{color:#fff;font-size:1.05rem;line-height:1.1;margin-top:.9rem;
  text-transform:uppercase;letter-spacing:.005em}
.cf-people .role,.cf-win .role{display:block;color:rgba(255,255,255,.7);font-size:.875rem;
  line-height:1.4;margin-top:.3rem}
.cf-people .btn{margin-top:.9rem;align-self:flex-start}
/* a year with no speaker photos: names and roles alone, each under a hairline */
.cf-people.plain{gap:2.25rem 2rem}
.cf-people.plain .cf-card{border-top:1px solid rgba(255,255,255,.3);cursor:auto}
.cf-win.nopic{grid-template-columns:1fr;width:min(32rem,calc(100vw - 2rem))}
.cf-win.nopic img,.cf-win p:empty{display:none}
/* the description stays in the page for screen readers; sighted visitors get it in the window */
.cf-bio{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- The speaker window: opens over the speaker you point at, and closes when you leave it.
   A larger picture on the left; name, role, description and the talk link on the right. ---- */
/* It grows gently out of the speaker it belongs to (the script sets the point it grows from),
   and the rest of the page blurs and dims a little behind it (her note, pass 54). */
.cf-win{position:absolute;z-index:62;width:min(50rem,calc(100vw - 2rem));display:grid;
  grid-template-columns:22rem minmax(0,1fr);background:#141414;
  box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.1);
  opacity:0;visibility:hidden;transform:scale(.9);
  transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
.cf-win.open{opacity:1;visibility:visible;transform:none;
  transition:opacity .55s ease,transform .7s cubic-bezier(.16,.84,.34,1),visibility 0s}
/* the veil over everything else. It ignores the pointer, so leaving the window still closes it */
.cf-veil{position:fixed;inset:0;z-index:61;pointer-events:none;background:rgba(8,0,2,.22);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s ease}
.cf-veil.open{opacity:1;transition:opacity .6s ease}
/* the picture fills the window's full height, however long the description runs */
.cf-win img{height:100%;min-height:22rem;aspect-ratio:auto;object-position:50% 25%}
.cf-win-text{padding:1.75rem 2rem 2rem;align-self:center}
.cf-win h3{font-size:1.5rem;margin-top:0}
.cf-win .role{font-size:.9375rem}
.cf-win p{color:rgba(255,255,255,.85);font-size:.9375rem;line-height:1.55;margin:1.1rem 0 0}
.cf-win .btn{margin-top:1.4rem}
.cf-win .btn[hidden],.cf-win-x{display:none}
.cf-win-x{position:absolute;top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;border:0;
  background:rgba(0,0,0,.55);color:#fff;font:inherit;font-size:1.4rem;line-height:1;cursor:pointer}
.cf-win.touch .cf-win-x{display:block}
@media (max-width:760px){.cf-win{grid-template-columns:1fr}
  .cf-win img{height:18rem;min-height:0;object-position:50% 20%}
  .cf-win-text{padding:1.25rem 1.25rem 1.5rem}}
@media (prefers-reduced-motion:reduce){.cf-win,.cf-win.open,.cf-veil,.cf-veil.open{transition:none;transform:none}}
@media (max-width:1000px){.cf-people{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.cf-facts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cf-people{grid-template-columns:1fr;gap:2.5rem}.cf-sec{margin-top:3.5rem}}