/* The landing page's own stylesheet. It shares the player's palette so the
 * door and the room feel like one place, but none of its layout — the player
 * is a fixed-viewport instrument, this is a document that scrolls. */

@font-face {
  font-family: Vazirmatn;
  src: url("assets/fonts/vazirmatn-var.woff2") format("woff2-variations"),
       url("assets/fonts/vazirmatn-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0d1017;
  --bg-raise: #151a24;
  --bg-card: #1b212e;
  --line: #262e3d;
  --text: #e8ecf4;
  --muted: #8e98ab;
  --accent: #ffd166;
  --good: #2fd67a;
  --blue: #6aa9ff;
  --radius: 14px;
  --font-ui: Vazirmatn, ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(1200px 700px at 80% -10%, #1a2233 0%, transparent 60%), var(--bg);
  color: var(--text);
  font: 15px/1.65 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---- top bar ---- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
}

.brand { font-size: 1.15rem; font-weight: 700; }
.brand-mark { margin-inline-end: 4px; }

.topnav { display: flex; align-items: center; gap: 18px; }
.topnav a { color: var(--muted); }
.topnav a:hover { color: var(--text); }
.topnav a.is-here { color: var(--accent); }
/* The piano light: shown only while a MIDI instrument is plugged in. */
.topnav a.midi-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(47, 214, 122, 0.45);
  border-radius: 999px;
  color: var(--good);
  font-size: 0.85rem;
  position: relative;
}
.topnav a.midi-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 8px rgba(47, 214, 122, 0.9);
}

.topnav .cta {
  color: #14181f;
  background: var(--accent);
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
}
.topnav .cta:hover { color: #14181f; filter: brightness(1.06); }

/* ---- hero ---- */

.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 20px 12px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  line-height: 1.35;
  font-weight: 800;
}

.hero-sub {
  margin: 0 auto 28px;
  max-width: 620px;
  color: var(--muted);
  font-size: 1.05rem;
}

/* The search box is the promise of the page; it gets the size of one. */
.search {
  display: flex;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.search:focus-within { border-color: var(--blue); }

.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  padding: 10px 16px;
  outline: none;
}
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search button {
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  background: var(--accent);
  color: #14181f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.search button:hover { filter: brightness(1.06); }

.hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.hero-stats span::before { content: "·"; margin-inline-end: 8px; color: var(--line); }
.hero-stats span:first-child::before { content: none; }

/* ---- category chips ---- */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin: 26px auto 6px;
  padding: 0 20px;
}

.chips a {
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-raise);
  color: var(--muted);
  font-size: 0.95rem;
}
.chips a:hover { color: var(--text); border-color: var(--blue); }

/* ---- shelves ---- */

.catalog {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px 40px;
}

.cat { margin-top: 34px; }
.cat h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  font-weight: 800;
}
.cat .count {
  margin-inline-start: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

/* Category shelves scroll sideways; the closing section is a wrapping grid. */
.row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 168px;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.row .card { scroll-snap-align: start; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

/* ---- song cards ---- */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--blue); }

.cover {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--bg-raise);
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
  min-height: 92px;
}

.card-title {
  font-weight: 700;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-latin,
.card-artist {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.78rem;
}

.level { color: var(--muted); }
.level-1 { color: var(--good); }
.level-3 { color: var(--accent); }

.badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.free { background: rgba(47, 214, 122, 0.14); color: var(--good); }
.badge.price { background: rgba(255, 209, 102, 0.14); color: var(--accent); }
.badge.premium { background: rgba(138, 106, 201, 0.2); color: #b9a3ec; }
.badge.book { background: rgba(106, 169, 255, 0.14); color: var(--blue); }

.search-empty {
  margin: 18px 0;
  color: var(--muted);
  text-align: center;
}
.search-empty a { color: var(--blue); }

/* ---- the address that names nothing ---- */

.notfound { padding-bottom: 46px; }

/* Big enough to be the answer at a glance, in Persian digits like every other
   number on the site, and hidden from screen readers — the heading below says
   the same thing in words. */
.notfound-code {
  margin: 0 0 10px;
  font-size: clamp(3.2rem, 11vw, 5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: 0.9;
}

.notfound-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 26px 0 0;
}
.notfound-links a { color: var(--blue); }
.notfound-links a:hover { text-decoration: underline; }

/* ---- footer ---- */

.foot {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding: 26px 20px 40px;
  text-align: center;
  color: var(--muted);
  font-size: 0.92rem;
}
.foot p { max-width: 640px; margin: 0 auto 12px; }
/* It wraps: six links do not fit one row on a phone, and a row that will not
   wrap made the whole page scroll sideways. */
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.foot a { color: var(--blue); }

/* Where to find us, as opposed to where else this site goes. Muted rather
   than link-blue, and set apart by a line of space: these leave the site, and
   should not compete with the navigation that does not. */
.foot .social {
  margin-top: 16px;
  gap: 18px;
  flex-wrap: wrap;
}
.foot .social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
}
.foot .social a:hover { color: var(--text); }
.foot .social svg { flex: none; } /* WebKit shrinks a flexed svg past its size */

/* Iran's trust seal. Their image, at their own proportions — capped so a tall
   badge cannot become the biggest thing on the page, and given the pointer
   their inline style would have set if the CSP allowed one. */
.enamad { margin-top: 22px; }
.enamad img { cursor: pointer; max-height: 110px; width: auto; }

@media (max-width: 560px) {
  /* The narrow bar keeps the button and the one section link; the rest of
     the navigation lives in the footer. */
  .topnav a:not(.cta):not(.keep):not(.midi-badge) { display: none; }
  .topnav a.midi-badge span { display: none; }
  .hero { padding-top: 26px; }
  .hero h1 { margin-bottom: 8px; }
  .hero-sub { margin-bottom: 18px; }
  .hero-stats { margin-top: 16px; }
  .row { grid-auto-columns: 138px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .search button { padding: 10px 18px; }

  /*
   * One line that scrolls, not four that wrap.
   *
   * Twelve category chips wrapped to four rows on a phone and took most of
   * the first screen — so the songs, which are the reason anybody opened the
   * page, started below the fold. A row whose whole job is to send you to a
   * shelf should not be the thing standing between you and the shelves.
   *
   * Left-aligned rather than centred: a centred row that overflows hides its
   * first item as well as its last, and starts you in the middle of a list
   * you did not know was a list. Running off one edge is the cue that it
   * moves.
   */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    margin-top: 18px;
    scrollbar-width: none;
    /* The scroll happens inside the padding, so the first chip still clears
       the edge and the last one can be reached. */
    scroll-padding-inline: 20px;
  }
  .chips::-webkit-scrollbar { display: none; }
  /* Without this a flex row with nowrap squeezes every chip instead of
     overflowing, and twelve of them become twelve slivers. */
  .chips a { flex: 0 0 auto; }
}

/* Two quick taps are a tap, not a zoom request — see the long note in
   styles.css. Pinch-zoom is untouched: this is a page of prose, and reading it
   on a phone is exactly when someone has a reason to zoom in. */
html { touch-action: manipulation; }

/* No loupe on a long press. Holding a finger on a card or a heading was raising
   iOS's magnifier and a selection it never wanted; the words people actually
   copy — a song's name, an email address — stay selectable. */
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

p, li, td, h1, h2, h3, a[href^="mailto:"], input, textarea, [contenteditable] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* The crowd's score on a card. Absent, not zero, until somebody has rated it. */
.card-meta .stars {
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* The courses shelf: taught, not uploaded. */
.badge.course { background: rgba(255, 209, 102, 0.14); color: var(--accent); }
.cat-blurb { margin: -6px 0 12px; color: var(--muted); font-size: 14px; }