/* Manifesto Educ.Attive — landing page
   Breakpoint: 760px (mobile below).
   Desktop sizes are written in design pixels (--u) so the layout scales up on wide screens. */

/* Self-hosted fonts (SIL OFL, see fonts/OFL-*.txt) — no requests to Google. */
@font-face {
  font-family: "Patrick Hand SC";
  src: url("fonts/patrick-hand-sc-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Patrick Hand SC";
  src: url("fonts/patrick-hand-sc-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/oswald-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Client font. Drop the file in fonts/lazy_dog.ttf; until then Patrick Hand SC is used. */
@font-face {
  font-family: "EA Lazy Dog";
  src: url("fonts/lazy_dog.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --yellow: #EED734;
  --cream: #FFF6F0;
  --crimson: #CB264D;
  --ink: #111111;
  --black: #000000;
  --white: #FFFFFF;
  --line: 2px solid var(--ink);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --u: 1px;               /* design pixel: 1px up to a 1440px-wide viewport… */
  --hdr: calc(80 * var(--u)); /* marquee 28 + nav 52 */
}

/* …then grows with the viewport on wide / high-resolution screens (up to 2x). */
@media (min-width: 1441px) {
  :root { --u: min(calc(100vw / 1440), 2px); }
}

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

html {
  scroll-padding-top: calc(var(--hdr) - 2px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "EA Lazy Dog", "Patrick Hand SC", cursive;
  font-weight: 400;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; font-weight: 400; }
img { display: block; max-width: 100%; }
a { text-decoration: none; }

/* Thickens the fallback marker font with the browser's own synthetic bold.
   (A -webkit-text-stroke looked smeared on some browsers, e.g. Safari/iOS, where the
   stroke is painted over the fill and shows the font's overlapping contours.)
   Remove this rule once Lazy Dog is in, so the real font is not faux-bolded. */
.st { font-weight: 700; font-synthesis: weight; }

.c-crimson { color: var(--crimson); }
.c-yellow { color: var(--yellow); }

.glyph, .bounce { font-family: system-ui, sans-serif; }

:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; }

/* ---------- Marquee ---------- */
.marquee {
  height: calc(28 * var(--u));
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 600;
  font-size: calc(14 * var(--u));
  letter-spacing: .01em;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
}
.marquee__track--rev { animation-direction: reverse; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
  padding-right: calc(18 * var(--u));
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  background: var(--white);
  display: inline-block;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Sticky header + chapter nav ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: calc(28 * var(--u));
}
.topbar > .marquee { position: relative; z-index: 2; }

.chapnav {
  position: absolute;
  top: calc(28 * var(--u));
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--cream);
  border-bottom: var(--line);
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s var(--ease-out), opacity .3s ease, visibility 0s linear .45s;
}
.chapnav.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform .45s var(--ease-out), opacity .3s ease, visibility 0s;
}

.progress {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: calc(3 * var(--u));
  width: 0;
  background: var(--crimson);
}

/* Desktop nav */
.chapnav--desk {
  height: calc(52 * var(--u));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.chapnav__item {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(22 * var(--u));
  border-right: var(--line);
  background: var(--cream);
  color: var(--ink);
  font-size: calc(15 * var(--u));
  line-height: 1.1;
  transition: background .3s ease, color .3s ease;
}
.chapnav__num {
  flex: none;
  font-size: calc(12 * var(--u));
  letter-spacing: .18em;
  color: var(--crimson);
  transition: color .3s ease;
}
.chapnav__item.is-active { background: var(--ink); color: var(--yellow); }
.chapnav__item.is-active .chapnav__num { color: var(--yellow); }
.chapnav__item:focus-visible { outline-offset: -5px; }

/* Mobile nav */
.chapnav--mob { display: none; height: calc(60 * var(--u)); }
.chips {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: 0 calc(12 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: 999px;
  border: var(--line);
  background: var(--cream);
  color: var(--ink);
  font-size: calc(15 * var(--u));
  transition: background .3s ease, color .3s ease;
}
.chip__num { font-size: calc(11 * var(--u)); letter-spacing: .14em; color: var(--crimson); transition: color .3s ease; }
.chip.is-active { background: var(--ink); color: var(--yellow); }
.chip.is-active .chip__num { color: var(--yellow); }

/* ---------- Bouncing arrow ---------- */
.bounce {
  display: inline-block;
  font-size: calc(22 * var(--u));
  line-height: 1;
  animation: bounce 1.4s ease-in-out infinite;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(7 * var(--u))); } }

/* ---------- Desktop hero: Cartelli ---------- */
.hero-desk {
  height: calc(100vh - calc(28 * var(--u)));
  background: var(--cream);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: calc(40 * var(--u)) calc(28 * var(--u)) 0;
}
.hero-desk__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(40 * var(--u));
}
.hero-desk__title {
  font-size: min(8.5vw, 14vh);
  line-height: .88;
  display: flex;
  flex-direction: column;
}
.hero-desk__intro {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  max-width: calc(360 * var(--u));
  padding-bottom: calc(8 * var(--u));
}
.hero-desk__intro p { font-size: calc(20 * var(--u)); line-height: 1.4; }
.cue {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  color: var(--crimson);
  font-size: calc(16 * var(--u));
  letter-spacing: .12em;
}

.placards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(40 * var(--u));
  align-items: end;
  padding: 0 calc(24 * var(--u));
}
.placard {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: var(--tf);
  transform-origin: 50% 100%;
  transition: transform .4s var(--ease-out);
}
.placard:hover, .placard:focus-visible { transform: rotate(0deg) translateY(-16px); }
.placard:focus-visible { outline: none; }
.placard:focus-visible .placard__board { outline: 3px solid var(--crimson); outline-offset: 4px; }
.placard__board {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 1 / 0.86;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
  text-align: left;
}
.placard__board--ring { box-shadow: inset 0 0 0 calc(3 * var(--u)) var(--ink); }
/* Reference size at a ~304px board (1440px viewport); scales down on narrower boards. */
.placard__text {
  font-size: clamp(calc(15 * var(--u)), calc(var(--fs) * 100cqi / 304), calc(var(--fs) * var(--u)));
  line-height: 1.06;
}
.placard__label {
  display: flex;
  gap: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  letter-spacing: .12em;
  color: var(--lab);
}
.placard__stick {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(340 * var(--u));
  background: var(--ink);
}

/* ---------- Mobile hero: video ---------- */
.hero-mob {
  display: none;
  height: calc(100vh - 92px);
  height: calc(100svh - 92px);
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(24 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
}
.hero-mob__video {
  position: absolute;
  top: 0;
  left: 50%;
  height: 165%;
  width: auto;
  min-width: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
}
.hero-mob__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 0;
  pointer-events: none;
}
.hero-mob__intro {
  position: relative;
  z-index: 1;
  font-size: calc(17 * var(--u));
  line-height: 1.35;
  max-width: calc(250 * var(--u));
}
.hero-mob__title {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: .86;
  font-size: 21vw; /* refined by JS so "MANIFESTO" spans the width minus 40px */
}
.hero-mob__fit { display: inline-block; align-self: flex-start; white-space: nowrap; }
.hero-mob__cue {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: .16em;
  color: var(--yellow);
}
.hero-mob__logo {
  position: absolute;
  left: calc(16 * var(--u));
  bottom: calc(14 * var(--u));
  width: calc(56 * var(--u));
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* ---------- Chapters ---------- */
.chapter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  border-top: var(--line);
}
.panel {
  position: sticky;
  top: var(--hdr);
  height: calc(100vh - var(--hdr));
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
  overflow: hidden;
}
.panel__num { font-size: calc(15 * var(--u)); letter-spacing: .22em; color: var(--num); }
.panel__title {
  font-size: calc(92 * var(--u));
  line-height: .98;
  text-wrap: balance;
}
.panel__title--long { font-size: calc(66 * var(--u)); }
.panel__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  min-height: calc(40 * var(--u));
}
.ticks { display: flex; gap: calc(8 * var(--u)); flex-wrap: wrap; }
.tick {
  font-size: calc(14 * var(--u));
  letter-spacing: .1em;
  padding: calc(7 * var(--u)) calc(11 * var(--u)) calc(6 * var(--u));
  border: 2px solid currentColor;
  background: transparent;
  color: var(--fg);
  transition: background .3s ease, color .3s ease;
}
.tick.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.panel__img {
  flex: none;
  width: calc(150 * var(--u));
  height: auto;
  margin-left: auto;
  transform: rotate(var(--rot));
}

.mods { display: flex; flex-direction: column; }
.mod {
  background: var(--cream);
  padding: calc(64 * var(--u)) calc(64 * var(--u)) calc(72 * var(--u));
  border-bottom: var(--line);
}
.mod:last-child { border-bottom: none; }
.mod--yellow { background: var(--yellow); }
.mod__inner {
  max-width: calc(680 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
}
.mod__num { font-size: calc(14 * var(--u)); letter-spacing: .22em; color: var(--crimson); }
.mod__sub { font-size: calc(46 * var(--u)); line-height: 1; text-wrap: balance; }
.mod__pull {
  font-size: calc(40 * var(--u));
  line-height: 1.08;
  color: var(--crimson);
  text-wrap: balance;
}
.mod__body {
  font-size: calc(20 * var(--u));
  line-height: 1.6;
  letter-spacing: .04em;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-wrap: pretty;
}

/* ---------- Quote bands ---------- */
.quote {
  background: var(--bg);
  color: var(--fg);
  padding: calc(96 * var(--u)) calc(28 * var(--u));
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(28 * var(--u));
  border-top: var(--line);
}
.quote__text {
  max-width: calc(1100 * var(--u));
  font-size: min(4.5vw, calc(64 * var(--u)));
  line-height: 1.1;
  text-wrap: balance;
}
.quote__cite { font-size: calc(16 * var(--u)); letter-spacing: .1em; color: var(--cite); }
/* word stressed by the author (e.g. "STESSA" in Lewis) */
.quote__em {
  font-style: normal;
  background: var(--yellow);
  color: var(--ink);
  padding: 0 .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* quote set inside a chapter column, between two modules */
.quote--inline {
  min-height: 0;
  border-top: none;
  border-bottom: var(--line);
  padding: calc(64 * var(--u)) calc(64 * var(--u)) calc(72 * var(--u));
  gap: calc(22 * var(--u));
}
.quote--inline .quote__text { max-width: calc(680 * var(--u)); font-size: calc(40 * var(--u)); }

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .mod__inner,
.js .quote__text {
  opacity: 0;
  transform: translateY(calc(40 * var(--u)));
  transition: opacity .8s ease, transform .8s var(--ease-out);
}
.js .quote__text { transition-duration: .9s; }
.js .is-in .mod__inner,
.js .is-in .quote__text { opacity: 1; transform: none; }

/* ---------- Instagram CTA ---------- */
.cta {
  background: var(--crimson);
  color: var(--cream);
  border-top: var(--line);
  padding: calc(96 * var(--u)) calc(28 * var(--u));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(28 * var(--u));
}
.cta__head { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.cta__handle { font-size: calc(15 * var(--u)); letter-spacing: .22em; color: var(--yellow); }
.cta__title {
  font-size: min(8vw, calc(120 * var(--u)));
  line-height: .92;
  text-wrap: balance;
}
.cta__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(56 * var(--u));
  padding: 0 calc(28 * var(--u));
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  border: var(--line);
  font-size: calc(19 * var(--u));
  letter-spacing: .06em;
  transition: transform .3s var(--ease-out), background .3s ease;
}
.cta__btn .glyph { font-size: calc(20 * var(--u)); }
.cta__btn:hover, .cta__btn:focus-visible {
  background: var(--cream);
  color: var(--ink);
  transform: translateY(-4px);
}
.cta__btn:focus-visible { outline-color: var(--ink); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--cream); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: calc(24 * var(--u));
  padding: calc(64 * var(--u)) calc(28 * var(--u)) calc(48 * var(--u));
}
.footer__brand { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.footer__name { font-size: calc(88 * var(--u)); line-height: 1; color: var(--yellow); }
.footer__sub { font-size: calc(15 * var(--u)); line-height: 1.5; max-width: calc(420 * var(--u)); }
.footer__top {
  appearance: none;
  margin: 0;
  font: inherit;
  text-transform: inherit;
  font-size: calc(15 * var(--u));
  letter-spacing: .08em;
  min-height: calc(44 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-radius: 999px;
  border: 2px solid var(--cream);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
}
.footer__top:hover, .footer__top:focus-visible { background: var(--cream); color: var(--ink); }
.footer__top:focus-visible { outline-color: var(--yellow); }

/* ---------- Tablet desktop (760–1099px) ---------- */
@media (max-width: 1099.98px) {
  .chapter { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .placards { gap: calc(24 * var(--u)); padding: 0 calc(8 * var(--u)); }
  .placard__board { padding: calc(14 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); }
  .placard__label { font-size: calc(12 * var(--u)); gap: calc(6 * var(--u)); flex-wrap: wrap; }
}

/* ---------- Mobile (< 760px) ---------- */
@media (max-width: 759.98px) {
  :root { --hdr: 88px; } /* marquee 28 + nav 60 */

  .chapnav--desk, .hero-desk { display: none; }
  .chapnav--mob { display: block; }
  .hero-mob { display: flex; }

  .chapter { grid-template-columns: minmax(0, 1fr); }
  .panel {
    position: relative;
    top: 0;
    height: auto;
    min-height: 50vh;
    padding: 22px 24px 28px;
  }
  .panel__title { font-size: 54px; }
  .panel__title--long { font-size: 40px; }
  .ticks { display: none; }
  .panel__img { width: 110px; }

  .mod { padding: 36px 24px 44px; }
  .mod__sub { font-size: 34px; }
  .mod__pull { font-size: 30px; }
  .mod__body { font-size: 18px; }

  .quote { padding: 56px 24px; min-height: 0; }
  .quote__text { font-size: 30px; }
  .quote--inline { padding: 48px 24px 52px; }
  .quote--inline .quote__text { font-size: 26px; }

  .cta { padding: 56px 24px 60px; }
  .cta__title { font-size: 52px; }

  .footer__inner { padding: 40px 20px 32px; }
  .footer__name { font-size: 44px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .bounce { animation: none; }
  .js .mod__inner, .js .quote__text { transform: none; }
  .placard, .placard:hover, .placard:focus-visible { transition: none; }
  .cta__btn:hover, .cta__btn:focus-visible { transform: none; }
}