/* KUMITE website. The game's paper, ink and red, its two typefaces (Permanent
   Marker for headings, Space Mono for text) and its hard offset shadow, the one
   on every caption in the game. All colours are solid. Space separates sections;
   the raised paper marks one band per page and the footer. */
:root {
  --paper: #f3efe5;
  --surface: #e6e0d1;
  --ink: #0b0b0b;
  --ink-2: #4a463f;
  --paper-2: #b8b1a2;
  --red: #b3121b;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 48px;
  --s5: 128px;

  --t-xl: clamp(84px, 13vw, 168px);
  --t-l: clamp(36px, 4.8vw, 60px);
  --t-m: 20px;
  --t-s: 16px;

  --brush: 'Permanent Marker', 'Brush Script MT', cursive;
  --mono: 'Space Mono', ui-monospace, monospace;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 600px) {
  :root { --s4: 32px; --s5: 80px; --t-m: 18px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-s)/1.65 var(--mono);
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
h1, h2, h3 { font-weight: 400; margin: 0; text-wrap: balance; }
h2 { font-family: var(--brush); font-size: var(--t-l); line-height: 1.05; }
p { margin: 0; text-wrap: pretty; }
b { font-weight: 700; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

/* ---- header ---- */
.top { padding: var(--s2) 0; }
.top .wrap { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; }
.brand {
  font-family: var(--brush); font-size: 34px; line-height: 1;
  color: var(--ink); text-decoration: none;
  text-shadow: 3px 3px 0 var(--red);
  padding: 4px 0;
}
.brand:hover { color: var(--ink); }
.links { display: flex; gap: var(--s3); margin-left: auto; }
.links a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 10px 0; }
.links a:hover, .links a[aria-current='page'] { color: var(--red); }
/* the game's button: ink, with the red offset every caption carries */
.get {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; text-decoration: none;
  box-shadow: 4px 4px 0 var(--red);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.get:hover { color: var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); }
.get:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--red); }
@media (max-width: 640px) {
  .brand { font-size: 28px; }
  .links { gap: var(--s2); }
  .links .wide { display: none; }
}
/* phones keep the brand and the one call to action; the hero carries the trial link */
@media (max-width: 440px) {
  .links { display: none; }
  .get { margin-left: auto; }
}

/* ---- calls to action ---- */
/* App Store badges: Apple's artwork, untouched, at least 40px tall with clear space */
.badges { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.badges a { display: inline-block; line-height: 0; padding: 4px; }
.badges img { height: 56px; width: auto; }
.try { margin-top: var(--s3); font-weight: 700; }
.try a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) {
  .badges { gap: var(--s1); }
  .badges img { height: 46px; }
}

/* ---- hero: a full-bleed film between two ink bars, like the opening of a film.
   The header is the top bar, the pitch is the bottom bar. On load a red cut opens
   the frame, the wordmark lands and the hit jolts the picture, the way a heavy
   hit lands in the game. ---- */
.top.over { background: var(--ink); }
.top.over .links { margin-left: auto; }
.top.over .brand { color: var(--paper); }
.top.over .links a { color: var(--paper); }
.top.over .links a:hover { color: var(--paper-2); }
.top.over .get { background: var(--paper); color: var(--ink); }
.top.over .get:hover { color: var(--ink); }
.top.over a:focus-visible, .hero a:focus-visible { outline-color: var(--paper); }

.hero {
  --card: 290px;
  position: relative; overflow: clip;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  /* fills the screen under the header, and never shows the film taller than 16:9 */
  height: min(calc(100svh - 76px), calc(56.25vw + var(--card)));
  min-height: 560px;
  background: var(--ink); color: var(--paper);
}
.film { position: relative; min-height: 0; overflow: clip; }
.film-inner, .film picture, .film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; }
.film img, .film video { object-fit: cover; object-position: 50% 50%; max-width: none; }
.film video { opacity: 0; transition: opacity 0.4s linear; }
.film video.on { opacity: 1; }

.hero-card { padding: 32px 0 40px; }
.hero-card .wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s3) clamp(32px, 5vw, 96px); align-items: end;
}
.hero h1 { display: grid; gap: var(--s1); }
.wordmark {
  font-family: var(--brush); font-size: clamp(64px, 8.4vw, 136px); line-height: 0.82;
  color: var(--paper); text-shadow: 0.05em 0.05em 0 var(--red);
  margin-left: -0.04em;
}
.tagline { font-weight: 700; font-size: var(--t-s); line-height: 1.5; max-width: 22em; }
.hero-copy { justify-self: end; max-width: 560px; }
.lede { font-size: var(--t-s); line-height: 1.6; color: var(--paper-2); max-width: 36em; }
.lede b { color: var(--paper); }
.hero .badges { margin-top: var(--s3); }
.hero .try { margin-top: var(--s1); }
.hero .try a { color: var(--paper); text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.hero .try a:hover { color: var(--paper-2); }

@media (max-width: 1000px) {
  .hero { --card: 420px; }
  .hero-card .wrap { grid-template-columns: 1fr; }
  .hero-copy { justify-self: start; }
}
/* phones held upright get a square cut of the film, framed for the narrow screen */
@media (max-width: 760px) and (orientation: portrait) {
  .hero { height: auto; min-height: 0; grid-template-rows: auto auto; }
  .film { aspect-ratio: 1; }
  .hero-card { padding: var(--s3) 0 var(--s4); }
  .wordmark { font-size: 20.5vw; }
  .hero h1 { gap: var(--s1); }
}

/* phones on their side and other short screens: the hero takes its natural height */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { height: auto; min-height: 0; grid-template-rows: auto auto; }
  .film { aspect-ratio: 2.4; }
}

@media (prefers-reduced-motion: no-preference) {
  .film::before, .film::after {
    content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 50%; height: 3px;
    background: var(--red); transform-origin: left center; pointer-events: none;
    animation: cut-top 1.3s cubic-bezier(0.76, 0, 0.24, 1) both;
  }
  .film::after { animation-name: cut-bottom; }
  .film-inner { animation: open 0.95s 0.3s cubic-bezier(0.76, 0, 0.24, 1) both, jolt 0.28s 1.32s steps(1, end); }
  .wordmark { animation: land 0.42s 0.92s cubic-bezier(0.55, 0, 0.9, 0.4) both; }
  .tagline, .lede, .hero .badges, .hero .try { animation: rise 0.7s var(--ease-out) both; }
  .tagline { animation-delay: 1.4s; }
  .lede { animation-delay: 1.5s; }
  .hero .badges { animation-delay: 1.6s; }
  .hero .try { animation-delay: 1.7s; }
  .top.over .wrap { animation: rise 0.7s 1.5s var(--ease-out) both; }
}
/* a red cut across the middle of the frame, then its two edges ride the frame open */
@keyframes cut-top {
  0% { transform: scaleX(0); top: 50%; opacity: 1; }
  24% { transform: scaleX(1); top: 50%; }
  90% { top: 0; opacity: 1; }
  100% { transform: scaleX(1); top: 0; opacity: 0; }
}
@keyframes cut-bottom {
  0% { transform: scaleX(0); top: 50%; opacity: 1; }
  24% { transform: scaleX(1); top: 50%; }
  90% { top: calc(100% - 3px); opacity: 1; }
  100% { transform: scaleX(1); top: calc(100% - 3px); opacity: 0; }
}
@keyframes open { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0 0 0 0); } }
/* the wordmark falls onto the page, then its red shadow lands a beat later */
@keyframes land {
  0% { opacity: 0; transform: scale(1.5) translateY(-6%); text-shadow: 0 0 0 var(--red); }
  20% { opacity: 1; }
  82% { transform: none; text-shadow: 0 0 0 var(--red); }
  100% { transform: none; text-shadow: 0.05em 0.05em 0 var(--red); }
}
/* hit-stop: four hard frames of shake, no easing */
@keyframes jolt {
  0% { transform: scale(1.03) translate(-1.1%, 0.6%); }
  25% { transform: scale(1.03) translate(0.9%, -0.8%); }
  50% { transform: scale(1.03) translate(-0.5%, 0.4%); }
  75% { transform: scale(1.03) translate(0.2%, -0.2%); }
  100% { transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* as the page scrolls on, the film sinks a little slower than the page */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .film picture, .film video { animation: sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@keyframes sink { to { transform: translateY(22%); } }

/* ---- sections ---- */
.section { padding-bottom: var(--s5); }
.hero + .section { padding-top: var(--s5); }
.section h2 { margin-bottom: var(--s3); }
.intro { color: var(--ink-2); font-size: var(--t-m); line-height: 1.55; max-width: 36em; }
.section .intro { margin-bottom: var(--s4); }
.prose > * { max-width: 44em; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s2); }
.prose h2 { font-family: var(--mono); font-weight: 700; font-size: var(--t-m); line-height: 1.35; margin-bottom: var(--s1); }
.prose h2:not(:first-child) { margin-top: var(--s4); }
.prose .get { margin-bottom: var(--s2); }
.prose ul { margin: 0; padding-left: 1.2em; }
.prose li + li { margin-top: var(--s1); }
.prose b { color: var(--ink); }
.prose .meta { margin-bottom: var(--s3); }

/* the one raised band per page */
.band { background: var(--surface); padding: var(--s5) 0; margin-bottom: var(--s5); }
.band .section { padding-bottom: 0; }

/* ---- two columns: copy beside a picture ---- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4) clamp(32px, 5vw, 80px); align-items: start; }
.split .copy p { color: var(--ink-2); }
.split .copy p + p { margin-top: var(--s2); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---- Dave: lines from the game, set the way the game captions them ---- */
.lines { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); justify-items: start; }
.cap {
  font-weight: 700; line-height: 1.5;
  color: var(--paper); background: var(--ink);
  padding: 0.45em 0.8em; box-shadow: 5px 5px 0 var(--red);
  max-width: 34em;
}
.cap b { display: inline-block; margin-right: 0.6em; padding: 0 0.35em; background: var(--red); }
.cap.nib { color: var(--ink); background: var(--paper); outline: 3px solid var(--ink); outline-offset: -3px; box-shadow: 5px 5px 0 var(--ink); justify-self: end; }
.cap.nib b { background: var(--ink); color: var(--paper); }
.split > .shot { width: 100%; position: sticky; top: var(--s3); }

/* ---- the fighting ---- */
.pairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s4); margin: 0; }
.pairs dt { font-weight: 700; font-size: var(--t-m); line-height: 1.3; margin-bottom: var(--s1); }
.pairs dd { margin: 0; color: var(--ink-2); }
@media (max-width: 900px) { .pairs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pairs { grid-template-columns: 1fr; gap: var(--s3); } }

.style-meter { margin-top: var(--s5); }
.style-meter p { color: var(--ink-2); max-width: 40em; }
/* the five ranks in the red brush lettering the game stamps beside your combo */
.ranks { list-style: none; padding: 0; margin: var(--s3) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.ranks li { font-family: var(--brush); font-size: var(--t-l); line-height: 1.1; color: var(--red); transform: rotate(-4deg); }

/* ---- the building, top floor first ---- */
.floors { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s5); }
.floor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s3) clamp(32px, 5vw, 72px); align-items: center; }
.floor:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.floor:nth-child(even) img { order: 2; }
.floor h3 { font-family: var(--brush); font-size: var(--t-l); line-height: 1; }
.floor .sub { font-weight: 700; margin-top: var(--s1); }
.floor .sub + p { color: var(--ink-2); margin-top: var(--s2); }
.floor .free { margin-top: var(--s2); font-weight: 700; }
@media (max-width: 900px) {
  .floors { gap: var(--s4); }
  .floor, .floor:nth-child(even) { grid-template-columns: 1fr; }
  .floor:nth-child(even) img { order: 0; }
}

/* ---- devices: columns sized so the iPhone and iPad shots stand the same height ---- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3) var(--s4); color: var(--ink-2); }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; gap: var(--s2); max-width: 44em; } }
.trio + .devices { margin-top: var(--s4); }
.devices { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--s2); align-items: end; }
.devices img { width: 100%; }
@media (max-width: 600px) { .devices { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.faq { max-width: 50em; }
.faq summary {
  cursor: pointer; list-style: none; min-height: 44px; padding: var(--s1) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  font-weight: 700; font-size: var(--t-m); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--red); font-family: var(--brush); font-size: 32px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { color: var(--ink-2); padding: 0 0 var(--s3); max-width: 44em; }
.faq details + details { margin-top: var(--s1); }

/* ---- keys on the how to play page ---- */
kbd {
  font: 700 0.85em var(--mono); white-space: nowrap;
  color: var(--paper); background: var(--ink); padding: 0 0.4em;
}

/* ---- finale ---- */
.finale { text-align: center; }
.finale .wrap { display: grid; justify-items: center; }
.app-icon { width: 112px; height: 112px; border-radius: 25px; margin-bottom: var(--s3); }
.finale h2 { font-size: var(--t-xl); line-height: 0.95; text-shadow: 0.05em 0.05em 0 var(--red); margin-bottom: var(--s3); }
.finale p { font-size: var(--t-m); }
.finale .badges { justify-content: center; margin-top: var(--s4); }

/* ---- page heading on the inner pages ---- */
.page-hero { padding: var(--s4) 0; }
.page-hero h1 { font-family: var(--brush); font-size: var(--t-l); line-height: 1.05; margin-bottom: var(--s2); }

/* ---- footer ---- */
.foot { background: var(--surface); padding: var(--s4) 0; color: var(--ink-2); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
.foot a { color: var(--ink); text-decoration: none; display: inline-block; padding: 10px 0; }
.foot a:hover { color: var(--red); }
.foot .legal { margin-left: auto; }
/* Apple's trademark notice, the one line of fine print */
.foot .tm { width: 100%; }
@media (max-width: 760px) { .foot .legal { margin-left: 0; width: 100%; } }

/* ---- art arrives as it scrolls into view, where scroll timelines exist,
   and stays still for anyone who prefers less motion ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: arrive linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes arrive { from { transform: translateY(48px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.run { width: 100%; max-width: 960px; margin-top: var(--s3); background: var(--ink); }