/* 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 {
  /* Lighter translucent overlay so the collage backdrop reads through more strongly */
  background: linear-gradient(180deg, rgba(242,242,245,.45) 0%, rgba(220,220,224,.45) 100%), #E8E8EB;
  color: #1a1a1c;
  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(94,31,145,0) 0%, #5E1F91 22%, #A78BFA 50%, #5E1F91 78%, rgba(94,31,145,0) 100%) 1;
  position: relative;
}

/* Page-wide blurred grayscale backdrop — bg-image set per-page by site-chrome.js inline */
.page-bg-blur { position:fixed; inset:0; z-index:0; background:center/cover no-repeat; filter:grayscale(100%) blur(5px) brightness(1.08); opacity:.47; pointer-events:none; }
.page-header, .page-hero, .page-main, .page-footer { position: relative; z-index: 1; }

/* iVOD corner bug — top-LEFT (OTM convention), links 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(94,31,145,.6)); }
@media (max-width: 680px) { .tv-bug { height: 30px; top: 8px; left: 9px; } }

/* Hamburger + slide-in menu — top-RIGHT (OTM convention) */
.site-burger { position: fixed; top: 10px; right: 14px; z-index: 101; width: 42px; height: 42px; background: rgba(94,31,145,.18); border: 1px solid rgba(94,31,145,.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(94,31,145,.32); border-color: #5E1F91; transform: scale(1.05); }
.site-burger span { width: 22px; height: 2px; background: #7333AD; 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(248,248,251,.97); border-left: 2px solid; border-image: linear-gradient(180deg, rgba(94,31,145,0) 0%, #5E1F91 35%, #A78BFA 50%, #5E1F91 65%, rgba(94,31,145,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: #1a1a1c; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.08); transition: color .2s, padding-left .2s, background .2s; }
.site-menu a:hover { color: #7333AD; padding-left: 26px; background: rgba(94,31,145,.06); }
.site-menu a.active { color: #7333AD; border-left: 3px solid #7333AD; 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(94,31,145,.35)); 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: -56px; }
@media (max-width: 680px) { .page-hero { margin-top: -42px; } }
.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: #1a1a1c; line-height: 1.05; }
.page-hero h1 .gradient-brand { background: linear-gradient(135deg, #D6BFEC 0%, #7333AD 48%, #4A1773 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-hero .eyebrow { color: #7333AD; font-size: .55rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px; }
.page-hero p.lede { color: rgba(0,0,0,.72); 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: #7333AD; margin: 22px 0 8px; }
.page-main h3 { font-family: 'Inter', sans-serif; font-size: .98rem; font-weight: 700; color: #1a1a1c; margin: 14px 0 4px; }
.page-main p { color: rgba(0,0,0,.78); line-height: 1.6; margin: 0 0 12px; font-size: .9rem; }
.page-main ul { color: rgba(0,0,0,.78); line-height: 1.65; padding-left: 20px; margin: 0 0 12px; font-size: .9rem; }
.page-main a { color: #7333AD; }
.page-main a:hover { color: #A78BFA; }

/* 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(255,255,255,.85); border: 1px solid rgba(94,31,145,.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, #7333AD 0%, #5E1F91 100%); color: #fff !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(94,31,145,.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(94,31,145,.75); }

/* Footer — single line, minimal */
.page-footer { padding: 16px 24px; text-align: center; color: rgba(0,0,0,.5); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; border-top: 1px solid rgba(94,31,145,.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: #7333AD; margin-bottom: 4px; font-weight: 700; }
.contact-form input,
.contact-form textarea { width: 100%; background: rgba(255,255,255,.85); border: 1px solid rgba(94,31,145,.28); border-radius: 8px; padding: 12px 14px; color: #1a1a1c; font-family: 'Inter', sans-serif; font-size: .95rem; transition: border-color .15s; }
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: #7333AD; }
.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; }