/* Henry White: site styles. Brand direction 1, "the badge, grown up". */

@font-face { font-family: "Baloo 2"; src: url("../fonts/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-italic.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

:root {
  --blue: #1E5FA8;
  --blue-deep: #143F78;
  --blue-night: #0F3264;
  --sky: #9FD0FF;
  --sun: #FFC736;
  --sun-deep: #C2900F;
  --coral: #F2705C;
  --coral-deep: #B54A3A;
  --cream: #FFF4DF;
  --cream-line: #E9DCC0;
  --ink: #16284A;
  --ink-soft: #46597C;

  --font-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-text: "Nunito", system-ui, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --gutter: max(clamp(20px, 4.4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --section: clamp(72px, 9vw, 144px);
  --measure: 62ch;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-sm: 0.9375rem;
  --t-base: 1.125rem;
  --t-lg: 1.3rem;
  --t-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --t-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  --t-3xl: clamp(2.6rem, 1.4rem + 4.1vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.skip { position: absolute; left: var(--s4); top: -60px; z-index: 100; background: var(--ink); color: var(--cream); padding: var(--s3) var(--s4); border-radius: 10px; text-decoration: none; font-weight: 800; }
.skip:focus { top: var(--s4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
/* Raised, toy-like buttons to match the embossed badge: a lit top edge, a
   pressed-in lip underneath and a soft shadow. Every button is filled. */
.btn {
  --btn-top: #FFDB6E; --btn-bottom: #FFC21F; --btn-lip: #C78F0C; --btn-ink: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5);
  border-radius: 999px; border: 0;
  font: 800 1.0625rem/1 var(--font-text);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  color: var(--btn-ink);
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(0, 0, 0, 0.06), 0 4px 0 var(--btn-lip), 0 10px 18px -6px rgba(8, 25, 60, 0.45);
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), filter 140ms var(--ease-out);
}
.btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 1px 0 var(--btn-lip), 0 4px 8px -4px rgba(8, 25, 60, 0.4); }
.btn--coral { --btn-top: #FF9580; --btn-bottom: #F2684F; --btn-lip: #B4432F; }
.btn--blue  { --btn-top: #3C86D6; --btn-bottom: #1D5CA6; --btn-lip: #0F3264; --btn-ink: #FFF8EA; }
.btn--ghost { --btn-top: #FFFCF4; --btn-bottom: #F5E6C6; --btn-lip: #C9B88F; }
.btn--line  { --btn-top: #3C86D6; --btn-bottom: #1D5CA6; --btn-lip: #0F3264; --btn-ink: #FFF8EA; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); filter: brightness(1.05) saturate(1.05); }
  .btn:active { transform: translateY(3px); }
}

/* ----------------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding: var(--s4) var(--gutter);
  color: var(--cream);
  transition: background-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), color 220ms var(--ease-out);
}
.site-header__logo { display: block; width: 124px; flex: none; transform-origin: 0 0; transition: transform 260ms var(--ease-out); filter: drop-shadow(0 8px 14px rgba(8, 25, 60, 0.35)); }
.site-header__logo img { width: 100%; }
.site-nav { display: flex; align-items: center; gap: clamp(var(--s4), 2.2vw, var(--s6)); min-height: 64px; }
.site-nav a:not(.btn) { font-weight: 800; text-decoration: none; padding: var(--s2) 0; }
.site-nav a:not(.btn):hover { text-decoration: underline; }
.site-nav .btn { min-height: 48px; }
.site-header.is-scrolled { background: var(--cream); color: var(--ink); box-shadow: 0 1px 0 var(--cream-line); padding-block: var(--s2); }
.site-header.is-scrolled .site-header__logo { transform: scale(0.5); }
.site-header.is-scrolled .site-nav { min-height: 48px; }
.site-header.is-scrolled { height: 80px; }
@media (max-width: 860px) {
  .site-header__logo { width: 84px; }
  .site-nav a:not(.btn) { display: none; }
  .site-nav { min-height: 48px; }
  .site-nav .btn { min-height: 44px; padding: 0 var(--s4); font-size: 0.98rem; }
  .site-header.is-scrolled { height: 64px; }
  .site-header.is-scrolled .site-header__logo { transform: scale(0.56); }
}

/* ------------------------------------------------------------------- hero */
.hero { position: relative; background: #164A8A; color: var(--cream); }
.hero__track { height: 260vh; }
.hero__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 1;
  background: radial-gradient(1100px 760px at 72% 52vh, #3B86D0 0%, #2367B2 45%, #164A8A 100%);
  background: radial-gradient(1100px 760px at 72% 52svh, #3B86D0 0%, #2367B2 45%, #164A8A 100%);
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center;
  padding: 112px var(--gutter) var(--s7);
  isolation: isolate;
}
/* The blue glow lives on a layer taller than the scene, so when a phone's browser
   bars slide away (making the screen taller) there is never a plain blue strip below. */

/* light-blue rays behind the machine */
.rays { position: absolute; z-index: 0; width: 150vh; aspect-ratio: 1; left: calc(73% - 75vh); top: calc(52vh - 75vh); top: calc(52svh - 75vh); pointer-events: none;
  -webkit-mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.5) 28%, transparent 56%); mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.5) 28%, transparent 56%); }
.rays::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(170, 215, 255, 0.24) 0deg 6deg, rgba(170, 215, 255, 0) 6deg 15deg);
  animation: rays-turn 120s linear infinite; }
@keyframes rays-turn { to { transform: rotate(360deg); } }

.hero__copy { position: relative; z-index: 3; max-width: 36rem; will-change: transform, opacity; }
.hero__title { font-size: var(--t-3xl); line-height: 0.96; letter-spacing: -0.02em; text-shadow: 0 4px 0 var(--blue-deep); }
.hero__title em { font-style: normal; color: var(--sun); text-shadow: 0 4px 0 #A8740A; }
.hero__title .ch { display: inline-block; }
.hero__lede { margin-top: var(--s5); font-size: var(--t-lg); font-weight: 600; line-height: 1.5; max-width: 30ch; color: #E4EEFA; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.hero__art { position: relative; height: 100%; min-height: 0; } /* no z-index: lets Tims sit in front of the machine and cover */
.hero__machine { position: absolute; width: 80%; right: -3%; bottom: 16%; will-change: transform; filter: drop-shadow(0 22px 24px rgba(8, 25, 60, 0.45)); }
.hero__machine img { width: 100%; }
.hero__book { position: absolute; width: 36%; left: 7%; bottom: 6%; z-index: 2; will-change: transform; filter: drop-shadow(0 22px 24px rgba(8, 25, 60, 0.5)); }
.hero__book img { width: 100%; }
.hero__sticker {
  position: absolute; z-index: 3; left: -52px; top: -46px; margin: 0;
  width: 124px; height: 124px;
  transform: rotate(-12deg);
  filter: drop-shadow(0 3px 0 #C2900F) drop-shadow(0 10px 14px rgba(8, 25, 60, 0.45));
}
.hero__sticker svg { display: block; width: 100%; height: 100%; }
.tb-times { font: 800 19px var(--font-display); fill: #143F78; letter-spacing: -0.2px; }
.tb-small { font: 800 10.6px var(--font-text); fill: #16284A; }

/* the lever: a real button that makes another Tim, drawn as a little control
   panel off the cloning machine (same grey-blue, ink outline, slot, ball lever
   and dome lights as Tim Wesson's drawing) */
.lever {
  position: absolute; z-index: 8; right: 0; bottom: 6%;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 6px 20px 6px 10px;
  border: 3px solid #16284A; border-radius: 16px; cursor: pointer;
  background: linear-gradient(180deg, #B8C8DA 0%, #A8BBD0 45%, #8FA4BD 100%); color: #16284A;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 5px 0 #16284A, 0 14px 22px -8px rgba(8, 25, 60, 0.55);
  font: 800 1.05rem/1 var(--font-display); letter-spacing: 0.005em;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.lever__ctl { width: 58px; height: 40px; flex: none; overflow: visible; margin-top: -6px; }
.lever__arm { transform-origin: 32px 34px; transform: rotate(-38deg); transition: transform 260ms var(--ease-back); }
.lever.is-pulled .lever__arm, .lever.is-pulled:hover .lever__arm { transform: rotate(38deg); transition-duration: 120ms; transition-timing-function: var(--ease-out); }
.lever__lights { position: absolute; left: 18px; top: -11px; display: flex; gap: 7px; pointer-events: none; }
.lever__lights i { width: 14px; height: 10px; border: 2.5px solid #16284A; border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--c); filter: saturate(0.55) brightness(0.8); transition: filter 120ms; }
.lever__lights i:nth-child(1) { --c: #04B634; } .lever__lights i:nth-child(2) { --c: #FBEE06; } .lever__lights i:nth-child(3) { --c: #FF3634; }
.lever.is-pulled .lever__lights i { animation: dome 520ms ease-out; }
.lever.is-pulled .lever__lights i:nth-child(2) { animation-delay: 70ms; } .lever.is-pulled .lever__lights i:nth-child(3) { animation-delay: 140ms; }
@keyframes dome { 0%, 100% { filter: saturate(0.55) brightness(0.8); box-shadow: none; } 25% { filter: none; box-shadow: 0 0 10px 3px var(--c); } }
.lever:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 1px 0 #16284A, 0 6px 10px -6px rgba(8, 25, 60, 0.55); }
.lever:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .lever:hover { transform: translateY(-2px); }
  .lever:hover .lever__arm { transform: rotate(-30deg); }
  .lever:active { transform: translateY(4px); }
}
.tim-count { position: absolute; z-index: 8; right: 0; bottom: calc(6% + 64px); margin: 0; padding: var(--s2) var(--s3); border-radius: 12px; background: var(--blue-night); color: var(--cream); font-weight: 800; font-size: var(--t-sm); line-height: 1.3; text-align: right; max-width: 24ch; }
.tim-count:empty { display: none; }

/* Tim heads */
.tims { position: absolute; inset: 0; pointer-events: none; }
.tims--back { z-index: 4; }
.tims--front { z-index: 5; }
.tim { position: absolute; left: 0; top: 0; width: var(--size, 90px); aspect-ratio: 320 / 331; opacity: 0; will-change: transform, opacity; }
.tim img { width: 100%; height: 100%; filter: drop-shadow(0 8px 10px rgba(8, 25, 60, 0.35)); animation: wobble var(--wob, 2.6s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes wobble { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

/* zap flash: sits in front of the Tims so each new one arrives in a flash */
.zaps { position: absolute; inset: 0; z-index: 6; pointer-events: none; will-change: transform; }
.zap { position: absolute; left: 0; top: 0; width: 180px; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 246, 170, 0.95) 0 22%, rgba(255, 199, 54, 0.55) 40%, rgba(255, 199, 54, 0) 70%); }
.zap.is-on { animation: zap 420ms var(--ease-out); }
@keyframes zap { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }

/* comic caption: the second beat */
.caption {
  position: absolute; z-index: 7; left: 50%; top: 50%;
  margin: 0; padding: var(--s4) var(--s6);
  background: var(--sun); color: var(--ink); border-radius: 6px;
  font: 800 var(--t-2xl)/1.05 var(--font-display); white-space: nowrap;
  box-shadow: 0 6px 0 var(--sun-deep), 0 20px 30px rgba(8, 25, 60, 0.4);
  opacity: 0; transform: translate(-50%, -50%) rotate(-3deg) scale(0.9);
  will-change: transform, opacity; pointer-events: none;
}

@media (max-width: 860px) {
  .hero__track { height: 190vh; }
  .hero__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding: 116px var(--gutter) var(--s5); }
  .hero__stage { background: radial-gradient(700px 600px at 60% 72vh, #3B86D0 0%, #2367B2 45%, #164A8A 100%);
    background: radial-gradient(700px 600px at 60% 72svh, #3B86D0 0%, #2367B2 45%, #164A8A 100%); }
  .rays { width: 120vh; left: calc(60% - 60vh); top: calc(72vh - 60vh); top: calc(72svh - 60vh); }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero__lede { font-size: 1.0625rem; margin-top: var(--s4); }
  .hero__ctas { margin-top: var(--s5); }
  .hero__ctas .btn { min-height: 48px; }
  .hero__machine { width: 78%; right: -6%; bottom: 14%; }
  .hero__book { width: 40%; left: 2%; bottom: 3%; }
  .hero__sticker { width: 86px; height: 86px; left: -8px; top: -66px; }
  .lever { bottom: 3%; min-height: 50px; font-size: 0.98rem; padding: 4px 16px 4px 8px; }
  .lever__ctl { width: 50px; height: 34px; }
  .tim-count { bottom: calc(3% + 58px); }
  .caption { font-size: 1.7rem; white-space: normal; width: 82%; text-align: center; padding: var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__track { height: auto; }
  .hero__stage { position: relative; min-height: 100svh; height: auto; }
  .tim img, .rays::before { animation: none; }
  .caption { display: none; }
  .btn, .lever, .lever__arm, .site-header, .site-header__logo { transition: none; }
  .lever.is-pulled .lever__lights i { animation: none; filter: none; }
}

/* Tim counter: shrink-wraps its words; count line, then the joke on its own line */
.tim-count { width: max-content; max-width: none; text-align: left; padding: 8px 14px 9px; border-radius: 14px; line-height: 1.15; }
.tim-count[data-pos="beside"] { text-align: right; }
.tim-count__n { display: block; white-space: nowrap; font: 800 1.05rem/1.1 var(--font-display); }
.tim-count__joke { display: block; white-space: nowrap; margin-top: 2px; font-size: 0.86rem; font-weight: 700; color: #C9D8EE; }
.lever { white-space: nowrap; }
@media (max-width: 860px) { .tim-count__n { font-size: 0.98rem; } .tim-count__joke { font-size: 0.8rem; } }

/* Phones on their side: short, wide screen. Two columns like desktop, scaled to the height. */
@media (orientation: landscape) and (max-height: 520px) {
  .hero__track { height: 210vh; }
  .hero__stage { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: none; align-items: center; padding: 70px var(--gutter) 10px; }
  .hero__copy { max-width: none; }
  .hero__title { font-size: clamp(1.5rem, 1rem + 4.4vh, 2.3rem); }
  .hero__lede { font-size: 0.92rem; line-height: 1.4; margin-top: 8px; max-width: 34ch; }
  .hero__ctas { margin-top: 12px; gap: 8px; }
  .hero__ctas .btn { min-height: 40px; padding: 0 16px; font-size: 0.92rem; }
  .hero__art { height: 100%; }
  .hero__machine { width: min(88%, calc((100vh - 160px) * 1.3)); right: 0; bottom: 24%; }
  .hero__book { width: 27%; left: 0; bottom: 8%; }
  .hero__sticker { width: 62px; height: 62px; left: -8px; top: -34px; }
  .lever { min-height: 40px; font-size: 0.86rem; padding: 3px 14px 3px 6px; }
  .lever__ctl { width: 40px; height: 28px; }
  .site-header__logo { width: 62px; }
  .rays { width: 140vh; left: calc(74% - 70vh); top: calc(55vh - 70vh); top: calc(55svh - 70vh); }
  .hero__stage { background: radial-gradient(800px 600px at 72% 55svh, #3B86D0 0%, #2367B2 45%, #164A8A 100%); }
  .caption { font-size: 1.5rem; white-space: nowrap; width: auto; }
}

/* Book a little bigger so it balances the machine (Henry) */
.hero__book { width: 41%; left: 3%; }
@media (max-width: 860px) { .hero__book { width: 42%; left: 0; } .hero__sticker { left: 2px; } }
@media (orientation: landscape) and (max-height: 520px) { .hero__book { width: 29%; left: 3%; } .hero__sticker { left: -8px; } }

/* The scene reaches the bottom of the tallest screen (phone toolbars hidden), so its
   bottom edge can never slice a Tim in view. Extra bottom padding equal to the
   toolbar height keeps the machine, book and lever exactly where they were. */
.hero__stage { height: 100lvh; padding-bottom: calc(var(--s7) + 100lvh - 100svh); }
@media (max-width: 860px) { .hero__stage { padding-bottom: calc(var(--s5) + 100lvh - 100svh); } }
@media (orientation: landscape) and (max-height: 520px) { .hero__stage { padding-bottom: calc(10px + 100lvh - 100svh); } }
@media (prefers-reduced-motion: reduce) { .hero__stage { height: auto; min-height: 100svh; padding-bottom: var(--s5); } }