/* An Illness of This Sort · styles only its pages use, loaded after /shared/deep-dive.css. */

/* the votive's flame (hero of 2 · A far safer term, drawn by docs/drawing/disease-a-far-safer-term.py):
   the flame (dz-flame, scaled about its base, which the drawing sets inline) wavers, and the light it
   throws on the glass, the wax, the desk and the wall (dz-glow) rises and falls with it. One slow
   movement, stilled for anyone whose device asks for reduced motion, and never printed (heroes
   aren't). The drawing without this stylesheet is the still frame. */
@keyframes dz-flicker{0%,100%{transform:scale(1,1)}22%{transform:scale(.96,1.07)}46%{transform:scale(1.04,.93)}72%{transform:scale(.98,1.03)}}
@keyframes dz-glow{0%,100%{opacity:1}46%{opacity:.7}72%{opacity:.88}}
.hero .dz-flame{animation:dz-flicker 2.6s ease-in-out infinite}
.hero .dz-glow{animation:dz-glow 2.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-flame,.hero .dz-glow{animation:none}}

/* the pendulum (hero of 1 · By that name, drawn by docs/drawing/disease-by-that-name.py): the
   regulator clock's rod and bob (dz-pendulum) swing five degrees either way about the pivot behind
   the dial, which the drawing sets inline, once each way in two seconds, the beat of a seconds
   pendulum. Without this stylesheet the pendulum hangs straight. */
@keyframes dz-swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.hero .dz-pendulum{animation:dz-swing 2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-pendulum{animation:none}}

/* the rain (hero of 3 · Big light, drawn by docs/drawing/disease-big-light.py): the streaks past the
   window are one pattern drawn four times, 240 drawing units apart, in one group (dz-rain) clipped to
   the glass, that slides down one pattern's height and starts over. The drops on the glass stay
   still. */
@keyframes dz-rain{from{transform:translateY(-240px)}to{transform:translateY(0)}}
.hero .dz-rain{animation:dz-rain 1.8s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-rain{animation:none}}

/* the smoke (hero of 4 · A major medical problem): its wisps use the shared rise movement in
   /shared/deep-dive.css (moved there in Oct 2026, when Keep Coming Back's urn steam used it too). */

/* the new sign (hero of 5 · A new sign, drawn by docs/drawing/disease-a-new-sign.py): the HOSPITAL
   sign and its chains (dz-sign) sway a little either way about the point between the chains' hooks,
   which the drawing sets inline, as if just hung. Without this stylesheet the sign hangs level. */
@keyframes dz-sway{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}
.hero .dz-sign{animation:dz-sway 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-sign{animation:none}}

/* the tally light (hero of 6 · Normal drinking, drawn by docs/drawing/disease-normal-drinking.py): the
   red lamp on the television camera that shows it is recording (dz-tally-light, the lamp and its glow)
   glows and dims, never going out. Without this stylesheet it stays lit. */
@keyframes dz-tally{0%,100%{opacity:1}50%{opacity:.4}}
.hero .dz-tally-light{animation:dz-tally 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-tally-light{animation:none}}

/* the cursor (hero of 7 · Willful misconduct, drawn by docs/drawing/disease-willful-misconduct.py): the
   block cursor after "EXTENSION DENIED" on the terminal's screen (dz-cursor) blinks, dimming to a third
   rather than going out, once every 1.6 seconds. Without this stylesheet the cursor stays lit. */
@keyframes dz-blink{0%,50%{opacity:1}56%,94%{opacity:.35}100%{opacity:1}}
.hero .dz-cursor{animation:dz-blink 1.6s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-cursor{animation:none}}

/* the steam (hero of the entrance, drawn by docs/drawing/disease-lobby.py): the two wisps over the
   cup of tea (dz-steam, dz-steam2) sway slowly from side to side, out of step. Without this stylesheet
   the steam simply hangs there. */
@keyframes dz-sway{0%,100%{transform:translateX(0) skewX(0deg)}50%{transform:translateX(4px) skewX(-6deg)}}
.hero .dz-steam,.hero .dz-steam2{transform-box:fill-box;transform-origin:50% 100%;animation:dz-sway 5s ease-in-out infinite}
.hero .dz-steam2{animation-duration:6.5s;animation-delay:-2s}
@media (prefers-reduced-motion:reduce){.hero .dz-steam,.hero .dz-steam2{animation:none}}

/* the second hand (hero of Legacy, drawn by docs/drawing/disease-legacy.py): the red hand on the wall
   clock (dz-second, turning about the clock's center, which the drawing sets inline) sweeps round once a
   minute. Without this stylesheet it stands at ten seconds past. */
@keyframes dz-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero .dz-second{animation:dz-sweep 60s linear infinite}
@media (prefers-reduced-motion:reduce){.hero .dz-second{animation:none}}

/* Counting the words (2 · A far safer term): the words AA's book uses for the drinking, one tally
   mark per use in groups of five that wrap whole, in two cards: Bill W.'s chapters by word, and
   "disease" in the stories by edition. The marks are borders, so they print; the word a card is about
   (.dz-key) is in the accent. Phones: the cards stacked. From 900px: side by side. */
.dz-tallies{margin-top:24px;display:grid;gap:18px}
.dz-tally{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 14px}
.dz-tally h3{margin:0;font:700 calc(19px*var(--ts,1))/1.3 var(--serif)}
.dz-sub{margin:4px 0 0;font-size:calc(15px*var(--ts,1));line-height:1.4;color:var(--ink-2)}
.dz-rows{list-style:none;margin:12px 0 0;padding:0}
.dz-rows li{display:grid;grid-template-columns:5.4em minmax(0,1fr) 2em;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed var(--line-2)}
.dz-word{font:400 calc(15px*var(--ts,1))/1.2 var(--mono)}
.dz-marks{display:flex;flex-wrap:wrap;gap:6px 12px;min-height:18px}
.dz-five{display:flex;gap:5px}
.dz-mark{display:block;width:0;height:18px;border-left:3px solid var(--ink-2)}
.dz-key .dz-word{color:var(--accent)}
.dz-key .dz-mark{border-left-color:var(--accent)}
.dz-n{font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1 var(--display);text-align:right}
.dz-foot{margin:10px 0 0;font-size:calc(14px*var(--ts,1));line-height:1.45;color:var(--ink-2)}
@media (min-width:900px){.dz-tallies{grid-template-columns:1fr 1fr;gap:24px;align-items:start}}

/* Bill's words (2 · A far safer term): what Bill W. called the drinking, talk by talk and essay by
   essay, 1939 to 1960. Each row: the year, where he said it and his words, and a tag naming the word,
   outlined so it reads in ink, "disease" in the accent. Phones: the tag under the words. From 700px:
   the tag at the right. */
.dz-words-h{margin:34px 0 0;font:700 calc(19px*var(--ts,1))/1.3 var(--serif)}
.dz-words{list-style:none;margin:12px 0 0;padding:0;border-top:2px solid var(--ink)}
.dz-words li{display:grid;grid-template-columns:3.2em minmax(0,1fr);grid-template-areas:"yr say" ". tag";gap:6px 14px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.dz-yr{grid-area:yr;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1.1 var(--display);color:var(--accent)}
.dz-say{grid-area:say;font-size:calc(17px*var(--ts,1));line-height:1.45}
.dz-where{display:block;margin-bottom:3px;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dz-tag{grid-area:tag;justify-self:start;padding:4px 10px;border:1.5px solid var(--ink-2);border-radius:999px;font:400 calc(13px*var(--ts,1))/1 var(--mono);color:var(--ink-2)}
.dz-tag.dis{border-color:var(--accent);color:var(--accent)}
@media (min-width:700px){
  .dz-words li{grid-template-columns:3.8em minmax(0,1fr) auto;grid-template-areas:"yr say tag";align-items:baseline}
}
@media print{.dz-tally,.dz-words li{break-inside:avoid}}

/* Thirty-six questions (3 · Big light): Jellinek's count, from the Grapevine's circulation to the
   98 men, in the shared .meters (the 98 in the accent), then the average age at which those men said
   each of seven questions first happened. Each row: the question's number and words as printed, a
   line on an axis from 15 to 45 that ends in a dot at the average age, and the age. The lines and
   dots are borders, so they print; the meters are told to print their fills, in the light theme's colors
   whatever the screen's theme. The age column is a fixed 60px so every row's line, and the scale under
   them, share one width. Phones: the question
   above its line. From 700px: question, line and age in one row, the scale under the lines. */
.dz-ages-sub{margin:4px 0 0;font-size:calc(15px*var(--ts,1));line-height:1.45;color:var(--ink-2)}
.dz-ages{list-style:none;margin:14px 0 0;padding:0;border-top:2px solid var(--ink)}
.dz-ages li,.dz-scale{display:grid;grid-template-columns:minmax(0,1fr) 60px;grid-template-areas:"q q" "t a";gap:6px 14px;align-items:center}
.dz-ages li{padding:12px 0;border-bottom:1px dashed var(--line-2)}
.dz-q{grid-area:q;font-size:calc(17px*var(--ts,1));line-height:1.4}
.dz-qn{display:inline-block;min-width:4.2em;font:400 calc(12px*var(--ts,1))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.dz-track{grid-area:t;position:relative;height:20px}
.dz-track::before{content:"";position:absolute;left:0;right:0;top:9px;border-top:1px solid var(--line-2)}
.dz-track i{position:absolute;left:0;top:10px;width:var(--w);border-top:4px solid var(--ink-2)}
.dz-track i::after{content:"";position:absolute;right:-7px;top:-9px;width:0;height:0;border:7px solid var(--ink-2);border-radius:50%}
.dz-age{grid-area:a;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1 var(--display);text-align:right}
.dz-key .dz-track i,.dz-key .dz-track i::after{border-color:var(--accent)}
.dz-key .dz-age,.dz-key .dz-qn{color:var(--accent)}
.dz-scale{grid-template-areas:"t a";padding-top:6px}
.dz-ticks{grid-area:t;position:relative;height:16px;font:400 calc(12px*var(--ts,1))/1.3 var(--sans);color:var(--ink-2)}
.dz-ticks span{position:absolute;top:0;transform:translateX(-50%)}
.dz-ticks span:nth-child(1){left:0;transform:none}
.dz-ticks span:nth-child(2){left:33.333%}
.dz-ticks span:nth-child(3){left:66.667%}
.dz-ticks span:nth-child(4){left:100%;transform:translateX(-100%)}
.dz-unit{grid-area:a;font:400 calc(12px*var(--ts,1))/1.3 var(--sans);color:var(--ink-2);text-align:right}
@media (min-width:700px){
  .dz-ages li,.dz-scale{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 60px;grid-template-areas:"q t a"}
  .dz-scale{grid-template-areas:". t a"}
}
@media print{
  .dz-ages li{break-inside:avoid}
  .meter-bar,.meter-fill{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--m-base:#8F816A;--m-base-track:#E2DACB;--m-lead:#5A2A15;--m-lead-track:#DCCABE}
}

/* Five to four (5 · A new sign): the three opinions in Powell v. Texas, one card each. On top, a dot
   per justice, filled in ink for a vote to uphold the fine and an open ring in the accent for a vote
   to overturn it (both are borders, so they print); then who wrote and joined, and each opinion's
   answer to the two questions, the questions in small type in the accent. Phones: the cards stacked. From
   900px: side by side. */
.dz-court{margin-top:24px;display:grid;gap:18px}
.dz-op{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 6px}
.dz-seats{display:flex;gap:6px;margin:0 0 12px}
.dz-seat{display:block;box-sizing:border-box;width:16px;height:16px;border-radius:50%;border:2px solid var(--accent)}
.dz-seat.up{border:8px solid var(--ink)}
.dz-op h3{margin:0;font:700 calc(19px*var(--ts,1))/1.3 var(--serif)}
.dz-names{margin:4px 0 0;font-size:calc(15px*var(--ts,1));line-height:1.4;color:var(--ink-2)}
.dz-qa{margin:12px 0 0}
.dz-qa dt{padding-top:12px;border-top:1px dashed var(--line-2);font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.dz-qa dd{margin:5px 0 12px;font-size:calc(17px*var(--ts,1));line-height:1.45}
@media (min-width:900px){.dz-court{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}}
@media print{.dz-op{break-inside:avoid}}

/* Four readings (6 · Normal drinking): the four studies that said some alcoholics returned to normal
   drinking, one card each in the shared .cards grid, in the order they were published. Each card adds,
   under its year and authors, the figure the study turned on (.dz-stat: a large number, what it counts,
   and a bar whose filled part is that share; the bar is borders, so it prints), then what it found
   (.say), who answered and how (.alt), and where it was printed (.cite). */
.dz-stat{display:grid;gap:6px}
.dz-num{font:400 calc(34px*(1 + (var(--ts,1) - 1)*0.3))/1 var(--display)}
.dz-num small{display:block;margin-top:6px;font:400 calc(14px*var(--ts,1))/1.3 var(--sans);color:var(--ink-2)}
.dz-bar{position:relative;height:10px;border:1px solid var(--line-2);border-radius:5px;overflow:hidden}
.dz-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--accent)}
.dz-bar i.b{left:var(--x);background:var(--ink-2)}
.dz-key2{display:flex;flex-wrap:wrap;gap:4px 12px;font:400 calc(12px*var(--ts,1))/1.3 var(--sans);color:var(--ink-2)}
.dz-key2 span::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--accent)}
.dz-key2 span.b::before{background:var(--ink-2)}
.dz-ans{font:600 calc(12px*var(--ts,1))/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:4px}
@media print{.dz-bar i,.dz-key2 span::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* The manuals (7 · Willful misconduct): the American Psychiatric Association's manuals from 1952 to
   1987, one cover each, in order: the edition and year, where alcoholism was filed, and what it was
   called. The spine down each cover's left edge is plain ink where it was filed with the personality
   disorders and the accent where it was filed with the substance use disorders, the turn this part
   is about, with a line on how each edition used the names. Phones: stacked. From 700px: two across.
   From 1100px: four. */
.dz-shelf{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.dz-man{background:var(--card);border:1px solid var(--line);border-left:8px solid var(--ink-2);border-radius:6px 12px 12px 6px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px}
.dz-man.sub{border-left-color:var(--accent)}
.dz-ed{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:400 calc(30px*(1 + (var(--ts,1) - 1)*0.5))/1 var(--display)}
.dz-ed span{font:700 calc(15px*var(--ts,1))/1 var(--mono);color:var(--ink-2)}
.dz-under{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.4}
.dz-under b,.dz-calls b{display:block;margin-bottom:3px;font:400 calc(12px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dz-man.sub .dz-under b{color:var(--accent)}
.dz-calls{margin:0;padding-top:10px;border-top:1px dashed var(--line-2);font-size:calc(16px*var(--ts,1));line-height:1.45}
.dz-calls ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dz-calls li{padding:4px 10px;border:1.5px solid var(--ink-2);border-radius:999px;font:400 calc(13px*var(--ts,1))/1.2 var(--mono)}
.dz-more{margin:0;font-size:calc(15px*var(--ts,1));line-height:1.45;color:var(--ink-2)}
.dz-man.sub .dz-calls li{border-color:var(--accent)}
@media (min-width:700px){.dz-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.dz-shelf{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media print{.dz-man{break-inside:avoid}}

/* Four words, today (Legacy): what the bodies that name it, the researchers who argue over it and AA's
   pamphlets call it now, one card per word. The word is set large at the top, who uses it under it, then
   each voice with its year and its own words. AA's card has the accent, since its word is where the piece
   began. One column on phones, two from 700px, four from 1100px. */
.dz-four{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:16px}
.dz-fcard{background:var(--card);border:1px solid var(--line);border-top:6px solid var(--ink-2);border-radius:6px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px}
.dz-fcard.aa{border-top-color:var(--accent)}
.dz-fword{margin:0;font:400 calc(30px*(1 + (var(--ts,1) - 1)*0.5))/1.1 var(--display)}
.dz-fby{margin:0 0 4px;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.dz-fcard.aa .dz-fby{color:var(--accent)}
.dz-fvoices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dz-fvoices li{padding:12px 0 0;margin-top:12px;border-top:1px dashed var(--line-2);font-size:calc(16px*var(--ts,1));line-height:1.45}
.dz-fvoices li:first-child{margin-top:4px}
.dz-fwho{display:block;margin-bottom:4px;font:600 calc(14px*var(--ts,1))/1.35 var(--sans)}
.dz-fwho span{display:block;margin-bottom:2px;font:700 calc(14px*var(--ts,1))/1.2 var(--mono);color:var(--accent)}
@media (min-width:700px){.dz-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.dz-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media print{.dz-fcard{break-inside:avoid}}