@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400..700;1,400..700&display=swap");

/* Suri — field notes: the page, the observation, the pair, the index, the traces. Values come from tokens.css. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); }

/* ---------- Page: asymmetric, one ragged column offset from the photos' edge ---------- */
.su-page {
  --fs: 17px; --lh: var(--baseline);
  container-type: inline-size; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs); line-height: var(--lh); font-weight: 400;
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.su-page *, .su-page *::before, .su-page *::after { box-sizing: border-box; }
.su-page__inner { display: flow-root; max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--space-3) var(--space-7); }
.su-page__inner > * { max-width: var(--measure); }
.su-page__inner > .su-wide { max-width: none; clear: both; }
.su-page figure { margin-inline: 0; }
.su-page__inner > p, .su-page__inner > ul, .su-page__inner > ol {
  margin-block: 0 calc(var(--lh) / 2); text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3;
}
.su-page__inner > h2 { margin: var(--space-6) 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.su-page__inner > h3 { margin: var(--lh) 0 0; font-size: var(--fs); line-height: var(--lh); font-weight: 700; text-wrap: balance; }
.su-page__inner > h3 + p { margin-top: 0; }
.su-page em, .su-page i { font-style: italic; }
.su-page strong, .su-page b { font-weight: 700; }
.su-page a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.su-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.su-page sup { font-size: .65em; line-height: 0; }
.su-page__inner > ul { padding-left: 1.1em; }
.su-page__inner > blockquote { margin: 0 0 calc(var(--lh) / 2); padding-left: 1.1em; }
@container (min-width: 62rem) {
  .su-page__inner { padding-inline: var(--space-5); }
  .su-page__inner > :not(.su-wide):not(h2) { margin-left: var(--offset); }
  /* section labels hang in the left margin, on the first line of what follows */
  .su-page__inner > h2 { float: left; clear: left; width: calc(var(--offset) - 2rem); margin: calc(var(--space-6) + 5px) 0 0; }
  .su-page__inner > h2 + * { margin-top: var(--space-6); }
}

/* ---------- Lede and Case ---------- */
.su-lede { margin-block: 0 var(--lh) !important; margin-top: 0; font-size: 28px; line-height: 39px; font-weight: 400; letter-spacing: -.01em; color: var(--ink-soft); text-wrap: pretty; -webkit-hyphens: manual !important; hyphens: manual !important; }
.su-case { margin-block: var(--lh) !important; font-weight: 700; color: var(--ink-soft); text-wrap: pretty; }
.su-case p { margin: 0 0 calc(var(--lh) / 2); }
.su-case p:last-child { margin-bottom: 0; }

/* ---------- Masthead: kicker, title, lede, and where/when/how ---------- */
.su-masthead { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-7); }
.su-masthead__kicker { margin: 0 0 var(--space-3); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.su-masthead__title { margin: 0 0 var(--space-4); font-size: 34px; line-height: 39px; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; max-width: 18em; }
.su-masthead__main .su-lede { max-width: 22em; }
.su-meta { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0 var(--space-4); }
.su-meta div { padding: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--rule); }
.su-meta dt { font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.su-meta dd { margin: 2px 0 0; font-size: 14px; line-height: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
@container (min-width: 62rem) {
  .su-masthead { grid-template-columns: calc(var(--offset) - 2rem) minmax(0, 1fr); column-gap: 2rem; }
  .su-masthead__main { grid-column: 2; grid-row: 1; }
  .su-masthead .su-meta { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; align-self: end; }
}

/* ---------- Observation: the photograph as evidence ---------- */
.su-obs { position: relative; margin-block: var(--space-5); }
.su-obs--bleed { margin-inline: calc(50% - 50cqw); }
.su-page__inner > .su-obs--column { max-width: var(--measure); }
.su-obs__frame { position: relative; }
.su-obs__img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 3 / 2); object-fit: cover; background: var(--paper-2); }
.su-obs__band, .su-pair__band { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) var(--space-3) 10px; background: var(--band); color: var(--on-band); font-size: 14px; line-height: 19px; font-weight: 700; }
.su-obs__place { flex: none; font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.su-credit { display: block; margin-top: 6px; font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
@container (min-width: 62rem) {
  .su-obs .su-credit, .su-pair .su-credit { position: absolute; top: 0; right: -18px; margin: 0; writing-mode: vertical-rl; white-space: nowrap; }
  .su-obs--bleed .su-credit { right: 6px; top: 8px; color: var(--on-band); text-shadow: 0 0 6px rgba(0,0,0,.45); }
}
/* pins */
.su-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 0; border: 2px solid var(--paper); border-radius: var(--radius-round); background: var(--magenta); color: var(--on-magenta); font: 700 12px/20px var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.su-pin[aria-expanded="true"], .su-pin:hover { transform: translate(-50%, -50%) scale(1.15); }
.su-legend { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-2) var(--space-4); font-size: 14px; line-height: 19px; }
.su-legend li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: baseline; }
.su-legend b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--radius-round); background: var(--magenta); color: var(--on-magenta); font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; }
.su-legend li.is-on span { text-decoration: underline; text-decoration-color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---------- Pair: two acts side by side ---------- */
.su-pair { position: relative; margin-block: var(--space-5); }
.su-pair__frames { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.su-pair__frames img, .su-pair__frames .su-obs__img { display: block; width: 100%; aspect-ratio: var(--ratio, 4 / 5); object-fit: cover; background: var(--paper-2); }

/* ---------- Index: every act, by category ---------- */
.su-index { margin-block: var(--space-5); }
.su-index__filters { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.su-chip { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: var(--radius-0); background: transparent; color: var(--ink); cursor: pointer; }
.su-chip[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--ink-on-lime); }
.su-chip span { font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }
.su-index__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-4) var(--space-1); margin: 0; padding: 0; list-style: none; }
.su-index__cell .su-obs__img { aspect-ratio: 4 / 3; }
.su-index__cap { margin-top: 6px; font-size: 13px; line-height: 17px; }
.su-index__cap b { display: block; font-size: 10px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.su-index__empty { color: var(--ink-soft); }

/* ---------- Traces: desire paths, simulated ---------- */
.su-traces { margin-block: var(--space-5); }
.su-traces canvas { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 2 / 1); background: var(--lime); touch-action: none; cursor: crosshair; }
.su-traces__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) 10px; background: var(--band); color: var(--on-band); font-size: 14px; line-height: 19px; font-weight: 700; }
.su-traces__controls { display: flex; gap: 6px; }
.su-button { font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border: 1.5px solid var(--on-band); border-radius: var(--radius-0); background: transparent; color: var(--on-band); cursor: pointer; }
.su-button:hover { background: var(--on-band); color: var(--band); }
.su-traces .su-credit { position: static; writing-mode: horizontal-tb; }