/* One Row — shared stylesheet for dev.onerowcinema.com
 *
 * Palette is the app's own (Woodeys/Theme/Theme.swift) rather than the invite
 * page's: this site is showing the app, so the neons should be the ones on
 * screen in the screenshots. The dusk gradient underneath is shared with the
 * invite page, which is what makes the two read as the same property. */

:root {
  --ground-top: #07050B;
  --ground-mid: #240F34;
  --ground-bottom: #2C1240;

  --neon-blue: #4CC2F5;
  --neon-pink: #F6339C;

  --ink: #F3EEFA;
  --ink-soft: #E4DBEC;
  --ink-muted: #C3B2D2;
  --ink-secondary: #9A86AD;
  --ink-tertiary: #6F5F80;

  /* Surfaces derive from ink at low alpha, so a card picks up the same cast
     as the text sitting on it — same rule the app follows. */
  --surface: rgba(243, 238, 250, 0.045);
  --surface-strong: rgba(243, 238, 250, 0.075);
  --hairline: rgba(243, 238, 250, 0.11);

  --radius: 14px;
  --radius-inner: 12px;

  --measure: 1024px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Anchors from the in-page contents land below the sticky header. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground-top);
  color: var(--ink-soft);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Stops iOS Safari inflating body text in landscape. */
  -webkit-text-size-adjust: 100%;
}

/* The dusk gradient, pinned behind the page. `background-attachment: fixed` is
   the obvious way to do this and is the one thing iOS Safari won't honour: it
   sizes the gradient to the full document instead of the viewport, so a long
   page (the guide) runs out of gradient and ends flat. A fixed pseudo-element
   behind everything holds still on every browser. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ground-top) 0%, #150A20 22%, var(--ground-mid) 62%, var(--ground-bottom) 100%);
}

a { color: var(--neon-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7, 5, 11, 0.72);
  border-bottom: 1px solid var(--hairline);
}

.site-header .inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* The header wordmark is the logo artwork, not text. It needs its own width:
   the hero's rule is scoped to `.hero`, and the PNG is 1544px wide, so without
   this it stretches to fill the whole bar. */
.site-header img.logo {
  width: 130px;
  display: block;
}

.wordmark {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--neon-blue);
  text-shadow: 0 0 14px rgba(76, 194, 245, 0.45);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark:has(img) { line-height: 0; text-shadow: none; }

nav.site-nav {
  display: flex;
  gap: 20px;
  font-size: 13px;
  letter-spacing: 0.4px;
}

nav.site-nav a {
  color: var(--ink-secondary);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
nav.site-nav a:hover { color: var(--ink); text-decoration: none; }
nav.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--neon-pink);
}

/* ---------- layout ---------- */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 20px 96px;
}

/* Marketing hero — centred, and wider than the reading measure. */
.hero {
  text-align: center;
  padding: 40px 0 12px;
}

.hero img.logo {
  width: 230px;
  margin: 0 auto 26px;
  display: block;
}

h1 {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.043em;
  color: var(--ink);
  margin: 0 0 18px;
  text-transform: uppercase;

  
}

.hero p.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 30em;
  margin: 0 auto 32px;
}

h2 {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.042em;
  text-transform: uppercase;
  color: var(--neon-blue);
  margin: 52px 0 14px;
}

h3 {
  font-family: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: 0;
  margin: 30px 0 8px;
}

/* The app's section label: small, uppercase, neon blue, wide tracking. */
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--neon-blue);
  margin: 0 0 10px;
}

p { margin: 0 0 16px; }

ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 9px; }

strong { color: var(--ink); font-weight: 650; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 44px 0;
}

/* ---------- sections ---------- */
#beta {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  margin-top: 44px;
  margin-bottom: 44px;
}

/* ---------- buttons ---------- */

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: var(--neon-pink);
  color: #FFFFFF;
  box-shadow: 0 8px 26px rgba(246, 51, 156, 0.3);
}
.btn-primary:hover { box-shadow: 0 12px 32px rgba(246, 51, 156, 0.42); }

.btn-secondary {
  background: var(--surface-strong);
  border-color: var(--hairline);
  color: var(--ink);
}

.note {
  font-size: 13px;
  color: var(--ink-tertiary);
  text-align: center;
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 22px 0 8px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
}

.card h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: 0; color: var(--neon-pink); font-weight: 400; line-height: 1.1;  font-family: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
}
.card p { margin: 0; font-size: 14px; color: var(--ink-secondary); line-height: 1.55; }

/* A card that is itself a link — used for the three doc links on the home page. */
a.card {
  display: block;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
a.card:hover {
  text-decoration: none;
  border-color: rgba(76, 194, 245, 0.5);
  background: var(--surface-strong);
}
a.card h3 { color: var(--neon-blue); }
a.card h3::after { content: " →"; color: var(--ink-tertiary); }

/* ---------- changelog ---------- */

.release {
  border-left: 2px solid rgba(246, 51, 156, 0.5);
  padding-left: 22px;
  margin-bottom: 52px;
}

.release-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.release-head h2 { margin: 0; }

.release-date {
  font-size: 13px;
  color: var(--ink-tertiary);
  letter-spacing: 0.3px;
}

.release h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--neon-blue);
  margin: 26px 0 8px;
}

/* Heads-up box for the things that change behaviour rather than add to it. */
.callout {
  background: rgba(246, 51, 156, 0.08);
  border: 1px solid rgba(246, 51, 156, 0.28);
  border-radius: var(--radius-inner);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14.5px;
}
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }

/* ---------- guide contents ---------- */

.contents {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 8px;
}
.contents ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 28px; }
.contents li { margin-bottom: 6px; font-size: 14.5px; break-inside: avoid; }

@media (max-width: 520px) {
  .contents ul { columns: 1; }
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 30px 20px 44px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-tertiary);
}
.site-footer a { color: var(--ink-secondary); }
.site-footer nav {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ---------- touch targets ---------- */

/* The nav links are 13px text about 21px tall, well under the 44px Apple asks
   for. Padding them would push the underline on the current page away from the
   word, so the hit area is grown with a transparent pseudo-element instead:
   the target gets to ~45x37 and the layout doesn't move at all. The horizontal
   growth (8px a side) stays inside the smallest gap between two links, so
   neighbouring targets never overlap. */
nav.site-nav a,
.site-footer nav a {
  position: relative;
}

nav.site-nav a::before,
.site-footer nav a::before {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

/* ---------- safe areas ---------- */

/* Every page sets `viewport-fit=cover`, which lets the page run under the
   notch and the home indicator. That only looks right if the gutters grow to
   match on a landscape phone, where the inset is on the left or right. */
.site-header .inner,
main {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

.site-footer {
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  padding-bottom: max(44px, env(safe-area-inset-bottom));
}

/* ---------- phones ---------- */

@media (max-width: 560px) {
  /* The logo and three nav links come to about 390px, so on all but the widest
     phones the nav wraps to its own row. Centred, that reads as a deliberate
     two-row header; left over from `space-between` it reads as a mistake. */
  .site-header .inner {
    justify-content: center;
    gap: 2px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  main { padding-top: 36px; padding-bottom: 72px; }

  .hero { padding: 16px 0 8px; }
  .hero img.logo { width: 190px; margin-bottom: 20px; }
  .hero p.lede { font-size: 16.5px; }

  /* 52px of air above a heading is a lot of a phone screen. */
  h2 { margin-top: 38px; }

  /* The bar and its indent cost 24px of a 320px-wide screen. */
  .release { padding-left: 16px; }

  .contents { padding: 16px 18px; }

  .card { padding: 18px 18px 16px; }
}