/* Number One Man (Bill W.) · styles only its pages use, loaded after /shared/deep-dive.css. */

/* house on the hill (5 · About fifty homes): the drawing's own classes. The layout, the pins and the
   numbered list beside it are the shared diagram block (.hideout, .house, .hs-pin, .hides). */
.sh-earth{fill:var(--ph);opacity:.55}
.sh-ground{stroke:var(--ink-2);stroke-width:2;fill:none}
.sh-room{fill:var(--card)}
.sh-cellar,.sh-attic{fill:var(--band)}
.sh-wall{stroke:var(--ink);stroke-width:4;fill:none}
.sh-outline{stroke:var(--ink);stroke-width:5;fill:none}
.sh-line{stroke:var(--ink-2);stroke-width:2;fill:none}
.sh-roof{fill:var(--ink-2)}
.sh-obj{fill:var(--line-2);stroke:var(--ink-2);stroke-width:2}
.sh-dark{fill:var(--ink)}
.sh-stone{fill:var(--line-2);stroke:var(--ink-2);stroke-width:2;stroke-dasharray:5 3}
.sh-fire{fill:var(--gold)}
.sh-glass{fill:var(--mat);stroke:var(--ink-2);stroke-width:2}
.sh-board,.sh-light{fill:var(--accent)}
.sh-water{stroke:var(--ink-2);stroke-width:2}
.sh-block{fill:var(--ink-2)}
.sh-string{stroke:var(--accent);stroke-width:2;fill:none;stroke-dasharray:4 3}
.sh-pipe{stroke:var(--ink-2);stroke-width:3;fill:none;stroke-dasharray:8 5}
.sh-later{fill:var(--card);stroke:var(--ink-2);stroke-width:2;stroke-dasharray:6 4}
.sh-trail{stroke:var(--ink-2);stroke-width:3;fill:none;stroke-dasharray:2 7;stroke-linecap:round}
.sh-tree{fill:var(--line-2);opacity:.8}
.sh-trunk{stroke:var(--ink-2);stroke-width:4}
.sh-lab{font:400 15px var(--mono);fill:var(--ink-2)}
.sh-small{font-size:13px}

/* Walk a quarter mile (6 · The quarter mile): a pacer along a drawn trail, with his four lines as the stops.
   Phones: the trail runs down the left of the lines. From 900px: across the top, the lines in four columns.
   The script on that page places the track and moves the marker; without it the lines read as a plain list,
   and with reduced motion the marker and the growing line are hidden. */
.pacer{position:relative;margin-top:28px}
.pc-lines{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.pc-lines li{position:relative;padding-left:40px}
.pc-stop{position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;box-sizing:border-box;background:var(--band);border:3px solid var(--line-2);z-index:1}
.pc-lines li[data-reached] .pc-stop{background:var(--accent);border-color:var(--accent)}
.pc-at{display:block;font:700 12px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pc-lines .q{margin:6px 0 0;font-style:italic;font-size:19px;line-height:1.5;transition:opacity .5s}
.pacer[data-on] .pc-lines li:not([data-reached]) .q{opacity:.45}
.pc-track,.pc-done{position:absolute;width:0;height:0;border-radius:2px;background:var(--line-2);pointer-events:none}
.pc-done{background:var(--accent)}
.pc-dot{position:absolute;left:12px;top:12px;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;box-sizing:border-box;background:var(--gold);border:4px solid var(--card);box-shadow:0 0 0 2px var(--accent);z-index:2;pointer-events:none}
.pacer:not([data-js]) .pc-track,.pacer:not([data-js]) .pc-done,.pacer:not([data-js]) .pc-dot{display:none}
.pc-panel{margin-top:32px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card);display:grid;gap:16px}
.pc-breath{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pc-breath span{min-width:34px;height:34px;padding:0 7px;border-radius:17px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;font:700 13px var(--mono);color:var(--ink-2);border:1px solid var(--line-2)}
.pc-breath span.sep{min-width:0;padding:0 2px;border:0}
@media (max-width:519px){.pc-breath span.sep{flex-basis:100%;height:0;overflow:hidden;padding:0}}
.pc-breath span[data-now]{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.pc-read{margin:0;font:400 15px/1.5 var(--sans);color:var(--ink-2)}
.pc-read b{font:700 17px var(--mono);color:var(--ink)}
.pc-btns{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
button.btn{border:0;cursor:pointer}
.pc-reset{min-height:44px;padding:0 4px;border:0;background:none;color:var(--accent);font:600 15px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (min-width:900px){
  .pc-lines{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:44px}
  .pc-lines li{padding-left:0}
  .pc-stop{left:0;top:-44px}
  .pc-panel{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
}
@media (prefers-reduced-motion:reduce){.pc-dot,.pc-done{display:none}.pc-lines .q{transition:none}}

/* How we know (7 · Mr. Anonymous): one card per claim, in the shared .cards.two grid, with a label
   for how strong the evidence is. The last card, for claims with no source, has a dashed edge. */
.hw h3{margin:0;font:400 24px/1.2 var(--display)}
.hw-lab{align-self:flex-start;margin:0;padding:5px 10px;border-radius:999px;font:700 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.hw-lab.own{background:var(--accent);color:var(--card)}
.hw-lab.docs{background:var(--ink-2);color:var(--card)}
.hw-lab.bio{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent)}
.hw-lab.none{border:1.5px dashed var(--ink-2);color:var(--ink-2)}
.hw.none{border-style:dashed;border-color:var(--line-2);background:transparent}
@media (min-width:700px){.hw.none{grid-column:1 / -1}}
.hw-dl{margin:0;flex-grow:1;display:flex;flex-direction:column;gap:4px}
.hw-dl dt{margin-top:8px;font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.hw-dl dd{margin:0;font-size:17px;line-height:1.55}

/* The last weeks (Legacy): December 1970 and January 1971, side by side from 900px, with the key under
   them. The calendar itself is the shared block; these are this piece's marks. A filled day is a
   request for whiskey; the ringed day is the day he died. */
.weeks{display:grid;gap:20px;margin-top:28px}
@media (min-width:900px){.weeks{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px}.weeks .cal-key{grid-column:1 / -1}}
.cal td.ask .d{background:var(--accent);color:var(--card)}
.cal td.died .d{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
@media (min-width:700px){.cal td.ask .t,.cal td.died .t{color:var(--ink)}}
.sw.ask{border-radius:50%;background:var(--accent)}
.sw.died{border-radius:50%;box-shadow:inset 0 0 0 2px var(--accent)}

/* a name that shouldn't break at its hyphens (Legacy: Box 4-5-9) */
.nw{white-space:nowrap}