/* Two fonts, both free (Google Fonts) and stored with the site (licences in fonts/):
   Boldonse for her name and the headings, Space Grotesk for all other text.
   Boldonse is drawn much larger than usual, so size-adjust shrinks it to Red Hat's letter height:
   every calc(N * var(--u)) size keeps meaning what it did. It has one weight
   (the weight range stops browsers from faking bold). */
@font-face {
  font-family: "Boldonse";
  src: url("fonts/boldonse.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 58%;
}
/* Space Grotesk: variable font, Light (300) to Bold (700). Same letter height as Red Hat, so no size-adjust. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
/* Red Hat Display: an earlier font (closest free match to Gopher). Only downloaded if a character is missing from the others. */
@font-face {
  font-family: "Red Hat Display";
  src: url("fonts/red-hat-display.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

/* Like Readymag, the whole page scales with the window width.
   Desktop is designed on a 1024px canvas, phones on a 320px canvas.
   1u = one Readymag pixel. */
:root {
  --u: calc(100vw / 1024);
  --bg: #f9fafd;
  --ink: #14213d;
  --badge: #fff7c9;
  --line: #c8ccd4;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Space Grotesk", "Red Hat Display", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.name, h2 { font-family: "Boldonse", "Red Hat Display", system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a {
  color: var(--ink);
  text-decoration-color: var(--line);
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.3em;
}

/* ---------- Header ---------- */
.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: calc(25 * var(--u)) calc(80 * var(--u)) 0;
  height: calc(84 * var(--u));
}
/* justify-self keeps the link (and its keyboard focus ring) the size of the word, not the whole header third */
.nav { font-size: calc(16 * var(--u)); line-height: 1; justify-self: start; }
.nav:last-child { justify-self: end; }
.name {
  margin: calc(2 * var(--u)) 0 0;
  font-size: calc(24 * var(--u));
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
  display: flex;
  align-items: flex-start;
}
/* the cat overlaps the end of the name, as on Readymag
   (left margin -20, was -14 with Red Hat: Boldonse leaves more space after the "o") */
.name img {
  width: calc(80 * var(--u));
  margin: calc(-12 * var(--u)) calc(-80 * var(--u)) 0 calc(-20 * var(--u));
}

/* ---------- Desktop grid: three columns of 279, gap 14 ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, calc(279 * var(--u)));
  column-gap: calc(14 * var(--u));
  padding: 0 calc(80 * var(--u));
  align-items: start;
}
.col { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.col[hidden] { display: none; }

figure { margin: 0; position: relative; }
/* the normal hand pointer: Windows' zoom-in cursor looks like a "loading" spinner */
figure img { width: 100%; cursor: pointer; }

.text h2 { margin: 0; font-weight: 700; font-size: calc(18 * var(--u)); }
/* Gopher Light runs wider than Red Hat Light, so the text is a touch larger here to wrap the same way */
/* max(12px, ...): text never shrinks below 12px on narrow screens (readability; Google flags smaller text) */
.text p { margin: 0; font-weight: 400; font-size: max(12px, calc(10.9 * var(--u))); }
.about h2 { line-height: calc(24 * var(--u)); }
.about p { line-height: calc(13 * var(--u)); }
.about { width: calc(254 * var(--u)); }
.editorial h2 { line-height: calc(26 * var(--u)); }
.editorial p { line-height: calc(14 * var(--u)); }
.editorial .small {
  width: calc(136 * var(--u));
  margin: calc(14 * var(--u)) auto calc(13 * var(--u));
}

.badge {
  position: absolute;
  background: var(--badge);
  width: calc(100 * var(--u));
  height: calc(35 * var(--u));
  display: grid;
  place-items: center;
  font-size: calc(16 * var(--u));
  text-decoration: underline;
  text-decoration-color: #b9b49a;
}
.badge.top-left { top: 0; left: 0; }
.badge.bottom-right { bottom: 0; right: 0; }

.more {
  align-self: center;
  text-align: center;
  margin: calc(12 * var(--u)) 0 calc(60 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
  line-height: calc(18 * var(--u));
  font-weight: 500;
}

/* ---------- Footer: contact links at the bottom, so nobody has to scroll back up ---------- */
.foot {
  display: flex;
  gap: calc(10 * var(--u));
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 calc(16 * var(--u)) calc(40 * var(--u));
  font-size: max(12px, calc(14 * var(--u)));
}

/* Keyboard users: a clear ring on whatever has focus (only shown for keyboard, not mouse clicks) */
a:focus-visible, button:focus-visible, figure img:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.lightbox button:focus-visible { outline-color: #fff; }

/* Read out by screen readers only (e.g. "Email address copied") */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Lightbox ---------- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; }
.lightbox::backdrop { background: rgba(20, 33, 61, 0.85); }
.lightbox img { max-width: 94vw; max-height: 94vh; width: auto; }
.lightbox button {
  position: fixed; top: 12px; right: 16px;
  background: none; border: 0; color: #fff; font-size: 36px; cursor: pointer;
}

/* ---------- Phones: her two-column phone layout (320px canvas) ---------- */
@media (max-width: 768px) {
  :root { --u: calc(100vw / 320); }

  .top {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name name" "contact social";
    row-gap: calc(10 * var(--u));
    padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    height: auto;
  }
  .top .nav:first-child { grid-area: contact; }
  .top .nav:last-child { grid-area: social; }
  .name { grid-area: name; justify-self: center; font-size: calc(20 * var(--u)); margin: 0; }
  .name img { width: calc(62 * var(--u)); margin: calc(-6 * var(--u)) calc(-44 * var(--u)) 0 calc(-17 * var(--u)); }
  .nav { font-size: calc(12 * var(--u)); }

  .grid {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(20 * var(--u));
    padding: 0 calc(16 * var(--u));
  }
  .col { gap: calc(9 * var(--u)); }

  .text h2 { font-size: calc(12 * var(--u)); }
  .text p { font-size: max(12px, calc(8 * var(--u))); line-height: 1.5; }
  .about { width: auto; }
  .about h2 { line-height: calc(16 * var(--u)); margin-bottom: calc(2 * var(--u)); }
  .editorial h2 { line-height: calc(20 * var(--u)); }
  .editorial .small { width: calc(72 * var(--u)); margin: calc(8 * var(--u)) auto calc(10 * var(--u)); }

  .badge { width: calc(73 * var(--u)); height: calc(27 * var(--u)); font-size: calc(12 * var(--u)); }

  .more {
    align-self: start;
    text-align: left;
    font-size: calc(12 * var(--u));
    line-height: calc(16 * var(--u));
    margin: calc(4 * var(--u)) 0 calc(24 * var(--u));
  }
  .foot { font-size: max(12px, calc(12 * var(--u))); padding-bottom: calc(32 * var(--u)); }
}