/*
  Enrot — Base styles

  Loads the self-hosted brand fonts and applies the design tokens as
  global defaults, then the site chrome shell (header/footer/nav) and
  the real public components introduced in M3: hero, archive cards
  (grid + horizontal row), the recently-added list, the catalog header,
  the radio detail page (gallery, identity, spec table), and the About
  page. Admin chrome, HTMX partials, and the filter rail arrive with
  the milestones that need them — nothing here is speculative.
*/

@font-face {
  font-family: "Piazzolla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/piazzolla-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Piazzolla";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/piazzolla-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibmplexsans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/ibmplexmono-regular.woff2") format("woff2");
}

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

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--surface-page);
  /* 2-3% paper grain on Vellum only, per brief §2 — a tiny inline noise
     filter, no image asset needed. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-4);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: var(--accent-secondary);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  display: block;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* Double-hairline under section headers — brief §2: "the one deliberate
   flourish in the system." Used sparingly, only where a section title
   actually divides content. */
.rule-double {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  height: 3px;
  margin: 0 0 var(--space-6);
}

/* ---- Site chrome — shared header/footer shell ---- */

.site-header {
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--border-hairline-brass);
}

.site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.site-header__wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-on-dark);
  margin-right: auto;
}

.site-header__wordmark span {
  color: var(--accent-primary);
}

.site-nav {
  display: flex;
  gap: var(--space-5);
}

.site-nav a {
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--space-2) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing);
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.site-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-hairline-brass);
  border-radius: var(--radius-round);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.site-lang-switch a,
.site-lang-switch__current {
  color: var(--accent-primary);
}

.site-lang-switch a {
  opacity: 0.6;
}

.site-lang-switch a:hover {
  opacity: 1;
}

.site-lang-switch__current {
  font-weight: 500;
}

.site-footer {
  border-top: 1px solid var(--border-hairline);
  color: var(--text-primary);
  font-size: 0.85rem;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

.site-footer__sitemap {
  display: flex;
  gap: var(--space-4);
  margin-right: auto;
}

.site-footer__sitemap a {
  color: var(--text-primary);
}

.site-footer .site-lang-switch {
  border-color: var(--border-hairline);
}

.site-footer .site-lang-switch a,
.site-footer .site-lang-switch__current {
  color: var(--text-primary);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---- Buttons ---- */

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-control);
  border: 1px solid var(--accent-primary);
  transition: background-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing);
}

.button--primary {
  background-color: var(--accent-primary);
  color: var(--surface-dark);
}

.button--primary:hover {
  background-color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  color: var(--text-on-dark);
}

/* ---- Section rhythm — 64-96px between major blocks (brief §2) ---- */

.hero,
.home-section,
.catalog-header,
.about-page {
  margin: var(--space-8) 0;
}

/* ---- Home: hero ---- */

.hero {
  max-width: 680px;
  margin-top: var(--space-9);
  margin-bottom: var(--space-9);
}

.hero__index {
  color: var(--accent-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-size: 2.75rem;
}

.hero__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}

/* ---- Home: featured/recent sections ---- */

.home-section__index {
  color: var(--accent-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

/* ---- Archive card — shared by the home featured row, catalog grid,
   and (later) related-radios row (brief §7: "same component as the
   Catalog grid") ---- */

.archive-row {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  scroll-snap-type: x proximity;
}

.archive-row .archive-card {
  flex: 0 0 240px;
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

.archive-card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-resting);
  transition: box-shadow var(--motion-duration) var(--motion-easing),
    transform var(--motion-duration) var(--motion-easing);
  scroll-snap-align: start;
}

.archive-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.archive-card__link {
  display: block;
  color: inherit;
}

.archive-card__photo {
  aspect-ratio: 4 / 3;
  background-color: var(--surface-page);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border-hairline);
}

.archive-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-card__photo-empty {
  color: var(--text-primary);
  opacity: 0.5;
  font-size: 0.75rem;
}

.archive-card__body {
  padding: var(--space-4);
}

.archive-card__model {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-size: 1.1rem;
  margin: 0 0 var(--space-1);
}

.archive-card__meta {
  color: var(--text-primary);
  opacity: 0.75;
  font-size: 0.8rem;
  margin: 0;
}

/* ---- Home: recently added ---- */

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-list__row {
  border-top: 1px solid var(--border-hairline);
}

.recent-list__row:last-child {
  border-bottom: 1px solid var(--border-hairline);
}

.recent-list__row a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  color: inherit;
}

.recent-list__model {
  font-family: var(--font-display);
  color: var(--text-primary);
}

.recent-list__meta {
  color: var(--text-primary);
  opacity: 0.7;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---- Empty state — brief §6: "a quiet Card Paper panel, one italic
   serif line. No illustration." ---- */

.empty-state {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.empty-state p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-primary);
  margin: 0;
}

/* ---- Catalog header ---- */

.catalog-header__index {
  color: var(--accent-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.catalog-header__count {
  color: var(--text-primary);
  opacity: 0.7;
  font-size: 0.85rem;
}

/* ---- Radio detail ---- */

.radio-detail {
  margin: var(--space-8) 0 var(--space-9);
}

.detail-gallery__primary {
  background-color: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
  overflow: hidden;
  max-width: 70%;
}

.detail-gallery__primary--empty {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  opacity: 0.5;
}

.detail-gallery__primary img {
  width: 100%;
  height: auto;
}

.detail-gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.detail-gallery__thumbs img {
  width: 88px;
  height: 66px;
  object-fit: cover;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-panel);
}

.detail-gallery__caption {
  margin-top: var(--space-3);
  color: var(--accent-secondary);
  font-size: 0.75rem;
}

.detail-identity {
  margin: var(--space-6) 0 var(--space-5);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  padding: var(--space-5) 0;
}

.detail-identity h1 {
  font-size: 2.25rem;
  margin-bottom: var(--space-2);
}

.detail-identity__meta {
  color: var(--text-primary);
  opacity: 0.75;
  font-size: 0.9rem;
}

.detail-section {
  margin: var(--space-7) 0;
  max-width: 720px;
}

.detail-section h2 {
  font-size: 1.15rem;
}

.detail-overview p {
  font-size: 1.05rem;
}

.detail-collectors-note__text {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-primary);
}

.detail-provenance p {
  color: var(--text-primary);
  opacity: 0.6;
  font-size: 0.85rem;
}

/* ---- Specification table — brief §7: "mono values, hairline row
   dividers, no zebra striping." ---- */

.spec-table {
  margin: 0;
  max-width: 560px;
}

.spec-table__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-hairline);
}

.spec-table__row:last-child {
  border-bottom: 1px solid var(--border-hairline);
}

.spec-table dt {
  color: var(--text-primary);
  opacity: 0.7;
  font-size: 0.85rem;
}

.spec-table dd {
  margin: 0;
  color: var(--text-body);
  font-size: 0.9rem;
  text-align: right;
}

/* ---- Translation-pending badge (M7) — shown on the radio detail page
   and the About page under es/en when falling back to the Catalan
   original. Brief §4: "CA · original — EN translation pending." ---- */

.badge-translation-pending {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--signal);
  border: 1px solid var(--signal);
  border-radius: var(--radius-control);
  padding: 2px var(--space-2);
  margin-left: var(--space-2);
}

/* ---- About page ---- */

.about-page {
  max-width: 680px;
}

.about-page__index {
  color: var(--accent-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

.about-page__lede {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-primary);
}