/* ============================================================
   Jenora Kwaning — personal index
   Composition: warm paper + hand-drawn ink · stacked headline ·
   staggered line reveal · receipt/listing layout ·
   expandable index · full-bleed colour blocks per section
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --paper:      #f8f2e2;
  --paper-deep: #f1e8d2;
  --ink:        #0a0a0a;
  --ink-soft:   #3a352c;
  --ink-faint:  #6d6558;
  --rule:       #0a0a0a;

  --block-a: #f8f2e2;   /* paper   */
  --block-b: #e8d9b8;   /* oat     */
  --block-c: #cfe0d4;   /* sage    */
  --block-d: #f0c9a8;   /* apricot */
  --block-e: #d9d3ea;   /* lilac   */
  --block-f: #0a0a0a;   /* ink     */

  --fg: var(--ink);
  --bg: var(--paper);

  --col: 40ch;
  --pad: clamp(1.25rem, 5vw, 3rem);

  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14120e;
    --paper-deep: #1c1913;
    --ink:        #f4eddc;
    --ink-soft:   #d8cfba;
    --ink-faint:  #9a9080;
    --rule:       #f4eddc;

    --block-a: #14120e;
    --block-b: #2a2519;
    --block-c: #1b2a24;
    --block-d: #33231a;
    --block-e: #241f33;
    --block-f: #f4eddc;

    --fg: var(--ink);
    --bg: var(--paper);
  }
}

/* explicit overrides from the header switcher */
html[data-theme="light"] {
  --paper:#f8f2e2; --paper-deep:#f1e8d2; --ink:#0a0a0a; --ink-soft:#3a352c;
  --ink-faint:#6d6558; --rule:#0a0a0a;
  --block-a:#f8f2e2; --block-b:#e8d9b8; --block-c:#cfe0d4; --block-d:#f0c9a8;
  --block-e:#d9d3ea; --block-f:#0a0a0a;
}
html[data-theme="dark"] {
  --paper:#14120e; --paper-deep:#1c1913; --ink:#f4eddc; --ink-soft:#d8cfba;
  --ink-faint:#9a9080; --rule:#f4eddc;
  --block-a:#14120e; --block-b:#2a2519; --block-c:#1b2a24; --block-d:#33231a;
  --block-e:#241f33; --block-f:#f4eddc;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(0.86rem, 0.55vw + 0.72rem, 0.98rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px dashed var(--fg);
  outline-offset: 3px;
}

/* paper grain, drawn with an inline SVG so there is no external request */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  body::before { mix-blend-mode: screen; opacity: 0.22; }
}
html[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: 0.22; }
html[data-theme="light"] body::before { mix-blend-mode: multiply; opacity: 0.5; }

/* ---------- header ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__mark {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.masthead__nav a { text-decoration: none; opacity: 0.75; }
.masthead__nav a:hover { opacity: 1; text-decoration: underline; }

.theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0.6rem;
  background: transparent;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.theme-toggle__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fg);
}

/* ---------- section shell ---------- */
.block {
  position: relative;
  z-index: 1;
  padding: clamp(3.5rem, 9vw, 7rem) var(--pad);
  background: var(--block-color, var(--block-a));
  color: var(--block-fg, var(--ink));
  border-bottom: 1px solid var(--rule);
}
.block--a { --block-color: var(--block-a); }
.block--b { --block-color: var(--block-b); }
.block--c { --block-color: var(--block-c); }
.block--d { --block-color: var(--block-d); }
.block--e { --block-color: var(--block-e); }
.block--f { --block-color: var(--block-f); --block-fg: var(--paper); }
html[data-theme="dark"] .block--f { --block-fg: #14120e; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .block--f { --block-fg: #14120e; }
}

.wrap {
  max-width: var(--col);
  margin-inline: auto;
}

/* uneven hand-drawn edge on the narrow column */
.wrap--rough {
  border-left: 1px solid currentColor;
  border-right: 2px solid currentColor;
  padding-inline: clamp(0.9rem, 3vw, 1.6rem);
}

/* ---------- type ---------- */
.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: 0 0 1.6rem;
}

h1, h2, h3 { font-weight: 400; margin: 0; }

h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 12vw, 5.4rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 100;
  margin-bottom: 1.8rem;
}
h1 span { display: block; }
h1 span:nth-child(2) { margin-left: 1.6em; }
h1 span:nth-child(3) { margin-left: -0.35em; }
h1 span:nth-child(4) { margin-left: 0.9em; }

h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 5vw, 2.3rem);
  line-height: 1.1;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  margin-bottom: 1.4rem;
}

h3 {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.02em; }

/* scribble underline, drawn as an SVG stroke */
.scribble {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.scribble::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.28em;
  height: 0.42em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 52 11, 78 6 S 128 1, 152 7 S 186 11, 198 4' fill='none' stroke='%230a0a0a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] .scribble::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 52 11, 78 6 S 128 1, 152 7 S 186 11, 198 4' fill='none' stroke='%23f4eddc' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .scribble::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 30 2, 52 11, 78 6 S 128 1, 152 7 S 186 11, 198 4' fill='none' stroke='%23f4eddc' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* ---------- receipt rules ---------- */
.rule {
  border: 0;
  border-top: 1px dotted currentColor;
  opacity: 0.55;
  margin: 1.6rem 0;
}
.rule--solid { border-top: 1px solid currentColor; opacity: 1; }

/* ---------- meta rows (right-aligned metadata) ---------- */
.meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.meta__dots {
  flex: 1;
  border-bottom: 1px dotted currentColor;
  opacity: 0.6;
  transform: translateY(-0.25em);
}
.meta__val { white-space: nowrap; }

/* ---------- expandable index ---------- */
.index { margin-top: 0.5rem; }

.entry {
  border-top: 1px dotted currentColor;
}
.entry:last-of-type { border-bottom: 1px dotted currentColor; }

.entry > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline;
  gap: 0.7rem;
  padding: 1.05rem 0.2rem;
  min-height: 44px;
}
.entry > summary::-webkit-details-marker { display: none; }

.entry__no {
  font-size: 0.72rem;
  opacity: 0.55;
  letter-spacing: 0.08em;
}
.entry__title {
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  line-height: 1.2;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.entry__year {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  white-space: nowrap;
}
.entry > summary:hover .entry__title { text-decoration: underline; text-underline-offset: 4px; }

.entry__body {
  padding: 0 0.2rem 1.6rem 3.1rem;
  font-size: 0.92em;
  color: color-mix(in srgb, currentColor 88%, transparent);
}
.entry__body p { margin-bottom: 0.85rem; }
.entry__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.entry__tags span {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  opacity: 0.8;
}

@media (max-width: 34rem) {
  .entry > summary { grid-template-columns: 2rem 1fr; }
  .entry__year { grid-column: 2; opacity: 0.6; }
  .entry__body { padding-left: 2.7rem; }
}

/* ---------- lists ---------- */
.plain { list-style: none; margin: 0; padding: 0; }
.plain li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted currentColor;
}
.plain li:last-child { border-bottom: 0; }
.plain .dots { flex: 1; border-bottom: 1px dotted currentColor; opacity: 0.5; transform: translateY(-0.25em); }
.plain .val { white-space: nowrap; font-size: 0.82em; opacity: 0.85; }

/* ---------- contact ---------- */
.contact-list { margin-top: 1.4rem; }
.contact-list a { text-decoration: none; border-bottom: 1px solid currentColor; }
.contact-list a:hover { opacity: 0.7; }

/* ---------- footer ---------- */
.colophon {
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad) 5rem;
  background: var(--block-f);
  color: var(--paper);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
html[data-theme="dark"] .colophon { color: #14120e; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .colophon { color: #14120e; }
}
.colophon .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; }

/* ---------- motion: staggered line reveal ---------- */
@keyframes riseIn {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .block > .wrap > *,
    .entry {
      animation: riseIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }
    .block > .wrap > *:nth-child(2) { animation-range: entry 4% cover 42%; }
    .block > .wrap > *:nth-child(3) { animation-range: entry 8% cover 46%; }
    .block > .wrap > *:nth-child(4) { animation-range: entry 12% cover 50%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- attribution (free tier) ---------- */
.attribution {
  position: fixed;
  bottom: 0.5rem;
  right: 0.75rem;
  z-index: 30;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  opacity: 0.55;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
}
.attribution a { color: inherit; text-decoration: none; }
.attribution a:hover { text-decoration: underline; }