/* Trusted Servants · styles only its pages use, loaded after /shared/deep-dive.css. */

/* One month's work (3 · Box 459): Bill W.'s figures for the office's work in March 1944, from the
   Grapevine's first issue, as a typed sheet. One figure per row, its words beside it; the letters
   row has a bar splitting them into first inquiries, letters to groups and the rest, with a key
   that gives the numbers, so it still reads in ink. The last row is the staff who did it. From
   900px the rows go two across, with the letters row across both. */
.month{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 18px 8px}
.mo-head{margin:0 0 4px;font:400 calc(13px*var(--ts,1))/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.mo-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr)}
.mo-row{display:grid;grid-template-columns:5.6em minmax(0,1fr);gap:6px 14px;align-items:baseline;padding:14px 0;border-top:1px dashed var(--line-2)}
.mo-n{font:400 calc(30px*(1 + (var(--ts,1) - 1)*0.5))/1 var(--display);color:var(--accent);white-space:nowrap}
.mo-t{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.mo-t b{font-weight:700}
.mo-split{grid-column:1/-1;display:flex;height:14px;margin-top:4px;border-radius:7px;overflow:hidden;background:var(--track);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mo-split span{display:block;height:100%}
.mo-split .a{background:var(--accent)}
.mo-split .b{background:var(--gold)}
.mo-split .c{background:var(--line-2)}
.mo-key{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.mo-key li{display:flex;align-items:center;gap:6px}
.mo-key i{display:inline-block;width:10px;height:10px;border-radius:2px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mo-key .a{background:var(--accent)}
.mo-key .b{background:var(--gold)}
.mo-key .c{background:var(--line-2)}
.mo-row.staff{border-top:2px solid var(--ink-2)}
.mo-row.staff .mo-n{color:var(--ink)}
@media (min-width:900px){
  .month{padding:24px 28px 10px}
  .mo-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .mo-row{grid-template-columns:132px minmax(0,1fr)}
  .mo-row.wide{grid-column:1/-1}
  .mo-n{font-size:calc(34px*(1 + (var(--ts,1) - 1)*0.3))}
}
@media print{
  .month{border-color:#999}
  .mo-row{grid-template-columns:7.5em minmax(0,1fr)}
  .mo-split{border:1px solid #666}
}
/* The office's year of 1949 (3 · Box 459), from the Foundation's pamphlet of 1950: the same sheet,
   with a wider figure column for six-figure numbers like 915,000. */
.month.big-n .mo-row{grid-template-columns:7.6em minmax(0,1fr)}
.month.big-n .mo-n{font-size:calc(25px*(1 + (var(--ts,1) - 1)*0.8))}
@media (min-width:900px){
  .month.big-n .mo-row{grid-template-columns:176px minmax(0,1fr)}
  .month.big-n .mo-n{font-size:calc(34px*(1 + (var(--ts,1) - 1)*0.3))}
}
@media print{.month.big-n .mo-row{grid-template-columns:9.5em minmax(0,1fr)}}

/* Who sat on the board (1 · Class A and Class B): the board at five moments, one small square for
   each trustee, nonalcoholic friends (Class A) as open squares and AA members (Class B) as filled
   ones, so the split reads in ink as well as in color. One row per year: the year, the squares,
   then a line of words with its source. From 700px the year sits in its own column. */
.seats{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.st-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 6px;padding:0;list-style:none;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.st-key li{display:flex;align-items:center;gap:7px}
.st-key i,.st-sq i{display:inline-block;width:12px;height:12px;border-radius:2px;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.st-key .a,.st-sq .a{border:2px solid var(--gold);background:transparent}
.st-key .b,.st-sq .b{background:var(--accent)}
.st-list{list-style:none;margin:0;padding:0}
.st-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px dashed var(--line-2)}
.st-yr{font:400 calc(28px*(1 + (var(--ts,1) - 1)*0.6))/1 var(--display);color:var(--accent)}
.st-sq{display:flex;flex-wrap:wrap;gap:4px}
.st-t{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.st-src{display:block;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
@media (min-width:700px){
  .seats{padding:22px 26px}
  .st-row{grid-template-columns:5em minmax(0,1fr);gap:8px 18px;align-items:start}
  .st-yr{grid-row:1/3}
  .st-sq i{width:14px;height:14px}
}
@media print{
  .st-key .a,.st-sq .a{border-color:#000}
  .st-key .b,.st-sq .b{background:#000}
}

/* The office's books (4 · Book money): AA's own figures for what New York asked of each member and
   how the office's years came out, set out like a page of an account book: year, entry and amount,
   with losses in red and in brackets, so they still read as losses in ink. The 1955 row adds Bill
   W.'s count of fifteen years as squares, filled for the years the groups paid in full and outlined
   in red for the years book money covered the deficit, in two groups since he didn't say which years
   were which. On a phone the year and amount share a line above the entry; from 700px the amounts
   sit in their own column behind a double red rule, as in an account book. */
:root{--ledger-red:#A8331F;--ledger-rule:#9FB4C2}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ledger-red:#E07A5F;--ledger-rule:#3E5260}}
:root[data-theme="dark"]{--ledger-red:#E07A5F;--ledger-rule:#3E5260}
.ledger{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px 6px}
.lg-head{display:none;margin:0;padding:0 0 8px;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid var(--ledger-rule)}
.lg-list{list-style:none;margin:0;padding:0}
.lg-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"yr amt" "t t";gap:4px 14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--ledger-rule)}
.lg-row:first-child{border-top:0}
.lg-yr{grid-area:yr;font:400 calc(24px*(1 + (var(--ts,1) - 1)*0.8))/1 var(--display);color:var(--accent)}
.lg-amt{grid-area:amt;justify-self:end;font:700 calc(18px*var(--ts,1))/1.2 var(--mono);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.lg-amt.loss{color:var(--ledger-red)}
.lg-t{grid-area:t;margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.lg-src{display:block;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.lg-sq{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.lg-sq i,.lg-key i{display:inline-block;width:14px;height:14px;border-radius:2px;box-sizing:border-box;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.lg-sq .a,.lg-key .a{background:var(--gold)}
.lg-sq .b,.lg-key .b{border:2px solid var(--ledger-red);background:transparent}
.lg-sq .a+.b{margin-left:10px}
.lg-key{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 0;padding:0;list-style:none;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.lg-key li{display:flex;align-items:center;gap:7px}
.lg-key i{width:12px;height:12px}
@media (min-width:700px){
  .ledger{padding:20px 26px 8px}
  .lg-head{display:grid;grid-template-columns:4.2em minmax(0,1fr) 9.5em;gap:18px}
  .lg-head span:last-child{text-align:right}
  .lg-row{grid-template-columns:4.2em minmax(0,1fr) 9.5em;grid-template-areas:"yr t amt";gap:6px 18px}
  .lg-row{position:relative}
  .lg-row::after{content:"";position:absolute;top:0;bottom:0;right:9.5em;border-left:3px double var(--ledger-red);pointer-events:none}
  .lg-amt{justify-self:stretch;padding-left:12px;text-align:right}
  .lg-sq,.lg-key{grid-column:2/3}
}
@media print{
  .ledger{border-color:#999}
  .lg-head{display:grid;grid-template-columns:4.2em minmax(0,1fr) 9.5em;gap:18px;border-bottom-color:#999}
  .lg-head span:last-child{text-align:right}
  .lg-row{grid-template-columns:4.2em minmax(0,1fr) 9.5em;grid-template-areas:"yr t amt";gap:6px 18px;border-top-color:#bbb}
  .lg-row{position:relative;break-inside:avoid}
  .lg-row::after{content:"";position:absolute;top:0;bottom:0;right:9.5em;border-left:3px double #000}
  .lg-amt{justify-self:stretch;padding-left:12px;text-align:right}
  .lg-amt.loss{color:#000}
  .lg-sq,.lg-key{grid-column:2/3}
  .lg-sq .a,.lg-key .a{background:#000}
  .lg-sq .b,.lg-key .b{border-color:#000}
}

/* From the group to New York (5 · Panel Two): the plan of 1950 as six numbered steps joined by a
   line, each with what the job is called today; from 900px, three across and two down. Under it, a
   small chart of who sat at the first three Conferences: one bar per panel across the years it
   served, so the overlap that kept half the delegates new each spring shows at a glance. */
.route{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
.rt-step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px;padding-bottom:18px}
.rt-step::before{content:"";position:absolute;left:19px;top:40px;bottom:0;width:2px;background:var(--line-2)}
.rt-step:last-child::before{display:none}
.rt-n{width:40px;height:40px;border-radius:50%;border:2px solid var(--accent);display:grid;place-items:center;font:400 calc(20px*var(--ts,1))/1 var(--display);color:var(--accent);background:var(--card);box-sizing:border-box}
.rt-b h3{margin:6px 0 4px;font:700 calc(19px*var(--ts,1))/1.3 var(--serif)}
.rt-b p{margin:0;font-size:calc(17px*var(--ts,1));line-height:1.5}
.rt-b .rt-now{margin-top:6px;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.panels{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 16px 18px}
.pn-head{margin:0 0 10px;font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.pn-grid{display:grid;grid-template-columns:5.6em repeat(3,minmax(0,1fr));gap:8px 4px;align-items:center}
.pn-yr{grid-row:1;font:400 calc(20px*var(--ts,1))/1 var(--display);color:var(--accent);text-align:center}
.pn-name{grid-column:1;font:400 calc(14px*var(--ts,1))/1.3 var(--sans);color:var(--ink-2)}
.pn-bar{display:block;padding:7px 8px;border-radius:6px;font:700 calc(13px*var(--ts,1))/1.2 var(--sans);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pn-bar.one{background:var(--accent);color:var(--paper)}
.pn-bar.two{background:var(--gold);color:var(--night)}
.pn-bar.three{background:transparent;border:2px dashed var(--line-2);color:var(--ink-2);padding:5px 6px}
@media (min-width:700px){
  .panels{padding:20px 26px 22px}
  .pn-grid{grid-template-columns:7em repeat(3,minmax(0,1fr));gap:10px 8px}
  .pn-bar{font-size:calc(14px*var(--ts,1))}
}
@media (min-width:900px){
  .route{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 28px}
  .rt-step{padding-bottom:0}
  .rt-step::before{display:none}
}
@media print{
  .rt-step{break-inside:avoid}
  .rt-step::before{background:#999}
  .rt-n{border-color:#000;color:#000;background:#fff}
  .panels{border-color:#999;break-inside:avoid}
  .pn-bar.one,.pn-bar.two{background:#fff;color:#000;border:2px solid #000;padding:5px 6px}
  .pn-bar.two{border-style:double;border-width:4px;padding:3px 4px}
}

/* Four rights (6 · The right of decision): Bill W.'s four principles of 1956 against the words of
   the Concepts (1962), their short form (1971) and the Conference charter (2013), as a table with a
   mark in each cell: filled where the right is named, half where it sits inside another right,
   empty where it isn't named. On a phone each right is a card with its four texts stacked, each
   labeled by year; from 900px it is a true table with the years across the top. */
.rights-box{margin-top:24px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 16px 6px}
.rt-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;padding:0;list-style:none;font:400 calc(13px*var(--ts,1))/1.4 var(--sans);color:var(--ink-2)}
.rt-key li{display:flex;align-items:center;gap:7px}
.mk{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;box-sizing:border-box;border:2px solid var(--accent);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.mk.on{background:var(--accent)}
.mk.in{background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.mk.off{border-color:var(--line-2);background:transparent}
.rights{width:100%;border-collapse:collapse}
.rights caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rights thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rights tbody,.rights tr,.rights th,.rights td{display:block}
.rights tr{padding:12px 0 6px;border-top:1px solid var(--line)}
.rights tr:first-child{border-top:0}
.rights th[scope="row"]{margin:0 0 6px;font:400 calc(22px*(1 + (var(--ts,1) - 1)*0.9))/1.2 var(--display);color:var(--accent);text-align:left}
.rights td{display:grid;grid-template-columns:14px minmax(0,1fr);gap:2px 10px;align-items:start;padding:7px 0;font-size:calc(16px*var(--ts,1));line-height:1.45}
.rights td::before{content:attr(data-y);grid-column:1/-1;font:400 calc(11.5px*var(--ts,1))/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.rights td .mk{margin-top:4px}
.rights td b{font-weight:700}
.rights td.off{color:var(--ink-2)}
@media (min-width:900px){
  .rights-box{padding:20px 26px 10px}
  .rights{display:table;table-layout:fixed}
  .rights thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .rights tbody{display:table-row-group}
  .rights tr{display:table-row;border-top:1px solid var(--line)}
  .rights th,.rights td{display:table-cell;vertical-align:top;padding:12px 12px 12px 0}
  .rights thead th{padding-bottom:10px;text-align:left;border-bottom:2px solid var(--line-2)}
  .rights thead th:first-child{width:150px}
  .rg-y{display:block;font:400 calc(22px*(1 + (var(--ts,1) - 1)*0.9))/1.1 var(--display);color:var(--accent)}
  .rights thead th:first-child .rg-y{font:400 calc(12px*var(--ts,1))/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding-top:8px}
  .rg-t{display:block;margin-top:3px;font:400 calc(12px*var(--ts,1))/1.3 var(--sans);color:var(--ink-2)}
  .rights th[scope="row"]{font-size:calc(20px*var(--ts,1));padding-top:12px}
  .rights td::before{content:none}
  .rights td .mk{display:block;margin:2px 0 8px}
  .rights td span{display:block;font-size:calc(15.5px*var(--ts,1))}
}
@media print{
  .rights-box{border-color:#999}
  .rights tr{break-inside:avoid}
  .mk{border-color:#000}
  .mk.on{background:#000}
  .mk.in{background:linear-gradient(90deg,#000 50%,#fff 50%)}
  .mk.off{border-color:#999;background:#fff}
}

/* The shelf (7 · The old files): what AA's old files held, and where, as the ends of archive boxes
   standing on shelves, each with a hand hole and a typed label: the year, the place, what was in it
   and the source. The shelf board under each row is drawn by the boxes themselves, so a row of any
   length reads as one plank. Two across on a phone, three from 700px, four from 1100px. Below, the
   Go deeper list of Bill's two drafts strikes his 1955 words and sets the 1957 ones under them. */
:root{--kraft:#C9A878;--kraft-dk:#8E6E46;--plank:#6A4A2C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--kraft:#5E4A32;--kraft-dk:#2E2318;--plank:#3E2C1C}}
:root[data-theme="dark"]{--kraft:#5E4A32;--kraft-dk:#2E2318;--plank:#3E2C1C}
.shelf{list-style:none;margin:28px 0 12px;padding:0 8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
.bx{position:relative;display:flex;flex-direction:column;background:var(--kraft);border-radius:3px 3px 0 0;padding:10px 9px 10px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.08);-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bx::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-12px;height:12px;background:var(--plank);border-radius:2px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.bx-hole{display:block;flex:none;width:46%;height:11px;margin:2px auto 10px;border-radius:999px;background:var(--kraft-dk)}
.bx-lab{flex:1;background:var(--mat);border:1px solid var(--line-2);padding:10px 10px 9px}
.bx-lab p{margin:0}
.bx-yr{font:400 calc(26px*(1 + (var(--ts,1) - 1)*0.7))/1 var(--display);color:var(--accent)}
.bx-where{margin-top:7px!important;font:400 calc(11.5px*var(--ts,1))/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.bx-what{margin-top:6px!important;font-size:calc(15px*var(--ts,1));line-height:1.45;overflow-wrap:break-word}
.bx-src{margin-top:7px!important;font:400 calc(12px*var(--ts,1))/1.35 var(--sans);color:var(--ink-2)}
@media (min-width:700px){.shelf{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 18px}.bx::after{left:-9px;right:-9px}}
@media (min-width:1100px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}}
.drafts{list-style:none;padding:0}
.drafts li{margin:0 0 12px}
.drafts del{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--accent)}
.drafts ins{display:block;margin-top:3px;padding-left:10px;border-left:3px solid var(--gold);text-decoration:none}
@media print{
  .bx{background:#fff;border:1px solid #999;box-shadow:none}
  .bx::after{background:#000;height:3px;bottom:-8px}
  .bx-hole{background:#fff;border:1px solid #999}
  .bx-lab{border-color:#bbb}
  .shelf li{break-inside:avoid}
  .drafts ins{border-left-color:#000}
}

/* Upside down (Legacy): AA's service structure today as AA's pamphlets draw it, a triangle standing
   on its point, groups across the top and the board and its offices at the bottom. Eight bands, each
   with a numbered pin, shaded from the paper toward the accent as the layers narrow; the numbered
   list beside it carries the words and the figures, so the triangle itself is hidden from screen
   readers. Stacked on a phone; from 900px the triangle stands beside the list. */
.tri-box{margin-top:24px;display:grid;gap:24px}
.tri{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tri li{height:46px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);background:color-mix(in srgb,var(--accent) var(--p),var(--card));-webkit-print-color-adjust:exact;print-color-adjust:exact}
.tri li:nth-child(1){--p:14%}.tri li:nth-child(2){--p:24%}.tri li:nth-child(3){--p:34%}.tri li:nth-child(4){--p:44%}
.tri li:nth-child(5){--p:60%;color:var(--paper)}.tri li:nth-child(6){--p:72%;color:var(--paper)}.tri li:nth-child(7){--p:84%;color:var(--paper)}.tri li:nth-child(8){--p:96%;color:var(--paper)}
.tri .tri-n{width:22px;height:22px;border:1.5px solid currentColor;font-size:calc(11.5px*var(--ts,1));line-height:19px;background:transparent;color:inherit}
.tri-l{font:600 calc(14px*var(--ts,1))/1 var(--sans);letter-spacing:.02em}
.tri-n{flex:none;display:inline-block;box-sizing:border-box;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--card);font:700 calc(13px*var(--ts,1))/30px var(--sans);text-align:center}
.tri-key{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.tri-key li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:0 14px}
.tri-key h3{margin:3px 0 4px;font:700 calc(19px*var(--ts,1))/1.3 var(--serif)}
.tri-key p{margin:0;font-size:calc(16px*var(--ts,1));line-height:1.5}
.tri-key .tri-num{margin-top:6px;font:400 calc(13.5px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
@media (min-width:900px){
  .tri-box{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;align-items:start}
  .tri{position:sticky;top:calc(var(--stick) + 12px)}
  .tri li{height:54px}
}
@media print{
  .tri-box{display:block}
  .tri{margin-bottom:16px;break-inside:avoid}
  .tri li{background:#ddd;color:#000}
  .tri li:nth-child(n+5){background:#777;color:#fff}
  .tri-n{background:#fff;color:#000;border:1.5px solid #000;line-height:27px}
  .tri-key li{break-inside:avoid}
}

/* The Foundation's chart (5 · Book money, Go deeper, The reserve): "How the Alcoholic Foundation
   Serves A.A." redrawn from its pamphlet of 1950. A small tree that fits a Go deeper column: the
   groups, an arrow, the Foundation, an arrow, then a rail down the left with the book, the office
   and the Grapevine hanging off it. Borders and words only, so it reads the same in ink. */
.fd{margin:0;padding:16px 16px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.fd-title{margin:0 0 12px!important;font:400 calc(12.5px*var(--ts,1))/1.4 var(--mono)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.fd-box{display:block;padding:10px 12px;background:var(--mat);border:1px solid var(--line-2);border-radius:8px}
.fd-box b{display:block;font:400 calc(19px*var(--ts,1))/1.25 var(--display)}
.fd-box span{display:block;margin-top:4px;font-size:calc(15px*var(--ts,1));line-height:1.45;color:var(--ink-2)}
.fd-arrow{position:relative;width:0;height:24px;margin-left:22px;border-left:2px solid var(--ink-2)}
.fd-arrow::after{content:"";position:absolute;left:-7px;bottom:-1px;border:6px solid transparent;border-top:7px solid var(--ink-2);border-bottom:0}
.fd-three{list-style:none;margin:0 0 0 22px;padding:6px 0 0 16px;border-left:2px solid var(--ink-2);display:grid;gap:10px}
.fd-three .fd-box{position:relative}
.fd-three .fd-box::before{content:"";position:absolute;left:-17px;top:20px;width:15px;height:0;border-top:2px solid var(--ink-2)}
.fd figcaption{margin-top:12px;font:400 calc(13px*var(--ts,1))/1.45 var(--sans);color:var(--ink-2)}
@media print{
  .fd,.fd-box{border-color:#999}
  .fd-arrow{border-left-color:#666}
  .fd-three .fd-box::before{border-top-color:#666}
  .fd-arrow::after{border-top-color:#666}
  .fd-three{border-left-color:#666}
}