/* Desktop is a fixed artboard reproducing society_black_mango_HOMEPAGE_L01.pdf
   (1083.42 x 729.26 pt). --pt is one PDF point on screen, and every number below is the
   PDF value in points, so the page scales like the document instead of reflowing. */
:root {
  --ink: #231f20;
  --paper: #eee8df;
  --pt: calc(min(100vw, 148.564vh) / 1083.42);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
p, h1 { margin: 0; font-weight: 400; }

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper) url('paper-tile.webp') repeat;
  /* the tile is a 500 pt patch of the PDF's own paper scan */
  background-size: calc(var(--pt) * 500);
  font-family: 'Sen', -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  position: relative;
  width: calc(var(--pt) * 1083.42);
  height: calc(var(--pt) * 729.26);
}

.brand__mark,
.brand__word,
.brand__tagline,
.bird,
.hero__eyebrow,
.hero__headline {
  position: absolute;
  display: block;
  white-space: nowrap;
}

/* text sits on its PDF baseline: top = baseline - distance from line-box top to baseline */
.brand__word,
.brand__tagline,
.hero__eyebrow,
.hero__headline {
  top: calc(var(--pt) * var(--baseline) - var(--ascent) * 1em);
}

/* logo-icon.svg is the designer's icon (design/society_black_mango_logo_icon.fig) with a
   tight viewBox; it takes the PDF logo's box: left edge 192.27 pt, width 28.80 pt, and the
   PDF's vertical centre (125.055 pt) for its 316.46 x 317.82 proportions */
.brand__mark {
  left: calc(var(--pt) * 192.27);
  top: calc(var(--pt) * 110.593);
  width: calc(var(--pt) * 28.80);
  height: auto;
}

.brand__word {
  --baseline: 121.76;
  --ascent: 0.8441;
  left: calc(var(--pt) * 237.53);
  font-weight: 700;
  font-size: calc(var(--pt) * 14.756);
  line-height: 1;
}

/* PDF sets Sabon Italic 10.73 pt (licensed font). EB Garamond Italic is narrower with a
   smaller x-height; at 12.54 pt it matches Sabon's letter size and the exact line length. */
.brand__tagline {
  --baseline: 139.41;
  --ascent: 0.807;
  left: calc(var(--pt) * 238.16);
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-size: calc(var(--pt) * 12.54);
  line-height: 1;
}

.bird {
  left: calc(var(--pt) * 191.55);
  top: calc(var(--pt) * 200.05);
  width: calc(var(--pt) * 311.87);
  height: auto;
}

.hero__eyebrow {
  --baseline: 406.04;
  --ascent: 0.8056;
  left: calc(var(--pt) * 462.66);
  font-size: calc(var(--pt) * 12.103);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.0045em;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

/* Not part of the PDF. Ruler-aligned to the artboard:
   - left: the ink of its first letters (F, E) starts exactly where the headline's "B" ink
     starts: 460.46 + 0.10742 * 26.562 = 463.313 pt (Sen B/E/F all have a 0.10742em left
     side bearing), minus that same bearing at the block's own font size;
   - vertical: the baseline of the last line sits on the bird's lowest point (651.3 pt).
     With line-height 1.6 that baseline is 1.6 + 0.3 + 0.8379em below the block top
     (0.8379em = Sen's baseline inside a 1em line box, from its typo metrics).
   Never smaller than 11px, so it stays readable on small artboards. */
.foot {
  position: absolute;
  left: calc(var(--pt) * 463.313 - 0.10742em);
  top: calc(var(--pt) * 651.3 - 2.7379em);
  font-size: max(11px, calc(var(--pt) * 9.5));
  line-height: 1.6;
  white-space: nowrap;
}

.foot__line {
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.foot__line--strong { font-weight: 700; }
.foot__line:not(.foot__line--strong) { color: #55504b; }
.foot__email { text-transform: none; }

.hero__headline {
  --baseline: 470.05;
  --ascent: 0.9369;
  left: calc(var(--pt) * 460.46);
  font-size: calc(var(--pt) * 26.562);
  line-height: 1.2;
}

/* ---------- narrow or short screens ----------
   The artboard would shrink its text below legibility (tagline < 9px), so below
   ~860px of artboard width the same content is laid out as a vertical flow. */
@media (max-width: 859px), (max-height: 578px) {
  body {
    display: block;
    overflow: auto;
    background-size: 520px;
  }

  .stage {
    width: auto;
    height: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 24px 56px;
  }

  .brand__mark,
  .brand__word,
  .brand__tagline,
  .bird,
  .hero__eyebrow,
  .hero__headline {
    position: static;
    white-space: normal;
  }

  .brand { display: flex; align-items: center; gap: 12px; }
  .brand__mark { width: 38px; flex: none; }
  .brand__word { font-size: 17px; line-height: 1.2; }
  .brand__tagline { font-size: 12.5px; line-height: 1.35; margin-top: 2px; }

  .bird { width: min(62vw, 270px); margin: 48px 0 40px; }

  .hero__eyebrow { font-size: 12px; margin-bottom: 14px; }
  .hero__headline { font-size: clamp(25px, 7.2vw, 34px); line-height: 1.22; }
  /* the PDF's line break only fits the artboard width */
  .hero__headline br { display: none; }

  .foot { position: static; margin-top: 48px; font-size: 12px; white-space: normal; }
}