/* Brinewater landing: asphalt, sodium-lamp amber, and the green of a St. Louis street-name blade. No web fonts, no third parties. */
:root {
  --asphalt: #0d0e10;
  --river: #1a1612;
  --paper: #ece6d8;
  --dim: #a59d8c;
  --lamp: #ffb347;
  --blade: #0d6b43;
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue Condensed Bold", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--asphalt); color-scheme: dark; }
body { margin: 0; background: var(--asphalt); color: var(--paper); font: 1.0625rem/1.55 var(--body); }
a { color: var(--lamp); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }

/* The hero: the trailer full bleed, dimmed from the bottom so the title reads */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.reel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--asphalt) 0%, rgba(13,14,16,.85) 22%, rgba(13,14,16,.15) 60%, rgba(13,14,16,.45) 100%); }
.hero-in { padding: 0 clamp(16px, 6vw, 96px) clamp(32px, 8vh, 80px); max-width: 60rem; }

/* The title is a street-name blade: white on green, a white keyline, bolted at the ends */
.sign { margin: 0 0 1.25rem; display: inline-block; font: 400 clamp(3.2rem, 14vw, 9.5rem)/1 var(--display); letter-spacing: .02em; text-transform: uppercase;
  background: var(--blade); color: #fff; padding: .08em .3em .02em; border-radius: .06em;
  box-shadow: inset 0 0 0 .045em var(--blade), inset 0 0 0 .07em #fff, 0 .15em .6em rgba(0,0,0,.6);
  animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.25em); } }
.pitch { font-size: clamp(1.15rem, 2.6vw, 1.6rem); margin: 0 0 1.5rem; max-width: 34ch; text-wrap: balance; }
.play { display: inline-block; background: var(--lamp); color: #1a1000; text-decoration: none; font: 400 clamp(1.6rem, 4vw, 2.2rem)/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  padding: .6em 1.4em .5em; border-radius: 3px; box-shadow: 0 0 0 0 rgba(255,179,71,.5); transition: box-shadow .2s, transform .2s; }
.play:hover { box-shadow: 0 0 0 6px rgba(255,179,71,.35); transform: translateY(-1px); }
.fine { margin: 1rem 0 0; color: var(--dim); font-size: .95rem; max-width: 52ch; }
.phone { display: none; margin: 1rem 0 0; padding: .6rem .8rem; border-left: 4px solid var(--lamp); background: rgba(0,0,0,.55); }

main { background: var(--asphalt); }
section { padding: clamp(40px, 8vw, 96px) clamp(16px, 6vw, 96px); max-width: 80rem; margin: 0 auto; }
.rail { font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 2rem; padding-bottom: .5rem; border-bottom: 3px solid var(--lamp); display: inline-block; }

.feat { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(20px, 4vw, 56px); align-items: center; margin-bottom: clamp(32px, 6vw, 72px); }
.feat.flip { grid-template-columns: 2fr 3fr; }
.feat.flip img { order: 2; }
.feat img { width: 100%; height: auto; display: block; border-radius: 2px; box-shadow: 0 .5rem 2rem rgba(0,0,0,.6); background: var(--river); aspect-ratio: 1280 / 804; object-fit: cover; }
.feat h3 { font: 400 clamp(1.5rem, 3vw, 2rem)/1.1 var(--display); letter-spacing: .03em; margin: 0 0 .6rem; text-transform: uppercase; }
.feat p { margin: 0; color: #d4cdbd; max-width: 46ch; }

.controls { background: var(--river); max-width: none; }
.controls > * { max-width: 70rem; margin-left: auto; margin-right: auto; }
.controls .rail { display: table; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .7rem 1rem .7rem 0; border-bottom: 1px solid rgba(236,230,216,.15); vertical-align: top; }
th { color: var(--dim); font-weight: 600; }
td:first-child { color: var(--dim); }

.last { text-align: center; }
.last .fine { margin-inline: auto; }

footer { padding: 2rem clamp(16px, 6vw, 96px) 4rem; color: var(--dim); font-size: .9rem; max-width: 80rem; margin: 0 auto; }
summary { cursor: pointer; color: var(--lamp); }
#credits-body { max-height: 28rem; overflow: auto; padding: .5rem 1rem; margin-top: 1rem; background: var(--river); }
#credits-body h2 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; color: var(--paper); }
#credits-body h1 { display: none; }
#credits-body ul { padding-left: 1.2rem; margin: 0; }
#credits-body li { margin: .25rem 0; }

@media (max-width: 760px) {
  .feat, .feat.flip { grid-template-columns: 1fr; }
  .feat.flip img { order: 0; }
  .phone { display: block; }
  .hero .fine { display: none; }
  .hero .play { display: none; } /* (a phone can't play it: the note above says so) */
  th:nth-child(3), td:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sign { animation: none; } .play { transition: none; } }