/* Time Roots (#history). Owned by js/journal-history.js.
   Shared journal rules live in styles-journal.css; the page is a `journal` container (breakpoints 879px, 599px).
   The slice of trunk is an inked instrument beside a reader of dated field notes. */

/* The title's wash: a round dab of umber under the R, like the heart of a ring, and a smaller one trailing off the s. */
.j-head--history .j-wash--a { --x: -.3em; --y: -.1em; --s: 1.22em; --r: 28deg; --o: .55; }
.j-head--history .j-wash--b { display: block; --x: 86%; --y: .38em; --s: .5em; --r: -40deg; --o: .42; }

/* ---------- the study: the slice on the left, the reader on the right ---------- */
.roots-study { --roots-ink: #5b3620; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 60px; align-items: start; margin-top: 30px; }
/* The slice stays in view while a long entry is read beside it. */
.roots-dial-col { position: sticky; top: 84px; padding-top: 30px; }
.roots-dial { position: relative; margin: 0; }
.roots-disc { position: relative; aspect-ratio: 1 / 1; }
.roots-slice { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; filter: saturate(.74) sepia(.14) contrast(.97) drop-shadow(0 6px 10px #4a2f1a33); pointer-events: none; user-select: none; -webkit-user-select: none; }
.roots-dial figcaption { font: italic 400 16px/1.5 var(--j-text); color: var(--j-ink-soft); margin: 16px 4px 0; max-width: 30em; text-wrap: pretty; }

/* The ink over the wood. Each line has a pale paper halo under it (paint-order), so it reads on dark grain. */
.roots-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; pointer-events: none; }
.roots-scale-rim { stroke: var(--roots-ink); stroke-width: .28; opacity: .7; }
.roots-scale-ticks { stroke: var(--roots-ink); stroke-width: .3; opacity: .7; }
.roots-year { stroke: #2e1a0e; stroke-width: .42; stroke-dasharray: .1 1.3; opacity: .55; }
.roots-trace { stroke: #2e1a0e; stroke-width: .95; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .7s ease-out, opacity 0s .7s; }
.roots-hand { stroke: #2e1a0e; stroke-width: .6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .45s ease-out, opacity 0s .45s; }
.roots-trace, .roots-hand { paint-order: stroke; }
/* A pale band of paper under the chosen ring, so the ink shows even on the dark heart. */
.roots-halo { stroke: #f6eedc; stroke-width: 1.5; opacity: 0; transition: opacity .3s ease; }
.roots-dial[data-now="0"] .roots-halo--0, .roots-dial[data-now="1"] .roots-halo--1, .roots-dial[data-now="2"] .roots-halo--2, .roots-dial[data-now="3"] .roots-halo--3 { opacity: .5; }
.roots-pivot { fill: #2e1a0e; stroke: #f6eedc; stroke-width: .5; }
.roots-dial[data-now="0"] :is(.roots-trace--0, .roots-hand--0),
.roots-dial[data-now="1"] :is(.roots-trace--1, .roots-hand--1),
.roots-dial[data-now="2"] :is(.roots-trace--2, .roots-hand--2),
.roots-dial[data-now="3"] :is(.roots-trace--3, .roots-hand--3) { stroke-dashoffset: 0; opacity: .88; transition: stroke-dashoffset .7s ease-out, opacity 0s; }
.roots-dial[data-now="0"] .roots-year--0, .roots-dial[data-now="1"] .roots-year--1, .roots-dial[data-now="2"] .roots-year--2, .roots-dial[data-now="3"] .roots-year--3 { opacity: 0; }

/* The marks: a numeral in small capitals inside a dotted ring of ink, on a small disc of paper so it reads on the
   wood. The chosen one is inked solid and ringed again in pencil. */
.roots-marks { position: absolute; inset: 0; }
.roots-mark { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding: 0; border-radius: 50%; color: var(--roots-ink); }
.roots-mark-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.roots-mark-ground { fill: #f6eedc; fill-opacity: .9; stroke: none; }
.roots-mark-dots { stroke: currentColor; stroke-width: 1.7; stroke-dasharray: .2 3.6; stroke-linecap: round; }
.roots-mark-pencil { stroke: var(--j-pencil); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .5s ease-out .15s, opacity 0s .65s; }
.roots-mark-numeral { position: relative; font: 700 17px/1 var(--j-sc); letter-spacing: .02em; font-variant-numeric: normal; translate: 0 -1px; }
.roots-mark:hover .roots-mark-ground { fill: #fffaf0; fill-opacity: 1; }
.roots-mark[aria-selected="true"] { color: #2e1a0e; }
.roots-mark[aria-selected="true"] .roots-mark-dots { stroke-dasharray: none; stroke-width: 1.9; filter: url(#j-ink); }
.roots-mark[aria-selected="true"] .roots-mark-ground { fill-opacity: 1; }
.roots-mark[aria-selected="true"] .roots-mark-pencil { stroke-dashoffset: 0; opacity: .9; transition: stroke-dashoffset .5s ease-out .15s, opacity 0s; }
#archive-dialog .roots-mark:focus-visible { outline-offset: 5px; }

/* Pencilled notes round the slice. They repeat the caption and the entries, so they can be left out on phones. */
.roots-note-hand--heart { left: 0; top: -34px; --j-note-r: -6deg; font-size: 21px; }
/* The bark note stands in the gap beside the slice, off the scale; its arrow crosses bare paper to the bark. */
.roots-note-hand--bark { right: -16%; bottom: -2%; --j-note-r: -4deg; font-size: 21px; }
.roots-note-hand--bark .j-arrow { right: 70%; bottom: 80%; width: 56px; height: 46px; }
.roots-seedling { left: -30px; bottom: 56px; width: 74px; rotate: -24deg; z-index: -1; opacity: .92; }

/* ---------- the reader: one dated field note at a time ---------- */
.roots-reader { position: relative; min-width: 0; padding-top: 6px; }
.roots-entry { position: relative; }
.roots-entry:not([hidden]) { animation: roots-open .38s cubic-bezier(.2, .7, .2, 1); }
@keyframes roots-open { from { opacity: 0; translate: 0 8px; } }
/* The heading of a note: the ring in small capitals, a dotted leader, and the date written in by hand. */
.roots-entry-date { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px !important; }
.roots-entry-ring { flex: none; font: 500 16px/1.2 var(--j-sc); letter-spacing: .12em; color: var(--j-place-ink); }
.roots-entry-leader { flex: 1 1 auto; min-width: 18px; border-bottom: 1.5px dotted #6b4e3a88; translate: 0 -.25em; }
.roots-entry-date > :last-child { flex: 0 1 auto; font: 23px/1.2 var(--j-script); color: var(--j-hand); rotate: -2deg; text-align: right; }
.roots-entry-title { font-size: 40px; margin-bottom: 12px; }
.roots-entry-text { max-width: 30em; }

/* The pictures, taped or cornered into the note, turned a little; the captions stay upright. */
.roots-print { width: min(70%, 330px); margin: 30px 0 0 3%; }
.roots-print--card { width: min(62%, 250px); margin: 34px 0 0 10%; }
/* The Gold and Silver scan has a white band under the boxes; crop it so the corners sit on the box art. */
.roots-print--gs .j-plate-mount > img { aspect-ratio: 340 / 212; object-fit: cover; object-position: 50% 0; }
.roots-pair { margin: 30px 0 0; }
.roots-pair-prints { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.roots-pair-print { padding: 12px; }
.roots-pair-print:nth-child(2) { margin-top: 26px; }
.roots-pair-print > img { image-rendering: auto; filter: sepia(.1) contrast(.97); }
.roots-pair-print .j-corner { width: 18px; height: 18px; }
.roots-pair-print .j-corner--tl { left: 6px; top: 6px; } .roots-pair-print .j-corner--tr { right: 6px; top: 6px; }
.roots-pair-print .j-corner--bl { left: 6px; bottom: 6px; } .roots-pair-print .j-corner--br { right: 6px; bottom: 6px; }
.roots-pair:hover .roots-pair-print, .roots-pair:focus-within .roots-pair-print { translate: 0 -2px; }

/* Each note's pencilled aside sits in the margin beside its picture, its arrow reaching in. */
.roots-note-hand--gs { left: calc(100% + 10px); top: 22%; width: 5.4em; white-space: normal; line-height: 1.2; --j-note-r: 5deg; }
.roots-note-hand--gs .j-arrow { left: -44px; top: 58px; width: 58px; height: 42px; }
.roots-note-hand--card { left: calc(100% + 4px); top: 40%; --j-note-r: -5deg; white-space: normal; width: 6em; }
.roots-note-hand--card .j-arrow { left: -40px; top: -44px; width: 56px; height: 44px; transform: scaleX(-1); }
.roots-note-hand--hgss, .roots-note-hand--crystal { left: 2%; top: calc(100% + 2px); --j-note-r: -3deg; }
.roots-note-hand--hgss .j-arrow, .roots-note-hand--crystal .j-arrow { left: calc(100% + 2px); top: -34px; width: 50px; height: 40px; }
.roots-pair figcaption { margin-top: 48px; }

.roots-entry .j-source-line { margin-top: 20px !important; }
.roots-onward { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px !important; }
.roots-onward-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; font: italic 400 18px/1.3 var(--j-text); color: var(--j-ink); text-align: left; }
.roots-onward-link span { text-decoration: underline; text-decoration-color: var(--j-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.roots-onward-link svg { flex: none; width: 36px; height: 15px; fill: none; stroke: var(--j-hand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate .2s ease; }
.roots-onward-link:hover span { text-decoration-color: currentColor; }
.roots-onward-link:hover svg, .roots-onward-link:focus-visible svg { translate: 4px 0; }

/* Earlier and Later: small-caps words with a drawn arrow each, the count pencilled between them. */
.roots-steps { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 10px; border-top: 1px solid var(--j-rule); }
.roots-step { display: inline-flex; align-items: center; gap: 10px; min-width: 44px; min-height: 48px; padding: 6px 4px; font: 500 17px/1 var(--j-sc); letter-spacing: .08em; color: var(--j-ink); }
.roots-step-arrow { flex: none; width: 44px; height: 18px; fill: none; stroke: var(--j-hand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: translate .2s ease; }
.roots-step--back .roots-step-arrow { transform: scaleX(-1); }
.roots-step:not(:disabled):hover span { text-decoration: underline; text-decoration-color: var(--j-link-line); text-underline-offset: 4px; }
.roots-step:not(:disabled):hover .roots-step-arrow { translate: 4px 0; }
.roots-step--back:not(:disabled):hover .roots-step-arrow { translate: -4px 0; }
.roots-step:disabled { opacity: .34; cursor: default; }
.roots-count { font: 400 15px/1 var(--j-sc); letter-spacing: .1em; color: var(--j-pencil); white-space: nowrap; }

/* ---------- tablet portrait: the slice across the page, the reader below it ---------- */
@container journal (max-width: 879px) {
  .roots-study { display: block; margin-top: 44px; }
  .roots-dial-col { position: relative; top: auto; width: min(100%, 470px); margin: 0 auto; }
  .roots-reader { margin-top: 44px; max-width: 34em; }
  .roots-note-hand--heart { left: -12%; }
  .roots-note-hand--bark { right: -12%; }
  .roots-seedling { left: auto; right: -76px; bottom: 96px; rotate: 18deg; }
}

/* ---------- phones: the slice the width of the page, the notes round it left out ---------- */
@container journal (max-width: 599px) {
  .roots-study { margin-top: 34px; }
  .roots-dial-col { width: calc(100% + 16px); margin: 0 -8px; }
  .roots-dial figcaption { margin-inline: 12px 8px; }
  .roots-mark { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .roots-mark-numeral { font-size: 16px; }
  .roots-note-hand--heart, .roots-note-hand--bark, .roots-seedling { display: none; }
  .roots-reader { margin-top: 36px; }
  .roots-entry-date { flex-wrap: wrap; row-gap: 2px; }
  .roots-entry-date > :last-child { font-size: 21px; }
  .roots-entry-title { font-size: 33px; }
  .roots-print { width: 88%; margin: 26px 0 0 2%; }
  .roots-print--card { width: 64%; margin-left: 4%; }
  .roots-note-hand--gs { left: auto; right: 0; top: calc(100% - 4px); width: auto; white-space: nowrap; }
  .roots-note-hand--gs .j-arrow { left: -48px; top: -36px; transform: scaleY(-1); }
  .roots-print--gs figcaption { margin-top: 40px; }
  .roots-note-hand--card { left: calc(100% + 2px); top: 34%; width: 4.6em; font-size: 19px; }
  .roots-pair-prints { gap: 10px; }
  .roots-pair-print { padding: 8px; }
  .roots-pair-print .j-corner { width: 14px; height: 14px; }
  .roots-note-hand--hgss, .roots-note-hand--crystal { font-size: 19px; }
  .roots-note-hand--hgss .j-arrow, .roots-note-hand--crystal .j-arrow { display: none; }
  /* A long source title wraps with its words, so its arrow stays on the last of them. */
  .roots-entry .j-source-line .source-link { display: inline; min-height: 0; padding: 12px 0; margin: -12px 0; }
  .roots-steps { margin-top: 34px; }
  /* Out of sight, not display: none, so it still reads out each step as a live region. */
  .roots-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .roots-step { gap: 8px; font-size: 16px; }
  .roots-step-arrow { width: 34px; }
}

/* ---------- phones held sideways: the slice sized to the screen, the reader beside it ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .roots-study { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 32px; margin-top: 28px; }
  .roots-dial-col { position: sticky; top: 62px; width: min(46vw, calc(100dvh - 120px)); margin: 0; }
  .roots-reader { margin-top: 0; }
  .roots-note-hand--heart, .roots-note-hand--bark, .roots-seedling { display: none; }
  .roots-dial figcaption { font-size: 15px; }
  #archive-dialog .roots-print { width: fit-content; }
  #archive-dialog .roots-pair-print > img { max-height: calc(100dvh - 230px); width: 100%; object-fit: contain; }
}

/* Reduced motion: every line is already drawn and nothing slides. */
@media (prefers-reduced-motion: reduce) {
  .roots-entry:not([hidden]) { animation: none !important; }
  .roots-trace, .roots-hand, .roots-mark-pencil, .roots-step-arrow, .roots-onward-link svg, .roots-pair-print { transition: none !important; }
  .roots-step:not(:disabled):hover .roots-step-arrow, .roots-onward-link:hover svg, .roots-pair:hover .roots-pair-print { translate: none; }
}