/* =========================================================
   Notebook theme
   ========================================================= */
:root {
  --paper: #f1f4f5;                     /* engineering pad */
  --grid: rgba(64, 112, 160, 0.11);
  --grid-major: rgba(64, 112, 160, 0.05);
  --plate: #ffffff;                     /* renders and plots sit on white */
  --plate-edge: #8e99a4;
  --ink: #22292f;                       /* graphite */
  --ink-soft: #55616d;
  --rule: #aab4bd;
  --pen: #2449c9;                       /* blue pen: links, focus */
  --red: #c9372c;                       /* red pen: notes, dimensions */
  --tape: rgba(240, 210, 120, 0.55);
  --on-pen: #ffffff;
  --card: #ffffff;                      /* photo borders, résumé sheet */

  --draft: "Architects Daughter", "Segoe Print", "Bradley Hand", cursive;
  --hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;
  --body: "Archivo", system-ui, sans-serif;

  --step--1: 0.9rem;
  --step-0: 1.0625rem;
  --step-1: 1.4rem;
  --step-2: 1.95rem;
  --step-3: clamp(2.3rem, 5.5vw, 3.9rem);
  --step-4: clamp(3.4rem, 12vw, 9.5rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 80rem;
  --sketch: 255px 12px 225px 12px / 12px 225px 12px 255px;  /* hand-drawn box corners */
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-major) 2px, transparent 2px),
    linear-gradient(90deg, var(--grid-major) 2px, transparent 2px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  transition: background-color 300ms ease, color 300ms ease;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pen); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; }
[hidden] { display: none !important; }

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

h1, h2, h3 {
  font-family: var(--draft);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0;
}
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

/* Hand-drawn scribble under section headings */
.scribble { display: inline-block; position: relative; padding-bottom: 0.4rem; }
.scribble::after {
  content: "";
  position: absolute;
  left: -0.2em;
  right: -0.4em;
  bottom: -0.15rem;
  height: 0.6rem;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 60 2, 120 11, 180 5 S 270 3, 298 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 60 2, 120 11, 180 5 S 270 3, 298 7' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Image plate: renders and plots sit whole, never cropped, in a sketched box */
.plate {
  display: grid;
  place-items: center;
  background: var(--plate);
  border: 1.5px solid var(--plate-edge);
  border-radius: var(--sketch);
  padding: clamp(0.6rem, 1.6vw, 1.1rem);
  overflow: hidden;
}
.plate img { width: 100%; height: 100%; object-fit: contain; }

/* Red-pen margin note */
.note {
  display: inline-block;
  font-family: var(--hand);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--red);
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.note::before { content: "↳ "; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 1.1rem;
  font-family: var(--draft);
}
.site-header .home { font-size: 1.2rem; color: var(--ink); text-decoration: none; }
.site-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 1.1rem; }
.site-header nav a { color: var(--ink); text-decoration: none; }
.site-header nav a:hover, .site-header nav a[aria-current] { text-decoration: underline wavy var(--red); text-underline-offset: 0.3em; }


/* =========================================================
   Hero
   ========================================================= */
.hero-hello {
  font-family: var(--hand);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--red);
  margin: clamp(1.5rem, 5vw, 3.5rem) 0 0;
  transform: rotate(-3deg);
  transform-origin: left;
}
.hero-name {
  font-family: var(--draft);
  font-size: var(--step-4);
  line-height: 0.95;
  letter-spacing: 0;
  margin: 0.2rem 0 0;
  -webkit-text-stroke: 0.025em currentColor;   /* a firmer, marker-weight line */
  overflow-wrap: anywhere;
}
.hero-underline { display: block; width: min(100%, 44rem); height: auto; color: var(--red); margin: 0.2rem 0 1.75rem; }
.hero-intro { font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); margin: 0 0 clamp(2.25rem, 5vw, 3.75rem); max-width: 40rem; }

/* One project as a sequence, taped in, dimensioned like a drawing */
.process-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.25fr 1.25fr 0.75fr;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  align-items: end;
}
.process-strip li { display: grid; gap: 0.7rem; position: relative; }
.process-strip .plate { height: clamp(11rem, 26vw, 22rem); border-radius: 3px; box-shadow: 0 1px 2px rgba(20,30,40,.08), 0 8px 20px rgba(20,30,40,.10); }
.process-strip li::before {                  /* tape */
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 4.5rem;
  height: 1.4rem;
  background: var(--tape);
  transform: translateX(-50%) rotate(-4deg);
  z-index: 1;
}
.process-strip li:nth-child(even)::before { transform: translateX(-50%) rotate(5deg); }
.process-strip li:nth-child(1) .plate { transform: rotate(-1.4deg); }
.process-strip li:nth-child(2) .plate { transform: rotate(0.7deg); }
.process-strip li:nth-child(3) .plate { transform: rotate(-0.6deg); }
.process-strip li:nth-child(4) .plate { transform: rotate(1.6deg); }
.process-strip li:last-child .plate { padding: 0; }
.process-strip li:last-child img { object-fit: cover; }
.process-label { font-family: var(--hand); font-size: var(--step-1); color: var(--red); line-height: 1; padding-left: 0.25rem; }
.process-strip .arrow { display: inline-block; width: clamp(2rem, 3.5vw, 2.8rem); margin-left: 0.4rem; vertical-align: middle; }

.dim {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  color: var(--ink);
  text-decoration: none;
}
.dim-line { position: relative; height: 1.5px; background: var(--red); }
.dim-line::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-block: 5px solid transparent;
  transform: translateY(-50%);
}
.dim-line::after {                            /* extension tick */
  content: "";
  position: absolute;
  top: -0.7rem;
  width: 1.5px;
  height: 1.4rem;
  background: var(--red);
}
.dim-line.left::before  { left: 0;  border-right: 12px solid var(--red); }
.dim-line.right::before { right: 0; border-left: 12px solid var(--red); }
.dim-line.left::after  { left: 0; }
.dim-line.right::after { right: 0; }
.dim-label { font-family: var(--draft); font-size: var(--step-1); text-align: center; line-height: 1.2; }
.dim-label small { display: block; font-family: var(--hand); font-size: 1.05rem; color: var(--red); }
.dim:hover .dim-label { text-decoration: underline wavy var(--red); text-underline-offset: 0.3em; }

/* =========================================================
   Sections
   ========================================================= */
.section { padding-block: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 1.25rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* Index tabs: binder dividers along the top of the list, one tape colour per area */
.tab-all { --t: rgba(170, 180, 190, 0.45); }
.tab-drivetrains { --t: var(--tape-yellow); }
.tab-mechatronics { --t: var(--tape-blue); }
.tab-energy { --t: rgba(240, 160, 110, 0.55); }
.tab-sustainability { --t: var(--tape-mint); }
.tab-building { --t: var(--tape-pink); }
.index-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.3rem 0.35rem;
  border-bottom: 2px solid var(--ink); padding: 0 0.25rem;
}
.index-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--draft); font-size: 1rem; line-height: 1.2; color: var(--ink);
  background: linear-gradient(var(--t), var(--t)), var(--paper);
  border: 1.5px solid var(--ink-soft); border-bottom: 0;
  border-radius: 0.7rem 0.9rem 0 0 / 0.6rem 0.8rem 0 0;
  padding: 0.4rem 0.9rem 0.35rem; margin-bottom: -2px;
  cursor: pointer; transform: translateY(4px);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.index-tabs button:nth-child(odd) { rotate: -0.6deg; }
.index-tabs button:nth-child(even) { rotate: 0.5deg; }
.index-tabs button:hover { transform: translateY(0); }
.index-tabs button:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.index-tabs button[aria-pressed="true"] {
  transform: translateY(0); rotate: 0deg; z-index: 1;
  border-color: var(--ink); border-width: 2px; border-bottom: 2px solid var(--paper);
  padding-bottom: 0.55rem; font-weight: 700;
  box-shadow: 0 -3px 0 0 var(--t) inset;
}
.tab-n {
  font-family: var(--hand); font-size: 0.85rem; min-width: 1.4rem; text-align: center;
  border: 1.2px solid currentColor; border-radius: 50%; padding: 0 0.25rem; color: var(--ink-soft);
}
[aria-pressed="true"] .tab-n { color: var(--red); border-color: var(--red); }
.tab-status { min-height: 1.6rem; margin: 0.6rem 0 0; font-family: var(--hand); font-size: 1.15rem; color: var(--red); }

/* "filed under" tags on project rows and project pages */
.filed-under { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; margin: 0.9rem 0 0; font-size: var(--step--1); }
.filed-under span { font-family: var(--hand); color: var(--ink-soft); margin-right: 0.15rem; }
.filed-under a {
  font-family: var(--draft); font-size: 0.92rem; color: var(--ink); text-decoration: none;
  background: var(--t); padding: 0.05rem 0.55rem; border-radius: 2px;
  clip-path: polygon(2% 8%, 98% 0, 100% 92%, 0 100%);
}
.filed-under a:hover, .filed-under a:focus-visible { text-decoration: underline wavy var(--red); text-underline-offset: 0.2em; }
.project-head .filed-under { margin-top: 1.1rem; }

/* rows that come back into view after a tab change ease in */
@media (prefers-reduced-motion: no-preference) {
  .just-filed { animation: filed-in 320ms ease-out both; }
  @keyframes filed-in { from { opacity: 0; transform: translateY(8px); } }
}
@media print { .index-tabs, .tab-status, .filed-under { display: none; } }

/* Project rows: big image, text beside, alternating */
.project-row {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-top: 1.5px dashed var(--rule);
}
.project-list .project-row:nth-child(even) .project-media { order: 2; }
.project-media { aspect-ratio: 4 / 3; }
.project-row h3 a { color: var(--ink); text-decoration: none; }
.project-row h3 a:hover { text-decoration: underline wavy var(--red); text-underline-offset: 0.25em; text-decoration-thickness: 1.5px; }
.project-row p { margin: 1rem 0 0.9rem; color: var(--ink-soft); max-width: 36rem; }
.project-row .note { margin-bottom: 1.1rem; }

.specs { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1.25rem; margin: 0; font-size: var(--step--1); }
.specs dt { font-family: var(--draft); color: var(--ink-soft); }
.specs dd { margin: 0; }

/* Smaller projects */
.sub-head { font-size: var(--step-2); margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem; }
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card a { display: grid; gap: 0.45rem; color: var(--ink); text-decoration: none; }
.card .plate { aspect-ratio: 4 / 3; }
.card-title { font-family: var(--draft); font-size: 1.2rem; line-height: 1.25; }
.card-meta { font-size: var(--step--1); color: var(--ink-soft); }
.card .note { font-size: 1.05rem; }
.card a:hover .card-title { text-decoration: underline wavy var(--red); text-underline-offset: 0.25em; }
.filter-empty { color: var(--ink-soft); font-family: var(--hand); font-size: 1.2rem; padding-block: 2rem; }

/* Reports list */
.report-list { list-style: none; margin: 0; padding: 0; }
.report-list li {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) 9rem;
  gap: 0.25rem 2rem;
  padding-block: 1.1rem;
  border-top: 1.5px dashed var(--rule);
}
.report-title { font-family: var(--draft); font-size: 1.15rem; line-height: 1.3; }
.report-note { color: var(--ink-soft); }
.report-meta { font-family: var(--hand); color: var(--red); padding-top: 0.1em; text-align: right; }

/* About */
.about-body { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(2rem, 5vw, 4rem); margin-top: 1.75rem; }
.about-body p { font-size: var(--step-1); line-height: 1.5; margin: 0; max-width: 38rem; }
.about-body .say-hi { margin-top: 2.25rem; }
.say-hi .hand { font-family: var(--hand); color: var(--red); display: block; font-size: 1.45rem; margin-bottom: 0.3rem; transform: rotate(-2deg); transform-origin: left; }
.say-hi a { font-family: var(--draft); font-size: var(--step-1); overflow-wrap: anywhere; }
.toolbox {
  align-self: start;
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--sketch);
  padding: 1.25rem 1.5rem 1rem;
}
.toolbox h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.toolbox ul { list-style: none; margin: 0; padding: 0; }
.toolbox li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; }
.toolbox li::before { content: "✓"; position: absolute; left: 0.1rem; font-family: var(--hand); color: var(--red); font-size: 1.15rem; line-height: 1.4; }

/* Writing list */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-top: 1.5px dashed var(--rule); }
.post-list a { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 1.1rem; color: var(--ink); text-decoration: none; }
.post-list a:hover .post-title { text-decoration: underline wavy var(--red); }
.post-list time { font-family: var(--hand); color: var(--red); padding-top: 0.2em; }
.post-title { font-family: var(--draft); font-size: var(--step-1); line-height: 1.3; }
.empty { color: var(--ink-soft); }

/* =========================================================
   Project and post pages
   ========================================================= */
.article-head { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.article-head h1 { font-size: var(--step-3); max-width: 20ch; }
.article-head .lede { font-size: var(--step-1); color: var(--ink-soft); margin: 1.25rem 0 0; line-height: 1.45; max-width: 38rem; }
.article-head time { display: block; font-family: var(--hand); color: var(--red); margin-bottom: 0.75rem; font-size: 1.2rem; }
.project-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem clamp(2rem, 5vw, 4rem); align-items: end; }
.project-head .note { margin-top: 1.25rem; font-size: 1.35rem; }

/* Drawing title block */
.title-block {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--ink);
  font-size: var(--step--1);
  line-height: 1.35;
}
.tb-cell { padding: 0.45rem 0.6rem 0.5rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); min-width: 0; }
.tb-end, .tb-wide { border-right: 0; }
.tb-cell span { display: block; font-family: var(--draft); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.tb-wide { grid-column: 1 / -1; font-family: var(--draft); font-size: 1.15rem; }
.tb-span-2 { grid-column: span 2; }
.tb-last { border-bottom: 0; }
.tb-hand { font-family: var(--hand); font-size: 1.05rem; color: var(--red); }

.cover-plate { margin-block: 0; }
.cover-plate .plate { max-height: min(74vh, 48rem); }
.cover-plate img { max-height: calc(min(74vh, 48rem) - 2.5rem); }

.prose { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.prose > * { max-width: 40rem; }
.prose > table { max-width: 48rem; }
.prose h2 { font-size: var(--step-2); margin: 2.25em 0 0.5em; }
.prose h2:first-child { margin-top: 0.5em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.1em; }
.prose ul { list-style: none; padding-left: 1.4rem; }
.prose ul li { position: relative; }
.prose ul li::before { content: "–"; position: absolute; left: -1.2rem; color: var(--red); font-family: var(--hand); font-size: 1.2rem; line-height: 1.35; }
.prose ol { padding-left: 1.4rem; }
.prose ol li::marker { font-family: var(--hand); color: var(--red); }
.prose li { margin-bottom: 0.45em; }
.prose strong { font-weight: 700; }
.prose code { font-size: 0.92em; background: var(--plate); color: #1b2430; padding: 0.1em 0.35em; border-radius: 3px; }
.prose pre { background: var(--plate); color: #1b2430; padding: 1rem; overflow-x: auto; border-radius: 4px; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 2px solid var(--red); font-family: var(--hand); font-size: 1.25rem; color: var(--ink); }
.prose table { border-collapse: collapse; font-size: var(--step--1); margin-block: 1.75rem; border: 2px solid var(--ink); }
@media (max-width: 560px) { .prose table { display: block; overflow-x: auto; } }
.prose th, .prose td { border: 1px solid var(--ink); padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; }
.prose th { font-family: var(--draft); font-weight: 400; font-size: 1rem; }
.prose img { margin-block: 1.5rem; }

.gallery { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.gallery h2 { font-size: var(--step-2); margin-bottom: 1.5rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.gallery figure { margin: 0; display: grid; gap: 0.55rem; align-content: start; }
.gallery .plate { aspect-ratio: 4 / 3; }
.gallery figcaption { font-family: var(--hand); font-size: 1.05rem; line-height: 1.35; color: var(--red); }

.next-project { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; padding-top: clamp(3rem, 7vw, 5rem); }
.next-project .back { font-family: var(--draft); font-size: 1.1rem; }
.next-project .next { text-align: right; font-family: var(--draft); font-size: var(--step-1); color: var(--ink); text-decoration: none; }
.next-project .next span { display: block; font-family: var(--hand); font-size: 1.05rem; color: var(--red); }
.next-project .next:hover { text-decoration: underline wavy var(--red); text-underline-offset: 0.3em; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  margin-top: clamp(5rem, 10vw, 8rem);
  padding-block: 2rem 3rem;
  border-top: 1.5px dashed var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  font-family: var(--draft);
}
.site-footer p { margin: 0; color: var(--ink-soft); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 1.1rem; }

/* =========================================================
   Small screens
   ========================================================= */
@media (max-width: 860px) {
  .project-row, .about-body, .project-head { grid-template-columns: 1fr; }
  .project-list .project-row:nth-child(even) .project-media { order: 0; }
  .report-list li { grid-template-columns: 1fr; }
  .report-meta { text-align: left; }
  .process-strip { grid-template-columns: 1fr 1fr; row-gap: 2.25rem; }
  .process-strip li:nth-child(2) .arrow { display: none; }
  .process-strip .plate { height: clamp(9rem, 42vw, 16rem); }
}
@media (max-width: 560px) {
  .post-list a { grid-template-columns: 1fr; gap: 0.15rem; }
  .dim { grid-template-columns: 1.5rem 1fr 1.5rem; gap: 0.5rem; }
  .title-block { grid-template-columns: 1fr 1fr; }
  .tb-cell { border-right: 0; }
  .tb-span-2 { grid-column: 1 / -1; }
  .tb-last { border-bottom: 1px solid var(--ink); }
  .tb-last.tb-end { border-bottom: 0; }
}

/* =========================================================
   Motion: the name writes itself in once, the dimension line extends
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .hero-name { animation: write-on 1100ms steps(28, end) both; }
  .hero-underline path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 900ms 900ms ease-out forwards; }
  .dim-line.left  { animation: extend 600ms 500ms ease-out both; transform-origin: right; }
  .dim-line.right { animation: extend 600ms 500ms ease-out both; transform-origin: left; }
  @keyframes write-on { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes extend { from { transform: scaleX(0); } }
}

/* =========================================================
   About page pieces
   ========================================================= */
.process .section-label { font-size: var(--step-2); margin-bottom: 1.75rem; }
.see-all { font-family: var(--hand); font-size: 1.25rem; color: var(--red); text-decoration: none; }
.see-all:hover { text-decoration: underline wavy; }

.threads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.thread {
  border: 1.5px solid var(--ink-soft);
  border-radius: var(--sketch);
  padding: 1.4rem 1.5rem 1.25rem;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.thread h3 { font-size: 1.55rem; margin-bottom: 0.6rem; }
.thread p { margin: 0 0 1rem; color: var(--ink-soft); }
.thread-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.thread-links a { font-family: var(--hand); font-size: 1.15rem; color: var(--red); text-decoration: none; }
.thread-links a::before { content: "→ "; }
.thread-links a:hover { text-decoration: underline wavy; }

.about-body .about-aside { margin-top: 1rem; }
.about-aside .note { font-size: 1.3rem; }

/* =========================================================
   Hand-drafted system sketches (inline SVG, drawn straight onto the page)
   ========================================================= */
.sketch-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sketch-svg .k, .sketch-svg .r, .sketch-svg .soft { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sketch-svg .k { stroke: var(--ink); stroke-width: 2.2; }
.sketch-svg .soft { stroke: var(--ink-soft); stroke-width: 1.5; }
.sketch-svg .r { stroke: var(--red); stroke-width: 1.8; }
.sketch-svg .dash { stroke-dasharray: 7 6; }
.sketch-svg .t { font-family: var(--draft); font-size: 18px; fill: var(--ink); }
.sketch-svg .tsm { font-family: var(--draft); font-size: 14px; fill: var(--ink-soft); }
.sketch-svg .h { font-family: var(--hand); font-size: 17px; fill: var(--red); }

.sketch-box { display: grid; place-items: center; padding: clamp(0.5rem, 1.5vw, 1rem); border: 1.5px solid var(--plate-edge); border-radius: var(--sketch); }
.sketch-box .sketch-svg { max-height: 100%; }
.glance { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); max-width: 46rem; }
.glance figcaption { font-family: var(--hand); color: var(--red); font-size: 1.1rem; margin-top: 0.4rem; }

/* Photo of me, taped in */
.me {
  margin: 0;
  justify-self: start;
  position: relative;
  width: 100%;
  background: var(--card);
  padding: 0.7rem 0.7rem 2.6rem;
  box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 10px 26px rgba(20,30,40,.14);
  transform: rotate(2.5deg);
}
.me img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.me::before { content: ""; position: absolute; top: -0.8rem; left: 50%; width: 5.5rem; height: 1.5rem; background: var(--tape); transform: translateX(-50%) rotate(-5deg); }
.me figcaption { position: absolute; left: 0; right: 0; bottom: 0.55rem; text-align: center; font-family: var(--hand); font-size: 1.2rem; color: var(--ink); }
.hero-grid { padding-bottom: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) clamp(12rem, 22vw, 17rem); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .me { width: min(70%, 15rem); margin-inline: auto 0; } }
.card .sketch-box, .project-media.sketch-box { aspect-ratio: 4 / 3; }
.project-media.sketch-box:hover, .card a:hover .sketch-box { border-color: var(--red); }

/* =========================================================
   Journal: the scrapbook half of the notebook
   ========================================================= */
:root {
  --tape-yellow: rgba(240, 210, 120, 0.62);
  --tape-pink: rgba(240, 160, 180, 0.55);
  --tape-mint: rgba(140, 210, 180, 0.55);
  --tape-blue: rgba(140, 180, 230, 0.55);
  --lined: #fffdf6;
  --rule-blue: rgba(80, 130, 200, 0.22);
  --margin-red: rgba(201, 55, 44, 0.45);
  --line-step: 2.1rem;
}
.tape-yellow { --t: var(--tape-yellow); }
.tape-pink   { --t: var(--tape-pink); }
.tape-mint   { --t: var(--tape-mint); }
.tape-blue   { --t: var(--tape-blue); }

.journal-head { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.journal-title { font-family: var(--hand); font-weight: 700; font-size: var(--step-4); line-height: 0.95; margin: 0.25rem 0 0; }

/* Rubber date stamp */
.stamp {
  display: inline-grid;
  justify-items: center;
  font-family: var(--draft);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 6px;
  padding: 0.35rem 0.55rem 0.3rem;
  transform: rotate(-6deg);
  opacity: 0.85;
  background: transparent;
}
.stamp small { font-size: 0.72rem; letter-spacing: 0.12em; margin-top: 0.15rem; }
.stamp-lg { font-size: 1.35rem; padding: 0.45rem 0.75rem 0.4rem; }

/* Polaroid */
.polaroid {
  display: block;
  position: relative;
  background: var(--card);
  padding: 0.6rem 0.6rem 0;
  box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 10px 24px rgba(20,30,40,.13);
  margin: 0;
}
.polaroid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.polaroid-cap { display: block; font-family: var(--hand); font-size: 1.1rem; color: var(--ink); text-align: center; padding: 0.5rem 0.25rem 0.75rem; line-height: 1.25; }
.polaroid::before, .scrap-note::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  width: 5.5rem;
  height: 1.5rem;
  background: var(--t, var(--tape-yellow));
  transform: translateX(-50%) rotate(-4deg);
  z-index: 2;
}

/* The wall */
.scrapwall {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2.25rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.scrap { position: relative; }
.scrap:nth-child(4n+1) { transform: rotate(-1.6deg); }
.scrap:nth-child(4n+2) { transform: rotate(1.2deg); }
.scrap:nth-child(4n+3) { transform: rotate(-0.6deg); }
.scrap:nth-child(4n+4) { transform: rotate(2deg); }
.scrap a { display: grid; gap: 0.4rem; color: var(--ink); text-decoration: none; position: relative; }
.scrap .stamp { position: absolute; top: -0.6rem; right: -0.4rem; z-index: 3; background: var(--lined); }
.scrap-photo .polaroid { padding-bottom: 0; }
.scrap-photo .scrap-title { font-family: var(--hand); font-size: 1.35rem; line-height: 1.2; padding: 0 0.3rem; }
.scrap-note {
  position: relative;
  background: var(--lined);
  background-image: linear-gradient(transparent calc(1.9rem - 1px), var(--rule-blue) calc(1.9rem - 1px), var(--rule-blue) 1.9rem);
  background-size: 100% 1.9rem;
  box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 8px 20px rgba(20,30,40,.10);
  padding: 1.6rem 1.25rem 1.1rem;
}
.scrap-note .scrap-title { font-family: var(--hand); font-weight: 700; font-size: 1.45rem; line-height: 1.3; padding-right: 4.75rem; }
.scrap-excerpt { font-family: var(--hand); font-size: 1.1rem; line-height: 1.9rem; color: var(--ink-soft); }
.scrap-mood { font-family: var(--hand); font-size: 1rem; color: var(--red); padding: 0 0.3rem; }
.scrap a:hover .scrap-title { text-decoration: underline wavy var(--red); text-underline-offset: 0.25em; }
.scrap a:hover { transform: translateY(-3px); }
.scrap a { transition: transform 200ms ease; }
@media (prefers-reduced-motion: reduce) { .scrap a { transition: none; } .scrap a:hover { transform: none; } }

/* Empty journal */
.blank-page {
  max-width: 34rem;
  margin: 1rem 0 0;
  padding: 2.5rem 2rem 2rem 3.25rem;
  background: var(--lined);
  background-image:
    linear-gradient(90deg, transparent 2.25rem, var(--margin-red) 2.25rem, var(--margin-red) calc(2.25rem + 1.5px), transparent calc(2.25rem + 1.5px)),
    linear-gradient(transparent calc(var(--line-step) - 1px), var(--rule-blue) calc(var(--line-step) - 1px), var(--rule-blue) var(--line-step));
  background-size: 100% 100%, 100% var(--line-step);
  box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 10px 24px rgba(20,30,40,.10);
  transform: rotate(-0.8deg);
  position: relative;
}
.blank-hand { font-family: var(--hand); font-size: 1.8rem; margin: 0; line-height: var(--line-step); }
.blank-sub { font-family: var(--hand); color: var(--red); font-size: 1.2rem; margin: 0; line-height: var(--line-step); }
.doodle { width: 7rem; height: auto; color: var(--ink); margin-top: 1rem; }
.doodle .doodle-red { stroke: var(--red); }

/* A diary page */
.diary { padding-top: clamp(1.5rem, 4vw, 3rem); }
.diary-page {
  max-width: 50rem;
  margin-inline: auto;
  position: relative;
  background: var(--lined);
  background-image:
    linear-gradient(90deg, transparent 3.25rem, var(--margin-red) 3.25rem, var(--margin-red) calc(3.25rem + 1.5px), transparent calc(3.25rem + 1.5px)),
    linear-gradient(transparent calc(var(--line-step) - 1px), var(--rule-blue) calc(var(--line-step) - 1px), var(--rule-blue) var(--line-step));
  background-size: 100% 100%, 100% var(--line-step);
  background-position: 0 0, 0 0.6rem;
  box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 14px 36px rgba(20,30,40,.12);
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem) clamp(4.25rem, 8vw, 5.5rem);
}
.diary-page::before {                  /* binder holes */
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 3rem;
  bottom: 3rem;
  width: 1rem;
  background: radial-gradient(circle at 50% 50%, var(--paper) 0.42rem, transparent 0.47rem) 0 0 / 1rem 9rem repeat-y;
}
.diary-head { position: relative; margin-bottom: 1.5rem; }
.diary-head .stamp { position: absolute; right: -0.5rem; top: -0.75rem; background: var(--lined); }
.diary-head h1 { font-family: var(--hand); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.1rem); line-height: 1.15; padding-right: 6rem; }
.diary-meta { list-style: none; padding: 0; margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-family: var(--hand); font-size: 1.15rem; color: var(--red); }
.diary-meta span { color: var(--ink-soft); }

.photo-spread { display: flex; flex-wrap: wrap; gap: 1.75rem 1.5rem; margin: 1.25rem 0 2.25rem; }
.photo-spread .polaroid { flex: 1 1 13rem; max-width: 19rem; }
.photo-spread .polaroid:nth-child(odd) { transform: rotate(-2.2deg); }
.photo-spread .polaroid:nth-child(even) { transform: rotate(1.8deg); margin-top: 1rem; }

.diary-body { font-family: var(--hand); font-size: 1.3rem; line-height: var(--line-step); color: var(--ink); max-width: 38rem; }
.diary-body p, .diary-body ul, .diary-body ol, .diary-body blockquote { margin: 0 0 var(--line-step); }
.diary-body h2 { font-family: var(--hand); font-weight: 700; font-size: 1.6rem; line-height: var(--line-step); margin: var(--line-step) 0 0; }
.diary-body h3 { font-family: var(--hand); font-weight: 700; font-size: 1.35rem; line-height: var(--line-step); margin: 0; }
.diary-body ul { list-style: none; padding-left: 1.3rem; }
.diary-body ul li::before { content: "~"; color: var(--red); margin-left: -1.2rem; margin-right: 0.55rem; }
.diary-body blockquote { padding-left: 1rem; border-left: 2px solid var(--red); color: var(--ink-soft); margin-inline: 0; }
.diary-body strong { font-weight: 700; }
.diary-body a { color: var(--pen); }
.diary-body p:has(> img) {             /* inline photos become polaroids */
  display: inline-block;
  background: var(--card);
  padding: 0.6rem 0.6rem 0;
  box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 10px 24px rgba(20,30,40,.13);
  transform: rotate(-1.5deg);
  max-width: min(100%, 24rem);
  margin: 0.5rem 0 var(--line-step);
}
.diary-body p:has(> img) img { width: 100%; display: block; }
.diary-body img + em, .diary-body .img-cap { display: block; }

.diary-nav { max-width: 50rem; margin: clamp(2rem, 5vw, 3rem) auto 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: end; font-family: var(--draft); }
.diary-nav a { color: var(--ink); text-decoration: none; }
.diary-nav .newer { text-align: right; }
.diary-nav span { display: block; font-family: var(--hand); color: var(--red); font-size: 1.05rem; }
.diary-nav .all { font-family: var(--hand); color: var(--red); font-size: 1.15rem; }
.diary-nav a:hover { text-decoration: underline wavy var(--red); text-underline-offset: 0.25em; }

@media (max-width: 560px) {
  .diary-page::before { display: none; }
  .diary-head h1 { padding-right: 0; padding-top: 2.25rem; }
  .diary-head .stamp { right: 0; top: -1.25rem; }
  .diary-nav { grid-template-columns: 1fr 1fr; }
  .diary-nav .all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}


/* ---------- 3D model viewer (project pages) ---------- */
.model-section { margin-block: clamp(2rem, 5vw, 3.5rem); }
.model3d { margin: 0; max-width: 60rem; }
.model3d-stage { position: relative; aspect-ratio: 16 / 10; min-height: 18rem; background: #f1f4f5; border: 1.5px solid var(--plate-edge); border-radius: var(--sketch); overflow: hidden; }
.model3d-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.model3d-stage canvas:active { cursor: grabbing; }
.model3d-start { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; font: 1.15rem var(--hand); color: var(--pen); background: var(--plate); border: 1.5px dashed var(--pen); border-radius: var(--sketch); padding: 0.6rem 1.1rem; cursor: pointer; }
.model3d-err { position: absolute; inset: auto 1rem 45% 1rem; text-align: center; font-family: var(--hand); color: var(--red); margin: 0; }
.model3d-views { position: absolute; top: 0.6rem; right: 0.6rem; display: flex; gap: 0.3rem; opacity: 0; pointer-events: none; transition: opacity .3s; }
.model3d.is-live .model3d-views { opacity: 1; pointer-events: auto; }
.model3d-views button { font: 0.95rem var(--draft); color: var(--ink); background: color-mix(in srgb, var(--plate) 88%, transparent); border: 1.2px solid var(--ink-soft); border-radius: 6px 3px 7px 3px; padding: 0.15rem 0.55rem; cursor: pointer; }
.model3d-views button:hover, .model3d-views button:focus-visible { border-color: var(--red); color: var(--red); }
.model3d-controls { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; margin-top: 0.8rem; font: 1.05rem var(--hand); color: var(--ink); }
.model3d-controls label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.model3d-controls input[type=checkbox], .model3d-controls input[type=range] { accent-color: var(--red); }
.model3d-lift input { width: 8rem; }
.model3d-lift output { font-family: var(--draft); min-width: 2.5ch; }
.model3d figcaption { font-family: var(--hand); color: var(--red); font-size: 1.05rem; margin-top: 0.4rem; }
@media (max-width: 600px) { .model3d-stage { aspect-ratio: 4 / 5; } }
.model3d-debug { font: 12px/1.4 ui-monospace, monospace; color: var(--ink); background: var(--plate); border: 1px dashed var(--rule); padding: 0.5rem; white-space: pre-wrap; }
.model3d-steer { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.model3d-steer button { font: 0.95rem var(--hand); color: var(--ink); background: var(--plate); border: 1.2px solid var(--ink-soft); border-radius: 6px 3px 7px 3px; padding: 0.05rem 0.5rem; cursor: pointer; }
.model3d-steer button[aria-pressed="true"] { border-color: var(--red); color: var(--red); }

/* ---------- test footage ("Caught on camera") ---------- */
.reel { padding-block: clamp(2.5rem, 6vw, 4rem) 0; }
.reel h2 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.reel-note { font-family: var(--hand); color: var(--ink-soft); margin: 0 0 1.5rem; }
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.clip { margin: 0; position: relative; display: grid; gap: 0.55rem; align-content: start; }
.clip-frame { background: var(--plate); padding: 0.55rem 0.55rem 0.7rem; border: 1px solid var(--plate-edge); box-shadow: 0 1px 2px rgba(20,30,40,.08), 0 8px 20px rgba(20,30,40,.10); }
.clip-frame video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #1c2126; }
.clip:nth-child(3n+1) .clip-frame { transform: rotate(-1.2deg); }
.clip:nth-child(3n+2) .clip-frame { transform: rotate(0.8deg); }
.clip:nth-child(3n) .clip-frame { transform: rotate(-0.4deg); }
.clip::before { content: ""; position: absolute; top: -0.6rem; left: 50%; width: 4.5rem; height: 1.3rem; transform: translateX(-50%) rotate(-3deg); background: var(--t, var(--tape)); z-index: 1; }
.clip figcaption { font-family: var(--hand); font-size: 1.05rem; line-height: 1.35; color: var(--red); }
@media (prefers-reduced-motion: no-preference) { .clip-frame { transition: transform .25s ease; } .clip:hover .clip-frame { transform: rotate(0deg) scale(1.02); } }

/* ---------- Trip timeline (journal) ---------- */
.trips { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.trip { margin: 0 0 1.75rem; }
.diary-page .trip { margin: -0.25rem 0 2rem; }
.trip-head { margin: 0 0 0.6rem; font-family: var(--hand); font-size: 1.15rem; color: var(--ink-soft); }
.trip-title { font-family: var(--draft); font-size: 1.45rem; color: var(--ink); margin-right: 0.35rem; }
.trip-dates { color: var(--red); }
.trip-days {
  list-style: none; margin: 0; padding: 0.4rem 0 0.2rem;
  display: grid; grid-template-columns: repeat(var(--n), minmax(1.9rem, 1fr));
  position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding-bottom: 3.1rem;
}
.trip-days::before {                         /* the hand-drawn line the days hang off */
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; top: 1.05rem; height: 0;
  border-top: 2px dashed var(--ink-soft); opacity: .55;
}
.trip-day { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; min-width: 1.9rem; }
.trip-day > a { display: grid; justify-items: center; color: inherit; text-decoration: none; }
.trip-dot { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2px dashed var(--rule); background: var(--paper); position: relative; z-index: 1; margin-top: 0.3rem; }
.trip-label { display: grid; line-height: 1.05; margin-top: 0.35rem; font-family: var(--draft); color: var(--ink-soft); }
.trip-label b { font-weight: 400; font-size: 1.05rem; }
.trip-label small { font-size: 0.72rem; letter-spacing: .06em; text-transform: lowercase; }
.trip-place { position: absolute; top: 100%; left: 50%; font-family: var(--hand); font-size: 0.95rem; color: var(--red); white-space: nowrap; transform: translateX(-50%) rotate(-4deg); margin-top: 0.1rem; }
.trip-day:nth-child(even) .trip-place { margin-top: 1.25rem; }
.trip-day:nth-child(even) .trip-place::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 1.05rem; border-left: 1px dashed var(--red); opacity: .6; }
.trip-day:nth-last-child(-n+2) .trip-place { left: auto; right: 0; transform: rotate(-4deg); }
.trip-day:nth-child(-n+2) .trip-place { left: 0; transform: rotate(-4deg); }
.trip-day.has-entry .trip-dot { width: 1.5rem; height: 1.5rem; margin-top: 0; border: 2px solid var(--red); background: var(--t, var(--tape-pink)); }
.trip-day.has-entry .trip-label { color: var(--ink); }
.trip-day.has-entry a:hover .trip-place, .trip-day.has-entry a:focus-visible .trip-place { text-decoration: underline wavy var(--red); text-underline-offset: 0.2em; }
.trip-day.is-here .trip-dot { box-shadow: 0 0 0 4px var(--lined, #fff), 0 0 0 6px var(--red); }

/* ---------- A day, stop by stop ---------- */
.daylog { list-style: none; margin: calc(var(--line-step) * 0.5) 0 0; padding: 0 0 0 1.4rem; position: relative; }
.daylog::before { content: ""; position: absolute; left: 0.35rem; top: 0.6rem; bottom: 1rem; border-left: 2px dashed var(--red); opacity: .6; }
.daylog-stop { position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0 1rem; margin-bottom: calc(var(--line-step) * 1.25); }
.daylog-stop::before { content: ""; position: absolute; left: -1.45rem; top: 0.55rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--t, var(--tape-yellow)); border: 2px solid var(--red); }
.daylog-time { margin: 0; font-family: var(--draft); font-size: 1.05rem; color: var(--red); padding-top: 0.15rem; }
.daylog-title { font-family: var(--hand); font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.35rem; }
.daylog-note { font-family: var(--hand); font-size: 1.2rem; line-height: 1.6; margin: 0 0 0.6rem; }
.daylog-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 1.5rem 1.1rem; padding-top: 0.6rem; }
.daylog-photos.n1 { grid-template-columns: minmax(0, 17rem); }
.daylog-photos .polaroid { --t: inherit; }
.daylog-photos .polaroid:nth-child(odd) { transform: rotate(-1.8deg); }
.daylog-photos .polaroid:nth-child(even) { transform: rotate(1.4deg); margin-top: 0.5rem; }
.daylog-photos .polaroid img, .daylog-photos .polaroid video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: #ddd; }
.daylog-photos .polaroid-cap { font-size: 1rem; padding: 0.45rem 0.2rem 0.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .daylog-photos .polaroid { transition: transform .2s ease; }
  .daylog-photos .polaroid:hover { transform: rotate(0) scale(1.03); z-index: 3; }
}
@media (max-width: 560px) {
  .daylog-stop { grid-template-columns: 1fr; }
  .daylog-time { padding-top: 0; }
}

/* links under the About photo */
.me-links { position: absolute; top: calc(100% + 0.8rem); left: -1rem; right: -1rem; transform: rotate(-2.5deg); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1rem; font-family: var(--hand); font-size: 1.1rem; }
.me-links a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pen); text-decoration: none; }
.me-links a:hover, .me-links a:focus-visible { text-decoration: underline wavy var(--red); text-underline-offset: 0.25em; }
.me-links svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Projects page: work vs school */
.filter-bar-wrap { margin-top: 0.5rem; }
.group-section { padding-top: clamp(1.5rem, 4vw, 2.5rem); }
.group-section + .group-section { margin-top: clamp(1.5rem, 4vw, 3rem); border-top: 2px dashed var(--rule); }
.group-note { font-family: var(--hand); color: var(--ink-soft); font-size: 1.1rem; margin: 0.2rem 0 0; }

/* ---------- photo lightbox ---------- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.lightbox { border: 0; padding: 0; margin: auto; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden; }
.lightbox::backdrop { background: rgba(28, 33, 38, 0.82); }
.lightbox[open] { display: grid; place-items: center; }
.lb-frame { margin: 0; background: var(--card); padding: 0.8rem 0.8rem 0; box-shadow: 0 20px 60px rgba(0,0,0,.4); transform: rotate(-0.8deg); max-width: min(92vw, 70rem); }
.lb-frame img { display: block; max-width: 100%; max-height: calc(100vh - 9rem); width: auto; height: auto; margin: 0 auto; object-fit: contain; }
.lb-frame figcaption { font-family: var(--hand); font-size: 1.25rem; color: var(--ink); text-align: center; padding: 0.6rem 0.5rem 0.9rem; min-height: 1rem; }
.lb-btn { position: fixed; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.12); color: #fff; font: 2rem/1 var(--draft); cursor: pointer; }
.lb-prev { left: max(0.75rem, 2vw); } .lb-next { right: max(0.75rem, 2vw); }
.lb-btn:hover, .lb-btn:focus-visible { background: rgba(255,255,255,.28); }
.lightbox.single .lb-btn, .lightbox.single .lb-count { display: none; }
.lb-close { position: fixed; top: 1rem; right: 1rem; font: 1.1rem var(--hand); color: #fff; background: transparent; border: 1.5px dashed rgba(255,255,255,.7); border-radius: 6px 3px 7px 3px; padding: 0.25rem 0.7rem; cursor: pointer; }
.lb-count { position: fixed; bottom: 0.9rem; left: 0; right: 0; text-align: center; margin: 0; font-family: var(--draft); color: rgba(255,255,255,.8); }
@media (max-width: 600px) { .lb-btn { top: auto; bottom: 0.6rem; transform: none; } .lb-count { bottom: 1.4rem; } }

/* ---------- "on this sheet" index + reading progress ---------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); z-index: 50; opacity: .85; pointer-events: none; }
.sheet-index { display: none; }
@media (min-width: 1240px) {
  .sheet-index {
    display: block; position: fixed; top: 6.5rem; right: max(1rem, calc((100vw - 80rem) / 2 - 15rem)); width: 13rem; z-index: 20;
    background: #fff7c2; padding: 0.9rem 1rem 1rem; box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 8px 18px rgba(20,30,40,.12);
    transform: rotate(1.4deg) translateY(-0.5rem); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease;
  }
  .sheet-index.is-shown { opacity: 1; pointer-events: auto; transform: rotate(1.4deg); }
  .sheet-index::before { content: ""; position: absolute; top: -0.6rem; left: 50%; width: 4rem; height: 1.2rem; background: var(--tape); transform: translateX(-50%) rotate(-3deg); }
  .sheet-index-title { font-family: var(--draft); font-size: 1.05rem; margin: 0 0 0.4rem; color: var(--ink-soft); }
  .sheet-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; counter-reset: s; }
  .sheet-index li { counter-increment: s; display: grid; grid-template-columns: 1.4rem 1fr; font-family: var(--hand); font-size: 1rem; line-height: 1.25; }
  .sheet-index li::before { content: counter(s) "."; color: var(--red); }
  .sheet-index a { color: var(--ink); text-decoration: none; }
  .sheet-index a:hover, .sheet-index a.is-here { color: var(--red); text-decoration: underline wavy var(--red); text-underline-offset: 0.2em; }
}
@media (prefers-reduced-motion: reduce) { .sheet-index { transition: none; } }
@media print { .read-progress, .sheet-index, .lightbox { display: none !important; } }

/* ---------- 404 ---------- */
.torn { max-width: 36rem; margin: clamp(2rem, 8vw, 5rem) auto; padding: 2.5rem 2rem 2.25rem 3.25rem; position: relative; background: var(--lined);
  background-image: linear-gradient(90deg, transparent 2.25rem, var(--margin-red) 2.25rem, var(--margin-red) calc(2.25rem + 1.5px), transparent calc(2.25rem + 1.5px)), linear-gradient(transparent calc(var(--line-step) - 1px), var(--rule-blue) calc(var(--line-step) - 1px), var(--rule-blue) var(--line-step));
  background-size: 100% 100%, 100% var(--line-step); box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 12px 30px rgba(20,30,40,.12); transform: rotate(-1deg);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 96% 89%, 92% 86%, 87% 90%, 82% 87%, 76% 91%, 70% 87%, 64% 90%, 58% 86%, 52% 90%, 46% 87%, 40% 91%, 34% 87%, 28% 90%, 22% 86%, 16% 90%, 10% 87%, 5% 90%, 0 87%); padding-bottom: 5rem; }
.torn h1 { font-family: var(--hand); font-weight: 700; font-size: clamp(2rem, 6vw, 3rem); line-height: var(--line-step); margin: 0 0 0.5rem; }
.torn p { font-family: var(--hand); font-size: 1.3rem; line-height: var(--line-step); margin: 0; }
.torn .big { font-family: var(--draft); font-size: 4.5rem; line-height: 1; color: var(--red); margin-bottom: 0.4rem; transform: rotate(-4deg); display: inline-block; }
.torn ul { list-style: none; padding: 0; margin: 0.5rem 0 0; font-family: var(--hand); font-size: 1.25rem; line-height: var(--line-step); }
.torn li::before { content: "→ "; color: var(--red); }

/* ---------- Résumé ---------- */
.resume-wrap { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.resume-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 0 0 1.25rem; }
.resume-print { font: 1.1rem var(--hand); color: var(--pen); background: var(--plate); border: 1.5px dashed var(--pen); border-radius: 6px 3px 7px 3px; padding: 0.3rem 0.9rem; cursor: pointer; }
.resume-print:hover { border-style: solid; }
.resume-tools .hand { font-family: var(--hand); color: var(--ink-soft); }
.resume { max-width: 56rem; background: var(--card); color: var(--ink); padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); box-shadow: 0 1px 2px rgba(20,30,40,.10), 0 14px 36px rgba(20,30,40,.12); font-family: var(--body); font-size: 0.95rem; line-height: 1.42; }
.resume p { margin: 0; }
.cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.4em 1.5em; border-bottom: 2px solid var(--ink); padding-bottom: 0.7em; }
.cv-head h1 { font-family: var(--draft); font-size: clamp(2em, 5vw, 2.6em); line-height: 1.05; margin: 0; }
.cv-tag { margin-top: 0.2em !important; color: var(--red); font-weight: 500; letter-spacing: .02em; }
.cv-contact { list-style: none; margin: 0; padding: 0; text-align: right; font-size: 0.9em; display: grid; gap: 0.1em; }
.cv-contact a, .cv-row a { color: var(--ink); }
.cv-summary { margin: 0.75em 0 0.9em !important; color: var(--ink-soft); }
.cv-cols { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 0 1.75em; }
.cv-side { border-left: 1px dashed var(--rule); padding-left: 1.25em; }
.cv-sec { margin: 0 0 0.9em; }
.cv-sec h2 { font-family: var(--draft); font-size: 1.05em; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin: 0 0 0.45em; border-bottom: 1px dashed var(--rule); padding-bottom: 0.15em; }
.cv-item { margin: 0 0 0.6em; break-inside: avoid; }
.cv-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 0.75em; }
.cv-date { color: var(--ink-soft); font-size: 0.86em; white-space: nowrap; }
.cv-org { color: var(--ink-soft); font-size: 0.9em; }
.cv-strong { font-weight: 700; }
.cv-points, .cv-list { margin: 0.15em 0 0; padding-left: 1.05em; }
.cv-points li, .cv-list li { margin: 0 0 0.05em; }
.cv-list { margin-bottom: 0.45em; }
.cv-desc { margin-top: 0.1em !important; }
.cv-side .cv-item .cv-desc { font-size: 0.88em; }
.cv-foot { margin-top: 0.4em !important; font-size: 0.82em; color: var(--ink-soft); border-top: 1px dashed var(--rule); padding-top: 0.4em; }
@media (max-width: 720px) { .cv-cols { grid-template-columns: 1fr; } .cv-side { border-left: 0; padding-left: 0; } .cv-contact { text-align: left; } }
@media print {
  @page { size: letter; margin: 0.45in 0.5in; }
  html, body { background: #fff !important; }
  body * { visibility: hidden; }
  .resume, .resume * { visibility: visible; }
  .resume { position: absolute; left: 0; top: 0; width: 100%; max-width: none; box-shadow: none; padding: 0; font-size: 8.6pt; line-height: 1.3; }
  .cv-head h1 { font-size: 21pt; }
  .cv-cols { grid-template-columns: 1.85fr 1fr; }
  .cv-sec { margin-bottom: 6pt; }
  .cv-item { margin-bottom: 4pt; }
  .cv-row a, .cv-contact a { text-decoration: none; }
  .no-print, body > header, body > footer, .site-header, .site-footer, .read-progress, .sheet-index { display: none !important; }
}

/* ---------- red-pen working notes on key numbers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.redpen { position: relative; cursor: help; text-decoration: underline wavy var(--red); text-decoration-thickness: 1.3px; text-underline-offset: 0.22em; border-radius: 2px; outline: none; }
.redpen:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.redpen-note {
  position: absolute; left: 50%; bottom: calc(100% + 0.55rem); transform: translateX(-50%) rotate(-2deg) translateY(4px);
  width: max-content; max-width: min(18rem, 80vw); padding: 0.35rem 0.6rem 0.4rem;
  font-family: var(--hand); font-weight: 400; font-size: 1.05rem; line-height: 1.3; color: var(--red); text-align: center; white-space: normal;
  background: var(--lined); border: 1.5px solid var(--red); border-radius: 10px 4px 12px 5px; box-shadow: 0 6px 16px rgba(20,30,40,.14);
  opacity: 0; pointer-events: none; z-index: 30; transition: opacity .18s ease, transform .18s ease;
}
.redpen-note::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 0.55rem; background: var(--red); }
.redpen:hover .redpen-note, .redpen:focus .redpen-note, .redpen:focus-within .redpen-note { opacity: 1; transform: translateX(-50%) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .redpen-note { transition: none; } }
@media print { .redpen { text-decoration: none; } .redpen-note { display: none; } }
picture { display: contents; }

/* related projects */
.related { padding-top: clamp(2.5rem, 6vw, 4rem); }
.related h2 { font-size: var(--step-2); margin-bottom: 1.25rem; }
.related-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }

/* trip route map */
.trip-block { display: grid; gap: 0.5rem 2.5rem; align-items: start; }
@media (min-width: 900px) { .trip-block { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); } .trip-block .trip-map-fig { grid-row: 1 / span 2; grid-column: 2; } }
.trip-map-fig { margin: 0; max-width: 22rem; }
.trip-map { overflow: hidden; width: 100%; height: auto; background: var(--lined); border: 1.5px solid var(--plate-edge); border-radius: var(--sketch); padding: 0.4rem; }
.trip-map .pin { fill: var(--t, var(--tape-pink)); stroke-width: 2.2; }
.trip-map .pin-link text.h { font-size: 24px; }
.trip-map .pin-link text.tsm { font-size: 15px; }
.trip-map .pin-link:hover text.h, .trip-map .pin-link:focus text.h { text-decoration: underline; }
.trip-map .map-ref { fill: var(--ink-soft); font-size: 15px; }
.trip-map-fig figcaption { font-family: var(--hand); color: var(--red); font-size: 1rem; margin-top: 0.3rem; }

/* =========================================================
   Night mode: a cyanotype blueprint. The page turns deep blue with white linework;
   anything that is a physical piece of paper (photos, journal pages, the résumé,
   plots and renders, 3D viewers) keeps its daytime colours, as if taped onto the print.
   Follows the device setting unless the header switch picks day or night.
   ========================================================= */
@media screen {
:root[data-theme="night"] {
  --paper: #173f69;
  --grid: rgba(214, 232, 255, 0.10);
  --grid-major: rgba(214, 232, 255, 0.05);
  --plate: #f2f5f8;
  --plate-edge: #87a6c8;
  --ink: #eef4fb;
  --ink-soft: #b7cbe0;
  --rule: #6189b3;
  --pen: #ffd97a;
  --red: #ff9f8a;
  --on-pen: #173f69;
  --card: #f3f5f7;
  --lined: #f4f1e6;
  --tape: rgba(240, 210, 120, 0.85);
  --tape-yellow: rgba(240, 210, 120, 0.88);
  --tape-pink: rgba(240, 170, 188, 0.88);
  --tape-mint: rgba(150, 214, 186, 0.88);
  --tape-blue: rgba(160, 196, 238, 0.9);
  color-scheme: dark;
}
:root[data-theme="night"] :is(.plate, .me, .polaroid, .stamp, .scrap-note, .blank-page, .diary-page, .diary-body p:has(> img), .torn, .resume, .lb-frame, .sheet-index, .redpen-note, .trip-map, .model3d-stage, .clip-frame) {
  --paper: #f1f4f5;
  --grid: rgba(64, 112, 160, 0.11);
  --ink: #22292f;
  --ink-soft: #55616d;
  --rule: #aab4bd;
  --pen: #2449c9;
  --red: #c9372c;
  --on-pen: #ffffff;
  color-scheme: light;
}
:root[data-theme="night"] .index-tabs button, .filed-under a { color: #16283b; }
:root[data-theme="night"] .index-tabs .tab-n { color: #34495f; }
:root[data-theme="night"] .index-tabs [aria-pressed="true"] .tab-n { color: #b3261e; border-color: #b3261e; }
:root[data-theme="night"] .tab-all { --t: rgba(205, 215, 226, 0.9); }
:root[data-theme="night"] .tab-energy { --t: rgba(244, 178, 132, 0.9); }
:root[data-theme="night"] .me-links a { color: #ffd97a; }
:root[data-theme="night"] .resume-print { background: transparent; }
}
@media screen and (prefers-color-scheme: dark) {
:root:not([data-theme="day"]) {
  --paper: #173f69;
  --grid: rgba(214, 232, 255, 0.10);
  --grid-major: rgba(214, 232, 255, 0.05);
  --plate: #f2f5f8;
  --plate-edge: #87a6c8;
  --ink: #eef4fb;
  --ink-soft: #b7cbe0;
  --rule: #6189b3;
  --pen: #ffd97a;
  --red: #ff9f8a;
  --on-pen: #173f69;
  --card: #f3f5f7;
  --lined: #f4f1e6;
  --tape: rgba(240, 210, 120, 0.85);
  --tape-yellow: rgba(240, 210, 120, 0.88);
  --tape-pink: rgba(240, 170, 188, 0.88);
  --tape-mint: rgba(150, 214, 186, 0.88);
  --tape-blue: rgba(160, 196, 238, 0.9);
  color-scheme: dark;
}
:root:not([data-theme="day"]) :is(.plate, .me, .polaroid, .stamp, .scrap-note, .blank-page, .diary-page, .diary-body p:has(> img), .torn, .resume, .lb-frame, .sheet-index, .redpen-note, .trip-map, .model3d-stage, .clip-frame) {
  --paper: #f1f4f5;
  --grid: rgba(64, 112, 160, 0.11);
  --ink: #22292f;
  --ink-soft: #55616d;
  --rule: #aab4bd;
  --pen: #2449c9;
  --red: #c9372c;
  --on-pen: #ffffff;
  color-scheme: light;
}
:root:not([data-theme="day"]) .index-tabs button, .filed-under a { color: #16283b; }
:root:not([data-theme="day"]) .index-tabs .tab-n { color: #34495f; }
:root:not([data-theme="day"]) .index-tabs [aria-pressed="true"] .tab-n { color: #b3261e; border-color: #b3261e; }
:root:not([data-theme="day"]) .tab-all { --t: rgba(205, 215, 226, 0.9); }
:root:not([data-theme="day"]) .tab-energy { --t: rgba(244, 178, 132, 0.9); }
:root:not([data-theme="day"]) .me-links a { color: #ffd97a; }
:root:not([data-theme="day"]) .resume-print { background: transparent; }
}

/* the switch in the header */
.night-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: 1rem var(--hand); color: var(--ink); background: transparent;
  border: 1.5px dashed var(--ink-soft); border-radius: 6px 3px 7px 3px;
  padding: 0.12rem 0.6rem; cursor: pointer;
}
.night-toggle:hover { border-style: solid; }
.night-toggle:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.night-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.night-toggle[aria-pressed="true"] { color: var(--pen); border-color: var(--pen); }
.night-toggle .moon { display: inline; } .night-toggle .sun { display: none; }
.night-toggle[aria-pressed="true"] .moon { display: none; } .night-toggle[aria-pressed="true"] .sun { display: inline; }
html.theme-shift, html.theme-shift * { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important; }
@media print { .night-toggle { display: none; } }