/* JVO Media — shared styles. Identity Guidelines v1.0 (Notion: Branding). */

:root {
  --ink: #16181A;
  --paper: #FAF8F4;
  --amber: #D98E32;
  --gray: #9A958C;
  --hairline: #E8E4DC;
  --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--ink); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }

/* Type scale */
h1, .display {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 3.5rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
}
h2 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
h3 {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.meta, .label, .chip, .platforms, .footer-meta {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.label { color: var(--gray); margin-bottom: 2rem; }

/* Header — horizontal logo (variant B) + nav */
.site-header {
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 30px; width: auto; }
.nav { display: flex; gap: 26px; }
.nav a {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

/* Hero — ink field */
.hero { background: var(--ink); color: var(--paper); padding: 88px 0 80px; text-align: center; }
.hero .eyebrow { color: var(--gray); margin-bottom: 1.6rem; }
.hero h1 { max-width: 720px; margin: 0 auto; }
.hero h1 .dim { color: var(--gray); font-weight: 700; }
.hero .descriptor { color: var(--gray); max-width: 580px; margin: 1.4rem auto 0; }
.hero-actions { margin-top: 2.4rem; display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 90px;
  margin-bottom: 2.4rem;
}
.waveform span { width: 9px; border-radius: 5px; background: var(--amber); display: block; }
.waveform span:nth-child(1) { height: 30px; }
.waveform span:nth-child(2) { height: 58px; }
.waveform span:nth-child(3) { height: 90px; }
.waveform span:nth-child(4) { height: 58px; }
.waveform span:nth-child(5) { height: 30px; }

/* Buttons */
.btn {
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 13px 26px;
  border-radius: 8px;
}
.btn:hover { background: var(--white); color: var(--ink); }
/* The default .btn is paper-on-ink, so it vanishes on a paper page. */
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { background: var(--ink); color: var(--paper); opacity: 0.88; }
.page-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 1.8rem; }
/* Reading measure without .prose's centring, so short copy stays flush with the page heading */
.narrow { max-width: 620px; }
.minor { font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 1.05rem; }
.hero .minor:hover, .band .minor:hover { color: var(--paper); }

/* Sections */
section { padding: 72px 0; }
.prose { max-width: 660px; }
.prose p + p { margin-top: 1rem; }
.prose .more { margin-top: 1.4rem; }

/* Show artwork — swap by replacing the square file in assets/art/ (400px+). */
.art {
  display: block;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  background: var(--ink);
}
.art.pending {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--ink);
  color: var(--gray);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}

/* Show cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
/* The grid never exceeds two columns — 832px of content can't fit three 320px
   tracks — so an odd last card is always alone on its final row. Let it span
   instead of leaving a hole. Driven by parity rather than a hardcoded count, so
   it switches itself off when the roster goes even again. */
.cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 28px 26px;
}
.card h3 { margin: 0.6rem 0 0.6rem; }
.chip { color: var(--gray); }
.chip::before { content: "●"; margin-right: 0.6em; font-size: 8px; vertical-align: 1px; }
.chip.live { color: var(--amber); }
.kicker { color: var(--gray); margin-top: 0.8rem; font-size: 13.5px; }
.platforms { margin-top: 1.2rem; line-height: 2; }
.platforms a { margin-right: 1.6em; }
.lane { color: var(--gray); }
.stat { color: var(--gray); }

/* Full-width show entries (shows page) */
.show {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 32px 30px;
  margin-bottom: 20px;
}
.show h3 { margin: 0.6rem 0; }
.show .series { border-left: 2px solid var(--hairline); padding-left: 18px; margin-top: 1.3rem; }
/* Artwork + status/title as one header row — shared by cards and full-width entries */
/* Top-aligned with a fixed offset, not centered: the status/title pair must start
   at the same height in every card even when a long title wraps to two lines. */
.show-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 1.2rem; }
.show-head-text { padding-top: 12px; }
.show-head .art { width: 112px; height: 112px; }
.show-head h3 { margin: 0.45rem 0 0; }
.card .show-head { gap: 18px; }
.card .show-head .art { width: 96px; height: 96px; }
/* Addresses and destination rows are set in mono so they read as data rather
   than prose. The contact line brackets the name against the mono lane label
   above it, and the trailing links row takes the same treatment so a card's
   two mono rows match. Lowercase, unlike the uppercase .meta/.platforms group
   — domains and addresses are read, not scanned as labels. */
.show-head-text .contact,
.card .links {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
}
.show-head-text .contact { margin-top: 0.4rem; }
/* On the ink card this row is the action, not a footnote — at 12.5px it sat
   below the 15.5px body copy above it and read as an afterthought. Only weight
   500 of the mono is loaded, so presence has to come from size. */
.card.ink .links { font-size: 17px; }

/* About */
.prose figure { margin: 1.9rem 0; }
.prose figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
/* Square so the image clears at the paragraph break instead of leaving the next
   paragraph with a hanging indent. Sized against the paragraph it sits beside. */
/* 1rem keeps the paragraph rhythm; +6px is an optical nudge. Box-aligning the
   image to the paragraph leaves it sitting high, because line-height puts
   half-leading above the text and the cap height starts lower still. */
.prose figure.float { float: left; width: 220px; margin: calc(1rem + 6px) 1.6rem 0.7rem 0; }
/* A figure between two paragraphs breaks `p + p`, so the following paragraph
   loses its top margin — restore it, and match it on the float so image and
   text start at the same height. */
.prose figure + p { margin-top: 1rem; }
.prose::after { content: ""; display: table; clear: both; }
.sig { margin-top: 1.4rem; color: var(--gray); }
.sig img { display: block; height: 56px; width: auto; margin-bottom: 0.4rem; }
.mission {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: 660px;
}
.card .links { margin-top: 1rem; }
.card.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card.ink a:hover { color: var(--paper); }

/* Ink band (work-with-us CTA) + footer */
.band { background: var(--ink); color: var(--paper); text-align: center; padding: 80px 0 0; }
.band h2 { color: var(--paper); }
.band .pitch { color: var(--gray); max-width: 580px; margin: 0 auto; }
.band .cta {
  display: inline-block;
  margin-top: 1.6rem;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}
.band .cta:hover { color: var(--paper); }
.band .band-actions { margin-top: 0.6rem; }
.site-footer { border-top: 1px solid rgba(250, 248, 244, 0.14); margin-top: 64px; padding: 32px 0 48px; }
.band .site-footer { border-top-color: rgba(250, 248, 244, 0.14); }
.footer-meta { color: var(--gray); line-height: 2; }

/* Paper footer (subpages without an ink band) */
.sub-footer { border-top: 1px solid var(--hairline); margin-top: 72px; padding: 32px 0 48px; }

/* Page intro (subpages) */
.page-intro { padding: 64px 0 0; }
.page-intro h1 { font-size: clamp(2.1rem, 5vw, 2.8rem); }
.page-intro .label { margin-bottom: 1.2rem; }

@media (max-width: 640px) {
  .hero { padding: 64px 0 56px; }
  section { padding: 56px 0; }
  .band { padding-top: 64px; }
  .show-head, .card .show-head { gap: 16px; }
  .show-head .art, .card .show-head .art { width: 88px; height: 88px; }
  .prose figure.float { float: none; width: 100%; margin: 1.6rem 0; }
}