/* "What needs to change" only: the quote stack, the record, the levers,
   the cost table, the objections and the reading list. */

/* ---------- the quote stack beside the opening argument ---------- */
.says{display:flex;flex-direction:column;gap:18px}
.says blockquote{
  margin:0;border-left:3px solid var(--copper);
  padding:2px 0 2px 16px;
}
.says blockquote p{
  font-family:var(--f-body);font-style:italic;font-size:1.01rem;line-height:1.5;color:var(--ink);
}
.says blockquote p b{font-style:normal;font-weight:600}
.says blockquote cite{
  display:block;margin-top:8px;font-style:normal;
  font-family:var(--f-display);font-size:.72rem;font-weight:600;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
.says blockquote cite a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.says blockquote cite a:hover{color:var(--copper);border-color:var(--copper)}
.says > .srcnote{
  margin-top:6px;border-top:1px solid var(--rule);padding-top:15px;
}
.says > .srcnote a{color:var(--ink-3)}
.says > .srcnote a:hover{color:var(--copper)}

/* ---------- the record: a dated list of instruments ---------- */
.record{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.record .item{
  display:grid;grid-template-columns:190px minmax(0,1fr);
  gap:clamp(18px,3vw,40px);
  padding-block:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--rule);
}
@media (max-width:820px){
  .record .item{grid-template-columns:1fr;gap:12px}
}
.record .when{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
@media (max-width:820px){ .record .when{flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap} }
.record .d{
  font-family:var(--f-display);font-size:.9rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.record .tag{
  font-family:var(--f-display);font-size:.66rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 9px;border-radius:3px;line-height:1.3;
  border:1px solid currentColor;
}
/* in force */
.record .tag.on{color:var(--patina)}
/* in force but incomplete */
.record .tag.part{color:var(--copper)}
/* in force and time-limited */
.record .tag.clock{color:var(--steel)}
/* announced, not built */
.record .tag.soon{color:var(--ink-3)}
/* imposed nothing, or not law */
.record .tag.off{color:var(--ink-2);background:var(--surface-2)}

.record .what h3{font-size:1.1rem;letter-spacing:-.012em}
.record .what p{margin-top:9px;font-size:1rem;line-height:1.58;color:var(--ink-2)}
.record .what p b{color:var(--ink);font-weight:600}
.record .what .srcnote{margin-top:11px;font-size:.76rem;line-height:1.7}
.record .what .srcnote a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.record .what .srcnote a:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- the levers ---------- */
.levers{display:flex;flex-direction:column;gap:clamp(30px,3.6vw,46px)}
.lever{
  display:grid;
  grid-template-columns:92px minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(20px,3vw,38px);
  align-items:start;
  padding-top:clamp(24px,2.8vw,32px);
  border-top:2px solid var(--rule);
}
.lever:first-child{border-top-color:var(--copper)}
@media (max-width:1000px){
  .lever{grid-template-columns:72px minmax(0,1fr)}
  .lever .side{grid-column:1/-1}
}
@media (max-width:560px){
  .lever{grid-template-columns:1fr;gap:16px}
  .lever .rank{flex-direction:row;align-items:center;gap:12px}
}
.lever .rank{display:flex;flex-direction:column;gap:10px}
.lever .num{
  font-family:var(--f-display);font-weight:800;font-size:2.5rem;line-height:.9;
  letter-spacing:-.045em;color:var(--copper);font-variant-numeric:tabular-nums;
}
.lever .grade{
  font-family:var(--f-display);font-size:.63rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;line-height:1.35;max-width:9em;
}
.lever .grade.a{color:var(--patina)}
.lever .grade.b{color:var(--steel)}
.lever .grade.c{color:var(--ink-3)}

.lever .main h3{font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:700;letter-spacing:-.022em}
.lever .stand{
  margin-top:10px;font-family:var(--f-body);font-style:italic;
  font-size:1.09rem;line-height:1.48;color:var(--copper);
}
.lever .main p{font-size:1.02rem;line-height:1.62;color:var(--ink-2)}
.lever .main .stand + p{margin-top:16px}
.lever .main p + p{margin-top:.9em}
.lever .main p b{color:var(--ink);font-weight:600}
.lever .main .fair{
  margin-top:18px;background:var(--surface-2);border-left:3px solid var(--steel);
  padding:16px 18px;font-size:.98rem;
}
.lever .main .fair b{color:var(--ink)}
.lever .main .srcnote{margin-top:16px;font-size:.77rem;line-height:1.75}
.lever .main .srcnote a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.lever .main .srcnote a:hover{color:var(--copper);border-color:var(--copper)}

/* the figure panel beside each lever */
.lever .facts{
  background:var(--surface);border:1px solid var(--rule);
  padding:22px 20px;display:flex;flex-direction:column;gap:14px;
}
.lever .facts .row{display:flex;flex-direction:column;gap:3px}
.lever .facts .n{
  font-family:var(--f-display);font-weight:800;font-size:1.34rem;line-height:1;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.lever .facts .l{font-size:.88rem;line-height:1.42;color:var(--ink-2)}
@media (max-width:1000px){
  .lever .facts{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
    padding:0;background:var(--rule);
  }
  .lever .facts .row{background:var(--surface);padding:18px 16px;gap:6px}
}
@media (max-width:640px){
  .lever .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .lever .facts{grid-template-columns:1fr}
}

/* ---------- the cost table ---------- */
table.costs{
  width:100%;border-collapse:collapse;
  border:1px solid var(--rule);background:var(--surface);
}
table.costs th,table.costs td{
  text-align:left;padding:13px 15px;border-bottom:1px solid var(--rule);
  font-size:.93rem;line-height:1.45;vertical-align:top;
}
table.costs thead th{
  font-family:var(--f-display);font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);
  border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
table.costs tbody tr:last-child th,table.costs tbody tr:last-child td{border-bottom:0}
table.costs td{color:var(--ink-2)}
table.costs td.n{
  font-family:var(--f-display);font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
table.costs .q{
  display:block;margin-top:3px;font-family:var(--f-display);font-weight:500;
  font-size:.74rem;letter-spacing:.01em;color:var(--ink-3);
}
table.costs td a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong);font-family:var(--f-display);font-size:.82rem}
table.costs td a:hover{color:var(--copper);border-color:var(--copper)}
/* Narrow screens: the header row is dropped and each cell carries its own
   label, so nothing has to scroll sideways. */
@media (max-width:760px){
  table.costs,table.costs tbody,table.costs tr,table.costs td{display:block}
  table.costs thead{display:none}
  table.costs tbody tr{border-bottom:1px solid var(--rule);padding:15px 16px}
  table.costs tbody tr:last-child{border-bottom:0}
  table.costs td{border:0;padding:3px 0}
  table.costs td:first-child{
    font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:1rem;
    line-height:1.3;margin-bottom:5px;
  }
  table.costs td[data-label]::before{
    content:attr(data-label);
    font-family:var(--f-display);font-size:.66rem;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);margin-right:8px;
  }
  table.costs td.n{font-size:1.05rem}
}

/* ---------- the objections ---------- */
.objs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
/* An odd number of objections would otherwise leave a grey half-row. The last
   one takes the full width instead. */
.objs .obj:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:900px){
  .objs{grid-template-columns:1fr}
  .objs .obj:last-child:nth-child(odd){grid-column:auto}
}
.obj{background:var(--surface);padding:26px 24px}
.obj h3{font-size:1.04rem;line-height:1.28}
.obj p{margin-top:11px;font-size:.97rem;line-height:1.58;color:var(--ink-2)}
.obj p b{color:var(--ink);font-weight:600}
.obj .srcnote{margin-top:13px;font-size:.75rem}
.obj .srcnote a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.obj .srcnote a:hover{color:var(--copper);border-color:var(--copper)}

.fairest{
  margin-top:26px;background:var(--surface-2);
  border-left:3px solid var(--patina);padding:26px 26px 24px;
}
.fairest p{font-size:1rem;line-height:1.6;color:var(--ink-2)}
.fairest .eyebrow{margin-bottom:10px}
.fairest p b{color:var(--ink);font-weight:600}
.fairest .srcnote{margin-top:12px;font-size:.76rem}
.fairest .srcnote a{color:var(--ink-3)}
.fairest .srcnote a:hover{color:var(--copper)}

/* ---------- the reading list ---------- */
.reading{align-items:start}
.reading > div > .eyebrow{margin-bottom:16px}
ul.readlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
ul.readlist li{border-top:1px solid var(--rule);padding-top:16px}
ul.readlist li > a{
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.3;
  letter-spacing:-.012em;color:var(--ink);text-decoration:none;
  display:block;
}
ul.readlist li > a:hover{color:var(--copper)}
ul.readlist .by{
  display:block;margin-top:7px;
  font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;
}
ul.readlist .gist{
  display:block;margin-top:9px;font-size:.95rem;line-height:1.55;color:var(--ink-2);
}

/* ---------- the cost tally beside the opening argument ---------- */
.tally{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--copper);padding:24px 22px}
.tally .k{
  font-family:var(--f-display);font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--copper);line-height:1.4;margin-bottom:18px;
}
.tally .row{display:flex;flex-direction:column;gap:4px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
.tally .row:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
.tally .n{
  font-family:var(--f-display);font-weight:800;font-size:1.36rem;line-height:1;
  letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.tally .l{font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.tally .srcnote{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:.75rem;line-height:1.7}
.tally .srcnote a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.tally .srcnote a:hover{color:var(--copper);border-color:var(--copper)}

/* ---------- the round-trip steps ----------
   Moved here from home.css when the round trip moved to this page; the home
   page now links across to it rather than carrying it. */
.trip{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.step{background:var(--surface);padding:24px 22px;display:flex;flex-direction:column;gap:10px}
.step .k{display:flex;align-items:center;gap:9px}
.step .k b{font-family:var(--f-display);font-size:.68rem;font-weight:600;color:#fff;background:var(--navy);width:21px;height:21px;display:grid;place-items:center;border-radius:2px;flex:0 0 auto}
.step.out .k b{background:var(--accent-solid)}
.step .k span{font-family:var(--f-display);font-size:.73rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.step h3{font-size:1rem}
.step p{font-size:.94rem;color:var(--ink-2);line-height:1.5}
.step .fig{font-family:var(--f-display);font-size:.86rem;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- "it depends on the ore" matrix ---------- */
.askbox{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--steel);padding:24px 22px}
.askbox .k{
  font-family:var(--f-display);font-size:.82rem;font-weight:700;letter-spacing:.06em;
  color:var(--ink);line-height:1.35;margin-bottom:12px;
}
.askbox p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.askbox p + p{margin-top:.85em}
.askbox b{color:var(--ink);font-weight:600}
.askbox .srcnote{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:.75rem}
.askbox .srcnote a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.askbox .srcnote a:hover{color:var(--copper);border-color:var(--copper)}

.oremx-wrap{margin-top:8px}
table.oremx{width:100%;border-collapse:collapse;border:1px solid var(--rule);background:var(--surface)}
table.oremx thead th{
  font-family:var(--f-display);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:var(--surface-2);
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
table.oremx tbody th{
  text-align:left;padding:16px 14px 6px;vertical-align:top;
  font-family:var(--f-display);font-weight:700;font-size:.99rem;color:var(--ink);line-height:1.3;
}
table.oremx tbody th .eg{
  display:block;margin-top:3px;font-size:.76rem;font-weight:500;letter-spacing:.02em;color:var(--ink-3);
}
table.oremx td.c{padding:16px 10px 6px;vertical-align:top}
table.oremx td.c span{
  display:block;padding:8px 10px;border-radius:3px;text-align:center;
  font-family:var(--f-display);font-size:.78rem;font-weight:600;line-height:1.25;
  border:1px solid transparent;
}
/* in the United States */
table.oremx td.c.us span{background:color-mix(in srgb,var(--patina) 15%,transparent);color:var(--patina);border-color:color-mix(in srgb,var(--patina) 45%,transparent)}
/* abroad */
table.oremx td.c.off span{background:color-mix(in srgb,var(--copper) 14%,transparent);color:var(--copper);border-color:color-mix(in srgb,var(--copper) 45%,transparent)}
/* split, or under construction */
table.oremx td.c.part span{background:color-mix(in srgb,var(--steel) 16%,transparent);color:var(--steel);border-color:color-mix(in srgb,var(--steel) 45%,transparent)}
/* this chain has no such step */
table.oremx td.c.none span{background:transparent;color:var(--ink-3);border-style:dashed;border-color:var(--rule-strong);font-style:italic;font-weight:500}

table.oremx tr.notes td{padding:2px 14px 18px;border-bottom:1px solid var(--rule)}
table.oremx tr:last-child td{border-bottom:0}
table.oremx tr.notes p{font-size:.92rem;line-height:1.55;color:var(--ink-2);max-width:96ch}
table.oremx tr.notes b{color:var(--ink);font-weight:600}
table.oremx tr.notes a{
  font-family:var(--f-display);font-size:.76rem;font-weight:600;letter-spacing:.02em;
  color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong);white-space:nowrap;
}
table.oremx tr.notes a:hover{color:var(--copper);border-color:var(--copper)}

.orekey{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:16px;
  font-family:var(--f-display);font-size:.78rem;font-weight:600;color:var(--ink-3);
}
.orekey span{display:inline-flex;align-items:center;gap:8px}
.orekey i.k{width:12px;height:12px;border-radius:2px;border:1px solid transparent;flex:0 0 auto}
.orekey i.k.us{background:color-mix(in srgb,var(--patina) 15%,transparent);border-color:var(--patina)}
.orekey i.k.off{background:color-mix(in srgb,var(--copper) 14%,transparent);border-color:var(--copper)}
.orekey i.k.part{background:color-mix(in srgb,var(--steel) 16%,transparent);border-color:var(--steel)}
.orekey i.k.none{background:transparent;border-style:dashed;border-color:var(--rule-strong)}

/* Narrow: each ore becomes a card, its four steps stacked and labelled. */
@media (max-width:900px){
  table.oremx,table.oremx tbody,table.oremx tr,table.oremx th,table.oremx td{display:block}
  table.oremx thead{display:none}
  table.oremx tbody th{padding:18px 16px 12px}
  table.oremx td.c{
    display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;
    padding:3px 16px;
  }
  table.oremx td.c::before{
    content:attr(data-label);
    font-family:var(--f-display);font-size:.64rem;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink-3);
  }
  table.oremx td.c span{text-align:left}
  table.oremx tr.notes td{padding:12px 16px 20px}
}
@media (max-width:420px){
  table.oremx td.c{grid-template-columns:1fr;gap:3px}
}

/* ---------- the byproduct note ---------- */
.hostage{margin-top:30px;background:var(--surface-2);border-left:3px solid var(--copper);padding:26px 26px 24px}
.hostage .eyebrow{margin-bottom:11px}
.hostage p{font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:82ch}
.hostage p + p{margin-top:.9em}
.hostage b{color:var(--ink);font-weight:600}

/* The one line a skimmer has to read: the problem stated flat, directly under
   the first heading on the page. */
.probline{
  margin:0 0 20px;padding:18px 22px;
  background:color-mix(in srgb,var(--copper) 10%,transparent);
  border-left:3px solid var(--copper);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.08rem,2.1vw,1.42rem);line-height:1.38;
  letter-spacing:-.012em;color:var(--ink);max-width:56ch;
}