/* ============================================================================
   Information: the long read, and the equation of time made an instrument.

   Robert's six essays are the best writing on the whole site, so this page is
   built as a reading page first: one measured column, big quiet serif headings,
   engravings printed straight onto the parchment rather than boxed.

   The one thing that breaks the column is the equation of time. It is an
   instrument, so it gets the width an instrument needs.
   ============================================================================ */

/* ------------------------------------------------------------ the column -- */

.info-col{max-width:624px;margin-inline:auto}
.info-col .prose{max-width:none}
.info-col .prose p{font-size:var(--t-md);line-height:1.62;margin:0 0 1.05em}
.info-col .prose p:last-child{margin-bottom:0}

.info-sec{scroll-margin-top:92px}
.info-sec h2{margin-bottom:var(--s4)}
.info-sub{scroll-margin-top:92px;margin-top:var(--s6)}
.info-sec h2+.info-sub{margin-top:0}
.info-sub h3{font-size:var(--t-lg);margin-bottom:var(--s3)}

/* opening ------------------------------------------------------------------ */

.info-open h1{margin-bottom:var(--s3)}
.info-open .lede{max-width:34em}

.info-toc{margin-top:var(--s5)}
.info-toc ol{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,auto);grid-auto-flow:column;
  gap:var(--s2) var(--s4);
  counter-reset:toc;
}
.info-toc li{
  counter-increment:toc;
  display:flex;gap:12px;align-items:baseline;
  border-top:1px solid var(--ground-3);padding-top:9px;
}
.info-toc li::before{
  content:counter(toc);
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  font-variant-numeric:tabular-nums;flex:none;
}
.info-toc a{font-size:var(--t-base);text-decoration-color:var(--ground-3)}
.info-toc a:hover{text-decoration-color:var(--brass)}

/* figures ------------------------------------------------------------------ */
/* One uniform 200px plate rail down the left, legend beside it. The engravings
   are line art on white, so they multiply into the parchment and read as if
   they were printed on the page. The oil painting gets a mat instead. */

.info-fig{
  display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:var(--s3);align-items:start;
  margin:var(--s5) 0;
}
.info-fig picture{display:block;max-width:var(--figw,200px)}
.info-fig img{width:100%;height:auto}
.info-fig figcaption{
  font-family:var(--sans);font-size:var(--t-sm);line-height:1.55;color:var(--ink-2);
}
/* Line art scanned onto near white paper. Grayscale flattens the scan's warm
   cast to a neutral 254, so multiply drops the paper into the parchment exactly
   and the engraving reads as if it were printed on this page. */
.info-fig--line picture{mix-blend-mode:multiply}
.info-fig--line img{filter:grayscale(1)}
.info-fig--plate picture{
  max-width:200px;background:var(--ground-2);padding:16px;
  display:grid;place-items:center;
}
.info-fig--plate img{width:auto;max-width:var(--figw,200px)}

@media (max-width:620px){
  .info-fig{grid-template-columns:1fr;gap:var(--s2)}
  .info-fig picture{margin-bottom:6px}
}

/* the solstice pair -------------------------------------------------------- */

.info-solstice{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s4);margin-top:var(--s4);
}
.info-solstice h3{font-size:var(--t-md);margin-bottom:var(--s2)}
.info-solstice p{margin:0 0 .6em;color:var(--ink-2);font-size:var(--t-base);line-height:1.55}
.info-solstice p:last-child{margin-bottom:0}
@media (max-width:560px){.info-solstice{grid-template-columns:1fr;gap:var(--s3)}}

/* printable documents ------------------------------------------------------ */

.info-doc{
  margin:var(--s4) 0 0;padding-top:var(--s3);
  border-top:1px solid var(--ground-3);
  font-family:var(--sans);font-size:var(--t-sm);
}
.info-doc a{font-weight:500}
.info-doc .meta{display:block;margin-top:3px}

/* ============================================================ the instrument */

.eot-wrap{max-width:940px;margin-inline:auto}
.eot{margin:var(--s5) 0 0}

.eot-frame{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px}

.eot-yaxis{
  grid-column:1;grid-row:1;position:relative;width:1.9em;
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
}
.eot-yaxis span{
  position:absolute;right:0;transform:translateY(-50%);
  font-variant-numeric:tabular-nums;line-height:1;
}

.eot-plot{
  grid-column:2;grid-row:1;position:relative;
  aspect-ratio:1000/300;
  touch-action:pan-y;cursor:ew-resize;
}
.eot-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* The box is stretched, the ink is not: every stroke is non-scaling, and every
   piece of text lives outside the SVG as real HTML. */
.eot-svg line,.eot-svg path{vector-effect:non-scaling-stroke}
.eot-gridline{stroke:var(--ground-3);stroke-width:1;fill:none}
.eot-zero{stroke:var(--ink-3);stroke-width:1}
.eot-area{fill:rgba(138,109,40,.1);stroke:none}
.eot-curve{fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round}

/* the four dates Robert names, marked on the curve itself */
.eot-pin{position:absolute;top:0;bottom:0;width:1px;background:rgba(138,109,40,.3)}
.eot-pin i{
  position:absolute;left:50%;width:7px;height:7px;
  background:var(--brass);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* the reading index */
.eot-cursor{position:absolute;top:0;bottom:0;width:1px;background:var(--ink-3)}
.eot-cursor i{
  position:absolute;left:50%;width:11px;height:11px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 3px var(--ground);
  transform:translate(-50%,-50%);
}

.eot-months{
  grid-column:2;grid-row:2;display:flex;
  border-top:1px solid var(--ink-3);
  padding-top:7px;
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);line-height:1;
}
.eot-months>span{flex-basis:0;flex-shrink:1;text-align:center;overflow:hidden;white-space:nowrap}
@media (max-width:620px){
  .eot-months{font-size:11px}
  .eot-months>span>span:last-child{display:none}
}

.eot-pinrow{
  grid-column:2;grid-row:3;position:relative;height:24px;
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-2);line-height:1;
}
.eot-pinrow b{position:absolute;top:7px;transform:translateX(-50%);white-space:nowrap;font-weight:400}
.eot-pinrow b.eot-pinrow--end{transform:translateX(-100%)}
@media (max-width:620px){.eot-pinrow{font-size:11px}}

/* the scrubber. Hidden until the script proves it works, so a page with no
   JavaScript never shows a control that does nothing. */
.eot-scrub{grid-column:2;grid-row:4;display:none;margin-top:6px}
.eot.is-live .eot-scrub{display:block}

.eot-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:26px;margin:0;padding:0;
  background:transparent;border:0;min-height:0;border-radius:0;
  display:block;cursor:ew-resize;
}
.eot-range:focus{box-shadow:none;border:0;outline:none}
.eot-range:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.eot-range::-webkit-slider-runnable-track{
  height:26px;background:linear-gradient(to bottom,transparent 12px,var(--ground-3) 12px 13px,transparent 13px);
}
.eot-range::-moz-range-track{
  height:26px;background:linear-gradient(to bottom,transparent 12px,var(--ground-3) 12px 13px,transparent 13px);
}
/* 24 by 26 hit area, a 6px brass index arm drawn inside it */
.eot-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:26px;border:0;border-radius:0;margin-top:0;
  background:linear-gradient(to right,transparent 0 9px,var(--brass) 9px 15px,transparent 15px);
}
.eot-range::-moz-range-thumb{
  width:24px;height:26px;border:0;border-radius:0;
  background:linear-gradient(to right,transparent 0 9px,var(--brass) 9px 15px,transparent 15px);
}

/* the reading ------------------------------------------------------------- */

.eot-foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s4) var(--s5);margin-top:var(--s4);align-items:start;
}
.eot-out__date{font-size:var(--t-xl);line-height:1.1;margin:0 0 6px}
.eot-out__today{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  display:inline-block;vertical-align:middle;margin-left:8px;
}
.eot-out__today[hidden]{display:none}
.eot-out__act{
  font-family:var(--sans);font-size:var(--t-lg);font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;margin:0 0 8px;line-height:1.15;
}
.eot-out__note{margin:0;color:var(--ink-2);max-width:36em}
.eot-hint{display:none}
.eot.is-live .eot-hint{display:block}

.eot figcaption{margin:0;color:var(--ink-2);max-width:38em}
.eot-legend{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  margin:var(--s2) 0 0;line-height:1.55;
}

@media (max-width:700px){
  .eot-plot{aspect-ratio:3/2}
  .eot-foot{grid-template-columns:1fr;gap:var(--s3)}
}

/* the year in a table, so the page is complete with no script at all -------- */

.eot-table-wrap{max-width:420px;margin-top:var(--s5)}
.eot-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--t-xs)}
.eot-table caption{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-3);
  text-align:left;padding-bottom:9px;
}
.eot-table th,.eot-table td{
  padding:8px 0;border-bottom:1px solid var(--ground-3);
  text-align:right;font-variant-numeric:tabular-nums;font-weight:400;color:var(--ink-2);
}
.eot-table thead th{color:var(--ink-3)}
.eot-table th:first-child,.eot-table td:first-child{text-align:left;color:var(--ink)}
.eot-table tbody tr:last-child th,.eot-table tbody tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------- the mottoes */

.info-wide{max-width:940px;margin-inline:auto}
.info-mottoes-head{
  font-size:var(--t-lg);margin:var(--s6) 0 0;
  max-width:24em;
}
.info-mottoes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5) var(--s4);margin-top:var(--s5);
}
.info-motto p{margin:0}
.info-motto .motto{font-size:var(--t-base);line-height:1.5}
.info-motto__tr{
  display:block;font-style:normal;font-family:var(--sans);
  font-size:var(--t-xs);color:var(--ink-2);line-height:1.5;margin-top:7px;
}
.info-motto__on{
  display:block;font-family:var(--sans);font-style:normal;font-size:var(--t-xs);
  color:var(--ink-3);margin-top:7px;
}
.info-motto__on a{color:var(--ink-2)}
@media (max-width:860px){.info-mottoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.info-mottoes{grid-template-columns:1fr;gap:var(--s4)}}

/* ----------------------------------------------------------------- the coda */

.info-coda{background:var(--ground-2);color:var(--ink)}
.info-coda h2{color:var(--ink)}
.info-coda .prose p{font-size:var(--t-md);line-height:1.68;color:var(--ink)}
.info-coda .info-note{
  margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--ground-3);
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-2);line-height:1.6;
}

@media (max-width:620px){
  .info-col .prose p,.info-coda .prose p{font-size:18px}
  .info-toc ol{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

@media print{
  .info-toc,.eot-scrub{display:none}
  .eot-plot{aspect-ratio:1000/300}
}