/* WhichFlick website. Same look as the app: sun yellow with polka dots, ink
   outlines, hard offset shadows, Bagel Fat One headlines and Nunito body text.
   Fonts are served from this site (no Google Fonts), so nothing tracks visitors. */

@font-face { font-family: "Bagel Fat One"; src: url("/fonts/BagelFatOne-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --sun: #FFD23F;
  --sun-dot: #FFC21A;
  --ink: #1E1A3B;
  --paper: #FFFFFF;
  --soft: #FFF4C7;
  --muted: #5D5878;
  --blue: #2F6BFF;
  --orange: #FF5A36;
  --green: #0FA968;
  --purple: #A23BFF;
  --radius: 22px;
  --border: 3px;
  --shadow: 5px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* The site stays bright yellow in light and dark mode, like the iPhone app. */
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--sun);
  background-image:
    radial-gradient(circle, var(--sun-dot) 5px, transparent 5.5px),
    radial-gradient(circle, var(--sun-dot) 5px, transparent 5.5px);
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.55;
}

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }

/* Wordmark */
.brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; margin: 8px 0 32px;
}
.brand:hover { color: inherit; }
.brand svg { width: 58px; height: 58px; flex: none; }
.brand span { font-family: "Bagel Fat One", sans-serif; font-size: clamp(42px, 12vw, 60px); line-height: 1; }
.brand.small { justify-content: flex-start; margin: 0 0 24px; }
.brand.small svg { width: 40px; height: 40px; }
.brand.small span { font-size: 34px; }

h1, h2, h3 { font-family: "Bagel Fat One", sans-serif; font-weight: 400; line-height: 1.1; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 8vw, 46px); }
h2 { font-size: 25px; margin-top: 30px; }
h3 { font-size: 20px; margin-top: 22px; }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }
.muted { color: var(--muted); font-weight: 600; }
.center { text-align: center; }

/* Sticker card */
.card {
  background: var(--paper);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow) var(--shadow) 0 var(--ink);
  padding: 26px;
  margin: 0 var(--shadow) 30px 0;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Ticket, like the app's Up Next ticket: colored header, dashed tear line, notches */
.ticket {
  position: relative;
  margin: 0 var(--shadow) 30px 0;
  filter: drop-shadow(var(--shadow) var(--shadow) 0 var(--ink));
}
.ticket-top, .ticket-body { border: var(--border) solid var(--ink); }
.ticket-top {
  background: var(--blue); color: #fff;
  padding: 22px 26px 20px;
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-mask: radial-gradient(circle 17px at 0 100%, transparent 16px, #000 16.5px) left / 51% 100% no-repeat,
                radial-gradient(circle 17px at 100% 100%, transparent 16px, #000 16.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 17px at 0 100%, transparent 16px, #000 16.5px) left / 51% 100% no-repeat,
                radial-gradient(circle 17px at 100% 100%, transparent 16px, #000 16.5px) right / 51% 100% no-repeat;
}
.ticket-body {
  background: var(--paper);
  padding: 24px 26px 26px;
  border-top: var(--border) dashed var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
  -webkit-mask: radial-gradient(circle 17px at 0 0, transparent 16px, #000 16.5px) left / 51% 100% no-repeat,
                radial-gradient(circle 17px at 100% 0, transparent 16px, #000 16.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 17px at 0 0, transparent 16px, #000 16.5px) left / 51% 100% no-repeat,
                radial-gradient(circle 17px at 100% 0, transparent 16px, #000 16.5px) right / 51% 100% no-repeat;
}
/* Ink outlines around the notches: rings centered on each notch. The masks above
   hide the half that falls outside the ticket, leaving a curved outline. */
.ticket-top, .ticket-body { position: relative; }
.ticket-top::before, .ticket-top::after, .ticket-body::before, .ticket-body::after {
  content: ""; position: absolute; width: 38px; height: 38px;
  border: var(--border) solid var(--ink); border-radius: 50%;
}
.ticket-top::before { left: -22px; bottom: -19px; }
.ticket-top::after { right: -22px; bottom: -19px; }
.ticket-body::before { left: -22px; top: -22px; }
.ticket-body::after { right: -22px; top: -22px; }

.label { font-weight: 900; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.ticket-top h1 { color: #fff; text-shadow: 2px 3px 0 var(--ink); margin: 8px 0 0; }

.features { display: grid; gap: 16px 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.features li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.features b { display: block; font-weight: 900; }
.features span { font-weight: 600; color: var(--muted); font-size: 16px; }
.dot { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); margin-top: 3px; }

.badge {
  display: inline-block; background: var(--ink); color: var(--sun);
  font-weight: 900; padding: 12px 20px; border-radius: 16px;
  box-shadow: var(--shadow) var(--shadow) 0 rgba(30, 26, 59, 0.3);
}

/* Footer */
footer { text-align: center; font-size: 15px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-bottom: 16px; font-weight: 900; font-size: 17px; }
footer p { margin: 0 0 6px; }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .card { padding: 20px; }
  .ticket-top, .ticket-body { padding-left: 22px; padding-right: 22px; }
}