/* jake.bilbro.net: simple and modern, Google-flavoured. Not the impeccable system.
   Palette: Google grey-900 ink, grey-600 secondary, Google blue links, Google yellow for the construction
   motif only. One family (Roboto), three weights. Container 1480px, deliberately wider than bilbro.net's 1248px.
   No JavaScript of its own. Zero dependencies beyond the Roboto <link> in the page. */

:root {
  --bg: #ffffff;
  --bg-subtle: #f8f9fa;
  --card: #ffffff;
  --ink: #202124;        /* Google grey-900 */
  --ink-2: #5f6368;      /* Google grey-600 */
  --ink-3: #80868b;      /* Google grey-500 */
  --line: #dadce0;       /* Google grey-300 */
  --brand: #1a73e8;      /* Google blue-600, 4.6:1 on white */
  --brand-soft: #e8f0fe; /* blue-100 */
  --build: #f9ab00;      /* Google yellow-500, decorative only, never carries text */
  --build-ink: #7a5800;  /* yellow for small text at 4.6:1 on white */
  --build-soft: #fef7e0; /* yellow-100 */
  --shadow-1: 0 1px 2px rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  --shadow-2: 0 1px 3px rgba(60, 64, 67, .30), 0 4px 8px 3px rgba(60, 64, 67, .15);
  --r: 12px;
  --r-sm: 8px;
  --font: Roboto, "Google Sans Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #202124;
    --bg-subtle: #17181a;
    --card: #2d2e31;
    --ink: #e8eaed;      /* google grey-200 */
    --ink-2: #9aa0a6;
    --ink-3: #80868b;
    --line: #3c4043;
    --brand: #8ab4f8;    /* google blue-300, 7:1 on dark */
    --brand-soft: #30394a;
    --build: #f9ab00;
    --build-ink: #fdd663;/* yellow-300 */
    --build-soft: #3a3421;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px 2px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
}

/* The construction tape that runs along the top of the page. Decorative. */
.tape {
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--build) 0 14px, transparent 14px 28px);
  border-bottom: 1px solid var(--line);
}

.wrap {
  max-width: 1480px;   /* bilbro.net uses 1248px; this one runs wider on purpose */
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus {
  inset-inline-start: 8px;
  top: 8px;
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  z-index: 5;
}

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ---------- header ---------- */

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brandmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
}
.brandmark .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--build);
  flex: none;
}

/* ---------- hero: three columns at desktop widths so the page earns its width ---------- */

.hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 330px;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 9vh, 132px) 0 clamp(36px, 5vw, 72px);
}
.hero .col-main { min-width: 0; }

/* two-track variant for pages without the build-status card (404) */
.hero--two { grid-template-columns: auto minmax(0, 1fr); }

.hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.hero .lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  color: var(--ink-2);
  margin: 0 0 28px;
  max-width: 68ch;
}
.hero .facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero .facts li {
  font-size: .9375rem;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
}
.hero .facts li a { color: var(--ink); text-decoration: none; }
.hero .facts li a:hover { color: var(--brand); text-decoration: underline; }

.portrait { width: clamp(160px, 20vw, 224px); margin: 0; }
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 50%;
  background: var(--bg-subtle);
  box-shadow: var(--shadow-1);
}
.portrait figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: .8125rem;
  color: var(--ink-3);
}

/* ---------- buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 500;
  font-size: .9375rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 24px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { box-shadow: var(--shadow-1); filter: brightness(1.04); }
.btn.flat { color: var(--brand); border-color: var(--line); }
.btn.flat:hover { background: var(--brand-soft); }
@media (prefers-color-scheme: dark) { .btn.primary { color: #202124; } }

/* ---------- build status card ---------- */

.build {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--build);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  padding: 22px 24px;
}
.build .build-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 4px;
}
.build .build-head svg { flex: none; }
.build .build-title { font-size: 1.0625rem; font-weight: 500; margin: 0; }
.build .build-note { margin: 0 0 14px; font-size: .875rem; color: var(--ink-2); }

.tasks { list-style: none; margin: 16px 0 0; padding: 0; font-size: .875rem; }
.tasks li {
  position: relative;
  padding: 7px 0 7px 26px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
}
.tasks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.tasks li.done::before { background: var(--brand); border-color: var(--brand); }
.tasks li.doing::before { background: var(--build); border-color: var(--build); }
.tasks li.done { color: var(--ink); }

/* ---------- build meter ---------- */

.meter {
  height: 8px;
  border-radius: 999px;
  background: var(--bg-subtle);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, var(--build) 0 10px, color-mix(in oklab, var(--build) 55%, #fff) 10px 20px);
  animation: creep 2.4s linear infinite;
}
@keyframes creep { from { background-position: 0 0; } to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .meter span { animation: none; } }

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
  .hero { grid-template-columns: auto minmax(0, 1fr); }
  .build { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .portrait { width: 160px; }
}

@media print {
  .tape, .meter, .actions { display: none; }
  body { font-size: 11pt; }
}