/* Happy Day website, Marquee look. Rules in ../DESIGN.md. */
@font-face {
  font-family: 'League Gothic';
  src: url('/fonts/league-gothic.woff2') format('woff2');
  font-display: swap;
}

:root {
  --screen: #f2f2f5;
  --panel: #ffffff;
  --text: #111114;
  --muted: #6b6b73;
  --rail: #e4e4ea;
  --red: #d62718;
  --red-deep: #b81f12;
  --amber: #ffb300;
  --sign: 'League Gothic', 'Arial Narrow', sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--screen); color: var(--text); font: 17px/1.55 var(--ui); }
::selection { background: var(--red); color: #fff; }
a { color: var(--red); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Red sign cabinet: the top of every page */
.cabinet { background: var(--red); color: #fff; }
.topnav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.mark { font-family: var(--sign); font-size: 34px; line-height: 1; letter-spacing: 0.02em; color: #fff; text-decoration: none; text-transform: uppercase; }
.topnav nav { display: flex; gap: 18px; font-size: 15px; font-weight: 600; }
.topnav nav a { color: #fff; text-decoration: none; opacity: 0.9; }
.topnav nav a:hover, .topnav nav a[aria-current] { opacity: 1; text-decoration: underline; }

/* The sign: a lit white panel inside a frame of bulbs */
.frame {
  padding: 16px;
  border-radius: 14px;
  background-color: var(--red-deep);
  background-image: radial-gradient(circle, #fff1b8 0 2px, var(--amber) 3.5px, rgba(255, 179, 0, 0) 5.5px);
  background-size: 22px 22px;
  background-position: 0 0;
  animation: chase 1.2s steps(1) infinite;
}
@keyframes chase { 50% { background-position: 11px 11px; } }
@media (prefers-reduced-motion: reduce) { .frame { animation: none; } }

.sign { background: var(--panel); border-radius: 6px; padding: 10px 22px 14px; }
.sign p {
  margin: 0;
  font-family: var(--sign);
  font-size: clamp(40px, 10vw, 92px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--text);
  border-bottom: 3px solid var(--rail);
  padding: 6px 0 4px;
}
.sign p:last-child { border-bottom: 0; }
.sign .red { color: var(--red); }

.lede { font-size: 20px; line-height: 1.45; margin: 26px 0 8px; max-width: 34ch; }
.soon { margin: 0 0 40px; font-weight: 600; opacity: 0.85; font-size: 15px; }

/* Sections */
h1, h2 { line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 30px; margin: 48px 0 4px; }
.muted { color: var(--muted); }
.sub { margin: 0 0 18px; }

/* Deal cards, same as the app */
.deals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.deal { background: var(--panel); border: 1px solid var(--rail); border-radius: 14px; padding: 12px 16px 14px; }
.bulbs { display: flex; gap: 6px; margin-bottom: 9px; height: 10px; }
.bulbs i { width: 10px; height: 10px; border-radius: 50%; background: #e7e4dc; }
.bulbs i.on { background: radial-gradient(circle at 35% 35%, #fff3c4, var(--amber) 60%, #e08e00); box-shadow: 0 1px 3px rgba(224, 142, 0, 0.45); }
.line { font-family: var(--sign); font-size: 31px; line-height: 1.04; text-transform: uppercase; letter-spacing: 0.01em; padding: 4px 0 5px; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail); }
.line b { font-weight: normal; color: var(--red); }
.deal.steal .line { background: var(--red); color: #fff; border-color: var(--red); padding-left: 8px; padding-right: 8px; border-radius: 4px; }
.deal.steal .line b { color: #fff; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--red); margin-left: 6px; }
.who { margin-top: 9px; font-size: 15px; line-height: 1.35; }
.who strong { font-weight: 650; }
.who span { color: var(--muted); }
.note { margin-top: 14px; font-size: 15px; }

.also { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rail); }
.also li { padding: 14px 0; border-bottom: 1px solid var(--rail); }
.also strong { display: block; font-size: 17px; }
.also span { color: var(--muted); }

/* Reading pages */
.page-title { font-family: var(--sign); font-weight: normal; text-transform: uppercase; letter-spacing: 0.015em; font-size: clamp(52px, 12vw, 84px); line-height: 1; margin: 6px 0 22px; }
.reading { background: var(--panel); border-radius: 16px; padding: 4px 26px 26px; margin: -6px 0 0; border: 1px solid var(--rail); }
.reading h2 { font-size: 22px; margin: 30px 0 6px; letter-spacing: -0.01em; }
.reading h3 { font-size: 17px; margin: 24px 0 4px; }
.reading p, .reading li { max-width: 68ch; }
.reading ul { padding-left: 22px; }
.reading li { margin: 6px 0; }
.updated { color: var(--muted); font-size: 15px; margin-top: 22px; }

footer { padding: 36px 0 48px; font-size: 15px; color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 10px; }
footer a { color: var(--text); }

@media (max-width: 620px) {
  .deals { grid-template-columns: 1fr; }
  .topnav nav { gap: 14px; font-size: 14px; }
  .frame { padding: 12px; }
  .sign { padding: 6px 14px 10px; }
  .reading { padding: 2px 18px 20px; }
}