/* Dear Nepal — coming soon. Generated tokens are injected by tools/build.py. */

@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/luckiest-guy-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/kalam-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/kalam-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/kalam-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

:root {
  --paper: #F3ECDD;
  --paper-hi: #FBF7EE;
  --forest: #1F443D;
  --coral: #F57F63;
  --leaf: #649A7D;
  --navy: #083985;
  --periwinkle: #7096D8;
  --sand: #EBC196;
  --peach: #EA9776;
  --sage: #96B69D;
  --wood: #8A563E;
  --font-display: 'Luckiest Guy', 'Arial Black', system-ui, sans-serif;
  --font-hand: 'Kalam', 'Comic Sans MS', 'Segoe Print', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--forest);
  background-color: var(--paper);
  /* Paper grain: a tiny SVG noise tile, no extra request. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font: 400 1.125rem/1.5 var(--font-hand);
  text-align: center;
}

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) 1.25rem 2rem;
}
.page--narrow { padding-top: 20vh; }

a { color: var(--navy); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--forest); text-decoration-color: var(--coral); }
a:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 3px; border-radius: 4px; }

/* ── Kicker ─────────────────────────────────────────────────────────── */
.kicker { margin-bottom: .5rem; }
.kicker__line {
  margin: 0;
  font: 400 clamp(1.05rem, 3.6vw, 1.5rem)/1.2 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: .2em;
}
.kicker__dash { display: block; width: min(22rem, 80%); height: .75rem; margin: .1rem auto 0; }
.kicker__dash path { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
.kicker__sub {
  margin: .35rem 0 0;
  font: 700 .95rem/1.2 var(--font-hand);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Hero / wordmark ────────────────────────────────────────────────── */
.hero { position: relative; }

.wordmark { margin: .25rem auto 0; width: min(100%, 34rem); line-height: 0; }
.wordmark svg { width: 100%; height: auto; overflow: visible; }
.wordmark text {
  font-family: var(--font-display);
  font-size: 150px;
  text-anchor: middle;
  stroke: var(--periwinkle);
  stroke-width: 14px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: pop .55s cubic-bezier(.3, 1.6, .5, 1) both;
}
.wordmark .c-forest { fill: var(--forest); }
.wordmark .c-coral  { fill: var(--coral); }
.wordmark .c-leaf   { fill: var(--leaf); }
.wordmark .c-navy   { fill: var(--navy); }

/* Per-letter tilt lives on a wrapping <g transform>, so it survives this
   animation (which owns `transform` on the <text>). Delays are generated. */
@keyframes pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
.wordmark .letters { filter: url(#rough); }

.wordmark .l1 { animation-delay: 0.08s; }
.wordmark .l2 { animation-delay: 0.16s; }
.wordmark .l3 { animation-delay: 0.24s; }
.wordmark .l4 { animation-delay: 0.32s; }
.wordmark .l5 { animation-delay: 0.40s; }
.wordmark .l6 { animation-delay: 0.48s; }
.wordmark .l7 { animation-delay: 0.56s; }
.wordmark .l8 { animation-delay: 0.64s; }
.wordmark .l9 { animation-delay: 0.72s; }

.question {
  margin: .75rem 0 .5rem;
  font: 400 clamp(2rem, 8vw, 3.5rem)/1.02 var(--font-display);
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-top: .15em; /* Luckiest Guy sits low; keeps caps optically centred */
}

.hand { margin: .35rem 0; font-size: clamp(1.05rem, 3.4vw, 1.3rem); }
.hand--lead { font-size: clamp(1.2rem, 4.2vw, 1.6rem); line-height: 1.3; }
q { quotes: "“" "”"; font-weight: 700; }

/* Sparks: the hand-drawn dash pairs around the title on the poster. */
.sparks { position: absolute; inset: 0; pointer-events: none; }
.spark { position: absolute; width: 2.4rem; height: 1.6rem; }
.spark::before, .spark::after {
  content: ""; position: absolute; height: 5px; border-radius: 5px; background: var(--c, var(--coral));
}
.spark::before { width: 1.6rem; top: 0;     left: 0; transform: rotate(var(--a1, -25deg)); }
.spark::after  { width: 1.1rem; top: 1rem;  left: .3rem; transform: rotate(var(--a2, -5deg)); }
.spark--tl { top: 0;    left: 2%;  --c: var(--leaf);  --a1: 20deg; --a2: 35deg; }
.spark--tr { top: 2%;   right: 2%; --c: var(--leaf);  --a1: -30deg; --a2: -45deg; }
.spark--ml { top: 28%;  left: 4%;  --c: var(--coral); --a1: 30deg; --a2: 10deg; }
.spark--mr { top: 26%;  right: 4%; --c: var(--coral); --a1: -30deg; --a2: -10deg; }
.spark { animation: wobble 4s ease-in-out infinite alternate; }
.spark--tr, .spark--ml { animation-delay: -2s; }
@keyframes wobble { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* ── Scene ──────────────────────────────────────────────────────────── */
.scene { margin: 1.5rem -1.25rem 1rem; }
.scene img {
  display: block; width: 100%; height: auto;
  /* Melt the crop's edges into the paper instead of a hard rectangle. */
  -webkit-mask-image: radial-gradient(ellipse 72% 85% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 85% at 50% 50%, #000 62%, transparent 100%);
}

/* ── Brief ──────────────────────────────────────────────────────────── */
.brief__title {
  margin: .5rem 0 .75rem;
  font: 400 clamp(1.7rem, 6.4vw, 2.75rem)/1.05 var(--font-display);
  text-transform: uppercase;
  padding-top: .15em;
}

.badge {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 1.75rem 0 1.25rem;
  padding: .7rem 1.4rem .55rem;
  background: var(--coral);
  color: var(--forest);
  border: 3px solid var(--forest);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--forest);
  font: 400 clamp(1rem, 3.4vw, 1.25rem)/1 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.badge a { color: inherit; text-decoration: none; }
.badge__dot {
  width: .65rem; height: .65rem; margin-top: -.15rem; border-radius: 50%;
  background: var(--paper-hi); border: 2px solid var(--forest);
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.contact a { font-weight: 700; word-break: break-word; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px dashed var(--sage); }
.footer__logo { margin: 0; font: 400 2rem/1 var(--font-display); letter-spacing: .08em; padding-top: .15em; }
.footer__logo span:nth-child(3) { color: var(--coral); }
.footer__org { margin: .2rem 0 0; font-size: 1rem; }
.footer__copy { margin: .6rem 0 0; font-size: .85rem; opacity: .75; }

/* ── Motion preferences ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}