/* Shared OTM site chrome — used by every page except the home (which has its own
   self-contained styling because of the embedded player + EPG complexity). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: linear-gradient(180deg, #161618 0%, #050506 100%);
  color: #e8e8ea;
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, rgba(212,175,55,0) 0%, #D4AF37 22%, #F4C430 50%, #D4AF37 78%, rgba(212,175,55,0) 100%) 1;
}

/* iVOD corner bug — links back to ivodtv.org */
.tv-bug { position: fixed; top: 10px; left: 14px; height: 42px; display: block; z-index: 60; cursor: pointer; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); transition: transform .15s, filter .15s; }
.tv-bug img { height: 100%; width: auto; display: block; }
.tv-bug:hover { transform: scale(1.06); filter: drop-shadow(0 2px 6px rgba(212,175,55,.6)); }
@media (max-width: 680px) { .tv-bug { height: 30px; top: 8px; left: 9px; } }

/* Hamburger + slide-in menu — same component as home */
.site-burger { position: fixed; top: 10px; right: 14px; z-index: 101; width: 42px; height: 42px; background: rgba(212,175,55,.18); border: 1px solid rgba(212,175,55,.4); border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; padding: 0; transition: background .2s, border-color .2s, transform .15s; }
.site-burger:hover { background: rgba(212,175,55,.32); border-color: #D4AF37; transform: scale(1.05); }
.site-burger span { width: 22px; height: 2px; background: #E8C558; border-radius: 1px; transition: transform .25s, opacity .25s; }
.site-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger.open span:nth-child(2) { opacity: 0; }
.site-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 680px) {
  .site-burger { top: 8px; right: 9px; width: 32px; height: 32px; gap: 4px; }
  .site-burger span { width: 16px; height: 1.5px; }
  .site-burger.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .site-burger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}
.site-menu { position: fixed; top: 0; right: 0; width: 220px; height: 100vh; background: rgba(14,14,16,.97); border-left: 2px solid; border-image: linear-gradient(180deg, rgba(212,175,55,0) 0%, #D4AF37 35%, #F4C430 50%, #D4AF37 65%, rgba(212,175,55,0) 100%) 1; transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); z-index: 100; padding: 56px 0 18px; box-shadow: -12px 0 40px rgba(0,0,0,.55); overflow-y: auto; }
.site-menu.open { transform: translateX(0); }
.site-menu a { display: block; padding: 9px 20px; font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: .1em; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .2s, padding-left .2s, background .2s; }
.site-menu a:hover { color: #E8C558; padding-left: 26px; background: rgba(212,175,55,.06); }
.site-menu a.active { color: #E8C558; border-left: 3px solid #E8C558; padding-left: 17px; }
@media (max-width: 680px) { .site-menu { width: 200px; padding-top: 46px; padding-bottom: 14px; } .site-menu a { font-size: .92rem; padding: 8px 18px; letter-spacing: .08em; } }

/* Centered logo header — same 168/128px logo as the homepage. On marketing pages
   we DO NOT want the title overlapping the logo (that's a home-page-only design).
   The image is visually shifted up 10px via position:relative/top — this moves ONLY
   the visible image, not the layout slot, so the title below stays where it is. */
.page-header { display: flex; justify-content: center; padding: 4px 70px 0; }
.page-header a { display: inline-block; }
.page-header img { height: 168px; width: auto; display: block; border-radius: 10px; filter: drop-shadow(0 0 8px rgba(212,175,55,.45)); position: relative; top: -10px; }
@media (max-width: 680px) {
  .page-header { padding: 4px 50px 0; }
  .page-header img { height: 128px; }
}

/* Page hero title — pulled up to close the visual gap between the readable logo
   content and the eyebrow text. The OTM logo's gold arrow extends to all edges of
   the JPEG frame but the main readable text block only fills ~70% — so the lower
   ~30% of the image bounding box is effectively empty visually. Pulling the hero
   up here closes that perceived gap without crossing the visible artwork.
   Tuned by measuring on /distribution/ (2026-05-21). */
.page-hero { text-align: center; padding: 0 24px 16px; margin-top: -32px; }
@media (max-width: 680px) { .page-hero { margin-top: -24px; } }
.page-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.5rem, 3.5vw, 2.1rem); letter-spacing: .04em; margin: 0 0 4px; color: #fff; line-height: 1.05; }
.page-hero h1 .gradient-brand { background: linear-gradient(135deg, #F7E7B0 0%, #E8C558 48%, #B8902A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-hero .eyebrow { color: #E8C558; font-size: .55rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px; }
.page-hero p.lede { color: rgba(255,255,255,.78); font-size: .88rem; max-width: 580px; margin: 8px auto 0; line-height: 1.5; }

/* Main content — body sized for comfortable reading, not over-inflated */
.page-main { flex: 1; max-width: 940px; width: 100%; margin: 0 auto; padding: 4px 24px 50px; }
.page-main h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: .06em; color: #E8C558; margin: 22px 0 8px; }
.page-main h3 { font-family: 'Inter', sans-serif; font-size: .98rem; font-weight: 700; color: #fff; margin: 14px 0 4px; }
.page-main p { color: rgba(255,255,255,.82); line-height: 1.6; margin: 0 0 12px; font-size: .9rem; }
.page-main ul { color: rgba(255,255,255,.82); line-height: 1.65; padding-left: 20px; margin: 0 0 12px; font-size: .9rem; }
.page-main a { color: #E8C558; }
.page-main a:hover { color: #F4C430; }

/* Card grid (used on About, Distribution, Advertising). FIXED 2-column grid above
   540px (never lays out 3+1 imbalanced when there are 4 cards — per `feedback_balance_tile_rows.md`,
   always prefer the column count with smallest row-diff). 1 column on small phones. */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 14px 0; justify-content: center; }
@media (max-width: 540px) { .card-grid { grid-template-columns: 1fr; } }
.card { background: rgba(20,20,24,.6); border: 1px solid rgba(212,175,55,.22); border-radius: 10px; padding: 14px 16px; }
.card h3 { margin-top: 0; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.card p { font-size: .82rem; margin-bottom: 0; }

/* CTA button — solid BLACK text on gold, tight padding, no dead space */
.btn-accent { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #E8C558 0%, #D4AF37 100%); color: #000 !important; font-weight: 800; padding: 8px 18px; border-radius: 9999px; text-decoration: none; transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 18px -6px rgba(212,175,55,.55); border: 0; cursor: pointer; font-family: 'Inter', sans-serif; font-size: .82rem; letter-spacing: .04em; line-height: 1.2; }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -6px rgba(212,175,55,.75); }

/* Footer — single line, minimal */
.page-footer { padding: 16px 24px; text-align: center; color: rgba(255,255,255,.42); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid rgba(212,175,55,.15); }

/* Contact form */
.contact-form { max-width: 560px; margin: 0 auto; display: grid; gap: 14px; }
.contact-form label { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #E8C558; margin-bottom: 4px; font-weight: 700; }
.contact-form input,
.contact-form textarea { width: 100%; background: rgba(10,10,12,.7); border: 1px solid rgba(212,175,55,.28); border-radius: 8px; padding: 12px 14px; color: #fff; font-family: 'Inter', sans-serif; font-size: .95rem; transition: border-color .15s; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: #E8C558; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form .msg { padding: 12px 14px; border-radius: 8px; font-size: .9rem; }
.contact-form .msg.ok { background: rgba(40,150,80,.18); border: 1px solid rgba(120,200,140,.4); color: #c4e9c8; }
.contact-form .msg.err { background: rgba(160,40,40,.18); border: 1px solid rgba(220,80,80,.4); color: #f1c4c4; }