/* Round 06, sample Z: Open Index. Tokens first; no colour literal below :root. */
@property --t { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --red: #A32638;      /* Stevens Red: workshops, group labels, buttons, links, focus ring, the next date */
  --ink: #363D45;      /* Dark Gray: every text role */
  --rule: #E4E5E6;     /* Light Gray: hairlines only */
  --white: #FFFFFF;    /* ground */

  --disp: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', Arial, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);

  --gut: 36px;
  --head: 120px;       /* 50 px wordmark + 2 x 35 px clear space (ID-02, ID-03) */
  /* the pitch before z.js solves the block, and with no script: 29 lines + 3 group gaps + lens room.
     With the script on a full-motion desktop, z.js writes --P and --base here from the solved block. */
  --P: clamp(18px, calc((100svh - 136px) / 32.8), 30px);
  --base: calc(var(--P) / 1.12);
  --labc: 96px;        /* group label column */
  --lab: max(15px, calc(var(--base) * .85));   /* group labels and dates never under 15 px */
  --dat: max(15px, calc(var(--base) * .85));
  --datec: max(calc(var(--base) * 5.6), calc(var(--dat) * 6.6));   /* date column; the sections below use it too */
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
/* past 1600 px the composition stops widening, so the solved block keeps its proportion to the screen */
.site-head, .first, .sec, .site-foot { max-width: 1600px; margin-inline: auto; }
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 10; background: var(--white); color: var(--red); padding: 10px 16px; font-weight: 600; }
.skip:focus { top: 16px; }

/* ---------- header ---------- */
.site-head { height: var(--head); display: flex; align-items: center; gap: 34px; padding-inline: var(--gut); }
.mark { display: block; flex: 0 0 auto; }
.mark img { display: block; width: auto; height: 50px; }
.nav-wide { margin-left: auto; }
.nav-wide ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-wide a, .menu nav a { color: var(--ink); text-decoration: none; font: 500 15px/1.3 var(--body); white-space: nowrap; }
.menu { margin-left: auto; position: relative; display: none; }
.menu summary { list-style: none; cursor: pointer; font: 600 16px/1 var(--body); color: var(--ink); padding: 14px 16px; border: 1px solid var(--ink); border-radius: 3px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--red); min-width: 260px; padding: 8px 0; }
.menu nav ul { list-style: none; margin: 0; padding: 0; }
.menu nav a { display: block; padding: 12px 20px; font-size: 16px; }
@media (hover: hover) and (pointer: fine) {
  .nav-wide a:hover, .menu nav a:hover { color: var(--red); text-decoration: underline; }
}
@media (max-width: 1179.98px) {
  .nav-wide { display: none; }
  .menu { display: block; }
}

/* ---------- first screen ---------- */
.first {
  display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
  column-gap: 52px;
  padding-inline: var(--gut);
  overflow-x: clip;   /* lines entering at wdth 125 run to the screen edge and stop there */
}
.intro { display: flex; flex-direction: column; padding-top: 20px; padding-bottom: 20px; }
.intro h1 {
  font-family: var(--disp);
  font-variation-settings: "wdth" 50, "wght" 700;   /* the block's own narrowest width */
  font-size: clamp(44px, 4.86vw, 70px);              /* 70 px at 1440 over 17 px body: 4.1 x (TYP-13) */
  line-height: 1.06;
  margin: 0 0 22px;
  color: var(--ink);
}
.intro h1 .nb { white-space: nowrap; }
.mission { margin: 0 0 12px; }
.mission-2 { margin-bottom: 26px; }
.cta { margin: 0 0 10px; }
.btn {
  display: inline-block;
  background: var(--red); color: var(--white);
  font: 600 16px/1.2 var(--body);
  padding: 15px 22px; border-radius: 3px; text-decoration: none;
  border: 2px solid var(--red);
}
.btn-quiet { background: var(--white); color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .btn { transition: background-color 140ms var(--ease), color 140ms var(--ease); }
  .btn:hover { background: var(--white); color: var(--red); }
  .btn-quiet:hover { background: var(--red); color: var(--white); }
}
.who { margin: 0; font-size: 16px; }
.intro-foot { margin-top: auto; padding-top: 28px; }
.hint { margin: 0 0 6px; font-size: 16px; line-height: 1.45; }
.caption { margin: 0; font-size: 14px; line-height: 1.45; }

/* ---------- the block ---------- */
.index { position: relative; padding-block: var(--padT, calc(var(--P) * 1.2)) var(--padB, calc(var(--P) * 1.2)); min-width: 0; }
.grp { display: grid; grid-template-columns: var(--labc) minmax(0, 1fr); }
.grp + .grp { margin-top: calc(var(--P) * .45); }
.g-label {
  grid-column: 1; margin: 0; align-self: start;
  font-family: var(--disp); font-size: var(--lab); line-height: var(--rh0, var(--P));
  font-variation-settings: "wdth" 75, "wght" 600;
  color: var(--red);
  /* sits on the baseline of its group's first line, whose size z.js may raise (static, never animated) */
  position: relative; top: calc((var(--f0, var(--base)) - var(--lab)) * .3);
}
.grp ul { grid-column: 2; list-style: none; margin: 0; padding: 0; min-width: 0; }
.ln > summary {
  display: grid; grid-template-columns: var(--datec) minmax(0, 1fr); align-items: center;
  height: var(--rh, var(--P));
  list-style: none; cursor: pointer;
}
.ln > summary::-webkit-details-marker { display: none; }
/* focus sits on the line's own type, so it follows the opened size; JS hands the scale over as --s to keep the ring 2 px */
.ln > summary:focus-visible { outline: none; }
.ln > summary:focus-visible .t { outline: calc(2px / var(--s, 1)) solid var(--red); outline-offset: calc(3px / var(--s, 1)); }
.ln > summary:focus-visible .d { color: var(--red); }
.d {
  font-family: var(--disp); font-size: var(--dat); line-height: 1;
  font-variation-settings: "wdth" 75, "wght" 500; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  position: relative; top: calc((var(--f, var(--base)) - var(--dat)) * .3);
}
.is-next .d { color: var(--red); font-variation-settings: "wdth" 75, "wght" 700; }
.index .t {
  --wt: 400;
  justify-self: start;
  font-family: var(--disp); font-size: var(--f, var(--base)); line-height: var(--rh, var(--P));
  font-variation-settings: "wdth" var(--w, 50), "wght" calc(var(--wt) + var(--g, 0));
  white-space: nowrap;
  transform-origin: 0 50%;
}
.index .t .nm { font-variation-settings: "wdth" var(--w, 50), "wght" calc(600 + var(--g, 0)); }
.index .t .sep { font-variation-settings: "wdth" var(--w, 50), "wght" calc(400 + var(--g, 0)); }
.k-w .t { color: var(--red); }
.z-meas { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; }

/* no script: the plain list at wdth 50; a line that meets the edge wraps, so nothing is cut */
html.no-js .index .t { white-space: normal; }
html.no-js .ln > summary { height: auto; min-height: var(--P); }

/* the pinned line: open in the layout, its entry under it */
.ln[open] > summary { height: auto; min-height: var(--P); padding-block: calc(var(--P) * .35) calc(var(--P) * .2); }
.ln[open] .t { font-size: calc(var(--base) * 1.6); line-height: 1.12; white-space: normal; font-variation-settings: "wdth" 75, "wght" 700; }
.ln[open] .t .nm { font-variation-settings: "wdth" 75, "wght" 800; }
.ln[open] .t .sep, .ln[open] .t .tl { font-variation-settings: "wdth" 75, "wght" 500; }
.ln[open] .d { color: var(--red); top: 0; }
.fill .ln[open] .t { white-space: nowrap; font-variation-settings: "wdth" var(--pw, 75), "wght" 700; }
.fill .ln[open] .t .nm { font-variation-settings: "wdth" var(--pw, 75), "wght" 800; }
.fill .ln[open] .t .sep, .fill .ln[open] .t .tl { font-variation-settings: "wdth" var(--pw, 75), "wght" 500; }
.entry {
  padding: 2px 0 calc(var(--P) * .9) var(--datec);
  font: 400 16px/1.55 var(--body);
  max-width: calc(var(--datec) + 64ch);
}
.entry p { margin: 0 0 10px; }
.acts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.acts a:not(.btn) { font-weight: 600; }
.entry .pp { display: flex; gap: 18px; align-items: flex-start; }
.entry .pp img { display: block; flex: 0 0 auto; width: 96px; height: auto; }

@media (hover: hover) and (pointer: fine) {
  .acts a:not(.btn):hover { text-decoration-thickness: 2px; }
}

/* reduced motion and ?motion=off: a still, readable list. Lines wrap where they meet the column, never cut, never under 15 px. */
@media (prefers-reduced-motion: reduce) {
  html.js:not(.force-motion) .index .t { --w: 75; white-space: normal; }
  html.js:not(.force-motion) .k-w .t { --wt: 600; }
  html.js:not(.force-motion) .ln > summary { height: auto; min-height: var(--P); }
}
html.motion-off .index .t { --w: 75; white-space: normal; }
html.motion-off .k-w .t { --wt: 600; }
html.motion-off .ln > summary { height: auto; min-height: var(--P); }

/* the load moment waits for the font */
html.z-pre .index .ln { opacity: 0; }

/* ---------- below the first screen: the index, opened ---------- */
.sec {
  display: grid; grid-template-columns: minmax(0, 26fr) minmax(0, 74fr); column-gap: 52px;
  grid-template-areas: "side head" "side main"; grid-template-rows: auto 1fr;
  padding: 76px var(--gut) 88px; border-top: 1px solid var(--rule);
}
/* each section heading is set as an opened line of the block: the lens's end state, wide and heavy */
.sec-h {
  grid-area: head; margin: 0 0 34px; color: var(--ink);
  font-family: var(--disp); font-variation-settings: "wdth" 120, "wght" 700;
  font-size: clamp(34px, calc(var(--base) * 2.3), 54px); line-height: 1.08;
}
.sec-side { grid-area: side; padding-top: 8px; }
.sec-side p { margin: 0 0 14px; }
.sec-side .caption { margin-top: 18px; }
.sec-main { grid-area: main; min-width: 0; }

/* rows on the block's grid: label column, date column, content */
.row { display: grid; grid-template-columns: var(--labc) var(--datec) minmax(0, 1fr); padding: 26px 0; border-top: 1px solid var(--rule); }
.sec-main > .row:first-child, .ppl > .row:first-child { border-top: 0; padding-top: 0; }
.row-d { grid-column: 2; margin: 0; }
.row-c { grid-column: 3; min-width: 0; }
.row-c > p { margin: 0 0 14px; max-width: 64ch; }
.row-c h3 { margin: 0 0 12px; font-family: var(--disp); font-variation-settings: "wdth" 100, "wght" 700; font-size: 30px; line-height: 1.12; }
.row-c h3 a { color: var(--ink); text-decoration: none; }
.ws h3 { color: var(--red); }
.ws .lede { font-size: 19px; line-height: 1.5; }
.row-c .acts { margin-top: 6px; }
.f-date { font-family: var(--disp); font-variation-settings: "wdth" 75, "wght" 700; font-size: 17px; line-height: 1.95; font-variant-numeric: tabular-nums; }
.is-next .f-date { color: var(--red); }

.evl { display: grid; grid-template-columns: var(--labc) minmax(0, 1fr); border-top: 1px solid var(--rule); padding: 20px 0 6px; }
.evl > h3 {
  grid-column: 1; margin: 0; padding: 9px 12px 0 0;
  font-family: var(--disp); font-variation-settings: "wdth" 75, "wght" 600; font-size: 15px; line-height: 1.25; color: var(--red);
}
.evl > ul { grid-column: 2; list-style: none; margin: 0; padding: 0; min-width: 0; }
.evl li { display: grid; grid-template-columns: var(--datec) minmax(0, 1fr); padding: 8px 0 12px; }
.evl time { font-family: var(--disp); font-variation-settings: "wdth" 75, "wght" 500; font-size: 16px; line-height: 1.7; font-variant-numeric: tabular-nums; }
.evl li a { font-family: var(--disp); font-variation-settings: "wdth" 75, "wght" 600; font-size: 21px; line-height: 1.25; color: var(--ink); text-decoration: none; }
.evl li p { margin: 6px 0 0; max-width: 64ch; }

.ppl { list-style: none; margin: 0; padding: 0; }
.ppl .row { padding: 18px 0; }
.ppl img.row-d { display: block; width: min(80px, calc(100% - 12px)); height: auto; }
.ppl h3 { font-size: 26px; margin-bottom: 4px; }
.ppl .row-c p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.ppl .acts { gap: 6px 18px; font-size: 16px; }

.contact .acts { gap: 14px; margin: 0 0 28px; }
.addr { margin: 0; }

@media (hover: hover) and (pointer: fine) {
  .row-c h3 a:hover, .evl li a:hover { color: var(--red); text-decoration: underline; }
}

.site-foot { display: flex; align-items: flex-start; gap: 34px; padding: 34px var(--gut) 48px; border-top: 1px solid var(--rule); }
.foot-mark { display: block; width: auto; height: 50px; margin: 0; }
.foot-text p { margin: 0; font-size: 16px; }
.foot-name { font-weight: 600; }

/* ---------- tablet: one column, the block keeps its lines ---------- */
@media (max-width: 1099.98px) {
  :root { --P: 24px; --base: 19px; --gut: 28px; }
  .first { display: block; }
  .intro { padding-top: 24px; padding-bottom: 0; }
  .intro h1 { font-size: 56px; }
  .mission { max-width: 62ch; }
  .intro-foot { margin-top: 0; }
  .sec { display: block; padding-block: 64px 72px; }
  .sec-side { max-width: 62ch; margin-bottom: 30px; padding-top: 0; }
}

/* ---------- phone: the block stacks under the button, the line at 45% of the screen opens ---------- */
@media (max-width: 759.98px) {
  :root { --gut: 20px; --P: 22px; --base: 17px; }
  .site-head { padding-inline: var(--gut); }
  .first { display: flex; flex-direction: column; }
  .intro { display: contents; }
  .intro h1 { font-size: 42px; margin: 6px 0 16px; }
  .mission { margin-bottom: 20px; font-size: 16px; }
  .mission-2 { order: 2; margin: 18px 0 8px; }    /* the second sentence moves under the block, so the lines reach the first screen */
  .index { order: 1; padding-block: 22px 8px; }
  .intro-foot { padding-top: 14px; }
  .btn { display: block; text-align: center; }
  .grp { display: block; }
  .grp + .grp { margin-top: 20px; }
  .g-label { line-height: 1.3; margin-bottom: 4px; font-size: 14px; top: 0; }
  .ln > summary { display: block; height: auto; padding-block: 7px; }
  .d { display: block; font-size: 13px; line-height: 1.25; margin-bottom: 1px; top: 0; }
  .index .t { --w: 60; display: block; white-space: normal; line-height: 1.22; }
  .ln[open] .t { font-size: 24px; }
  .entry { padding: 6px 0 16px; }
  .sec-h { font-size: 36px; margin-bottom: 18px; }
  .row, .evl, .evl li { display: block; }
  .row { padding: 20px 0; }
  .row-d { margin-bottom: 4px; }
  .row-c h3 { font-size: 26px; }
  .evl > h3 { padding: 0 0 4px; }
  .ppl .row { display: flex; gap: 16px; align-items: flex-start; }
  .ppl img.row-d { width: 72px; flex: 0 0 auto; margin: 0; }
  .ppl h3 { font-size: 22px; }
  .site-foot { flex-direction: column; gap: 34px; }
}

/* phone lens: one number, --t, per line. Row breaks are frozen by z.js at rest, so the type can widen,
   gain weight and grow (a transform) without any line gaining a row. Nothing here animates a layout property. */
@media (max-width: 759.98px) {
  html.lens-scroll .index .t {
    max-width: 70%;
    --w: calc(var(--w0, 60) + 6 * var(--t, 0));
    --g: calc(300 * var(--t, 0));
  }
  html.lens-scroll.rows-frozen .index .t { white-space: nowrap; max-width: none; width: max-content; }
  html.lens-scroll .index .ln > summary { transform: scale(calc(1 + .3 * var(--t, 0))); transform-origin: 0 50%; }
  html.lens-scroll .index .ln[open] > summary { transform: none; }
  html.lens-scroll .index .ln[open] .t { --w: 66; --g: 300; white-space: normal; width: auto; max-width: none; }
  html.lens-scroll .index .ln[open] .t br.zbr { display: none; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 759.98px) {
    html.lens-scroll.css-lens .ln {
      animation: z-lens linear both;
      animation-timeline: view(block 35% 45%);
    }
  }
}
/* the squared falloff t = (1 - d/R)^2, sampled at eight stops */
@keyframes z-lens {
  0%    { --t: 0; }
  12.5% { --t: .0625; }
  25%   { --t: .25; }
  37.5% { --t: .5625; }
  50%   { --t: 1; }
  62.5% { --t: .5625; }
  75%   { --t: .25; }
  87.5% { --t: .0625; }
  100%  { --t: 0; }
}