/* shellz.fyi */
:root {
  --ink: #122420;
  --paper: #f4efe4;
  --cream: #fff9ed;
  --coral: #ff6b4a;
  --aqua: #7ddfd2;
  --blue: #254b67;
  --acid: #d9ee72;
  --line: rgba(18, 36, 32, .18);
  --shadow: 0 22px 50px rgba(18, 36, 32, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(125,223,210,.28), transparent 28%),
    radial-gradient(circle at 95% 10%, rgba(255,107,74,.16), transparent 24%),
    var(--paper);
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.55;
}
button, a { font: inherit; }
a { color: inherit; }
img, svg { display:block; max-width:100%; }
::selection { background: var(--acid); color: var(--ink); }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  z-index: 99;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.site-header {
  width: min(1180px, calc(100% - 32px));
  margin: 22px auto 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,249,237,.76);
  backdrop-filter: blur(12px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  position: sticky;
  top: 14px;
  z-index: 50;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-weight:500;
  letter-spacing:-.04em;
}
.brand-mark {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
}
nav { display:flex; gap:22px; }
nav a {
  text-decoration:none;
  font-size:.85rem;
  opacity:.72;
}
nav a:hover { opacity:1; }

.hero {
  width:min(1180px, calc(100% - 32px));
  margin: 72px auto 46px;
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  align-items:center;
  gap:50px;
  min-height:620px;
}
.eyebrow,.section-label,.card-meta {
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.68;
}
.hero h1,.section h2,.shell-card h3,.fact-card h3 {
  font-family:"Fraunces", Georgia, serif;
}
.hero h1 {
  font-size:clamp(4rem, 8.5vw, 7.5rem);
  line-height:.88;
  letter-spacing:-.065em;
  margin:.12em 0 .28em;
  max-width:850px;
}
.hero h1 em {
  font-style:italic;
  color:var(--coral);
}
.lede {
  max-width:680px;
  font-size:1.05rem;
  opacity:.8;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

.button {
  border:1px solid var(--ink);
  border-radius:999px;
  padding:12px 18px;
  cursor:pointer;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(18,36,32,.12); }
.primary { background:var(--ink); color:var(--cream); }
.ghost { background:transparent; }
.dark { background:var(--ink); color:white; border-color:var(--ink); }

.hero-shell {
  min-height:500px;
  border:1px solid var(--line);
  border-radius:42% 58% 50% 50% / 46% 44% 56% 54%;
  background: linear-gradient(145deg, var(--aqua), #bdebd1 45%, var(--acid));
  padding:40px;
  position:relative;
  display:grid;
  place-items:center;
  box-shadow:var(--shadow);
  transform:rotate(2deg);
}
.hero-shell svg { width:88%; transform:rotate(-8deg); }
.shell-fill {
  fill:none;
  stroke:rgba(255,249,237,.65);
  stroke-width:62;
  stroke-linecap:round;
}
.shell-line {
  fill:none;
  stroke:var(--ink);
  stroke-width:8;
  stroke-linecap:round;
}
.shell-ridge {
  fill:none;
  stroke:rgba(18,36,32,.45);
  stroke-width:5;
  stroke-linecap:round;
}
.specimen-tag {
  position:absolute;
  right:24px;
  bottom:24px;
  background:var(--cream);
  border:1px solid var(--ink);
  padding:13px 15px;
  transform:rotate(-3deg);
  box-shadow:5px 5px 0 var(--ink);
}
.specimen-tag span,.specimen-tag small { display:block; font-size:.7rem; }
.specimen-tag strong { display:block; font-family:"Fraunces", Georgia, serif; font-size:1.25rem; }

.ticker {
  overflow:hidden;
  border-block:1px solid var(--ink);
  background:var(--acid);
  padding:12px 0;
}
.ticker-track {
  display:flex;
  gap:24px;
  width:max-content;
  animation:ticker 28s linear infinite;
  font-size:.83rem;
}
@keyframes ticker { to { transform:translateX(-50%); } }

.section {
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:110px 0;
  border-bottom:1px solid var(--line);
}
.intro-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
  margin-top:26px;
}
.section h2 {
  font-size:clamp(2.6rem, 5vw, 5.4rem);
  line-height:.98;
  letter-spacing:-.05em;
  margin:0;
}
.copy { font-size:1.05rem; }
.copy p:first-child { margin-top:0; }

.stat-row {
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.stat-row article {
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  background:rgba(255,249,237,.45);
}
.big {
  display:block;
  font-family:"Fraunces", Georgia, serif;
  font-size:2.8rem;
  letter-spacing:-.06em;
  color:var(--blue);
}
.stat-row p { margin:.4rem 0 0; opacity:.72; }

.section-heading {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:34px;
}
.section-heading h2 { max-width:770px; margin-top:18px; }
.filter-wrap {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.filter {
  border:1px solid var(--ink);
  background:transparent;
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
}
.filter.active,.filter:hover { background:var(--ink); color:white; }

.shell-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.shell-card {
  background:var(--cream);
  border:1px solid var(--line);
  padding:18px;
  border-radius:28px;
  min-height:460px;
  transition:transform .18s ease, opacity .2s ease;
}
.shell-card:hover { transform:translateY(-6px) rotate(-.3deg); }
.shell-card.hidden { display:none; }
.shell-card h3 {
  font-size:2.05rem;
  line-height:1;
  margin:.5rem 0 .8rem;
  letter-spacing:-.035em;
}
.shell-card p { opacity:.78; }
.card-art {
  height:210px;
  border-radius:18px;
  margin-bottom:17px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(18,36,32,.1);
}
.card-art span { display:block; position:relative; }

.cowrie { background:#f1c9ac; }
.cowrie span {
  width:120px; height:170px;
  background:#fff3d6;
  border:5px solid var(--ink);
  border-radius:48% 52% 48% 52% / 55% 55% 45% 45%;
  transform:rotate(13deg);
  box-shadow:inset 0 0 0 12px rgba(255,107,74,.12);
}
.cowrie span:after {
  content:"";
  position:absolute; left:53px; top:18px;
  width:10px; height:135px;
  background:var(--ink); border-radius:999px;
}

.cone { background:#b9e4e1; }
.cone span {
  width:150px; height:170px;
  clip-path:polygon(20% 0,80% 0,100% 100%,0 100%);
  background:
    repeating-linear-gradient(18deg, transparent 0 14px, rgba(18,36,32,.25) 15px 18px),
    #efe1bb;
  border-radius:40% 40% 14% 14%;
  transform:rotate(-8deg);
  outline:5px solid var(--ink);
}

.murex { background:#d7cbe8; }
.murex span {
  width:115px; height:165px;
  background:#f4d9c8;
  border:5px solid var(--ink);
  border-radius:50% 50% 44% 56% / 42% 48% 52% 58%;
  box-shadow:
    -24px -8px 0 -12px #f4d9c8,
    24px 5px 0 -13px #f4d9c8,
    -18px 42px 0 -13px #f4d9c8,
    25px 49px 0 -12px #f4d9c8;
  transform:rotate(10deg);
}

.scallop { background:#f6b4a4; }
.scallop span {
  width:170px; height:140px;
  clip-path:polygon(50% 0, 62% 8%, 74% 2%, 82% 15%, 96% 14%, 94% 32%, 100% 47%, 90% 56%, 88% 72%, 70% 78%, 60% 95%, 50% 82%, 40% 95%, 30% 78%, 12% 72%, 10% 56%, 0 47%, 6% 32%, 4% 14%, 18% 15%, 26% 2%, 38% 8%);
  background:
    repeating-linear-gradient(100deg, rgba(18,36,32,.18) 0 4px, transparent 4px 16px),
    #fbe7bc;
  border-radius:50%;
}

.oyster { background:#b6d5c8; }
.oyster span {
  width:160px; height:145px;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, #d8d0c2 0 8px, #b9b0a4 9px 13px);
  clip-path:polygon(22% 0, 61% 4%, 91% 23%, 100% 58%, 78% 92%, 40% 100%, 12% 86%, 0 49%);
  border-radius:40%;
  transform:rotate(-12deg);
}

.nautilus { background:#c8e7f3; }
.nautilus span {
  width:165px; height:165px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 17%, var(--ink) 18% 20%, transparent 21% 35%, var(--ink) 36% 38%, transparent 39% 53%, var(--ink) 54% 56%, transparent 57%),
    conic-gradient(from 20deg, #f4e0c4 0 12%, #d9b68f 12% 25%, #f4e0c4 25% 38%, #d9b68f 38% 52%, #f4e0c4 52% 65%, #d9b68f 65% 78%, #f4e0c4 78% 100%);
  border:5px solid var(--ink);
}

.chip-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.chip-row span {
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  font-size:.7rem;
  background:white;
}

.weird-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:32px;
}
.fact-card {
  border:1px solid var(--ink);
  border-radius:26px;
  padding:24px;
  min-height:240px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  background:var(--cream);
}
.fact-card.feature { background:var(--aqua); }
.fact-number {
  width:42px; height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--ink);
  color:white;
}
.fact-card h3 { font-size:2rem; margin:0 0 10px; }
.fact-card p { margin:0; opacity:.78; }

.sound-myth {
  text-align:center;
  background:var(--coral);
  width:100%;
  max-width:none;
  padding-inline:max(16px, calc((100vw - 1180px)/2));
  color:#1b211e;
}
.sound-myth h2 { max-width:950px; margin:18px auto 24px; }
.sound-myth > p { max-width:760px; margin:0 auto 26px; }
.myth-badge {
  display:inline-block;
  border:1px solid var(--ink);
  padding:8px 12px;
  border-radius:999px;
  background:var(--cream);
  box-shadow:4px 4px 0 var(--ink);
}
.myth-result { min-height:2.5em; font-weight:500; }

.beach-grid {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:80px;
  align-items:start;
  margin-top:28px;
}
.beach-grid h2 { margin-bottom:22px; }
.beach-grid p { max-width:620px; opacity:.78; }
.code-list {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ink);
}
.code-list li {
  padding:18px 0;
  border-bottom:1px solid var(--ink);
  display:flex;
  gap:20px;
  align-items:center;
}
.code-list span { opacity:.45; font-size:.75rem; }

.randomizer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  background:var(--blue);
  color:var(--cream);
  border-bottom:0;
  width:min(1180px, calc(100% - 32px));
  margin:70px auto;
  padding:50px;
  border-radius:34px;
}
.randomizer h2 { margin-top:18px; }
.randomizer p { opacity:.8; }
.oracle-button {
  flex:0 0 150px;
  height:150px;
  border-radius:50%;
  border:0;
  background:var(--acid);
  color:var(--ink);
  cursor:pointer;
  display:grid;
  place-items:center;
  align-content:center;
  transition:transform .2s ease;
}
.oracle-button:hover { transform:rotate(8deg) scale(1.04); }
.oracle-button span { font-size:3rem; line-height:.8; }
.oracle-button small { margin-top:10px; }

footer {
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:40px 0 70px;
  display:grid;
  grid-template-columns:1fr 1.3fr .9fr;
  gap:30px;
  align-items:start;
  font-size:.8rem;
}
.footer-brand { font-size:1rem; }
.footer-note { opacity:.55; }

@media (max-width: 900px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; margin-top:48px; }
  .hero-shell { min-height:420px; }
  .intro-grid,.beach-grid { grid-template-columns:1fr; gap:30px; }
  .shell-grid { grid-template-columns:1fr 1fr; }
  .section-heading { align-items:start; flex-direction:column; }
  .filter-wrap { justify-content:flex-start; }
  .randomizer { align-items:flex-start; }
  footer { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  .site-header { border-radius:20px; }
  .hero { min-height:auto; }
  .hero h1 { font-size:3.65rem; }
  .hero-shell { min-height:340px; padding:20px; }
  .specimen-tag { right:10px; bottom:10px; }
  .section { padding:78px 0; }
  .stat-row,.shell-grid,.weird-grid { grid-template-columns:1fr; }
  .shell-card { min-height:auto; }
  .randomizer { flex-direction:column; padding:28px; }
  .oracle-button { width:118px; height:118px; flex-basis:118px; }
}