/* wyome.com — every rule for every page.
   Palette, type and the logo mark come from the Wyome design; the colours below
   are that design's own values, not approximations of them.

   Light and dark both come from prefers-color-scheme; there is no toggle,
   because a toggle would need JavaScript and this site has none. The dark
   values are taken from the design's own inverted band rather than invented —
   that band is already a dark theme, so the palette had one to hand. */

/* Fonts are self-hosted rather than loaded from Google, so the site makes no
   third-party request. On a site whose point is a privacy policy, sending every
   visitor's IP to a font CDN would be a disclosure we'd then have to write.
   Outfit is one variable file covering 300-600; IBM Plex Mono is per weight. */

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-var.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #efe7e1;
  --ink: #3b2c26;
  --muted: #5c4a41;
  /* #8b7a71 until 3 October 2026: 3.36:1 on --bg, under AA for the nav's
     current page, the section labels and the status chips. 5.0:1. */
  --mono: #6e5f57;
  --rule: #ddcec4;
  --rule-soft: #cdbcb1;
  --hover: #8b5e46;

  /* the inverted band */
  --band-bg: #3b2c26;
  --band-ink: #efe7e1;
  --band-muted: #cdb9ad;
  --band-mono: #b39d90;


  --sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono-face: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #3b2c26;
    --ink: #efe7e1;
    --muted: #cdb9ad;
    --mono: #b39d90;
    --rule: #544037;
    --rule-soft: #544037;
    --hover: #cdb9ad;

    /* the band inverts too, so it stays a contrast device rather than
       disappearing into the page */
    --band-bg: #efe7e1;
    --band-ink: #3b2c26;
    --band-muted: #5c4a41;
    --band-mono: #6e5f57;

  }
}

* { box-sizing: border-box; }

/* The hidden attribute must win. [hidden]{display:none} is the weakest rule
   in the cascade, so any class that sets display - .tagcloud's flex, the
   podcast button's block - quietly beats it and the element shows anyway:
   an empty bordered tag strip before the blog loaded, and a play button
   that never hid. Checked 7 October 2026: nothing on the site relies on a
   hidden element being shown. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 56px;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }

.mono {
  font-family: var(--mono-face);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mono);
}

/* Logo -------------------------------------------------------------- */

/* The mark is the wordmark: "wy" + a bullseye standing in for the "o" + "me".
   Every dimension is in em, so the glyph tracks the type size and the footer
   needs nothing but a smaller font-size. */

.logo {
  display: inline-flex;
  align-items: baseline;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* The o is a single ring, not three concentric circles. The old mark needed
   about 40px to resolve, and the wordmark rendered at 25px, so the middle ring
   closed up and the whole thing silted into a dot. One stroke says the same
   thing and still reads as an o at 13px and in a 16px favicon. The wordmark is
   48px now, but do not read that as room to restore the bullseye: the footer
   still sets 19px and the favicon is 16px, and those are where it failed.

   box-sizing is load-bearing. Without it the border is added to the width and
   the ring renders ~45% too large, sitting above the x-height instead of on
   it — which is exactly how the first draft of this went wrong. */
.logo .o {
  box-sizing: border-box;
  display: inline-block;
  width: 0.53em;
  height: 0.53em;
  border: 0.098em solid currentColor;
  border-radius: 50%;
  margin: 0 0.035em;
}

/* Header ------------------------------------------------------------ */

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  flex-wrap: wrap;
}

header.site nav {
  display: flex;
  /* WRAPS, and this fixed a defect that was already here rather than one the
     seventh nav item introduced. MEASURED on the live site at a 375px
     viewport: with six items the page's scrollWidth was 428 against a 375
     viewport, so every phone already scrolled sideways with nothing on screen
     saying why; adding Standards took it to 517. With this line it is 375 and
     does not scroll, at six items or at seven, the nav becoming two rows 68px
     tall. `header.site` has carried flex-wrap since it was written, which is
     what lets the whole nav drop below the wordmark - this is the items
     wrapping WITHIN it, which is a different thing and was missing. */
  flex-wrap: wrap;
  gap: 30px;
  font-size: 16px;
  font-weight: 400;
}

header.site nav a[aria-current="page"] { color: var(--mono); }

/* Hero -------------------------------------------------------------- */

.hero { padding: 72px 0 88px; }

.hero h1 {
  margin: 0;
  font-size: 68px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-wrap: balance;
}

.hero p {
  margin: 28px 0 0;
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
  text-wrap: pretty;
}

.actions {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 17px;
  font-weight: 500;
}
.btn:hover { background: var(--muted); color: var(--bg); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft);
  font-size: 17px;
  font-weight: 400;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Section heads ----------------------------------------------------- */

.sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}

.sechead h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.025em;
}

/* Project cards ----------------------------------------------------- */

.projects {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 34px;
  padding: 44px 0 104px;
}

.project h3 {
  margin: 14px 0 0;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* All four carry a real icon. The three iPhone icons are corner-masked at 22.5%,
   close to iOS's own radius, when the PNGs are generated. Athenana's is an SVG
   that brings its own 8px radius and border from its brand spec — deliberately
   left alone, so it reads as the web app it is rather than a fifth iOS icon. */
.project .icon {
  display: block;
  width: 56px;
  height: 56px;
}

img.icon { object-fit: cover; }


.project .status { margin: 10px 0 0; }

.project p.desc {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 44ch;
}

.project p.link { margin: 12px 0 0; font-size: 16px; font-weight: 400; }
.project p.link a { text-decoration: underline; text-underline-offset: 3px; }

/* Inverted band ----------------------------------------------------- */

.band {
  background: var(--band-bg);
  color: var(--band-ink);
}

.band .inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  padding: 96px 0;
}

.band h2 {
  margin: 0;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.steps { display: grid; gap: 40px; }

.step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: start;
}

.step .n {
  font-family: var(--mono-face);
  font-size: 13px;
  font-weight: 400;
  color: var(--band-mono);
  padding-top: 7px;
}

.step h3 { margin: 0; font-size: 22px; font-weight: 500; }

.step p {
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--band-muted);
  max-width: 48ch;
}

.band a { text-decoration: underline; text-underline-offset: 3px; }
.band a:hover { color: var(--band-muted); }

/* Prose pages ------------------------------------------------------- */

main.prose { padding: 56px 0 96px; max-width: 62ch; }

main.prose h1 {
  margin: 0 0 28px;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

main.prose p.lede {
  margin: 0 0 44px;
  font-size: 20px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

main.prose h2 {
  margin: 44px 0 12px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

main.prose p { margin: 0 0 14px; }

main.prose a { text-decoration: underline; text-underline-offset: 3px; }

main.prose .meta {
  margin-top: 40px;
  font-family: var(--mono-face);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--mono);
}

/* Footer ------------------------------------------------------------ */

footer.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 44px 0 64px;
  border-top: 1px solid var(--rule);
  margin-top: 0;
}

footer.site .logo { font-size: 19px; }
footer.site .foot-right { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
footer.site .foot-right a { font-size: 16px; font-weight: 400; }

/* Narrow ------------------------------------------------------------ */

@media (max-width: 860px) {
  .wrap { padding: 0 24px; }
  .hero { padding: 48px 0 64px; }
  .hero h1 { font-size: 44px; letter-spacing: -0.03em; }
  .hero p { font-size: 18px; margin-top: 22px; }
  .projects { grid-template-columns: 1fr; gap: 40px; padding-bottom: 72px; }
  .sechead h2 { font-size: 28px; }
  .band .inner { grid-template-columns: 1fr; gap: 36px; padding: 64px 0; }
  .band h2 { font-size: 30px; }
  main.prose { padding: 40px 0 72px; }
  main.prose h1 { font-size: 36px; }
  main.prose p.lede { font-size: 18px; margin-bottom: 34px; }
  header.site { padding-top: 22px; padding-bottom: 22px; }
  header.site nav { gap: 20px; font-size: 15px; }
  .logo { font-size: 36px; }
  footer.site { padding: 32px 0 48px; }
}