/* KOTFISH — a cat's head on a salmon, photographed everywhere.

   The pictures are surreal photo-collage, mostly water and night sky, so the
   page is built like a specimen record: deep water, one cold turquoise, hairline
   rules, catalogue numbers in mono. Every picture is a numbered plate. */

/* ── tokens ─────────────────────────────────────────────────────── */

:root{
  --deep:#04121F;        /* the page */
  --deep-2:#071B2C;      /* plates and cards */
  --rule:#13364B;        /* hairlines */

  --aqua:#45DCE4;        /* the one bright colour */
  --aqua-dim:#1B8E99;
  --scale:#B9C9D4;       /* salmon-silver */

  --text:#E2EDF3;
  --mute:#93AABB;        /* 6.3:1 on --deep */
  --faint:#6D8799;       /* 4.6:1 on --deep */

  --font-d:'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-m:'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --edge:clamp(1rem, 4vw, 3.5rem);
  --wide:78rem;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-d);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.6;
  color:var(--text);
  background:var(--deep);
  /* light from the surface, fading with depth */
  background-image:linear-gradient(180deg, #0A2438 0%, var(--deep) 38%, #02090F 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

::selection{ background:var(--aqua); color:#031016; }

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--aqua); color:#031016; padding:.7rem 1rem;
  font-weight:600; z-index:99;
}
.skip:focus{ left:0; }

/* ── top bar ────────────────────────────────────────────────────── */

.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1rem;
  padding:.7rem var(--edge);
  background:rgba(4,18,31,.8);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule);
}

.bar__mark{
  font-weight:700; font-size:.9rem;
  letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
}

.bar__ca{
  display:inline-flex; align-items:center; gap:.55rem;
  /* shrinks rather than stretching, and pushes the nav to the far edge */
  flex:0 1 auto; margin-right:auto; min-width:0;
  padding:.32rem .45rem .32rem .7rem;
  font-family:var(--font-m); font-size:.74rem;
  color:var(--mute); background:transparent;
  border:1px solid var(--rule); border-radius:.25rem;
  cursor:pointer;
}
.bar__ca:hover{ color:var(--text); border-color:var(--aqua-dim); }
.bar__ca-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar__ca-verb{
  flex:none; padding:.1rem .45rem; border-radius:.2rem;
  background:rgba(69,220,228,.14); color:var(--aqua);
  font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
}

.bar__nav{ display:flex; align-items:center; gap:.3rem; flex:none; }
.bar__nav a{
  padding:.4rem .6rem; font-size:.84rem; font-weight:400;
  text-decoration:none; color:var(--mute); border-radius:.25rem;
}
.bar__nav a:hover{ color:var(--text); }
.bar__buy{
  color:#031016 !important; background:var(--aqua); font-weight:600;
  padding:.4rem 1rem !important;
}
.bar__buy:hover{ background:#7BEDF3; }

@media (max-width:34rem){
  .bar__nav a:not(.bar__buy){ display:none; }
  .bar__ca{ font-size:.7rem; }
}

/* ── hero ───────────────────────────────────────────────────────── */

.hero{ padding:clamp(1.5rem,4vw,3rem) 0 clamp(3rem,7vw,5rem); }

.screen{
  position:relative;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin-inline:auto;
  overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 2rem 5rem rgba(0,0,0,.55);
}

.screen__video{
  width:100%;
  /* the clip is square and the fish sits on the centre line, so a wide crop
     costs nothing; the floor keeps it from becoming a strip on a phone */
  height:min(64vh, max(48vw, 17rem));
  object-fit:cover;
}

.screen__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,18,31,.4) 0%, rgba(4,18,31,0) 26%,
    rgba(4,18,31,0) 58%, rgba(4,18,31,.78) 100%);
}

.screen__sound{
  position:absolute; right:.8rem; top:.8rem;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.38rem .75rem;
  font-family:var(--font-m); font-size:.7rem; letter-spacing:.06em;
  color:var(--text); background:rgba(4,18,31,.62);
  border:1px solid rgba(255,255,255,.18); border-radius:.25rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
}
.screen__sound-dot{ width:.4rem; height:.4rem; border-radius:50%; background:var(--faint); }
.screen__sound[aria-pressed="true"] .screen__sound-dot{
  background:var(--aqua); box-shadow:0 0 .5rem var(--aqua);
}

/* The name, wide and thin, sitting right under the plate like a caption on a
   specimen card. --wm-size is measured by app.js and set on .hero. */
.wordmark{
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(.9rem,2.2vw,1.6rem) auto 0;
  padding:0;
  font-weight:700;
  font-size:var(--wm-size, clamp(2.4rem, 11vw, 7rem));
  line-height:.95;
  letter-spacing:-.005em;
  white-space:nowrap;
  text-align:center;
  color:var(--text);
  text-shadow:0 0 3rem rgba(69,220,228,.3);
}
/* inline-block, not block: the fitter measures this span, and a block one would
   always report the full container width and never resize anything. */
.wordmark span{ display:inline-block; }
.wordmark span span{ display:inline-block; }

.hero__foot{
  display:grid; gap:1.5rem;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(1.5rem,3.5vw,2.5rem) auto 0;
}
@media (min-width:56rem){
  .hero__foot{ grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:2.5rem; }
}

.lede{
  margin:0; max-width:44ch;
  font-size:clamp(1.02rem,.95rem + .45vw,1.26rem);
  line-height:1.55; color:var(--mute);
}

/* ── buttons ────────────────────────────────────────────────────── */

.acts{ display:flex; flex-wrap:wrap; gap:.7rem; }

.act{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.4rem;
  font-family:var(--font-d); font-size:.92rem; font-weight:600;
  text-decoration:none; border-radius:.25rem;
  border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.act--go{ background:var(--aqua); color:#031016; box-shadow:0 0 2.5rem rgba(69,220,228,.26); }
.act--go:hover{ background:#7BEDF3; }
.act--copy{ background:transparent; color:var(--text); border-color:var(--rule); }
.act--copy:hover{ border-color:var(--aqua-dim); }
.act--flat{
  background:transparent; color:var(--mute); border-color:transparent;
  text-decoration:underline; text-underline-offset:.3em;
}
.act--flat:hover{ color:var(--text); }

/* ── ticker ─────────────────────────────────────────────────────── */

.strip{
  overflow:hidden; padding:.75rem 0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:rgba(69,220,228,.04);
}
.strip__run{ display:flex; width:max-content; animation:slide 36s linear infinite; }
.strip__run span{
  padding:0 1.6rem;
  font-family:var(--font-m); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--aqua); white-space:nowrap;
}
/* an even number of identical copies, so shifting by half lands on a copy */
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ── headings ───────────────────────────────────────────────────── */

.head{ width:min(var(--wide), 100% - var(--edge) * 2); margin-inline:auto; }
.head--mid{ text-align:center; }

.head__kicker{
  margin:0 0 .7rem;
  font-family:var(--font-m); font-size:.72rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--aqua);
}
.head h2{
  margin:0; font-weight:600;
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3.3rem);
  line-height:1.05; letter-spacing:-.015em;
}
.head__sub{ margin:.8rem 0 0; max-width:48ch; color:var(--mute); }
.head--mid .head__sub{ margin-inline:auto; }

/* ── the record ─────────────────────────────────────────────────── */

.record{ padding:clamp(3.5rem,9vw,7rem) 0; }

.plates{
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(2.5rem,6vw,4rem) auto 0;
  padding:0; list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.75rem);
}
@media (min-width:46rem){ .plates{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:72rem){ .plates{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.plate{
  background:var(--deep-2);
  border:1px solid var(--rule);
  padding:.55rem .55rem .25rem;
}
.plate figure{ margin:0; }
.plate img{
  width:100%; height:auto; aspect-ratio:1;
  object-fit:cover;
  background:#061724;
}
.plate figcaption{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.7rem .15rem .55rem;
  font-size:.88rem; line-height:1.4; color:var(--mute);
}
.plate__n{
  flex:none;
  font-family:var(--font-m); font-size:.7rem; letter-spacing:.08em;
  color:var(--aqua-dim);
}

/* ── band ───────────────────────────────────────────────────────── */

.band{
  position:relative;
  display:grid; place-items:center;
  min-height:min(70vh,32rem);
  overflow:hidden;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.band__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.band__scrim{
  position:absolute; inset:0;
  background:radial-gradient(72% 62% at 50% 50%, rgba(4,18,31,.3) 0%, rgba(4,18,31,.9) 100%);
}
.band__creed{
  position:relative; z-index:2;
  margin:0; padding:var(--edge);
  max-width:24ch; text-align:center;
  font-size:clamp(1.45rem,1.1rem + 2vw,2.7rem);
  font-weight:400; line-height:1.22; letter-spacing:-.01em;
  text-shadow:0 .4rem 2rem rgba(0,0,0,.85);
}

/* ── buying ─────────────────────────────────────────────────────── */

.buy{ padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5rem); }

.steps{
  display:grid; gap:1.4rem;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin:clamp(2rem,5vw,3.5rem) auto 0;
  padding:0; list-style:none;
}
@media (min-width:48rem){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; } }
.steps li{
  padding:1.4rem 1.5rem;
  background:var(--deep-2);
  border:1px solid var(--rule);
}
.steps__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; margin-bottom:.85rem;
  border:1px solid var(--aqua-dim); border-radius:50%;
  font-family:var(--font-m); font-size:.82rem; color:var(--aqua);
}
.steps li p{ margin:0; color:var(--mute); }

.addr{
  /* width, not max-width: this section has no padding of its own, and the box
     would otherwise run to the screen edges on a phone */
  width:min(52rem, 100% - var(--edge) * 2);
  margin:clamp(2.5rem,6vw,4rem) auto 0;
  padding:clamp(1.5rem,4vw,2.5rem);
  text-align:center;
  background:var(--deep-2);
  border:1px solid var(--rule);
}
.addr__label{
  margin:0 0 .8rem;
  font-family:var(--font-m); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--faint);
}
.addr__value{
  display:block;
  font-family:var(--font-m); font-size:clamp(.78rem,.58rem + 1vw,1.02rem);
  /* a base58 address has no spaces; let it break rather than scroll the page */
  word-break:break-all; line-height:1.5;
  color:var(--aqua);
}
.addr__acts{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  margin-top:1.5rem;
}

.buy__him{
  width:min(17rem, calc(100% - var(--edge) * 2));
  margin:clamp(2.5rem,6vw,4rem) auto 0;
}
.buy__him img{
  width:100%; height:auto; border-radius:50%;
  border:1px solid var(--rule);
  box-shadow:0 0 4rem rgba(69,220,228,.18);
}

/* ── foot ───────────────────────────────────────────────────────── */

.foot{
  display:grid; gap:1rem; justify-items:center;
  width:min(var(--wide), 100% - var(--edge) * 2);
  margin-inline:auto;
  padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,7vw,4.5rem);
  border-top:1px solid var(--rule);
  text-align:center;
}
.foot__mark{
  margin:0; font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2.2rem);
  letter-spacing:.16em;
  color:var(--aqua);
  text-shadow:0 0 2rem rgba(69,220,228,.3);
}
.foot__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.4rem; }
.foot__nav a{
  font-family:var(--font-m); font-size:.8rem;
  color:var(--mute); text-decoration:none;
}
.foot__nav a:hover{ color:var(--aqua); }
.foot__fine{ margin:0; max-width:52ch; font-size:.85rem; color:var(--faint); }

/* ── toast ──────────────────────────────────────────────────────── */

.toast{
  position:fixed; left:50%; bottom:1.4rem; z-index:60;
  margin:0; padding:.7rem 1.2rem;
  transform:translate(-50%, 1.5rem);
  opacity:0; pointer-events:none;
  font-family:var(--font-m); font-size:.8rem;
  color:#031016; background:var(--aqua);
  border-radius:.25rem; box-shadow:0 1rem 2.5rem rgba(0,0,0,.5);
  max-width:calc(100vw - 2rem); word-break:break-all;
  transition:opacity .2s, transform .2s;
}
.toast.is-up{ opacity:1; transform:translate(-50%, 0); }

/* ── reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .strip__run{ animation:none; }
  *{ transition-duration:.01ms !important; }
}