/* Layout: a black gallery. Each name is shown with its own engraved seal, a
   large luminous rosette drawn from the name's letters. The seal carries all
   the colour; type is a plain, heavy sans chosen to be read at a glance. */
:root {
  color-scheme: dark;

  --void: #050506;      /* gallery black, so the seal glows */
  --plate: #0f0f12;     /* raised surfaces */
  --hair: #2a2a31;      /* hairlines */
  --bone: #f4f1e9;      /* text */
  --ash: #a3a2ab;       /* secondary text */
  --c1: #e9d9a6;        /* the name's two inks; the script sets these per name */
  --c2: #9db8ff;
  --sheet: #ffffff;     /* inside the concept mock-ups only */
  --sheet-ink: #0b0b0d;

  --display: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;  /* names, prices, headings */
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;  /* taglines and descriptions */
  --ui: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --measure: 84rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font: 400 1rem/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; border-radius: 2px; }
h1:focus { outline: none; }

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Activity strip and flame ---------- */

.frame { position: relative; }

.activity {
  margin: 0;
  padding: 0.625rem var(--gutter);
  border-bottom: 1px solid var(--hair);
  color: color-mix(in srgb, var(--bone) 84%, transparent);
  font: italic 400 1rem/1.3 var(--serif);
  text-align: center;
}

/* the lozenge that marks a highlight of the collection */
.hot {
  display: inline-block;
  inline-size: 0.32em;
  block-size: 0.32em;
  margin-inline-start: 0.5em;
  background: var(--r1, var(--c1));
  transform: rotate(45deg);
  vertical-align: 0.24em;
}

.legend { margin: 0; padding-block-end: 1rem; color: var(--ash); font: italic 400 1rem/1.3 var(--serif); }
.legend .hot { inline-size: 0.4375rem; block-size: 0.4375rem; margin: 0 0.75rem 0 0.125rem; background: var(--bone); vertical-align: 0.12em; }

.hot-chip { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c1); font: italic 400 1.0625rem/1 var(--serif); }
.hot-chip .hot { inline-size: 0.5rem; block-size: 0.5rem; margin: 0 0.125rem; background: currentColor; vertical-align: 0; }

/* ---------- Top bar ---------- */

.bar { position: absolute; inset: 0 0 auto 0; z-index: 5; }
.bar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.5rem; }
.bar-home { display: inline-flex; align-items: center; gap: 0.625rem; font: 700 1.375rem/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.bar-home .token { --token: 2.25rem; }
.bar-links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); font-size: 0.9375rem; }
.bar-links a { text-decoration: none; }
.bar-links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

.pill {
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
  border: 1px solid color-mix(in srgb, var(--bone) 45%, transparent);
  border-radius: 999px;
}

.bar-links .pill:hover { background: var(--bone); color: var(--void); text-decoration: none; }

/* ---------- The seal ---------- */

.seal {
  --mx: 36%;
  --my: 30%;
  position: relative;
  inline-size: var(--seal-size, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--void);
  isolation: isolate;
}

.seal-layer {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  mix-blend-mode: screen;
  will-change: transform;
}

.seal-a { animation: turn 320s linear infinite; }
.seal-b { animation: turn 230s linear infinite reverse; }
.seal-c { animation: turn 520s linear infinite; }

@keyframes turn { to { transform: rotate(360deg); } }

/* a light that follows the pointer and makes nearby lines flare */
.seal-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 42%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
}

.seal-core {
  position: absolute;
  inset: 41.5%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #000 55%, var(--void));
  border: 1px solid color-mix(in srgb, var(--c1) 70%, transparent);
  box-shadow: 0 0 0 0.35em var(--void), 0 0 0 calc(0.35em + 1px) color-mix(in srgb, var(--c2) 45%, transparent);
  font: 600 calc(var(--seal-size, 30rem) * 0.07)/1 var(--display);
  color: var(--bone);
}

.seal-core.is-wide { font-size: calc(var(--seal-size, 30rem) * 0.05); }

/* the small round mark used beside names in lists */
.token {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--token, 2.75rem);
  block-size: var(--token, 2.75rem);
  border-radius: 50%;
  overflow: hidden;
  background: #000;
  font: 700 calc(var(--token, 2.75rem) * 0.36)/1 var(--display);
  color: var(--bone);
}

.token canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.token span { position: relative; text-shadow: 0 0 0.4em #000, 0 0 0.2em #000; }
.token.is-wide { font-size: calc(var(--token, 2.75rem) * 0.26); }

/* ---------- Stage: the opening of every page ---------- */

.stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(40rem, 100svh, 66rem);
  padding-block: 6.5rem clamp(2rem, 5vw, 3.5rem);
}

.stage > .wrap { inline-size: 100%; min-width: 0; }

/* with the activity strip above, keep the price inside the first screen */
.activity + .frame .stage { min-height: clamp(38rem, calc(100svh - 2.5rem), 64rem); }

.stage > .seal {
  position: absolute;
  z-index: -2;
  inset-block-start: 23%;
  inset-inline-start: 75%;
  translate: -50% -50%;
  animation: unveil 2.4s var(--ease) both;
}

@keyframes unveil {
  from { opacity: 0; scale: 0.9; rotate: -14deg; }
}

/* keeps the top bar readable where it crosses the seal */
.stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 8rem;
  z-index: -1;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--void) 85%, transparent), transparent);
  pointer-events: none;
}

/* lets type sit clearly over the lower part of the seal */
.stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  block-size: 62%;
  z-index: -1;
  background: linear-gradient(to top, var(--void) 18%, color-mix(in srgb, var(--void) 70%, transparent) 55%, transparent);
  pointer-events: none;
}

/* the line above the name: its number in the collection, a rule, its status */
.plate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
  font-size: 0.9375rem;
}

.plate-rule { flex: 1 1 3rem; block-size: 1px; background: color-mix(in srgb, var(--bone) 30%, transparent); }
.plate-status { font-weight: 600; }

/* keeps the small lines readable where they cross the seal */
.plate > span:not(.plate-rule), .caps button { text-shadow: 0 0 0.4em var(--void), 0 0 0.8em var(--void), 0 0 1.2em var(--void); }
.lot-link { text-underline-offset: 0.25em; }

/* the row under the name: tagline on the left, lowercase / UPPERCASE on the right */
.name-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem 2rem;
  margin-block-start: clamp(0.75rem, 1.6vw, 1.25rem);
}

.name-foot .tagline { margin: 0; }

.caps { display: inline-flex; gap: 1.25rem; }

.caps button {
  padding: 0.5rem 0 0.375rem;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--ash);
  font: 500 0.8125rem/1 var(--ui);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.caps button:hover { color: var(--bone); }
.caps button[aria-pressed="true"] { color: var(--bone); border-bottom-color: var(--bone); }

.name {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  margin: 0;
  padding-block-end: 0.1em;
  font: 600 1rem/1 var(--display);
  letter-spacing: -0.05em;
}

.name-inner.is-upper { text-transform: uppercase; letter-spacing: -0.035em; }

/* the script sets font-size here so the name spans the measure */
.name-inner { display: inline-block; white-space: nowrap; font-size: clamp(3rem, 13vw, 11rem); }

.ch {
  display: inline-block;
  animation: rise 1.1s var(--ease) both;
  animation-delay: calc(var(--i) * 45ms + 350ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.3em); filter: blur(0.06em); }
}

.tagline {
  margin: clamp(0.75rem, 1.6vw, 1.25rem) 0 0;
  max-width: 30ch;
  font: italic 400 clamp(1.5rem, 2.6vw, 2.25rem)/1.2 var(--serif);
  text-wrap: balance;
}

.deal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  margin-block-start: clamp(1.75rem, 4vw, 3rem);
  padding-block-start: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--bone) 22%, transparent);
}

.deal-label { margin: 0 0 0.375rem; font-size: 0.9375rem; color: var(--ash); }

.price {
  margin: 0;
  font: 600 clamp(2.75rem, 6vw, 4.5rem)/1 var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.045em;
}

.price.is-words { font-weight: 500; font-size: clamp(1.875rem, 3.6vw, 2.75rem); letter-spacing: -0.035em; }

.deal-side { display: grid; gap: 1rem; }
.actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12.5rem, 1fr); gap: 0.75rem; }

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 1.0625rem/1.2 var(--ui);
  text-decoration: none;
  color: var(--bone);
  background: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn[disabled] { opacity: 0.6; cursor: default; }

.btn-solid { background: var(--bone); color: var(--void); }
.btn-solid:hover { background: linear-gradient(100deg, var(--c1), var(--c2)); }
.btn-line { border-color: color-mix(in srgb, var(--bone) 55%, transparent); }
.btn-line:hover { border-color: var(--bone); background: color-mix(in srgb, var(--bone) 12%, transparent); }

.deal-mail { margin: 0; font-size: 0.9375rem; color: var(--ash); }
.deal-mail a { color: var(--bone); text-underline-offset: 0.25em; overflow-wrap: anywhere; }

/* ---------- Offer and enquiry form ---------- */

.sheet {
  inline-size: min(34rem, calc(100vw - 2rem));
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 1.25rem;
  background: var(--plate);
  color: var(--bone);
  overflow: auto;
}

.sheet::backdrop { background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(6px); }

.sheet-body { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sheet-title { margin: 0; font: 600 1.75rem/1.1 var(--display); letter-spacing: -0.035em; overflow-wrap: anywhere; }
.sheet-sub { margin: 0.5rem 0 0; color: var(--ash); }

.sheet-close {
  flex: none;
  padding: 0.375rem 0;
  border: 0;
  background: none;
  color: var(--ash);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

.sheet-close:hover { color: var(--bone); }

.sheet-form { display: grid; gap: 1rem; }
.sheet-form .btn { inline-size: 100%; margin-block-start: 0.5rem; }
.sheet-field { display: grid; gap: 0.375rem; }
.sheet-field label { font-size: 0.9375rem; color: var(--ash); }

.sheet-field input, .sheet-field textarea {
  inline-size: 100%;
  padding: 0.75rem 1rem;
  background: var(--void);
  border: 1px solid var(--hair);
  border-radius: 0.75rem;
  color: var(--bone);
  font: inherit;
}

.sheet-field textarea { min-block-size: 6rem; resize: vertical; }
.sheet-field input:hover, .sheet-field textarea:hover { border-color: var(--ash); }
.sheet-trap { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; opacity: 0; }
.sheet-status { margin: 0; }
.sheet-status:empty { display: none; }

/* ---------- Sections ---------- */

.band { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--hair); }

.band-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 2rem;
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.h2 {
  margin: 0;
  font: 600 clamp(2rem, 4vw, 3rem)/1.05 var(--display);
  letter-spacing: -0.04em;
}

.band-note { margin: 0; font-size: 0.9375rem; color: var(--ash); }
.band-note a { color: var(--bone); text-underline-offset: 0.25em; }

/* the case for the name */

.case { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }

.statement { display: grid; gap: 1.25rem; min-width: 0; }

.statement p {
  margin: 0;
  max-width: 34em;
  font: 400 clamp(1.25rem, 1.7vw, 1.5rem)/1.5 var(--serif);
}

.statement p:first-child { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.3; letter-spacing: -0.005em; }

.particulars { margin: 0; min-width: 0; align-self: start; }

.particulars div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1rem;
  border-top: 1px solid var(--hair);
}

.particulars div:last-child { border-bottom: 1px solid var(--hair); }
.particulars dt { color: var(--ash); }
.particulars dd { margin: 0; text-align: right; }

/* ---------- Concept preview ---------- */

.devices {
  --px: 0;
  --py: 0;
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9.4;
  border-radius: clamp(0.75rem, 2vw, 1.5rem);
  background:
    radial-gradient(60% 70% at 78% 22%, color-mix(in srgb, var(--c2) 34%, transparent), transparent 70%),
    radial-gradient(55% 65% at 14% 88%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%),
    var(--plate);
  perspective: 150cqw;
  overflow: clip;
}

.browser, .phone {
  position: absolute;
  overflow: hidden;
  background: var(--sheet);
  color: var(--sheet-ink);
  font-family: var(--ui);
  box-shadow: 0 3cqw 7cqw rgba(0, 0, 0, 0.55), 0 0 0 0.12cqw rgba(255, 255, 255, 0.14);
  transition: transform 0.5s var(--ease);
}

.browser {
  inset: 9% auto auto 6%;
  inline-size: 76%;
  block-size: 80%;
  border-radius: 1.3cqw;
  transform-origin: 20% 50%;
  transform: rotateY(calc(9deg + var(--px) * 3deg)) rotateX(calc(3deg - var(--py) * 2.5deg));
}

.browser-top {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  block-size: 3.6cqw;
  padding-inline: 1.4cqw;
  background: #ececef;
  border-bottom: 1px solid #dcdce0;
}

.browser-dots { display: flex; gap: 0.5cqw; }
.browser-dots span { inline-size: 0.85cqw; block-size: 0.85cqw; border-radius: 50%; background: #c6c6cc; }

.browser-url {
  flex: 1;
  max-width: 34cqw;
  margin-inline: auto;
  padding: 0.35cqw 1.4cqw;
  border-radius: 99cqw;
  background: #fff;
  color: #6c6c75;
  font-size: 1.05cqw;
  text-align: center;
}

.browser-top::after { content: ""; inline-size: 3.2cqw; }

.mock { position: absolute; inset: 3.6cqw 0 0 0; }
.phone .mock { inset: 0; }

.mock-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

.mock-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2cqw 3cqw 0;
  font-size: 1.15cqw;
  font-weight: 500;
}

.mock-brand { display: flex; align-items: center; gap: 0.8cqw; font-weight: 700; font-size: 1.6cqw; letter-spacing: -0.02em; }
.mock-brand .token { --token: 2.6cqw; }
.mock-links { display: flex; align-items: center; gap: 2.2cqw; }
.mock-links .mock-chip { padding: 0.55cqw 1.3cqw; border-radius: 99cqw; background: var(--sheet-ink); color: var(--sheet); }

.mock-copy { position: relative; display: grid; gap: 1.4cqw; justify-items: start; max-width: 44%; padding: 7cqw 0 0 3cqw; }
.mock-headline { margin: 0; font-weight: 700; font-size: 4.3cqw; line-height: 0.98; letter-spacing: -0.04em; text-wrap: balance; }
.mock-pitch { margin: 0; font-size: 1.35cqw; line-height: 1.35; color: #3c3c44; }
.mock-buttons { display: flex; gap: 0.8cqw; margin-block-start: 0.6cqw; font-size: 1.1cqw; font-weight: 600; }
.mock-buttons span { padding: 0.8cqw 1.6cqw; border-radius: 99cqw; border: 0.1cqw solid var(--sheet-ink); }
.mock-buttons span { background: var(--sheet); }
.mock-buttons span:first-child { background: var(--sheet-ink); color: var(--sheet); }

.mock-features {
  position: absolute;
  inset: auto auto 2.4cqw 3cqw;
  display: flex;
  gap: 0.9cqw;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.05cqw;
  font-weight: 600;
}

.mock-features li { padding: 0.55cqw 1.2cqw; border-radius: 99cqw; background: var(--sheet); box-shadow: 0 0.2cqw 1cqw rgba(0, 0, 0, 0.16); }

.phone {
  inset: auto 7% 7% auto;
  inline-size: 17.5%;
  aspect-ratio: 9 / 18.6;
  border: 0.55cqw solid #121214;
  border-radius: 2.6cqw;
  transform: translateZ(8cqw) rotateY(calc(-13deg + var(--px) * 4deg)) rotateX(calc(4deg - var(--py) * 3deg));
}

.phone::before {
  content: "";
  position: absolute;
  inset: 0.7cqw auto auto 50%;
  z-index: 2;
  inline-size: 30%;
  block-size: 0.9cqw;
  translate: -50% 0;
  border-radius: 99cqw;
  background: #121214;
}

.phone .mock-nav { padding: 2.6cqw 1.3cqw 0; }
.phone .mock-brand { font-size: 1.15cqw; gap: 0.5cqw; }
.phone .mock-brand .token { --token: 1.8cqw; }
.phone .mock-copy { max-width: none; padding: 2.2cqw 1.3cqw 0; gap: 0.8cqw; }
.phone .mock-headline { font-size: 2.05cqw; }
.phone .mock-pitch { font-size: 0.82cqw; }
.phone .mock-buttons { font-size: 0.72cqw; }
.phone .mock-buttons span { padding: 0.55cqw 1cqw; }

/* ---------- The acquisition: the house's terms ---------- */

.terms { margin: 0; }

.terms div {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hair);
}

.terms div:last-child { border-bottom: 1px solid var(--hair); }
.terms dt { font-weight: 600; font-size: 1.0625rem; }
.terms dd { margin: 0; max-width: 40em; font: 400 clamp(1.125rem, 1.5vw, 1.3125rem)/1.5 var(--serif); }

/* ---------- Ticker of other names ---------- */

.ticker {
  overflow: hidden;
  margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker-track { display: flex; inline-size: max-content; animation: slide var(--ticker-time, 60s) linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }

@keyframes slide { to { transform: translateX(-50%); } }

.ticker-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline-end: 0.875rem;
  padding: 0.75rem 1.75rem 0.75rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.25s ease;
}

.ticker-item:hover { border-color: var(--bone); }
.ticker-item .token { --token: 3.25rem; }
.ticker-name { font: 600 1.5rem/1 var(--display); letter-spacing: -0.035em; }
.ticker-price { color: var(--ash); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* ---------- Collection page ---------- */

.stage.is-hub { min-height: clamp(34rem, 82svh, 54rem); }

.hub-title {
  margin: 0;
  font: 700 clamp(5rem, 21vw, 18rem)/0.84 var(--display);
  letter-spacing: -0.065em;
}

.hub-count { margin: 1.25rem 0 0; max-width: 34rem; color: var(--ash); }

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem 2rem;
  padding-block: clamp(2rem, 5vw, 3.5rem) 1.5rem;
}

.field { display: grid; gap: 0.5rem; flex: 1 1 16rem; max-width: 26rem; min-width: 0; }
.field-label { font-size: 0.9375rem; color: var(--ash); }

.search {
  inline-size: 100%;
  min-height: 3.25rem;
  padding: 0.625rem 1.25rem;
  background: var(--plate);
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--bone);
  font: inherit;
}

.search::placeholder { color: var(--ash); opacity: 0.7; }
.search:hover { border-color: var(--ash); }

.sorts { display: grid; gap: 0.5rem; }
.sort-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.sort {
  min-height: 3.25rem;
  padding: 0.625rem 1.25rem;
  background: none;
  border: 1px solid var(--hair);
  border-radius: 999px;
  color: var(--bone);
  font: inherit;
  cursor: pointer;
}

.sort:hover { border-color: var(--ash); }
.sort[aria-pressed="true"] { background: var(--bone); border-color: var(--bone); color: var(--void); }

.result-count { margin: 0; padding-block-end: 1rem; font-size: 0.9375rem; color: var(--ash); }

.index { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-block-end: clamp(3rem, 8vw, 6rem); }

.names { min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.names li { border-bottom: 1px solid var(--hair); }

.row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "token name" "token tag" "token price";
  gap: 0.125rem 1.125rem;
  align-items: center;
  padding-block: 1.125rem;
  text-decoration: none;
}

.row .token { grid-area: token; --token: 3.5rem; align-self: start; }
.row-name { grid-area: name; font: 600 clamp(1.625rem, 3vw, 2.375rem)/1.1 var(--display); letter-spacing: -0.04em; overflow-wrap: anywhere; transition: translate 0.35s var(--ease), color 0.2s ease; }
.row-tag { grid-area: tag; color: var(--ash); }
.row-price { grid-area: price; margin-block-start: 0.25rem; font-variant-numeric: tabular-nums; }
.row.is-active .row-name, .row:hover .row-name { translate: 0.5rem 0; color: var(--r1, var(--bone)); }
.row.is-sold { color: var(--ash); }

.viewer { display: none; }

.empty { margin: 0; padding-block: 2.5rem; color: var(--ash); }

.link-button {
  padding: 0;
  background: none;
  border: 0;
  color: var(--bone);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}

/* ---------- Footer, fallbacks ---------- */

.foot { border-top: 1px solid var(--hair); }

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 2rem;
  padding-block: 2.5rem 3.5rem;
  color: var(--ash);
  font-size: 0.9375rem;
}

.foot-name { display: inline-flex; align-items: center; gap: 0.625rem; font: 700 1.25rem/1 var(--display); letter-spacing: -0.03em; color: var(--bone); }
.foot-name .token { --token: 2rem; }
.foot a { color: var(--bone); text-underline-offset: 0.25em; overflow-wrap: anywhere; }

.nojs, .notice { max-width: var(--measure); margin-inline: auto; padding: 3rem var(--gutter); }
.nojs h1, .notice h1 { font: 600 2.25rem/1.1 var(--display); letter-spacing: -0.03em; margin: 0 0 1rem; }
.nojs a, .notice a { color: var(--bone); }

/* ---------- Wider screens ---------- */

@media (min-width: 48rem) {
  .row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "token name price";
    gap: 1.5rem;
  }
  .row .token { align-self: center; }
  .row-tag { display: none; }
  .row-price { margin-block-start: 0; text-align: right; white-space: nowrap; }
}

@media (min-width: 62rem) {
  .terms div { grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); gap: 2rem; align-items: baseline; }
  .case { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
  .index { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }

  .viewer {
    position: sticky;
    inset-block-start: 2rem;
    display: grid;
    gap: 1.5rem;
    justify-items: center;
    min-width: 0;
    padding-block-start: 1rem;
    text-align: center;
  }

  .viewer .seal { max-inline-size: 100%; }
  .viewer-name { margin: 0; font: 600 2rem/1 var(--display); letter-spacing: -0.04em; }
  .viewer-tag { margin: 0.5rem 0 0; font: italic 400 1.25rem/1.3 var(--serif); }
  .viewer-price { margin: 0.75rem 0 0; color: var(--ash); font-variant-numeric: tabular-nums; }
}

/* smaller laptops: move the seal right so it stays clear of the status line */
@media (min-width: 40.0625rem) and (max-width: 78rem) {
  .stage > .seal { inset-inline-start: 80%; }
}

/* ---------- Narrow screens ---------- */

@media (max-width: 40rem) {
  .plate-rule { display: none; }
  .stage, .stage.is-hub { min-height: 0; padding-block-start: min(108vw, 29rem); }
  .stage > .seal { inset-block-start: min(41vw, 11rem); inset-inline-start: 56%; }
  .stage::after { block-size: 50%; }
  .deal-side { inline-size: 100%; }
  .actions { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
  .mock-features { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seal-layer, .ticker-track, .ch, .stage > .seal { animation: none; }
  .ticker { overflow-x: auto; }
  .browser, .phone, .btn, .row-name { transition: none; }
}