/* Card Sense Trainer site styles. Theme matches the app: felt greens, gold,
   and cream. The layout is the one Great Circle Map's site uses: the system
   face for page text under serif display headlines, the closed iPhone Duo
   in the hero, and alternate sections on a raised band. */

:root {
  --felt: #0F5132;
  --felt-dark: #0B3F27;
  --felt-deep: #08361F;
  /* Halfway between the page's felt-dark and the app's felt: the navbar,
     the alternate bands, and the footer. */
  --raised: #0D482D;
  --gold: #E0B34A;
  --gold-ink: #2E2101;
  --cream: #F8F5EC;
  --muted: rgba(248, 245, 236, 0.72);
  --line: rgba(248, 245, 236, 0.16);
  /* Great Circle Map's faces. The site face (Roboto) stays on the navbar
     and footer. The home page reads in the system face (SF on Apple
     devices) under serif display headlines, New York where the browser
     offers it and Georgia elsewhere. */
  --font-site: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--felt-dark);
  color: var(--cream);
  font-family: var(--font-text);
  line-height: 1.55;
  padding-top: 56px; /* fixed navbar */
}
/* Pinned so the navbar and footer render the same on every page, whatever
   face the page body uses. */
.navbar, footer { font-family: var(--font-site); }

h1, h2, h3, .nav-brand {
  font-family: Montserrat, Roboto, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* The crown's odds line, drawn in the logo's own condensed face. */
.crown-odds {
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 21px;
  fill: var(--gold);
}

/* Fixed navbar: brand on the left, links to the right, hamburger on
   narrow screens. */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  z-index: 100;
}
/* Wider than the content column: five translated links plus the language
   picker need the room. */
.nav-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-weight: 700;
  font-size: 17px;
}
.nav-brand:hover { text-decoration: none; color: var(--gold); }
.nav-crown { width: 40px; height: 40px; flex: none; }
.nav-menu {
  list-style: none;
  display: flex;
  gap: 2px;
  margin-left: auto;
}
.nav-menu a {
  display: block;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 8px;
  white-space: nowrap;
}
.nav-menu a:hover { color: var(--gold); text-decoration: none; }
.nav-toggler {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 9px;
  cursor: pointer;
}
.nav-toggler span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cream);
  margin: 4px 0;
  border-radius: 1px;
}

a { color: var(--gold); font-weight: 600; text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Hero: the crown and a serif display title over the tagline and the copy
   on the left, the closed iPhone Duo's front on the right. */
.hero { padding: 72px 0 72px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
}
.hero-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.hero-head .crown { width: 80px; height: 80px; flex: none; }
.hero h1 {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -1.2px;
  text-wrap: balance;
}
.tagline {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  margin-bottom: 22px;
  text-wrap: balance;
}
.lede { color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 14px; text-wrap: pretty; }
/* The store badges with the device line centered under them: a block only
   as wide as the badges, at the left of the copy on wide screens and
   centered when the hero stacks. */
.hero-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 28px;
}
.badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.store-badge { height: 50px; width: auto; transition: transform 0.2s ease; }
.store-badge:hover { transform: scale(1.05); }
.works-on {
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
  text-align: center;
}
/* The closed Duo edge to edge on a clear background: the dealing loop
   over its still, which carry the same 680x948 size, so the slot is
   reserved before either loads. */
.hero-visual { width: 330px; }
.hero-visual img,
.hero-visual video { display: block; width: 100%; height: auto; }

/* The phone: seven framed screenshots stacked and cross-faded by
   carousel.js, which watches for and recovers from dropped frames. The
   iPhone frame is baked into each image with transparency, so the
   container adds no chrome of its own. */
.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  aspect-ratio: 640 / 1327; /* the framed webp size, reserved before load */
}
.phone img { width: 100%; height: auto; display: block; }
/* Pin only the top: a bottom pin would squash every frame into whatever
   height the first image happens to have while loading. */
.shot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
}
.shot:first-child { position: relative; }
.shot.is-active { opacity: 1; }

/* iPhone band: the copy beside the carousel. */
.iphone-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 64px;
  align-items: center;
}
.iphone-copy .section-intro { margin-bottom: 0; }
.iphone-visual .phone { width: 300px; }

/* Sections: a hairline between every section, alternate sections on the
   raised band, and left aligned serif headings over the intro. Whatever a
   section ends on, an intro, a figure, or a card grid, drops its own
   bottom margin, so the gap between any two sections is the padding alone.
   Anchor jumps land with the heading clear of the fixed navbar. */
section {
  padding: 80px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 16px;
}
section.band { background: var(--raised); }
section .wrap > :last-child { margin-bottom: 0; }
.section-title {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.8px;
  margin-bottom: 18px;
  text-wrap: balance;
}
.section-intro {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 0 44px;
  text-wrap: pretty;
}
/* The second heading in the game guide, a step down from the section's. */

/* Cards read as columns under a hairline, no boxes, with the suit pip
   standing above its heading the way an icon would. */
.features,
.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.card {
  border-top: 1px solid var(--line);
  padding: 26px 0 34px;
}
.card h3 {
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
  line-height: 1.3;
  margin-bottom: 8px;
}
.card p { color: var(--muted); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.card-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.card .pip {
  display: block;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  font-weight: 400;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin-bottom: 14px;
}
.new-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* The unfolded Duo, framed in its own bezel, so no panel border. It stays
   within one screen's height on short desktop windows, the way Great
   Circle's Duo film does. */
.duo-film { margin: 8px auto 0; max-width: 880px; }
.duo-film img,
.duo-film video {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 280px);
  min-height: 260px;
  object-fit: contain;
}

/* Device figures: the iPad loop, the iPad and Mac captures, and the
   Best-Best hand, at the column's width. Each brings its device bezel
   baked in, so none takes a border or shadow. */
.device-shot,
.example-shot {
  margin: 40px auto 0;
  max-width: 880px;
}
/* A figure straight under a heading sits closer than one under an intro. */
.section-title + .device-shot { margin-top: 28px; }
/* Stacked figures get a full beat of air. */
.device-shot + .device-shot { margin-top: 56px; }
.device-shot > img,
.device-shot > video,
.example-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.device-shot figcaption,
.example-shot figcaption {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* Android: a Pixel 10 Pro and the Xiaomi 18 Fold open and closed, at true
   relative size (scripts/android-lineup.mjs), as on Great Circle Map's
   site. The captions sit on a grid whose columns are the devices' widths
   and the gaps between them in millimetres, as the script stands them and
   prints them, so each caption centers under its device. */
.device-shot.android-lineup { margin-top: 8px; }
.android-lineup .lineup-names {
  display: grid;
  grid-template-columns: minmax(0, 72.1fr) minmax(0, 10fr) minmax(0, 164.5fr) minmax(0, 10fr) minmax(0, 83.6fr);
  text-wrap: balance;
}
.android-lineup .lineup-pixel { grid-column: 1; }
.android-lineup .lineup-open { grid-column: 3; }
.android-lineup .lineup-closed { grid-column: 5; }
/* On a phone the two narrow devices' captions also take the gap beside
   them and break into even lines. */
@media (max-width: 600px) {
  .android-lineup .lineup-names { font-size: 12px; line-height: 1.35; margin-top: 12px; }
  .android-lineup .lineup-pixel { grid-column: 1 / 3; }
  .android-lineup .lineup-closed { grid-column: 4 / 6; }
}

/* Free To Evaluate: the folded Duo kicking the table's leg under the intro
   (scripts/make-free-evaluate.mjs), as Great Circle's classroom sits under
   its guide intro. The picture's top 40 of 1355 px is clear margin, so it
   is pulled up by that share of its width. */
.free-art { max-width: 880px; margin: calc(min(880px, 100%) * -40 / 1355) auto 0; }
.free-art img { display: block; width: 100%; height: auto; }
/* The closing section, as Great Circle Map closes its site: the crown
   beside the slogan, a line on where to get the app, and the store badges,
   centered. The crown is sized to the title as the hero's crown is
   to the h1. Every 2 s its jewels hop off the points and land, the centre
   first and the sides 0.15 s later, with the apps' splash timing (17
   frames up, 14 down, then a rebound to 16 percent in 14, at 60 fps). */
#get .wrap { text-align: center; }
#get .section-intro { margin: 0 auto 32px; }
.get-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; }
.get-head .section-title { margin-bottom: 0; }
.get-crown { width: 58px; height: 58px; flex: none; overflow: visible; }
.get-crown .jewel { animation: jewel-hop 2s infinite; }
.get-crown .jewel-side { animation-delay: 0.15s; }
@keyframes jewel-hop {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.7, 0.45, 1); }
  14.1667% { transform: translateY(-9px); animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3); }
  25.8333% { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.7, 0.45, 1); }
  31.6667% { transform: translateY(-1.44px); animation-timing-function: cubic-bezier(0.55, 0, 0.75, 0.3); }
  37.5%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .get-crown .jewel { animation: none; }
}

/* Footer. */
footer {
  border-top: 1px solid var(--line);
  background: var(--raised);
  padding: 30px 0 40px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
footer p { margin: 6px 0; }

/* Responsive. iPads from 768pt up keep the two-column hero with a smaller
   headline. Below 760px (the open Duo upright, phones, and the Duo's outer
   display) the hero and the iPhone band stack with the copy first, still
   left aligned, and the device beneath it. */
@media (max-width: 960px) {
  .hero-grid { gap: 40px; }
  .hero-visual { width: 290px; }
  .hero h1 { font-size: 48px; letter-spacing: -1px; }
  .hero-head .crown { width: 76px; height: 76px; }
  .iphone-visual .phone { width: 270px; }
}

/* The link row collapses into the hamburger menu well above phone width,
   because the longest translations (French, Russian) outgrow a single row
   long before the hero stacks. */
@media (max-width: 900px) {
  .nav-toggler { display: block; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--raised);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
    padding: 6px 12px 10px;
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 10px 8px; }
}

@media (max-width: 760px) {
  .hero { padding: 44px 0 56px; }
  section { padding: 64px 0; scroll-margin-top: 28px; }
  .hero-head { margin-bottom: 20px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-text { max-width: 620px; }
  .hero-visual { width: 280px; justify-self: center; }
  /* Stacked, the store badges and the device line sit centered over the
     Duo below them. */
  .hero-store { margin-left: auto; margin-right: auto; }
  .hero h1 { font-size: 44px; letter-spacing: -0.9px; }
  .tagline { font-size: 24px; }
  .section-title { font-size: 36px; }
  .get-crown { width: 50px; height: 50px; }
  .iphone-grid { grid-template-columns: 1fr; gap: 40px; }
  .iphone-visual .phone { width: 244px; }
}

/* Short landscape windows (laptops, iPads, and the open Duo on its side):
   tighten the hero so the Duo sits above the fold. */
@media (min-width: 761px) and (max-height: 800px) {
  .hero { padding: 40px 0 40px; }
  .hero-head { margin-bottom: 18px; }
  .hero-head .crown { width: 72px; height: 72px; }
  .hero h1 { font-size: 46px; }
  .hero-visual { width: 280px; }
  .lede { font-size: 16px; }
}

/* Phones. Mid sizes above this (iPad mini portrait, split view) keep the
   two-column cards, which still fit there. */
@media (max-width: 640px) {
  .iphone-visual .phone { width: 224px; }
  .features,
  .game-grid { grid-template-columns: 1fr; }
}

/* Narrow phones and the Duo's outer display. */
@media (max-width: 480px) {
  section { padding: 56px 0; }
  .hero-head { gap: 14px; }
  .hero-head .crown { width: 60px; height: 60px; }
  .hero h1 { font-size: 36px; letter-spacing: -0.6px; }
  .tagline { font-size: 22px; }
  .lede,
  .section-intro { font-size: 16px; }
  .section-title { font-size: 31px; letter-spacing: -0.5px; }
  .get-head { gap: 10px; }
  .get-crown { width: 44px; height: 44px; }
  .section-intro { margin-bottom: 36px; }
  .card { padding: 22px 0 28px; }
  /* Both store badges fit one row at 375pt in every language, the wider
     French and Korean App Store badges included. */
  .badges { gap: 12px; }
  .store-badge { height: 44px; }
}

@media (max-width: 360px) {
  /* The brand, the picker, and the hamburger share 280pt of bar. */
  .nav-brand { gap: 8px; font-size: 15px; }
  .nav-crown { width: 34px; height: 34px; }
  .badges { gap: 10px; }
  .store-badge { height: 40px; }
  .hero-head .crown { width: 52px; height: 52px; }
  .hero h1 { font-size: 32px; }
  .section-title { font-size: 28px; }
  .get-crown { width: 40px; height: 40px; }
}