/* measuredlocally.com: the site's one stylesheet.
   A tech news site in the videos' colours: near-black navy, green for what is measured here,
   a marker hand for the name, the section labels and the big numbers, a plain sans for reading.
   No external requests: the font is bundled, there is no tracker and no advert slot. */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/Caveat-var-latin.woff2") format("woff2");
}

:root {
  --bg: #0a0c11;
  --bg-edge: #050608;
  --card: #0d1017;
  --card-2: #11151e;
  --line: #1d222d;
  --ink: #f5f6f7;
  --ink-soft: #cfd4dc;
  --ink-mut: #9aa2b0;
  --ink-faint: #6b7483;
  --green: #7fdc3a;
  --gold: #d4a72c;
  --blue: #3f8cff;
  --red: #ef4444;
  --marker: "Caveat", "Segoe Print", cursive;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --head: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-edge); -webkit-text-size-adjust: 100%; }
body {
  color: var(--ink-soft);
  font: 17px/1.62 var(--sans);
  background: radial-gradient(1200px 700px at 50% 0%, #10141f 0%, var(--bg) 55%, var(--bg-edge) 100%) no-repeat, var(--bg-edge);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--green); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- masthead ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
.brand { font: 700 2.15rem/1 var(--marker); color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand b { font-weight: 700; color: var(--green); }
.brand i { font-style: normal; color: var(--ink-faint); }
.nav { display: flex; gap: 6px 24px; flex-wrap: wrap; }
.nav a { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mut); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--ink); border-bottom-color: var(--green); }

/* ---- shared pieces ---- */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mut); }
.tag { display: inline-block; padding: 2px 9px; border-radius: 4px; background: #17301a; color: var(--green); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.tag.model { background: #241d3d; color: #b9a3ff; }
.tag.mac { background: #14243f; color: #8fbaff; }
.label { font: 700 1.9rem/1.1 var(--marker); color: var(--ink); margin: 56px 0 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.label a { font: 600 0.76rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mut); text-decoration: none; }
.label a:hover { color: var(--green); }
.meta { font-size: 0.8rem; color: var(--ink-faint); }
.credit { margin-top: 8px; font-size: 0.78rem; color: var(--ink-faint); }
.photo img { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }

/* ---- labels: how far to trust a number ---- */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; line-height: 1.5; white-space: nowrap; border: 1px dashed var(--ink-faint); color: var(--ink-mut); }
.pill.mine { border: 1px solid var(--green); color: var(--green); }
.pill.measured { border-color: var(--gold); color: var(--gold); }
.pill.own { border-color: var(--blue); color: #8fbaff; }

/* ---- home: lead story ---- */
.lead { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: center; margin-top: 34px; }
.lead h1 { font: 700 clamp(1.9rem, 3.6vw, 2.7rem)/1.14 var(--head); color: var(--ink); margin: 12px 0 14px; letter-spacing: -0.01em; }
.lead h1 a { text-decoration: none; }
.lead h1 a:hover { text-decoration: underline; text-decoration-color: var(--green); }
.lead p { color: var(--ink-soft); font-size: 1.04rem; }
.lead .meta { margin-top: 14px; }

/* ---- home: cards and the list of stories ---- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scard { display: block; text-decoration: none; }
.scard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.scard h3 { font: 700 1.16rem/1.28 var(--head); color: var(--ink); margin: 12px 0 6px; }
.scard:hover h3 { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 3px; }
.scard p { font-size: 0.92rem; line-height: 1.5; color: var(--ink-mut); }
.scard .kicker { margin-top: 12px; }

.cols { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: start; }
.river article { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.river article:first-child { border-top: 0; padding-top: 0; }
.river img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.river h3 { font: 700 1.1rem/1.3 var(--head); color: var(--ink); margin: 6px 0; }
.river h3 a { text-decoration: none; }
.river h3 a:hover { text-decoration: underline; text-decoration-color: var(--green); }
.river p { font-size: 0.92rem; line-height: 1.5; color: var(--ink-mut); }

.box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 8px; margin-bottom: 22px; }
.box h2 { font: 700 1.55rem/1 var(--marker); color: var(--ink); margin-bottom: 8px; }
.box ul { list-style: none; }
.box li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.box li a { text-decoration: none; font-weight: 600; }
.box li a:hover { color: var(--green); }
.box li span { color: var(--ink-mut); text-align: right; font-size: 0.86rem; }
.box li b { font: 700 1.25rem/1 var(--marker); color: var(--ink); }
.box .more { display: block; padding: 10px 0 10px; border-top: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mut); text-decoration: none; }
.box .more:hover { color: var(--green); }

/* ---- story ---- */
.story-head { max-width: 820px; margin: 40px 0 26px; }
.story-head h1 { font: 700 clamp(2rem, 4.4vw, 3rem)/1.12 var(--head); color: var(--ink); margin: 14px 0 16px; letter-spacing: -0.012em; }
.standfirst { font-size: 1.2rem; line-height: 1.5; color: var(--ink); }
.byline { margin-top: 16px; font-size: 0.84rem; color: var(--ink-mut); }
.byline b { color: var(--ink); font-weight: 600; }

.article { max-width: 720px; }
.article > p { margin: 0 0 1.1em; }
.article h2 { font: 700 1.5rem/1.2 var(--head); color: var(--ink); margin: 1.8em 0 0.6em; }
.article figure { margin: 1.6em 0; }
.article ul { margin: 0 0 1.1em 1.15em; }
.article li { margin-bottom: 0.5em; padding-left: 4px; }
.article li::marker { color: var(--green); }

.prices { width: 100%; border-collapse: collapse; margin: 0.4em 0 0.5em; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.prices th { text-align: left; padding: 11px 16px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); background: var(--card-2); }
.prices td { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 0.98rem; }
.prices td.num { font: 700 1.45rem/1.1 var(--marker); color: var(--ink); white-space: nowrap; }
.prices tr.pick td { background: #101a10; }
.prices small { display: block; color: var(--ink-faint); font-size: 0.78rem; font-family: var(--sans); font-weight: 400; }

.verdict { margin: 1.8em 0; padding: 18px 20px; background: var(--card); border: 1.5px solid var(--green); border-radius: 12px; }
.verdict h2, .verdict h3 { font: 700 1.5rem/1 var(--marker); color: var(--green); margin: 0 0 8px; }
.verdict p { margin: 0; color: var(--ink); }

.watch { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: center; margin: 2em 0; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; }
.watch img { border-radius: 8px; }
.watch b { display: block; font: 700 1.05rem/1.3 var(--head); color: var(--ink); }
.watch span { font-size: 0.9rem; color: var(--ink-mut); }
.watch:hover { border-color: var(--green); }

.sources { list-style: none; margin: 0 !important; border-top: 1px solid var(--line); }
.sources li { padding: 11px 0; margin: 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.sources li span { display: block; font-size: 0.82rem; color: var(--ink-faint); }

.ledger { width: 100%; border-collapse: collapse; }
.ledger th { text-align: left; padding: 0 16px 9px 0; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.ledger td { vertical-align: top; padding: 12px 16px 12px 0; border-top: 1px solid var(--line); font-size: 0.92rem; line-height: 1.45; }
.ledger td:last-child, .ledger th:last-child { padding-right: 0; }
.ledger .fig { font: 700 1.35rem/1.15 var(--marker); color: var(--ink); white-space: nowrap; }
.ledger span.sub { display: block; font-size: 0.8rem; color: var(--ink-faint); }

/* ---- machine page ---- */
.mhead { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-top: 36px; }
.mhead h1 { font: 700 clamp(2.2rem, 5vw, 3.3rem)/1.06 var(--head); color: var(--ink); margin: 12px 0 14px; letter-spacing: -0.015em; }
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
.specs div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.specs b { display: block; font: 700 1.9rem/1 var(--marker); color: var(--ink); }
.specs span { font-size: 0.82rem; color: var(--ink-mut); }

.bars { display: grid; gap: 12px; }
.bar { display: grid; grid-template-columns: 210px 1fr 150px; gap: 14px; align-items: center; }
.bar .what { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.3; }
.bar .what small { display: block; color: var(--ink-faint); font-size: 0.78rem; }
.bar .track { height: 26px; }
.bar .fill { height: 100%; width: var(--w); border: 1.5px solid var(--green); border-radius: 5px; background: repeating-linear-gradient(135deg, rgba(127, 220, 58, 0.55) 0 2px, transparent 2px 8px); }
.bar.was .fill { border-color: var(--ink-faint); background: repeating-linear-gradient(135deg, rgba(154, 162, 176, 0.4) 0 2px, transparent 2px 8px); }
.bar.gold .fill { border-color: var(--gold); background: repeating-linear-gradient(135deg, rgba(212, 167, 44, 0.5) 0 2px, transparent 2px 8px); }
.bar .val { font: 700 1.55rem/1 var(--marker); color: var(--ink); white-space: nowrap; }
.bar .val small { font: 400 0.76rem/1 var(--sans); color: var(--ink-mut); }
.note { margin-top: 14px; font-size: 0.84rem; color: var(--ink-mut); max-width: 78ch; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.two .box { margin: 0; padding-bottom: 14px; }
.two .box li { display: list-item; list-style: none; border-top: 1px solid var(--line); padding: 10px 0; }
.two h2.good { color: var(--green); }
.two h2.bad { color: var(--gold); }

.transparency { margin-top: 30px; padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; font-size: 0.92rem; max-width: 80ch; }
.transparency b { color: var(--ink); }

/* ---- benchmarks ---- */
.findings { list-style: none; display: grid; gap: 12px; max-width: 860px; }
.findings li { padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 0 12px 12px 0; color: var(--ink); }
.rigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rig { background: var(--card); border: 1.5px solid var(--green); border-radius: 12px; padding: 16px 18px; }
.rig.todo { border-color: #2a3140; }
.rig b { display: block; font: 700 1.6rem/1.1 var(--marker); color: var(--ink); }
.rig span { display: block; font-size: 0.86rem; color: var(--ink-mut); margin: 4px 0 12px; }

.bench { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.bench th { text-align: left; padding: 11px 14px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); background: var(--card-2); vertical-align: bottom; }
.bench td { padding: 12px 14px; border-top: 1px solid var(--line); font-size: 0.9rem; line-height: 1.4; vertical-align: top; }
.bench td.n { font: 700 1.4rem/1.1 var(--marker); color: var(--ink); white-space: nowrap; }
.bench td.n small { font: 400 0.72rem/1 var(--sans); color: var(--ink-mut); }
.bench td small.sub { display: block; color: var(--ink-faint); font-size: 0.78rem; }
/* a wait with a sentence under it (the thinking table): the sentence may wrap, the figure may not */
.bench td.n.wait small.sub { white-space: normal; min-width: 9.5em; line-height: 1.35; margin-top: 2px; }
.bench tr.todo td { color: var(--ink-faint); font-style: italic; }
.bench tr.best td { background: #101a10; }
.scroll { overflow-x: auto; }

.how { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 34px; max-width: 900px; list-style: none; }
.how li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.94rem; }
.how b { color: var(--ink); }

/* ---- footer ---- */
.wrong { margin-top: 44px; padding: 16px 18px; border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 12px 12px 0; max-width: 720px; font-size: 0.95rem; }
.foot { margin-top: 72px; padding: 24px 0 56px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-faint); }
.foot p { max-width: 76ch; margin-bottom: 8px; }
.foot a { color: var(--ink-mut); }

/* ---- phones ---- */
@media (max-width: 860px) {
  .lead, .cols, .mhead, .two { grid-template-columns: 1fr; }
  .lead { gap: 18px; }
  .cards, .rigs { grid-template-columns: 1fr; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .river article { grid-template-columns: 120px 1fr; gap: 14px; }
  .bar { grid-template-columns: 1fr; gap: 4px; }
  .bar .track { height: 20px; }
  .watch { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .ledger thead { display: none; }
  .ledger tr { display: block; padding: 12px 0; border-top: 1px solid var(--line); }
  .ledger td { display: block; padding: 2px 0; border: 0; }
  .wrap { padding: 0 18px; }
  .brand { font-size: 1.85rem; }
  .prices th, .prices td { padding: 9px 8px; font-size: 0.84rem; }
  .prices td.num { font-size: 1.15rem; }
  .bench th, .bench td { padding: 9px 10px; }
}

.story-hero { max-width: 960px; }

/* extra.css: what the pages built after the first design needed.  build_site.py adds it to the end of
   ..\_site-design\site.css, so the design's own file stays as Alex passed it. */

/* a video: its own picture and a play button until the visitor presses play */
.video { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #000; }
.video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .play { position: absolute; left: 50%; top: 50%; width: 84px; height: 58px; margin: -29px 0 0 -42px; border-radius: 16px; background: #ff0033; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); transition: transform 0.15s; }
.video .play::after { content: ""; position: absolute; left: 33px; top: 17px; border-style: solid; border-width: 12px 0 12px 21px; border-color: transparent transparent transparent #fff; }
.video:hover .play { transform: scale(1.08); }
.video .where { position: absolute; left: 12px; bottom: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(5, 6, 8, 0.78); font-size: 0.76rem; color: var(--ink-soft); }
.story-video { max-width: 720px; margin: 0 0 1.6em; }

/* the home page's latest video, and an episode with its stories */
.lead h2 { font: 700 clamp(1.5rem, 2.8vw, 2rem)/1.18 var(--head); color: var(--ink); margin: 12px 0; letter-spacing: -0.01em; }
.lead ul, .episode ul { list-style: none; }
.lead li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 0.98rem; }
.lead li a { text-decoration: none; font-weight: 600; }
.lead li a:hover, .episode h3 a:hover { text-decoration: underline; text-decoration-color: var(--green); }
.episode { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px; align-items: start; }
.episode li { padding: 13px 0; border-top: 1px solid var(--line); }
.episode li:first-child { border-top: 0; padding-top: 0; }
.episode h3 { font: 700 1.12rem/1.3 var(--head); color: var(--ink); margin: 0 0 4px; }
.episode h3 a { text-decoration: none; }
.episode p { font-size: 0.92rem; line-height: 1.5; color: var(--ink-mut); }
.subscribe { display: inline-block; margin-top: 16px; padding: 8px 18px; border-radius: 999px; background: #ff0033; color: #fff; font-size: 0.84rem; font-weight: 700; text-decoration: none; }
.subscribe:hover { background: #d9002b; color: #fff; }
.nav a.yt { color: #ff6b81; }

/* a long figure may wrap in the numbers table */
.ledger .fig { white-space: normal; min-width: 6.5em; }
.ledger td small { display: block; font-size: 0.8rem; color: var(--ink-faint); }
.mlist article { grid-template-columns: 200px 1fr; }
.plain { max-width: 720px; }
.plain h2 { font: 700 1.5rem/1.2 var(--head); color: var(--ink); margin: 1.8em 0 0.6em; }
.plain p { margin: 0 0 1.1em; }
.plain ul { margin: 0 0 1.1em 1.15em; }
.plain li { margin-bottom: 0.5em; }
.plain li::marker { color: var(--green); }

@media (max-width: 760px) {
  .episode { grid-template-columns: 1fr; }
}