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

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

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

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

:root {
  --max: 68rem;
  --pad: 1.25rem;
  --border: 3px 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(0.16, 1, 0.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;
  --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);
  --webring-description-gap: clamp(0.45rem, 1vw, 0.85rem);

  --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-measure: clamp(28rem, 50vw, 42rem);
  --content-box-width: min(100%, calc(var(--content-measure) + 36px + 6px));
  --section-copy-size: clamp(22px, 1.6vw, 26px);

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

  --drawer-panel-width: 40vw;
  --drawer-panel-min: 360px;
  --drawer-panel-max: 640px;
  --drawer-panel-pad: clamp(20px, 2.8vw, 36px);
  --drawer-form-top-gap: clamp(16px, 1.6vw, 24px);
  --drawer-form-field-gap: clamp(10px, 1.1vw, 16px);
  --drawer-close-size: 44px;
  --drawer-top-gap: 90px;
  --drawer-textarea-min-h: 80px;
  --drawer-stack-max-x: 41px;
  --drawer-side-gap: clamp(
    190px,
    calc(var(--arrow-right) + (var(--arrow-glyph-size) * 0.85) + 40px + var(--drawer-stack-max-x) + 14px),
    320px
  );
  --footer-drawer-left-gap: var(--drawer-side-gap);
  --footer-drawer-pad: clamp(20px, 2.4vw, 34px);
  --list-drawer-width: 26vw;
  --list-drawer-min: 300px;
  --list-drawer-max: 420px;
  --list-drawer-pad: clamp(20px, 2.6vw, 34px);
  --list-mobile-saved-lane: clamp(136px, 37vw, 176px);
  --list-mobile-saved-gap: 14px;
  --list-mobile-nav-top: clamp(4px, 1.1vw, 8px);
  --list-footer-link-size: clamp(14px, 1.1vw, 18px);
  --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);
}

.list-page-body,
.latest-page-body,
.index-page-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.list-page-body main,
.latest-page-body main,
.index-page-body main {
  flex: 1 0 auto;
}

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: 0.5rem 0.75rem;
  z-index: 9999;
}

.site-header {
  border-bottom: 0;
  font-size: var(--nav-font);
}

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

.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 {
  grid-column: 2;
  justify-self: center;
}
.nav-desktop .nav-actions {
  grid-column: 3;
  justify-self: end;
}

.nav-desktop .brand {
  display: flex;
  align-items: center;
  grid-column: 1;
  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 .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;
  cursor: pointer;
}

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

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

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

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

.nav-list {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: clamp(16px, 2vw, 28px);
  width: 100%;
  min-height: 44px;
}

.list-brand {
  grid-column: 1;
  position: relative;
  z-index: 1;
  justify-self: start;
  margin: 0;
  color: #000;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(28px, 2.2vw, 40px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: none;
}

.list-brand a {
  letter-spacing: inherit;
  text-transform: inherit;
}

.list-header-center {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;
  pointer-events: none;
}

.list-description {
  margin: 0;
  max-width: 48ch;
  text-wrap: balance;
  text-align: center;
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  text-transform: none;
}

.list-saved-sites-link {
  grid-column: 3;
  position: relative;
  z-index: 1;
  justify-self: end;
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 44px;
  padding: 0 2px;
  cursor: pointer;
}

.list-saved-sites-link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

@media (max-width: 934px) {
  .nav-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 10px;
    align-items: start;
    padding-top: var(--list-mobile-nav-top);
  }

  .list-brand {
    grid-column: 1;
    grid-row: 1;
    max-width: calc(100% - (var(--list-mobile-saved-lane) + var(--list-mobile-saved-gap)));
  }

  .list-header-center {
    width: auto;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: start;
    pointer-events: auto;
  }

  .list-description {
    text-align: left;
  }

  .list-saved-sites-link {
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    align-self: auto;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    min-width: 44px;
    line-height: 0.95;
    font-size: clamp(14px, 3.8vw, 16px);
  }
}

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

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

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

.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;

  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;

  transform: translateY(-54%) translateX(-14%) skewX(-28deg) scaleX(0.02) scaleY(0.74);

  transition:
    opacity 90ms ease,
    filter 260ms cubic-bezier(0.12, 1.12, 0.22, 1);

  -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;
}

@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(0.12, 1.12, 0.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(0.12, 1.12, 0.22, 1) both;
}

@media (max-width: 934px) {
  .site-header .nav-list .list-saved-sites-link {
    position: absolute;
    top: 0;
    right: 0;
    inline-size: var(--list-mobile-saved-lane);
  }
}

.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);
}

@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;
}

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

@media (max-width: 934px) {
  .header-mobile {
    display: block;
  }
}

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

.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;
}

.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;
}

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

.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;
}

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

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 > .side-drawer {
  max-width: none;
  margin: 0;
  padding: 0;
}

main > .list-saved-drawer {
  max-width: none;
  margin: 0;
  padding: 0;
}

main > .list-ui-flash {
  max-width: none;
  margin: 0;
  padding: 5px 10px;
}

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

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

.list-ui-flash {
  position: fixed;
  left: clamp(18px, 3vw, 28px);
  bottom: calc(var(--to-top-bottom-safe) + 14px);
  z-index: 95;
  max-width: min(32rem, calc(100vw - 36px));
  padding: 18px 24px;
  border: 2px solid #000;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px #000;
  border-radius: 2px;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.35;
}

.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(0.12, 1.12, 0.22, 1) both;
  }
}

.hero-cta:focus-visible .cta-icon,
.cta-row:focus-visible .cta-icon {
  animation: ctaSmileyPop 240ms cubic-bezier(0.12, 1.12, 0.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);
  }
}

.side-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

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

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

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

.side-drawer__panel {
  position: absolute;
  top: var(--drawer-top-gap);
  right: var(--drawer-side-gap);
  bottom: 0;
  width: clamp(var(--drawer-panel-min), var(--drawer-panel-width), var(--drawer-panel-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(0.16, 1, 0.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;
}

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

.side-drawer__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: var(--drawer-close-size);
  min-width: var(--drawer-close-size);
  height: var(--drawer-close-size);
  min-height: var(--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;
}

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

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

.side-drawer__content h2 {
  margin: 0;
  font-size: clamp(42px, 4.2vw, 58px);
  line-height: 0.75;
  letter-spacing: -0.014em;
  font-weight: 900;
}

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

.drawer-form {
  margin-top: var(--drawer-form-top-gap);
  display: grid;
  gap: var(--drawer-form-field-gap);
}

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

.list-owner-form__field {
  display: grid;
  gap: 5px;
}

.drawer-form__field label,
.list-owner-form__field label {
  font-weight: 700;
  font-size: clamp(16px, 1.1vw, 19px);
  letter-spacing: 0.01em;
}

.drawer-form__field input,
.drawer-form__field textarea,
.list-owner-form__field input,
.list-owner-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;
}

.drawer-form__field input:-webkit-autofill,
.drawer-form__field input:-webkit-autofill:hover,
.drawer-form__field input:-webkit-autofill:focus,
.list-owner-form__field input:-webkit-autofill,
.list-owner-form__field input:-webkit-autofill:hover,
.list-owner-form__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  caret-color: #000;
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 9999s ease-out;
}

.drawer-form__field textarea,
.list-owner-form__field textarea {
  resize: vertical;
  min-height: var(--drawer-textarea-min-h);
}

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

.drawer-form__submit,
.list-owner-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;
  --drawer-submit-arrow-y: 0em;
  cursor: pointer;
}

.drawer-form__submit[disabled],
.list-owner-form__submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}

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

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

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

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

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

.drawer-form__status--error {
  color: #000;
}

.drawer-form__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) {
  .side-drawer__panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

.list-auth-drawer {
  z-index: 91;
}

.list-auth-drawer__pending {
  margin: var(--drawer-form-top-gap) 0 var(--drawer-form-field-gap);
  font-size: var(--label-font);
  line-height: 1.3;
  font-weight: 500;
}

.list-auth-drawer.has-pending-save [data-list-create-form] {
  margin-top: 10px;
}

.list-auth-drawer.is-created [data-list-auth-intro],
.list-auth-drawer.is-created [data-list-auth-pending] {
  display: none;
}

.list-auth-drawer.is-created [data-list-create-form],
.list-auth-drawer.is-created .list-auth-drawer__helper {
  display: none;
}

.list-auth-drawer__result-value {
  margin: 0;
  color: #000;
  font-size: var(--label-font);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.list-auth-drawer__result {
  margin-top: 0;
  background: var(--paper);
}

.list-auth-drawer__helper {
  margin: var(--drawer-form-top-gap) 0 0;
  font-size: clamp(16px, 1.1vw, 19px);
  line-height: 1.3;
  font-weight: 400;
}

.list-auth-drawer__helper + .list-auth-drawer__helper {
  margin-top: var(--drawer-form-field-gap);
}

.list-auth-drawer__helper span {
  display: block;
}

.list-auth-drawer__helper span:first-child {
  font-weight: 700;
  font-size: clamp(16px, 1.1vw, 19px);
  letter-spacing: 0.01em;
}

.list-auth-drawer__helper-example {
  font-weight: 700;
  letter-spacing: 0.02em;
}

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

.list-auth-drawer__result-label {
  margin: var(--drawer-form-top-gap) 0 var(--drawer-form-field-gap);
  font-size: var(--label-font);
  font-weight: 700;
  line-height: 1.3;
}

.list-auth-drawer__result-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 26px);
}

.list-auth-drawer__actions {
  display: grid;
  gap: 10px;
}

.list-auth-drawer__copy,
.list-auth-drawer__download {
  width: 100%;
}

.list-auth-drawer.is-created .drawer-form__status {
  margin-top: clamp(22px, 2.2vw, 32px);
  font-size: var(--label-font);
  line-height: 1.3;
  font-weight: 500;
}

.list-owner-form__status {
  margin: 14px 0 0;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.35;
}

.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(--drawer-top-gap);
  left: var(--footer-drawer-left-gap);
  bottom: 0;
  width: clamp(var(--drawer-panel-min), var(--drawer-panel-width), var(--drawer-panel-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(0.4, 0, 0.8, 0.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(0.16, 1, 0.3, 1);
  transform: translate3d(0, 0, 0);
}

.footer-drawer.is-closing .footer-drawer__panel {
  animation: footerDrawerClose 360ms cubic-bezier(0.4, 0, 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(--drawer-close-size);
  min-width: var(--drawer-close-size);
  height: var(--drawer-close-size);
  min-height: var(--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);
}

.list-saved-drawer {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

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

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

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

.list-saved-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(var(--list-drawer-min), var(--list-drawer-width), var(--list-drawer-max));
  max-width: 100vw;
  background: var(--paper);
  box-shadow: inset 1px 0 0 #000;
  border-left: 3px solid #000;
  transform: translate3d(100%, 0, 0);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

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

.list-saved-drawer.is-closing .list-saved-drawer__panel {
  animation: listSavedDrawerClose 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
  transition: none;
}

@keyframes listSavedDrawerClose {
  0% {
    transform: translate3d(0, 0, 0);
  }
  34% {
    transform: translate3d(54%, 0, 0);
  }
  80% {
    transform: translate3d(54%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

.list-saved-drawer__close {
  position: absolute;
  top: 4px;
  right: 12px;
  width: var(--drawer-close-size);
  min-width: var(--drawer-close-size);
  height: var(--drawer-close-size);
  min-height: var(--drawer-close-size);
  border: none;
  background: none;
  color: #000;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 2px 0 0;
  font: inherit;
  font-size: 3rem;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

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

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

.list-saved-drawer__heading {
  margin: 0;
  font-size: clamp(21px, 1.5vw, 26px);
  line-height: 1.02;
  font-weight: 500;
}

.list-saved-drawer__visible-count {
  margin: 3px 0 0;
  font-size: clamp(16.5px, 1.1vw, 20px);
  line-height: 1.2;
  font-weight: 500;
}

.list-saved-drawer__note {
  margin: 12px 0 0;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.35;
  font-weight: 400;
}

.list-saved-drawer__owner {
  margin-top: clamp(20px, 2vw, 28px);
  display: grid;
  gap: 30px;
}

.list-saved-drawer__owner[hidden] {
  display: none;
}

.list-owner-form {
  display: grid;
  gap: 14px;
}

.list-saved-drawer__list {
  margin: clamp(24px, 2.6vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.list-saved-drawer__list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 0.55rem;
  min-height: 0;
  padding-right: clamp(72px, 8vw, 92px);
}

.list-saved-drawer__bullet {
  font-size: 1.1em;
  line-height: 1;
  color: #000;
  flex: 0 0 auto;
}

.list-saved-drawer__link,
.list-saved-drawer__link:visited,
.list-saved-drawer__link:hover,
.list-saved-drawer__link:focus-visible {
  min-width: 0;
  color: #000;
  text-decoration: none;
}

.list-saved-drawer__label {
  color: #000;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
  position: relative;
}

.list-saved-drawer__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;
}

@media (hover: hover), (any-hover: hover) {
  .list-saved-drawer__link:hover .list-saved-drawer__label::after {
    opacity: 1;
    animation: markerSweepLink 320ms cubic-bezier(0.12, 1.12, 0.22, 1) both;
  }
}

.list-saved-drawer__link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.list-saved-drawer__link:focus-visible .list-saved-drawer__label::after {
  opacity: 1;
  animation: markerSweepLink 320ms cubic-bezier(0.12, 1.12, 0.22, 1) both;
}

.list-saved-drawer__remove {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  min-height: 44px;
  padding: 0 4px;
}

.list-saved-drawer__remove .site-save-control__label {
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.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: 0.02em;
  text-transform: uppercase;
}

.legal-content__section p {
  margin: 0;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.5;
  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: 0.5rem;
}

.legal-content__list li::before {
  content: "■";
  line-height: 1;
  transform: translateY(0.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);
}

@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;
  }

  .list-saved-drawer__panel {
    width: 100vw;
    border-left: 0;
    box-shadow: none;
  }

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

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

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

.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: var(--section-copy-size);
  line-height: 1.5;
  max-width: var(--content-measure);
  width: min(100%, var(--content-measure));
  display: block;
}

strong {
  font-weight: 500;
}

.section-strong,
.guide-list {
  list-style: none;
  padding: 0;
}

.section-strong {
  font-weight: 700;
  font-size: var(--section-copy-size);
  margin: 0 0 0.9rem;
}

.section-strong li,
.guide-list li {
  position: relative;
  padding-left: 1.1em;
}

.section-strong li {
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.section-strong li::before,
.guide-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.38em;
  width: 0.55em;
  height: 0.55em;
  background: currentcolor;
}

.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.21em;
  position: relative;
}

.ring-members .member-label {
  font-size: var(--label-font);
}

.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;
}

.index-webring-label {
  font-weight: 400;
}

@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(0.12, 1.12, 0.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(0.12, 1.12, 0.22, 1) both;
}

@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);
  }
}

.site-save-control {
  border: 0;
  background: transparent;
  color: #000;
  font: inherit;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.site-save-control__label {
  color: #000;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.21em;
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.site-save-control__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;
}

@media (hover: hover), (any-hover: hover) {
  .site-save-control:hover .site-save-control__label::after {
    opacity: 1;
    animation: markerSweepLink 320ms cubic-bezier(0.12, 1.12, 0.22, 1) both;
  }
}

.site-save-control:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

.site-save-control:focus-visible .site-save-control__label::after {
  opacity: 1;
  animation: markerSweepLink 320ms cubic-bezier(0.12, 1.12, 0.22, 1) both;
}

.site-save-control.is-saved {
  cursor: pointer;
}

.site-save-control.is-saved .site-save-control__label {
  text-decoration: none;
}

.site-save-control.is-busy {
  opacity: 0.6;
  cursor: wait;
}

@media (hover: none), (pointer: coarse), (max-width: 899px) {
  .site-save-control {
    padding: 0.9rem 0.35rem;
    margin-top: -0.9rem;
    margin-bottom: -0.9rem;
  }

  .list-saved-drawer__remove {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 4px;
  }
}

.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-colophon--list {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: var(--list-footer-link-size);
}

.footer-colophon--list a {
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}

.footer-colophon-arrow {
  display: inline-block;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  transition: transform 140ms ease;
}

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

@media (hover: hover), (any-hover: hover) {
  .footer-colophon--list a:hover .footer-colophon-arrow {
    transform: translate3d(4px, 0, 0);
  }
}

.footer-colophon--list a:focus-visible .footer-colophon-arrow {
  transform: translate3d(4px, 0, 0);
}

.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: 114%;
    height: 114%;
    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-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);
  }
}

.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;

    transform: translate3d(0, 0, 0);
    transition:
      transform 220ms var(--arrow-motion-ease),
      opacity 0ms linear 180ms;

    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: transform;
  }

  .to-top__glyph {
    display: inline-block;
    opacity: 0;

    line-height: 0.78;
    transform: translate3d(0, 12px, 0) translateY(-0.06em);

    backface-visibility: hidden;
    will-change: transform, opacity;
  }

  .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;
  }

  .drawer-open[data-drawer-owner="list"] .to-top.is-visible {
    opacity: 0;
    visibility: hidden;
  }

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

  .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,
  .list-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-copy-size: clamp(18px, 4.2vw, 22px);
  }

  .section p {
    line-height: 1.45;
  }
}

@media (max-width: 720px) {
  :root {
    --meta-gap: clamp(14px, 4vw, 22px);
  }
}

@media (max-width: 520px) {
  .legal-content__section p {
    line-height: 1.45;
  }

  main > :last-child {
    padding-bottom: clamp(28px, 7vh, 72px);
  }
}

@media (max-width: 480px) {
  .side-drawer__content {
    padding: calc(var(--drawer-panel-pad) + 30px) var(--drawer-panel-pad) var(--drawer-panel-pad);
  }
}