/* =========================================================
   Theme
   ========================================================= */

:root {
  color-scheme: light only; /* never auto-darken */
  --line: round(1.65rem, 1px); /* one ruled line (college ruled), whole pixels so every rule is crisp; all vertical spacing is a multiple of it */
  --margin: 5rem; /* page edge -> red margin line */
  --font-heading: 'Caveat', cursive;
  --font-body: 'Kalam', cursive;

  /* light — from the collage: cream paper, warm black ink, rust red, dusty lilac */
  --desk: #e6e1d7;
  --paper: #fcf8ee;
  --paper-under: #f3ecdc;
  --page-edge: #e0d7c3;
  --rule: #b3b0cc;
  --margin-red: #c4473a;
  --ink: #2a2521;
  --ink-soft: #6f665e;
  --accent: #b23a2e;
  --highlight: rgba(150, 146, 190, 0.38);
  /* one marker color per page (labels + heading underlines) */
  --tab-about: #9a96bf;
  --tab-experience: #c0533f;
  --tab-writing: #c9a56a;
  --tab-projects: #6f9460;
  --tab-ink: #2a2521;
  --graphite: 50, 45, 42; /* r, g, b of the pencil trail */
  --shadow: 0 1px 2px rgba(60, 45, 30, 0.08), 0 12px 32px rgba(60, 45, 30, 0.15);

  /* pen cursor; the hotspot is the nib (bottom-left) */
  --pen: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M21 4l7 7-16 16-7-7z' fill='%23fffdf6' stroke='%232a2521' stroke-width='1.6' stroke-linejoin='round'/><path d='M5 20l7 7-9 2z' fill='%232a2521' stroke='%232a2521' stroke-width='1.6' stroke-linejoin='round'/><path d='M17 8l7 7' stroke='%232a2521' stroke-width='1.6'/></svg>") 3 29, auto;
  --pen-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M21 4l7 7-16 16-7-7z' fill='%23b23a2e' stroke='%232a2521' stroke-width='1.6' stroke-linejoin='round'/><path d='M5 20l7 7-9 2z' fill='%232a2521' stroke='%232a2521' stroke-width='1.6' stroke-linejoin='round'/><path d='M17 8l7 7' stroke='%23fffdf6' stroke-width='1.6'/></svg>") 3 29, pointer;
}

/* =========================================================
   Base
   ========================================================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* overall size of the site: everything is in rem, so this scales the
     notebook, text, lines and tabs together (100% = original size) */
  font-size: 85%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  padding: 4rem 3.5rem; /* room for the corners poking out and their labels */
  background-color: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
  text-transform: lowercase;
  cursor: var(--pen);
  transition: background-color 0.3s, color 0.3s;
}

a,
button {
  color: inherit;
  text-decoration: none;
  cursor: var(--pen-ink);
}

button {
  font: inherit;
  background: none;
  border: 0;
}

ul {
  list-style: none;
}

[hidden] {
  display: none !important;
}

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

/* =========================================================
   Paper pile: the open sheet on top, the other pages as tilted sheets under
   it with corners poking out, and scribbled labels on the desk
   ========================================================= */

.notebook {
  isolation: isolate; /* layers: loose sheets < other pages' sheets < top sheet */
  max-width: 52rem;
  margin: 0 auto;
}

.notebook__body {
  position: relative;
  min-width: 0;
  /* the pile fills at least the screen, and grows with the writing
     (no scrolling inside the paper) */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 8rem);
  min-height: calc(100dvh - 8rem);
}

/* loose sheets underneath, a little crooked */
.notebook__body::before,
.notebook__body::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 2px;
  background: var(--paper-under)
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  box-shadow: var(--shadow);
}

.notebook__body::before {
  transform: rotate(1.4deg) translate(0.4rem, 0.3rem);
}

.notebook__body::after {
  transform: rotate(-0.9deg) translate(-0.3rem, 0.5rem);
}

.notebook__page {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: calc(var(--line) * 2) 2.5rem calc(var(--line) * 2) calc(var(--margin) + 1.5rem);
  border-radius: 2px;
  background-color: var(--paper);
  background-image:
    /* red margin line */
    linear-gradient(to right,
      transparent calc(var(--margin) - 1px),
      var(--margin-red) calc(var(--margin) - 1px) calc(var(--margin) + 1px),
      transparent calc(var(--margin) + 1px)),
    /* blue rules */
    repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--line) - 1px),
      var(--rule) calc(var(--line) - 1px) var(--line));
  background-position: 0 0, 0 -0.45rem; /* measured: puts each rule right under the body text's baseline */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* on tab change, the writing fades in; the paper itself stays put */
.notebook__page.turning > .page {
  animation: page-turn 0.35s ease-out;
}

/* pencil trail canvas (drawn by script.js) sits on the paper, under the writing */
.pencil {
  position: absolute;
  top: 0;
  left: 0;
  /* a canvas otherwise sizes itself from its pixel buffer, which is 2x on
     retina screens; height is set by script.js to the paper's full length */
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.notebook__page > :not(.pencil) {
  position: relative;
  z-index: 1;
}

@keyframes page-turn {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
}

/* ---------- the other pages: whole sheets lower in the pile ----------
   Each is tilted so one corner pokes out from under the top sheet; clicking
   any part that shows opens it. */

.sheet {
  --tilt: 0deg;
  --shift: 0, 0;
  position: absolute;
  inset: 0;
  z-index: -1; /* under the top sheet */
  border-radius: 2px;
  background: var(--paper-under)
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
  transform: translate(var(--shift)) rotate(var(--tilt));
  transition: transform 0.25s;
}

/* rotating about the center pushes one corner out on each side; these pick
   the tilt + nudge that makes the named corner stick out most */
.sheet--tl { --tilt: -3.2deg; --shift: -0.7rem, -0.5rem; }
.sheet--tr { --tilt: 3.4deg; --shift: 0.7rem, -0.5rem; }
.sheet--bl { --tilt: 3deg; --shift: -0.7rem, 0.5rem; }
.sheet--br { --tilt: -2.8deg; --shift: 0.7rem, 0.5rem; }

/* hovering a sheet (or its label) slides it out a little further */
.sheet:hover,
.sheet:focus-visible { transform: translate(var(--shift)) rotate(calc(var(--tilt) * 1.25)); }

/* ---------- scribbled labels on the desk, arrows pointing at the corners ---------- */

.label {
  --tab: var(--tab-about);
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--ink-soft);
  transition: color 0.15s;
}

.label[data-tab='about'] { --tab: var(--tab-about); }
.label[data-tab='experience'] { --tab: var(--tab-experience); }
.label[data-tab='writing'] { --tab: var(--tab-writing); }
.label[data-tab='projects'] { --tab: var(--tab-projects); }

.label span {
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-decoration: underline var(--tab);
  text-decoration-thickness: 0.28em;
  text-underline-offset: -0.05em;
  text-decoration-skip-ink: none;
}

.label:hover,
.label:focus-visible {
  color: var(--accent);
}

/* labels sit beside the strip where each sheet sticks out from under the top
   sheet; one arrow drawing (pointing left) is flipped for the left side */
.label--tl { right: calc(100% + 1.4rem); top: 22%; transform: rotate(-3deg); }
.label--tl svg { transform: scaleX(-1); }
.label--tr { left: calc(100% + 1.4rem); top: 25%; transform: rotate(3deg); }
.label--bl { right: calc(100% + 1.4rem); bottom: 18%; transform: rotate(2deg); }
.label--bl svg { transform: scaleX(-1); }
.label--br { left: calc(100% + 1.4rem); bottom: 18%; transform: rotate(-2deg); }

/* the open page is the top sheet: no sheet or label for it underneath */
.tab--active { display: none; }

/* =========================================================
   Page content
   ========================================================= */

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--line); /* exactly one ruled line, so everything below stays on the rules */
  margin-bottom: calc(var(--line) * 2);
}

.header__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}


/* "clear scribbles" button, top right */
.header__clear {
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.15rem 0.5rem;
  border: 1px dashed currentColor;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: color 0.15s;
}

.header__clear:hover,
.header__clear:focus-visible {
  color: var(--accent);
}

/* no mouse = no scribbles */
@media (hover: none) {
  .header__clear { display: none; }
}

/* scribbles stay until cleared, so keep the layer faint as they build up */
.pencil {
  opacity: 0.55;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
}

h1 {
  font-size: 2.9rem;
  line-height: calc(var(--line) * 2);
}

/* section titles get a marker underline in the open tab's color */
h2 {
  font-size: 1.75rem;
  line-height: calc(var(--line) * 1.5);
  padding-top: calc(var(--line) * 0.5);
  text-decoration: underline var(--page-tab, var(--tab-about));
  text-decoration-thickness: 0.28em;
  text-underline-offset: -0.05em;
  text-decoration-skip-ink: none;
}

* + h2 {
  margin-top: calc(var(--line) * 2);
}

h3 {
  font-size: 1.4rem;
  line-height: var(--line);
}

/* a small date or note after a title: inline, so a long title wraps naturally,
   and line-height 1 so it never makes the title's line taller than a rule */
h3 > .date,
h3 > .note {
  display: inline-block;
  margin-left: 0.6rem;
  line-height: 1;
}

h3 a:hover {
  color: var(--accent);
}

/* a hand-drawn empty to-do box before an unfinished piece */
.checkbox {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: 0.45em;
  border: 1.5px solid currentColor;
  border-radius: 2px 3px 2px 4px;
  transform: rotate(-4deg);
}

/* little arrow after linked titles (e.g. companies in experiences) */
h3 a[target='_blank']::after {
  content: ' ↗';
  font-size: 0.6em;
  line-height: 1; /* small inline bits must not make the line taller than a rule */
  color: var(--ink-soft);
}

/* paragraphs sit on back-to-back lines; .spaced adds a blank line above */
.spaced {
  margin-top: var(--line);
}

.role {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--ink-soft);
  margin-bottom: var(--line);
}

.highlight {
  padding: 0 0.15em;
  margin: 0 -0.05em;
  background: linear-gradient(100deg, transparent 2%, var(--highlight) 4% 96%, transparent 98%)
    0 75% / 100% 55% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.link {
  color: var(--accent);
  text-decoration: underline 1px;
  /* lay the underline right on the ruled line instead of just below it */
  text-underline-position: from-font;
  text-underline-offset: -1.2px;
}

.link:hover,
.link:focus-visible {
  text-decoration-style: wavy;
}

/* tiny "last updated" note beside a heading; inline-block keeps the heading's underline off it */
.updated {
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1; /* don't make the heading taller than its lines */
  color: var(--ink-soft);
}

/* The handwriting font (Caveat) sits a little lower in its line than the body
   font; these measured nudges put every baseline on a ruled line. */
.header__title { position: relative; top: -0.25rem; }
.role { position: relative; top: -0.17rem; }
.lists dt { position: relative; top: -0.17rem; }
h1 { position: relative; top: 0.07rem; }
h2 { position: relative; top: 0.08rem; }
h3 { position: relative; top: -0.25rem; }

/* a small link tucked after an item, e.g. "(wip, read my other work here!)" */
.aside-link {
  margin-left: 0.3rem;
  font-size: 0.75rem;
  line-height: 1; /* never make its line taller than a rule */
}

.muted {
  color: var(--ink-soft);
}

.inline-links,
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}

/* project / post entries */
h2 + .entry,
.lists + .entry,
.entry + .spaced,
.entry + .entry {
  margin-top: var(--line);
}

.meta {
  font-size: 0.8rem;
}

.meta span,
.date {
  color: var(--ink-soft);
}

.date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1; /* small inline bits must not make the line taller than a rule */
}

/* little scribbled note beside a title */
.note {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1; /* don't make the title's line taller than a rule */
  color: var(--margin-red);
  transform: rotate(-3deg);
}

/* a little aside written next to a heading, highlighted pale sage */
.sticky-note {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.15rem 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1; /* don't make the heading taller than its lines */
  color: var(--ink-soft);
  background: rgba(160, 190, 145, 0.35);
  transform: rotate(-1.5deg);
}

.note::before { content: '('; }
.note::after { content: ')'; }

/* category lists (favorites, currently): category on the left, its list on the right */
.lists {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--line) 1.5rem; /* a blank ruled line between categories */
}

.lists dt {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.lists dt::after {
  content: ' :';
}

.lists li::before {
  content: '– ';
  color: var(--ink-soft);
}

/* a photo taped onto the about page; floats right so the intro wraps around it */
.taped-photo {
  position: relative;
  float: right;
  width: 9.5rem;
  margin: 0.4rem 0.2rem 0.5rem 1.5rem;
  padding: 0.35rem;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
  transform: rotate(2.5deg);
}

.taped-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* two strips of tape across the top corners */
.taped-photo::before,
.taped-photo::after {
  content: '';
  position: absolute;
  top: -0.45rem;
  width: 3.4rem;
  height: 1.1rem;
  background: rgba(240, 228, 180, 0.72);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
}

.taped-photo::before {
  left: -1.1rem;
  transform: rotate(-35deg);
}

.taped-photo::after {
  right: -1.1rem;
  transform: rotate(35deg);
}

/* a bigger landscape photo, tilted the other way */
.taped-photo--wide {
  width: 15rem;
  margin-top: -3rem;
  transform: rotate(-2deg);
}

/* =========================================================
   Post pages (writing/*.html)
   ========================================================= */

/* post pages belong to the writing tab: same marker color */
.post {
  --page-tab: var(--tab-writing);
}

/* the writing itself keeps its own capitalization */
.post__body {
  text-transform: none;
  margin-top: var(--line);
}

.post__body p + p,
.post__body * + p,
.post__body p + * {
  margin-top: var(--line);
}

.post__body a {
  color: var(--accent);
  text-decoration: underline 1px;
  text-underline-position: from-font;
  text-underline-offset: -1.2px;
}

.post__body blockquote {
  padding-left: 1rem;
  border-left: 2px solid var(--page-tab, var(--tab-writing));
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

/* handwriting-font lines in posts sit a little low; nudge onto the rule (measured) */
.post__body blockquote,
.post__body .song {
  position: relative;
  top: -0.16rem;
}

/* a song mentioned in a post */
.post__body .song {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* photos taped onto the page */
.post__body .photo {
  position: relative;
  width: fit-content;
  max-width: min(100%, 22rem);
  margin-left: auto;
  margin-right: auto;
  padding: 0.5rem 0.5rem 0;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: rotate(-1.5deg);
}

.post__body .photo:nth-of-type(even) {
  transform: rotate(1.2deg);
}

/* a strip of tape on top */
.post__body .photo::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 4.5rem;
  height: 1.2rem;
  background: rgba(240, 225, 170, 0.75);
  transform: translateX(-50%) rotate(2deg);
}

.post__body .photo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.post__body figcaption {
  padding: 0.2rem 0.3rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  text-align: center;
  color: #4a4a55;
}

/* =========================================================
   Small screens
   ========================================================= */

@media (max-width: 640px) {
  html {
    font-size: 100%; /* phones are already small; keep text readable */
  }

  :root {
    --margin: 3rem;
  }

  body {
    font-size: 0.95rem;
    padding: 2.6rem 2rem; /* room for the corners poking out */
  }

  .notebook__body {
    min-height: calc(100vh - 5.2rem);
    min-height: calc(100dvh - 5.2rem);
  }

  .notebook__page {
    padding: var(--line) 1.1rem var(--line) calc(var(--margin) + 0.75rem);
  }

  /* no desk space beside the pile on phones: labels go just above / below it */
  .label svg { display: none; }
  .label span { font-size: 1.2rem; }
  .label--tl, .label--bl { right: auto; left: 0; }
  .label--tr, .label--br { left: auto; right: 0; }
  .label--tl, .label--tr { top: -2.3rem; bottom: auto; }
  .label--bl, .label--br { bottom: -2.3rem; top: auto; }

  .taped-photo { width: 6.5rem; margin-left: 0.8rem; }
  .taped-photo--wide { width: 11rem; }

  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .notebook__page.turning > .page { animation: none; }
}