/* =====================================================================
   Paper and Ink · essays/the-rules-are-in-dispute.css
   "The Rules Are in Dispute. The Record Is Not.": the figures only this dispatch uses.
   Loaded after the shared stylesheets; everything shared lives in css/.
   ===================================================================== */

/* Layout: one 64ch reading column on grained paper; two static paper objects break out to 860px:
   a docket strip of three dates with the open question beneath (Figure 1)
   and a mapping of rules against the facts a record would hold, on taped graph paper (Figure 2).
   Gold = which rule will survive; blue = what every rule will ask.
   Every rule below is scoped to its figure so none of it can restyle the generated Read next block.
   Labels stay at 11px or larger. */

/* ---- footnote markers -------------------------------------------------- */
sup.ref { font-family: var(--sans); font-size: .62em; line-height: 0; margin-left: 1px; }
sup.ref a { text-decoration: none; color: var(--life); padding: 0 1px; }
sup.ref a:hover { text-decoration: underline; }
.sources li:target { color: var(--ink); background: var(--life-soft); }

/* ---- Figure 1: the docket strip ------------------------------------------------ */
.strip { max-width: 760px; padding: 1.2rem 1.3rem 1rem; background: var(--noise), var(--slip); color: var(--slip-ink); border-top: 5px solid var(--graphite); transform: rotate(-.4deg); }
.strip .dates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.strip .dates li { padding: .2rem 0 .8rem; border-bottom: 2px solid var(--once); animation: fade .5s ease both; }
.strip .dates li:nth-child(2) { animation-delay: .25s; }
.strip .dates li:nth-child(3) { animation-delay: .5s; }
.strip .d { display: block; font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--slip-once); }
.strip .e { display: block; margin-top: .25rem; font-family: var(--serif); font-size: 1rem; line-height: 1.3; }
.strip .open { display: flex; gap: .9rem; align-items: baseline; margin: .9rem 0 0; color: var(--slip-life); animation: fade .5s ease .8s both; }
.strip .open .d { color: var(--slip-life); }
.strip .open .e { margin: 0; font-style: italic; font-size: 1.08rem; }

/* ---- Figure 2: the mapping ------------------------------------------------------ */
.grid {
  position: relative; max-width: 760px; padding: 1.5rem 1.3rem 1.1rem; transform: rotate(.25deg); color: var(--slip-ink);
  background:
    var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px) 0 0 / 12px 12px,
    var(--sheet);
}
.grid::before, .grid::after { content: ""; position: absolute; top: -11px; width: 84px; height: 24px; background: var(--noise), var(--tape); }
.grid::before { left: 22px; transform: rotate(-5deg); }
.grid::after { right: 22px; transform: rotate(4deg); }
.grid .gh { margin: 0 0 .8rem; font-family: var(--sans); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--graphite); }
.grid table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid thead th { font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-align: center; vertical-align: bottom; padding: 0 .3rem .5rem; color: var(--slip-once); border-bottom: 1.5px solid var(--graphite); }
.grid thead th:first-child { width: 34%; text-align: left; color: var(--graphite); }
.grid tbody th { font-family: var(--serif); font-size: 1rem; font-weight: 500; text-align: left; padding: .4rem .5rem .4rem 0; color: var(--slip-life); border-bottom: 1px dashed var(--grid-major); }
.grid td { text-align: center; padding: .4rem .2rem; border-bottom: 1px dashed var(--grid-major); font-family: var(--mono); font-size: .74rem; }
.grid td.y { color: var(--slip-life); font-weight: 600; }
.grid td.y::before { content: "\25CF\00a0"; }
.grid thead .sm { display: none; }

@media (max-width: 600px) {
  .strip { padding: 1rem .85rem .9rem; }
  .strip .dates { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .strip .dates li { display: flex; gap: .8rem; align-items: baseline; padding-bottom: .5rem; }
  .strip .dates .e { margin: 0; }
  .strip .d { flex: 0 0 3.6rem; }
  .grid { padding: 1.3rem .7rem .9rem; }
  .grid thead th { font-size: .7rem; padding: 0 .1rem .4rem; }
  /* short column labels on a phone; the full label stays for screen readers */
  .grid thead .lg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .grid thead .sm { display: inline; }
  .grid thead th:first-child { width: 36%; }
  .grid tbody th { font-size: .9rem; }
  /* the dot alone carries the mark on a phone; the word stays for screen readers */
  .grid td.y { font-size: 0; }
  .grid td.y::before { content: "\25CF"; font-size: .9rem; }
}