/* =====================================================================
   INSPIRER OF THE YEAR — the award page's own skin.
   Loaded after highup.css on /high-up/inspirer-of-the-year/ only. The
   page keeps the High-Up! header and the site footer and drops
   everything else the event skin does: no blades, no slant, no orange.
   The look is an official letter on black. Newsreader (a serif, the
   one page that loads it) for the words, Plex Mono for the labels,
   white on black, no rules or dividers, and iridescence as the only
   colour, on the award's name, in the pointer's fading trail over the
   letter, in the ink of the buttons.

   Custom-property glossary
     --ioty-irid   the iridescent band every coloured thing shares
     --x/--y       where the pointer entered a button (its ink's origin)
   ===================================================================== */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../fonts/newsreader-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../fonts/newsreader-italic-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.page-ioty {
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ioty-white: #f4f4f1;
  --ioty-grey: #3b3b3b;
  --ioty-irid: linear-gradient(
    100deg,
    #ff9ee6 0%,
    #b9a4ff 18%,
    #7fdcff 36%,
    #8ff5c9 54%,
    #ffe89a 72%,
    #ffb3c7 86%,
    #ff9ee6 100%
  );

  /* the High-Up! tokens, re-pointed at black and neutral grey: the
     header, the footer and the shared rules follow without edits */
  --hx-ink: #000;
  --hx-ink-rgb: 0, 0, 0;
  --hx-bark: #0b0b0b;
  --hx-bark-2: #161616;
  --hx-bark-rgb: 11, 11, 11;
  --hx-orange: #f4f4f1;
  --hx-orange-rgb: 244, 244, 241;
  --hx-orange-deep: #c9c9c4;
  --hx-sand: #c9c9c4;
  --hx-sand-rgb: 201, 201, 196;
  --bg: #000;
  --bg-rgb: 0, 0, 0;
  --surface: #0b0b0b;
  --surface-2: #121212;
  --line: rgba(255, 255, 255, 0.12);
  --txt: var(--ioty-white);
  --txt-soft: #bdbdb8;
  --txt-dim: #8a8a85;

  background: #000;
}
/* the selection: a soft lilac wash under white text, painted by the
   elements that hold text and by nothing else. WebKit fills the gaps
   of a multi-paragraph selection (between the paragraphs and out to
   the page's edge) with the selection colour of the block around
   them, so every wrapper selects transparent and only the words light
   up */
.page-ioty ::selection {
  background: transparent;
}
.page-ioty :is(p, h1, h2, h3, li, a, span, strong, em, time)::selection {
  background: rgba(185, 164, 255, 0.36);
  color: #fff;
  -webkit-text-fill-color: #fff;
}
/* WebKit also runs a block's selection out to its nearest "selection
   root" (by default the whole page, hence the full-width band). A
   positioned block is a root of its own, so each text block keeps its
   wash inside its own column */
.page-ioty main :is(p, h1, h2, h3, li) {
  position: relative;
}

/* the one-off defs holder: present for <use>, never painted */
.ioty-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ------------------------------------------------ the header on black */
.page-ioty .hux-nav {
  border-bottom-color: transparent;
}
.page-ioty .hux-nav > .hux-btn-quiet {
  background: var(--ioty-white);
  color: #000;
}
.page-ioty .hux-nav > .hux-btn-quiet::before {
  background: var(--ioty-irid);
}

/* ------------------------------------------------ shared type */
/* the award's name: iridescent at all times, the band drifting slowly */
.ioty-irid-always {
  background: var(--ioty-irid);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-irid-always {
    animation: ioty-drift 12s ease-in-out infinite alternate;
  }
}
@keyframes ioty-drift {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

/* the pointer trail: ioty.js paints fading iridescent blobs where the
   pointer passes over the text, on one fixed canvas multiplied into
   the page. Multiply leaves the black ground black and tints only what
   is light, so the white words take the colour and nothing else does.
   Under the header (z-index 80), over everything else */
.ioty-trail {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* the buttons: square and white; on hover an iridescent ink spreads
   from the point where the pointer came in (ioty.js sets --x/--y;
   without it the ink grows from the centre) */
.ioty-btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 32px;
  border: 1px solid var(--ioty-white);
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.ioty-btn-solid {
  background: var(--ioty-white);
  color: #000;
}
.ioty-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #b9a4ff,
    #7fdcff 40%,
    #8ff5c9 70%,
    #ffe89a
  );
  transform: scale(0);
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ioty-btn:hover::before,
.ioty-btn:focus-visible::before {
  transform: scale(52);
}
.ioty-btn:focus-visible {
  outline: 2px solid var(--ioty-white);
  outline-offset: 4px;
}
/* ------------------------------------------------ the footer, unruled */
.page-ioty footer .f-mid,
.page-ioty footer .f-head,
.page-ioty footer .baseline {
  border-top: 0;
  border-bottom: 0;
}

/* ------------------------------------------------ 1. the hero */
/* the portrait: her official photograph whole on the left (it may not
   be altered, so nothing sits on it: no crop, filter, mask or text),
   an iridescent glow turning slowly behind it; the countdown line,
   the award's name set large over two lines and the button on the
   right */
.ioty-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(var(--svh) * 100);
  padding: 118px 0 56px;
  background: #000;
}
.ioty-hero-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  width: 100%;
}
.ioty-hero-fig {
  margin: 0;
}
.ioty-hero-frame {
  position: relative;
  isolation: isolate;
}
.ioty-hero-frame::before {
  content: "";
  position: absolute;
  inset: 6% -8%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    #ff9ee6,
    #b9a4ff,
    #7fdcff,
    #8ff5c9,
    #ffe89a,
    #ffb3c7,
    #ff9ee6
  );
  filter: blur(70px);
  opacity: 0.3;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-hero-frame::before {
    animation: ioty-spin 40s linear infinite;
  }
}
@keyframes ioty-spin {
  to {
    transform: rotate(360deg);
  }
}
/* the photograph at its own 2:3, as tall as the screen allows with
   the caption under it */
.ioty-hero-photo {
  display: block;
  width: auto;
  height: min(calc(var(--svh) * 100 - 260px), 780px);
  min-height: 380px;
}
.ioty-hero-fig .ioty-caption {
  margin-top: 18px;
}
.ioty-hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
}
.ioty-hero-lead,
.ioty-hero-tail {
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.3;
  color: #d6d6d1;
}
.ioty-hero-lead {
  max-width: 24em;
}
.ioty-hero-lead [data-ioty-days] {
  color: var(--ioty-white);
  font-variant-numeric: lining-nums tabular-nums;
}
.ioty-hero-name {
  /* the gradient paints the element's box only: pad it past the
     italic capitals and the slant, and take the room back */
  padding: 0.2em 0.12em 0.14em;
  margin: -0.02em -0.12em -0.14em;
  font-style: italic;
  font-weight: 350;
  font-size: clamp(3.4rem, 7.6vw, 8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.ioty-hero-name > span {
  display: block;
}
.ioty-hero-tail {
  margin-top: 6px;
}
.ioty-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: clamp(32px, 5vh, 52px);
}
/* the news caption: the white arms beside her name and title */
.ioty-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  text-align: left;
}
.ioty-caption-lion {
  flex: none;
  width: auto;
  height: 52px;
  fill: var(--ioty-white);
}
.ioty-caption-name {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ioty-white);
}
.ioty-caption-role {
  display: block;
  margin-top: 5px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--txt-soft);
}
.ioty-more {
  justify-self: start;
  display: inline-flex;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.ioty-more:hover {
  color: var(--ioty-white);
}
.ioty-more span {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-more span {
    animation: ioty-nudge 2.4s var(--ease) infinite;
  }
}
@keyframes ioty-nudge {
  0%,
  60%,
  100% {
    transform: none;
  }
  30% {
    transform: translateY(4px);
  }
}

/* ------------------------------------------------ 2. the statement */
/* ------------------------------------------------ 1b. the patron's word
   Her quote straight after the hero: italic serif at a reading size, one
   large iridescent opening mark above it, her name and title under it
   in the hero caption's type. No rule or box around it */
.ioty-patron {
  padding: clamp(72px, 12vh, 140px) 0 clamp(16px, 4vh, 48px);
}
.ioty-patron-fig {
  max-width: 44rem;
  margin: 0 auto;
}
.ioty-patron-mark {
  display: block;
  width: max-content;
  /* the gradient paints the box only: pad past the glyph, take it back */
  padding: 0.1em 0.12em 0;
  margin: 0 0 -0.08em -0.16em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(5rem, 9vw, 7.5rem);
  line-height: 0.62;
  height: 0.5em;
}
.ioty-patron-quote {
  margin: 0;
}
.ioty-patron-quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.36;
  letter-spacing: -0.008em;
  color: var(--ioty-white);
  text-wrap: pretty;
}
.ioty-patron-caption {
  margin-top: clamp(28px, 4vh, 40px);
}

/* ------------------------------------------------ 1c. the timeline
   Five dates on one thin track: down the page on phones, across it
   from 768px (iPad portrait) up. The points are evenly spaced, so
   ioty.js needs to set only one number, --ioty-now (0 at the first
   point, 4 at the last, fractions between), and the fill and the "Now"
   marker follow it here. Without the script (no .is-live) every point
   is simply white and there is no marker

   Custom-property glossary
     --tl-dy     how far below the top of a point its dot's centre sits
     --tl-dx     the track's distance from the left edge (phones)
     --ioty-now  where today falls, in points (set by ioty.js) */
.ioty-timeline {
  padding: clamp(72px, 12vh, 140px) 0 clamp(24px, 6vh, 72px);
}
.ioty-tl-title {
  max-width: 66rem;
  margin: 0 auto 36px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.ioty-tl {
  --tl-dy: 0.5rem;
  --tl-dx: 44px;
  position: relative;
  max-width: 66rem;
  margin: 0 auto;
}
.ioty-tl-list {
  display: grid;
  /* equal rows, so each point is a fifth of the list's height and the
     marker can be placed in percentages */
  grid-auto-rows: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ioty-tl-point {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 30px calc(var(--tl-dx) + 22px);
}
/* the track, the reached part of it, the dots: all centred on the
   same line */
.ioty-tl::before,
.ioty-tl::after {
  content: "";
  position: absolute;
  left: calc(var(--tl-dx) - 0.5px);
  top: var(--tl-dy);
  width: 1px;
  height: 80%;
  background: rgba(255, 255, 255, 0.22);
}
.ioty-tl::after {
  display: none;
  height: calc(var(--ioty-now, 0) * 20%);
  background: rgba(244, 244, 241, 0.72);
}
.ioty-tl.is-live::after {
  display: block;
}
.ioty-tl-dot {
  position: absolute;
  left: var(--tl-dx);
  top: var(--tl-dy);
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border: 1px solid var(--ioty-white);
  border-radius: 50%;
  background: var(--ioty-white);
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.ioty-tl-date {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--txt-soft);
}
.ioty-tl-label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.3;
  color: var(--ioty-white);
  text-wrap: balance;
}
/* once the script has placed today: points still ahead go quiet, the
   next one keeps a white ring, the reached ones stay filled white */
.ioty-tl.is-live .ioty-tl-point:not(.is-reached) .ioty-tl-dot {
  border-color: rgba(255, 255, 255, 0.36);
  background: #000;
}
.ioty-tl.is-live .ioty-tl-point:not(.is-reached, .is-next) .ioty-tl-date {
  color: var(--txt-dim);
}
.ioty-tl.is-live .ioty-tl-point:not(.is-reached, .is-next) .ioty-tl-label {
  color: var(--txt-soft);
}
.ioty-tl.is-live .ioty-tl-point.is-next .ioty-tl-dot {
  border-color: var(--ioty-white);
}
/* the "Now" marker: a small iridescent disc on the track, its word in
   the gutter beside it (phones) or above it (768px up) */
.ioty-tl-now {
  position: absolute;
  z-index: 1;
  left: var(--tl-dx);
  top: calc(var(--ioty-now, 0) * 20% + var(--tl-dy));
  width: 0;
  height: 0;
}
.ioty-tl-now[hidden] {
  display: none;
}
.ioty-tl-now-dot {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(
    #ff9ee6,
    #b9a4ff,
    #7fdcff,
    #8ff5c9,
    #ffe89a,
    #ffb3c7,
    #ff9ee6
  );
  /* a black ring cuts the track around the disc */
  box-shadow: 0 0 0 4px #000;
}
.ioty-tl-now-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ioty-tl-now-dot::after {
    animation: ioty-halo 3.2s ease-out infinite;
  }
}
@keyframes ioty-halo {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
.ioty-tl-now-label {
  position: absolute;
  right: 14px;
  top: 0;
  transform: translateY(-50%);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ioty-white);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .ioty-tl-title {
    margin-bottom: 30px;
    text-align: center;
  }
  .ioty-tl {
    --tl-dy: 5px;
    /* room above the track for the marker's word */
    margin-top: 58px;
  }
  .ioty-tl-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .ioty-tl-point {
    align-items: center;
    padding: 36px 10px 0;
    text-align: center;
  }
  .ioty-tl::before,
  .ioty-tl::after {
    left: 10%;
    top: calc(var(--tl-dy) - 0.5px);
    width: 80%;
    height: 1px;
  }
  .ioty-tl::after {
    width: calc(var(--ioty-now, 0) * 20%);
  }
  .ioty-tl-dot {
    left: 50%;
  }
    .ioty-tl-now {
    left: calc((var(--ioty-now, 0) + 0.5) * 20%);
    top: var(--tl-dy);
  }
  .ioty-tl-now-label {
    right: auto;
    top: auto;
    left: 0;
    bottom: 18px;
    transform: translateX(-50%);
  }
}
@media (min-width: 1024px) {
  .ioty-tl-label {
    font-size: 1.22rem;
  }
}

/* tall on purpose: the stage sticks while the reader scrolls through
   the section and ioty.js lights the words one by one. Without the
   script (no .is-live) it is one screen of white text */
.ioty-statement {
  position: relative;
}
.ioty-statement.is-live {
  height: calc(var(--svh) * 260);
}
.ioty-statement-stage {
  display: grid;
  align-items: center;
  min-height: calc(var(--svh) * 100);
  padding: 96px 0;
}
.ioty-statement.is-live .ioty-statement-stage {
  position: sticky;
  top: 0;
  height: calc(var(--svh) * 100);
}
.ioty-statement-text {
  max-width: 19em;
  margin: 0 auto;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.3vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ioty-white);
}
/* the closing sentence lands iridescent: its gradient is clipped to
   the text of every word inside it, and a lit word turns transparent
   to show it */
.ioty-statement-end {
  font-style: italic;
  background: var(--ioty-irid);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ioty-w {
  transition: color 0.45s var(--ease);
}
.ioty-statement.is-live .ioty-w {
  color: var(--ioty-grey);
}
.ioty-statement.is-live .ioty-w.is-lit {
  color: var(--ioty-white);
}
.ioty-statement.is-live .ioty-statement-end .ioty-w.is-lit {
  color: transparent;
}

/* ------------------------------------------------ 3. the letter */
.ioty-essay {
  padding: clamp(80px, 14vh, 150px) 0 clamp(72px, 12vh, 130px);
}
.ioty-letter {
  max-width: 43rem;
  margin: 0 auto;
}
.ioty-letter-head {
  margin-bottom: 56px;
}
.ioty-letter-title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ioty-white);
}
.ioty-letter-date {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.ioty-letter-body p {
  margin: 0 0 1.25em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.14rem, 1.5vw, 1.3rem);
  line-height: 1.66;
  color: var(--ioty-white);
  text-wrap: pretty;
}
.ioty-letter-body a {
  color: var(--ioty-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.ioty-letter-body a:hover {
  text-decoration-thickness: 2px;
}
.ioty-dropcap::first-letter {
  float: left;
  margin: 0.08em 0.1em 0 0;
  font-size: 4.3em;
  line-height: 0.8;
  font-weight: 400;
  color: var(--ioty-white);
  -webkit-text-fill-color: var(--ioty-white);
}

/* the sign-off: the SOPO seal stamped on the left, the signature and
   the team beside it */
.ioty-letter-sign {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
  margin-top: 72px;
}

/* the signature: a pen line, not a font. Armed by ioty.js (a failed
   script leaves it simply standing), each stroke is drawn along its
   length (pathLength="1", so every dash runs 0..1), the three one
   after another inside 0.84s */
.ioty-letter-signature {
  display: grid;
  gap: 10px;
}
.ioty-sig {
  display: block;
  width: clamp(200px, 26vw, 290px);
  height: auto;
  overflow: visible;
  margin-left: -10px;
}
.ioty-sig path {
  fill: none;
  stroke: var(--ioty-white);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ioty-sig.is-armed path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.ioty-sig.is-drawn path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.62s cubic-bezier(0.45, 0.05, 0.55, 1);
}
/* then the pen goes back: the t's cross, the i's dot */
.ioty-sig.is-drawn path:nth-child(2) {
  transition-duration: 0.12s;
  transition-delay: 0.64s;
  transition-timing-function: ease-out;
}
.ioty-sig.is-drawn path:nth-child(3) {
  transition-duration: 0.05s;
  transition-delay: 0.79s;
  transition-timing-function: linear;
}
.ioty-letter-team {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ioty-white);
}

/* the seal: the SOPO logo exactly as supplied (a 200px PNG, so it is
   never drawn larger than 120px and stays sharp on a 2x screen's
   upscale). No filter, no recolouring, upright at rest */
/* the partner block: logo over its credit line, one link to sopo.fi */
.ioty-sopo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 150px;
  color: var(--txt-soft);
  text-decoration: none;
}
.ioty-sopo:hover,
.ioty-sopo:focus-visible {
  color: var(--ioty-white);
}
.ioty-sopo:focus-visible {
  outline: 2px solid var(--ioty-white);
  outline-offset: 6px;
  border-radius: 4px;
}
.ioty-sopo-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color 0.2s var(--ease);
}
.ioty-seal {
  display: block;
  width: clamp(96px, 11vw, 120px);
  aspect-ratio: 1;
}
.ioty-seal-img {
  display: block;
  width: 100%;
  height: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  /* the stamp: armed by ioty.js, it comes down fast, lands with a
     small bounce and settles upright */
  .ioty-seal.is-armed {
    opacity: 0;
    transform: scale(1.4) rotate(-8deg);
  }
  .ioty-seal.is-armed.is-pressed {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.12s ease-out,
      transform 0.3s cubic-bezier(0.3, 1.45, 0.55, 1);
  }
}

/* ------------------------------------------------ 4. the call */
.ioty-nominate {
  padding: clamp(80px, 14vh, 150px) 0 clamp(90px, 16vh, 170px);
  text-align: center;
}
.ioty-nominate-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ioty-white);
}
.ioty-nominate-cta {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(40px, 7vh, 64px);
}
.ioty-nominate-cta .ioty-btn {
  margin-bottom: 8px;
}
.ioty-nominate-note {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* ------------------------------------------------ phones and tablets */
@media (max-width: 860px) {
  .ioty-hero {
    padding-top: 112px;
  }
  .ioty-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .ioty-hero-copy {
    order: -1;
  }
  .ioty-hero-fig {
    justify-self: center;
    width: min(100%, 440px);
  }
  .ioty-hero-photo {
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .ioty-hero-name {
    font-size: clamp(3.2rem, 14vw, 5.6rem);
  }
}
@media (max-width: 560px) {
  .ioty-statement.is-live {
    height: calc(var(--svh) * 230);
  }
  .ioty-letter-sign {
    gap: 18px;
  }
  .ioty-seal {
    width: 84px;
  }
  .ioty-sopo {
    max-width: 110px;
    gap: 10px;
  }
  .ioty-sig {
    width: min(100%, 200px);
  }
  .ioty-letter-team {
    font-size: 1rem;
  }
  .ioty-btn {
    width: 100%;
  }
  .ioty-nominate-cta {
    justify-items: stretch;
  }
}