/* ==========================================================================
REVIEWS — /reviews only.
Load AFTER system.css and resources.css:
resources.css is loaded for .page-hero, .slots/.slot and .panel-note, which
this page shares with /courses and /content rather than redefining. Only the
two components that are genuinely new to this page live here.
Tokens, type, buttons, .sec, .slab, .cta, the footer and the nav all come
from system.css. There are no hardcoded colour values in this file.
========================================================================== */
/* ---- SECTION HEADS ------------------------------------------------------- */
.work-head{max-width:64ch}
.work-head h2{margin-top:.24em}
.work-head .lede{margin-top:18px}
/* ---- HEAD RAIL -----------------------------------------------------------
Head in a left-hand column beside the rows instead of a band above them.
Same device as .leaks-grid on the trade pages, and it is here for the same
reason: a head band costs the section its own height twice over, once for
the head and again for the 40px under it, and both of these sections were
running past the bottom of a 900px screen with it.
Measured at 1440: the screenshot wall went 1314 -> 834 and the six build
parts went 1059 -> ~860. Nothing was cut to get there.
The rail is narrower than the rows (.96 against 1.4) because it holds three
short lines and they should not run 60 characters wide next to a card grid.
Sticky so it stays with the rows on the way past; top clears the fixed nav.
Single column below 1000px: stacked, a rail is just a head band with extra
steps, and the rows need the whole width by then. */
.rail{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,38px);align-items:start}
@media (min-width:1000px){
.rail{grid-template-columns:minmax(0,.96fr) minmax(0,1.4fr);gap:clamp(34px,4vw,58px)}
.rail-head{position:sticky;top:clamp(92px,9vw,124px)}
}
/* The 64ch cap never binds inside a rail this narrow, so the lede would run
the rail's full width regardless; dropping it stops the cap from fighting
the grid track at the wide end. Also kills the top margin the grid gap has
already paid for. */
.rail .work-head{max-width:none}
.rail .parts,.rail .shots{margin-top:0}
/* The build section is the one place a rail makes things WORSE and it is worth
writing down. Six cards want to stay 3 across; a rail takes 350px off the
row, the cards drop to 264 wide, the copy in them reflows longer and the
section goes 1059 -> 1144. So that one keeps a head band and pays for it by
running a one-line lede instead of three. Measured, not guessed. */
/* No cap. At 64ch the h2 wraps to two lines and costs 44px the section does
not have; across the full row it is one line. */
.work-head.is-tight{max-width:none}
.work-head.is-tight .lede{margin-top:12px}
/* ---- THE BUILD -----------------------------------------------------------
Six parts, each with the state that counts as finished.
The "done when" line is the whole point of the component and the reason
this is not a plain list: an agency deliverable is usually a noun with no
test attached to it, and a contractor has no way to tell a finished one
from an unfinished one. Every part here ends in something he can go and
check himself. */
.parts{
display:grid;grid-template-columns:1fr;gap:clamp(14px,1.8vw,22px);
margin-top:clamp(26px,3vw,38px);
}
@media (min-width:720px){.parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1060px){.parts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.part{
display:flex;flex-direction:column;
padding:clamp(20px,2.2vw,28px);
border:1px solid var(--line);
background:color-mix(in srgb,var(--ox-deep) 32%,transparent);
}
.part h3{font-size:clamp(18px,1.8vw,21px);margin:.5em 0 .45em}
.part p{margin:0;font-size:14.5px;line-height:1.6;color:var(--sand-2)}
/* Pushed to the bottom of the card so the test line sits on a common baseline
across the row even though the descriptions run different lengths. The rule
above it is the divider — a second border would box a box.
Selector is `.part p.part-done`, not `.part-done`. It has to outrank the
`.part p` rule directly above, which is (0,1,1); a bare `.part-done` is
(0,1,0) and loses, which silently killed both the auto margin and the font
size and left the third card in each row 23px out of line. */
.part p.part-done{
margin-top:auto;padding-top:14px;
border-top:1px solid var(--line);
font-size:13.5px;line-height:1.5;color:var(--sand-2);
}
.part-done b{
display:block;margin-bottom:4px;
font-weight:800;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent);
}
/* ---- TEARDOWNS -----------------------------------------------------------
Rules between rows rather than a fourth grid of cards. The page already has
two card grids on it; a third would turn a sequence of arguments into
wallpaper. */
.tears{
list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
border-top:1px solid var(--line);
}
.tears li{border-bottom:1px solid var(--line)}
/* The grid is declared on the , not the