/* Porchlight. The page is the deck: putty case, one charcoal ink, amber only where something
   is lit, cream for the faces, red for record. */
:root {
  --case: #C9C3B6;
  --case-light: #D6D1C6;
  --case-dark: #B4AD9F;
  --ink: #2B2A28;
  --ink-dim: #5E5B55;
  --key: #5B5A57;
  --key-dark: #3F3E3B;
  --amber: #FFB24A;
  --face: #FCDE9E;
  --red: #D23A2B;
  --paper: #EFECE1;
  --measure: 62ch;
}

/* The deck's own marker lettering (Tools/fonts/make_marker_font.py). */
@font-face {
  font-family: "Porchlight Marker";
  src: url("media/porchlight-marker.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--case);
  /* The moulded plastic: a faint grain, lighter at the top where the light falls. */
  background-image:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.28), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 18px/1.55 "Barlow", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
img, video { display: block; max-width: 100%; }
code { font: 500 .92em "Barlow", sans-serif; background: var(--case-light); padding: 1px 6px; border-radius: 4px; }

/* The name, printed on the case like on the deck. */
.bar {
  display: flex; align-items: center; gap: 18px;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--case-dark);
}
.mark { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 28px; letter-spacing: -.01em; }
.kind { color: var(--ink-dim); font-size: 14px; }
.bar nav { margin-left: auto; display: flex; gap: 22px; align-items: center; font-weight: 500; }
.bar nav a:not(.key) { text-decoration: none; }
@media (max-width: 560px) { .kind { display: none; } }

/* Keys: charcoal, chunky, pressed when you press them. */
.key {
  display: inline-block;
  padding: 14px 22px 16px;
  background: linear-gradient(#66655f, var(--key) 40%, var(--key-dark));
  color: #EDE9E1;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9px;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 0 #262523, 0 8px 18px rgba(0,0,0,.25);
  transition: transform .06s, box-shadow .06s;
}
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 1px 0 #262523, 0 3px 8px rgba(0,0,0,.25); }
.key-small { padding: 7px 16px 9px; font-size: 15px; }
/* The one that's lit. */
.key-play { color: var(--amber); text-shadow: 0 0 12px rgba(255,178,74,.55); }

main { display: block; }
section { padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 48px); }
h1, h2 { font-weight: 600; letter-spacing: -.015em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 6.4vw, 84px); max-width: 15ch; }
h2 { font-size: clamp(30px, 3.6vw, 46px); }
p { max-width: var(--measure); margin: 0 0 1em; }
.lede { font-size: clamp(19px, 1.6vw, 22px); color: var(--ink); }
.fine { font-size: 15px; color: var(--ink-dim); }

/* The flyover, set into the case like the tape window. */
.hero { padding-top: clamp(16px, 3vw, 32px); }
.screen {
  border-radius: 14px;
  overflow: hidden;
  background: #1c1916;
  box-shadow: 0 2px 0 rgba(255,255,255,.4), inset 0 3px 10px rgba(0,0,0,.5), 0 20px 50px -20px rgba(0,0,0,.45);
}
.screen video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 18px; }

/* The note from Dave, the deck close-ups, and the price. */
.note, .get { max-width: 760px; }
.note { padding-top: clamp(36px, 5vw, 64px); padding-bottom: 0; }
.note h1 { font-size: clamp(34px, 4.6vw, 56px); max-width: 18ch; }
.note p { font-size: clamp(19px, 1.6vw, 21px); }
.signup-early { max-width: 560px; margin-top: 22px; }

/* On the deck: a close-up of each part, then what it's for. Pictures alternate sides. */
.deck { padding-top: clamp(48px, 6vw, 80px); }
.deck h2 { margin-bottom: clamp(20px, 3vw, 36px); }
.deck .row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(20px, 3vw, 36px) 0;
  border-top: 1px solid var(--case-dark);
}
.deck .row:nth-of-type(even) img { order: 2; }
.deck .row img {
  width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 14px 32px -18px rgba(0,0,0,.55);
}
.deck h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -.01em; margin: 0 0 .45em; }
.deck .row p { font-size: 18px; }
.deck .row p:last-child { margin-bottom: 0; }
.deck-notes { max-width: 760px; margin-top: 24px; }
@media (max-width: 760px) {
  .deck .row { grid-template-columns: 1fr; }
  .deck .row:nth-of-type(even) img { order: 0; }
}

/* The price, like a lit window in the case. */
.ticket {
  background: var(--paper);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 48px);
  max-width: 620px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.18), 0 2px 0 rgba(255,255,255,.4);
}
.ticket h2 { font-family: "Porchlight Marker", "Bradley Hand", cursive; font-weight: 400; font-size: 44px; letter-spacing: 0; }
.price { font-size: 64px; font-weight: 600; line-height: 1; margin: 0 0 .3em; }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 28px clamp(16px, 4vw, 48px) 40px;
  border-top: 1px solid var(--case-dark);
  color: var(--ink-dim); font-size: 15px;
}
footer p { display: flex; gap: 10px; align-items: center; margin: 0; }
footer a { margin-left: 14px; }


/* Inner pages: one readable column. */
.page section { max-width: 760px; }
.page h1 { font-size: clamp(36px, 5vw, 56px); }
.page h2 { font-size: 26px; margin-top: 1.6em; }
.steps { padding-left: 1.3em; max-width: var(--measure); }
.steps li { margin-bottom: .6em; padding-left: .3em; }
.release ul { padding-left: 1.2em; max-width: var(--measure); }
.release li { margin-bottom: .35em; }
.facts { border-collapse: collapse; }
.facts th { text-align: left; font-weight: 600; padding: 10px 24px 10px 0; vertical-align: top; }
.facts td { padding: 10px 0; }
.facts tr + tr { border-top: 1px solid var(--case-dark); }
.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.press-grid img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 8px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }


footer p { flex-wrap: wrap; }
footer p a { margin-left: 0; }
footer p:last-child { gap: 6px 16px; }
@media (max-width: 560px) {
  .bar { gap: 12px; }
  .bar nav { gap: 14px; }
  .mark { font-size: 22px; gap: 9px; }
  .mark img { width: 30px; height: 30px; }
}
/* Help is in the footer too; on a phone the header keeps Download and Buy. */
@media (max-width: 420px) { .bar nav a[href$="help/"] { display: none; } }

/* The pre-launch signup on the ticket. */
.signup { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 14px; }
.signup label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.signup input[type="email"] {
  flex: 1 1 220px; min-width: 0;
  padding: 13px 14px; font: 500 17px "Barlow", sans-serif; color: var(--ink);
  background: #fff; border: 1px solid var(--case-dark); border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.12);
}
.signup input[type="email"]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.signup .key { border: 0; cursor: pointer; font: 600 17px "Barlow", sans-serif; }