/**
 * Wisdom home page
 *
 * The approved direction: a big-date hero, then intent tiles, rails and the
 * ticket picker. Namespaced `.w-` like the rest of the redesign.
 *
 * Requires: wisdom/tokens.css, wisdom/components.css
 *
 * @package sc_events
 */

.w-main {
  max-width: 1360px;
  margin-inline: auto;
  padding: clamp(12px, 2vw, 24px) clamp(20px, 3vw, 40px) clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
  font-family: var(--w-font);
  color: var(--w-text);
}

/* ==========================================================================
   Hero — the date is the headline. Everything else hangs off it.
   ========================================================================== */

.w-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}

.w-hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  animation: w-rise .6s ease-out both;
}

.w-hero__status {
  display: inline-flex;
  align-items: center;
  gap: var(--w-space-3);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--w-text-2);
}

.w-hero__pulse {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--w-teal);
  animation: w-pulse 2s ease-in-out infinite;
}

/* The date. Tabular figures keep the two numerals the same width so the
   line does not shift as a countdown or a different date renders. */
.w-hero__date {
  margin: 0;
  font-size: clamp(4rem, 10.5vw, 10rem);
  line-height: .9;
  font-weight: 600;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--w-text);
}

.w-hero__date span {
  font-size: .4em;
  letter-spacing: -0.02em;
  color: var(--w-text-2);
  font-weight: 500;
}

.w-hero__title {
  margin: 0;
  font-size: clamp(1.3125rem, 2vw, 1.75rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.015em;
  max-width: 26ch;
  text-wrap: balance;
  color: var(--w-text);
}

.w-hero__actions {
  display: flex;
  gap: var(--w-space-3);
  flex-wrap: wrap;
  align-items: center;
}

.w-hero__cta {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding-inline: var(--w-space-8);
  border-radius: var(--w-radius-pill);
  background: var(--w-primary);
  color: var(--w-on-primary);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--w-duration) var(--w-ease);
}

.w-hero__cta:hover { background: var(--w-primary-hover); color: var(--w-on-primary); }

.w-hero__cta:focus-visible {
  outline: 2px solid var(--w-focus);
  outline-offset: 3px;
}

/* --- countdown --------------------------------------------------------- */

.w-countdown {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  font-variant-numeric: tabular-nums;
  padding-inline-start: var(--w-space-2);
}

.w-countdown__unit { display: flex; align-items: baseline; gap: 5px; }

.w-countdown__value {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--w-text);
}

.w-countdown__label { font-size: 0.9375rem; color: var(--w-text-2); }

/* --- hero image -------------------------------------------------------- */

.w-hero__media {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--w-ink);
  animation: w-rise .6s .1s ease-out both;
}

.w-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 992px) {
  .w-hero__media { aspect-ratio: 5 / 4; }
}

/* ==========================================================================
   Stats — "Last year". A tile whose figure is zero is not rendered at all,
   which is handled in the template.
   ========================================================================== */

.w-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--w-space-6);
  padding-block: clamp(20px, 3vw, 32px);
  border-block: 1px solid var(--w-border);
}

.w-stats__label {
  grid-column: 1 / -1;
  font-size: var(--w-caption-size);
  font-weight: var(--w-caption-weight);
  letter-spacing: var(--w-caption-ls);
  text-transform: uppercase;
  color: var(--w-text-3);
}

.w-stat__value {
  display: block;
  font-size: var(--w-stat-size);
  line-height: var(--w-stat-lh);
  font-weight: var(--w-stat-weight);
  letter-spacing: var(--w-stat-ls);
  font-variant-numeric: tabular-nums;
  color: var(--w-text);
}

.w-stat__label {
  display: block;
  margin-top: var(--w-space-2);
  font-size: var(--w-small-size);
  color: var(--w-text-2);
}

/* ==========================================================================
   Motion
   ========================================================================== */

@keyframes w-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes w-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.85); }
}

@media (prefers-reduced-motion: reduce) {
  .w-hero__copy,
  .w-hero__media { animation: none; }
  .w-hero__pulse { animation: none; }
  .w-hero__cta { transition: none; }
}

/* ==========================================================================
   Section wrapper

   During the migration each rebuilt section carries its own container instead
   of sharing one, because the sections around it still use the legacy grid.
   ========================================================================== */

.w-section {
  max-width: 1360px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
  font-family: var(--w-font);
  color: var(--w-text);
}

.w-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--w-space-4);
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.w-section__title {
  margin: 0;
  font-size: var(--w-h2-size);
  line-height: var(--w-h2-lh);
  font-weight: var(--w-h2-weight);
  letter-spacing: var(--w-h2-ls);
}

.w-section__link {
  color: var(--w-primary);
  font-size: var(--w-body-size);
  font-weight: 600;
  text-decoration: none;
}

.w-section__link:hover { text-decoration: underline; }

/* ==========================================================================
   Speaker rail

   Portraits are 3:4 and cropped to the face-safe area the design specifies
   (focal 50% / 30%), never circles cut out of a poster. The name is revealed
   on hover and on focus, so a tap on touch reveals it too — no script.
   ========================================================================== */

.w-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 8px;
  margin-inline: -4px;
  /* Driven by arrows and dragging now, so the scrollbar is just noise across
     the middle of the page. Touch still scrolls it natively. */
  scrollbar-width: none;
  cursor: grab;
}

.w-rail::-webkit-scrollbar { display: none; }

.w-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.w-rail.is-dragging * { pointer-events: none; }

.w-rail__nav { display: flex; gap: var(--w-space-2); }

.w-rail__btn {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--w-grey-300);
  border-radius: var(--w-radius-pill);
  background: var(--w-surface);
  color: var(--w-text);
  cursor: pointer;
  transition: border-color var(--w-duration) var(--w-ease);
}

.w-rail__btn:hover { border-color: var(--w-primary); color: var(--w-primary); }
.w-rail__btn:focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; }

/* An arrow with nowhere left to go says so rather than doing nothing. */
.w-rail__btn[disabled] { opacity: .35; cursor: default; }
.w-rail__btn[disabled]:hover { border-color: var(--w-border); color: var(--w-text-2); }

@media (max-width: 640px) { .w-rail__nav { display: none; } }

/* --- speaker card ------------------------------------------------------- */

.w-speaker {
  flex: 0 0 clamp(180px, 22vw, 240px);
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--w-surface-2);
  color: inherit;
  text-align: start;
  text-decoration: none;
  display: block;
  cursor: pointer;
}

.w-speaker img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 320ms var(--w-ease);
}

.w-speaker:hover img,
.w-speaker:focus-visible img { transform: scale(1.04); }

/* Fallback: initials on the lightest burgundy, per the slot inventory. */
.w-speaker__initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--w-burgundy-100);
  color: var(--w-burgundy-700);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.w-speaker__reveal {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--w-space-6) var(--w-space-4) var(--w-space-4);
  background: linear-gradient(to top, rgba(11, 14, 23, .92) 0%, rgba(11, 14, 23, .7) 55%, transparent 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--w-duration) var(--w-ease),
              transform var(--w-duration) var(--w-ease);
}

.w-speaker:hover .w-speaker__reveal,
.w-speaker:focus-visible .w-speaker__reveal,
.w-speaker:focus-within .w-speaker__reveal { opacity: 1; transform: none; }

.w-speaker__name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.w-speaker__topic {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .w-rail { scroll-behavior: auto; }
  .w-speaker img,
  .w-speaker__reveal { transition: none; }
}

/* ==========================================================================
   Workshop rail — a wide card: square thumbnail beside the detail.
   ========================================================================== */

.w-workshop {
  flex: 0 0 clamp(300px, 34vw, 400px);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  padding: var(--w-space-4);
  border: 1px solid var(--w-border);
  border-radius: 22px;
  background: var(--w-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--w-duration) var(--w-ease),
              box-shadow var(--w-duration) var(--w-ease);
}

.w-workshop:hover { border-color: var(--w-grey-300); box-shadow: var(--w-shadow-3); }
.w-workshop:focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; }

.w-workshop__thumb {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--w-ink);
}

.w-workshop__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.w-workshop__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.w-workshop__title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--w-text);
}

.w-workshop__meta { font-size: 0.9375rem; color: var(--w-text-2); }

.w-workshop__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--w-space-2);
  margin-top: 4px;
}

/* ==========================================================================
   Ticket picker — an ink panel with a burgundy glow in the corner.
   ========================================================================== */

.w-tickets {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 28px;
  background: var(--w-ink-950);
  color: var(--w-ink-50);
}

.w-tickets::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 100% 100%, rgba(124, 19, 20, .5), transparent 60%);
  pointer-events: none;
}

.w-tickets__copy { position: relative; display: flex; flex-direction: column; gap: 18px; }

.w-tickets__title {
  margin: 0;
  font-size: clamp(2.125rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: .98;
  text-wrap: balance;
}

.w-tickets__lede {
  margin: 0;
  font-size: 1.125rem;
  color: var(--w-ink-200);
  max-width: 36ch;
}

.w-tickets__facts {
  display: flex;
  gap: var(--w-space-3);
  flex-wrap: wrap;
  font-size: 0.9375rem;
  color: var(--w-ink-300);
}

.w-tickets__list { position: relative; display: flex; flex-direction: column; gap: 10px; }

.w-ticket {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--w-space-3);
  align-items: center;
  padding: 18px 22px;
  border: 1.5px solid var(--w-ink-700);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--w-duration) var(--w-ease),
              background var(--w-duration) var(--w-ease);
}

.w-ticket:hover { border-color: var(--w-burgundy-400); background: rgba(255, 255, 255, .06); color: inherit; }
.w-ticket:focus-visible { outline: 2px solid var(--w-gold); outline-offset: 2px; }

.w-ticket--soldout { opacity: .5; pointer-events: none; }

.w-ticket__name { display: block; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.w-ticket__note { display: block; font-size: 0.9375rem; color: var(--w-ink-300); margin-top: 2px; }

.w-ticket__price {
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.w-tickets__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding-inline: var(--w-space-8);
  margin-top: var(--w-space-2);
  border-radius: var(--w-radius-pill);
  background: var(--w-burgundy-500);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.w-tickets__cta:hover { background: var(--w-burgundy-400); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .w-workshop, .w-ticket { transition: none; }
}

/* ==========================================================================
   Headline stat + intent tiles

   One figure stated as a sentence, then four shortcuts into the event. Each
   tile carries a live count, and a tile whose count is zero is not rendered —
   a shortcut to an empty section is worse than no shortcut.
   ========================================================================== */

.w-intent { display: flex; flex-direction: column; gap: clamp(18px, 2.5vw, 28px); }

.w-intent__stat {
  margin: 0;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--w-text);
}

.w-intent__stat b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--w-primary);
}

.w-intent__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: var(--w-space-3);
}

.w-tile {
  display: flex;
  align-items: center;
  gap: var(--w-space-3);
  padding: 18px;
  border: 1px solid var(--w-border);
  border-radius: 22px;
  background: var(--w-surface);
  color: var(--w-text);
  text-decoration: none;
  transition: border-color var(--w-duration) var(--w-ease),
              box-shadow var(--w-duration) var(--w-ease);
}

.w-tile:hover { border-color: var(--w-grey-300); box-shadow: var(--w-shadow-3); color: var(--w-text); }
.w-tile:focus-visible { outline: 2px solid var(--w-focus); outline-offset: 2px; }

/* The last tile is the one the design highlights. */
.w-tile--accent { background: var(--w-primary-soft); border-color: transparent; color: var(--w-primary); }
.w-tile--accent:hover { background: var(--w-burgundy-200); color: var(--w-primary); }

.w-tile__icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--w-surface-2);
  color: var(--w-primary);
  font-size: 1.125rem;
}

.w-tile--accent .w-tile__icon { background: rgba(255, 255, 255, .55); }

.w-tile__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.w-tile__label { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
.w-tile__sub { font-size: 0.9375rem; color: var(--w-text-2); }
.w-tile--accent .w-tile__sub { color: var(--w-burgundy-600); }

@media (prefers-reduced-motion: reduce) { .w-tile { transition: none; } }

/* ==========================================================================
   Event card

   Mirrors the hero: an ink card with the date carrying the weight, the cover
   behind a scrim. Works with or without a cover image.
   ========================================================================== */

.w-events { display: grid; gap: var(--w-space-4); }

@media (min-width: 900px) {
  .w-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-events > :first-child { grid-column: 1 / -1; }
}

.w-event {
  position: relative;
  display: block;
  min-height: 320px;
  border-radius: 28px;
  overflow: hidden;
  background: var(--w-ink-900);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}

.w-events > :first-child.w-event { min-height: 420px; }

.w-event__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  opacity: .9;
  transition: transform 500ms var(--w-ease);
}

.w-event:hover .w-event__cover { transform: scale(1.03); }

.w-event::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 24, 38, .98) 0%,
    rgba(20, 24, 38, .9) 45%,
    rgba(20, 24, 38, .35) 100%);
}

/* No cover: the ink panel with a burgundy tint, same as the hero fallback. */
.w-event--empty::after {
  background:
    radial-gradient(120% 90% at 50% 100%, var(--w-burgundy-900) 0%, transparent 70%),
    linear-gradient(to top, rgba(20, 24, 38, .98) 0%, rgba(20, 24, 38, .8) 100%);
}

.w-event__body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(22px, 2.6vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--w-space-6);
}

.w-event__badges { display: flex; gap: 10px; flex-wrap: wrap; }

.w-event__badge {
  height: 40px;
  display: inline-flex;
  align-items: center;
  gap: var(--w-space-2);
  padding-inline: 14px;
  border-radius: var(--w-radius-pill);
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  font-size: 0.9375rem;
  font-weight: 500;
}

.w-event__badge .w-hero__pulse { width: 8px; height: 8px; background: var(--w-teal-400); }

.w-event__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--w-space-6);
  flex-wrap: wrap;
}

.w-event__text { display: flex; flex-direction: column; gap: var(--w-space-3); min-width: 0; }

.w-event__date {
  font-size: clamp(3.5rem, 7vw, 7rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.w-event__date span { font-size: .32em; letter-spacing: -0.02em; color: var(--w-ink-200); font-weight: 500; }

.w-event__title {
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
}

.w-event__meta {
  display: flex;
  align-items: center;
  gap: var(--w-space-4);
  flex-wrap: wrap;
  font-size: 0.9375rem;
  color: var(--w-ink-200);
}

.w-event:focus-visible { outline: 3px solid var(--w-gold); outline-offset: 3px; }

/* --- filter pills ------------------------------------------------------ */

.w-filters {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-pill);
  background: var(--w-surface);
}

.w-filters button {
  height: 44px;
  padding-inline: var(--w-space-5);
  border: 0;
  border-radius: var(--w-radius-pill);
  background: transparent;
  color: var(--w-text-2);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--w-duration) var(--w-ease), color var(--w-duration) var(--w-ease);
}

.w-filters button[aria-pressed="true"] { background: var(--w-primary); color: var(--w-on-primary); }

@media (prefers-reduced-motion: reduce) {
  .w-event__cover, .w-filters button { transition: none; }
}

/* ==========================================================================
   Sponsor wall

   Tier rows with a labelled badge. The top tier gets wider tiles and a gold
   ring; logos sit in padded boxes, greyscale at rest and in colour on hover,
   per the slot inventory.
   ========================================================================== */

.w-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w-space-4);
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.w-search {
  display: flex;
  align-items: center;
  gap: var(--w-space-2);
  height: 54px;
  padding-inline: var(--w-space-5);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-pill);
  background: var(--w-surface);
  min-width: min(100%, 320px);
}

.w-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--w-text);
  font-family: var(--w-font);
  font-size: var(--w-body-size);
}

.w-search input:focus { outline: none; }
.w-search input::placeholder { color: var(--w-text-3); }
.w-search:focus-within { border-color: var(--w-primary); box-shadow: var(--w-focus-ring); }

.w-count { font-size: var(--w-small-size); color: var(--w-text-2); }

.w-workshops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: var(--w-space-4);
}

.w-workshops .w-workshop { flex: initial; }

/* ==========================================================================
   Speaker listing and profile
   ========================================================================== */

.w-speakers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}

.w-speakers .w-speaker { flex: initial; }

.w-crumbs {
  display: flex;
  align-items: center;
  gap: var(--w-space-2);
  margin-bottom: var(--w-space-6);
  font-size: var(--w-small-size);
  color: var(--w-text-3);
}

.w-crumbs a { color: var(--w-primary); text-decoration: none; }
.w-crumbs a:hover { text-decoration: underline; }

.w-profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

@media (min-width: 900px) {
  .w-profile { grid-template-columns: 340px minmax(0, 1fr); }
}

.w-profile__portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background: var(--w-surface-2);
}

.w-profile__portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.w-profile__portrait--empty {
  display: grid;
  place-items: center;
  background: var(--w-burgundy-100);
  color: var(--w-burgundy-700);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.w-profile__body { display: flex; flex-direction: column; gap: var(--w-space-4); }

.w-profile__name {
  margin: 0;
  font-size: var(--w-h1-size);
  line-height: var(--w-h1-lh);
  font-weight: var(--w-h1-weight);
  letter-spacing: var(--w-h1-ls);
}

.w-profile__role {
  margin: 0;
  font-size: var(--w-body-lg-size);
  color: var(--w-text-2);
}

.w-profile__links { display: flex; gap: var(--w-space-2); flex-wrap: wrap; }

.w-eyebrow {
  margin: 0 0 var(--w-space-3);
  font-size: var(--w-caption-size);
  font-weight: var(--w-caption-weight);
  letter-spacing: var(--w-caption-ls);
  text-transform: uppercase;
  color: var(--w-primary);
}

/* Partner marks are square and sit on the page ground, not on ink. */