/* ============================================================
   /notes — one note per page. A title held in a bracketed box,
   then each section in its own box down the frame.
   Tokens, fonts, the frame and the box live in base.css.
   ============================================================ */

body { font-size: 15px; line-height: 1.6; }

/* ---------- title block ---------- */

.title {
  text-align: center;
  padding: 56px var(--pad) 40px;
}

/* "Working" (or a series name) sits above the title as a label */
h1 .pre {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}

/* the title itself is the one box that hugs its content */
h1 .name {
  display: inline-block;
  font-size: 22px; font-weight: 600;
  line-height: 1.25; letter-spacing: -.01em;
  padding: .55em .9em;
  text-wrap: balance;
}

.deck {
  color: var(--muted);
  max-width: 34rem;
  margin: 18px auto 0;
  text-wrap: balance;
}

/* ---------- sections as boxes ---------- */

.body {
  display: flex; flex-direction: column; gap: 16px;
  padding: 0 var(--pad) 40px;
}

section.box { padding: 22px 26px 24px; }

h2 {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.4;
  scroll-margin-top: 24px;
}

/* each heading links to itself, so a section URL is one click away */
h2 a { color: inherit; text-decoration: none; }
h2 a::after {
  content: "#";
  margin-left: .6em;
  color: var(--faint);
  opacity: 0; transition: opacity .15s var(--ease);
}
h2 a:hover::after, h2 a:focus-visible::after { opacity: 1; }

/* a link pinned to the top-right corner of a box: where the section
   was also posted, a source, a reply. Same label style as everywhere. */
.corner {
  position: absolute; top: 22px; right: 26px;
  text-decoration: none;
  transition: color .15s var(--ease);
}
.corner:hover, .corner:focus-visible { color: var(--accent); }
section.box:has(.corner) h2 { padding-right: 7em; }

/* the compressed claim under each heading */
.short { color: var(--muted); margin-top: .7em; }

p { margin-top: 1em; }
h2 + p, section.box > p:first-child { margin-top: .7em; }
section.box > p:first-child { margin-top: 0; }
p em { font-style: italic; }
p strong { font-weight: 600; }

/* links in the text — a credit, an address. They stay in the surrounding
   color and only take the accent when you touch them. */
p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: .18em;
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
p a:hover, p a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* paths and identifiers */
code {
  font-family: var(--mono);
  font-size: .86em;
  hyphens: none;
  overflow-wrap: break-word;
}

@media (max-width: 600px) {
  .title { padding-top: 40px; }
  section.box { padding: 18px 18px 20px; }
  .corner { top: 18px; right: 18px; }
}