/* Callouts — the elements of a card, drawn out of it.
   One fixed layer over the page: leader lines and dotted rings in an SVG, labels in HTML.
   Every position is set from callouts.js each frame; this file is only the look. */

.co-layer {
  --co-bone: var(--bone, #EBE4D3); --co-dim: var(--bone-dim, #A9B3A6); --co-brass: var(--brass, #C9A24B);
  --co-brass-hi: var(--brass-hi, #F1DA92); --co-felt: var(--felt, #18231E); --co-ink: #1F2A17; --co-dot-in: var(--brass-lo, #7E5F1E);
  position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0; visibility: hidden;
  clip-path: inset(60px 0 0 0);   /* never over the header, even for the moment it takes to step back on a fast scroll */
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.co-layer.co-on { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.co-layer.co-motion { transition: none; }            /* the full-motion path animates everything itself */

.co-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the ink: bone on the felt, the card's own ink where a line crosses onto the paper */
.co-g-out { color: var(--co-bone); --co-dot: var(--co-brass); }
.co-g-in { color: var(--co-ink); --co-dot: var(--co-dot-in); }
.co-line { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.001; }   /* pathLength=1: dashoffset 1→0 draws it */
.co-g-in .co-line { stroke-width: 1.15; }
.co-head { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.co-dots { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 1; }
.co-g-in .co-dots { stroke-width: 2.1; }
/* under a ring drawn over the subject, each dot sits in a hole punched through to the paper (so it reads on any colour) */
.co-halo { fill: none; stroke: var(--co-halo, transparent); stroke-width: 5.2; stroke-linecap: round; stroke-dasharray: 0 1; opacity: .94; }
.co-dot { fill: var(--co-dot); }
.co-ping { fill: none; stroke: currentColor; stroke-width: .9; }
.co-item { transition: opacity .35s var(--ease, ease); }

/* labels: a mono eyebrow over one short italic line */
.co-label { position: absolute; left: 0; top: 0; width: max-content; max-width: 262px; margin: 0; will-change: transform; transition: opacity .35s var(--ease, ease); }
.co-eyebrow { display: block; font-family: var(--mono, "DM Mono", ui-monospace, monospace); font-weight: 400; font-size: 10.5px; line-height: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--co-brass); white-space: nowrap; }
.co-text { display: block; margin-top: 5px; font-family: var(--serif, "Instrument Serif", Georgia, serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.32vw, 20px); line-height: 1.17; letter-spacing: .003em; color: var(--co-bone); text-wrap: balance; }
.co-label .co-eyebrow, .co-label .co-text { text-shadow: 0 1px 14px rgba(14, 21, 18, .55); }
.co-num { display: none; }
.co-side-left { text-align: right; }

/* hover (fine pointers, side layout): the one you're reading comes forward */
@media (hover: hover) and (pointer: fine) {
  .co-layer[data-mode="side"].co-on .co-label { pointer-events: auto; }
}
.co-layer[data-focus] .co-item:not(.co-focus), .co-layer[data-focus] .co-label:not(.co-focus) { opacity: .32; }
.co-layer[data-focus] .co-label.co-focus .co-eyebrow { color: var(--co-brass-hi); }

/* the key (narrow screens): numbered in the margins, explained below the card */
.co-tag { position: absolute; left: 0; top: 0; font-family: var(--serif, "Instrument Serif", Georgia, serif); font-style: italic; font-size: 17px; line-height: 18px; color: var(--co-brass-hi); white-space: nowrap; will-change: transform, opacity; }
.co-layer[data-mode="side"] .co-tag { display: none; }
.co-layer[data-mode="key"] .co-label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; max-width: none; }
.co-layer[data-mode="key"] .co-num { display: block; grid-row: 1; font-family: var(--serif, "Instrument Serif", Georgia, serif); font-style: italic; font-size: 17px; line-height: 14px; color: var(--co-brass-hi); }
.co-layer[data-mode="key"] .co-eyebrow { grid-column: 2; font-size: 9.5px; letter-spacing: .15em; white-space: normal; }
.co-layer[data-mode="key"] .co-text { grid-column: 2; font-size: 15.5px; line-height: 1.2; margin-top: 4px; }
.co-layer[data-mode="key"][data-dense] .co-text { font-size: 14.5px; }
.co-layer[data-mode="key"][data-dense] .co-eyebrow { letter-spacing: .12em; }
.co-scrim { position: absolute; left: 0; right: 0; top: 0; height: 100vh; background: linear-gradient(rgba(24, 35, 30, 0), var(--co-felt) 36px); opacity: 0; will-change: transform, opacity; }
.co-layer[data-mode="side"] .co-scrim { display: none; }

/* reduced motion: nothing draws or moves; the whole layer simply fades (and outranks the page's global zeroing) */
@media (prefers-reduced-motion: reduce) {
  .co-layer, .co-layer.co-on { transition-property: opacity, visibility !important; transition-duration: .18s, 0s !important; }
  .co-layer:not(.co-on) { transition-delay: 0s, .18s !important; }
}