/* Darts Tapout — dartstapout.com
   Tokens are lifted straight from the app's src/theme.ts. Black and cream
   carry the interface; red, green, gold and orange are accent-only. */

:root {
  --felt: #22201D;
  --cream: #F5F1EA;
  --surface: #2A2723;
  --surface-raised: #332F29;
  --border: rgba(245, 241, 234, 0.14);
  --rim: rgba(245, 241, 234, 0.12);
  --muted: rgba(245, 241, 234, 0.62);
  --faint: rgba(245, 241, 234, 0.4);
  --ink-wash: rgba(34, 32, 29, 0.05);
  --ink-border: rgba(34, 32, 29, 0.14);

  --red: #c92f33;
  --green: #1f7a3f;
  --gold: #e3ae28;
  --gold-muted: #c9971a;
  --orange: #F97316;

  --display: 'Righteous', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* Letters only — the app took numerals out of Space Mono deliberately. */
  --mono: 'Space Mono', ui-monospace, monospace;
  /* Standalone numerals. */
  --numeral: 'Poppins', system-ui, sans-serif;
  /* Darts notation, "T20 D20". */
  --notation: 'Arimo', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* The pages lock into place: let go of a scroll and the nearest page's top
   settles at the top of the screen (the footer settles at the bottom). A
   page taller than the screen - page 2 on a phone - still scrolls freely
   inside itself before the next one takes over. (Peter, 30 September 2026.) */
html:has(main > section) { scroll-snap-type: y mandatory; }
main > section { scroll-snap-align: start; }
.footer { scroll-snap-align: end; }

body {
  margin: 0;
  background: var(--felt);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1080px, 100% - 48px); margin: 0 auto; }

/* ---------- Logo ---------- */

.mark { width: 44px; height: 44px; color: var(--cream); flex: none; }
.mark.small { width: 30px; height: 30px; }
.mark-dot { fill: var(--red); }

.kicker {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3.5px;
  line-height: 1.15;
  color: var(--cream);
}

.wordmark {
  display: inline-block;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.wordmark.big { font-size: clamp(46px, 9vw, 78px); }
.wordmark.tiny { font-size: 18px; }

.o { position: relative; }
/* The dot sits in the O at any size — a share of the type size, with the same
   sub-pixel nudge the app's Wordmark carries. */
.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.465em;
  height: 0.465em;
  margin-left: 0.011em;
  margin-top: 0.017em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--red);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.lockup-text { display: block; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  /* Every page is one screen - the front page too, on a laptop as on a
     phone. (Peter, 30 September 2026.) */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* The photograph is the app's graded file, 1023x1537, and on a wide screen
   it is shown at its own size: anchored to the right, framed the way the
   app frames it (the bull about a third of the way down, dead centre of
   the photograph), and fading into the felt where the type is. Stretched
   to span a laptop it went to mush; enlarged under a lighter veil than the
   app's, the blur baked into its left third read as patches. So it keeps
   its pixels and gets MenuScreen's three gradients, drawn over the
   photograph's own box rather than the whole hero so the fractions mean
   what they mean in the app. */
.hero-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: clamp(620px, 62%, 1023px);
  overflow: hidden;
}
.hero-photo img {
  position: absolute;
  width: 1023px;
  height: auto;
  right: 0;
  top: calc(30% - 729px);
  display: block;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* The app's stops, in felt rather than black: the photograph's box sits
     in a felt page here, and the left and bottom edges reach full felt so
     there is no edge to see. */
  background:
    linear-gradient(to bottom, rgba(34, 32, 29, 0.6) 0%, rgba(34, 32, 29, 0.22) 8%, rgba(34, 32, 29, 0) 20%),
    linear-gradient(to right, rgba(34, 32, 29, 1) 0%, rgba(34, 32, 29, 0.42) 22%, rgba(34, 32, 29, 0) 55%),
    linear-gradient(to bottom, rgba(34, 32, 29, 0.05) 0%, rgba(34, 32, 29, 0.4) 25%, rgba(34, 32, 29, 0.62) 50%, rgba(34, 32, 29, 0.72) 72%, rgba(34, 32, 29, 1) 92%);
}

/* Over the whole hero: felt behind the type, clearing before the bull. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(34, 32, 29, 1) 0%, rgba(34, 32, 29, 1) 30%, rgba(34, 32, 29, 0) 52%);
}

.hero-inner {
  position: relative;
  width: min(1080px, 100% - 48px);
  margin: 0 auto;
  padding: 120px 0 96px;
  max-width: 1080px;
}

/* The chevron at the foot of every page but the last that says there is
   more. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  animation: cue-bob 2.4s ease-in-out infinite;
}
.scroll-cue svg { width: 28px; height: 28px; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }

/* The app's menu lockup, Logo.tsx's proportions exactly. Everything there is
   derived from the wordmark's type size (22px in the app's menu): the kicker
   is half of it with 3.5px of tracking and a 2px gap under it, the wordmark
   sits on a 1.05 line, the mark is a square as tall as those two lines
   together (38px), and 8px separates mark from text. Written here as shares
   of --wm so the lockup scales as one thing. There is no bar above the hero -
   the photograph runs to the top of the page, as it does in the app, and
   this is the only place the name appears above the fold. */
.hero-lockup {
  --wm: clamp(46px, 9vw, 78px);
  margin: 0;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: calc(var(--wm) * 0.364);
}
.hero-lockup .hero-mark { width: calc(var(--wm) * 1.727); height: calc(var(--wm) * 1.727); }
.hero-lockup .kicker {
  font-size: calc(var(--wm) * 0.5);
  line-height: 1.15;
  letter-spacing: calc(var(--wm) * 0.159);
  margin-bottom: calc(var(--wm) * 0.09);
}
.hero-lockup .wordmark.big {
  font-size: var(--wm);
  line-height: 1.05;
  letter-spacing: calc(var(--wm) * -0.023);
}

.tagline {
  margin: 14px 0 0;
  font-size: clamp(17px, 2.4vw, 22px);
  color: rgba(245, 241, 234, 0.81);
}

.lead {
  margin: 26px 0 0;
  max-width: 40ch;
  font-size: clamp(16px, 1.8vw, 19px);
  color: var(--muted);
}

/* Three short sentences with a breath between them - a little more than a
   word space, so each lands on its own. */
.lead .sentence, .lead .beat { white-space: nowrap; margin-right: 0.45em; }
.lead .beat:last-child { margin-right: 0; }
.lead b { font-weight: 700; color: var(--cream); }
.lead-more { margin-top: 10px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: var(--cream);
  color: var(--felt);
}
.btn-primary:hover { background: #fff; }

/* ---------- Bands ---------- */

.band { position: relative; padding: 96px 0; border-top: 1px solid var(--border); }
.band:first-of-type { border-top: none; }

h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
}

h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 6px;
}

p { margin: 16px 0 0; }

/* The chalked rule — muted gold, the app's one non-interactive use of it. */
.rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold-muted);
  margin: 18px 0 8px;
  border-radius: 1px;
}
.centred { text-align: center; }
.centred-rule { margin-left: auto; margin-right: auto; }

/* ---------- Page 2: the app on three devices ---------- */

/* Real screenshots of the web build, driven to Learn the outshots with a
   number checked out (the same headless drive tools/record-short.js uses).
   The frames are CSS: a dark bezel with the screen's own corners, the
   iPhone's island and the Android's punch-hole drawn over the screenshot's
   status bar. iPad 820x1180 at 2x, phones 390x844 at 3x. */
.devices {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 56px);
}
.device { margin: 0; text-align: center; }
.device figcaption {
  margin-bottom: 18px;
  font-size: 17px;
  font-weight: 500;
  color: var(--cream);
}
.device-body {
  position: relative;
  background: #0d0c0b;
  border: 1px solid rgba(245, 241, 234, 0.16);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.device-body img { display: block; width: 100%; height: auto; }
.device-body::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); background: #0d0c0b; }
.android .device-body, .iphone .device-body { width: clamp(180px, 17vw, 240px); padding: 10px; border-radius: 34px; }
.android .device-body img, .iphone .device-body img { border-radius: 26px; }
.iphone .device-body::after { top: 20px; width: 26%; height: 4.6%; border-radius: 999px; }
.android .device-body::after { top: 22px; width: 5.5%; aspect-ratio: 1; border-radius: 50%; }
.ipad .device-body { width: clamp(280px, 27vw, 380px); padding: 16px; border-radius: 30px; }
.ipad .device-body img { border-radius: 14px; }

/* ---------- Quote band ---------- */

.photo-band { background: #000; padding: 0; }
.photo-row { display: flex; align-items: center; gap: clamp(24px, 5vw, 72px); }
.photo { display: block; width: min(100%, 520px); height: auto; flex: none; }
.photo-copy { max-width: 40ch; }
/* The question under the heading - brighter than the list, which answers it. */
.photo-lead { margin: 14px 0 0; font-size: 20px; color: rgba(245, 241, 234, 0.81); }

/* ---------- How it works ---------- */

/* The Short, phone-shaped, straight onto the felt - the app's felt is the
   page's, so it sits with no edge until it plays. */
/* Page 3: the demo video and the guide, side by side on a laptop. */
.demos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 360px));
  justify-content: center;
  grid-template-rows: auto auto auto;
  column-gap: 96px;
}
.demo { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: center; }
.demo h2 { align-self: end; font-size: clamp(26px, 2.6vw, 32px); }
.demo .rule { margin-bottom: 32px; }
.demo video {
  display: block; width: min(100%, 320px); height: auto; aspect-ratio: 9 / 16; border-radius: 16px;
}
/* The pill sits level with the middle of the video beside it. */
.demo-guide { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; align-self: center; }
/* A laptop: page 2 as one screen, the photograph centred in the band's
   black and never taller than the screen; page 4 and the footer as one,
   the devices sized from the height there is (a phone's screenshot is
   2.164 times as tall as it is wide, the iPad's 1.439) with the gaps
   brought in round them. */
@media (min-width: 861px) {
  .photo-row { height: calc(100vh - 1px); height: calc(100svh - 1px); }
  .photo { width: auto; height: min(780px, 100vh - 1px); height: min(780px, 100svh - 1px); }
  #get { padding: 36px 0; --dev-h: calc(100vh - var(--footer-h) - 390px); --dev-h: calc(100svh - var(--footer-h) - 390px); }
  .get-band .devices { margin-top: 32px; }
  .device figcaption { margin-bottom: 12px; }
  #get .iphone .device-body, #get .android .device-body { width: min(240px, (var(--dev-h) - 20px) / 2.164 + 20px); }
  #get .ipad .device-body { width: min(380px, (var(--dev-h) - 32px) / 1.439 + 32px); }
  .stores { margin-top: 32px; }
  .store-note { margin-top: 12px; }
}

/* A laptop: page 3 as one screen - the band's padding comes in and the
   video gives up the height it has to, keeping its shape. */
@media (min-width: 861px) {
  #practise { min-height: 100vh; min-height: 100svh; padding: 48px 0; display: flex; align-items: center; }
  .demo video { width: auto; height: min(569px, 100vh - 230px); height: min(569px, 100svh - 230px); }
}
@media (max-width: 860px) {
  .demos { grid-template-columns: 1fr; row-gap: 0; }
  .demo { grid-row: auto; grid-template-rows: none; margin-bottom: 72px; }
  .demo:last-child { margin-bottom: 0; }
}

/* ---------- The guide ---------- */

.back {
  display: inline-block;
  margin-bottom: 40px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
}
.back:hover { color: var(--cream); }
/* A laptop: the guide in an iPad, gold arrows either side (guide.html). */
.guide-laptop { height: 100vh; overflow: hidden; background: var(--felt); }
.guide-back { position: absolute; top: 28px; left: 40px; margin: 0; }
/* The count mirrors the way back: same line, same size, the other corner -
   cream, not gold, since it only says where you are. */
.guide-count { position: absolute; top: 28px; right: 40px; color: var(--muted); font-weight: 500; letter-spacing: 1px; }
.guide-stage { height: 100vh; padding-top: 30px; display: flex; align-items: center; justify-content: center; gap: 56px; }
.guide-ipad { position: relative; box-sizing: content-box; background: #0d0c0b; box-shadow: 0 0 0 2px #3a3631, 0 30px 80px rgba(0, 0, 0, 0.5); }
.guide-ipad iframe { display: block; border: 0; transform-origin: 0 0; background: var(--felt); }
.guide-arrow { background: none; border: 0; padding: 12px; cursor: pointer; color: var(--gold); }
.guide-arrow svg { width: 56px; height: 45px; display: block; }
.guide-arrow polyline { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.guide-arrow:hover { color: var(--cream); }
.guide-arrow:disabled { visibility: hidden; }
.guide-arrow:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 6px; }

/* ---------- Get it ---------- */

.get-band { background: var(--surface); }
.centred-block { text-align: center; }
.get-band .devices { margin-top: 48px; }

/* The two store badges at the official proportions (400x120), 200px wide
   here, side by side and stacking on a phone. Stand-in artwork until the
   official files go in - see the note in index.html. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 56px;
}
.store { display: block; width: 200px; line-height: 0; border-radius: 12px; }
.store svg { width: 100%; height: auto; display: block; }
.store:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.store-pending { opacity: 0.55; cursor: default; }
.store-note { color: var(--faint); font-size: 14px; margin-top: 18px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--border); padding: 32px 0 44px; }
/* On an iPad or a laptop the last page and the footer are one screen
   between them: the footer is a set height and page 4 takes the rest, so
   the last snap shows no end of page 3 above it. */
:root { --footer-h: 107px; }
@media (min-width: 600px) {
  .footer { height: var(--footer-h); }
  #get { min-height: calc(100vh - var(--footer-h)); min-height: calc(100svh - var(--footer-h)); display: flex; flex-direction: column; justify-content: center; }
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-lockup { display: flex; align-items: center; gap: 8px; }
.footer-meta { color: var(--faint); font-size: 14px; }
.footer-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-link:hover { color: var(--cream); }

/* ---------- Narrow screens ---------- */

@media (max-width: 860px) {
  .devices { flex-wrap: wrap; align-items: flex-start; }
  .photo-row { flex-direction: column; align-items: stretch; gap: 0; }
  .photo { width: 100%; }
  .photo-copy { max-width: none; padding: 0 0 68px; }
  .looks { flex-wrap: wrap; gap: 16px 12px; }
  .looks img { width: min(240px, calc(50% - 6px)); }
  .band { padding: 72px 0; }
  .hero-inner { padding: 260px 0 60px; }
  /* The front page is the whole screen on a phone or an upright iPad, as
     the app's menu is - nothing of page 2 under it. (Peter, 30 September
     2026; the iPad first, then the phone.) */
  .hero { min-height: 100vh; min-height: 100svh; }
  /* The app's menu, exactly. The photograph is the app's graded file (the
     grade, and the blur down the left third that dissolves the board into
     the felt, are baked in), and what makes that file look right is the
     crop and the gradients MenuScreen lays over it, so both are ported
     here number for number rather than approximated.

     Crop (useHeroCrop): the window shows 0.448 of the photo's width, so the
     image is 1023/458.3 = 2.232 content-widths wide; content width is the
     window up to 600px, then holds (an iPad shows more of the photo either
     side, not a bigger one). Bull at (471, 729) of 1023x1537: centred
     across, 106px down. The left clamp keeps the photo's own edge outside
     the window. */
  .hero-photo { inset: 0; width: auto; --hero-img-w: min(223.2vw, 1339px); }
  .hero-photo::after { content: none; }
  .hero-photo img {
    position: absolute;
    width: var(--hero-img-w);
    height: auto;
    right: auto;
    left: min(0px, max(100% - var(--hero-img-w), 50% - 0.4604 * var(--hero-img-w)));
    top: calc(106px - 0.7126 * var(--hero-img-w));
  }
  /* MenuScreen's three LinearGradients: the base darkening down the screen,
     then the vignette from the left and from the top that pull the light in
     towards the bull. Black, as in the app; the base runs into felt over its
     last stretch so the hero meets the section below without a step. */
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.22) 8%, rgba(0, 0, 0, 0) 20%),
      linear-gradient(to right, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.42) 20%, rgba(0, 0, 0, 0) 55%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 25%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.72) 72%, rgba(0, 0, 0, 0.97) 88%, var(--felt) 100%);
  }
  .lead { max-width: 40ch; }
}

/* A phone: page 3 as one screen, the pill included - the video gives up
   the height the headings and the pill need, keeping its shape. */
@media (max-width: 599px) {
  #practise { min-height: 100vh; min-height: 100svh; padding: 28px 0 64px; display: flex; align-items: center; }
  #practise .demo { margin-bottom: 36px; }
  #practise .demo:last-child { margin-bottom: 0; }
  #practise .demo .rule { margin-bottom: 20px; }
  #practise .demo video { width: auto; height: min(569px, 100vh - 346px); height: min(569px, 100svh - 346px); }
  /* Page 2's copy a size down and closer together, so the photograph above
     it keeps as much of the screen as it can; the room under it is the
     gold chevron's. Page 3 keeps the same room at its foot. */
  .photo-lead { font-size: 18px; line-height: 1.45; margin-top: 10px; }
  .photo-band .rule { margin: 14px 0 4px; }
  .photo-copy { padding-bottom: 62px; }
  /* Page 4 as one screen: the three devices in one row, as on a laptop,
     sized so the two phones and the iPad stand the same height, and the two
     badges side by side. The footer still scrolls up under it. */
  #get { min-height: 100vh; min-height: 100svh; padding: 32px 0; display: flex; flex-direction: column; justify-content: center; }
  .get-band .devices { flex-wrap: nowrap; align-items: flex-end; gap: 10px; margin-top: 32px; }
  .device figcaption { font-size: 14px; margin-bottom: 10px; }
  #get .android .device-body, #get .iphone .device-body { width: 25vw; padding: 5px; border-radius: 17px; }
  .android .device-body img, .iphone .device-body img { border-radius: 13px; }
  .iphone .device-body::after { top: 9px; }
  .android .device-body::after { top: 10px; }
  #get .ipad .device-body { width: 36vw; padding: 7px; border-radius: 15px; }
  .ipad .device-body img { border-radius: 8px; }
  .stores { flex-wrap: nowrap; gap: 12px; margin-top: 40px; }
  .store { width: calc(50% - 6px); max-width: 200px; }
}

/* A phone or an iPad upright: page 2 as one screen. The copy keeps its
   natural height and the photograph takes what is left, shrunk whole to fit
   it - its black meets the band's black, so the narrower picture has no edge
   to see. Cropping it instead cut the phone off at its pills. The band's
   1px top border is taken off the row, or the page is a pixel over the
   screen. (iPad first; the phone too, Peter, 30 September 2026.) */
@media (max-width: 860px) {
  .photo-band { padding: 0; }
  .photo-row { height: calc(100vh - 1px); height: calc(100svh - 1px); }
  .photo { flex: 1 1 auto; min-height: 0; height: auto; object-fit: contain; }
  .photo-copy { flex: none; }
}

/* An iPad upright. */
@media (min-width: 600px) and (max-width: 860px) {
  /* Page 3 as one screen: the video and the pill under it, centred in the
     band, with none of page 4 showing under them. */
  #practise { min-height: 100vh; min-height: 100svh; padding: 0; display: flex; align-items: center; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .mark { width: 34px; height: 34px; }
  .wordmark { font-size: 20px; }
  .kicker { font-size: 9.5px; letter-spacing: 3px; }
  .wrap { width: calc(100% - 36px); }
  .hero-inner { width: calc(100% - 36px); }
  .android .device-body, .iphone .device-body { width: min(220px, 42vw); }
  .ipad .device-body { width: min(380px, 88vw); }
}