/* Some Bum from St. Louis (Father Ed Dowling) · blocks that only this piece uses. Everything
   else comes from /shared/deep-dive.css, which every page loads first. */

/* Built for 3 · Come and get it (feature, Where he found it): six tellings in the shared
   "where they differ" list (.differ), so its answers sit three to a row from 700px and all six
   side by side from 1100px, instead of the shared four. */
@media (min-width:700px){.differ.six .dif-vals{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:14px}}
@media (min-width:1100px){.differ.six .dif-vals{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Built for 2 · The Queen's Work (feature, Seventeen years): the stages of his Jesuit training,
   one row each (.rd), with the years (.rd-when), a bar as long as the stage (.rd-bar; its length is
   the inline --yrs, in years), and what happened (.rd-body), with dated setbacks or milestones in
   .rd-marks. .rd-quiet is a stretch the sources don't cover; .rd-last is the job he kept. The bar is
   a border, so it prints. */
.road{list-style:none;margin:28px 0 0;padding:0;max-width:860px;border-top:2px solid var(--ink)}
.rd{display:grid;grid-template-columns:72px 10px minmax(0,1fr);column-gap:14px;border-bottom:1px solid var(--line-2)}
.rd-when{margin:0;padding-top:16px;font:700 calc(13px*var(--ts,1))/1.35 var(--mono);color:var(--ink-2)}
.rd-bar{align-self:start;margin-top:16px;height:calc(var(--yrs) * 26px);border-left:10px solid var(--accent);border-radius:2px}
.rd-body{padding:12px 0 18px}
.rd h3{margin:0;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1.15 var(--display)}
.rd-where{margin:4px 0 8px;font:600 calc(12px*var(--ts,1))/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.rd-what{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.55}
.rd-marks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.rd-marks li{position:relative;padding-left:18px;font-size:calc(16px*var(--ts,1));line-height:1.45}
.rd-marks li::before{content:'';position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.rd-quiet .rd-bar{border-left:2px dashed var(--line-2);margin-left:4px}
.rd-quiet h3,.rd-quiet .rd-what{color:var(--ink-2);font-style:italic}
.rd-last{background:var(--night);color:var(--night-ink);border-radius:12px;border-bottom:0;margin-top:12px;padding:0 16px}
.rd-last .rd-when{color:var(--night-2)}
.rd-last .rd-bar{border-left-color:var(--gold)}
.rd-last .rd-where{color:var(--gold)}
@media (min-width:700px){
  .rd{grid-template-columns:96px 12px minmax(0,1fr);column-gap:20px}
  .rd-when{font-size:calc(15px*var(--ts,1))}
  .rd-bar{height:calc(var(--yrs) * 32px);border-left-width:12px}
  .rd h3{font-size:calc(28px*(1 + (var(--ts,1) - 1)*0.6))}
}
@media print{.rd{break-inside:avoid}.rd-last{background:none;color:inherit;border:1px solid #999}}

/* Built for 4 · A sense of presence (feature, Before the knock): his year before the visit, in
   date order down a line. An entry (.kn) has its date (.kn-when) and a sentence; a letter adds a
   card (.kn-letter) with which way it went (.kn-route) and a short quotation (.kn-say). The last
   entry (.kn-last) is the night itself, in a dark box like the last stay card. */
.knock{list-style:none;margin:28px 0 0;padding:0;max-width:760px;position:relative}
.knock::before{content:'';position:absolute;left:7px;top:8px;bottom:24px;border-left:2px solid var(--line-2)}
.kn{position:relative;padding:0 0 22px 32px}
.kn::before{content:'';position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--band);border:2px solid var(--accent)}
.kn-when{display:block;font:700 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.kn-what{margin:4px 0 0;font-size:calc(17px*var(--ts,1));line-height:1.55}
.kn-letter{margin-top:10px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:4px;padding:12px 16px 14px;display:grid;gap:6px}
.kn-route{margin:0;font:600 calc(12px*var(--ts,1))/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kn-say{margin:0;font-style:italic;font-size:calc(19px*var(--ts,1));line-height:1.45}
.kn-letter .kn-what{margin:0;font-size:calc(16px*var(--ts,1))}
.kn-last{padding-bottom:0}
.kn-last::before{background:var(--gold);border-color:var(--gold)}
.kn-last .kn-box{margin-top:8px;background:var(--night);color:var(--night-ink);border:1px solid var(--night-edge);border-radius:12px;padding:16px 18px}
.kn-last .kn-when{color:var(--gold)}
.kn-last .kn-what{margin:0;font-size:calc(19px*var(--ts,1))}
@media (min-width:700px){.kn-say{font-size:calc(21px*var(--ts,1))}}
@media print{.kn{break-inside:avoid}.kn-last .kn-box{background:none;color:inherit;border:1px solid #999}}

/* Built for 1 · Two tryouts (feature, Before the Jesuits): a link in the last stay card's result
   line, gold on the dark card as the takeaway's links are. */
.stay.last .result a{color:var(--gold)}

/* Built for 5 · Couples are not alone (feature, Letters, 1947): Bill W.'s letters and Father Ed's,
   in date order. On a phone they stack, each marked by its border; from 700px Bill's sit in the
   left column and Father Ed's in the right, one letter to a row (the inline --r), so the exchange
   reads back and forth. */
.letters{list-style:none;margin:28px 0 0;padding:0;max-width:940px;display:grid;gap:12px}
.lt{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ink-2);border-radius:4px;padding:12px 16px 14px}
.lt.ed{border-left-color:var(--accent)}
.lt-when{margin:0;font:700 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.lt-who{margin:2px 0 0;font:600 calc(12px*var(--ts,1))/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.lt.ed .lt-who{color:var(--accent)}
.lt-say{margin:8px 0 0;font-style:italic;font-size:calc(19px*var(--ts,1));line-height:1.45}
.lt-note{margin:8px 0 0;font-size:calc(16px*var(--ts,1));line-height:1.5;color:var(--ink-2)}
@media (min-width:700px){
  .letters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:10px}
  .lt{grid-row:var(--r)}
  .lt.bill{grid-column:1}
  .lt.ed{grid-column:2}
  .lt-say{font-size:calc(20px*var(--ts,1))}
}
@media print{.letters{display:block}.lt{break-inside:avoid;margin-bottom:10px}}

/* Built for 6 · Stuff of the saints (feature, Step for step): his 1953 pairing of the Twelve Steps
   with the Spiritual Exercises, one row per pairing. The left of a row (.pr-steps) is the Steps,
   summed up; the right (.pr-ex) is the part of the Exercises with his words. .pr-none is the Step
   he didn't pair; .pr-last closes the list in the dark box the piece uses for a last entry. */
.pairs{list-style:none;margin:28px 0 0;padding:0;max-width:940px;border-top:2px solid var(--ink)}
.pr{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;padding:14px 0 16px;border-bottom:1px solid var(--line-2)}
.pr-num{margin:0;font:700 calc(14px*var(--ts,1))/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.pr-gloss{margin:2px 0 0;font-size:calc(15px*var(--ts,1));line-height:1.45;color:var(--ink-2)}
.pr-ex h3{margin:0;font:400 calc(23px*(1 + (var(--ts,1) - 1)*0.8))/1.2 var(--display)}
.pr-say{margin:6px 0 0;font-style:italic;font-size:calc(18px*var(--ts,1));line-height:1.45}
.pr-note{margin:6px 0 0;font-size:calc(16px*var(--ts,1));line-height:1.5;color:var(--ink-2)}
.pr-none .pr-ex h3{color:var(--ink-2);font-style:italic}
.pr-last{background:var(--night);color:var(--night-ink);border-radius:12px;border-bottom:0;margin-top:12px;padding:14px 16px 16px}
.pr-last .pr-num{color:var(--gold)}
.pr-last .pr-gloss,.pr-last .pr-note{color:var(--night-2)}
@media (min-width:700px){
  .pr{grid-template-columns:220px minmax(0,1fr);column-gap:28px}
  .pr-ex h3{font-size:calc(26px*(1 + (var(--ts,1) - 1)*0.7))}
  .pr-say{font-size:calc(19px*var(--ts,1))}
}
@media print{.pr{break-inside:avoid}.pr-last{background:none;color:inherit;border:1px solid #999}.pr-last .pr-gloss,.pr-last .pr-note{color:inherit}}

/* Built for 7 · Backing away from hell (feature, As usual): his last years, one row per setback.
   A row has its date (.cr-when), what his body did (.cr-body) and what he did next (.cr-next),
   stacked on a phone and side by side from 700px. .cr-last is his death, in the dark box. */
.carry{list-style:none;margin:28px 0 0;padding:0;max-width:940px;display:grid;gap:12px}
.cr{display:grid;grid-template-columns:minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cr-when{margin:0;padding:12px 16px 0;font:700 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.cr-body,.cr-next{margin:0;padding:6px 16px 12px;font-size:calc(17px*var(--ts,1));line-height:1.5}
.cr-next{padding-top:10px;border-top:1px dashed var(--line-2)}
.cr-lab{display:block;margin-bottom:2px;font:600 calc(12px*var(--ts,1))/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cr-last{background:var(--night);color:var(--night-ink);border-color:var(--night-edge)}
.cr-last .cr-when{color:var(--gold)}
.cr-last .cr-body{font-size:calc(19px*var(--ts,1));padding-bottom:16px}
@media (min-width:700px){
  .cr{grid-template-columns:150px minmax(0,1fr) minmax(0,1fr)}
  .cr-when{padding:14px 0 14px 16px}
  .cr-body,.cr-next{padding:14px 16px}
  .cr-next{border-top:0;border-left:1px dashed var(--line-2)}
  .cr-last{grid-template-columns:150px minmax(0,1fr)}
}
@media print{.cr{break-inside:avoid}.cr-last{background:none;color:inherit;border:1px solid #999}}

/* Built for Legacy (feature, Like a Gulf Stream): the people his last article counted as using the
   Steps outside AA, himself last, then the groups that came after him. The line down the left is
   the stream. Cards stack on a phone and sit two to a row from 700px; .st-sec labels span the row.
   .st-after (the groups after him) is drawn dashed. */
.stream{list-style:none;margin:28px 0 0;padding:0 0 0 16px;max-width:940px;display:grid;gap:12px;border-left:3px solid var(--accent)}
.st-sec p{margin:12px 0 0;font:600 calc(12px*var(--ts,1))/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.st-sec:first-child p{margin-top:0}
.st{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 16px 14px}
.st-when{margin:0;font:700 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.st h3{margin:2px 0 0;font:400 calc(23px*(1 + (var(--ts,1) - 1)*0.8))/1.2 var(--display)}
.st-what{margin:6px 0 0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.st-say{margin:6px 0 0;font-style:italic;font-size:calc(18px*var(--ts,1));line-height:1.45}
.st-after{background:transparent;border-style:dashed;border-color:var(--line-2)}
.st-after .st-when{color:var(--ink-2)}
@media (min-width:700px){
  .stream{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;padding-left:22px}
  .st-sec{grid-column:1/-1}
}
@media print{.stream{display:block;border-left:0;padding:0}.st{break-inside:avoid;margin-bottom:10px}.st-sec p{margin:12px 0 6px}}