/* The Hague Lean UX
   Layout concept: a black workshop wall covered in sticky notes. Every section is a cluster
   of notes pinned at a slight angle; the pixel logo is the only display "type".
   Dark-first (like the slide deck), with a whiteboard variant for light mode. */

@layer reset, tokens, base, components, motion;

@view-transition { navigation: auto; }

@property --tilt {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
  ul[role="list"], ol.agenda { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* sticky-note palette, straight from the Figma "Components and colors" frame */
    --sticky-purple: #7b37a6;
    --sticky-blue: #00b7ea;
    --sticky-mint: #a8e1cb;
    --sticky-lime: #abe400;
    --sticky-yellow: #fbea00;
    --sticky-orange: #ffbc00;
    --sticky-peach: #ffbbae;
    --sticky-pink: #ff60ae;
    --note-ink: #111111;

    /* board (dark-first) */
    --board: #0c0c0d;
    --board-raised: #18181a;
    --ink: #f3f3ef;
    --ink-muted: #a3a3a8;
    --rule: #2c2c30;
    --focus: var(--sticky-blue);
    --accent: var(--sticky-yellow);
    --logo-filter: brightness(0) invert(1);
    --shadow: 0 1px 1px rgb(0 0 0 / .25), 0 12px 24px -8px rgb(0 0 0 / .65);

    --font-body: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
    --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
    --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
    --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);

    --gutter: clamp(1rem, 4vw, 3rem);
    --radius-note: 3px;
    --max: 72rem;

    color-scheme: dark;
  }

  /* whiteboard variant */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --board: #f2f2ef;
      --board-raised: #ffffff;
      --ink: #121214;
      --ink-muted: #55555c;
      --rule: #d9d9d4;
      --focus: var(--sticky-purple);
      --accent: var(--sticky-purple);
      --logo-filter: none;
      --shadow: 0 1px 1px rgb(0 0 0 / .08), 0 12px 22px -10px rgb(0 0 0 / .3);
      color-scheme: light;
    }
  }
  :root[data-theme="light"] {
    --board: #f2f2ef;
    --board-raised: #ffffff;
    --ink: #121214;
    --ink-muted: #55555c;
    --rule: #d9d9d4;
    --focus: var(--sticky-purple);
    --accent: var(--sticky-purple);
    --logo-filter: none;
    --shadow: 0 1px 1px rgb(0 0 0 / .08), 0 12px 22px -10px rgb(0 0 0 / .3);
    color-scheme: light;
  }
}

/* ---------- base ---------- */
@layer base {
  html {
    overflow-x: hidden; /* fallback for older Safari */
    overflow-x: clip;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    interpolate-size: allow-keywords;
    scroll-padding-top: 5rem;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    background: var(--board);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;
    font-optical-sizing: auto;
    padding-inline: var(--gutter);
    overflow-x: clip;
  }

  h1, h2, h3, h4 {
    line-height: 1.1;
    text-wrap: balance;
    letter-spacing: -.02em;
  }
  h1 { font-size: var(--step-3); font-weight: 800; }
  h2 { font-size: var(--step-3); font-weight: 800; }
  h3 { font-size: var(--step-1); font-weight: 700; }
  h4 { font-size: var(--step-0); font-weight: 700; }
  p { text-wrap: pretty; }

  a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection { background: var(--sticky-yellow); color: var(--note-ink); }
}

/* ---------- components ---------- */
@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    translate: 0 -200%;
    background: var(--sticky-yellow);
    color: var(--note-ink);
    padding: .5rem 1rem;
    z-index: 10;
    &:focus { translate: 0 1rem; }
  }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* ---- header ---- */
  .site-header {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    max-width: var(--max);
    margin-inline: auto;
    padding-block: .9rem;
    background: color-mix(in oklab, var(--board) 82%, transparent);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--rule);

    /* full-bleed background behind a centred bar */
    box-shadow: 0 0 0 100vmax color-mix(in oklab, var(--board) 82%, transparent);
    clip-path: inset(0 -100vmax);

    ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; padding: 0; }
    nav a {
      text-decoration: none;
      font-weight: 500;
      font-size: var(--step--1);
      padding-block: .25rem;
      transition: opacity .2s;
    }
    /* dim the siblings of whatever you're hovering */
    nav ul:has(a:hover) a:not(:hover) { opacity: .5; }
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    text-decoration: none;
  }

  /* five-dot "L" from the logo grid */
  .brand-mark {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(3, 7px);
    gap: 2px;
    i { background: var(--sticky-yellow); border-radius: 1.5px; }
    i:nth-child(1) { grid-area: 1 / 1; }
    i:nth-child(2) { grid-area: 2 / 1; }
    i:nth-child(3) { grid-area: 3 / 1; }
    i:nth-child(4) { grid-area: 3 / 2; }
    i:nth-child(5) { display: none; }
  }

  /* ---- the sticky note ---- */
  .note {
    --note: var(--sticky-yellow);
    position: relative;
    color: var(--note-ink);
    background:
      linear-gradient(135deg, rgb(0 0 0 / .06), transparent 45%),
      var(--note);
    border-radius: var(--radius-note);
    padding: clamp(1.1rem, 3cqi + .5rem, 2rem);
    box-shadow: var(--shadow);
    rotate: var(--tilt);
    @media (max-width: 40rem) { rotate: calc(var(--tilt) * .35); }
    transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1), scale .35s cubic-bezier(.3, 1.6, .5, 1);
    a:not(.button) { color: inherit; }
    .eyebrow { opacity: .75; }
  }
  .note--yellow { --note: var(--sticky-yellow); }
  .note--blue   { --note: var(--sticky-blue); background: linear-gradient(150deg, #7c8fd8, var(--sticky-blue) 60%); }
  .note--peach  { --note: var(--sticky-peach); }
  .note--mint   { --note: var(--sticky-mint); }
  .note--lime   { --note: var(--sticky-lime); }
  .note--orange { --note: var(--sticky-orange); }
  .note--pink   { --note: var(--sticky-pink); }
  .note--purple { --note: var(--sticky-purple); color: #fff; }

  /* a note you can interact with straightens up when you reach for it */
  a.note:hover, a.note:focus-visible,
  .note:has(a:hover, button:hover) {
    rotate: 0deg;
    scale: 1.02;
  }

  /* ---- hero ---- */
  .hero {
    max-width: var(--max);
    margin-inline: auto;
    padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }

  .hero-board {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    container-type: inline-size;
    padding-block: 1rem;
  }
  .hero-logo {
    grid-column: 4 / 12;
    grid-row: 1;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: 12% 16% 16%;
  }
  .hero-next {
    grid-column: 1 / 7;
    grid-row: 2;
    margin-block-start: -6%;
    z-index: 3;
    .hero-next-title { font-size: var(--step-1); font-weight: 800; line-height: 1.15; margin-block: .35rem .4rem; }
    p:last-child { font-size: var(--step--1); }
    a { font-weight: 700; }
  }
  .hero-agenda {
    grid-column: 7 / 13;
    grid-row: 2;
    margin-block-start: 2%;
    z-index: 1;
  }
  .agenda {
    margin-block-start: .5rem;
    display: grid;
    gap: .1rem;
    font-weight: 600;
    counter-reset: agenda;
    li { counter-increment: agenda; }
    &.agenda--timed li::before { content: none; }
    time { font-family: var(--font-mono); font-weight: 400; opacity: .65; margin-inline-end: .4em; }
    li::before {
      content: counter(agenda) "  ";
      font-family: var(--font-mono);
      font-weight: 400;
      opacity: .6;
      white-space: pre;
    }
  }

  .pixel-logo {
    width: 100%;
    fill: var(--note-ink);
  }

  .hero-copy {
    display: grid;
    gap: 1.5rem;
    min-width: 0;
    .lede { font-size: var(--step-1); line-height: 1.45; max-width: 34ch; color: var(--ink-muted); }
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

  .stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--rule);
    div { display: flex; flex-direction: column-reverse; }
    dt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); }
    dd { font-size: var(--step-2); font-weight: 800; font-variant-numeric: tabular-nums; }
  }

  /* ---- buttons ---- */
  .button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.2rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: translate .15s, box-shadow .15s;
    &:hover { translate: 0 -2px; box-shadow: 0 4px 0 currentColor; }
    &:active { translate: 0 0; box-shadow: none; }
  }
  .button--primary {
    background: var(--sticky-yellow);
    border-color: var(--sticky-yellow);
    color: var(--note-ink);
    &:hover { box-shadow: 0 4px 0 color-mix(in oklab, var(--sticky-yellow) 55%, black); }
  }
  .button--dark { background: var(--note-ink); border-color: var(--note-ink); color: #fff; }
  .button--dark:hover { box-shadow: 0 4px 0 rgb(0 0 0 / .35); }
  .button--light { border-color: #fff; color: #fff; }

  /* ---- sections ---- */
  .section {
    max-width: var(--max);
    margin-inline: auto;
    padding-block: clamp(3rem, 8vw, 6rem);
    border-block-start: 1px solid var(--rule);
    display: grid;
    gap: 1.5rem;
  }
  .section-head {
    display: grid;
    gap: .75rem;
    max-width: 40rem;
    margin-block-end: 1rem;
    > p:last-child { color: var(--ink-muted); font-size: var(--step-1); line-height: 1.45; }
    .eyebrow { color: var(--accent); }
  }

  .list-title {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-muted);
    margin-block-start: 1rem;
  }

  /* ---- events ---- */
  .events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: 1rem;
  }
  .events--upcoming { grid-template-columns: minmax(0, 40rem); }

  .event {
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    background: var(--board-raised);
    border: 1px solid var(--rule);
    border-radius: 6px;
    &.note {
      border: 0;
      border-radius: var(--radius-note);
      background: linear-gradient(135deg, rgb(0 0 0 / .06), transparent 45%), var(--note);
    }
    h4 { font-size: var(--step-0); }
    p { font-size: var(--step--1); }
    .event-meta { color: var(--ink-muted); margin-block: .2rem .6rem; }
    &.note .event-body > p { margin-block: .4rem .8rem; font-size: var(--step-0); }
  }
  .event-date time, .event-date { display: grid; justify-items: center; line-height: 1; }
  .event-day {
    font-size: var(--step-3);
    font-weight: 800;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
  }
  .event-month {
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-block-start: .3rem;
  }
  .event-link { font-weight: 700; font-size: var(--step--1); }
  .event-link::after { content: " →"; }

  /* stack the date above the text when the card is narrow */
  @container (max-width: 15rem) {
    .event-body { grid-column: 1 / -1; }
  }

  .more a { font-weight: 600; }

  /* ---- intro ---- */
  .intro-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: .5rem 1rem;
    > li { container-type: inline-size; display: grid; align-content: start; gap: .75rem; }
  }

  .faq {
    display: grid;
    max-width: 44rem;
    details {
      border-block-end: 1px solid var(--rule);
      &::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size .3s ease, content-visibility .3s allow-discrete;
      }
      &[open]::details-content { block-size: auto; }
    }
    summary {
      cursor: pointer;
      list-style: none;
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding-block: 1rem;
      font-weight: 700;
      font-size: var(--step-1);
      &::-webkit-details-marker { display: none; }
      &::after {
        content: "";
        flex: none;
        inline-size: .7em;
        block-size: .7em;
        margin-block-start: .35em;
        border-radius: 2px;
        background: var(--sticky-yellow);
        transition: rotate .3s, background-color .3s;
      }
    }
    details[open] summary::after { rotate: 45deg; background: var(--sticky-pink); }
    details p { padding-block-end: 1.25rem; color: var(--ink-muted); max-width: 60ch; }
  }

  /* ---- support ---- */
  .backers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
  }
  .backer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: .25rem;
    place-content: center;
    text-align: center;
    min-block-size: 8rem;
    padding: 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--board-raised);
    text-decoration: none;
  }
  .backer-name { font-size: var(--step-1); font-weight: 800; letter-spacing: -.02em; }
  .backer-role { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); }
  .backer-card--gold {
    position: relative;
    border-color: #d9a400;
    background:
      linear-gradient(135deg, color-mix(in oklab, var(--sticky-orange) 22%, transparent), transparent 60%),
      var(--board-raised);
    transition: translate .2s, box-shadow .2s;
    &:hover { translate: 0 -3px; box-shadow: 0 6px 0 #d9a400; }
    .backer-role { color: inherit; }
  }
  .backer-logo {
    /* explicit size, no percentage max-width: WebKit collapses a % max-width
       inside a content-sized grid track to zero */
    inline-size: 9rem;
    max-inline-size: none;
    block-size: auto;
    aspect-ratio: 466 / 236;
    justify-self: center;
    margin-block-end: .5rem;
    filter: var(--logo-filter);
  }
  .crown {
    inline-size: 2.2rem;
    justify-self: center;
    margin-block-end: .35rem;
    fill: var(--sticky-orange);
    rotate: -6deg;
  }
  .backer--open .backer-card {
    border-style: dashed;
    background: transparent;
    transition: border-color .2s;
    &:hover { border-color: var(--sticky-yellow); }
  }

  .tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: 2rem 1rem;
    > .tier { display: grid; gap: .9rem; align-content: start; justify-items: start; max-inline-size: 40rem; }
  }

  .members {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
  }
  .member {
    --c: var(--sticky-yellow);
    display: inline-block;
    text-decoration: none;
    transition: rotate .3s cubic-bezier(.3, 1.6, .5, 1), scale .3s cubic-bezier(.3, 1.6, .5, 1);
    background: var(--c);
    color: var(--note-ink);
    padding: .6rem .9rem;
    border-radius: var(--radius-note);
    font-weight: 600;
    box-shadow: var(--shadow);
    rotate: -1deg;
    &:hover, &:focus-visible { rotate: 0deg; scale: 1.06; }
  }
  .members li:nth-child(even) .member { rotate: 1.5deg; }
  .members li:nth-child(3n) .member { rotate: -2deg; }
  .members li .member:is(:hover, :focus-visible) { rotate: 0deg; }
  .faq-cta { padding-block-start: 1.5rem; }


  /* ---- channels ---- */
  .channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
    padding-block: .5rem;
  }
  .channel {
    display: grid;
    gap: .2rem;
    min-block-size: 9rem;
    align-content: end;
    text-decoration: none;
    container-type: inline-size;
  }
  /* shrinks with the tile, so a long name and its arrow stay on one line */
  .channel-name { font-size: min(var(--step-2), 16cqi); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
  .channel-name::after { content: " ↗"; font-weight: 400; }
  .channel--here .channel-name::after { content: " →"; } /* a page on this site, not elsewhere */
  .channel-what { font-size: var(--step--1); font-weight: 500; }

  /* ---- footer ---- */
  .site-footer {
    max-width: var(--max);
    margin-inline: auto;
    padding-block: 2rem 3rem;
    border-block-start: 1px solid var(--rule);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--step--1);
    color: var(--ink-muted);
  }

  /* ---- thank-you page: thanks.html#sponsor picks the message ---- */
  .thanks {
    max-width: 34rem;
    margin-inline: auto;
    padding-block: clamp(3rem, 10vw, 6rem);
    display: grid;
    gap: 2rem;
  }
  .thanks-msg {
    display: none;
    gap: 1rem;
    justify-items: start;
    h1 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
  }
  .thanks-msg--default,
  .thanks-msg:target { display: grid; }
  .thanks:has(.thanks-msg:target) .thanks-msg--default { display: none; }
  .thanks-next { color: var(--ink-muted); }

  /* ---- mailing-list sign-up: signup.html, and Ring Ring's own pages (site/ringring/templates/page.html) ----
     The form markup comes from Ring Ring (.rr-* classes); ringring.css is not loaded, this styles it. */
  .signup {
    max-width: 34rem;
    margin-inline: auto;
    padding-block: clamp(3rem, 10vw, 6rem);
    display: grid;
    gap: 2rem;
  }
  .signup-card {
    display: grid;
    gap: 1rem;
    justify-items: start;
    h1 { font-size: var(--step-3); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
  }
  .signup-next { color: var(--ink-muted); }
  .rr-form {
    display: grid;
    gap: .6rem;
    width: 100%;
  }
  .rr-label { font-weight: 700; }
  .rr-row { display: flex; flex-wrap: wrap; gap: .6rem; }
  .rr-input {
    flex: 1 1 14rem;
    min-width: 0;
    font: inherit;
    color: var(--note-ink);
    background: rgb(255 255 255 / .75);
    border: 2px solid var(--note-ink);
    border-radius: var(--radius-note);
    padding: .7rem .9rem;
    &::placeholder { color: rgb(17 17 17 / .55); }
    &:focus-visible { outline-color: var(--note-ink); background: #fff; }
  }
  /* same as .button.button--dark */
  .rr-button {
    display: inline-flex;
    align-items: center;
    padding: .75rem 1.2rem;
    border: 2px solid var(--note-ink);
    border-radius: 999px;
    background: var(--note-ink);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: translate .15s, box-shadow .15s;
    &:hover { translate: 0 -2px; box-shadow: 0 4px 0 rgb(0 0 0 / .35); }
    &:active { translate: 0 0; box-shadow: none; }
  }
  .rr-note { font-size: var(--step--1); opacity: .75; }
  /* the answer when Ring Ring's script sends the form without leaving the page */
  .rr-message:empty { display: none; }
  .rr-message { font-weight: 700; }
  .rr-message--error { color: #8a1c1c; }
  .rr-intro, .rr-body { max-width: 30rem; }
  .rr-back a { font-weight: 700; }
  /* the honeypot: people never see it, bots fill it in */
  .rr-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* ---- talks archive: talks.html ---- */
  .section-head h1 { font-size: var(--step-3); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
  .talks-nights { display: grid; gap: clamp(2rem, 5vw, 3rem); list-style: none; padding: 0; }
  .talks-night {
    display: grid;
    gap: 1rem;
    > h3 { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
  }
  .talks-soon { background: var(--sticky-lime); color: var(--note-ink); padding: .1em .45em; border-radius: 3px; }
  .talks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; align-items: start; }
  .talk {
    padding: 1.25rem;
    background: var(--board-raised);
    border: 1px solid var(--rule);
    border-radius: 6px;
    h4 { font-size: var(--step-1); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
    .talk-speaker { font-weight: 700; margin-block: .35rem .6rem; }
    p:not(.talk-speaker) { font-size: var(--step--1); color: var(--ink-muted); }
  }
  span.member { cursor: default; }
}

/* ---------- motion ---------- */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    /* the logo pixels drop in one by one on load */
    .pixel-logo rect {
      transform-box: fill-box;
      transform-origin: center;
      animation: pixel-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
      animation-delay: calc(var(--i) * 14ms + 150ms);
    }
    /* and wiggle when you poke the note */
    .hero-logo:hover .pixel-logo rect {
      animation: pixel-wiggle .6s ease-in-out;
      animation-delay: calc(var(--i) * 6ms);
    }

    /* notes get "stuck to the wall" as they scroll into view */
    @supports (animation-timeline: view()) {
      .section .note {
        animation: stick linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
      }
    }

  }

  @keyframes pixel-in {
    from { opacity: 0; scale: 0; }
  }
  @keyframes pixel-wiggle {
    40% { translate: 0 -6px; }
  }
  @keyframes stick {
    from { translate: 0 3rem; rotate: calc(var(--tilt) * -1.5); scale: 1.03; }
  }
}