@font-face {
  font-family: 'Chunks Notes';
  src: url('fonts/Chunks Notes Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Yorris Note';
  src: url('fonts/YorrisNote-Handwriting.woff') format('woff');
  font-display: swap;
}
/* note to self: Newsreader self-hosted (variable, latin subset) — no third-party calls. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* note to self: keep everything on the ruled-paper grid. */
  --text-scale:  1;
  --grid:        30px;
  --hand:        'Chunks Notes', cursive;
  --note:        'Yorris Note', 'Segoe Print', cursive;
  --head-font:   var(--hand);
  --head-italic: normal;
  --head-weight: 400;
  --head-letter: -0.005em;
  --body-font:   'Newsreader', Georgia, serif;
  --body-weight: 400;
  --body-style:  normal;
  --ink:         #2a2630;
  --ink-soft:    #5b5560;
  --ink-muted:   #8d8794;
  --paper: #f5f2ea;
  --line: rgba(116, 138, 114, 0.15);
  --rule:        rgba(100, 122, 102, 0.32);
  --accent:      #8d7bb0;
  --accent-2:    #7a679d;
  --sage:        #6f8068;
  --tape:        rgba(160, 120, 135, 0.45);
  --sheet-paper: #f9faf5;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  font-style: var(--body-style);
  font-weight: var(--body-weight);
  font-size: 18px;
  line-height: var(--grid);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

::selection { background: var(--accent); color: var(--paper); }

/* note to self: balanced heads, no widowed last words. */
h1.title,
.entry-title,
.masthead .byline,
.reflection-sheet h2,
.reflection-sheet h3,
.closing-quote {
  text-wrap: balance;
}
.narrative p,
.reflection-sheet p,
.reflection-sheet .deck,
.gloss-body {
  text-wrap: pretty;
}

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

header.masthead {
  /* note to self: cover page, not school-paper header. */
  padding: 96px 0 40px;
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.masthead .crumbs {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
h1.title {
  font-family: var(--head-font);
  font-style: var(--head-italic);
  font-weight: var(--head-weight);
  font-size: clamp(56px, 9.4vw, 75px);
  line-height: 0.92;
  letter-spacing: var(--head-letter);
  margin: 0 0 22px;
  color: var(--ink);
}
h1.title .accent { color: var(--accent); }
.masthead .byline {
  font-family: var(--note);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0;
}

section.entry {
  /* note to self: essay left, margin brain right. */
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
section.entry::before {
  /* note to self: grid.js fixes the line offset after fonts load. */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--grid) - 1px),
    var(--line) calc(var(--grid) - 1px),
    var(--line) var(--grid)
  );
  background-position-y: var(--line-offset, 0);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
section.entry > * { position: relative; z-index: 1; }

.entry-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 36px;
}
.entry-num {
  font-family: var(--head-font);
  font-style: var(--head-italic);
  font-weight: var(--head-weight);
  font-size: 56px;
  color: var(--sage);
  line-height: 1;
  letter-spacing: var(--head-letter);
}
.entry-title {
  font-family: var(--head-font);
  font-style: var(--head-italic);
  font-weight: var(--head-weight);
  font-size: 56px;
  line-height: 1;
  flex: 1;
  letter-spacing: var(--head-letter);
}
.entry-body {
  /* note to self: essay leads; gloss supports. */
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: start;
}

.narrative p {
  margin: 0 0 var(--grid);
  font-family: var(--body-font);
  font-style: var(--body-style);
  font-weight: var(--body-weight);
  font-size: calc(20px * var(--text-scale));
  line-height: var(--grid);
  max-width: 62ch;
  color: var(--ink);
}
.narrative p:last-child { margin-bottom: 0; }
.narrative p em.entry {
  font-style: italic;
  color: var(--ink);
}

aside.gloss {
  /* note to self: margin notes, not a second essay. */
  padding-left: 30px;
  border-left: 1px solid var(--rule);
  font-family: var(--note);
}
.gloss-block { margin-bottom: var(--grid); }
.gloss-block:last-child { margin-bottom: 0; }
.gloss-label {
  font-family: var(--hand);
  font-weight: 500;
  font-size: calc(25px * var(--text-scale));
  color: var(--sage);
  line-height: var(--grid);
}
.gloss-body {
  font-family: var(--note);
  font-weight: 400;
  font-size: calc(22px * var(--text-scale));
  line-height: var(--grid);
  color: var(--ink);
}
.gloss-said {
  font-family: var(--note);
  font-weight: 400;
  font-size: calc(22px * var(--text-scale));
  color: var(--ink);
  line-height: var(--grid);
}
.gloss-said.silent {
  color: var(--ink-muted);
  font-style: italic;
}

figure.gloss-sketch {
  /* note to self: keep sketches feeling taped in — pinned, not pasted flat. */
  position: relative;
  margin: 22px auto 4px;
  background: #fff;
  padding: 16px 16px 14px;
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 260px;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 12px rgba(42, 38, 48, 0.10);
}
section.entry:nth-of-type(even) figure.gloss-sketch { transform: rotate(1.5deg); }
figure.gloss-sketch::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 18px;
  background: url('assets/tape.png') center / 100% 100% no-repeat;
}
figure.gloss-sketch img {
  display: block;
  width: 100%;
  height: auto;
}
figure.gloss-sketch figcaption {
  font-family: var(--note);
  font-size: calc(20px * var(--text-scale));
  line-height: 1.3;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 10px;
}

section.reflection {
  padding: 80px 0 96px;
  position: relative;
}
.reflection-sheet {
  /* note to self: reflection should feel typed and deliberate. */
  background: var(--sheet-paper);
  padding: 64px 64px 64px;
  border: 1px solid var(--ink);
  position: relative;
}
.reflection-sheet > .tape {
  position: absolute;
  background: url('assets/tape.png') center / 100% 100% no-repeat;
  height: 22px;
  top: -11px;
  z-index: 3;
  pointer-events: none;
}
.reflection-sheet > .tape:nth-of-type(1) { left: 11%;  width: 94px;  }
.reflection-sheet > .tape:nth-of-type(2) { left: 47%;  width: 68px;  }
.reflection-sheet > .tape:nth-of-type(3) { right: 13%; width: 102px; }
.reflection-sheet h2 {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.reflection-sheet .deck {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.45;
  max-width: 56ch;
  margin: 0 0 36px;
}
.reflection-sheet h3 {
  font-family: 'Newsreader', serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  margin: 36px 0 10px;
  letter-spacing: -0.005em;
}
.reflection-sheet h3::before {
  content: counter(refsec, upper-roman) ". ";
  color: var(--ink-soft);
  font-weight: 600;
}
.reflection-sheet { counter-reset: refsec; }
.reflection-sheet h3 { counter-increment: refsec; }
.reflection-sheet p {
  margin: 0 0 var(--grid);
  font-size: calc(20px * var(--text-scale));
  line-height: var(--grid);
  max-width: 64ch;
}
.reflection-sheet em.term {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
.reflection-sheet strong.term {
  font-style: italic;
  color: var(--ink);
  font-weight: 600;
}
.closing-quote {
  margin: 48px 0 0;
  padding: 28px 32px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  text-align: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.3;
  color: var(--ink);
}

footer.colophon {
  text-align: center;
  padding: 56px 0 96px;
  font-family: var(--note);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
footer.colophon .rule {
  width: 60px;
  height: 1px;
  background: var(--ink-muted);
  margin: 0 auto 18px;
}
footer.colophon .credits {
  margin: 12px auto 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
}

/* note to self: a sticky tools header that stays reachable while reading. */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 12px 0;
  margin-bottom: 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.toolbar::before {
  /* note to self: bleed the band to the window edges so content scrolls under it cleanly. */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  z-index: -1;
}
.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool-label {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.tool {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--sheet-paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 6px 13px;
  line-height: 1;
  cursor: pointer;
}
.tool.text-dec, .tool.text-inc {
  font-weight: 600;
  padding: 6px 11px;
  min-width: 38px;
}
.tool:hover { background: var(--paper); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tool[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.reading-mode section.entry::before { display: none; }
.reading-mode .entry-body {
  grid-template-columns: 1fr;
  gap: var(--grid);
}
.reading-mode .narrative p {
  font-size: calc(21px * var(--text-scale));
  line-height: 1.7;
  max-width: 66ch;
}
.reading-mode aside.gloss {
  padding-left: 0;
  padding-top: var(--grid);
  border-left: none;
  border-top: 1px solid var(--rule);
  opacity: 0.7;
}
@media (min-width: 761px) {
  /* note to self: in reading mode the stacked notes should use the width, not pile up. */
  .reading-mode aside.gloss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid) 44px;
    align-items: flex-start;
  }
  .reading-mode .gloss-block { flex: 1 1 180px; margin-bottom: 0; }
  .reading-mode figure.gloss-sketch {
    flex: 0 0 220px;
    width: 220px;
    margin: 0;
    align-self: flex-start;
  }
}

/* note to self: dark mode just re-paints the ink-and-paper palette. */
html.dark {
  --ink:         #ece8f0;
  --ink-soft:    #b6b0c0;
  --ink-muted:   #8d8794;
  --paper:       #1b1922;
  --line:        rgba(176, 196, 174, 0.10);
  --rule:        rgba(176, 196, 174, 0.28);
  --accent:      #b7a6dd;
  --accent-2:    #a08fce;
  --sage:        #93a98a;
  --tape:        rgba(180, 140, 155, 0.40);
  --sheet-paper: #24222d;
}
html.dark section.entry::before { mix-blend-mode: normal; }
html.dark ::selection { background: var(--accent); color: #1b1922; }
html.dark .tool[aria-pressed="true"] { color: #1b1922; }
/* note to self: warm the sketch cards so they don't glare, keep their captions readable. */
html.dark figure.gloss-sketch {
  background: #e9e3d6;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
html.dark figure.gloss-sketch figcaption { color: #6b6570; }

@media screen and (max-width: 760px) {
  /* note to self: stack the margin notes on phones (screen only — print has its own layout). */
  body { font-size: 17px; }
  .page { padding: 0 20px; }
  header.masthead { padding: 64px 0 32px; }
  .entry-body {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  aside.gloss {
    padding-left: 0;
    padding-top: var(--grid);
    border-left: none;
    border-top: 1px solid var(--rule);
  }
  section.entry { padding: 44px 0 32px; }
  .entry-head { gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
  .entry-num, .entry-title { font-size: 44px; }
  .masthead .byline { font-size: 30px; }
  .narrative p { font-size: calc(19px * var(--text-scale)); }
  .gloss-body { font-size: calc(20px * var(--text-scale)); }
  section.reflection { padding: 56px 0 64px; }
  .reflection-sheet { padding: 32px 24px 36px; }
  .reflection-sheet h2 { font-size: 36px; }
  .reflection-sheet h3 { font-size: 19px; margin-top: 28px; }
  .reflection-sheet p { font-size: calc(18px * var(--text-scale)); }
  .toolbar { gap: 10px 14px; padding: 10px 0; }
  .tool, .tool-label { font-size: 14px; }
  .closing-quote { font-size: 20px; padding: 20px 16px; }
}

@media print {
  /* note to self: force the light palette so a dark-mode print stays legible. */
  html.dark {
    --ink: #2a2630;
    --ink-soft: #5b5560;
    --ink-muted: #8d8794;
    --accent: #7a679d;
    --sage: #6f8068;
    --rule: rgba(100, 122, 102, 0.32);
    --paper: #ffffff;
    --sheet-paper: #ffffff;
  }
  @page { margin: 0.7in; }
  html { --text-scale: 1; --grid: 30px; background: white; }
  body { background: white; font-size: 11pt; line-height: 1.45; }
  .toolbar { display: none; }
  p { orphans: 3; widows: 3; }

  /* compact masthead so the cover doesn't eat a whole page */
  header.masthead { padding: 0 0 14px; }
  .masthead .crumbs { margin-bottom: 10px; font-size: 10pt; }
  h1.title { font-size: 30pt; line-height: 0.95; margin-bottom: 8px; }
  .masthead .byline { font-size: 13pt; line-height: 1.3; }

  /* single-column, compact entries — keep each section together when it fits */
  section.entry { padding: 14px 0; break-inside: avoid; }
  section.entry::before { display: none; }
  .entry-head { margin-bottom: 8px; break-after: avoid; }
  .entry-num, .entry-title { font-size: 20pt; }
  .entry-body { display: block; }
  .narrative p { font-size: 11pt; line-height: 1.45; max-width: none; margin-bottom: 8pt; }

  /* margin notes: compact callout with the sketch beside the writing */
  aside.gloss {
    position: static;
    opacity: 1;
    margin-top: 10px;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    border-left: 3px solid var(--sage);
    break-inside: avoid;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    align-items: start;
  }
  .gloss-block { grid-column: 1; margin-bottom: 5px; break-inside: avoid; }
  .gloss-label { font-size: 11pt; line-height: 1.2; }
  .gloss-body { font-size: 11pt; line-height: 1.3; }
  .gloss-said { font-size: 11pt; line-height: 1.3; }
  figure.gloss-sketch {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    max-width: 115px;
    margin: 0;
    padding: 6px;
    transform: none;
    box-shadow: none;
    break-inside: avoid;
  }
  figure.gloss-sketch figcaption { font-size: 10pt; }

  /* reflection: clean typed section, starts fresh */
  section.reflection { padding: 16px 0 0; break-before: page; }
  .reflection-sheet { border: none; padding: 0; box-shadow: none; transform: none; background: transparent; }
  .reflection-sheet > .tape { display: none; }
  .reflection-sheet h2 { font-size: 22pt; }
  .reflection-sheet .deck { font-size: 12pt; }
  .reflection-sheet h3 { font-size: 13pt; break-after: avoid; }
  .reflection-sheet p { font-size: 11pt; line-height: 1.45; max-width: none; }
  .closing-quote { font-size: 13pt; }

  footer.colophon { font-size: 9pt; padding: 16px 0 0; }
  footer.colophon .credits { font-size: 8.5pt; }
}