/* Hallmark · shape: a note and its network · genre: editorial · theme: custom · job: join · idea: "one short note on the left, and on the right either the graph of his thinking or the one note you opened from it" · vibe: "dark glass, one violet thread, terse"
 * paper: oklch(20% 0.006 285) · accent: oklch(74% 0.13 295) · display: DM Mono · body: DM Mono · hero: the note beside a loose, compact network of domains · nav: none, the links in the note are the nav · footer: none, the contact line sits in the note · imagery: the real MachDesigner plot, plus a graph drawn from the notes' real links · signature: a soft network you can rearrange, which shrinks into the corner as a page pops out of the clicked node
 * axes: dark/mono/chromatic-violet · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S5 R4 V4 · weakest: H and P, a bio can drift generic, so every note carries one specific fact of his */
/* Hallmark · answered F15 · the note and its graph are the only composition, by the user's request for a simple page */
@import url("./tokens.css");
@import url("./base.css");

:root { --note-width: 27rem; --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); --mini-w: 8rem; --mini-h: 9rem; }

body { font-size: 0.975rem; line-height: 1.7; }

h1, h2 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); margin-bottom: var(--space-md); padding-right: var(--space-xl); }
.note .alias { color: var(--color-muted); margin: var(--space-2xs) 0 var(--space-lg); }
.note p + p { margin-top: var(--space-md); }
.note cite { font-style: italic; }
.note a { color: var(--color-accent); text-decoration: none; }
.note a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.note a:active { color: var(--color-ink); }
.note a[href^="http"], .note a[href^="mailto"] { text-decoration: underline; text-decoration-color: var(--color-rule); text-underline-offset: 0.2em; }
.reach { color: var(--color-muted); }

.work { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-sm) var(--space-md); }
.work dt { color: var(--color-muted); }
.work dd { margin: 0; min-width: 0; }
figure { clear: both; margin: var(--space-lg) 0 0; }
figure img { width: 100%; border-radius: var(--radius-card); }
figcaption { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* Scripting off: a plain column of notes. */
.stack { max-width: var(--note-width); margin-inline: auto; padding: var(--space-xl) var(--space-md); }
.note { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.note:first-child { border-top: 0; }
#graph { display: none; }

/* Scripting on: the note on the left, one thing on the right. */
.js .app {
  min-height: 100dvh;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-2xl) var(--gutter);
  display: grid;
  grid-template-columns: var(--note-width) minmax(0, 1fr);
  column-gap: var(--space-2xl);
  align-items: start;
}
.js .stack { display: contents; }
.js .note { grid-column: 2; grid-row: 1; position: relative; padding: 0; border: 0; }
.js #home { grid-column: 1; position: sticky; top: var(--space-2xl); }
.js .note[hidden] { display: none; }
.js .note.arriving { animation: arrive var(--dur-long) var(--ease-pop) both; }
.js .note:not(#home)::before { content: ""; float: right; width: var(--mini-w); height: var(--mini-h); }

.close {
  position: absolute;
  top: calc(var(--space-sm) * -1);
  right: calc(var(--mini-w) + var(--space-sm));
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: var(--text-lg);
}
.close:hover { background: var(--color-paper-3); color: var(--color-ink); }
.close:active { transform: scale(0.94); }
.close:disabled { opacity: 0.5; cursor: not-allowed; }

.js #graph { display: block; position: relative; z-index: var(--z-raised); grid-column: 2; grid-row: 1; transform-origin: top right; transition: transform var(--dur-long) var(--ease-pop); height: min(38rem, 80dvh); min-width: 0; }
.js #graph.mini { transform: scale(0.24); }
#graph.mini .n { cursor: zoom-out; }
#graph.mini text { opacity: 0; }
#graph.mini path { stroke-width: 3; }
#graph circle:not(.hit) { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-long) var(--ease-pop); }
#graph.mini circle:not(.hit) { transform: scale(2.4); }
#graph.mini .current circle:not(.hit) { transform: scale(3.6); }
#graph .current circle:not(.hit) { fill: var(--color-accent); }
#graph svg { width: 100%; height: 100%; overflow: visible; }
#graph path { fill: none; stroke: var(--color-rule); stroke-width: 1; transition: opacity var(--dur-short) var(--ease-out); }
#graph .n { cursor: pointer; transition: opacity var(--dur-short) var(--ease-out); }
#graph .n:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
#graph circle { fill: var(--color-muted); }
#graph text { fill: var(--color-muted); font-family: var(--font-body); font-size: 11px; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--color-paper); stroke-width: 5px; stroke-linejoin: round; transition: opacity var(--dur-short) var(--ease-out); }
#graph .hit { fill: transparent; }
#graph .n { touch-action: none; }
#graph:not(.mini) .n:hover circle:not(.hit) { fill: var(--color-accent); }
#graph .n:active { cursor: grabbing; }
#graph svg.hovering .n:not(.near), #graph svg.hovering path:not(.near) { opacity: 0.2; }
#graph svg.hovering .n.near circle:not(.hit) { fill: var(--color-accent); }
#graph svg.hovering .n.near text { fill: var(--color-ink); }

@keyframes arrive {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .note.arriving { animation: none; }
  #graph path, #graph .n { transition: none; }
}

@media (max-width: 60rem) {
  .js .app { display: block; min-height: 0; padding: var(--space-xl) var(--space-md); }
  .js .stack { display: block; }
  .js #home { position: static; }
  .js .note { margin-bottom: var(--space-xl); }
  .js #graph { height: 24rem; }
}