/* /method/ (page builder for about + method, 14 Oct 2026). Tokens, type and patterns come from site.css; nothing here sets a colour literal.
   Layout: guide header recreated from Speak's about hero (copy column at x = 112, a rounded photo frame at hero right), the
   library photo 4:3 at 560 px; the second-check card sits over the table at the bottom right and breaks out of the frame.
   Motion state list (Markup, "expressive but exact", quiet on a trust page):
   1. At rest every card, bar, cell and number is in place; a still screenshot shows the finished page.
   2. The bar chart: only if it is still entirely below the screen at the reader's first scroll, its bars are set to zero
      and grow from the left when 35% of the chart shows (480 ms, ease-out, 60 ms apart, top to bottom), once. A chart in
      view at load never moves; reduced motion never arms it.
   3. Buttons and the copy status: press scale 0.97, hover only on hover devices, focus ring; "Copied" shows 2.4 s.
   4. Reduced motion: no movement; text changes still show. */

/* ---------------------------------------------------------------- hero (same frame as /about/) */
.ph-grid{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:72px;align-items:start}
.ph-copy{padding-top:28px;min-width:0}
.ph-pts{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:560px}
.ph-pts li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.ph-pts li span{text-wrap:pretty}
.ph-pts .ic{color:var(--primary);margin-top:1px}
.ph-f{position:relative}
.ph-pic{position:relative;aspect-ratio:4/3;border-radius:var(--r-frame);border:1px solid var(--line);overflow:hidden;overflow:clip;
 background:var(--field);background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--rule) 39px 40px)}
.ph-pic .photo{display:block;width:100%;height:100%;object-fit:cover}
.ph-card{position:absolute;z-index:2}
/* hero: the second-check card itself, on Markup's ruled field, no photo behind it (the photo sits lower, beside the AI test) */
.me-f{margin-top:28px;background:var(--field);border-radius:var(--r-frame);padding:44px 36px;
 background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--rule) 39px 40px)}
.me-card{box-shadow:var(--shadow);padding:20px 24px 22px}
.me-card .win-h{font-size:13px}
.me-t{font-size:20px;line-height:1.7;margin-top:14px}
.me-was{border:1.5px dashed var(--line-strong);border-radius:5px;padding:1px 5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.me-log{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.me-log li{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.me-log li:last-child{border-bottom:0;padding-bottom:0}
.me-k{color:var(--muted);font-weight:500}
.me-log .fixed{margin-left:2px}

/* ---------------------------------------------------------------- how a copy is made: the steps, and two real marks on the ruled field */
.me-marks{margin:0;background:var(--field);border-radius:20px;padding:22px;background-image:repeating-linear-gradient(to bottom,transparent 0 39px,var(--rule) 39px 40px)}
.me-marks figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------------------------------------------------------------- the test: one series, so one hue; a track of 115 behind each bar */
.bars{list-style:none;margin:0;padding:22px 22px 10px;display:flex;flex-direction:column;gap:18px}
.bl{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.bn{font-size:16px;font-weight:600}
.bo{font-size:14px;color:var(--muted)}
.bv{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:12px;align-items:center;margin-top:8px}
.bv b{font-size:17px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.bt{display:block;height:16px;border-radius:5px;background:var(--band);border:1px solid var(--line);overflow:hidden}
.bf{display:block;height:100%;border-radius:4px;background:var(--primary);transform-origin:0 50%}
.v114{width:calc(100% * 114 / 115)}.v113{width:calc(100% * 113 / 115)}.v107{width:calc(100% * 107 / 115)}.v73{width:calc(100% * 73 / 115)}
.bars-fig[data-armed]:not([data-revealed]) .bf{transform:scaleX(0)}
.bars-fig[data-revealed] .bf{transition:transform 480ms var(--ease-out-4)}
.bars-fig[data-revealed] li:nth-child(2) .bf{transition-delay:60ms}
.bars-fig[data-revealed] li:nth-child(3) .bf{transition-delay:120ms}
.bars-fig[data-revealed] li:nth-child(4) .bf{transition-delay:180ms}
.me-res{margin-top:6px;border-top:1px solid var(--line)}
.me-res th,.me-res td{white-space:nowrap}
.me-res .gap{white-space:normal}
.bars-fig .scroll{padding:0 22px 8px}
.me-test>*,.me-est>*,.split>*{min-width:0}
.me-test{align-items:start}
.me-read{padding-top:8px;display:flex;flex-direction:column;gap:14px;max-width:52ch}
.me-read p{font-size:17px;line-height:1.6}
.me-read p+p{color:var(--muted)}
.me-read b{font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- the estimate: scores 0 to 20 as cells, the 3 copies' ranges marked (DET's scale with level bands) */
.me-prose{display:flex;flex-direction:column;gap:16px;max-width:58ch}
.me-prose p{font-size:17px;line-height:1.6}
.me-est{display:flex;flex-direction:column;gap:16px;min-width:0}
.sc-b{padding:22px 22px 18px}
.sc{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));gap:3px;align-items:end}
.sl{grid-row:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:13px;line-height:1.3;padding-bottom:10px;white-space:nowrap}
.sl b{font-weight:600}
.sl span{color:var(--fix);font-weight:600}
.sl-a{grid-column:6/9}.sl-b{grid-column:10/14}.sl-c{grid-column:14/18}
.c{grid-row:2;display:flex;align-items:center;justify-content:center;height:40px;border-radius:6px;background:var(--band);border:1px solid var(--line);
 font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.c.on{background:var(--fix-tint);border-color:var(--fix);color:var(--fix);font-weight:600}
.c i{font-style:normal}
.sl em{display:none;font-style:normal;color:var(--ink)}
.ax{display:none;grid-row:3;font-size:12px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;padding-top:6px}
.ax0{grid-column:1}.ax5{grid-column:6}.ax10{grid-column:11}.ax15{grid-column:16}.ax20{grid-column:21}
.sc-n{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.me-lvl{max-width:320px}

/* ---------------------------------------------------------------- report a mistake */
.me-mail .tool-b{padding:24px 22px}
.ct-addr{font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:underline;text-decoration-color:var(--primary);
 text-decoration-thickness:2px;text-underline-offset:7px;overflow-wrap:anywhere;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover){.ct-addr:hover{color:var(--primary)}}
.me-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.ct-done{font-size:15px;font-weight:500;color:var(--fix);transition:opacity 160ms var(--ease-out-3)}
.ct-done:empty{opacity:0}

/* ---------------------------------------------------------------- narrower screens */
@media (max-width:1180px){.ph-grid{grid-template-columns:minmax(0,1fr) 480px;gap:56px}}
@media (max-width:1080px){
 .ph-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .ph-copy{padding-top:0}
 .ph-f{padding-bottom:0;max-width:640px}
 .me-f{margin-top:0}
 .ph-card{position:relative;right:auto;top:auto;width:auto;margin:-56px 14px 0}
}
@media (max-width:600px){
 .ph-pts li{font-size:15px}
 .ph-card{margin:-40px 10px 0}
 .me-f{padding:14px 10px}
 .me-card{padding:14px 16px 16px}
 .me-card .win-h span+span{display:none}
 .me-t{font-size:17px}
 .me-log li{grid-template-columns:minmax(0,1fr);gap:2px}
 .me-marks{padding:14px 12px;border-radius:14px}
 .bars{padding:18px 16px 8px}
 .bars-fig .scroll{padding:0 12px 8px}
 .sc-b{padding:18px 14px 16px}
 .sc{gap:2px}
 .sl{font-size:12px}
 .c{height:30px;border-radius:4px}
 .c i{display:none}
 .sl em{display:block}
 .ax{display:block}
 .ct-addr{font-size:20px}
 .me-res{font-size:14px}
 .me-res th,.me-res td{padding:9px 4px}
}
/* until the photo lands (photos.json slot missing): a framed line drawing on the ruled field */
.ph-pic .spot-in{position:absolute;left:50%;top:28px;width:220px;height:auto;transform:translateX(-50%);border:1px solid var(--line);border-radius:16px;padding:10px;background:var(--paper)}
@media (max-width:600px){.ph-pic .spot-in{width:150px;top:16px;padding:6px}}

/* the AI test: heading and lede left, the photo right, half width */
.me-th{align-items:end;margin-bottom:40px}
.me-th .sec-head{margin-bottom:0}
.me-pic{aspect-ratio:4/3;max-width:520px;justify-self:end;width:100%}
@media (max-width:960px){.me-pic{justify-self:start;max-width:560px}}