/* Fluid type scale, generated at utopia.fyi and pasted in.
   @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
}

/* Same thing for spacing. I did not invent these clamps by hand either. */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);

  /* body padding rides on this one: tight on a phone, roomy on a desktop */
  --space-s-3xl: clamp(1.125rem, -1.0924rem + 11.087vi, 7.5rem);
}

/* Night ink and signal amber. A transmitter after dark, which is the whole
   point of the page. Every pair below clears WCAG AA against --bg, so unlike
   a pale palette the accent is safe at any size:
   amber 10.5:1 | text 14.5:1 | quiet 6.0:1 */

:root {
  --bg: #12151f;
  --surface: #1b2030;
  --line: #2b3145;
  --text: #e8e4dc;   /* warm off-white, never pure #fff */
  --accent: #ffb703; /* signal amber */
  --quiet: #9a9387;
}

/* Bruphy in the body, Boxout on the title, Berkeley on the machine-readable
   bits. Fraunces sits unused in type/ on purpose: browsers fetch a declared
   fallback even when it never renders, and 67 KB is a third of the payload.
   Georgia does the same job for nothing. */
@font-face {
  font-family: "Bruphy Text";
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  src: url("type/BruphyText-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Bruphy Text";
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  src: url("type/BruphyText-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Bruphy Text";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("type/BruphyText-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Boxout";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("type/Boxout02-Wide-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Berkeley Mono";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("type/BerkeleyMono-Regular.woff2") format("woff2");
}

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

html {
  /* stops the layout jumping when the scrollbar shows up */
  scrollbar-gutter: stable;
  overflow-y: scroll;
  background: var(--bg);
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-family: "Bruphy Text", Georgia, serif;
  /* step-2 was too big: it left a phone with about 22 characters per line.
     step-1 keeps the generous editorial feel and still reads. */
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  padding: var(--space-s-3xl);
  margin: 0;
}

/* Keeps the reading measure near 70 characters instead of letting a wide
   monitor stretch a line of the manifesto to 90. */
main {
  max-width: 46rem;
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

/* The emoji does the shouting so the type does not have to. */
.hero, summary .mark {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-style: normal;
}

.hero {
  font-size: clamp(4.5rem, 3rem + 9vi, 8rem);
  line-height: 1;
  margin: 0 0 var(--space-xs) 0;
}

h1 {
  color: var(--accent);
  font-family: "Boxout", sans-serif;
  font-weight: 900;
  font-size: var(--step-5);
  margin: 0 0 1rem 0;
  line-height: 1.1;
  text-transform: uppercase;
}

h2 {
  color: var(--accent);
  font-family: "Bruphy Text", sans-serif;
  font-weight: 600;
  font-size: var(--step-0);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 2.5rem 0 0 0;
  line-height: 1.15;
}

p {
  margin: 1rem 0;
}

a:link, a:visited {
  color: var(--accent);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

a:hover, a:focus-visible {
  text-decoration-thickness: 3px;
}

.smaller {
  font-size: 80%;
}

/* the manifesto is the only block always open, so it gets the room */
#manifesto p {
  margin: 2rem 0;
}

#manifesto p:last-child {
  color: var(--accent);
  font-weight: bold;
}

#info {
  margin-top: var(--space-xl);
}

summary {
  margin: 0;
  padding: .7em 0;
  font-weight: bold;
  border-top: 1px solid var(--line);
}

summary:hover {
  cursor: pointer;
  color: var(--accent);
}

/* big emoji again, this time as the section marker */
summary .mark {
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -.22em;
  margin-right: .35em;
}

details[open] summary {
  color: var(--accent);
}

details > *:last-child {
  margin-bottom: var(--space-m);
}

ol {
  margin: 1rem 0;
  padding-left: 1.4em;
}

ol li {
  margin: .75rem 0;
}

ol li::marker {
  color: var(--accent);
  font-weight: bold;
}

/* The proof: one line per service. Adding a server is adding an <li>. */
#proof ul {
  margin: .75rem 0 0 0;
  padding: 0;
  list-style: none;
}

#proof li {
  margin: .5rem 0;
  /* domain and description sit side by side when there is room, stack when not */
  display: flex;
  flex-wrap: wrap;
  gap: 0 .75em;
  align-items: baseline;
}

#proof .what,
#proof .status {
  font-family: "Berkeley Mono", ui-monospace, monospace;
  font-size: 70%;
  color: var(--quiet);
}

#proof .status {
  font-style: italic;
  color: var(--accent);
}

#proof .status:before {
  content: "\00b7\00a0";
  color: var(--quiet);
}

/* The metal. Photos live inside a closed <details> and carry loading="lazy",
   so none of these 460 KB are fetched until somebody opens the section. */
#metal figure {
  margin: var(--space-m) 0;
}

#metal img {
  max-width: 100%;
  /* portrait shots would otherwise run a full screen tall on a wide column */
  max-height: 28rem;
  width: auto;
  height: auto;
  border: 1px solid var(--line);
}

#metal figcaption {
  font-family: "Berkeley Mono", ui-monospace, monospace;
  font-size: 70%;
  color: var(--quiet);
  margin-top: .6rem;
}

#metal strong {
  color: var(--text);
  font-weight: bold;
}

#proof .groupnote {
  color: var(--quiet);
  font-size: 85%;
  margin: .4rem 0 0 0;
}

#proof .note {
  color: var(--quiet);
  border-left: 2px solid var(--line);
  padding-left: var(--space-s);
  margin-top: var(--space-m);
}

#footer {
  margin-top: var(--space-xl);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--quiet);
}

#footer a:link, #footer a:visited {
  color: var(--quiet);
}

#footer a:hover, #footer a:focus-visible {
  color: var(--accent);
}

/* The button wall. These GIFs carry their own 1998 backgrounds and they clash
   with the dark page on purpose. That is the entire point of a button wall. */
#junk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
}

#junk img {
  display: block;
}