/* WeddingWorkflowLab. A darkroom workbench: proof paper, film edges, crop marks and one china-marker red. */

@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("../fonts/spectral-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Spectral Fallback"; src: local("Georgia"); size-adjust: 97%; ascent-override: 96%; descent-override: 34%; line-gap-override: 0%; }

:root {
  --paper: #f0eee8;
  --sheet: #faf8f3;
  --tint: #e6e3d9;
  --ink: #18191a;
  --ink-2: #484c4f;
  --ink-3: #5e6366;
  --rule: #d3cfc4;
  --marker: #b3261e;
  --keep: #27634a;
  --hold: #7d5200;

  --room: #121314;
  --room-2: #1d1f20;
  --room-3: #303335;
  --on-room: #efece5;
  --on-room-2: #bab7ae;
  --marker-room: #ff8a78;
  --marker-solid: #b3261e;
  --amber: #e2b35c;

  --serif: "Spectral", "Spectral Fallback", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 3.4vw, 48px);
  --wide: 1360px;
  --edge: calc(max(0px, (100vw - var(--wide)) / 2) + var(--gutter));
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #17191a;
  --sheet: #202324;
  --tint: #272a2c;
  --ink: #ece9e2;
  --ink-2: #c4c1b8;
  --ink-3: #a3a098;
  --rule: #383c3e;
  --marker: #ff8a78;
  --keep: #84d3ac;
  --hold: #e2b35c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
html:has(.wwl-nav.is-open) { overflow: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.14rem/1.62 var(--serif); font-optical-sizing: auto; overflow-wrap: break-word; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--marker); }
ul, ol, dl, p, h1, h2, h3, figure, fieldset, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--marker); outline-offset: 2px; }
h1, h2 { font-weight: 200; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); line-height: 1.1; }
h3 { font-size: 1.22rem; font-weight: 600; line-height: 1.3; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wwl-kicker, .wwl-crumbs, .wwl-answer__label, .wwl-stamp, .wwl-nav, .wwl-next__label, .wwl-ledger__meta, .wwl-frame__edge,
.wwl-sheet__cap, .wwl-callout__label, .wwl-result__label, .wwl-slip dt, .wwl-foot h2, .wwl-cta__name, .wwl-hub__count, .wwl-toolbtn, .wwl-menu-toggle,
.wwl-toc summary, .wwl-chip, .wwl-rcard dt, .wwl-count__stamp, .wwl-instrument__formula, .wwl-rebate {
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.wwl-kicker { color: var(--ink-2); }
.wwl-skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 30; font-family: var(--sans); font-size: 1rem; }
.wwl-skip:focus { left: 8px; }
.wwl-wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Reading progress, where scroll-driven animation exists */
.wwl-progress { position: fixed; inset: 0 0 auto; height: 2px; background: var(--marker-solid); transform-origin: 0 50%; transform: scaleX(0); z-index: 25; pointer-events: none; display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .wwl-progress { display: block; animation: wwl-grow linear both; animation-timeline: scroll(root); }
  }
}
@keyframes wwl-grow { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .wwl-head { view-transition-name: masthead; }
  .wwl-foot { view-transition-name: footer; }
}

/* Masthead */
.wwl-head { border-bottom: 1px solid var(--rule); position: relative; z-index: 20; background: var(--paper); color: var(--ink); }
.wwl-head__bar { max-width: var(--wide); margin: 0 auto; padding: 13px var(--gutter); display: flex; align-items: center; gap: 12px 28px; }
.wwl-wordmark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; }
.wwl-wordmark:hover { color: var(--ink); }
.wwl-wordmark__mark, .wwl-toolbtn svg { flex: none; }
.wwl-wordmark__text { font-size: 1.32rem; line-height: 1; white-space: nowrap; }
.wwl-nav__theme { display: none; }
.wwl-nav__theme button { background: none; border: 0; color: inherit; cursor: pointer; font: 500 0.78rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 0; }
.wwl-nav__theme button[aria-pressed="true"]::after { content: " \2022 on"; color: var(--marker); }
.wwl-wordmark__text span, .wwl-foot__name span { font-family: var(--mono); font-weight: 500; font-size: 0.6em; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; padding: 2px 5px; margin-left: 3px; vertical-align: 0.14em; }
.wwl-nav ul { display: flex; gap: 2px 18px; }
.wwl-nav a { display: inline-flex; gap: 6px; text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; white-space: nowrap; }
.wwl-nav__no { color: var(--ink-3); }
.wwl-nav a:hover { color: var(--marker); }
.wwl-nav a[aria-current] { border-bottom-color: var(--marker); }
.wwl-nav li.is-stage + li:not(.is-stage) { margin-left: 2px; padding-left: 20px; border-left: 1px solid var(--rule); }
.wwl-headtools { display: flex; gap: 6px; }
.wwl-toolbtn, .wwl-menu-toggle { background: none; border: 1px solid var(--rule); color: var(--ink); padding: 8px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; line-height: 1; white-space: nowrap; }
.wwl-toolbtn:hover, .wwl-menu-toggle:hover { border-color: var(--marker); color: var(--marker); }
.wwl-toolbtn kbd { font: inherit; border: 1px solid var(--rule); padding: 1px 4px; color: var(--ink-3); }
@media (min-width: 1221px) { .wwl-menu-toggle { display: none; } }
@media (max-width: 1220px) {
  .wwl-nav { display: block; }
  .js .wwl-nav { display: none; }
  .js .wwl-nav.is-open { display: block; position: fixed; inset: 0; top: var(--head-h, 62px); background: var(--paper); overflow-y: auto; padding: 8px var(--gutter) 40px; z-index: 19; }
  .wwl-nav { width: 100%; order: 5; }
  .wwl-nav ul { flex-direction: column; }
  .wwl-nav li, .wwl-nav li.is-stage + li:not(.is-stage) { border-bottom: 1px solid var(--rule); margin: 0; padding: 0; border-left: 0; }
  .wwl-nav a { font-family: var(--serif); font-weight: 200; font-size: clamp(1.7rem, 7vw, 2.2rem); letter-spacing: -0.01em; text-transform: none; padding: 11px 0; border: 0; display: flex; align-items: baseline; gap: 14px; }
  .wwl-nav__no { font: 500 0.72rem var(--mono); letter-spacing: 0.08em; color: var(--marker); min-width: 2.4em; }
  .wwl-toolbtn kbd, .wwl-toolbtn__text { display: none; }
  .wwl-head__bar { flex-wrap: nowrap; }
}
@media (max-width: 520px) {
  .wwl-wordmark { gap: 8px; }
  .wwl-wordmark__mark { width: 24px; height: 24px; }
  .wwl-wordmark__text { font-size: 1.12rem; }
  .wwl-headtools [data-theme-toggle] { display: none; }
  .wwl-nav__theme { display: block; }
  .wwl-head__bar { gap: 8px; }
  .wwl-toolbtn, .wwl-menu-toggle { padding: 8px 9px; }
}

/* Placeholder banners and tokens */
.wwl-fixture { background: repeating-linear-gradient(135deg, #f7e6c4, #f7e6c4 12px, #f3dcae 12px, #f3dcae 24px); color: #4a3200; border-bottom: 1px solid #d9b97a; padding: 10px var(--gutter); font: 0.92rem/1.45 var(--sans); }
.wwl-token { background: #ffe066; color: #3a2a00; padding: 1px 5px; font-family: var(--mono); font-size: 0.8em; }
.wwl-noscript { padding: 12px var(--gutter) 0; font-size: 0.95rem; color: var(--hold); }

/* Buttons */
.wwl-button { display: inline-block; background: var(--ink); color: var(--paper); text-decoration: none; padding: 13px 22px; font: 600 0.98rem/1.2 var(--sans); border: 1px solid var(--ink); cursor: pointer; }
.wwl-button:hover { background: var(--marker-solid); border-color: var(--marker-solid); color: #fff; }
.wwl-button--quiet { background: none; color: var(--ink); }
.wwl-button--quiet:hover { color: #fff; }

/* Film edge strip */
.wwl-rebate { display: block; overflow: hidden; white-space: nowrap; color: var(--amber); opacity: 0.72; font-size: 0.66rem; padding: 7px 0; }

/* HOME: darkroom hero */
.wwl-home .wwl-head, .wwl-hero, .wwl-instruments {
  --paper: var(--room); --sheet: var(--room-2); --ink: var(--on-room); --ink-2: var(--on-room-2); --ink-3: var(--on-room-2); --rule: var(--room-3); --marker: var(--marker-room);
}
.wwl-home .wwl-head { border-bottom-color: transparent; }
.wwl-hero { background: radial-gradient(70vw 46vw at 88% -8%, rgba(190, 40, 28, 0.34), transparent 66%), radial-gradient(52vw 30vw at 2% 44%, rgba(226, 179, 92, 0.08), transparent 70%), var(--room); color: var(--on-room); overflow: hidden; }
.wwl-hero__top { max-width: var(--wide); margin: 0 auto; padding: clamp(28px, 5vw, 76px) var(--gutter) clamp(30px, 4vw, 54px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.wwl-hero__h1 { font-size: inherit; }
.wwl-hero__kick { display: block; font: 500 clamp(0.72rem, 1.1vw, 0.86rem) var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); margin-bottom: clamp(14px, 2vw, 24px); }
.wwl-hero__big { display: block; font-size: clamp(3rem, 8.1vw, 7.8rem); line-height: 0.95; letter-spacing: -0.028em; }
.wwl-hero__lede { font-size: 1.14rem; line-height: 1.5; color: var(--on-room-2); }
.wwl-hero__links { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.wwl-hero .wwl-button { background: var(--on-room); color: var(--room); border-color: var(--on-room); }
.wwl-hero .wwl-button:hover { background: var(--marker-solid); border-color: var(--marker-solid); color: #fff; }

.wwl-sheet { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.wwl-sheet__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px) clamp(8px, 1vw, 14px); }
.wwl-frame { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--on-room); background: #0a0a0b; padding: 7px 7px 12px; }
.wwl-frame:hover { color: var(--on-room); background: #000; }
.wwl-frame:focus-visible { outline-color: var(--marker-room); }
.wwl-frame__img { position: relative; display: block; aspect-ratio: 3 / 2; color: var(--marker-room); }
.wwl-frame__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.82) saturate(0.9); transition: filter 0.35s ease; }
.wwl-frame:hover img, .wwl-frame:focus-visible img { filter: brightness(1.04); }
.wwl-mark { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wwl-mark path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.5s ease-out, opacity 0.05s; }
.wwl-frame:hover .wwl-mark path, .wwl-frame:focus-visible .wwl-mark path, .wwl-frame.is-picked .wwl-mark path { stroke-dashoffset: 0; opacity: 1; }
.wwl-frame__edge { display: flex; justify-content: space-between; color: var(--amber); padding: 7px 3px 3px; font-size: 0.74rem; }
.wwl-frame__name { display: block; font-size: clamp(1.25rem, 2.2vw, 1.95rem); font-weight: 200; line-height: 1.12; letter-spacing: -0.01em; padding: 5px 3px 0; }
.wwl-frame__blurb { display: block; color: var(--on-room-2); font: 0.87rem/1.42 var(--sans); padding: 7px 3px 0; flex: 1; }
.wwl-sheet__cap { color: var(--on-room-2); text-transform: none; letter-spacing: 0.02em; padding: 16px 0 clamp(26px, 3vw, 40px); }
@media (prefers-reduced-motion: no-preference) {
  .wwl-frame__img img { animation: wwl-develop 1s ease-out both; }
  li:nth-child(2) .wwl-frame__img img { animation-delay: 0.08s; } li:nth-child(3) .wwl-frame__img img { animation-delay: 0.16s; } li:nth-child(4) .wwl-frame__img img { animation-delay: 0.24s; }
  li:nth-child(5) .wwl-frame__img img { animation-delay: 0.12s; } li:nth-child(6) .wwl-frame__img img { animation-delay: 0.2s; } li:nth-child(7) .wwl-frame__img img { animation-delay: 0.28s; } li:nth-child(8) .wwl-frame__img img { animation-delay: 0.36s; }
  .wwl-frame.is-picked .wwl-mark path { animation: wwl-draw 0.8s 0.7s ease-out both; }
}
@keyframes wwl-develop { from { filter: brightness(2.6) contrast(0.25); } }
@keyframes wwl-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* HOME: chooser */
.wwl-chooser { max-width: var(--wide); margin: 0 auto; padding: clamp(52px, 7vw, 104px) var(--gutter); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); }
.wwl-chooser__ask h2 { font-size: clamp(2.3rem, 5vw, 4.3rem); line-height: 1; margin-bottom: clamp(20px, 3vw, 32px); }
.wwl-chooser__opts { display: grid; }
.wwl-opt { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--rule); cursor: pointer; font-size: 1.16rem; line-height: 1.25; }
.wwl-opt:last-child { border-bottom: 1px solid var(--rule); }
.wwl-opt input { appearance: none; width: 19px; height: 19px; margin: 0; flex: none; border: 1.5px solid var(--ink-3); border-radius: 50%; background: none; display: grid; place-items: center; cursor: pointer; }
.wwl-opt input:checked { border-color: var(--marker); }
.wwl-opt input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--marker); }
.wwl-opt:hover, .wwl-opt:has(input:checked) { color: var(--marker); }
.wwl-opt input:focus-visible { outline: 2px solid var(--marker); outline-offset: 3px; }
.wwl-panel { display: none; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(20px, 3vw, 36px); }
.wwl-panel h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 200; letter-spacing: -0.01em; }
.wwl-panel > p { color: var(--ink-2); margin: 8px 0 18px; }
.wwl-panel__more { margin-top: 16px; }
.wwl-chooser:has(#c-unsure:checked) [data-panel="unsure"],
.wwl-chooser:has(#c-cull:checked) [data-panel="cull"],
.wwl-chooser:has(#c-edit:checked) [data-panel="edit"],
.wwl-chooser:has(#c-retouch:checked) [data-panel="retouch"],
.wwl-chooser:has(#c-denoise:checked) [data-panel="denoise"],
.wwl-chooser:has(#c-cost:checked) [data-panel="cost"] { display: block; }
@supports not selector(:has(*)) { .wwl-panel { display: block; margin-bottom: 12px; } }

/* HOME: evidence ledger */
.wwl-counts { background: var(--tint); }
.wwl-counts__inner { max-width: var(--wide); margin: 0 auto; padding: clamp(44px, 6vw, 84px) var(--gutter); }
.wwl-counts__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 5vw, 72px); align-items: end; margin-bottom: clamp(26px, 4vw, 48px); }
.wwl-counts__head p { color: var(--ink-2); }
.wwl-counts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.wwl-count { padding: 18px clamp(14px, 2.4vw, 32px) 4px 0; }
.wwl-count + .wwl-count { padding-left: clamp(14px, 2.4vw, 32px); border-left: 1px solid var(--rule); }
.wwl-count__n { display: block; font-size: clamp(3rem, 6.5vw, 6rem); font-weight: 200; line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.wwl-count__stamp { display: inline-block; border: 1.2px solid currentColor; padding: 3px 8px; margin: 12px 0 10px; }
.wwl-count--source-based .wwl-count__stamp { color: var(--ink-2); }
.wwl-count--gated-original-data .wwl-count__stamp { color: var(--hold); }
.wwl-count--measured .wwl-count__stamp { color: var(--keep); }
.wwl-count p { color: var(--ink-2); font-size: 1rem; line-height: 1.45; }

/* HOME: instruments */
.wwl-instruments { background: radial-gradient(44vw 30vw at 8% 110%, rgba(190, 40, 28, 0.26), transparent 70%), var(--room); color: var(--on-room); }
.wwl-instruments__inner { max-width: var(--wide); margin: 0 auto; padding: clamp(46px, 6vw, 84px) var(--gutter); }
.wwl-instruments h2 { margin-bottom: clamp(20px, 3vw, 34px); }
.wwl-instruments ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--room-3); border: 1px solid var(--room-3); }
.wwl-instrument { display: flex; flex-direction: column; gap: 14px; height: 100%; background: var(--room); padding: clamp(18px, 2.4vw, 30px); text-decoration: none; color: var(--on-room); }
.wwl-instrument:hover { background: var(--room-2); color: var(--on-room); }
.wwl-instrument:focus-visible { outline-color: var(--marker-room); outline-offset: -3px; }
.wwl-instrument__formula { color: var(--amber); text-transform: none; letter-spacing: 0.02em; font-size: 0.82rem; }
.wwl-instrument__name { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 200; line-height: 1.12; letter-spacing: -0.01em; }

/* HOME: body copy */
.wwl-home-body { max-width: var(--wide); margin: 0 auto; padding: clamp(50px, 7vw, 100px) var(--gutter); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); }
.wwl-home-body__label p { font-size: clamp(1.75rem, 3.4vw, 2.7rem); font-weight: 200; letter-spacing: -0.015em; line-height: 1.1; position: sticky; top: 24px; }
.wwl-home-body .wwl-prose { max-width: 700px; }

/* Stamps */
.wwl-stamp { display: inline-block; border: 1px solid currentColor; padding: 2px 7px; white-space: nowrap; font-size: 0.74rem; }
.wwl-stamp--source-based { color: var(--ink-2); }
.wwl-stamp--gated-original-data { color: var(--hold); }
.wwl-stamp--measured { color: var(--keep); }
.wwl-stamp--stub { color: var(--marker); }

/* Ledger rows */
.wwl-ledger { border-top: 1px solid var(--ink); }
.wwl-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 24px; padding: 13px 0; border-bottom: 1px solid var(--rule); position: relative; }
.wwl-ledger a { text-decoration: none; font-size: 1.27rem; line-height: 1.26; letter-spacing: -0.005em; }
.wwl-ledger a::after { content: ""; position: absolute; inset: 0; }
.wwl-ledger a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.wwl-ledger li:has(a:focus-visible) { outline: 2px solid var(--marker); outline-offset: 2px; }
.wwl-ledger a:focus-visible { outline: 0; }
.wwl-ledger__meta { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 0.74rem; }

/* Headers on inner pages */
.wwl-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 9px; }
.wwl-crumbs li + li::before { content: "/"; margin-right: 9px; color: var(--ink-3); }
.wwl-crumbs a { text-decoration: none; color: var(--ink-2); }
.wwl-crumbs a:hover { color: var(--marker); }
.wwl-crumbs span[aria-current] { color: var(--ink-3); display: inline-block; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.wwl-entry__crumbs { max-width: var(--wide); margin-inline: auto; padding: 18px var(--gutter) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.wwl-entry__head { max-width: var(--wide); margin-inline: auto; padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(20px, 3vw, 36px); }
.wwl-entry__head h1 { max-width: 19ch; }
.wwl-h1-main { display: block; }
.wwl-h1-sub { display: block; font-size: 0.5em; line-height: 1.16; letter-spacing: -0.008em; color: var(--ink-2); margin-top: 0.42em; }

/* Comparison diptych */
.wwl-diptych { margin-top: clamp(16px, 2.4vw, 28px); }
.wwl-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; font-size: clamp(2.4rem, 5.6vw, 5.2rem); line-height: 1; }
.wwl-vs__a, .wwl-vs__b { padding: clamp(30px, 4.6vw, 68px) clamp(44px, 6vw, 92px); display: flex; align-items: center; min-height: clamp(150px, 15vw, 226px); }
.wwl-vs__a { background: var(--tint); justify-content: flex-end; text-align: right; padding-left: var(--edge); }
.wwl-vs__b { background: var(--room); color: var(--on-room); padding-right: var(--edge); }
.wwl-vs__a, .wwl-vs__b { grid-row: 1; }
.wwl-vs__a { grid-column: 1; }
.wwl-vs__b { grid-column: 2; }
.wwl-vs__mark { grid-row: 1; grid-column: 1 / -1; justify-self: center; align-self: center; position: relative; z-index: 1; width: clamp(50px, 5.4vw, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--marker-solid); color: #fff; display: grid; place-items: center; font: 500 clamp(0.82rem, 1.1vw, 1rem) var(--mono); letter-spacing: 0.04em; text-transform: none; }
.wwl-vs__rest { grid-column: 1 / -1; font-size: clamp(1.4rem, 2.8vw, 2.4rem); line-height: 1.12; padding: clamp(18px, 2.4vw, 30px) var(--edge) 0; color: var(--ink); }

/* Answer, proof slip */
.wwl-entry__top { max-width: var(--wide); margin-inline: auto; padding: clamp(18px, 3vw, 40px) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.wwl-answer { padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 38px);
  background:
    linear-gradient(var(--marker), var(--marker)) 0 0 / 30px 2px no-repeat, linear-gradient(var(--marker), var(--marker)) 0 0 / 2px 30px no-repeat,
    linear-gradient(var(--marker), var(--marker)) 100% 100% / 30px 2px no-repeat, linear-gradient(var(--marker), var(--marker)) 100% 100% / 2px 30px no-repeat; }
.wwl-answer__label { color: var(--marker); margin-bottom: 10px; }
.wwl-answer__text { font-size: clamp(1.26rem, 1.85vw, 1.6rem); line-height: 1.36; letter-spacing: -0.006em; }
.wwl-disclosure { font: 0.86rem/1.5 var(--sans); color: var(--ink-3); }
.wwl-entry__top .wwl-disclosure { margin: 14px 0 0 clamp(22px, 3vw, 38px); }
.wwl-disclosure--head { margin-top: 14px; max-width: 72ch; }
.wwl-slip { background: var(--sheet); border: 1px solid var(--rule); padding: 18px 20px; font: 0.9rem/1.5 var(--sans); color: var(--ink-2); }
.wwl-slip__stamp { display: inline-block; font: 500 0.78rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1.6px solid currentColor; padding: 4px 9px; transform: rotate(-2deg); margin-bottom: 14px; color: var(--ink); }
.wwl-slip--gated-original-data .wwl-slip__stamp { color: var(--hold); }
.wwl-slip--measured .wwl-slip__stamp { color: var(--keep); }
.wwl-slip--stub .wwl-slip__stamp { color: var(--marker); }
.wwl-slip dl { border-top: 1px solid var(--rule); margin-bottom: 12px; }
.wwl-slip dl div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.wwl-slip dt { font-size: 0.74rem; color: var(--ink-3); align-self: center; }
.wwl-slip dd { color: var(--ink); text-align: right; }

/* Article grid */
.wwl-entry__grid { max-width: var(--wide); margin-inline: auto; padding: clamp(32px, 5vw, 64px) var(--gutter) 0; display: grid; grid-template-columns: 236px minmax(0, 660px); gap: clamp(32px, 5vw, 76px); align-items: start; }
.wwl-entry__grid--solo { grid-template-columns: minmax(0, 700px); }
.wwl-toc { position: sticky; top: 22px; max-height: calc(100vh - 44px); overflow-y: auto; font: 0.9rem/1.35 var(--sans); }
.wwl-toc summary { color: var(--ink-3); cursor: default; list-style: none; margin-bottom: 10px; }
.wwl-toc summary::-webkit-details-marker { display: none; }
.wwl-toc__current { display: none; }
.wwl-toc ol { counter-reset: t; }
.wwl-toc li { counter-increment: t; }
.wwl-toc a { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); padding: 6px 0; color: var(--ink-2); text-decoration: none; border-top: 1px solid var(--rule); }
.wwl-toc a::before { content: counter(t, decimal-leading-zero); font: 500 0.68rem/1.7 var(--mono); color: var(--ink-3); }
.wwl-toc a:hover, .wwl-toc a.is-current { color: var(--marker); }
.wwl-toc a.is-current::before { color: var(--marker); }
@media (max-width: 1039px) {
  .wwl-entry__top { grid-template-columns: minmax(0, 1fr); }
  .wwl-entry__grid { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .wwl-entry__top .wwl-disclosure { margin-left: 0; }
  .wwl-toc { position: sticky; top: 0; z-index: 12; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); background: var(--paper); border-block: 1px solid var(--rule); max-height: 70vh; }
  .wwl-toc summary { cursor: pointer; margin: 0; padding: 12px 0; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
  .wwl-toc summary::after { content: "+"; color: var(--marker); font-size: 1rem; }
  .wwl-toc details[open] summary::after { content: "\2212"; }
  .wwl-toc__current { display: block; color: var(--ink); text-transform: none; letter-spacing: 0; font: 0.92rem/1.2 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
  .wwl-toc__label { flex: none; }
  .wwl-toc ol { padding-bottom: 8px; }
}

/* Prose */
.wwl-prose { counter-reset: sec; }
.wwl-prose > * + * { margin-top: 1em; }
.wwl-prose h2 { margin-top: 2.1em; counter-increment: sec; position: relative; }
.wwl-entry .wwl-prose h2::before { content: counter(sec, decimal-leading-zero) / ""; display: block; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.08em; color: var(--marker); margin-bottom: 12px; }
.wwl-prose h3 { margin-top: 1.7em; }
.wwl-prose h2 + *, .wwl-prose h3 + * { margin-top: 0.7em; }
.wwl-prose > :first-child { margin-top: 0; }
.wwl-prose ul { padding-left: 1.2em; list-style: square; }
.wwl-prose ul li::marker { color: var(--marker); }
.wwl-prose ol { counter-reset: step; }
.wwl-prose ol > li { counter-increment: step; position: relative; padding: 10px 0 10px 2.7em; border-top: 1px solid var(--rule); }
.wwl-prose ol > li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; font: 500 0.78rem/1.9 var(--mono); color: var(--marker); }
.wwl-prose ol > li:last-child { border-bottom: 1px solid var(--rule); }
.wwl-prose ul li + li { margin-top: 0.42em; }
.wwl-prose blockquote { border-left: 1px solid var(--rule); padding-left: 18px; color: var(--ink-2); font-style: italic; }
.wwl-rows { border-top: 1px solid var(--ink); }
.wwl-rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3px 22px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.wwl-rows--stack > div { grid-template-columns: minmax(0, 1fr); }
.wwl-rows dt { font-weight: 600; line-height: 1.34; }
.wwl-rows dd { color: var(--ink-2); line-height: 1.42; font-size: 1.04rem; }
.wwl-cta-inline { border-bottom: 1px dashed var(--ink-3); }

/* Tables */
.wwl-table { overflow-x: auto; border: 1px solid var(--rule); max-width: 100%;
  background: linear-gradient(to left, transparent, var(--sheet) 70%) left / 36px 100% no-repeat local, linear-gradient(to right, transparent, var(--sheet) 70%) right / 36px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), transparent) right / 14px 100% no-repeat scroll, var(--sheet); }
@media (min-width: 1040px) { .wwl-entry__grid:not(.wwl-entry__grid--solo) .wwl-prose .wwl-table { width: min(930px, calc(100vw - 2 * var(--gutter) - 236px - clamp(32px, 5vw, 76px))); max-width: none; } }
.wwl-table table { width: 100%; min-width: 580px; border-collapse: collapse; font: 0.92rem/1.42 var(--sans); font-variant-numeric: tabular-nums; }
.wwl-table th, .wwl-table td { padding: 11px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.wwl-table thead th, .wwl-table thead td { font: 500 0.69rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-room); background: var(--room); border-bottom: 0; vertical-align: bottom; }
:root[data-theme="dark"] .wwl-table thead th, :root[data-theme="dark"] .wwl-table thead td { background: #0b0c0d; }
.wwl-table tbody td:first-child { font-weight: 600; background: var(--sheet); position: sticky; left: 0; }
.wwl-table tbody tr:hover td { background: var(--tint); }
.wwl-table tr:last-child td { border-bottom: 0; }

/* Callouts */
.wwl-callout { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; background: var(--sheet); border: 1px solid var(--rule); padding: 15px 18px; }
.wwl-callout::before { content: ""; grid-row: 1 / span 2; width: 30px; height: 30px; background: currentColor; -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.wwl-callout__label { margin-bottom: 3px; }
.wwl-callout--keep { color: var(--keep); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M22 4C11 3 4 9 4 20c0 11 8 17 17 16 10 0 15-8 15-16S30 5 18 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wwl-callout--hold { color: var(--hold); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 13c1-6 16-8 17 1 0 7-9 7-9 14M20 34v.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wwl-callout--reject { color: var(--marker); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M8 7c9 8 17 17 25 26M33 6C24 14 15 24 6 34' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wwl-callout--note { color: var(--ink-3); --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 12V6h7M27 6h7v6M34 28v6h-7M13 34H6v-6' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); }
.wwl-callout p:not(.wwl-callout__label) { color: var(--ink); grid-column: 2; }

/* Affiliate */
.wwl-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-block: 1.4em; }
.wwl-cta { background: var(--sheet); border: 1px solid var(--rule); padding: 16px 18px; font: 0.92rem/1.45 var(--sans); }
.wwl-cta__name { margin-bottom: 8px; color: var(--ink-2); }
.wwl-cta__note { font-size: 0.82rem; color: var(--ink-3); margin-top: 8px; }
.wwl-cta--pending { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-2); }

/* Results block */
.wwl-results { background: var(--room); color: var(--on-room); padding: 24px 26px; margin-bottom: 30px; }
.wwl-results h2 { font-size: 1.5rem; margin-bottom: 14px; }
.wwl-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }
.wwl-results dt { font: 500 0.68rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-room-2); }
.wwl-results dd { margin-top: 4px; font-size: 2.5rem; font-weight: 200; line-height: 1.05; }
.wwl-results__run { font: 500 0.72rem var(--mono); color: var(--on-room-2); margin-top: 14px; }
.wwl-results--planned { background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); }
.wwl-results--planned li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 1rem; flex-wrap: wrap; }

/* End matter */
.wwl-next { display: block; margin-top: 2.6em; background: var(--room); color: var(--on-room); padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px); text-decoration: none; font-size: clamp(1.45rem, 2.8vw, 2.2rem); font-weight: 200; line-height: 1.14; letter-spacing: -0.01em; }
.wwl-next:hover { color: var(--on-room); background: var(--marker-solid); }
.wwl-next:focus-visible { outline-offset: 3px; }
.wwl-next__label { display: block; color: var(--amber); margin-bottom: 9px; }
.wwl-next:hover .wwl-next__label { color: #fff; }
.wwl-sources, .wwl-related { margin-top: 3em; }
.wwl-sources h2, .wwl-related h2 { font-size: 1.6rem; margin-bottom: 12px; }
.wwl-sources ol { counter-reset: s; font: 0.92rem/1.42 var(--sans); color: var(--ink-2); column-gap: 32px; }
@media (min-width: 760px) { .wwl-sources ol { columns: 2; } }
.wwl-sources li { counter-increment: s; break-inside: avoid; padding: 7px 0 7px 2.2em; position: relative; border-top: 1px solid var(--rule); }
.wwl-sources li::before { content: counter(s); position: absolute; left: 0; font: 500 0.7rem/1.9 var(--mono); color: var(--ink-3); }
.wwl-sources span { display: block; color: var(--ink-3); font-size: 0.86em; }
.wwl-entry__end { padding-bottom: clamp(52px, 7vw, 100px); }

/* Hub */
.wwl-hub__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); min-height: clamp(320px, 38vw, 540px); border-bottom: 1px solid var(--rule); }
.wwl-hub__copy { padding: 18px clamp(24px, 4vw, 60px) clamp(30px, 4vw, 56px) var(--edge); display: flex; flex-direction: column; }
.wwl-hub__copy h1 { margin-top: auto; padding-top: clamp(32px, 5vw, 70px); font-size: clamp(2.5rem, 5.2vw, 4.9rem); }
.wwl-hub__intro { font-size: clamp(1.16rem, 1.6vw, 1.34rem); line-height: 1.4; color: var(--ink-2); margin-top: 18px; max-width: 36em; }
.wwl-hub__count { color: var(--ink-3); margin-top: 16px; }
.wwl-hub__art { position: relative; background: #0a0a0b; color: var(--amber); overflow: hidden; }
.wwl-hub__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.9); }
.wwl-hub__no { position: absolute; left: clamp(14px, 2vw, 26px); bottom: clamp(2px, 1vw, 12px); font-size: clamp(4.6rem, 11vw, 10rem); font-weight: 200; line-height: 1; letter-spacing: -0.03em; }
.wwl-hub__cap { position: absolute; right: 0; bottom: 0; background: rgba(10, 10, 11, 0.72); padding: 4px 9px; font: 500 0.74rem var(--mono); color: var(--on-room); letter-spacing: 0.03em; }
.wwl-sleeve { padding-top: clamp(28px, 4vw, 52px); }
.wwl-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: clamp(20px, 3vw, 34px); }
.wwl-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); padding: 8px 11px; cursor: pointer; }
.wwl-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.wwl-chip span { color: var(--ink-3); }
.wwl-chip:hover { border-color: var(--marker); }
.wwl-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.wwl-chip:has(input:checked) span { color: var(--paper); opacity: 0.7; }
.wwl-chip:has(input:focus-visible) { outline: 2px solid var(--marker); outline-offset: 2px; }
.wwl-sleeve:has(input[value="buying-guide"]:checked) .wwl-hub__group:not([data-f="buying-guide"]),
.wwl-sleeve:has(input[value="comparison"]:checked) .wwl-hub__group:not([data-f="comparison"]),
.wwl-sleeve:has(input[value="review"]:checked) .wwl-hub__group:not([data-f="review"]),
.wwl-sleeve:has(input[value="pricing"]:checked) .wwl-hub__group:not([data-f="pricing"]),
.wwl-sleeve:has(input[value="guide"]:checked) .wwl-hub__group:not([data-f="guide"]),
.wwl-sleeve:has(input[value="news"]:checked) .wwl-hub__group:not([data-f="news"]),
.wwl-sleeve:has(input[value="tool"]:checked) .wwl-hub__group:not([data-f="tool"]) { display: none; }
.wwl-hub__groups { counter-reset: row; }
.wwl-hub__group { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px clamp(20px, 3vw, 44px); padding-bottom: clamp(26px, 3.4vw, 44px); }
.wwl-hub__group h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); position: sticky; top: 18px; align-self: start; }
.wwl-hub__group li { counter-increment: row; grid-template-columns: 2.6em minmax(0, 1fr) auto; }
.wwl-hub__group li::before { content: counter(row, decimal-leading-zero) / ""; font: 500 0.68rem/1.9 var(--mono); color: var(--ink-3); }
.wwl-hub__guide { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px clamp(20px, 3vw, 44px); border-top: 1px solid var(--ink); padding-block: clamp(30px, 4vw, 56px); }
.wwl-hub__guide-label { font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 200; letter-spacing: -0.01em; line-height: 1.12; }
.wwl-hub__guide .wwl-prose { max-width: 800px; }
.wwl-hub__others { padding-block: 20px clamp(44px, 6vw, 78px); border-top: 1px solid var(--ink); }
.wwl-hub__others h2 { font-size: 1.2rem; margin-bottom: 10px; font-weight: 400; }
.wwl-hub__others ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* Trust and legal */
.wwl-trust__grid { max-width: var(--wide); margin-inline: auto; padding: clamp(10px, 2vw, 24px) var(--gutter) clamp(52px, 7vw, 100px); display: grid; grid-template-columns: 236px minmax(0, 760px); gap: clamp(32px, 5vw, 76px); }
.wwl-trust__nav { position: sticky; top: 22px; align-self: start; font: 0.92rem/1.35 var(--sans); }
.wwl-trust__nav a { display: block; padding: 7px 0; text-decoration: none; color: var(--ink-2); border-top: 1px solid var(--rule); }
.wwl-trust__nav a[aria-current] { color: var(--marker); font-weight: 600; }
.wwl-metaline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; color: var(--ink-3); font: 500 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.wwl-trust .wwl-prose .wwl-disclosure { max-width: none; }
.wwl-trust h1 { font-size: clamp(2rem, 9vw, 5.4rem); overflow-wrap: normal; }
@media (max-width: 900px) {
  .wwl-trust__grid { grid-template-columns: minmax(0, 1fr); }
  .wwl-trust__nav { display: none; }
}

/* Tools */
.wwl-tool__intro { font-size: 1.22rem; line-height: 1.42; color: var(--ink-2); margin-top: 18px; max-width: 42em; }
.wwl-tool { max-width: var(--wide); margin-inline: auto; padding: 8px var(--gutter) 0; }
.wwl-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.wwl-form__inputs { display: grid; gap: 26px; background: var(--sheet); border: 1px solid var(--rule); padding: clamp(18px, 2.6vw, 34px); font-family: var(--sans); }
.wwl-form fieldset { display: grid; gap: 13px; }
.wwl-form legend { font: 200 1.65rem/1.15 var(--serif); letter-spacing: -0.01em; margin-bottom: 8px; padding: 0; }
.wwl-form__help { font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.wwl-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 12px 16px; }
.wwl-form label { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; font-size: 0.9rem; font-weight: 550; line-height: 1.28; }
.wwl-form input, .wwl-form select { font: 400 16px var(--sans); padding: 10px 11px; border: 1px solid var(--ink-3); background: var(--paper); width: 100%; border-radius: 0; color: var(--ink); }
.wwl-form [hidden] { display: none; }
.wwl-form .wwl-check { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; font-weight: 450; min-height: 32px; }
.wwl-form .wwl-check input { width: 18px; height: 18px; flex: none; padding: 0; accent-color: var(--marker-solid); }
.wwl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 0 16px; }
.wwl-form__row--score { padding-top: 13px; border-top: 1px solid var(--rule); }
.wwl-form__row--score:first-child { padding-top: 0; border-top: 0; }
.wwl-form .wwl-button:disabled { opacity: 0.45; cursor: not-allowed; }
.wwl-form .wwl-button:disabled:hover { background: none; color: var(--ink); border-color: var(--ink); }
.wwl-result { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: radial-gradient(40vw 22vw at 100% 0, rgba(190, 40, 28, 0.26), transparent 70%), var(--room); color: var(--on-room); padding: clamp(18px, 2.2vw, 28px); font-family: var(--sans); font-size: 0.98rem; line-height: 1.45; }
.wwl-result__label { color: var(--amber); margin-bottom: 10px; }
.wwl-result a { color: var(--on-room); }
.wwl-rcard { border-top: 1px solid var(--room-3); padding: 14px 0 12px; }
.wwl-rcard__name { font-weight: 600; }
.wwl-rcard__big { font: 200 clamp(2.2rem, 3.8vw, 3.2rem)/1.06 var(--serif); letter-spacing: -0.02em; margin: 3px 0 2px; }
.wwl-rcard__big.is-text { font: 400 1.05rem/1.35 var(--sans); letter-spacing: 0; color: var(--amber); }
.wwl-rcard__label { color: var(--on-room-2); font-size: 0.86rem; }
.wwl-rcard dl { margin-top: 8px; }
.wwl-rcard dl div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-top: 1px dotted var(--room-3); }
.wwl-rcard dt { font-size: 0.74rem; color: var(--on-room-2); align-self: center; }
.wwl-rcard dd { text-align: right; font-variant-numeric: tabular-nums; }
.wwl-rcard__note { color: var(--on-room-2); font-size: 0.84rem; margin-top: 7px; }
.wwl-readout { color: var(--amber); margin-top: 6px; }
.wwl-result__foot { color: var(--on-room-2); font-size: 0.84rem; border-top: 1px solid var(--room-3); padding-top: 11px; }
@media (max-width: 960px) {
  .wwl-form { grid-template-columns: minmax(0, 1fr); }
  .wwl-result { position: static; max-height: none; }
}

/* Search dialog */
.wwl-search { width: min(680px, calc(100vw - 24px)); max-height: min(70vh, 620px); padding: 0; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); margin: 10vh auto auto; }
.wwl-search::backdrop { background: rgba(10, 10, 11, 0.62); }
.wwl-search__row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--sheet); }
.wwl-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: 200 1.65rem var(--serif); padding: 8px 0; outline: 0; }
.wwl-search input::-webkit-search-cancel-button { display: none; }
.wwl-search__close { background: none; border: 0; color: var(--ink-3); font: 500 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.wwl-search ul { padding: 4px 14px 12px; }
.wwl-search li a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 1.1rem; line-height: 1.26; }
.wwl-search li a span { font: 500 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.wwl-search li a:focus-visible { outline-offset: 0; color: var(--marker); }
.wwl-search__none { padding: 16px 0; color: var(--ink-2); }

/* 404 */
.wwl-404 { max-width: 1060px; margin: 0 auto; padding: clamp(52px, 10vw, 130px) var(--gutter); display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 6vw, 72px); align-items: center; }
.wwl-404__frame { position: relative; aspect-ratio: 3 / 2; background: #0a0a0b; color: var(--amber); font: 500 0.82rem var(--mono); }
.wwl-404__frame span { position: absolute; left: 10px; bottom: 7px; }
.wwl-404__frame .wwl-mark { color: var(--marker-room); }
.wwl-404__frame .wwl-mark path { stroke-dashoffset: 0; opacity: 1; }
.wwl-404 h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); margin-top: 12px; }
.wwl-404 h1 + p { margin-top: 14px; color: var(--ink-2); }
.wwl-404__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }

/* Footer */
.wwl-foot { background: var(--room); color: var(--on-room); overflow: hidden; }
.wwl-foot a { color: var(--on-room); }
.wwl-foot a:hover { color: var(--marker-room); }
.wwl-foot :focus-visible { outline-color: var(--marker-room); }
.wwl-foot__inner { max-width: var(--wide); margin: 0 auto; padding: 36px var(--gutter) 26px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.wwl-foot__lead p { color: var(--on-room-2); font: 0.98rem/1.5 var(--sans); max-width: 30em; }
.wwl-foot h2 { color: var(--amber); margin-bottom: 10px; letter-spacing: 0.08em; }
.wwl-foot__col ul { display: grid; gap: 3px; font: 0.95rem/1.5 var(--sans); }
.wwl-foot__col a { text-decoration: none; }
.wwl-foot__sign { padding-bottom: 0.14em; font-size: 10.4vw; font-weight: 200; line-height: 0.9; letter-spacing: -0.035em; white-space: nowrap; text-align: center; color: var(--on-room); padding-top: 6px; }
.wwl-foot__sign b { font-weight: 200; color: var(--marker-room); }
.wwl-foot__legal { max-width: var(--wide); margin: 0 auto; padding: 14px var(--gutter) 22px; display: flex; justify-content: space-between; gap: 8px 32px; flex-wrap: wrap; font: 0.84rem/1.5 var(--sans); color: var(--on-room-2); }

@media (max-width: 860px) {
  .wwl-hero__top { grid-template-columns: minmax(0, 1fr); }
  .wwl-hero__big { font-size: clamp(3rem, 13.4vw, 5rem); }
  .wwl-sheet { padding-inline: 0; }
  .wwl-sheet__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(74%, 300px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--room-3) transparent; }
  .wwl-sheet__grid li { scroll-snap-align: start; }
  .wwl-sheet__cap { padding-inline: var(--gutter); }
  .wwl-chooser, .wwl-counts__head, .wwl-home-body { grid-template-columns: minmax(0, 1fr); }
  .wwl-home-body__label p { position: static; }
  .wwl-counts__grid { grid-template-columns: minmax(0, 1fr); }
  .wwl-count { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .wwl-count + .wwl-count { padding-left: 0; border-left: 0; }
  .wwl-count__n { grid-row: 1 / span 2; font-size: 4.6rem; }
  .wwl-count__stamp { justify-self: start; margin: 4px 0 8px; }
  .wwl-instruments ul { grid-template-columns: minmax(0, 1fr); }
  .wwl-hub__head { grid-template-columns: minmax(0, 1fr); }
  .wwl-hub__art { aspect-ratio: 16 / 9; order: -1; }
  .wwl-hub__copy { padding-inline: var(--gutter); padding-top: 14px; }
  .wwl-hub__group, .wwl-hub__guide { grid-template-columns: minmax(0, 1fr); }
  .wwl-hub__group h2 { position: static; }
  .wwl-hub__group li { grid-template-columns: 3em minmax(0, 1fr); }
  .wwl-hub__group .wwl-ledger__meta { grid-column: 2; }
  .wwl-ledger li { grid-template-columns: minmax(0, 1fr); }
  .wwl-rows > div { grid-template-columns: minmax(0, 1fr); }
  .wwl-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wwl-foot__lead { grid-column: 1 / -1; }
  .wwl-404 { grid-template-columns: minmax(0, 1fr); }
  .wwl-404__frame { max-width: 240px; }
  .wwl-vs { font-size: clamp(2.3rem, 10.5vw, 3.6rem); grid-template-columns: minmax(0, 1fr); }
  .wwl-vs__a, .wwl-vs__b { padding: 32px var(--gutter); min-height: 0; }
  .wwl-vs__a { justify-content: flex-start; text-align: left; padding-bottom: 42px; }
  .wwl-vs__b { padding-top: 42px; }
  .wwl-vs__a, .wwl-vs__b, .wwl-vs__mark { grid-row: auto; grid-column: auto; }
  .wwl-vs__mark { justify-self: end; margin: -25px var(--gutter) -25px 0; width: 50px; }
  .wwl-crumbs li:last-child { display: none; }
  .wwl-vs__rest { padding-inline: var(--gutter); }
}

@media print {
  .wwl-head, .wwl-foot, .wwl-toc, .wwl-ctas, .wwl-progress { display: none; }
  body { background: #fff; color: #000; }
}

/* Interactive layer */
html:not(.js) .wwl-head__bar { flex-wrap: wrap; }
.wwl-sheet__grid:has(.wwl-frame:hover, .wwl-frame:focus-visible) .is-picked:not(:hover, :focus-visible) .wwl-mark path { opacity: 0; stroke-dashoffset: 1; animation: none; }
.wwl-chip { font-size: 0.8rem; padding: 9px 13px; }
.wwl-slip dt { font-size: 0.8rem; }
.wwl-hub__head--small { min-height: clamp(220px, 22vw, 300px); }
.wwl-hub__head--small .wwl-hub__copy h1 { padding-top: clamp(24px, 3vw, 40px); }
.wwl-textbtn { background: none; border: 0; padding: 4px 0; color: inherit; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.wwl-textbtn:hover { color: var(--marker); }

/* Trial checklist */
.wwl-checkbar { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; font: 0.92rem/1.4 var(--sans); }
.wwl-checkbar__count { color: var(--marker); font-weight: 600; font-variant-numeric: tabular-nums; }
.wwl-checkbar__actions { color: var(--ink-2); display: flex; gap: 14px; }
.wwl-prose .wwl-checklist { margin-top: 10px; }
.js .wwl-prose .wwl-checklist > li { padding-left: 2.9em; }
.js .wwl-prose .wwl-checklist > li::before { content: none; }
.wwl-tick { position: absolute; left: 0; top: 11px; width: 28px; height: 28px; padding: 0; background: var(--sheet); border: 1.4px solid var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.wwl-tick:hover { border-color: var(--marker); }
.wwl-tick[aria-pressed="true"] { border-color: var(--marker); }
.wwl-tick[aria-pressed="true"]::after { content: ""; width: 22px; height: 22px; background: var(--marker); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c3 3 5 5 7 8C13 13 17 7 22 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13c3 3 5 5 7 8C13 13 17 7 22 3' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wwl-checklist li.is-done { color: var(--ink-3); }

/* Charts in the readout */
.wwl-chart { margin: 0 0 14px; }
.wwl-chart__svg { width: 100%; height: auto; overflow: visible; }
.wwl-chart__grid { stroke: var(--room-3); stroke-width: 1; }
.wwl-chart__tick { fill: var(--on-room-2); font: 500 11px var(--mono); }
.wwl-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wwl-c0 { stroke: var(--amber); }
.wwl-c1 { stroke: var(--on-room); }
.wwl-c2 { stroke: #8fc5e0; stroke-dasharray: 7 4; }
.wwl-c3 { stroke: #9ed6b3; stroke-dasharray: 2 4; }
.wwl-c4 { stroke: #d9b3ec; stroke-dasharray: 10 3 2 3; }
.wwl-c5 { stroke: #ffffff; stroke-dasharray: 3 3; }
.wwl-chart__you { stroke: var(--marker-room); stroke-width: 1.2; stroke-dasharray: 3 3; }
.wwl-chart__mark { fill: none; stroke: var(--marker-room); stroke-width: 7; stroke-linecap: round; }
.wwl-chart__legend { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 0.82rem; color: var(--on-room-2); margin-top: 4px; }
.wwl-chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .wwl-chart__mark { stroke-dasharray: 1; animation: wwl-draw 0.5s ease-out both; }
}
.wwl-ci { position: relative; height: 10px; margin: 9px 0 3px; background: var(--room-3); }
.wwl-ci__band { position: absolute; inset-block: 0; background: var(--amber); opacity: 0.55; }
.wwl-ci__pt { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--on-room); }

/* Phone: pinned readout */
.wwl-meter { position: fixed; inset: auto 0 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px var(--gutter); background: var(--room); color: var(--on-room); text-decoration: none; font: 0.92rem/1.3 var(--sans); border-top: 1px solid var(--room-3); }
.wwl-meter:hover { color: var(--on-room); }
.wwl-meter__go { flex: none; color: var(--amber); font: 500 0.74rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.wwl-year { color: var(--ink-2); background: var(--tint); padding: 8px 12px; }
.wwl-toolrows { display: grid; gap: 22px; }

/* Phone: comparison tables as cards */
@media (max-width: 860px) {
  .wwl-table--cards { overflow: visible; background: none; border: 0; }
  .wwl-table--cards table { display: block; min-width: 0; }
  .wwl-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wwl-table--cards tbody, .wwl-table--cards tr, .wwl-table--cards td { display: block; }
  .wwl-table--cards tr { background: var(--sheet); border: 1px solid var(--rule); margin-bottom: 10px; }
  .wwl-table--cards td { border-bottom: 0; padding: 8px 13px; }
  .wwl-table--cards tbody td:first-child { position: static; background: var(--tint); font: 600 1.06rem/1.3 var(--serif); padding: 10px 13px; }
  .wwl-table--cards tbody tr:hover td { background: none; }
  .wwl-table--cards tbody tr:hover td:first-child { background: var(--tint); }
  .wwl-table--cards tbody td:not(:first-child)::before { content: attr(data-th); display: block; font: 500 0.72rem/1.4 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
}

@media (max-width: 520px) { .wwl-chart__tick { font-size: 14px; } }