/* ============================================================
   LEDT · Innovation Workshop — Attendee Portal
   Page-specific styles. Loads AFTER styles.css and reuses its
   tokens, nav, buttons, cards, form, and footer. Only what's
   unique to this sub-page lives here.
   ============================================================ */

:root {
  /* Mockup gradient: hot-pink → orchid → periwinkle → blue.
     Used for the top wordmark and every Day/Travel/Homework glyph. */
  --grad-workshop: linear-gradient(100deg,
      #ff77c8 0%,
      #d878d8 32%,
      #a986ea 58%,
      #7c9ff2 80%,
      #5fb0f2 100%);
}

/* Animated gradient painted through an SVG-shaped mask.
   Mirrors .hero-living-earth from styles.css but with the
   workshop (pink→blue) ramp. gradShift keyframe lives in styles.css. */
.grad-wordmark {
  display: block;
  background: var(--grad-workshop);
  background-size: 220% 100%;
  animation: gradShift 9s ease infinite;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
@media (prefers-reduced-motion: reduce) {
  .grad-wordmark { animation: none; background-position: 25% 50%; }
}

/* ============================================================
   PROSE LINKS
   One style for every inline <a> that lives inside body copy on
   this page: teal, with a soft gradient underline that lights up
   and thickens on hover. If you add a new copy block that can
   contain links, add its selector to THIS list rather than
   writing a one-off `a { color: … }` rule — that's how links
   ended up invisible in the agenda call-out.
   ============================================================ */
:is(
  .agenda-pre-body,
  .slot-body,
  .travel-lede,
  .travel-body,
  .stay-copy,
  .venue-copy,
  .lab-note,
  .cat-a,
  .hw-body,
  .hw-video-note,
  .hw-required,
  .pt-foot
) a:not(.btn):not(.hw-link) {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  /* Underline drawn as a background image so it can carry the
     teal→blue ramp and animate its weight independently of the
     text baseline. */
  background-image: linear-gradient(90deg,
      rgba(62, 225, 200, 0.55),
      rgba(124, 199, 255, 0.55));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: color .2s ease, background-size .2s ease, text-shadow .2s ease;
}
:is(
  .agenda-pre-body,
  .slot-body,
  .travel-lede,
  .travel-body,
  .stay-copy,
  .venue-copy,
  .lab-note,
  .cat-a,
  .hw-body,
  .hw-video-note,
  .hw-required,
  .pt-foot
) a:not(.btn):not(.hw-link):is(:hover, :focus-visible) {
  color: #8ff0dd;
  background-image: linear-gradient(90deg, #3ee1c8, #7cc7ff);
  background-size: 100% 2px;
  text-shadow: 0 0 18px rgba(62, 225, 200, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  :is(
    .agenda-pre-body, .slot-body, .travel-lede, .travel-body,
    .stay-copy, .venue-copy, .lab-note, .cat-a,
    .hw-body, .hw-video-note, .hw-required, .pt-foot
  ) a { transition: none; }
}

/* ============================================================
   TOP HERO — workshop_earth_backdrop.png (Earth on the right)
   Logo + copy sit on the LEFT; a left-side scrim keeps contrast.
   ============================================================ */
.wshero {
  position: relative;
  min-height: clamp(660px, 92vh, 1000px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 128px 0 96px;
  background:
    radial-gradient(ellipse at 78% 48%, rgba(5, 7, 13, 0) 0%, rgba(5, 7, 13, 0.35) 55%, rgba(5, 7, 13, 0.85) 100%),
    #000 url('assets/workshop_earth_backdrop.png') 72% center / cover no-repeat;
}
.wshero::before {
  /* left-side darkening so the wordmark always has contrast */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(5, 7, 13, 0.92) 0%,
      rgba(5, 7, 13, 0.7) 34%,
      rgba(5, 7, 13, 0.15) 60%,
      rgba(5, 7, 13, 0) 78%);
  pointer-events: none;
}
.wshero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
}
.wshero .hero-emblem {
  margin: 0 0 22px;
  width: clamp(84px, 8vw, 118px);
}
.wshero .kicker {
  margin-bottom: 26px;
}

.wshero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
}
/* Smithsonian logo + "Living Earth Digital Twin" read as one sub-lockup,
   set apart from (and beneath) the big "Innovation Workshop" headline. */
.wshero-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.1vw, 14px);
  margin-top: clamp(22px, 2.8vw, 38px);
}
.wshero-si-logo {
  height: clamp(26px, 3.6vw, 46px);
  width: auto;
  display: block;
}
.ws-innovation {
  width: clamp(280px, 44vw, 560px);
  aspect-ratio: 143 / 47.34;
  -webkit-mask-image: url('assets/innovation_workshop.svg');
          mask-image: url('assets/innovation_workshop.svg');
  filter: drop-shadow(0 6px 34px rgba(180, 130, 240, 0.28));
}
/* Inlined livingearthdigitaltwin.svg — "Living Earth" is gradient-filled
   (#lw-grad, animated), "Digital Twin" is white. Sized by width; the SVG's
   viewBox carries some vertical padding, so the -6px top margin snugs it up
   under the Smithsonian logo. */
.wshero-wordmark {
  display: block;
  width: clamp(300px, 50vw, 610px);
  height: auto;
  margin-top: -6px;
  filter: drop-shadow(0 6px 30px rgba(180, 130, 240, 0.22));
}
@media (prefers-reduced-motion: reduce) {
  #lw-grad animateTransform { display: none; }
}
.wshero-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-dim);
  max-width: 640px;
  line-height: 1.65;
  margin-bottom: 34px;
}
.wshero-lede strong { color: var(--ink); font-weight: 600; }
.wshero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.wshero .scroll-hint { color: var(--ink-mute); }

/* Photo credit for workshop_earth_backdrop.png, tucked into the bottom-right
   of the hero. Deliberately tiny and low-contrast — it should be findable,
   not noticeable. `right` clears the .scroll-hint, which is centred at the
   same bottom offset. */
.wshero-credit {
  position: absolute;
  right: 24px;
  bottom: 24px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.34);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

@media (max-width: 820px) {
  .wshero {
    background:
      linear-gradient(180deg, rgba(5, 7, 13, 0.55) 0%, rgba(5, 7, 13, 0.86) 100%),
      #000 url('assets/workshop_earth_backdrop.png') 65% center / cover no-repeat;
    min-height: 0;
    padding: 120px 0 72px;
  }
  .wshero::before { display: none; }
  .wshero-credit { right: 16px; bottom: 16px; font-size: 8px; }
  /* `min-height: 0` above lets the hero collapse to its content, so the
     absolutely-positioned scroll hint lands on top of the stacked CTA buttons.
     Drop it here rather than padding the hero out to make room — on a touch
     screen a "scroll down" affordance earns none of that space. Scoped to
     .wshero so index.html's taller hero keeps its hint. */
  .wshero .scroll-hint { display: none; }
}

/* ============================================================
   SMITHSON'S WILL — closing band, last thing above the footer
   ============================================================ */
/* Flat --bg-0, matching .participants above and .footer below, and
   deliberately with no border-top of its own: the handwriting should read as
   a closing beat drifting out of the participants list, not as another
   section. The footer's own border-top is what closes it off. */
.smithson {
  background: var(--bg-0);
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 116px);
}
.smithson-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3vw, 34px);
  text-align: center;
}
/* assets/smithson_handwriting.svg masked over --grad-workshop, same
   .grad-wordmark helper as the Agenda/Travel/Day headings — but centred
   rather than left-aligned, since this band is a centred set-piece.
   Kept wide on purpose: it's cursive script, and it stops being readable
   if it's sized like a heading. */
.smithson-mark {
  width: min(100%, 860px);
  aspect-ratio: 574.59 / 186.23;
  height: auto;
  -webkit-mask-image: url('assets/smithson_handwriting.svg');
          mask-image: url('assets/smithson_handwriting.svg');
  -webkit-mask-position: center;
          mask-position: center;
  filter: drop-shadow(0 6px 34px rgba(160, 130, 240, 0.22));
}
.smithson-caption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  max-width: 68ch;
}

/* ============================================================
   AGENDA
   ============================================================ */
.agenda {
  background: linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--line);
}

/* Sunday pre-event callout */
.agenda-pre {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  margin: 0 0 40px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-ledt);
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(199, 148, 255, 0.08), rgba(255, 255, 255, 0.01));
}
.agenda-pre-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ledt);
  padding: 6px 12px;
  border: 1px solid rgba(199, 148, 255, 0.35);
  border-radius: 999px;
  background: rgba(199, 148, 255, 0.08);
}
.agenda-pre-body {
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.55;
}
.agenda-pre-body strong { color: var(--ink); }

.agenda-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Flex column so .day-outro can be pushed to the bottom edge with
   margin-top: auto — the cards are stretched to a common height by the grid,
   and Day Three is the shortest, so it's the one that ends up with slack. */
.day-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.008) 100%);
  padding: 30px 26px 28px;
  position: relative;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.day-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-workshop);
  opacity: 0.8;
}
.day-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}
.day-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.agenda-word {
  width: clamp(170px, 24vw, 268px);
  aspect-ratio: 361.39 / 138.27;
  height: auto;
  margin-bottom: 24px;
  -webkit-mask-image: url('assets/agenda.svg');
          mask-image: url('assets/agenda.svg');
  filter: drop-shadow(0 6px 30px rgba(120, 160, 240, 0.24));
}
.day-word {
  height: clamp(38px, 4.4vw, 52px);
}
.day-one   { width: clamp(150px, 22vw, 200px); aspect-ratio: 410.53 / 128.07;
  -webkit-mask-image: url('assets/dayone.svg');   mask-image: url('assets/dayone.svg'); }
.day-two   { width: clamp(150px, 22vw, 200px); aspect-ratio: 410.53 / 128.07;
  -webkit-mask-image: url('assets/daytwo.svg');   mask-image: url('assets/daytwo.svg'); }
.day-three { width: clamp(178px, 26vw, 236px); aspect-ratio: 483.51 / 128.07;
  -webkit-mask-image: url('assets/daythree.svg'); mask-image: url('assets/daythree.svg'); }

.day-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.day-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg-0);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--grad-workshop);
}
.day-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}

.day-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.day-list li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: baseline;
}
.slot-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-2);
  letter-spacing: 0.02em;
  padding-top: 1px;
}
.slot-body {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
}
.slot-body strong { color: var(--ink); font-weight: 600; }

/* Sign-off at the foot of the Day Three card. The grid stretches all three
   cards to the tallest (Day One), so Day Three trails ~450px of dead space.
   Auto margins top AND bottom centre this block in whatever slack is left, so
   the mark floats in the middle of that space rather than hugging the bottom
   edge with a hole above it. Where there's no slack (stacked, single column)
   both autos resolve to 0 and it just follows the last slot. */
.day-outro {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
/* Same globe as the nav/footer, but always carrying the animated
   teal→blue→violet #ledt-grad (like the hero emblem on index.html).
   Sized off the card so it fills the slack — capped at 132px so it stays a
   sign-off rather than becoming the loudest thing in the agenda. */
.day-outro-mark {
  width: clamp(96px, 34%, 132px);
  height: auto;
  fill: url(#ledt-grad);
  filter: drop-shadow(0 6px 30px rgba(62, 225, 200, 0.3));
}
.day-outro-line {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-dim);
  line-height: 1.7;
  max-width: 18ch;
}

@media (max-width: 940px) {
  .agenda-grid { grid-template-columns: 1fr; }
  .agenda-pre { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* Stacked single-column: no slack to fill, so keep it a tight sign-off
     rather than a big gap under the last slot. */
  .day-outro { padding-top: 24px; }
}

/* ============================================================
   TRAVEL — workshop_bottom_backdrop.png (blue horizon, bottom)
   ============================================================ */
.travel {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(5, 7, 13, 0.82) 0%, rgba(5, 7, 13, 0.62) 42%, rgba(5, 7, 13, 0.9) 100%),
    #000 url('assets/workshop_bottom_backdrop.png') center bottom / cover no-repeat;
}
.travel-inner {
  position: relative;
  z-index: 1;
}
.travel-word {
  width: clamp(150px, 20vw, 220px);
  aspect-ratio: 297.37 / 133.53;
  height: auto;
  margin-bottom: 22px;
  -webkit-mask-image: url('assets/travel.svg');
          mask-image: url('assets/travel.svg');
  filter: drop-shadow(0 6px 30px rgba(120, 160, 240, 0.28));
}
.travel-lede { max-width: 760px; }
.travel-cards { margin-bottom: 24px; grid-template-columns: repeat(2, 1fr); }
.travel .card,
.stay-feature,
.venue-feature {
  background: linear-gradient(180deg, rgba(10, 14, 26, 0.72) 0%, rgba(10, 14, 26, 0.5) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- Postcard-collage feature (shared by "the space" + "where to stay") ---- */
.stay-feature,
.venue-feature {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 34px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
  margin-bottom: 32px;
}
.stay-ey,
.venue-ey {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 12px;
}
.stay-copy h3,
.venue-copy h3 {
  font-family: var(--font-disp);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.stay-copy p,
.venue-copy p {
  color: var(--ink-dim);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 12px;
}
.stay-copy p strong,
.venue-copy p strong { color: var(--ink); font-weight: 600; }
.stay-copy p:last-child,
.venue-copy p:last-child { margin-bottom: 0; }
.stay-quip { font-style: italic; color: var(--accent-3); }
.stay-note,
.venue-note { color: var(--ink-mute); font-size: 13px; }

.pc-collage {
  position: relative;
  height: 340px;
}
.postcard {
  position: absolute;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  border: 6px solid #f4ecdd;
  background: #f4ecdd;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  cursor: zoom-in;
}
.postcard:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.postcard img { display: block; width: 100%; height: auto; }
.postcard.pc-1 { width: 56%; top: 8%;  left: 2%;  transform: rotate(-6deg); z-index: 2; }
.postcard.pc-2 { width: 52%; top: 26%; right: 0;  transform: rotate(5deg);  z-index: 3; }
.postcard.pc-3 { width: 46%; bottom: 0; left: 20%; transform: rotate(-2deg); z-index: 4; }
.pc-collage:hover .pc-1 { transform: rotate(-9deg) translateY(-6px); }
.pc-collage:hover .pc-2 { transform: rotate(8deg)  translateY(-4px); }
.pc-collage:hover .pc-3 { transform: rotate(-1deg) translateY(-8px) scale(1.03); z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .postcard,
  .pc-collage:hover .pc-1,
  .pc-collage:hover .pc-2,
  .pc-collage:hover .pc-3 { transition: none; }
}

/* ---- Postcard lightbox ---- */
.pc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  background: rgba(3, 5, 10, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  cursor: zoom-out;
}
.pc-lightbox.open {
  opacity: 1;
  visibility: visible;
}
.pc-lightbox-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(1000px, 92vw);
  max-height: 90vh;
  cursor: default;
  transform: scale(0.82);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.3s ease;
}
.pc-lightbox.open .pc-lightbox-fig {
  transform: scale(1);
  opacity: 1;
}
.pc-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 8px solid #f4ecdd;
  border-radius: 6px;
  background: #f4ecdd;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 0.18s ease;
}
.pc-lightbox-cap {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  text-align: center;
  max-width: 42ch;
}
.pc-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pc-lightbox-close:hover,
.pc-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

/* Prev / next arrows */
.pc-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  padding-bottom: 4px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.pc-prev { left: max(16px, 3vw); }
.pc-next { right: max(16px, 3vw); }
.pc-lightbox-nav:hover,
.pc-lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
  transform: translateY(-50%) scale(1.06);
}

/* Counter */
.pc-lightbox-count {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

@media (max-width: 560px) {
  .pc-lightbox-nav { width: 44px; height: 44px; font-size: 26px; }
  .pc-prev { left: 10px; }
  .pc-next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-lightbox,
  .pc-lightbox-fig { transition: opacity 0.2s ease, visibility 0.2s ease; }
  .pc-lightbox-fig { transform: none; }
  .pc-lightbox-img { transition: none; }
  .pc-lightbox-nav { transition: none; }
}

/* Date band */
.travel-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  margin-bottom: 32px;
}
.travel-band-col {
  padding: 22px 20px;
  background: rgba(8, 11, 20, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tb-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.tb-value {
  font-family: var(--font-disp);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}
.tb-sub {
  font-size: 12.5px;
  color: var(--ink-dim);
  line-height: 1.4;
}
.tb-deadline .tb-value {
  background: var(--grad-workshop);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 9s ease infinite;
}
.tb-deadline .tb-sub { color: var(--accent-4); }

/* Reuse the deadline call-out look from styles.css .lab-deadline;
   add a scrim so it reads over the backdrop. */
.travel-deadline {
  position: relative;
}

@media (max-width: 780px) {
  .travel-band { grid-template-columns: repeat(2, 1fr); }
  .travel-cards { grid-template-columns: 1fr; }
  .stay-feature, .venue-feature { grid-template-columns: 1fr; gap: 28px; }
  .pc-collage { height: 300px; margin-top: 4px; }
}
@media (max-width: 900px) {
  .travel {
    background:
      linear-gradient(180deg, rgba(5, 7, 13, 0.8) 0%, rgba(5, 7, 13, 0.92) 100%),
      #000 url('assets/workshop_bottom_backdrop.png') center / cover no-repeat;
  }
}

/* Shared deadline note (also used on homework). Modeled on the
   site's .lab-note / .lab-deadline but defined here so this page
   is self-contained if those classes ever change. */
.lab-note {
  margin-top: 8px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
}
.lab-note strong { color: var(--ink); }
.lab-deadline {
  border-left: 3px solid var(--accent-4);
  background: linear-gradient(90deg, rgba(255, 94, 135, 0.08), rgba(255, 255, 255, 0.01));
}
.lab-deadline strong { color: var(--accent-4); }

/* ============================================================
   HEILMEIER CATECHISM — "what are we actually doing"
   ============================================================ */
.heilmeier {
  background: linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--line);
}
/* Inlined heilmeier.svg — gradient on the "What are we actually doing?" line,
   white on the "Our Heilmeier Catechism" line.
   This wordmark is ~5.96:1 (two stacked lines), where Agenda/Travel/Day are
   ~2.2–2.6:1 single lines — so matching them on *box* height would render its
   type at half their size. It's sized wide instead: the big first line only
   occupies 92/170.57 of the box, so ~1040px of width puts that line at ~94px
   tall, i.e. the same optical size as the other headings. Don't "fix" this
   back to a narrow clamp. */
.heilmeier-word {
  display: block;
  width: min(100%, 1040px);
  height: auto;
  margin-bottom: 24px;
  filter: drop-shadow(0 6px 30px rgba(180, 130, 240, 0.22));
}
/* Narrow screens: the sentence can't wrap inside an SVG, so the only way to
   keep it legible is to run it out past the .container's 32px gutters. */
@media (max-width: 720px) {
  .heilmeier-word {
    width: calc(100% + 44px);
    margin-left: -22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #heil-grad animateTransform { display: none; }
}
.heilmeier-def { max-width: 780px; }
.catechism-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.cat-pill {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.008) 100%);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.cat-pill:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.cat-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--font-disp);
  font-size: 16px;
  font-weight: 700;
  color: var(--bg-0);
  background: var(--grad-workshop);
  background-size: 180% 100%;
  animation: gradShift 9s ease infinite;
}
.cat-q {
  font-family: var(--font-disp);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cat-q-sub { color: var(--ink-mute); font-weight: 400; }
.cat-a {
  font-size: 15px;
  color: var(--ink-dim);
  line-height: 1.62;
}
.cat-a em { color: var(--accent); font-style: italic; }
.cat-a strong { color: var(--ink); font-weight: 600; }

@media (max-width: 820px) {
  .catechism-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEWORK
   ============================================================ */
.homework {
  background: linear-gradient(to bottom, var(--bg-1) 0%, var(--bg-0) 100%);
}
.homework-word {
  width: clamp(240px, 44vw, 480px);
  aspect-ratio: 740.35 / 106.47;
  height: auto;
  margin-bottom: 22px;
  -webkit-mask-image: url('assets/homework.svg');
          mask-image: url('assets/homework.svg');
  filter: drop-shadow(0 6px 30px rgba(180, 130, 240, 0.22));
}
.homework-lede { max-width: 760px; }
.hw-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: 28px;
}
.hw-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.008) 100%);
  transition: border-color .3s, transform .3s;
}
.hw-item:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.hw-num {
  font-family: var(--font-disp);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-workshop);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 9s ease infinite;
}
.hw-body h3 {
  font-family: var(--font-disp);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.hw-body p {
  font-size: 14.5px;
  color: var(--ink-dim);
  line-height: 1.6;
}
/* Global reset zeroes margins, so multi-paragraph cards (step 5) need their
   own rhythm. Child combinator on purpose: a descendant selector would also
   outrank .hw-video-note's own margin inside the step-3 video card. */
.hw-body > p + p { margin-top: 12px; }
.hw-body p strong { color: var(--ink); font-weight: 600; }
/* Compact "read the PDF" pill inside a homework card. */
.hw-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: border-color .2s, background .2s, color .2s;
}
.hw-link:hover {
  border-color: var(--accent);
  background: rgba(62, 225, 200, 0.08);
  color: var(--ink);
}
/* Full-width homework step (the Earth-2 video card and the questions card). */
.hw-item-wide { grid-column: 1 / -1; }
/* Video left, supporting copy right — collapses to stacked on narrow screens
   so no dead space is left beside the player. */
.hw-video-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-top: 16px;
}
.hw-video-copy { align-self: center; }
/* Responsive 16:9 video frame inside a homework card. */
.hw-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #000;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.hw-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hw-video-note { margin-top: 14px; }
@media (max-width: 720px) {
  .hw-video-layout { grid-template-columns: 1fr; gap: 18px; }
}

/* ----- QUESTION CARDS (homework step 6) -----
   Seven framing questions. The visual hierarchy is deliberate and is the
   whole point of the block: the QUESTION reads brightest (accent-2 blue),
   the examples under it are the faintest thing on the page (--ink-mute), and
   the italic .q-note verdicts sit between the two. Don't level these out. */
.hw-body .hw-q-lede { margin-bottom: 4px; }
/* Masonry packing via CSS multi-column, NOT grid. A grid stretches every card
   in a row to the tallest one, which left ragged whitespace under the short
   cards (Q3 especially); columns let each card butt straight up against the
   bottom of the one above it. The trade-off, and it's deliberate: reading
   order becomes down-then-across (1,2,3 down the first column) instead of
   across-then-down. That reads fine here because the questions are numbered.
   `grid-template-rows: masonry` would preserve row order but is Firefox-only,
   and a JS masonry lib is out of the question on a no-build page. */
.q-grid {
  list-style: none;
  margin-top: 24px;
  columns: 3 300px;
  column-gap: 18px;
}
.q-card {
  /* Keep a card from being split across a column break. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* Columns ignore row-gap, so the vertical rhythm is the card's own margin. */
  margin-bottom: 18px;
  padding: 22px 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.018);
  transition: border-color .3s, background .3s;
}
.q-card:hover {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
}
/* The question itself — the one bright line in the card. */
.q-card .q-ask {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-disp);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--accent-2);
}
/* Gradient numeral, matching .hw-num but at question scale. */
.q-n {
  flex-shrink: 0;
  font-size: 15.5px;
  font-weight: 700;
  background: var(--grad-workshop);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradShift 9s ease infinite;
}
/* Author's aside that sets up the examples ("Define the twin."). */
.q-card .q-lead {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ink-dim);
  font-style: italic;
}
.q-card .q-eg-label {
  margin-top: 12px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  opacity: 0.75;
}
/* Faintest text in the block, by design. */
.q-eg {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.q-eg li {
  padding-left: 14px;
  position: relative;
}
.q-eg li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
/* Q3's Essential / Helpful / Missing tiers — labels lift out of the grey. */
.q-eg-defs { margin-top: 12px; }
.q-eg-defs strong { color: var(--ink-dim); font-weight: 600; }
/* Closing verdict ("...probably not a Digital Twin application"). */
.q-card .q-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-dim);
}
@media (max-width: 560px) {
  .q-grid { columns: 1; }
  .q-card { margin-bottom: 14px; padding: 18px 18px 16px; }
}
/* ----- Workshop questionnaire (merged into the homework section) ----- */
.hw-questions {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.hw-q-heading {
  font-family: var(--font-disp);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
/* The "we really need you to respond" note — deliberately red. */
.hw-required {
  max-width: 720px;
  margin-bottom: 8px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 76, 92, 0.45);
  border-left: 3px solid #ff4c5c;
  border-radius: 12px;
  background: rgba(255, 76, 92, 0.1);
  color: #ffb0b8;
  font-size: 15px;
  line-height: 1.6;
}
.hw-required strong { color: #ff5e6b; font-weight: 700; }
/* Left-align the form under the section (override register-form's centered margin). */
.hw-form {
  margin: 24px 0 0;
  max-width: 680px;
}

@media (max-width: 820px) {
  .hw-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   POSTER — downloadable flyer with thumbnail
   ============================================================ */
.poster {
  background: linear-gradient(to bottom, var(--bg-0) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--line);
}
.poster-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: 48px;
  align-items: center;
}
.poster-thumb {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #05070d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.poster-thumb::before {
  /* gradient hairline that lights up on hover */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: var(--grad-workshop);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.poster-thumb:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 30px rgba(180, 130, 240, 0.25);
}
.poster-thumb:hover::before { opacity: 1; }
.poster-thumb img { display: block; width: 100%; height: auto; }
.poster-thumb-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--bg-0);
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--grad-workshop);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.poster-heading {
  font-family: var(--font-disp);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.poster-text {
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 26px;
}
.poster-text em { color: var(--accent); font-style: italic; }
.poster-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.poster-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .poster-grid { grid-template-columns: 1fr; gap: 32px; }
  .poster-thumb { max-width: 340px; }
}

/* ============================================================
   PARTICIPANTS — scrollable, manually editable list
   ============================================================ */
.participants {
  background: var(--bg-0);
  border-top: 1px solid var(--line);
}
.pt-scroll {
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.005) 100%);
  /* Fade the top/bottom edges so long lists read as "more below". */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.pt-scroll::-webkit-scrollbar { width: 10px; }
.pt-scroll::-webkit-scrollbar-track { background: transparent; }
.pt-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
.pt-list {
  list-style: none;
  padding: 8px;
  margin: 0;
}
.pt-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  transition: background .2s;
}
.pt-row + .pt-row {
  border-top: 1px solid var(--line);
}
.pt-row:hover { background: rgba(255, 255, 255, 0.03); }
.pt-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-disp);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bg-0);
  background: var(--grad-workshop);
  background-size: 180% 100%;
  animation: gradShift 9s ease infinite;
  flex-shrink: 0;
}
.pt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pt-name {
  font-family: var(--font-disp);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pt-affil {
  font-size: 13px;
  color: var(--ink-mute);
}
.pt-role {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
}
.pt-role-pi {
  color: var(--bg-0);
  border-color: transparent;
  background: var(--grad-workshop);
}
.pt-foot {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-mute);
}

@media (max-width: 560px) {
  .pt-role { display: none; }
  .pt-row { grid-template-columns: auto 1fr; }
}