/* ==========================================================================
   codez for kids
   --------------------------------------------------------------------------
   The design file is a single 1920 x 10536 artboard. Everything below is
   expressed in *design pixels* — the numbers measured off that artboard —
   and converted with --u, one design pixel:

       --u = min(100vw, 1920px) / 1920

   So calc(94 * var(--u)) is 94px at 1920 wide and scales down proportionally.
   Type additionally gets a floor (max(...)), because a straight proportional
   shrink would take 17px body copy to 6px on a phone.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Diary of an 8-bit mage";
  src: url("../assets/fonts/DiaryOfAn8BitMage-lYDD.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Qualy Text";
  src: url("../assets/fonts/Shina Design - Qualy-Text.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --blue:      #4386c4;
  --blue-nav:  #36719e;   /* the artboard's flattened nav-bar value */
  /* The artboard can only show the bar over the flat hero blue, so its #36719e
     is a *composite*. Reading it back as a translucent layer is one equation
     per channel with four unknowns — a whole family of (colour, alpha) pairs
     reproduces it, with no real colour possible below alpha 0.194. This is that
     family at 0.85: rgba(52,109,152,.85) over #4386c4 composites to exactly
     #36719e, so the hero is pixel-identical to the design and every other
     section now shows through the bar. */
  --blue-nav-glass: rgba(52, 109, 152, .85);
  --cream:     #f3f2ee;
  --cream-alt: #edece4;
  --yellow:    #e9e96e;
  --ink:       #21211e;

  --display: "Diary of an 8-bit mage", "Courier New", monospace;
  --body:    "Qualy Text", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --u: calc(min(100vw, 1920px) / 1920);

  /* Where a scrolled-to section's top edge lands, measured from the viewport
     top. Every scroll target already carries enough of its own top padding
     (141-245 design px) to clear the floating nav, so a positive value here
     only parks a strip of the *previous* section on screen. Slightly negative
     rather than 0: section boundaries land on fractional pixels because all the
     spacing derives from --u, and 0 can leave a 1px sliver of the section
     above. Raise this if you ever want a scrolled-to section to sit lower. */
  --scroll-landing: -2px;

  --fs-name:    max(52px,   calc(323 * var(--u)));
  --fs-cluster: max(38px,   calc(120 * var(--u)));
  --fs-display: max(30px,   calc( 94 * var(--u)));
  --fs-lg:      max(19px,   calc( 43 * var(--u)));
  --fs-tag:     max(18px,   calc( 35 * var(--u)));
  --fs-md:      max(15px,   calc( 30 * var(--u)));
  --fs-sm:      max(13.5px, calc( 17 * var(--u)));
  --fs-nav:     max(13px,   calc( 14 * var(--u)));
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero :focus-visible, .founder :focus-visible { outline-color: var(--yellow); }

.skip-link {
  position: absolute;
  left: 50%; top: 8px;
  transform: translate(-50%, -200%);
  z-index: 100;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  text-decoration: none;
  font-size: 16px;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ── Floating nav ────────────────────────────────────────────────────────── */
/* Design file: 348 x 50 pill at y=48, item pills inset 4, 1px divider between
   adjacent inactive items. Its label type measures 11px at 1920, which is
   unreadable on a real screen, so labels are set at 14px instead and the bar
   sizes itself around them. */
.nav {
  position: fixed;
  top: calc(48 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--blue-nav-glass);
  /* blur only: it is a no-op over the flat hero, so the composite stays exact,
     while keeping the labels readable when the bar crosses the headshot.
     A saturate()/brightness() pass would tint the hero and break the match. */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: calc(4 * var(--u));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--blue-nav); }
}
.nav__list { display: flex; align-items: stretch; }
.nav__item { display: flex; align-items: center; }
.nav__item + .nav__item::before {
  content: "";
  width: 1px;
  height: calc(25 * var(--u));
  min-height: 14px;
  background: var(--cream);
  opacity: 1;
}
/* the divider only shows between two inactive items, as drawn */
.nav__item.is-active::before,
.nav__item.is-active + .nav__item::before { opacity: 0; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: calc(42 * var(--u));
  padding: calc(9 * var(--u)) calc(22 * var(--u));
  border-radius: 999px;
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.nav__item.is-active .nav__link { background: var(--cream-alt); color: var(--ink); }
.nav__link:hover { color: var(--yellow); }
.nav__item.is-active .nav__link:hover { color: var(--ink); }

/* ── Shared type ─────────────────────────────────────────────────────────── */
.section-title {
  font-family: var(--display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-wrap: balance;
}
.lede {
  font-size: var(--fs-md);
  line-height: .87;
}
.body {
  font-size: var(--fs-sm);
  line-height: 1.18;
}

/* ── 1. Hero ─────────────────────────────────────────────────────────────── */
.hero {
  background: var(--blue);
  color: var(--cream);
  text-align: center;
  padding: calc(357 * var(--u)) calc(40 * var(--u)) calc(151 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__logo { width: calc(692 * var(--u)); height: auto; }
.hero__tagline {
  margin-top: calc(79 * var(--u));
  max-width: calc(1040 * var(--u));
  font-size: var(--fs-tag);
  line-height: 1.14;
  text-wrap: balance;
}
.hero__doodle {
  margin-top: calc(31 * var(--u));
  width: calc(119 * var(--u));
  height: auto;
}

/* ── 2. Choose Your Fighter ──────────────────────────────────────────────── */
.fighters {
  padding: calc(141 * var(--u)) calc(40 * var(--u)) calc(63 * var(--u));
  scroll-margin-top: var(--scroll-landing);
}
.fighters__row {
  position: relative;
  margin-top: calc(101 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(113 * var(--u));
}

/* Cards. --w/--h are the *art box* in design px (letterforms plus the ~29.5
   unit bleed the hover art needs); --dy is the card's own vertical offset in
   the design file's scattered arrangement. */
.fighter {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin-top: calc(var(--dy) * var(--u));
  cursor: pointer;
  transform: scale(1);
  transition: transform .25s cubic-bezier(.55, 0, 1, .45); /* ease-in */
}
.fighter__art {
  position: absolute;
  inset: 0;
  transition: opacity .22s ease;
}
.fighter__art svg { width: 100%; height: 100%; }
/* website-02/03/04 ship filled #f3f2ee — the page background — so they render
   invisible. Recoloured to blue here, which is what the design file shows. */
.fighter__art--rest  { color: var(--blue); opacity: 1; }
.fighter__art--rest  svg .fa-a { fill: currentColor; }
.fighter__art--hover { opacity: 0; }
.fighter__art--hover svg .fa-a { fill: var(--blue); }
.fighter__art--hover svg .fa-b { fill: var(--cream); }

.fighter.is-active { transform: scale(1.15); }
.fighter.is-active .fighter__art--rest  { opacity: 0; }
.fighter.is-active .fighter__art--hover { opacity: 1; }

/* deactivation: overshoot small, then settle elastically */
.fighter.is-settling { animation: fighter-settle .5s ease-out both; }
@keyframes fighter-settle {
  0%   { transform: scale(1.15); }
  30%  { transform: scale(.85); }
  55%  { transform: scale(1.05); }
  78%  { transform: scale(.95); }
  100% { transform: scale(1); }
}

.fighters__cursor {
  position: absolute;
  left: 0; top: 0;
  width: calc(122 * var(--u));
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  transform: translate(var(--cx, 0px), var(--cy, 0px)) rotate(26deg);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  z-index: 3;
}
.fighters__cursor.is-visible { opacity: 1; }
/* decorative and absolutely placed — it must never lengthen the page */
.fighters { overflow-x: clip; }
@media (pointer: coarse), (hover: none) {
  .fighters__cursor { display: none; }
}

/* ── 3-5. Service sections ───────────────────────────────────────────────── */
.service {
  padding: calc(245 * var(--u)) calc(40 * var(--u)) 0;
  scroll-margin-top: var(--scroll-landing);
}
.service__copy {
  margin: calc(50 * var(--u)) auto 0;
  width: calc(1228 * var(--u));
  max-width: 100%;
  display: grid;
  grid-template-columns: calc(582 * var(--u)) calc(571 * var(--u));
  justify-content: space-between;
  gap: calc(75 * var(--u));
}

/* Pill clusters ---------------------------------------------------------- */
/* Each cluster is a 720 x 590 design-unit stage. Pills are placed by centre
   with --x/--y and sized with --w, all as a percentage of that stage, and
   type inside uses cqw so the whole arrangement scales as one piece. */
.clusters {
  margin: calc(205 * var(--u)) auto 0;
  width: calc(1560 * var(--u));
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(120 * var(--u));
}
.cluster {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 720 / 590;
}
.cluster__title {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--rot));
  margin: 0;
  font-family: var(--display);
  font-size: max(38px, 16.667cqw);   /* 120 of 720 */
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
}
.pill {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-height: 15.7cqw;               /* 113 of 720 */
  transform: translate(-50%, -50%) rotate(var(--rot));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2cqw 4.2cqw;
  border-radius: 999px;
  font-size: max(13px, 4.167cqw);    /* 30 of 720 */
  line-height: 1.1;
  text-align: center;
}
.pill--blue   { background: var(--blue);   color: var(--cream); }
.pill--yellow { background: var(--yellow); color: var(--ink); }
.pill--ink    { background: var(--ink);    color: var(--yellow); }
.pill--ink    { z-index: 2; }
.pill__note { display: block; font-size: .62em; line-height: 1.1; }

/* Prerequisites ---------------------------------------------------------- */
.service { --prereq-gap: 177; }
#think { --prereq-gap: 203; }   /* the artboard sets this one wider */
.section-title--sub { margin-top: calc(var(--prereq-gap) * var(--u)); }
.prereqs {
  margin: calc(42 * var(--u)) auto 0;
  width: calc(1520 * var(--u));
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: calc(30 * var(--u));
}
.prereq {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: calc(113 * var(--u));
  padding: calc(12 * var(--u)) calc(40 * var(--u));
  border: 1px solid var(--blue);
  border-radius: 999px;
  color: var(--blue);
  font-size: var(--fs-md);
  line-height: 1.1;
}
.prereqs__note {
  margin-top: calc(71 * var(--u));
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.2;
}

/* Book now --------------------------------------------------------------- */
.book-row {
  display: flex;
  justify-content: center;
  padding: calc(139 * var(--u)) 0 0;
}
.prereqs__note + .book-row { padding-top: calc(185 * var(--u)); }
/* The last service's button needs cream under it before the dark founder band
   starts; the artboard gives no guide here because it has no button in this
   section. Note :last-of-type would count <section> siblings, and the last one
   is #contact, not a .service. */
.service:has(+ .founder) .book-row { padding-bottom: calc(150 * var(--u)); }
.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(280 * var(--u));
  min-height: calc(114 * var(--u));
  padding: calc(20 * var(--u)) calc(46 * var(--u));
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease;
}
.btn-book:hover { transform: translateY(-2px); background: #2e2e2a; }
.btn-book:active { transform: translateY(0); }

/* ── 6. Founder ──────────────────────────────────────────────────────────── */
.founder { scroll-margin-top: var(--scroll-landing); }
.founder__band {
  position: relative;
  height: calc(964 * var(--u));
  background: var(--ink);
}
.founder__photo {
  position: absolute;
  top: 0; right: 0;
  width: calc(959 * var(--u));
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
.founder__label {
  position: absolute;
  left: calc(57 * var(--u));
  top: calc(50 * var(--u));
  color: var(--yellow);
  font-size: var(--fs-lg);
  line-height: 1.2;
  z-index: 2;
}
/* The name is set flush to the viewport edge and overhangs the dark band by
   its descender, exactly as drawn. */
.founder__name {
  position: absolute;
  left: 0;
  top: calc(437 * var(--u));
  margin: 0;
  color: var(--yellow);
  font-family: var(--display);
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: .9;
  z-index: 2;
  pointer-events: none;
}
.founder__bio {
  background: var(--cream);
  padding: calc(100 * var(--u)) calc(40 * var(--u)) 0;
}
.founder__bio p {
  width: calc(1628 * var(--u));
  max-width: 100%;
  margin: 0 auto;
  font-size: var(--fs-lg);
  line-height: .87;
}

/* ── 7. Contact ──────────────────────────────────────────────────────────── */
.contact {
  padding: calc(202 * var(--u)) calc(40 * var(--u)) calc(60 * var(--u));
  scroll-margin-top: var(--scroll-landing);
}
.form {
  width: calc(1001 * var(--u));
  max-width: 100%;
  margin: calc(132 * var(--u)) auto 0;
}
.field { margin-bottom: calc(31 * var(--u)); }
.field__label {
  display: block;
  margin: 0 0 calc(12 * var(--u)) calc(32 * var(--u));
  font-size: var(--fs-md);
  line-height: 1.2;
}
.field__input {
  display: block;
  width: 100%;
  min-height: calc(75 * var(--u));
  padding: calc(16 * var(--u)) calc(32 * var(--u));
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.2;
}
.field__input--area {
  min-height: calc(270 * var(--u));
  border-radius: calc(40 * var(--u));
  resize: vertical;
}
.field__input::placeholder { color: var(--ink); opacity: .45; }
.field__input:focus { outline-offset: 2px; }
.field__input[aria-invalid="true"] { border-color: #b23b2e; border-width: 2px; }
.field__error {
  margin: calc(8 * var(--u)) 0 0 calc(32 * var(--u));
  color: #b23b2e;
  font-size: var(--fs-sm);
}

.form__submit-row {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: calc(60 * var(--u));
}
.tooltip {
  position: absolute;
  bottom: calc(100% - calc(46 * var(--u)));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(90vw, calc(700 * var(--u)));
  padding: calc(14 * var(--u)) calc(26 * var(--u));
  background: var(--ink);
  color: var(--cream);
  border-radius: calc(18 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 5;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: calc(10 * var(--u)) solid transparent;
  border-top-color: var(--ink);
}
.tooltip.is-visible { opacity: 1; }

.form__status {
  margin-top: calc(30 * var(--u));
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.2;
  min-height: 1.2em;
}
.form__status--ok    { color: #1f7a4d; }
.form__status--error { color: #b23b2e; }

.contact__note {
  margin: calc(60 * var(--u)) auto 0;
  text-align: center;
  font-size: var(--fs-lg);
  line-height: 1.2;
}
.contact__watermark {
  width: calc(529 * var(--u));
  height: auto;
  margin: calc(40 * var(--u)) auto 0;
}

/* ── Tablet and below ────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .service__copy {
    grid-template-columns: 1fr;
    width: calc(1400 * var(--u));
    gap: calc(50 * var(--u));
  }
  .lede { line-height: 1.05; }
  .founder__bio p { line-height: 1.05; }

  /* Below 1200 the scattered pill arrangement runs out of room: the stage
     shrinks with the viewport but the type inside hits its readable floor, so
     the labels start crowding the pill edges. Flow them instead. */
  .clusters {
    margin-top: calc(140 * var(--u));
    width: 100%;
    gap: calc(80 * var(--u));
  }
  .cluster {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .cluster__title {
    position: static;
    transform: rotate(calc(var(--rot) * .5));
    font-size: clamp(34px, 12cqw, 76px);
    text-align: center;
    white-space: normal;
  }
  .pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  .pill {
    position: static;
    width: auto;
    max-width: 100%;
    min-height: 0;
    padding: 14px 26px;
    font-size: max(14px, 3.2cqw);
    transform: rotate(calc(var(--rot) * .35));
  }
}

@media (max-width: 767px) {
  /* Below the tablet breakpoint the artboard proportions stop being useful and
     spacing switches to a plain rhythm, so most values below are literal px. */
  .nav { top: 12px; padding: 3px; }
  .nav__link { padding: 10px 14px; min-height: 34px; }

  .hero { padding: 120px 20px 56px; }
  .hero__logo { width: min(78vw, 420px); }
  .hero__tagline { margin-top: 28px; max-width: 34ch; }
  .hero__doodle { margin-top: 24px; width: 72px; }

  .fighters { padding: 56px 20px 8px; }
  .fighters__row {
    margin-top: 32px;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .fighter {
    margin-top: 0;
    width: min(76vw, 320px);
    height: auto;
    aspect-ratio: var(--w) / var(--h);
  }

  .service { padding: 64px 20px 0; }
  .service__copy { margin-top: 24px; width: 100%; gap: 20px; }

  .clusters { margin-top: 48px; gap: 44px; }

  .section-title--sub { margin-top: 56px; }
  .prereqs { margin-top: 24px; width: 100%; gap: 12px; }
  .prereq { min-height: 0; padding: 12px 20px; }
  .prereqs__note { margin-top: 28px; }

  .book-row { padding-top: 44px; }
  .service:has(+ .founder) .book-row { padding-bottom: 56px; }
  .btn-book { min-width: 200px; min-height: 62px; padding: 16px 32px; }

  .founder__band { height: auto; display: flex; flex-direction: column; }
  .founder__photo {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
  .founder__label { position: static; padding: 24px 20px 0; }
  .founder__name {
    position: static;
    padding: 8px 20px 28px;
    font-size: clamp(52px, 16vw, 120px);
  }
  .founder__bio { padding: 36px 20px 0; }

  .contact { padding: 64px 20px 40px; }
  .form { margin-top: 32px; }
  .field { margin-bottom: 20px; }
  .field__label { margin-left: 20px; }
  .field__input { min-height: 56px; padding: 14px 22px; }
  .field__input--area { min-height: 170px; border-radius: 24px; }
  .form__submit-row { padding-top: 28px; }
  .tooltip { bottom: calc(100% - 18px); padding: 10px 16px; }
  .contact__note { margin-top: 32px; }
  .contact__watermark { width: min(62vw, 300px); margin-top: 28px; }
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fighter.is-active { transform: none; }
  .fighter.is-settling { animation: none; }
  .fighters__cursor { transition: none; }
}