/* Keep Coming Back · styles only its pages use, loaded after /shared/deep-dive.css */

/* at a meeting today (1 · The Serenity Prayer; every section of this piece ends its story with one):
   one plain line on where a newcomer meets the thing the section is about. The label and text sizes
   are set here because .panel p would otherwise enlarge the label. */
.today{margin-top:8px;padding:14px 18px 16px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:var(--card);display:flex;flex-direction:column;gap:6px}
.today .label{font-size:12px;color:var(--accent)}
.today .say-today{font-size:18px;line-height:1.5}

/* the clipping (1 · The Serenity Prayer): the words of a newspaper notice set in type as a cutting.
   It is a transcription, not a facsimile, and the caption says so. Colors come from the page, so it
   follows dark mode. */
.clip{margin:6px 0 4px;display:flex;flex-direction:column;gap:10px}
.clip-cut{width:100%;max-width:330px;margin-inline:auto;padding:16px 20px 20px;background:var(--mat);border:1px solid var(--line-2);box-shadow:4px 5px 0 var(--ph);transform:rotate(-.6deg)}
.clip .clip-head{padding-bottom:8px;border-bottom:1px solid var(--ink);font:700 13px/1.3 var(--serif);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.clip .clip-text{margin-top:12px;font-size:17px;line-height:1.55}
.clip figcaption{font:400 13px/1.5 var(--sans);color:var(--ink-2)}
@media (min-width:900px){.clip-cut{margin-inline:0}}

/* three-way then and now (2 · The Preamble): the shared then-and-now rows (.compare) with three
   dated columns instead of two: the 1939 Foreword, the 1947 Preamble and today. Phones stack each row
   with its column labels showing; from 900px the labels move into the header row. .cmp-when says when
   a line took its present form. */
.compare.three .cmp-then .cmp-k{color:var(--ink-2)}
.compare.three .cmp-mid .cmp-k{color:var(--accent)}
.compare.three .cmp-now .cmp-k{color:var(--ink)}
.cmp-when{font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.cmp-cell .same{font-size:17px;line-height:1.5;color:var(--ink-2)}
@media (min-width:900px){
  .compare.three .cmp-head,.compare.three .cmp-row{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,3fr));column-gap:32px}
  .compare.three .cmp-head span:nth-child(2){color:var(--ink-2)}
  .compare.three .cmp-head span:nth-child(3){color:var(--accent)}
  .compare.three .cmp-head span:nth-child(4){color:var(--ink)}
  .compare.three .cmp-cell .q{font-size:18px}
}

/* the wall (Legacy): slogans as framed signs on a meeting-room wall, each with where AA's books first
   show it. Phones stack the signs; from 700px two across, from 1100px four. The frame is the dark
   night color in both themes; the mat follows the page. The last sign is the dark one, like .stay.last. */
.wall{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:24px}
@media (min-width:700px){.wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}}
@media (min-width:1100px){.wall{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px}}
.sign{display:flex;flex-direction:column;gap:10px}
.placard{position:relative;min-height:170px;margin-bottom:8px;padding:20px 16px;display:flex;align-items:center;justify-content:center;background:var(--mat);border:10px solid var(--night);box-shadow:4px 6px 0 var(--ph);text-align:center}
.placard::after{content:"";position:absolute;inset:6px;border:1px solid var(--line-2);pointer-events:none}
.placard h3{margin:0;font:400 21px/1.35 var(--serif);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.placard h3 span{display:block}
.placard.three h3{font-size:17px;letter-spacing:.08em;line-height:1.5}
.placard.three h3 span{white-space:nowrap}
.sign .when{margin:0;font:700 15px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.sign .what{margin:0;flex-grow:1;font-size:18px;line-height:1.55}
.sign .cite{margin:0}
.sign.last .placard{background:var(--night);border-color:var(--gold)}
.sign.last .placard::after{border-color:var(--night-btn)}
.sign.last .placard h3{color:var(--night-ink)}

/* the badge (6 · The chips): a small illustration in the shared print frame. It's an inline SVG of an
   object seen from above, not an archival picture, so the mat holds an svg instead of an img and there
   is no credit line. Kept narrow, since the badge is a small thing and a full-column portrait would push
   the story down on phones. It dims in dark mode like the heroes. */
.print.badge{max-width:340px}
.print.badge svg{display:block;width:100%;height:auto;filter:brightness(var(--art-dim))}