/* =========================
   Fonts
   ========================= */
@font-face {
  font-family: "Apfel Grotezk";
  src:
    url("/assets/fonts/ApfelGrotezk-Regular.woff2") format("woff2"),
    url("/assets/fonts/ApfelGrotezk-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apfel Grotezk";
  src:
    url("/assets/fonts/ApfelGrotezk-Mittel.woff2") format("woff2"),
    url("/assets/fonts/ApfelGrotezk-Mittel.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apfel Grotezk";
  src:
    url("/assets/fonts/ApfelGrotezk-Fett.woff2") format("woff2"),
    url("/assets/fonts/ApfelGrotezk-Fett.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Apfel Grotezk";
  src:
    url("/assets/fonts/ApfelGrotezk-Satt.woff2") format("woff2"),
    url("/assets/fonts/ApfelGrotezk-Satt.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* =========================
   Base
   ========================= */
:root {
  --max: 68rem;
  --pad: 1.25rem;
  --border: 1px solid #000;
  --header-h: 72px;
  --accent: #F4FF3B;
  --paper: #F2F2EF;
  --hero-optical-x: 7px;
  --arrow-glyph-size: clamp(140px, 9vw, 240px);
  --arrow-glyph-weight: 400;
  --arrow-right: clamp(14px, 2vw, 28px);
  --arrow-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --arrow-trigger-ms: 220ms;
  --hero-arrow-rest-y: -0.06em;
  --hero-arrow-hover-shift: 0.12em;
  --hero-arrow-active-shift: 0.28em;
  --hero-arrow-trigger-shift: 0.28em;
  --hero-arrow-trigger-scale: 0.94;
  --to-top-lift-y: -18px;
  --to-top-lift-scale: 1.06;
  --to-top-trigger-y: 2px;
  --to-top-trigger-scale: 0.95;
  --index-arrow-trigger-ms: 180ms;
  --index-arrow-trigger-shift: 3px;
  --index-arrow-trigger-scale: 0.95;
  --to-top-right: var(--arrow-right);
  --bottom-gutter: clamp(36px, 8vh, 120px);
  --footer-colophon-size: clamp(11px, 0.85vw, 13px);
  --footer-colophon-gap: clamp(16px, 2.2vw, 28px);
  --footer-colophon-bottom: clamp(26px, 3.2vh, 44px);
  --to-top-bottom: clamp(18px, 3.5vh, 56px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --to-top-bottom-safe: calc(var(--to-top-bottom) + var(--safe-bottom));
  --to-top-ink-offset: clamp(33px, 1.6vw, 37px);
  --to-top-align-bottom: calc(var(--to-top-bottom-safe) + var(--to-top-ink-offset));
  --footer-reserve-bottom: max(var(--to-top-align-bottom), calc(var(--footer-colophon-bottom) + var(--footer-colophon-size) + 12px + var(--safe-bottom)));
  --footer-panel-max: clamp(380px, 36vw, 620px);
  --grid-right: 25px;
  --frame-left: 25px;
  --frame-right: clamp(28px, 4vw, 72px);
  --section-gap: clamp(56px, 7vw, 140px);
  --section-first-gap: clamp(28px, 4vw, 72px);
  --snap-offset: 5px;
  --nav-font: clamp(26px, calc(24px + 0.2vw), 32px);
  --nav-gap: clamp(1.5rem, 1.8vw, 2.5rem);

  /* CTA sizing */
  --cta-font-size: clamp(19px, 1.8vw, 28px);
  --cta-font-size-hero: clamp(19px, 1.75vw, 28px);
  --cta-gap: clamp(12px, 1.3vw, 18px);
  --cta-icon-size: clamp(30px, 2.2vw, 40px);
  --cta-icon-size-hero: clamp(30px, 2.4vw, 52px);

  /* Content sizing */
  --content-measure: clamp(28rem, 50vw, 42rem);
  --content-box-width: min(100%, calc(var(--content-measure) + 36px + 6px));

  /* Meta */
  --label-font: clamp(16px, 1.2vw, 20px);
  --meta-gap: clamp(10px, 1.15vw, 16px);
  --meta-gap-tight: clamp(4px, 0.55vw, 8px);

  /* Beta signup drawer */
  --beta-drawer-width: 40vw;
  --beta-drawer-min: 360px;
  --beta-drawer-max: 640px;
  --beta-drawer-pad: clamp(20px, 2.8vw, 36px);
  --beta-drawer-field-gap: clamp(14px, 1.5vw, 20px);
  --beta-drawer-close-size: 44px;
  --beta-drawer-top-gap: 90px;
  --beta-note-min-h: 100px;
  --beta-stack-max-x: 41px; /* furthest stack X */
  --beta-drawer-right-gap: clamp(190px,calc(var(--arrow-right) + (var(--arrow-glyph-size) * 0.85) + 40px + var(--beta-stack-max-x) + 14px),320px);
  --footer-drawer-left-gap: var(--beta-drawer-right-gap);
  --footer-drawer-pad: clamp(20px, 2.4vw, 34px);
  --legal-section-gap: clamp(24px, 2.8vw, 44px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Apfel Grotezk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background: var(--paper);
}

body.drawer-open {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  top: var(--drawer-lock-top, 0);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--pad);
  top: var(--pad);
  background: #fff;
  border: var(--border);
  padding: .5rem .75rem;
  z-index: 9999;
}

/* =========================
   Header + Nav
   ========================= */
.site-header {
  border-bottom: 0;
  font-size: var(--nav-font);
}

.header-inner {
  max-width: 100%;
  margin: 0 auto;
  padding: 8px 16px 0; /* mobile */
}

.nav {
  width: 100%;
  line-height: 1;
}

.nav a {
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.nav a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.nav-desktop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  font-weight: 500;
  white-space: nowrap;
}

.nav-desktop a {
  font-weight: inherit;
  line-height: 1em;
}
.nav-desktop .nav-links a,
.nav-desktop .nav-actions a {
  font-size: 1.2em;
}

.nav-desktop .nav-links,
.nav-desktop .nav-actions {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav-desktop .nav-links { justify-self: center; }
.nav-desktop .nav-actions { justify-self: end; }

.nav-desktop .brand {
  display: flex;
  align-items: center;
  justify-self: start;
  align-self: baseline;
}

.nav-desktop .brand img,
.nav-desktop .brand svg {
  height: 1em;
  width: auto;
  display: block;
  transform: translateY(2px);
}

@media (min-width: 900px) {
  .header-inner {
    padding: 10px 20px;
  }

  .nav-desktop {
    column-gap: clamp(1rem, 2vw, 3rem);
  }

  .nav-desktop .nav-actions a {
    align-items: baseline;
  }

}

.nav-desktop .arrow {
  display: inline-block;
  font-size: 1.25em;
  font-weight: 700;
  margin-left: 0.05em;
  transform: translateY(2px);
  vertical-align: baseline;
}

.wordmark{
  position: relative;
  display: inline-block;
  line-height: 0;
}

.wordmark .wm{
  display: block;
  height: 1em;
  width: auto;
  transition: opacity 120ms ease;
}

.wordmark .wm-hover{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.wordmark:hover .wm-hover{ opacity: 1; }
.wordmark:hover .wm-base{ opacity: 0; }

.site-header .nav a{
  color: #000;
  text-decoration: none;
}

/* =========================
   section label
   ========================= */
.section-label{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.4rem;
  font-size: var(--label-font);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  width: min(100%, var(--content-measure));
}
.section-label::before{
  content:"";
  flex: 1;
  height: 8px;
  background: currentColor;
  opacity: 1;
}
.section-label span{
  white-space: nowrap;
  opacity: 1;
}

.section-label .ch-num{ letter-spacing: .03em; }
.section-label .ch-of{ margin-left: 0; }

/* =========================
   footer marker sweep
   ========================= */

.site-header .nav-links a,
.site-header .nav-actions a{
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Marker highlight behind text (physical marker sweep) */
.site-header .nav-links a::after,
.site-header .nav-actions a::after,
.footer-link::after,
.legal-content__section p a::after,
.legal-content__section p .legal-content__email::after{
  content:"";
  position:absolute;

  /* Bigger swash */
  left: -0.38em;
  right: -0.34em;
  top: 50%;
  height: 1.35em;

  background: var(--accent);
  opacity: 0;
  z-index: -1;
  border-radius: 2px;

  transform-origin: left;

  /* Start: tucked left, slightly thin */
  transform: translateY(-54%) translateX(-14%) skewX(-28deg) scaleX(0.02) scaleY(0.74);

  transition:
    opacity 90ms ease,
    filter 260ms cubic-bezier(.12, 1.12, .22, 1);

  /* Ragged edge via mask */
  -webkit-mask-image:
    radial-gradient(11px 8px at 8px 6px, #000 60%, transparent 64%),
    radial-gradient(13px 9px at 18px 18px, #000 60%, transparent 65%),
    radial-gradient(10px 8px at 34px 10px, #000 60%, transparent 64%),
    radial-gradient(13px 9px at 52px 16px, #000 60%, transparent 65%),
    radial-gradient(11px 8px at 70px 8px, #000 60%, transparent 64%),
    linear-gradient(#000, #000);
  -webkit-mask-size: 42px 20px, 46px 22px, 40px 20px, 48px 22px, 42px 20px, 100% 100%;
  -webkit-mask-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
  -webkit-mask-position: 0 0, 7px 2px, 13px 1px, 20px 3px, 26px 2px, 0 0;

  mask-image:
    radial-gradient(11px 8px at 8px 6px, #000 60%, transparent 64%),
    radial-gradient(13px 9px at 18px 18px, #000 60%, transparent 65%),
    radial-gradient(10px 8px at 34px 10px, #000 60%, transparent 64%),
    radial-gradient(13px 9px at 52px 16px, #000 60%, transparent 65%),
    radial-gradient(11px 8px at 70px 8px, #000 60%, transparent 64%),
    linear-gradient(#000, #000);
  mask-size: 42px 20px, 46px 22px, 40px 20px, 48px 22px, 42px 20px, 100% 100%;
  mask-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat;
  mask-position: 0 0, 7px 2px, 13px 1px, 20px 3px, 26px 2px, 0 0;
}

/* Hover/focus: finish the sweep */
@media (hover: hover), (any-hover: hover){
  .site-header .nav-links a:hover::after,
  .site-header .nav-actions a:hover::after,
  .footer-link:hover::after,
  .legal-content__section p a:hover::after,
  .legal-content__section p .legal-content__email:hover::after{
    opacity: 1;
    animation: markerSweep 480ms cubic-bezier(.12, 1.12, .22, 1) both;
  }
}

.site-header .nav-links a:focus-visible::after,
.site-header .nav-actions a:focus-visible::after,
.footer-link:focus-visible::after,
.legal-content__section p a:focus-visible::after,
.legal-content__section p .legal-content__email:focus-visible::after{
  opacity: 1;
  animation: markerSweep 480ms cubic-bezier(.12, 1.12, .22, 1) both;
}

.site-header .nav-links a[aria-current="page"]::after,
.site-header .nav-actions a[aria-current="page"]::after{
  opacity: 1;
  transform: translateY(-54%) translateX(0%) skewX(-14deg) scaleX(1) scaleY(1);
}

/* More overshoot + a tiny “settle” */
@keyframes markerSweep{
  0%   { transform: translateY(-54%) translateX(-14%) skewX(-28deg) scaleX(0.02) scaleY(0.74); }
  58%  { transform: translateY(-54%) translateX(-2%)  skewX(-18deg) scaleX(1.14) scaleY(1.08); }
  82%  { transform: translateY(-54%) translateX(0%)   skewX(-14deg) scaleX(0.98) scaleY(1.02); }
  100% { transform: translateY(-54%) translateX(0%)   skewX(-14deg) scaleX(1)    scaleY(1); }
}

.site-header .nav a .arrow{
  color:#000;
  font-weight:700;
  font-family: inherit;
  display: inline-block;
  position: relative;
  z-index: 1;
}

.site-header .nav a .arrow::after{ content: none; }

.header-desktop,
.header-mobile { display: none; }

@media (max-width: 934px) {
  .header-mobile { display: block; }
  .nav-mobile .nav-links,
  .nav-mobile .nav-actions { font-size: clamp(21px, 1.5vw + 15px, 24px); }
  .nav-mobile .nav-links { transform: translateX(4px); }
}

@media (min-width: 935px) {
  .header-desktop { display: block; }
}

/* =========================
   Mobile nav
   ========================= */

.nav-mobile{
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: flex-start;
  gap: 1rem;
}

.nav-mobile .smiley{
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 56px;
  width: 56px;
  height: 56px;
  margin-top: 10px;
}
.nav-mobile .smiley img{
  width: 56px;
  height: 56px;
  display: block;
}

.nav-mobile .nav-grid{
  justify-self: end;
  display: grid;
  grid-template-columns: max-content max-content;
  grid-auto-rows: 44px;
  column-gap: clamp(18px, 6vw, 42px);
  row-gap: 0;
  grid-auto-flow: row;
  justify-content: end;
  justify-items: end;
  align-items: center;
  font-size: clamp(24px, 1.2vw + 16px, 28px);
  font-weight: 400;
}

/* Links */
.nav-mobile .nav-grid a{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  width: max-content;

  color: inherit;
  text-decoration: none;
  letter-spacing: 0.01em;
  line-height: 0.9;
  font-weight: inherit;

  padding-inline: 8px;
  margin-inline: -8px;

  white-space: nowrap; /* prevents SIGN / UP */
}

.nav-mobile .nav-grid > a:last-child:nth-child(odd){
  grid-column: 2;
}

/* Arrow breathing room */
.nav-mobile .nav-grid .arrow{
  display: inline-block;
  margin-left: 0.35em;
  font-size: 1.1em;
  font-weight: 700;
  transform: translateY(-0.02em);
  vertical-align: baseline;
}

/* Focus styles */
.nav-mobile .nav-grid a:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* =========================
   Page
   ========================= */
main{
  max-width: none;
  margin: 0;
  padding: 0;
}

main > *{
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
  padding-top: 2.5rem;
}

main > .beta-signup-drawer{
  max-width: none;
  margin: 0;
  padding: 0;
}

main > .hero{
  max-width: none;
  margin: 0;
  padding: 0;
}

main > :last-child{
  padding-bottom: calc(var(--bottom-gutter) + 1.5rem);
}

/* =========================
   Hero (desktop)
   ========================= */
.hero{
  min-height: calc(100vh - var(--header-h));
  padding: 0;
}
@supports (height: 100dvh){
  .hero{ min-height: calc(100dvh - var(--header-h)); }
}

.hero-grid{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 50px var(--frame-right) clamp(28px, 4vw, 72px) var(--frame-left);
  column-gap: clamp(18px, 4vw, 72px);
  position: relative;
}

@supports (height: 100dvh){
  .hero-grid{ min-height: calc(100dvh - var(--header-h)); }
}

.hero-inner{ max-width: none; }

.hero-title{
  margin: 0 0 clamp(12px, 1.8vw, 22px) 0;
  font-weight: 900;
  font-size: clamp(70px, 8.3vw, 176px);
  letter-spacing: -0.01em;
  padding-left: var(--hero-optical-x);
}

/* HERO TITLE (staggered) */
.home .hero-title--stagger{
  display: none;
}

.home .hero-title--mobile{
  display: block;
}

@media (min-width: 900px){
  .home .hero-title--mobile{
    display: none;
  }

  .home .hero-title--stagger{
    line-height: 0.88;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: max-content;   /* shrink-wrap to the longest line */
    justify-self: start;
    align-self: start;
  }

  .home .hero-title--stagger span{
    width: max-content;
  }

  .home .hero-title--stagger .l1{ margin-left: 0; }
  .home .hero-title--stagger .l2{ margin-left: 3.1ch; }
  .home .hero-title--stagger .l3{ margin-left: 4.4ch; }

  .home .hero-title--stagger .l4{
    align-self: flex-end;          /* right edge of the longest line */
    transform: translateX(0.7ch) rotate(-4deg);
    font-size: 0.38em;
    margin-top: 0.25em;
    font-weight: 700;
  }
}
/* HERO TITLE (staggered) ENDS */
.hero-subtitle{
  margin: 0 0 clamp(12px, 1.3vw, 20px) 0;
  font-weight: 400;
  font-size: clamp(22px, 1.85vw, 32px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 39ch;
  padding-left: 5px;
}

.hero-subtitle strong{
  font-weight: 700;
}

.cta-row{
  display: inline-flex;
  align-items: center;
  gap: var(--cta-gap);
  --cta-arrow-y: -0.02em;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  font-size: var(--cta-font-size);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: 6px;
  padding-block: 8px;
  margin-top: clamp(8px, 1.8vw, 18px);
}

.hero-cta{
  display: inline-flex;
  align-items: center;
  gap: var(--cta-gap);
  --cta-arrow-y: 0em;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  font-size: var(--cta-font-size-hero);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  padding-left: 6px;
  padding-block: 10px;
}

.hero-cta .cta-label,
.cta-row .cta-label{ color:#000; }

.cta-row .cta-icon{
  position: relative;
  width: var(--cta-icon-size);
  height: var(--cta-icon-size);
  display: inline-block;
  transform: translateY(-0.06em);
  transform-origin: center;
  will-change: transform;
}

.hero-cta .cta-icon{
  position: relative;
  width: var(--cta-icon-size-hero);
  height: var(--cta-icon-size-hero);
  display: inline-block;
  transform: translateY(-0.03em);
  transform-origin: center;
  will-change: transform;
}

.hero-cta .cta-icon::before,
.cta-row .cta-icon::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
}

.cta-row .cta-icon img,
.hero-cta .cta-icon img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 112%;
  height: 112%;
  display: block;
  pointer-events: none;
}

.hero-cta .cta-arrow,
.cta-row .cta-arrow{
  display: inline-block;
  font-size: 1.2em;
  font-weight: 700;
  color: inherit;
  transform: translate3d(0, var(--cta-arrow-y), 0);
  transition: transform 140ms ease;
}

.hero-cta:hover .cta-icon::before,
.cta-row:hover .cta-icon::before{
  background: var(--accent);
}

.hero-cta:hover .cta-arrow,
.cta-row:hover .cta-arrow{
  transform: translate3d(6px, var(--cta-arrow-y), 0);
}

@media (hover: hover), (any-hover: hover){
  .hero-cta:hover .cta-icon,
  .cta-row:hover .cta-icon{
    animation: ctaSmileyPop 240ms cubic-bezier(.12, 1.12, .22, 1) both;
  }
}

.hero-cta:focus-visible .cta-icon,
.cta-row:focus-visible .cta-icon{
  animation: ctaSmileyPop 240ms cubic-bezier(.12, 1.12, .22, 1) both;
}

@keyframes ctaSmileyPop{
  0%   { transform: translateY(-0.06em) scale(1); }
  58%  { transform: translateY(-0.06em) scale(1.54); }
  100% { transform: translateY(-0.06em) scale(1.34); }
}

/* =========================
   Beta signup drawer
   ========================= */
.beta-signup-drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.beta-signup-drawer[hidden]{
  display: none;
}

.beta-signup-drawer.is-open{
  pointer-events: auto;
}

.beta-signup-drawer__backdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}

.beta-signup-drawer__panel{
  position: absolute;
  top: var(--beta-drawer-top-gap);
  right: var(--beta-drawer-right-gap);
  bottom: 0;
  width: clamp(var(--beta-drawer-min), var(--beta-drawer-width), var(--beta-drawer-max));
  max-width: 100%;
  background: var(--paper);
  border: 3px solid #000;
  border-bottom: none;
  border-radius: 2px;
  transform: translate3d(100%, 0, 0);
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
  display: flex;
  flex-direction: column;
  isolation: isolate;
  z-index: 1;
  overflow: visible;
  box-shadow: inset 0 0 0 1px #000,

  var(--paper) 11px -6px  0 -4px,
  #000          11px -6px  0 0,

  var(--paper) 24px -14px 0 -4px,
  #000          24px -14px 0 0,

  var(--paper) 41px -22px 0 -4px,
  #000          41px -22px 0 0;
}

.beta-signup-drawer.is-open .beta-signup-drawer__panel{
  transform: translate3d(0, 0, 0);
}

.beta-signup-drawer__close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: var(--beta-drawer-close-size);
  min-width: var(--beta-drawer-close-size);
  height: var(--beta-drawer-close-size);
  min-height: var(--beta-drawer-close-size);
  border: none;
  background: none;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 3rem;
  line-height: 1;
  cursor: pointer;
}

.beta-signup-drawer__close:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

.beta-signup-drawer__content{
  height: 100%;
  overflow-y: auto;
  padding: calc(var(--beta-drawer-pad) + 5px) var(--beta-drawer-pad) var(--beta-drawer-pad);
}

.beta-signup-drawer__content h2{
  margin: 0;
  font-size: clamp(48px, 4.8vw, 66px);
  line-height: 0.94;
  letter-spacing: -0.014em;
  font-weight: 900;
}

.beta-signup-drawer__intro{
  margin: 14px 0 0;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.2;
  max-width: 40ch;
  font-weight: 500;
}

.beta-signup-form{
  margin-top: clamp(20px, 2.2vw, 28px);
  display: grid;
  gap: var(--beta-drawer-field-gap);
}

.beta-signup-form__field{
  display: grid;
  gap: 8px;
}

.beta-signup-form__field label{
  font-weight: 700;
  font-size: clamp(16px, 1.1vw, 19px);
  letter-spacing: 0.02em;
}

.beta-signup-form__field input,
.beta-signup-form__field textarea{
  width: 100%;
  border: 2px solid #000;
  border-radius: 2px;
  background: #fff;
  color: #000;
  font: inherit;
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.3;
  padding: 13px;
}

.beta-signup-form__field textarea{
  resize: vertical;
  min-height: var(--beta-note-min-h);
  height: var(--beta-note-min-h);      /* default visible size */
  min-height: var(--beta-note-min-h);  /* still prevents collapsing */
}

.beta-signup-form__field input:focus-visible,
.beta-signup-form__field textarea:focus-visible,
.beta-signup-form__submit:focus-visible{
  outline: 2px solid #000;
  outline-offset: 0;
}

.beta-signup-form__submit{
  margin-top: 4px;
  min-height: 44px;
  border: 0;
  background: var(--accent);
  color: #000;
  font: inherit;
  font-size: clamp(18px, 1.25vw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  --beta-submit-arrow-y: 0em;
  cursor: pointer;
}

.beta-signup-form__submit[disabled]{
  opacity: 0.6;
  cursor: wait;
}

.beta-signup-form__submit-arrow{
  display: inline-block;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1;
  transform: translate3d(0, var(--beta-submit-arrow-y), 0);
  transition: transform 140ms ease;
}

@media (hover: hover), (any-hover: hover){
  .beta-signup-form__submit:hover .beta-signup-form__submit-arrow{
    transform: translate3d(6px, var(--beta-submit-arrow-y), 0);
  }
}

.beta-signup-form__submit:focus-visible .beta-signup-form__submit-arrow{
  transform: translate3d(6px, var(--beta-submit-arrow-y), 0);
}

.beta-signup-form__status{
  margin: 2px 0 0;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.35;
  max-width: 44ch;
}

.beta-signup-form__status--success{
  color: #000;
  font-weight:500;
}

.beta-signup-form__status--error{
  color: #000;
}

.beta-signup-honeypot{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 899px){
  .beta-signup-drawer__panel{
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .beta-signup-drawer__panel::before,
  .beta-signup-drawer__panel::after{
    content: none;
  }
}

/* =========================
   Footer drawer
   ========================= */
.footer-drawer{
  position: fixed;
  inset: 0;
  z-index: 91;
  pointer-events: none;
}

.footer-drawer[hidden]{
  display: none;
}

.footer-drawer.is-open{
  pointer-events: auto;
}

.footer-drawer__backdrop{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}

.footer-drawer__panel{
  position: absolute;
  top: var(--beta-drawer-top-gap);
  left: var(--footer-drawer-left-gap);
  bottom: 0;
  width: clamp(var(--beta-drawer-min), var(--beta-drawer-width), var(--beta-drawer-max));
  max-width: calc(100vw - var(--footer-drawer-left-gap));
  background: var(--paper);
  border: 3px solid #000;
  border-bottom: none;
  border-radius: 2px;
  transform: translate3d(0, 100%, 0);
  transition: transform 320ms cubic-bezier(.4, 0, .8, .2) 40ms;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  z-index: 1;
  overflow: visible;
  box-shadow: inset 0 0 0 1px #000,

  var(--paper) -11px -6px  0 -4px,
  #000          -11px -6px  0 0,

  var(--paper) -24px -14px 0 -4px,
  #000          -24px -14px 0 0,

  var(--paper) -41px -22px 0 -4px,
  #000          -41px -22px 0 0;
}

.footer-drawer.is-open .footer-drawer__panel{
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
  transform: translate3d(0, 0, 0);
}

.footer-drawer.is-closing .footer-drawer__panel{
  animation: footerDrawerClose 360ms cubic-bezier(.4, 0, .2, 1) both;
  transition: none;
}

@keyframes footerDrawerClose{
  0%{
    transform: translate3d(0, 0, 0);
  }
  46%{
    transform: translate3d(0, 54%, 0);
  }
  58%{
    transform: translate3d(0, 54%, 0);
  }
  100%{
    transform: translate3d(0, 100%, 0);
  }
}

.footer-drawer__close{
  position: absolute;
  top: 8px;
  right: 10px;
  width: var(--beta-drawer-close-size);
  min-width: var(--beta-drawer-close-size);
  height: var(--beta-drawer-close-size);
  min-height: var(--beta-drawer-close-size);
  border: none;
  background: none;
  color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 3rem;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.footer-drawer__close:focus-visible{
  outline: 2px solid transparent;
}

.footer-drawer__content{
  height: 100%;
  overflow-y: auto;
  padding: calc(var(--footer-drawer-pad) + 6px) var(--footer-drawer-pad) var(--footer-drawer-pad);
}

.legal-content{
  display: grid;
  gap: var(--legal-section-gap);
}

.legal-content__section{
  display: grid;
  gap: var(--meta-gap-tight);
}

.legal-content__section h2{
  margin: 0;
  font-size: clamp(28px, 2.2vw, 38px); 
  line-height: 1; 
  font-weight: 900;
}

.legal-content__section h3{
  margin: var(--meta-gap) 0 0;
  font-size: var(--label-font);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.legal-content__section p{
  margin: 0;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.55;
  max-width: 46ch;
}

.legal-content__section a{
  color: #000;
}

.legal-content__section p a,
.legal-content__section p .legal-content__email{
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline;
  color: #000;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  line-height: inherit;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.legal-content__section p a:focus-visible,
.legal-content__section p .legal-content__email:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent);
}

.legal-content__list{
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.55;
  max-width: 46ch;
}

.legal-content__list li{
  display: flex;
  gap: .5rem;
}

.legal-content__list li::before{
  content: "■";
  line-height: 1;
  transform: translateY(.2em);
}

#info,
#beta-privacy,
#beta-terms{
  scroll-margin-top: calc(var(--header-h) + 16px);
}

#drawer-info,
#drawer-beta-privacy,
#drawer-beta-terms{
  scroll-margin-top: clamp(18px, 2.4vw, 30px);
}

.info-page{
  padding: clamp(28px, 5vw, 64px) var(--frame-right) clamp(70px, 9vh, 120px) var(--frame-left);
}

.info-page__inner{
  width: min(100%, calc(var(--content-measure) + 280px));
}

@media (max-width: 899px){
  .footer-drawer__panel{
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .footer-drawer__content{
    padding: clamp(18px, 6vw, 24px);
  }

  .info-page{
    padding-top: clamp(18px, 5vw, 30px);
    padding-bottom: clamp(36px, 9vw, 62px);
  }

  .info-page__inner{
    width: var(--content-box-width);
  }
}

@media (prefers-reduced-motion: reduce){
  .beta-signup-drawer__backdrop,
  .beta-signup-drawer__panel,
  .footer-drawer__backdrop,
  .footer-drawer__panel{
    transition: none;
  }

  .footer-drawer.is-closing .footer-drawer__panel{
    animation: none;
  }
}

/* =========================
   HERO DOWN ARROW
   ========================= */
.hero-down{
  display: none;
}

@media (min-width: 935px){
  .hero-down{
    position: absolute;
    right: var(--arrow-right);
    bottom: var(--bottom-gutter);
    text-decoration: none;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--arrow-glyph-size);
    height: var(--arrow-glyph-size);
    border-radius: 2px;
  }

  .hero-down-glyph{
    display: inline-block;
    font-weight: var(--arrow-glyph-weight);
    font-size: var(--arrow-glyph-size);
    line-height: 0.78;
    transform: translate3d(0, 0, 0) translateY(var(--hero-arrow-rest-y));
    transition: transform 220ms var(--arrow-motion-ease);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
  }

  .hero-down:focus-visible{
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  .hero-down:focus-visible .hero-down-glyph{
    transform:
      translate3d(0, 0, 0)
      translateY(calc(var(--hero-arrow-rest-y) + var(--hero-arrow-hover-shift)))
      scale3d(1.06, 1.06, 1);
  }

  .hero-down:active .hero-down-glyph{
    transform:
      translate3d(0, 0, 0)
      translateY(calc(var(--hero-arrow-rest-y) + var(--hero-arrow-active-shift)))
      scale3d(0.98, 0.98, 1);
    transition-duration: 90ms;
  }
}

@media (min-width: 935px) and (hover: hover), (min-width: 935px) and (any-hover: hover){
  .hero-down:hover .hero-down-glyph{
    transform:
      translate3d(0, 0, 0)
      translateY(calc(var(--hero-arrow-rest-y) + var(--hero-arrow-hover-shift)))
      scale3d(1.06, 1.06, 1);
  }
}

@media (min-width: 935px){
  .hero-down.is-triggered .hero-down-glyph{
    transform:
      translate3d(0, 0, 0)
      translateY(calc(var(--hero-arrow-rest-y) + var(--hero-arrow-trigger-shift)))
      scale3d(var(--hero-arrow-trigger-scale), var(--hero-arrow-trigger-scale), 1);
    transition-duration: var(--arrow-trigger-ms);
  }
}

.section{
  max-width: var(--max);
  margin-left: 0;
  margin-right: auto;
  margin-top: var(--section-gap);
  padding-left: var(--frame-left);
  padding-right: var(--frame-right);
  padding-top: 0;
  padding-bottom: clamp(18px, 2.6vw, 44px);
  scroll-margin-top: var(--snap-offset);
}

#section-your-work.section{
  margin-top: var(--section-first-gap);
}

.section h2{
  margin: 0 0 1rem;
  font-weight: 900;
  font-size: clamp(42px, 5.1vw, 92px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section p{
  margin: 0 0 1.25rem;
  font-size: clamp(22px, 1.6vw, 26px);
  line-height: 1.55;
  max-width: var(--content-measure);
  width: min(100%, var(--content-measure));
  display: block;
}

strong {
  font-weight: 500;
}

.section-strong{
  list-style: none;
  padding: 0;
  font-weight: 700;
  font-size: clamp(22px, 1.6vw, 26px);
  margin: 0 0 .9rem;
}

.section-strong li{
  position: relative;
  padding-left: 1.1em;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

/* the square bullet */
.section-strong li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 0.55em;
  height: 0.55em;
  background: currentColor;
}

/* =========================
   In-content links: underline + marker sweep on hover
   ========================= */
.section a:not(.cta-row),
.ring-members .member-label{
  color: #000;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
  position: relative;
}

.section a:not(.cta-row)::after,
.ring-members .member-label::after{
  content:"";
  position:absolute;
  left: -0.25em;
  right: -0.25em;
  top: 60%;
  height: 1.5em;

  background: var(--accent);
  opacity: 0;
  z-index: -1;
  border-radius: 1px;

  transform-origin: left;
  transform: translateY(-52%) translateX(-8%) skewX(-22deg) scaleX(0.02) scaleY(0.86);
  transition: opacity 90ms ease;
}

/* Hover/focus: sweep + overshoot */
@media (hover: hover), (any-hover: hover){
  .section a:not(.cta-row):hover::after,
  .ring-members a:hover .member-label::after{
    opacity: 1;
    animation: markerSweepLink 320ms cubic-bezier(.12, 1.12, .22, 1) both;
  }
}

.section a:not(.cta-row):focus-visible,
.ring-members a:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}
.section a:not(.cta-row):focus-visible::after,
.ring-members a:focus-visible .member-label::after{
  opacity: 1;
  animation: markerSweepLink 320ms cubic-bezier(.12, 1.12, .22, 1) both;
}

/* Smaller / calmer than nav, but still punchy */
@keyframes markerSweepLink{
  0%   { transform: translateY(-52%) translateX(-8%) skewX(-22deg) scaleX(0.02) scaleY(0.86); }
  55%  { transform: translateY(-52%) translateX(-2%) skewX(-16deg) scaleX(1.05) scaleY(1.02); }
  100% { transform: translateY(-52%) translateX(0%) skewX(-12deg) scaleX(1) scaleY(1); }
}

/* =========================
   FAQ (native accordion)
   ========================= */

.faq{
  padding-top: 0;
}

#section-faq h2{
  font-weight: 700;
}

.faq-list{
  margin-top: clamp(14px, 2vw, 24px);
  display: grid;
  gap: clamp(12px, 1.4vw, 20px);
  width: var(--content-box-width);
}

/* Base box */
.faq-item{
  border: 3px solid #000;
  border-radius: 2px;
  background: #fff;

  transform: translate3d(0,0,0);
  box-shadow: none;

  transition:
    transform 180ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 180ms cubic-bezier(.16, 1, .3, 1);

  will-change: transform;
}

.faq-item[open]{
  box-shadow: 0 0 0 2px #000;
}

.faq-item summary{
  position: relative;
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  user-select: none;
  outline: none;
}

.faq-item summary::-webkit-details-marker{ display: none; }

/* Question */
.faq-q{
  font-weight: 700;
  font-size: clamp(28px, 2.1vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.006em;
}

/* Focus ring */
.faq-item summary:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Divider when OPEN */
.faq-item[open] summary{
  padding: 20px 18px 26px;
}

/* Icon */
.faq-icon{
  display: inline-block;
  font-weight: 700;
  font-size: 3em;
  line-height: 1;

  transform: translate3d(0,0,0);
  transform-origin: 50% 50%;

  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;

  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.faq-item[open] .faq-icon{
  transform: rotate(90deg);
}

/* Answer */
.faq-a{
  padding: 16px 18px 18px 18px;
  width: 100%;
  max-width: none;
}

.faq-a p{
  margin: 0;
  max-width: var(--content-measure);
  width: min(100%, var(--content-measure));
  display: block;
}

/* =========================
   FAQ hover + divider
   ========================= */

.faq-item[open] summary::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: #000;
  pointer-events: none;
}

@media (hover: hover), (any-hover: hover){
  /* Thicker border feel (no reflow) */
  .faq-item:hover{
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 0 0 2px #000;
  }

  /* Arrow: tiny rotate + nudge on hover */
  .faq-item:hover .faq-icon{
    transform: translate3d(2px, 0, 0) rotate(45deg);
  }

  /* Open + hover: keep the 90° */
  .faq-item[open]:hover .faq-icon{
    transform: rotate(135deg) translate3d(2px, 0, 0);
  }
}

/* =========================
   Latest page
   ========================= */
.latest-page{
  --latest-gap-x: clamp(54px, 6.1vw, 128px);
  --latest-gap-y: clamp(72px, 7.9vw, 156px);
  --latest-card-pad: clamp(14px, 1.8vw, 22px);
  --max-x: min(22px, calc(var(--latest-gap-x) * 0.2));
  --max-y: min(46px, calc(var(--latest-gap-y) * 0.3));

  max-width: none;
  margin: 0;
  padding: var(--section-first-gap) var(--grid-right) var(--section-gap) var(--frame-left);
}

.latest-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--latest-gap-x);
  row-gap: var(--latest-gap-y);
  align-items: start;
}

.latest-item{
  min-width: 0;
  --stagger-x: 0px;
  --stagger-x-aux: 0px;
  --stagger-y: 0px;
  --edge-x: 0px;
  --column-y: 0px;
}

.latest-card{
  display: grid;
  gap: var(--meta-gap);
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 3px solid #000;
  border-radius: 2px;
  padding: calc(var(--latest-card-pad) + var(--pad-bias, 0px));

  /* base motion pieces (robust cross-browser) */
  --hover-lift: 0px;
  transform: translate3d(
    calc(var(--edge-x, 0px) + var(--stagger-x, 0px) + var(--stagger-x-aux, 0px) + var(--collage-x, 0px) + var(--parallax-x, 0px)),
    calc(var(--column-y, 0px) + var(--stagger-y, 0px) + var(--collage-y, 0px) + var(--parallax-y, 0px) + var(--hover-lift)),
    0
  ) rotate(calc(var(--tilt, 0deg) + var(--micro-tilt, 0deg)));
  transform-origin: center;

  /* visuals */
  box-shadow: inset 0 0 0 1px #000;

  transition:
    transform 160ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 160ms ease;

  will-change: transform;
}

/* keyboard = same affordance as hover */
.latest-card:focus-visible{
  outline: 2px solid #000;
  outline-offset: 4px;
  --hover-lift: -14px;
  box-shadow: inset 0 0 0 1px #000, 0 12px 0 0 #000;
}

@media (hover: hover) and (pointer: fine){
  /* Collage offsets (safe, bounded) */
  .latest-item{ --stagger-x: 0px; --stagger-x-aux: 0px; --stagger-y: 0px; --edge-x: 0px; --column-y: 0px; }
  .latest-item:nth-child(4n + 1){
    --stagger-x: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * 0.6), var(--max-x));
  }
  .latest-item:nth-child(4n + 2){ --stagger-x: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * 0.9), var(--max-x)); }
  .latest-item:nth-child(4n + 3){ --stagger-x: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * -0.5), var(--max-x)); }
  .latest-item:nth-child(4n + 4){
    --stagger-x: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * -0.85), var(--max-x));
  }

  .latest-item:nth-child(11n + 2){ --stagger-x-aux: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * 0.16), var(--max-x)); }
  .latest-item:nth-child(11n + 5){ --stagger-x-aux: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * -0.22), var(--max-x)); }
  .latest-item:nth-child(11n + 8){ --stagger-x-aux: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * 0.12), var(--max-x)); }
  .latest-item:nth-child(11n + 10){ --stagger-x-aux: clamp(calc(var(--max-x) * -1), calc(var(--max-x) * -0.18), var(--max-x)); }

  .latest-item:nth-child(4n + 1){ --column-y: calc(var(--max-y) * -0.25); }
  .latest-item:nth-child(4n + 2){ --column-y: calc(var(--max-y) * 0.22); }
  .latest-item:nth-child(4n + 3){ --column-y: calc(var(--max-y) * -0.15); }
  .latest-item:nth-child(4n + 4){ --column-y: calc(var(--max-y) * 0.18); }

  .latest-item:nth-child(9n + 2){ --stagger-y: clamp(calc(var(--max-y) * -1), calc(var(--max-y) * 0.7), var(--max-y)); }
  .latest-item:nth-child(9n + 4){ --stagger-y: clamp(calc(var(--max-y) * -1), calc(var(--max-y) * -0.95), var(--max-y)); }
  .latest-item:nth-child(9n + 6){ --stagger-y: clamp(calc(var(--max-y) * -1), calc(var(--max-y) * 1), var(--max-y)); }
  .latest-item:nth-child(9n + 8){ --stagger-y: clamp(calc(var(--max-y) * -1), calc(var(--max-y) * -0.55), var(--max-y)); }

  .latest-item:nth-child(5n + 2) .latest-card{ --pad-bias: 2px; }
  .latest-item:nth-child(5n + 4) .latest-card{ --pad-bias: -1px; }

  .latest-item:nth-child(8n + 2) .latest-card{ --micro-tilt: 0.16deg; }
  .latest-item:nth-child(8n + 5) .latest-card{ --micro-tilt: -0.12deg; }
  .latest-item:nth-child(8n + 7) .latest-card{ --micro-tilt: 0.14deg; }

  .latest-card:hover{
    --hover-lift: -14px;
    box-shadow: inset 0 0 0 1px #000, 0 12px 0 0 #000;
  }

  /* tiny paper tilt (applies always on hover-capable devices; not only while hovering) */
  .latest-item:nth-child(9n + 1) .latest-card{ --tilt: -0.85deg; }
  .latest-item:nth-child(9n + 3) .latest-card{ --tilt:  0.60deg; }
  .latest-item:nth-child(9n + 5) .latest-card{ --tilt: -0.50deg; }
  .latest-item:nth-child(9n + 7) .latest-card{ --tilt:  0.85deg; }
}

@media (prefers-reduced-motion: reduce){
  .latest-card{
    transition: none;
  }
  .latest-card:focus-visible{
    --hover-lift: 0px;
    box-shadow: inset 0 0 0 1px #000, 0 12px 0 0 #000;
  }
  @media (hover: hover) and (pointer: fine){
    .latest-card:hover{
      --hover-lift: 0px;
      box-shadow: inset 0 0 0 1px #000, 0 12px 0 0 #000;
    }
  }
}

.latest-media{
  width: 100%;
}

.latest-media-box{
  aspect-ratio: var(--ar);
  width: 100%;
  background: #fff;
  display: grid;
  place-items: center;
}

.latest-media-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.latest-meta{
  display: grid;
  gap: var(--meta-gap);
}

.latest-title{
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.latest-artist{
  font-weight: 900;
  font-size: var(--label-font);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
}

/* keep titles from making cards wildly uneven */
.latest-title,
.latest-artist{
  overflow-wrap: anywhere;
}

/* Breakpoints */
@media (max-width: 1100px){
  .latest-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .latest-grid{ grid-template-columns: 1fr; }
  .latest-title{
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.015em;
}
}

/* =========================
   Webrings page
   ========================= */

.webrings-page{
  --webrings-gap-x: clamp(52px, 6vw, 118px);
  --webrings-gap-y: clamp(20px, 2.6vw, 48px);
  --webrings-card-pad: clamp(14px, 1.8vw, 22px);
  --webrings-meta-gap: 6px;

  /* stack controls */
  --stack-step-base: clamp(6px, 0.7vw, 12px);
  --stack-step-hover-mult: 1.4;
  --stack-step-reserve: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
  --stack-step: var(--stack-step-base);
  --stack-n: 6;                 /* depth */
  --stack-lift: 10px;           /* hover lift */
  --stack-edge: 2px;            /* right/bottom edge on hover/focus */
  --webrings-stack-split-max: clamp(0.8px, 0.16vw, 2.2px);
  --webrings-kick-max: clamp(1.6px, 0.32vw, 4.4px);
  --webrings-overhang-depth: calc(var(--stack-n) * 0.6);
  --webrings-pad-left-bias: clamp(12px, 1.4vw, 28px);
  --webrings-pad-right-trim: clamp(12px, 1.1vw, 24px);
  --webrings-overhang: calc(
    var(--stack-step-reserve) * var(--stack-n)
    + var(--stack-edge)
    + (var(--webrings-stack-split-max) + var(--webrings-kick-max)) * var(--webrings-overhang-depth)
  );

  max-width: none;
  margin: 0;
  padding:
    var(--section-first-gap)
    max(var(--grid-right), calc(var(--grid-right) + var(--webrings-overhang) - var(--webrings-pad-right-trim)))
    var(--section-gap)
    calc(var(--frame-left) + var(--webrings-pad-left-bias));
}

/* Grid */
.webrings-grid{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--webrings-gap-x);
  row-gap: var(--webrings-gap-y);
  align-items: start;
}

.webring-item{
  min-width: 0;

  --sx: 1;      /* +1 => stack goes right */
  --sy: 0.55;   /* positive => stack goes down */
  --tilt: 0deg;
}

/* Card */
.webring-card{
  display: grid;
  gap: var(--webrings-meta-gap);

  justify-items: start;
  text-align: left;

  background: transparent;
  padding: var(--webrings-card-pad);

  text-decoration: none;
  color: inherit;
}

.webring-card:focus-visible{
  outline: 2px solid #000;
  outline-offset: 4px;
}

/* Meta */
.webring-meta{
  display: grid;
  row-gap: var(--meta-gap-tight);
  justify-items: start;
  text-align: left;
}

.webring-title{
  margin: 0; 
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.webring-desc{
  margin: 0;
  font-weight: 900;
  font-size: clamp(14px, 1.05vw, 18px);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
  max-width: 34ch;
  margin-top: var(--meta-gap);
}

.webring-stats{
  margin: 0;
  font-weight: 400;
  font-size: var(--label-font);
}

/* =========================
   Webring detail page
   ========================= */

.webring-detail{
  --detail-gap: clamp(12px, 2.1vw, 18px);
  /* Stack system (same pattern as landing) */
  --stack-step-base: clamp(10px, 1.05vw, 18px); /* bigger than landing, since hero is bigger */
  --stack-step-hover-mult: 1.2;
  --stack-step-reserve: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
  --stack-step: var(--stack-step-base);

  --stack-n: 6;            /* IMPORTANT: this matches the 6 shadow layers below */
  --stack-lift: 14px;
  --stack-edge: 3px;

  /* Splay direction */
  --sx: 0.9;
  --sy: 0.6;

  /* default tilt (hover sets it) */
  --tilt: 0deg;

  /* Hero sizing */
  --hero-max: clamp(520px, 44vw, 690px);
  --hero-vh-cap: 58vh;

  max-width: var(--max);
  margin: 0;
  padding: var(--section-first-gap) var(--grid-right) var(--section-gap) var(--frame-left);
}

.webring-detail__hero{
  display: grid;
  gap: 1px;
  margin-top: var(--detail-gap);
  width: 100%;
  max-width: var(--hero-max);
}

.webring-detail__hero:focus-visible{
  outline: none;
}

/* Controls row (prev/next) */
.ring-window__controls{
  --ring-controls-inset-x: 12px;
  --ring-controls-inset-bottom: 12px;
  position: absolute;
  inset: auto var(--ring-controls-inset-x) var(--ring-controls-inset-bottom) var(--ring-controls-inset-x);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  z-index: 5;
  pointer-events: auto;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear;
}

.ring-window__btn{
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #000;
  font-family: "Apfel Grotezk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 6vw, 56px);
  line-height: .9;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  touch-action: manipulation;
  transition: transform 140ms ease, opacity 140ms ease;
}

.ring-window__btn[data-ring-next]{
  justify-content: flex-end;
}

/* Desktop: show controls only on hover/focus within the slider */
@media (hover:hover) and (pointer:fine){
  .ring-window--hero .ring-window__controls{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 4px, 0);
    pointer-events: none;
    transition-delay: 0s, 0s, 140ms;
  }

  .ring-window--hero:hover .ring-window__controls,
  .ring-window--hero:focus-within .ring-window__controls{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }
}

/* Directional nudge only on desktop hover */
@media (min-width: 861px) and (hover:hover) and (pointer:fine){
  .ring-window__btn[data-ring-prev]:hover{
    transform: translate3d(-4px, 0, 0);
  }

  .ring-window__btn[data-ring-next]:hover{
    transform: translate3d(4px, 0, 0);
  }
}

.ring-window__btn:focus-visible{
  outline: none;
  background: var(--accent);
}

.webring-detail__header{
  display: grid;
  row-gap: var(--meta-gap-tight);
  max-width: var(--max);
  margin-top: var(--meta-gap-tight);
}

.webring-detail__title{
  margin: 0;
  font-weight: 400;
  font-size: clamp(34px, 3.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.webring-surf-links{
  display: inline-flex;
  flex-wrap: nowrap;
  gap: clamp(8px, 1.2vw, 14px);
  margin: var(--meta-gap) 0 0;
  align-items: baseline;
  letter-spacing: .02em;
}

.webring-surf-links a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
}

.webring-surf-label{
  text-transform:uppercase;
  font-weight: 700;
}

.webring-surf-arrow{
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  transition: transform 140ms ease;
}

.webring-surf-prefix{
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.webring-surf-sep{
  font-size: 1.1em;
}

.webring-surf-links a:hover .webring-surf-arrow,
.webring-surf-links a:focus-visible .webring-surf-arrow{
  transform: translate3d(4px, 0, 0);
}

.webring-surf-links a:focus-visible{
  outline: 2px solid #000;
  outline-offset: 3px;
}

.webring-detail__desc{
  margin: 0;
  font-weight: 900;
  font-size: var(--label-font);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: .02em;
  margin-top: var(--meta-gap);
}

/* =========================
   Hero “browser window” stack
   ========================= */

.ring-window--hero{
  /* toggled on hover/focus */
  --lift: 0px;
  --edge: 0px;
  --snap-shift-x: 0px;
  --stack-split-x: 0px;
  --stack-split-y: 0px;
  --stack-skew-x: 0px;
  --stack-skew-y: 0px;

  position: relative;
  width: 100%;
  max-width: var(--hero-max);
  aspect-ratio: 16 / 10;
  height: auto;
  max-height: var(--hero-vh-cap);

  border: 3px solid #000;
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;

  /* reserve space so stack never collides with arrows/title */
  margin-bottom: calc(var(--stack-step-reserve) * var(--stack-n) + var(--stack-edge));

  transform: translate3d(var(--snap-shift-x), var(--lift), 0) rotate(var(--tilt));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1), box-shadow 160ms ease;
  will-change: transform;

  box-shadow:
    /* black slab layers (6) — with split/skew like landing */
    calc(var(--stack-step) * 1 * var(--sx) + var(--stack-split-x) * 1 + var(--stack-skew-x) * 1)
    calc(var(--stack-step) * 1 * var(--sy) + var(--stack-split-y) * 1 + var(--stack-skew-y) * 1) 0 0 #000,

    calc(var(--stack-step) * 2 * var(--sx) + var(--stack-split-x) * 2 + var(--stack-skew-x) * -1)
    calc(var(--stack-step) * 2 * var(--sy) + var(--stack-split-y) * 2 + var(--stack-skew-y) *  1) 0 0 #000,

    calc(var(--stack-step) * 3 * var(--sx) + var(--stack-split-x) * 3 + var(--stack-skew-x) *  1)
    calc(var(--stack-step) * 3 * var(--sy) + var(--stack-split-y) * 3 + var(--stack-skew-y) * -1) 0 0 #000,

    calc(var(--stack-step) * 4 * var(--sx) + var(--stack-split-x) * 4 + var(--stack-skew-x) * -1)
    calc(var(--stack-step) * 4 * var(--sy) + var(--stack-split-y) * 4 + var(--stack-skew-y) *  1) 0 0 #000,

    calc(var(--stack-step) * 5 * var(--sx) + var(--stack-split-x) * 5 + var(--stack-skew-x) *  1)
    calc(var(--stack-step) * 5 * var(--sy) + var(--stack-split-y) * 5 + var(--stack-skew-y) *  1) 0 0 #000,

    calc(var(--stack-step) * 6 * var(--sx) + var(--stack-split-x) * 6 + var(--stack-skew-x) * -1)
    calc(var(--stack-step) * 6 * var(--sy) + var(--stack-split-y) * 6 + var(--stack-skew-y) * -1) 0 0 #000,

    /* “depth edge” only on hover/focus */
    var(--edge) 0 0 0 #000,
    0 var(--edge) 0 0 #000;
}

.ring-window--hero.is-snap-prev{
  --snap-shift-x: -5px;
  --stack-step: calc(var(--stack-step-base) * 1.08);
  --edge: calc(var(--stack-edge) + 1px);
  --tilt: 0deg;
}

.ring-window--hero.is-snap-next{
  --snap-shift-x: 5px;
  --stack-step: calc(var(--stack-step-base) * 1.08);
  --edge: calc(var(--stack-edge) + 1px);
  --tilt: 0deg;
}

/* Hover only when the WINDOW is hovered */
@media (hover:hover) and (pointer:fine){
  .ring-window--hero:hover{
    --lift: calc(var(--stack-lift) * -1);
    --edge: var(--stack-edge);

    /* optional jagginess (same as before) */
    --stack-split-x: clamp(-1px, -0.08vw, -2px);
    --stack-split-y: clamp( 1px,  0.08vw,  2px);
    --stack-skew-x:  clamp( 1px,  0.08vw,  2px);
    --stack-skew-y:  clamp(-1px, -0.08vw, -2px);
  }

  /* spread/tilt comes from the wrapper, but is triggered by window hover */
  .webring-detail__hero:has(.ring-window--hero:hover){
    --stack-step: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
    --tilt: -0.6deg;
  }
}

/* Keyboard: if focus is inside the window (e.g. link/image), match hover */
.webring-detail__hero:has(.ring-window--hero:focus-within){
  --stack-step: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
  --tilt: -0.3deg;
}
.ring-window--hero:focus-within{
  --lift: calc(var(--stack-lift) * -1);
  --edge: var(--stack-edge);
}

/* Reduced motion: no lift/spread */
@media (prefers-reduced-motion: reduce){
  .webring-detail__hero:has(.ring-window--hero:hover),
  .webring-detail__hero:has(.ring-window--hero:focus-within){
    --stack-step: var(--stack-step-base);
    --tilt: 0deg;
  }
  .ring-window--hero:hover,
  .ring-window--hero:focus-within{
    --lift: 0px;
  }
}

/* =========================
   Slider internals
   ========================= */

.ring-window__viewport{
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
}

.ring-window__track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 205ms cubic-bezier(.22, .8, .2, 1);
  will-change: transform;
}

.ring-window__slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  position: relative;
}

.ring-window__domain{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 3px 8px;
  border: 2px solid #000;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px #000;
  border-radius: 2px;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .02em;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear;
}

@media (hover:hover) and (pointer:fine){
  .ring-window--hero .ring-window__domain{
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, -2px, 0);
    transition-delay: 0s, 0s, 140ms;
  }

  .ring-window--hero:hover .ring-window__domain,
  .ring-window--hero:focus-within .ring-window__domain{
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition-delay: 0s, 0s, 0s;
  }
}

.ring-window__slide:focus-visible{
  outline: 2px solid #000;
  outline-offset: -2px;
}

.ring-window__slide .ring-window__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
  display: block;
  transition: transform 205ms cubic-bezier(.22, .8, .2, 1);
}

[data-ring-slider].is-slide-next .ring-window__slide .ring-window__img{
  transform: translate3d(-1.2%, 0, 0);
}

[data-ring-slider].is-slide-prev .ring-window__slide .ring-window__img{
  transform: translate3d(1.2%, 0, 0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ring-window--hero{ transition: none; }
  .ring-window__track{ transition: none; }
}

/* =========================
   Browser window
   ========================= */

.ring-window{
  /* toggled on hover/focus */
  --lift: 0px;
  --edge: 0px;
  --stack-split-x: 0px;
  --stack-split-y: 0px;
  --stack-skew-x: 0px;
  --stack-skew-y: 0px;

  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;

  border: 3px solid #000;
  border-radius: 2px;
  background: var(--paper);
  overflow: hidden;

  /* reserve space so the stack never collides with title/desc */
  margin-bottom: calc(var(--stack-step-reserve) * var(--stack-n) + var(--stack-edge));

  transform: translate3d(0, var(--lift), 0) rotate(var(--tilt));
  transform-origin: 50% 50%;
  transition: transform 160ms cubic-bezier(.16, 1, .3, 1), box-shadow 160ms ease;
  will-change: transform;

  box-shadow:
    /* black slab layers */
    calc(var(--stack-step) * 1 * var(--sx) + var(--stack-split-x, 0px) * 1 + var(--stack-skew-x, 0px) * 1) calc(var(--stack-step) * 1 * var(--sy) + var(--stack-split-y, 0px) * 1 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 2 * var(--sx) + var(--stack-split-x, 0px) * 2 + var(--stack-skew-x, 0px) * -1) calc(var(--stack-step) * 2 * var(--sy) + var(--stack-split-y, 0px) * 2 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 3 * var(--sx) + var(--stack-split-x, 0px) * 3 + var(--stack-skew-x, 0px) * 1) calc(var(--stack-step) * 3 * var(--sy) + var(--stack-split-y, 0px) * 3 + var(--stack-skew-y, 0px) * -1) 0 0 #000,
    calc(var(--stack-step) * 4 * var(--sx) + var(--stack-split-x, 0px) * 4 + var(--stack-skew-x, 0px) * -1) calc(var(--stack-step) * 4 * var(--sy) + var(--stack-split-y, 0px) * 4 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 5 * var(--sx) + var(--stack-split-x, 0px) * 5 + var(--stack-skew-x, 0px) * 1) calc(var(--stack-step) * 5 * var(--sy) + var(--stack-split-y, 0px) * 5 + var(--stack-skew-y, 0px) * 1) 0 0 #000,
    calc(var(--stack-step) * 6 * var(--sx) + var(--stack-split-x, 0px) * 6 + var(--stack-skew-x, 0px) * -1) calc(var(--stack-step) * 6 * var(--sy) + var(--stack-split-y, 0px) * 6 + var(--stack-skew-y, 0px) * -1) 0 0 #000,

    /* “depth edge” only on hover/focus */
    var(--edge) 0 0 0 #000,
    0 var(--edge) 0 0 #000;
}

.ring-window .ring-shot{
  position: absolute;
  inset: 0;
  z-index: 0; /* under the UI chrome */
  overflow: hidden;
  background: var(--paper);
}

.ring-window .ring-shot img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--paper);
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Hover/focus: lift only the top window + show edge */
@media (hover:hover) and (pointer:fine){
  .webring-card:hover{
    --stack-step: calc(var(--stack-step-base) * var(--stack-step-hover-mult));
    --tilt: -0.6deg;
  }
  .webring-card:hover .ring-window{
    --lift: calc(var(--stack-lift) * -1);
    --edge: var(--stack-edge);
  }
}

.webring-card:focus-visible .ring-window{
  --lift: calc(var(--stack-lift) * -1);
  --edge: var(--stack-edge);
}

@media (prefers-reduced-motion: reduce){
  .ring-window{ transition: none; }
  @media (hover:hover) and (pointer:fine){
    .webring-card:hover .ring-window{ --lift: 0px; }
  }
  .webring-card:focus-visible .ring-window{ --lift: 0px; }
}

@media (max-width:1600px){
  .webrings-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:720px){
  .webrings-page{
    --webrings-pad-left-bias: 0px;
    --webrings-mobile-overhang: clamp(20px, 6vw, 30px);
    padding:
      var(--section-first-gap)
      calc(var(--frame-right) + var(--webrings-mobile-overhang))
      var(--section-gap)
      var(--frame-left);
  }
  .webrings-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .webring-title{
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.015em;
  }
   :root{
    --meta-gap: clamp(14px, 4vw, 22px);
  }
}
@media (max-width:520px){
  .webrings-grid{ grid-template-columns: 1fr; }
  .webring-detail__header{
  margin-top: var(--meta-gap);
}
}

/* =========================
   Webring detail: members list
   ========================= */

.ring-members{
  width: 100%;
  margin-top: clamp(28px, 5vw, 52px);
  list-style: none;
  padding: 0;
  margin-left: 0;
  column-width: 160px; 
  column-count: 4;
  column-gap: clamp(24px, 3vw, 60px);
  column-fill: balance;
}

.ring-members li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0 0 clamp(10px, 1.15vw, 16px);
}

.ring-members .member,
.ring-members .member:visited,
.ring-members .member:hover,
.ring-members .member:focus-visible{
  color: #000;
  text-decoration: none;
}

.ring-members .member-bullet{
  font-size: 1.1em;
  line-height: 1;
  color: #000;
  flex: 0 0 auto;
}

/* =========================
   Footer panel (centered object)
   ========================= */
.site-footer{
  position: relative;
  --footer-pad-left: var(--frame-left);
  --footer-pad-right: var(--frame-right);
  padding-left: var(--footer-pad-left);
  padding-right: var(--footer-pad-right);
  padding-bottom: var(--footer-reserve-bottom);
  padding-top: clamp(36px, 6vh, 96px);
}

.footer-panel{
  margin-bottom: min(0px, calc(var(--to-top-align-bottom) - var(--footer-reserve-bottom)));
  margin-left: auto;
  margin-right: auto;
  max-width: var(--footer-panel-max);
  width: 100%;
  border: 3px solid #000;
  border-radius: 2px;
  background: #fff;
  min-height: clamp(88px, 9vh, 120px);
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: inset 0 0 0 1px #000;
  display: grid;
  align-items: center;
}

.footer-colophon{
  position: absolute;
  left: var(--frame-left);
  bottom: calc(var(--footer-colophon-bottom) + var(--safe-bottom));
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: var(--footer-colophon-size);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000;
}

.footer-links{
  display: grid;
  align-items: center;
  grid-template-columns:
    max-content
    repeat(3, max-content)
    max-content;
  justify-content: space-between;
  justify-items: center;
  gap: clamp(12px, 1.8vw, 22px);
  width: 100%;
}

.footer-link-item{
  justify-self: center;
}

.footer-home{
  display: none;
}

.footer-email{
  justify-self: end;
  text-align: right;
}

.footer-link{
  display: inline-block;
  justify-self: center;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  white-space: nowrap;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.025em;
  line-height: 1;
  position: relative;
  z-index: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.footer-link:focus-visible{
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--accent);
}

@media (min-width: 861px){
  .footer-home{
    justify-self: start;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .footer-home-btn{
    width: clamp(42px, 3vw, 54px);
    height: clamp(42px, 3vw, 54px);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: background 140ms ease;
  }

  .footer-home-btn img{
    width: 112%;
    height: 112%;
    display: block;
  }

  .footer-home:focus-visible{
    outline: 2px solid #000;
    outline-offset: 4px;
  }
}

@media (min-width: 861px) and (hover: hover), (min-width: 861px) and (any-hover: hover){
  .footer-home:hover .footer-home-btn{
    background: var(--accent);
  }
}

/* =========================
   Footer mobile (left-aligned)
   ========================= */

.footer-brand{ display: none; }

.footer-wordmark{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 860px){

  .site-footer{
    --footer-pad-left: var(--frame-left);
    --footer-pad-right: var(--frame-right);
    padding-top: clamp(18px, 5vw, 24px);
    padding-bottom: clamp(18px, 5vw, 24px);
  }

  .footer-brand{
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  .footer-panel{
    padding: clamp(14px, 4.2vw, 18px);
    min-height: 0;
    width: var(--content-box-width);
    max-width: var(--content-box-width);
    margin-left: 0;
    margin-right: auto;
  }

  .footer-colophon{
    position: static;
    margin-top: var(--footer-colophon-gap);
  }

  .footer-links{
    grid-template-columns: 1fr;
    justify-content: start;
    justify-items: start;
    row-gap: 16px;
    column-gap: 0;
    text-align: left;
  }

  .footer-link-item{
    justify-self: start;
  }

  .footer-link{
    padding: 4px 6px;
    margin: -4px -6px;
  }

  .footer-email{
    grid-column: auto;
    justify-self: start;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .footer-wordmark{
    width: min(100%, 360px);
    max-width: 100%;
    height: auto;
    max-height: clamp(42px, 13vw, 64px);
  }
}

/* =========================
   Scroll to top
   ========================= */
.to-top {
  display: none;
}

@keyframes toTopGlyphIn{
  from { opacity: 0; transform: translate3d(0, 12px, 0) translateY(-0.06em); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)  translateY(-0.06em); }
}

@media (min-width: 935px){
  .to-top {
    position: fixed;
    right: var(--arrow-right);
    bottom: var(--to-top-bottom-safe);
    z-index: 89;
    width: var(--arrow-glyph-size);
    height: var(--arrow-glyph-size);
    border: 0;
    background: transparent;
    color: #000;
    -webkit-appearance: none;
    appearance: none;
    font-family: "Apfel Grotezk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: var(--arrow-glyph-weight);
    font-size: var(--arrow-glyph-size);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;

    /* hover easing lives here */
    transform: translate3d(0, 0, 0);
    transition: transform 220ms var(--arrow-motion-ease), opacity 0ms linear 180ms;

    /* Safari stability */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: transform;
  }

  /* The glyph handles the “appear” motion */
  .to-top__glyph{
    display: inline-block;
    opacity: 0;

    /* Make the “↑” ink feel bigger */
    line-height: 0.78;
    transform: translate3d(0, 12px, 0) translateY(-0.06em);

    /* Safari stability */
    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  /* Visible state */
  .to-top.is-visible{
    opacity: 1;
    pointer-events: auto;
    transition: transform 220ms var(--arrow-motion-ease), opacity 0ms linear 0ms;
  }

  body.drawer-open .to-top.is-visible{
    pointer-events: none;
  }

  .to-top.is-visible .to-top__glyph{
    animation: toTopGlyphIn 180ms cubic-bezier(.16, 1, .3, 1) both;
  }

  /* Focus */
  .to-top:focus-visible{
    outline: 2px solid #000;
    outline-offset: 2px;
  }

  .to-top.is-visible:focus-visible{
    transform: translate3d(0, var(--to-top-lift-y), 0) scale3d(var(--to-top-lift-scale), var(--to-top-lift-scale), 1);
  }

  .latest-page-body .to-top,
  .webrings-page-body .to-top,
  .webring-detail-body .to-top{
    position: absolute;
    right: var(--arrow-right);
    bottom: var(--to-top-bottom-safe);
  }
}

@media (min-width: 935px) and (hover: hover), (min-width: 935px) and (any-hover: hover){
  .to-top.is-visible:hover{
    transform: translate3d(0, var(--to-top-lift-y), 0) scale3d(var(--to-top-lift-scale), var(--to-top-lift-scale), 1);
  }
}

@media (min-width: 935px){
  .to-top.is-visible.is-triggered{
    transform: translate3d(0, var(--to-top-trigger-y), 0) scale3d(var(--to-top-trigger-scale), var(--to-top-trigger-scale), 1);
    transition-duration: var(--arrow-trigger-ms);
  }
}

@media (max-width: 899px){

  .section h2{
    font-weight: 900;
    font-size: clamp(46px, 9.6vw, 68px);
    line-height: 0.96;
    text-wrap: balance;
    letter-spacing: -0.01em;
  }

  :root{
    --content-measure: clamp(22rem, 92vw, 30rem);
    --section-gap: clamp(32px, 6.5vw, 80px);
  }

  .section p{
    font-size: clamp(18px, 4.2vw, 22px);
    line-height: 1.45;
  }

  .section-strong li {
     font-size: clamp(18px, 4.2vw, 22px);
   }

  .faq-q{ line-height: 1.1;}

  .webring-detail{
    /* match /webrings/ stack geometry on phones so edge clearance is consistent */
    --stack-step-base: clamp(6px, 0.7vw, 12px);
    --stack-step-hover-mult: 1.4;
    --stack-edge: 2px;
    --sx: 1;
    --sy: 0.55;
    --webring-mobile-overhang: clamp(20px, 6vw, 30px);
    /* match /webrings/ mobile side spacing so hero widths stay consistent */
    padding-left: var(--frame-left);
    padding-right: calc(var(--frame-right) + var(--webring-mobile-overhang));
  }

  .webring-detail__hero{
    --webring-hero-mobile-inset: clamp(14px, 1.8vw, 22px);
    padding-left: var(--webring-hero-mobile-inset);
    padding-right: var(--webring-hero-mobile-inset);
  }

  .ring-window--hero{
    /* tighten distance to controls on mobile while keeping stack depth visible */
    margin-bottom: calc((var(--stack-step-reserve) * var(--stack-n) * 0.65) + var(--stack-edge));
  }

  .ring-window__controls{
    --ring-controls-inset-x: 10px;
    --ring-controls-inset-bottom: 2px;
  }

/* =========================
   Hero (mobile overrides)
   Kill the forced full-screen hero on small screens
   ========================= */
  .hero{
    min-height: auto; /* stop forcing 100vh */
  }

  .hero-grid{
    min-height: auto;
    grid-template-columns: 1fr;
    column-gap: 0;
    padding:  0 var(--frame-right) clamp(24px, 6vh, 48px) var(--frame-left);
  }

  .hero-title{
    font-size: clamp(56px, 14vw, 84px);
    line-height: 1.02;
  }

  .hero-subtitle{
    font-size: clamp(22px, 4.8vw, 28px);
    max-width: 30ch;
    line-height: 1.3;
  }
}
/* Mobile: undo the <br> line breaks */
@media (max-width: 520px){
  .hero-title br{
    display: none;
  }
  /* add spacing where the <br> used to be */
  .hero-title br::after{
    content: " ";
  }
  .hero-title{
    text-wrap: balance;
    letter-spacing: -0.02em;
  }
  .legal-content__section p{
  line-height: 1.45;
}
  main > :last-child{
    padding-bottom: clamp(28px, 7vh, 72px);
  }
}

/* =========================
   Index page
   ========================= */
.index-page{
  --index-az-font: clamp(19px, 1.75vw, 28px);
  --index-sticky-pad: clamp(12px, 2.1vw, 18px);
  --index-column-gap: clamp(24px, 3vw, 60px);
  --index-entry-gap: clamp(18px, 2.4vw, 36px);
  --index-scroll-gap: clamp(8px, 1vw, 10px);
  --index-scroll-offset: calc(
    var(--index-sticky-h, calc(var(--index-sticky-pad) * 2 + var(--index-az-font) + 56px)) + var(--index-scroll-gap)
  );

  max-width: none;
  margin: 0;
 /* padding-top: var(--section-first-gap);*/
}

.index-sticky{
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--paper);
  padding: var(--index-sticky-pad) var(--grid-right) var(--index-sticky-pad) var(--frame-left);
}

.index-sticky-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
}

.index-sticky-top{
  display: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform var(--index-arrow-trigger-ms) var(--arrow-motion-ease);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.index-sticky-top:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

.index-az-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: clamp(2px, 0.35vw, 8px);
  row-gap: clamp(10px, 1.2vw, 14px);
  font-size: var(--index-az-font);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-az-link,
.index-az-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  margin: 0 -2px;
  color: inherit;
}

.index-az-link{
  font-weight: 900;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.index-az-top{
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  margin-left: .6em;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform var(--index-arrow-trigger-ms) var(--arrow-motion-ease);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.index-sticky-top.is-triggered,
.index-az-top.is-triggered{
  transform: translate3d(0, var(--index-arrow-trigger-shift), 0) scale3d(var(--index-arrow-trigger-scale), var(--index-arrow-trigger-scale), 1);
}

.index-az-link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}

.index-az-item.is-disabled{
  font-weight: 400;
  text-decoration: none;
}

/* A–Z hover */
@media (hover:hover) and (pointer:fine){
  .index-az-link{
    position: relative;
    border-radius: 2px;
    transition: background-color 120ms ease, transform 120ms ease;
  }

  .index-az-link:hover{
    background: var(--accent);
    transform: translate3d(0, -2px, 0); 
  }
}

/* Keep disabled letters dead */
.index-az-item.is-disabled{
  background: transparent;
}

/* Keyboard focus should be obvious */
.index-az-link:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
  background: var(--accent);
}

.index-cta{
  justify-self: end;
  margin-top: 0;
}

.index-letter{
  scroll-margin-top: var(--index-scroll-offset);
  max-width: none;
  width: 100%;
  margin-right: 0;
  padding-right: var(--grid-right);
}

.index-letter .section-label{
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}

.index-letter .section-label::before{
  content: none;
}

.index-letter .section-label::after{
  content:"";
  flex: 1;
  height: 8px;
  background: currentColor;
  opacity: 1;
}

.index-page > .index-letter.section:first-of-type{ margin-top: clamp(12px, 1.6vw, 24px); }
.index-letter.section{ margin-top: clamp(22px, 3vw, 56px); }

.index-columns {
  display: block;
  width: 100%;
  column-width: 260px;
  column-gap: var(--index-column-gap);
  column-fill: balance;
  margin-top: clamp(12px, 2vw, 22px);
}

.index-entry {
  display: inline-block; /* Keep this for Safari */
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 var(--index-entry-gap) 0;
  vertical-align: top; 
}

.index-letter .section-label h2{
  margin: 0;
}

.index-letter .index-tagline{
  margin: 0 0 0.55rem;
  font-size: clamp(16.5px, 1.1vw, 20px);
  line-height: 1.35;
}

.index-entry > a{
  font-size: clamp(16.5px, 1.1vw, 20px);
  display: inline-block;
  margin: 0 0 0.7rem; 
}

.index-webrings{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: clamp(16.5px, 1.1vw, 20px);
  line-height: 1.3;
  font-weight: 400;
  padding-top: 0.2rem;
}

.index-letter .index-webrings a:not(.cta-row){
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
}

.index-letter .index-webrings a:not(.cta-row)::after{
  content: none;
}

.index-webring-arrow{
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  transition: transform 140ms ease;
}

.index-webring-link:hover .index-webring-arrow,
.index-webring-link:focus-visible .index-webring-arrow{
  transform: translate3d(4px, 0, 0);
}

.index-end{
  margin: clamp(20px, 4vh, 60px) 0 0;
  padding: 0 var(--grid-right) clamp(32px, 10vh, 120px) var(--frame-left);
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: .1em;
  font-weight: 900;
  text-transform: uppercase;
}

@media (min-width: 935px){
.index-page-body .to-top{
    position: absolute;
    right: var(--arrow-right);
    bottom: var(--to-top-bottom-safe);
  }
}

@media (prefers-reduced-motion: reduce){
  .index-sticky-top,
  .index-az-top{
    transition: none;
  }

  .index-sticky-top.is-triggered,
  .index-az-top.is-triggered{
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@media (max-width: 1100px){
  .index-columns{ column-width: 220px; }
}

@media (max-width: 720px){
  .index-page{
    --index-scroll-offset: calc(
      var(--index-sticky-h, calc(var(--index-sticky-pad) * 2 + var(--index-az-font) * 2 + 88px)) + var(--index-scroll-gap)
    );
  }

  .index-az{
    display: none;
  }

  .index-sticky-top{
    display: none;
    grid-column: 1;
    justify-self: start;
    font-size: 1.8em;
  }

  .index-sticky.is-stuck .index-sticky-top{
    display: inline-flex;
  }

  .index-sticky-inner{
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: normal;
  }

  .index-cta{
    grid-column: 3;
    justify-self: end;
  }

  .index-entry{
    padding-bottom: clamp(14px, 3vw, 22px);
    margin-bottom: clamp(18px, 4vw, 30px);
  }
}