/* Landing page. Tokens and buttons: site.css. */
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--linen); color: var(--ink);
  font: 400 17px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; font-stretch: 112%; margin: 0; }

/* hero: drawn like the worlds. A polar night sky, softly lit behind the words, with a strip of sea,
   ink-outlined icebergs and a penguin on a floe along the bottom; headline, words and buttons centred.
   Navy sits opposite the orange "easy", so the one hand-drawn word is the brightest thing here. */
.hero {
  position: relative; overflow: hidden; min-height: 88svh; box-sizing: border-box;
  display: grid; place-items: center; text-align: center;
  /* the sea keeps its drawn proportions as the page widens; the words stay clear of the tallest peak */
  --sea: max(220px, calc(100vw * 300 / 1440));
  padding: 96px 24px calc(var(--sea) * 0.86 + 24px);
  background:
    radial-gradient(ellipse 62% 58% at 50% 42%, var(--glow) 0%, color-mix(in oklab, var(--glow) 70%, var(--sky)) 35%,
      color-mix(in oklab, var(--glow) 30%, var(--sky)) 62%, transparent 90%),
    var(--sky);
  --sky: #1c2a42;        /* polar night */
  --glow: #2f4468;       /* the lit patch behind the words */
  --toon-ink: #1f2126;   /* the worlds' ink (engine.js INK) */
}
.hero-copy { position: relative; z-index: 1; max-width: 1120px; }
.hero h1 { color: var(--linen); font-size: clamp(42px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.035em; margin-bottom: 24px; }
.hero .together { white-space: nowrap; }   /* if the headline wraps, it breaks after "System Design" */
.hero .drawn {   /* the one hand-drawn word, on a highlighter swipe, as Excalidraw+ does */
  font: 400 1em var(--hand); font-stretch: normal; letter-spacing: 0; color: var(--ink);
  display: inline-block; position: relative; padding: 0 .12em; margin-left: .04em; transform: rotate(-2deg);
}
/* The swipe is a plain block behind the word, not a hard-stopped gradient: a tilted gradient's
   edges come out stair-stepped, while a tilted box's edges are smoothed. */
.hero .drawn::before { content: ""; position: absolute; inset: 12% 0; z-index: -1; background: #e8b067; }
.hero p { color: #e4eeeb; font-size: 19px; max-width: 42ch; margin: 0 auto 32px; text-wrap: balance; }
.actions { display: flex; gap: 12px 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* one button only: the way to the worlds below is a quiet link, not a second call to action */
.peek { color: var(--linen); font: 600 16px/1 var(--display); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.peek:focus-visible { outline: 2px solid var(--linen); outline-offset: 4px; border-radius: 4px; }
.hero .btn-primary { background: var(--linen); color: var(--ink); border-color: var(--linen); }
.hero .btn:focus-visible { outline-color: var(--linen); }

.sea { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--sea); }
.sea .lit { fill: #f4f9fb; }
.sea .mid { fill: #d5e8f1; }
.sea .shade { fill: #a7cbde; }
.sea .crease { fill: none; stroke: var(--toon-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.sea .edge, .sea .water, .sea .floe { stroke: var(--toon-ink); stroke-width: 3; stroke-linejoin: round; }
.sea .edge { fill: none; }
.sea .water { fill: #3a87ae; }
.sea .under { fill: #7dbcd8; opacity: 0.5; }
.sea .deep { fill: #2f729a; }
.sea .deeper { fill: #275f84; }
.sea .floe { fill: #f4f9fb; stroke-width: 2.5; }
.sea .foam path { stroke: #eaf6fb; stroke-width: 3; stroke-linecap: round; }
.sea .ripples path { stroke: #8ccbe6; stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.sea .penguin * { stroke: var(--toon-ink); stroke-width: 2; stroke-linejoin: round; }
.sea .penguin .body { fill: #2b2f38; }
.sea .penguin .belly { fill: #f3f1ec; stroke: none; }
.sea .penguin .orange { fill: #e8973f; }
.sea .penguin .eye { fill: var(--toon-ink); stroke: none; }

/* a peek inside: examples of the worlds, each diorama floating on the page beside its words */
.worlds, .how, .foot { max-width: 1280px; margin: 0 auto; box-sizing: border-box; padding-left: 24px; padding-right: 24px; }
.worlds { padding-top: 80px; padding-bottom: 80px; }
.worlds h2, .how h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.015em; max-width: 14ch; margin-bottom: 40px; }
.worlds h2 { margin-bottom: 12px; }
.worlds .lede { color: var(--stone); font-size: 18px; max-width: 46ch; margin: 0 0 48px; }
.world { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; color: inherit; text-decoration: none; margin-bottom: 64px; }
.world.flip { grid-template-columns: 1fr 1.5fr; }
.world.flip img { order: 2; }   /* picture on the right; the words stay first for screen readers */
.world img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.world:hover img { transform: translateY(-6px); }
.world:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; border-radius: var(--radius); }
.world h3 { font-size: clamp(28px, 3vw, 38px); font-weight: 500; line-height: 1.1; margin: 0 0 12px; }
.world p { color: var(--stone); font-size: 18px; max-width: 36ch; margin: 0; }

/* how it works: words left, a still right */
.how { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 32px; padding-bottom: 96px; }
.how h2 { margin-bottom: 24px; }
.how p { color: var(--stone); font-size: 18px; max-width: 40ch; margin: 0 0 16px; }
.how .btn { margin-top: 16px; }
.how-cast { display: flex; justify-content: center; align-items: end; gap: 8px; }
.how-cast img { width: min(42%, 220px); height: auto; }

/* footer: who made it and how to reach them, where to learn more, an invitation, then the credits.
   Stone rather than pebble for its text: pebble on linen is too faint to read. */
.foot { padding-bottom: 40px; color: var(--stone); font-size: 16px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 32px; padding-top: 40px; border-top: 1px solid var(--line); }   /* rules line up with the text */
.foot h2 { font-size: 14px; font-weight: 600; font-stretch: normal; color: var(--ink); margin: 0 0 12px; }
.foot p { margin: 0 0 8px; }
.foot .foot-name { font: 700 20px/1.2 var(--display); font-stretch: 112%; color: var(--ink); margin-bottom: 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot a:hover { text-decoration-thickness: 2px; }
.foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.foot .foot-credits { margin: 40px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

@media (max-width: 760px) {
  .hero p { font-size: 17px; }
  .world, .world.flip, .how { grid-template-columns: 1fr; gap: 16px; }
  .world.flip img { order: 0; }
  .how { gap: 32px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-maker { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}