/* Wallweekly — the site wears the app's clothes.
   Same ground, same ink, same two faces, same rules: words are serif, numbers are not,
   nothing is ever italic, and colour means a person.
   Both faces are served from this domain. Nothing here calls out to anyone else, which
   matters most on the page that promises exactly that. */

@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Variable.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-Variable.ttf") format("truetype-variations");
  font-weight: 300 600;
  font-display: swap;
}

:root {
  --ground: #0b0e14;
  --ink: #f4f1f7;
  --mute: #9ba3b4;
  --bone: #e8e0d2;

  /* The seven person hues. Used for the chips and NOTHING else — see the note on links. */
  --sky: #8bd3ff;
  --iris: #b8a6ff;
  --rose: #f4a8d8;
  --coral: #ff9f94;
  --amber: #ffc46b;
  --lime: #c6e37a;
  --mint: #6fe0be;

  --rule: #1b2130;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Five sizes, and every neighbour at least 20% apart.
     The app gets away with four because it separates roles by FACE, WEIGHT and COLOUR
     rather than by size. This had eleven sizes, ten of them about 6% apart — differences
     no reader perceives as rank — with the lead paragraph a half-pixel larger than the
     body it was supposed to lead, and a sub-heading smaller than the text it headed.
     Roles that used to be a smaller number are now a different weight or colour, which is
     the app's own move. */
  --t-display: clamp(2.4rem, 6vw, 3.6rem);   /* 38.4 → 57.6 */
  --t-section: 1.875rem;                      /* 30 */
  --t-lead: 1.4375rem;                        /* 23 */
  --t-body: 1.1875rem;                        /* 19 */
  --t-small: 0.9375rem;                       /* 15 */

  /* One spacing base. Everything is a multiple of 0.25rem. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --s12: 3rem;
  --s16: 4rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 var(--s6);
}

/* ---- masthead ---------------------------------------------------------- */

header.top { padding: var(--s8) 0 0; }

header.top .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}

.mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

nav a {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--mute);
  text-decoration: none;
  margin-left: var(--s6);
  transition: color 140ms ease;
}
nav a:hover { color: var(--ink); }
/* The page you are on, marked. Three pages that navigate identically give no sense of place. */
nav a[aria-current="page"] { color: var(--ink); }

/* ---- type -------------------------------------------------------------- */

h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s8) 0 0;
  max-width: 16ch;
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-section);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: var(--s12) 0 var(--s2);
}

p { margin: 0 0 var(--s4); }

.lede {
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--bone);
  margin: var(--s6) 0 0;
  max-width: 34ch;
}

.mute { color: var(--mute); }

.footnote {
  color: var(--mute);
  font-size: var(--t-small);
  margin-top: var(--s3);
  max-width: 46ch;
}

/* Links are INK, never a hue.
   Every link on this site used to be #8BD3FF — which is "sky", person hue number one — on a
   page that states five lines above a chip labelled Sky that colour means a person and
   nothing else. The underline is already the affordance; it does not need a hue as well. */
a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 140ms ease;
}
a:hover { color: var(--bone); }
a:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: 2px;
}

/* "Nothing is ever italic" — Typography.swift. The word this protects is Busy, which the
   television literally draws; setting it in italics misquotes the product. */
em {
  font-style: normal;
  color: var(--ink);
}

/* Anything that IS a number wears Jost, exactly as on the television. Words stay serif even
   inside these — hence the explicit serif on dt below. */
.num, time, .stamp {
  font-family: var(--sans);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.price {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: var(--s6) 0 0;
}
/* Words, so serif — the sentence beside the price is not a number. */
.price .once {
  font-family: var(--serif);
  color: var(--mute);
}

/* ---- images ------------------------------------------------------------ */

figure { margin: var(--s8) 0 0; }

figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid var(--rule);
}

figcaption {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--mute);
  margin-top: var(--s2);
}

/* The hero is the whole argument — "readable from the sofa", proved by the real screen. It
   was drawn at 36% of native inside the prose column with half the viewport empty beside
   it. It breaks the measure; the prose does not. */
.hero {
  max-width: min(70rem, calc(100vw - var(--s12)));
  margin: var(--s6) auto 0;
  padding: 0 var(--s6);
}
.hero figure { margin: 0; }

.shot-phone { max-width: 17rem; }

/* ---- lists ------------------------------------------------------------- */

ul, ol { padding-left: var(--s4); margin: 0 0 var(--s4); }
li { margin-bottom: var(--s2); }
li::marker { color: var(--mute); font-family: var(--sans); }

/* The seven hues, shown once, because colour is the one thing the product asks you to
   learn — and it takes about a second. The only place a hue appears on this site. */
.hues {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s4) 0 0;
}
.hues li {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-small);
  padding: var(--s1) var(--s3);
  border-radius: 999px;
  border: 1px solid currentColor;
}

/* ---- rules and footer -------------------------------------------------- */

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s16) 0 0;
}

footer {
  padding: var(--s8) 0 var(--s16);
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--mute);
}
footer a { color: var(--mute); }
footer a:hover { color: var(--ink); }
footer .row { display: flex; gap: var(--s6); flex-wrap: wrap; }

main { padding-bottom: var(--s4); }

/* ---- prose pages ------------------------------------------------------- */

.doc h2:first-of-type { margin-top: var(--s8); }

/* A sub-heading here is a question, not a label. It earns its rank from weight and colour
   rather than from size — it used to be SMALLER than the body it headed. */
.doc h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-body);
  color: var(--ink);
  letter-spacing: 0;
  margin: var(--s6) 0 var(--s1);
}

.doc p, .doc li { max-width: 40rem; }

/* A jump list, so a worried parent reaches the one answer they came for without reading
   five screens of policy. */
.jump {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--mute);
  margin-top: var(--s4);
  max-width: 46rem;
}
.jump a { color: var(--mute); }
.jump a:hover { color: var(--ink); }

dl { margin: 0 0 var(--s6); }
dt {
  /* A whole sentence, so serif. Only the scope name inside it is a .num. */
  font-family: var(--serif);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--s4);
}
dd { margin: var(--s1) 0 0; color: var(--bone); }

.card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: var(--s4) var(--s6);
  margin: var(--s6) 0 0;
}
.card p:last-child { margin-bottom: 0; }

@media (max-width: 34rem) {
  /* 1.5rem of padding either side left 37-character lines on a 390px phone, under the
     45-character floor where reading gets choppy. */
  .wrap { padding: 0 var(--s4); }
  .hero { padding: 0 var(--s4); }

  header.top .wrap { display: block; }
  nav { margin-top: var(--s2); display: block; }

  /* Navigation is not inline prose, so WCAG 2.5.8's inline exception does not cover it.
     These measured 45x20 and 50x20 — under the 24px floor, let alone the 44px comfort
     target. Padding, not a font size, because the type scale is doing another job. */
  nav a {
    display: inline-block;
    margin: 0 var(--s6) 0 0;
    padding: var(--s3) 0;
  }
  footer .row a {
    display: inline-block;
    padding: var(--s2) 0;
  }
}