/* ==========================================================================
   VEYROV4R — 50 Business Models Hiding in Plain Sight
   One screen, one product. No framework, no build step.

   The page is a single composition pinned to the viewport. Type sizes are
   derived from real glyph metrics so no hard-broken display line can ever
   exceed its container, and every dimension that could push the page past one
   screen is capped in vh so the composition holds from 320x568 up.
   ========================================================================== */

/* ---------- 1. Fonts ---------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-var.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}

/* ---------- 2. Tokens --------------------------------------------------- */

:root {
  --ink:        #0c0c0c;
  /* Muted ink levels. The faintest step is 0.58 alpha, which composites to
     4.68:1 against the paper background - the WCAG AA floor for the 10-11px
     mono labels it is used on. Do not lighten these without rechecking. */
  --ink-78:     rgba(12, 12, 12, 0.78);
  --ink-64:     rgba(12, 12, 12, 0.64);
  --ink-58:     rgba(12, 12, 12, 0.58);

  --paper:      #f6f4ef;

  --rule:       rgba(12, 12, 12, 0.14);
  --rule-hard:  rgba(12, 12, 12, 0.34);

  --accent:     #a6301f;
  --accent-ink: #8a2718;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gutter:   clamp(1.25rem, 5.2vw, 4.5rem);
  --maxw:     78rem;
  --maxw-hero: 84rem;
  --measure:  34rem;

  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ---------- 3. Reset ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.99rem + 0.22vw, 1.15rem);
  line-height: 1.62;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* One screen, pinned. The frame has a *definite* height, which is what lets
   the stage below resolve its 1fr row and lets the cover claim exactly the
   space that is left over. If the fixed type ever outgrows a very short
   viewport the frame simply spills and the document scrolls normally. */
.frame {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- 4. Layout primitives ---------------------------------------- */

.shell {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide { max-width: calc(var(--maxw-hero) + var(--gutter) * 2); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.15rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip:focus { left: var(--gutter); top: 0.75rem; }

/* ---------- 5. Type components ----------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(0.625rem, 0.6rem + 0.14vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-58);
  line-height: 1.5;
}

.prose { max-width: var(--measure); color: var(--ink-78); }
.prose > p + p { margin-top: 1.05em; }
.prose em { font-style: italic; }

/* ---------- 6. Header --------------------------------------------------- */

.site-head { padding-top: 0.95rem; }

.head-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-block;
  padding-block: 0.35rem;
  font-family: var(--display);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

.edition {
  font-family: var(--mono);
  font-size: clamp(0.5625rem, 0.53rem + 0.14vw, 0.6875rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-58);
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- 7. Stage ------------------------------------------------------
   The whole page is one composition pinned to the viewport. The grid is
   headline / band, where the band takes whatever height is left over. The
   cover is the element that absorbs the slack, so it grows on tall screens
   and yields on short ones instead of anything ever overflowing.
   ----------------------------------------------------------------------- */

.stage {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  padding-block: clamp(1.25rem, 3vw, 2.5rem);
}

.stage__inner {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
}

/* Below 64rem the poster stacks: headline, cover, purchase. Above it the
   headline and the purchase block share a left column and the cover takes the
   full height of the right column, which is the only arrangement that lets the
   cover be the largest object on the screen. */
.poster {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(0.85rem, 2.4vw, 1.5rem);
  padding-top: clamp(0.75rem, 1.6vw, 1.35rem);
  border-top: 1px solid var(--rule-hard);
}

.hero-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: min(11.8vw, 7.2vh, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-left: -0.02em;
}

.cover { margin: 0; min-height: 0; height: 100%; display: flex; justify-content: center; }

.cover img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow:
    0 1px 2px rgba(12, 12, 12, 0.10),
    0 22px 46px -20px rgba(12, 12, 12, 0.38);
}

.buy {
  grid-row: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.05rem;
}

.price {
  font-family: var(--display);
  font-size: min(1.7rem + 3.4vw, 4.4rem, 12vh);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.buy-note {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-58);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05rem 1.7rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease);
}

.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn__arrow {
  font-family: var(--display);
  letter-spacing: 0;
  transition: transform 0.22s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

@media (max-width: 47.99rem) {
  .buy { width: 100%; }
  .btn { width: 100%; }
}

/* Very short viewports (landscape phones, small legacy handsets). Everything
   here is about handing more of the fixed height back to the cover. */
@media (max-height: 40rem) {
  .stage { padding-block: 0.7rem; }
  .poster { row-gap: 0.6rem; padding-top: 0.6rem; }
  .hero-title { font-size: min(11.8vw, 6.4vh, 6.5rem); }
  .buy { gap: 0.7rem; }
  .btn { padding-block: 0.85rem; }
  .site-foot { padding-block: 0.6rem; }
  .foot-grid { gap: 0.15rem 1rem; }
}

/* Desktop poster. The cover column is sized so the cover is always bound by
   the stage height, never by its column width, which keeps the headline's
   measure stable across window sizes. */
@media (min-width: 64rem) {
  .hero-title {
    grid-column: 1;
    grid-row: 1;
    font-size: min(4.6vw, 9.5vh, 4.4rem);
  }
  .hero-title .br-sm { display: none; }

  .poster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 4.5vw, 4.5rem);
  }

  .cover {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
  }

  .buy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding-bottom: 0.4rem;
  }
}

/* ---------- 8. Footer ----------------------------------------------------- */

.site-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule-hard);
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
}

.foot-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.foot-brand {
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

.foot-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; }

.foot-nav a {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-64);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.foot-nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }


/* ---------- 9. Plain pages (privacy, terms) --------------------------- */

.page { padding-block: clamp(2.25rem, 5.5vw, 4rem) clamp(3.5rem, 7vw, 6rem); }

.page__title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 1.2rem + 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-top: 1.1rem;
}

.page__meta {
  margin-top: 1rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule-hard);
}

.page__body { padding-top: 2.25rem; }
.page__body h2 {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-top: 2.25rem;
  margin-bottom: 0.7rem;
}
.page__body h2:first-child { margin-top: 0; }

.page__body ul { list-style: none; margin-top: 0.5rem; }
.page__body li { position: relative; padding-left: 1.1rem; margin-top: 0.4rem; }
.page__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--accent);
}

.page__back {
  display: inline-block;
  margin-top: 3rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-64);
  border-bottom: 1px solid var(--rule-hard);
  padding-block: 0.35rem;
}
.page__back:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* Inline links inside legal/prose copy stay inline (they sit in a sentence, which
   WCAG 2.5.8 exempts) but still get a comfortable vertical hit area. */
.prose a,
.page__body a {
  padding-block: 0.25rem;
}