/* no.news landing page — a faithful port of the Framer build.
 *
 * Every dimension below is taken from the Framer site's generated CSS, not eyeballed.
 * Breakpoints (Framer's): desktop ≥1352px · tablet 810–1351px · phone ≤809px.
 */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "IvyPresto Headline Thin";
  src: url("/fonts/IvyPrestoHeadline-Thin.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "IvyPresto Headline Light";
  src: url("/fonts/IvyPrestoHeadline-Light.woff2") format("woff2");
  font-display: swap;
}
/* Size-matched system fallback shown until the woff2 arrives (Framer's "Placeholder" trick) —
 * avoids layout shift when the real font swaps in. */
@font-face {
  font-family: "IvyPresto Headline Thin Placeholder";
  src: local("Arial");
  ascent-override: 138.07%;
  descent-override: 35.01%;
  line-gap-override: 0%;
  size-adjust: 85.68%;
}
@font-face {
  font-family: "IvyPresto Headline Light Placeholder";
  src: local("Arial");
  ascent-override: 132.86%;
  descent-override: 33.69%;
  line-gap-override: 0%;
  size-adjust: 89.04%;
}

/* ---------- Reset (matches Framer's) ---------- */

html, body { margin: 0; padding: 0; box-sizing: border-box; }
:root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; -webkit-font-smoothing: inherit; }
h1, p { margin: 0; padding: 0; }
body { background: #fff; font-size: 12px; font-family: sans-serif; }

/* ---------- Layout ---------- */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #fff;
  overflow: hidden;
}

/* "Main Stack": hero → copy → footer */
.stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 140px;
  width: 100%;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
}

.hero__picture {
  position: absolute;
  inset: 0;
  display: block;
}
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Film-grain overlay, blended over the illustration */
.hero__grain {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  mix-blend-mode: overlay;
  opacity: 0.25;
}
.hero__grain img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.hero__headline {
  position: absolute;
  left: 50%;
  top: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: min-content;
  transform: translate(-50%, -50%);
  animation: headline-in 0.6s cubic-bezier(0.44, 0, 0.56, 1) both;
}

/* Framer "appear" effect: fade in while rising 60px */
@keyframes headline-in {
  from { opacity: 0.001; transform: translate(-50%, -50%) translateY(60px); }
  to   { opacity: 1;     transform: translate(-50%, -50%) translateY(0); }
}
/* Deliberate deviation from the Framer build: respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  .hero__headline { animation: none; }
}

.headline {
  font-family: "IvyPresto Headline Thin", "IvyPresto Headline Thin Placeholder", sans-serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 86px;
  color: #fff;
  text-align: center;
  white-space: pre;
}
.headline__two-lines { display: none; }

.hero__logo {
  position: absolute;
  top: 40px;
  left: calc(50% - 110px / 2);
  width: 110px;
  height: 27px;
  overflow: hidden;
  color: #fff;
}
.hero__logo .wordmark {
  position: absolute;
  left: calc(50% - 109px / 2);
  top: calc(51.85185185185187% - 27px / 2);
  width: 109px;
  height: 27px;
}

.wordmark { display: block; }

/* ---------- Copy + QR ---------- */

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 80px;
  width: 80%;
  overflow: hidden;
}

/* Three copies of the manifesto, one per breakpoint — the em-dash rules and blank lines
 * differ between them in the original, so they can't share one markup. */
.copy {
  position: relative;
  width: 1082px;
}
.copy--tablet,
.copy--phone { display: none; }

/* pre-wrap on the <p> (not the container, as Framer had it) so the source's line breaks between
 * paragraphs don't render as blank lines; the leading/trailing spaces inside each line are
 * preserved exactly as in the original. */
.copy p {
  font-family: "IvyPresto Headline Thin", "IvyPresto Headline Thin Placeholder", sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2em;
  color: #000;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.copy p.fs26 { font-size: 26px; }
/* Empty spacer lines were set in a different (unloaded) family/weight in Framer;
 * only their line-height matters, but kept identical for parity. */
.copy p.blank {
  font-family: "IvyPresto Headline", "IvyPresto Headline Placeholder", sans-serif;
  font-weight: 300;
}
/* The "No breaking news ————— because…" rules are literal em-dashes set in Times New Roman,
 * which joins them into a continuous line. */
.copy .rule {
  font-family: "Times New Roman", sans-serif;
}

.qr {
  display: block;
  width: 100px;
  height: 100px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- Footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  padding: 40px;
}

.footer__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 24px;
  overflow: hidden;
}
.footer__item p {
  font-family: "IvyPresto Headline Thin", "IvyPresto Headline Thin Placeholder", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2em;
  color: #000;
  text-align: center;
  white-space: pre;
}
/* Framer's hover variant: the label switches from the Thin cut to the Light cut (reads as bolder).
 * Not a link, so no cursor change — same as the original. */
.footer__item:hover p {
  font-family: "IvyPresto Headline Light", "IvyPresto Headline Light Placeholder", sans-serif;
}

.footer__logo {
  width: 108px;
  height: 26px;
  color: #000;
}
.footer__logo .wordmark {
  width: 100%;
  height: 100%;
}

/* ---------- Tablet (810–1351) ---------- */

@media (min-width: 810px) and (max-width: 1351px) {
  .stack { gap: 120px; }
  .hero__grain { top: -83px; }
  .headline { font-size: 65px; line-height: 86px; }
  .copy { width: 100%; }
  .copy--desktop { display: none; }
  .copy--tablet { display: block; }
  .footer { width: 90%; }
}

/* ---------- Phone (≤809) ---------- */

@media (max-width: 809px) {
  .stack { gap: 100px; }
  .hero__grain { top: -104px; }
  .hero__headline { top: 24%; }
  .headline { font-size: 60px; line-height: 64px; }
  .headline__one-line { display: none; }
  .headline__two-lines { display: block; }
  .headline__two-lines span { display: block; }
  .hero__logo .wordmark {
    left: calc(50% - 89px / 2);
    top: calc(59.25925925925928% - 22px / 2);
    width: 89px;
    height: 22px;
  }
  .copy { width: 100%; }
  .copy--desktop { display: none; }
  .copy--phone { display: block; }
  .footer {
    flex-direction: column;
    justify-content: flex-start;
    gap: 32px;
    width: 90%;
  }
  .footer__logo { order: 0; }
  .footer__item--app { order: 1; }
  .footer__item--contact { order: 2; }
  .footer__item--privacy { order: 3; }
  .footer__item--terms { order: 4; }
}