/* ============================================================
   Tamerix -- homepage stylesheet
   Loaded only by website-blog/index.html.
   Owns the collection grid, essay/video cards, and YouTube-style
   carousel rows.
   ============================================================ */

/* ============================================================
   Hero (homepage-only -- larger and more dramatic than the
   shared .hero in core.css; we override here)
   ============================================================ */

.home-hero {
  position: relative;
  padding: 96px 0 72px;
  min-height: 480px;
  overflow: hidden;
}

/* the ornament: shared SVG file as a background image, with a CSS-gradient
   fallback layered beneath so the page still has visual depth even if the
   SVG fails to load. The url() path is relative to THIS CSS file's location,
   not to the HTML page that loaded it -- so it resolves identically whether
   the page is served at `/`, `/foo`, or `/foo/bar/baz`. */
.home-hero-ornament {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background:
    url(./hero-ornament.svg) center/cover no-repeat,
    radial-gradient(circle at 22% 28%, rgba(30, 58, 138, 0.18), transparent 55%),
    radial-gradient(circle at 80% 78%, rgba(180, 83, 9, 0.16), transparent 55%);
}

.home-hero-content {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* wordmark + thin separator + eyebrow on one line, baseline-aligned so the
   bottoms of the two text runs match (cleanest typographic fit when the two
   font sizes differ). The separator is a real 1px-wide muted vertical line
   centered against the cap-height of the wordmark. */
.home-hero-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 64px;
  flex-wrap: wrap;
}
.home-hero-wordmark {
  display: inline;
  margin: 0;
  font-size: 19px;
  line-height: 1;
}
.home-hero-line .sep {
  align-self: baseline;
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--muted);
  flex: 0 0 1px;
  /* lift slightly so the bar spans baseline -> cap-height of the wordmark */
  position: relative;
  top: 1px;
}

.home-hero-mark {
  display: inline;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin: 0;
  line-height: 1;
}

.home-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 14ch;
}

.home-hero .subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.45;
  color: var(--muted);
  max-width: 36ch;
  margin: 0 0 36px;
}

.home-hero .byline {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}
.home-hero .byline a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-cool);
  padding-bottom: 1px;
}
.home-hero .byline a:hover {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

/* (the older .home-hero-mark + ::before dot block was removed; now styled
   inline alongside .home-hero-line above) */

@media (max-width: 700px) {
  .home-hero { padding: 56px 0 48px; min-height: 320px; }
  .home-hero-content { padding: 0 18px; }
  .home-hero h1 { font-size: clamp(40px, 12vw, 64px); letter-spacing: -0.025em; }
  .home-hero .subtitle { font-size: 17px; max-width: 100%; }
  .home-hero .byline { font-size: 13px; }
  /* hero line: tighter gap; smaller wordmark and eyebrow */
  .home-hero-line { gap: 10px; margin: 0 0 40px; }
  .home-hero-wordmark { font-size: 17px; }
  .home-hero-line .sep { height: 12px; }
  .home-hero-mark { font-size: 10px; letter-spacing: 0.14em; }
  /* collection heads: smaller */
  .collection-head { margin: 56px 0 0; padding-bottom: 8px; }
  .collection-head h2 { font-size: clamp(28px, 7vw, 36px); }
  .collection-head .lede { font-size: 11px; }
  /* row heads: smaller */
  .row-head { margin-bottom: 8px; }
}

@media (max-width: 480px) {
  .home-hero { padding: 40px 0 32px; min-height: 260px; }
  .home-hero-content { padding: 0 14px; }
  .home-hero h1 { font-size: clamp(34px, 13vw, 52px); }
  .home-hero .subtitle { font-size: 16px; }
  .home-hero-line { margin-bottom: 32px; }
  .home-hero-wordmark { font-size: 16px; }
  .home-hero-mark { letter-spacing: 0.12em; }
  /* video / essay cards take ~full available width */
  .carousel-track > * { flex-basis: calc(100vw - 56px); max-width: 320px; }
  /* less aggressive collection top margin */
  .collection-head { margin-top: 40px; }
  .row-head h3 { font-size: 12px; }
}

/* ============================================================
   404 page (reuses .home-hero shell + a small CTA + secondary nav)
   ============================================================ */

.lost-actions {
  margin: 32px 0 8px;
}
.lost-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  letter-spacing: 0.02em;
  transition: background 140ms ease, transform 140ms ease;
}
.lost-cta:hover {
  background: #1e3a8a;
  transform: translateY(-1px);
}
.lost-cta:focus { outline: 2px solid #1e3a8a; outline-offset: 3px; }

.lost-links { margin: 32px 0 0; max-width: 44ch; }
.lost-links-head {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 12px;
}
.lost-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lost-links li {
  margin: 8px 0;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.lost-links a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-cool);
  padding-bottom: 1px;
  font-weight: 500;
}
.lost-links a:hover {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

@media (max-width: 700px) {
  .lost-cta { padding: 10px 18px; font-size: 13px; }
  .lost-links li { font-size: 13.5px; }
}

/* ============================================================
   Section header for each homepage collection (Videos, Issues)
   Visually distinct from per-row .row-head h3: bigger, heavier,
   sits above a bold ink rule -- magazine section break feel.
   ============================================================ */

.collection-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 80px 0 0;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
  gap: 12px;
}
.collection-head h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
}
.collection-head .lede {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* legacy responsive grid (kept in case used) */
.collection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
  gap: 32px;
  margin-top: 48px;
  margin-bottom: 64px;
  justify-content: start;
}

/* ============================================================
   Essay card (issues collection)
   ============================================================ */

.essay-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-cool);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms ease, border-color 140ms ease;
}
.essay-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.essay-card .cover {
  aspect-ratio: 4 / 3;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.essay-card .cover svg,
.essay-card .cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.essay-card .meta {
  padding: 18px 20px 22px;
}
.essay-card .meta .eyebrow {
  display: block;
  margin-bottom: 8px;
}
.essay-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--ink);
  line-height: 1.2;
}
.essay-card .summary {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.essay-card .footline {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-weight: 600;
}
.essay-card .footline .live { color: var(--accent); }
.essay-card[data-status="soon"] {
  opacity: 0.62;
  pointer-events: none;
}

/* ============================================================
   Video card (videos collection)
   ============================================================ */

.video-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-cool);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 140ms ease, border-color 140ms ease;
}
.video-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.video-card .thumb {
  aspect-ratio: 16 / 9;
  background: var(--accent-soft);
  background-size: cover;
  background-position: center;
  position: relative;
}
.video-card .thumb::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(12, 28, 44, 0.78);
}
.video-card .thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -10px 0 0 -6px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #ffffff;
  z-index: 1;
}
.video-card .thumb.placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      var(--accent-soft) 0,
      var(--accent-soft) 12px,
      var(--surface) 12px,
      var(--surface) 24px
    );
}
.video-card .meta { padding: 16px 18px 20px; }
.video-card .meta .eyebrow {
  display: block;
  margin-bottom: 6px;
}
.video-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.3;
}
.video-card .summary {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.video-card .footline {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: 600;
}

/* ============================================================
   YouTube-style carousel rows (one per category)
   ============================================================ */

.carousel-row { margin: 32px 0 0; }

.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.row-head h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  color: var(--ink);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}
.row-head .lede {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
}
.row-head .count {
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 600;
}

.carousel-wrap { position: relative; }

.carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-cool) transparent;
  padding: 4px 4px 12px;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-track { background: transparent; }
.carousel-track::-webkit-scrollbar-thumb {
  background: var(--hairline-cool);
  border-radius: 3px;
}
.carousel-track > * {
  flex: 0 0 320px;
  scroll-snap-align: start;
}
@media (max-width: 700px) {
  .carousel-track > * { flex-basis: 280px; }
}

.carousel-arrow {
  position: absolute;
  top: calc(50% - 8px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline-cool);
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 2px 12px rgba(12, 28, 44, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1;
  padding: 0 0 2px 0;
  transition: opacity 120ms ease, transform 120ms ease, border-color 120ms ease;
}
.carousel-arrow:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.carousel-arrow:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.carousel-arrow.left  { left:  -16px; }
.carousel-arrow.right { right: -16px; }
.carousel-arrow:disabled,
.carousel-arrow[aria-disabled="true"] {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .carousel-arrow { display: none; }
  .carousel-track { padding-left: 16px; padding-right: 16px; }
}