/* Refined spacing and calm cards over the original portfolio backgrounds. */

/* Keep the original canvas background; retire the competing card and text keyframes. */
html body.notebook *,
html body.notebook *::before,
html body.notebook *::after { animation: none !important; }

html body.notebook .hero-paper {
  width: 100%;
  height: auto;
  min-height: 0;
  margin-left: 0;
  padding: 0;
}

html body.notebook .scrap::before,
html body.notebook .scrap::after,
html body.notebook .card-visual::before,
html body.notebook .card-visual::after,
html body.notebook .project::before,
html body.notebook .project::after { content: none; }

html body.notebook #about .scrap::before,
html body.notebook #about .scrap::after,
html body.notebook #experience .scrap::before,
html body.notebook #experience .scrap::after,
html body.notebook #awards .scrap::before,
html body.notebook #awards .scrap::after { content: none; }

html body.notebook .scrap {
  background: var(--card-bg);
  border: 1px solid var(--grid);
  border-radius: 4px;
  box-shadow: none;
}

html body.notebook .scrap .tape,
html body.notebook .card-visual .tape { display: none; }

/* The portrait keeps its tape and a slight permanent tilt. All text stays level. */
html body.notebook .scrap,
html body.notebook .reveal,
html body.notebook .skill-tag,
html body.notebook .timeline-item,
html body.notebook .xp-detail,
html body.notebook .about-facts > div {
  opacity: 1;
  transform: none;
  animation: none;
  transition: color .18s, background-color .18s, border-color .18s;
}

html body.notebook .about-photo { transform: rotate(-1deg); }

html body.notebook .scrap,
html body.notebook .timeline-item,
html body.notebook .about-facts > div { transform: none !important; }

html body.notebook .eyebrow,
html body.notebook h1.name,
html body.notebook .tagline,
html body.notebook .typing-line,
html body.notebook .scroll-cue,
html body.notebook .scroll-cue::before,
html body.notebook .project-stamp {
  opacity: 1;
  animation: none;
}

html body.notebook .section-label {
  clip-path: var(--tear-chip);
  background: var(--card-bg);
  transform: rotate(-1.4deg);
  padding: 10px 22px;
  color: var(--signal-blue);
}

/* Grid columns reserve real space for exhibits; no floating/overlapping cards. */
html body.notebook .project[data-index] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 104px);
  padding: clamp(72px, 8vw, 120px) 8vw;
  min-height: 0;
  overflow: visible;
}

html body.notebook .project .project-copy {
  min-width: 0;
  width: auto;
  position: relative;
}

html body.notebook .project.flip .project-copy { order: 2; }
html body.notebook .project.flip .card-visual { order: 1; }

html body.notebook .project .project-title {
  display: block;
  max-width: 100%;
  font-size: clamp(34px, 4vw, 60px);
  line-height: 1.08;
  white-space: normal;
}

html body.notebook .project .project-title .underline { display: none; }

html body.notebook .project .project-stamp {
  position: static;
  display: inline-block;
  background: transparent;
  color: var(--signal-blue);
  padding: 0;
  margin: 0 0 24px;
  clip-path: none;
  transform: none !important; /* also wins over the old reduced-motion tilt */
  border: 0;
  box-shadow: none;
  font-size: 11px;
}

html body.notebook .project .project-index {
  position: static;
  display: inline-block;
  margin-left: 14px;
  font-size: 12px;
}

html body.notebook .project .project-desc,
html body.notebook .project .case,
html body.notebook .project .stack,
html body.notebook .project .project-link {
  max-width: 100%;
  opacity: 1;
  transform: none;
  transition: color .18s, border-color .18s;
}

html body.notebook .project .card-visual {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(16px, 2.2vw, 32px);
  aspect-ratio: auto;
  border: 1px solid var(--grid);
  border-radius: 6px;
  background: var(--card-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .035);
  opacity: 1;
  transform: none !important; /* resets the original reduced-motion absolute offset */
  animation: none;
  transition: none;
}

html body.notebook .project .card-visual .site-shot {
  display: block;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: transparent;
}

html body.notebook .project.capstone .site-shot { aspect-ratio: 16 / 9; }
html body.notebook .card-visual > svg { display: none; }

html body.notebook #work-intro {
  min-height: 0;
  padding-top: 100px;
  padding-bottom: 80px;
}

html body.notebook .projects-lead { margin-top: 32px; }

@media (max-width: 850px) {
  html body.notebook .project[data-index] { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 64px 7vw; }
  html body.notebook .project.flip .project-copy,
  html body.notebook .project.flip .card-visual { order: initial; }
  html body.notebook .project .project-title { font-size: clamp(34px, 7vw, 52px); }
  html body.notebook .project .card-visual { padding: 20px; }
}

/* Different paper stocks mark chapters while the original grid, kraft and
   passport artwork continue to connect the whole notebook. */
:root {
  --blue-paper: #DEE8EE;
  --route-paper: #EDE8D9;
  --about-paper: #C7A477;
  --experience-paper: #E3ECE8;
  --award-paper: #F6F5EF;
  --album-paper: #E9E4D6;
  --chapter-rule: rgba(43, 76, 126, .09);
}
:root[data-theme="dark"] {
  --blue-paper: #1B2935;
  --route-paper: #262C2D;
  --about-paper: #352B22;
  --experience-paper: #202C35;
  --award-paper: #292E26;
  --album-paper: #232A34;
  --chapter-rule: rgba(143, 181, 236, .09);
}

html:root[data-theme] body.notebook #skills {
  --skills-surface:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='620' viewBox='0 0 640 620'%3E%3Cg fill='none' stroke='%23778FA3' stroke-width='1.5' opacity='.22'%3E%3Ccircle cx='460' cy='170' r='108'/%3E%3Ccircle cx='460' cy='170' r='72' stroke-dasharray='3 7'/%3E%3Cpath d='M325 170H595M460 35V305M352 170L514 76L514 264Z'/%3E%3Cpath d='M40 525H295M70 560V350M70 515C115 515 130 480 155 460S210 430 260 365'/%3E%3Cpath d='M70 460H155V525M70 395H235V525' stroke-dasharray='4 7'/%3E%3Ccircle cx='155' cy='460' r='5'/%3E%3Ccircle cx='235' cy='395' r='5'/%3E%3C/g%3E%3C/svg%3E") right 32px top 35px / min(70vw, 640px) auto no-repeat,
    radial-gradient(ellipse at 4% 100%, rgba(207, 172, 108, .19), transparent 52%),
    linear-gradient(var(--chapter-rule) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--chapter-rule) 1px, transparent 1px) 0 0 / 28px 28px,
    url("assets/paper-crumple.webp") 0 0 / 680px 680px repeat,
    var(--blue-paper);
  background: var(--skills-surface);
  background-blend-mode: normal, normal, normal, normal, soft-light, normal;
  border-block: 1px solid var(--grid);
}

/* Irregular flecks and short fibers give each section a visible paper grain. */
html:root[data-theme] body.notebook #about {
  background: url("assets/about-paper-grain.svg") 0 0 / 360px 250px repeat, var(--about-paper);
  background-blend-mode: multiply, normal;
  border-block: 1px solid var(--grid);
}
html:root[data-theme="dark"] body.notebook #about {
  background: url("assets/about-paper-grain-dark.svg") 0 0 / 360px 250px repeat, var(--about-paper);
  background-blend-mode: screen, normal;
}
html:root[data-theme] body.notebook #experience {
  background: url("assets/experience-paper-grain.svg") 0 0 / 360px 250px repeat, var(--experience-paper);
  background-blend-mode: multiply, normal;
  border-block: 1px solid var(--grid);
}
html:root[data-theme="dark"] body.notebook #experience {
  background: url("assets/experience-paper-grain-dark.svg") 0 0 / 360px 250px repeat, var(--experience-paper);
  background-blend-mode: screen, normal;
}

html:root[data-theme] body.notebook #awards {
  background:
    url("assets/awards-speckled-paper.svg") 0 0 / 360px 250px repeat,
    var(--award-paper);
  background-blend-mode: multiply, normal;
  border-block: 1px solid var(--grid);
}

html:root[data-theme="dark"] body.notebook #awards {
  background:
    url("assets/awards-speckled-paper-dark.svg") 0 0 / 360px 250px repeat,
    var(--award-paper);
  background-blend-mode: screen, normal;
}

.experience-heading,
.gallery-heading h2 {
  font: 500 clamp(30px, 3.5vw, 52px)/1.12 var(--font-display);
  letter-spacing: -.025em;
  color: var(--signal-blue);
}
.experience-heading { max-width: 700px; margin-bottom: 48px; }

/* Same experience data and selected stop in both orientations. */
html body.notebook .timeline[hidden] { display: none; }
.xp-route-caption, .xp-stop-number { display: none; }
html body.notebook .xp-desktop { min-width: 0; }
html body.notebook .xp-node { scroll-margin: 16px; }
html body.notebook .xp-node:focus-visible { outline-offset: -3px; }

@media (min-width: 1001px) {
  html body.notebook .xp-desktop { gap: clamp(36px, 5vw, 80px); grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); }
}

@media (max-width: 1000px) {
  html body.notebook #experience { padding: 76px 7vw; }
  .experience-heading { margin-bottom: 28px; }
  html body.notebook .xp-desktop {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 24px;
  }
  html body.notebook .xp-rail-wrap {
    order: -1;
    min-height: 0;
    width: 100%;
  }
  html body.notebook .xp-rail-wrap::before { content: none; }
  .xp-route-caption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    font: 11px/1.5 var(--font-mono);
    color: var(--ink-soft);
  }
  html body.notebook .xp-rail {
    display: flex;
    position: relative;
    inset: auto;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 0 0 12px;
    mask: none;
    -webkit-mask: none;
    scrollbar-color: var(--signal-blue) transparent;
    scrollbar-width: none;
  }
  html body.notebook .xp-rail::-webkit-scrollbar { display: none; height: 0; }
  html body.notebook .xp-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 0 0 200px;
    width: 200px;
    padding: 42px 20px 16px 8px;
    margin: 0;
    border-radius: 0;
    scroll-snap-align: start;
  }
  html body.notebook .xp-node::before {
    left: 8px;
    top: 9px;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    z-index: 1;
    border-color: var(--signal-blue);
    background: var(--route-paper);
  }
  html body.notebook .xp-node::after {
    content: '';
    position: absolute;
    height: 3px;
    left: 20px;
    right: -8px;
    top: 14px;
    background: var(--signal-blue);
    opacity: .4;
  }
  html body.notebook .xp-node:last-child::after { content: none; }
  html body.notebook .xp-node.active::before { background: var(--signal-blue); transform: none; box-shadow: 0 0 0 4px var(--route-paper); }
  html body.notebook .xp-node.active { background: var(--card-bg); }
  .xp-stop-number, .xp-node-date { display: none; }
  html body.notebook .xp-node-role { font-size: 17px; line-height: 1.2; }
  html body.notebook .xp-node-meta { font: 11px/1.6 var(--font-body); margin-top: 8px; }
  html body.notebook .xp-detail { display: none; }
  html body.notebook .xp-desktop.details-open .xp-detail { display: block; width: 100%; padding: clamp(22px, 4vw, 36px); }
  html body.notebook .xp-detail .timeline-role { font-size: clamp(23px, 4vw, 30px); line-height: 1.2; }
  html body.notebook .xp-detail .timeline-desc { font-size: 15px; max-width: none; }
}

/* A horizontal album for projects 03–08. The capstones retain full spreads. */
html:root[data-theme] body.notebook #project-gallery {
  display: block;
  min-width: 0;
  padding: 88px 0 54px;
  background:
    url("assets/paper-crumple.webp") 0 0 / 340px 340px repeat,
    var(--album-paper);
  background-blend-mode: multiply;
  border-block: 1px solid var(--grid);
}
.gallery-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 0 8vw;
  margin-bottom: 40px;
}
.gallery-heading h2 { max-width: 650px; }
.gallery-heading p { max-width: 520px; margin-top: 16px; font: 15px/1.6 var(--font-body); color: var(--ink-soft); }
.gallery-navigation { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
#gallery-position { margin-right: 12px; font: 12px var(--font-mono); color: var(--signal-blue); white-space: nowrap; }
.gallery-navigation button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--signal-blue);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--signal-blue);
  font: 23px var(--font-body);
  cursor: pointer;
}
.gallery-navigation button:hover:not(:disabled) { background: var(--signal-blue); color: var(--card-bg); }
.gallery-navigation button:disabled { opacity: .35; cursor: default; }
html body.notebook .project-track {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 28px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scrollbar-color: rgba(110, 113, 116, .25) transparent;
  padding: 12px 8vw 26px;
  scroll-padding-inline: 8vw;
}
html body.notebook .project-track:focus-visible { outline-offset: -4px; }
html body.notebook .project-track::-webkit-scrollbar { display: none; height: 0; }
html body.notebook .project-track::-webkit-scrollbar-thumb { background: rgba(110, 113, 116, .25); border-radius: 8px; }
html body.notebook .project-track::-webkit-scrollbar-track { background: transparent; }
html:root[data-theme] body.notebook #project-gallery .project {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 0 0 min(70vw, 520px);
  gap: 0;
  margin: 0;
  padding: 24px;
  background: var(--card-bg);
  border: 1px solid var(--grid);
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .04);
  mask: none;
  -webkit-mask: none;
  scroll-snap-align: start;
}
html body.notebook #project-gallery .project .card-visual {
  order: -1;
  padding: 0;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  margin-bottom: 28px;
}
html body.notebook #project-gallery .project .site-shot { aspect-ratio: 16 / 10; }
html body.notebook #project-gallery .project-copy { display: flex; flex-direction: column; align-items: flex-start; flex: 1; order: 0; }
html body.notebook #project-gallery .project-title { font-size: clamp(30px, 3vw, 42px); }
html body.notebook #project-gallery .project-stamp { margin-bottom: 12px; }
html body.notebook #project-gallery .project-index { position: absolute; top: 0; right: 0; margin: 0; }
html body.notebook #project-gallery .project-desc { margin-top: 16px; font-size: 15px; line-height: 1.65; }
html body.notebook #project-gallery .stack { margin-top: auto; padding-top: 24px; }
html body.notebook #project-gallery .project-link { margin-top: 24px; }
.gallery-hint { display: flex; justify-content: space-between; padding: 0 8vw; margin-top: 14px; font: 11px var(--font-mono); color: var(--ink-soft); }

@media (max-width: 720px) {
  html body.notebook #project-gallery { padding-top: 64px; }
  .gallery-heading { flex-direction: column; align-items: flex-start; gap: 24px; padding-inline: 7vw; margin-bottom: 24px; }
  .gallery-navigation { align-self: stretch; }
  #gallery-position { margin-right: auto; }
  html body.notebook .project-track { gap: 18px; padding-inline: 7vw; scroll-padding-inline: 7vw; }
  html:root[data-theme] body.notebook #project-gallery .project { flex-basis: 82vw; padding: 20px; }
  .gallery-hint { padding-inline: 7vw; }
}

/* Each chapter overlaps the previous sheet. Keep the paper backgrounds on
   the sections and carry those same textures into a shallow, uneven lip. */
html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro) {
  --paper-seam: polygon(0 46%, 3% 39%, 6% 48%, 10% 31%, 14% 36%, 18% 23%, 22% 32%, 26% 26%, 30% 39%, 34% 30%, 38% 44%, 42% 33%, 46% 40%, 50% 22%, 54% 29%, 58% 19%, 62% 31%, 66% 24%, 70% 40%, 74% 32%, 78% 46%, 82% 34%, 86% 41%, 90% 28%, 94% 36%, 97% 26%, 100% 33%, 100% 100%, 0 100%);
  position: relative;
  isolation: isolate;
  z-index: 1;
  margin-block: 0;
  border: 0;
  overflow: visible;
  -webkit-mask: none;
  mask: none;
}

html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::before,
html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::after {
  content: '';
  position: absolute;
  inset: -32px 0 auto;
  height: 34px;
  pointer-events: none;
  transform: none;
  -webkit-mask: none;
  mask: none;
  clip-path: var(--paper-seam);
}

html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::before {
  z-index: 1;
  background: inherit;
  background-blend-mode: inherit;
}

html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::after {
  z-index: 0;
  top: -36px;
  background: linear-gradient(to bottom, transparent, rgba(37, 30, 22, .19));
  filter: blur(2px);
}

/* Alternating the edge gives adjacent sheets different silhouettes. */
html:root[data-theme] body.notebook :is(#skills, #awards) {
  --paper-seam: polygon(0 26%, 4% 36%, 8% 28%, 12% 42%, 16% 33%, 20% 46%, 24% 35%, 28% 41%, 32% 24%, 36% 32%, 40% 19%, 44% 29%, 48% 23%, 52% 39%, 56% 30%, 60% 43%, 64% 35%, 68% 47%, 72% 31%, 76% 38%, 80% 24%, 84% 33%, 88% 21%, 92% 30%, 96% 25%, 100% 38%, 100% 100%, 0 100%);
}

@media (max-width: 720px) {
  html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::before,
  html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::after {
    height: 24px;
    top: -22px;
  }
  html:root[data-theme] body.notebook :is(#about, #skills, #experience, #awards, #work-intro)::after { top: -25px; }
}

/* The introductory sheet still has a free torn edge above the capstones. */
html:root[data-theme] body.notebook #work-intro::after {
  inset: auto 0 -22px;
  height: 24px;
  background: inherit;
  background-blend-mode: inherit;
  transform: scaleY(-1);
  filter: none;
}

/* Small translucent tape bridges the seam without covering any content. */
html body.notebook .seam-tape {
  position: absolute;
  z-index: 4;
  top: -30px;
  left: 13%;
  width: clamp(76px, 8vw, 112px);
  height: 36px;
  pointer-events: none;
  transform: rotate(-12deg);
  background:
    repeating-linear-gradient(92deg, transparent 0 3px, rgba(255, 255, 255, .13) 3px 4px),
    linear-gradient(180deg, rgba(249, 222, 155, .76), rgba(218, 187, 123, .62));
  box-shadow: inset 0 1px rgba(255, 255, 255, .35), inset 0 -1px rgba(87, 63, 24, .16);
  clip-path: polygon(2% 0, 98% 2%, 96% 14%, 100% 24%, 97% 37%, 100% 50%, 96% 63%, 99% 77%, 96% 89%, 98% 100%, 1% 98%, 3% 84%, 0 72%, 3% 58%, 0 44%, 3% 30%, 0 16%);
}
html body.notebook :is(#skills, #awards) > .seam-tape { left: auto; right: 15%; transform: rotate(10deg); }
html body.notebook #work-intro > .seam-tape { left: 22%; transform: rotate(-7deg); }
@media (max-width: 720px) {
  html body.notebook .seam-tape { top: -25px; height: 32px; }
}

/* The existing categories become a collection of ruled index cards. */
html body.notebook #skills .skill-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 22px;
  max-width: 960px;
}
html body.notebook #skills .skill-groups > div {
  --card-accent: var(--signal-blue);
  --card-angle: -.8deg;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 25px 22px 24px;
  border: 0;
  background: none;
  --index-paper:
    repeating-linear-gradient(transparent 0 31px, var(--chapter-rule) 31px 32px),
    var(--card-bg);
  transform: rotate(var(--card-angle));
  filter: drop-shadow(1px 4px 2px rgba(25, 36, 49, .13));
}
html body.notebook #skills .skill-groups > div::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--index-paper);
  clip-path: polygon(0 3px, 36% 0, 70% 2px, 100% 0, calc(100% - 2px) 45%, 100% calc(100% - 5px), 92% calc(100% - 2px), 84% calc(100% - 6px), 73% 100%, 62% calc(100% - 3px), 55% calc(100% - 1px), 42% calc(100% - 5px), 30% 100%, 21% calc(100% - 4px), 10% calc(100% - 1px), 1px calc(100% - 5px));
  pointer-events: none;
}
html body.notebook #skills .skill-groups > div:nth-child(3n + 2) { --card-accent: var(--signal-amber); --card-angle: 1.1deg; }
html body.notebook #skills .skill-groups > div:nth-child(3n) { --card-accent: #87936D; --card-angle: -.4deg; }
html body.notebook #skills .skill-groups > div:nth-child(even) { top: 9px; }
html body.notebook #skills .skill-groups > div:nth-child(4) { --card-angle: -1.2deg; }
html body.notebook #skills .skill-groups > div::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 22px;
  width: 36px;
  height: 9px;
  border-radius: 1px;
  background: var(--card-accent);
  opacity: .7;
  transform: rotate(-4deg);
}
html body.notebook #skills .skill-groups > div:nth-child(even)::before { left: auto; right: 26px; width: 45px; transform: rotate(7deg); }
html body.notebook #skills .skill-group-name {
  color: var(--signal-blue);
  font-size: 11px;
  line-height: 1.6;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-accent) 30%, transparent);
}
html body.notebook #skills .skill-tags { gap: 8px; }
html body.notebook #skills .skill-tag { padding: 7px 11px; font-size: 12px; border-radius: 4px; }
html body.notebook #skills .skill-groups > div:focus-within {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--card-accent) 35%, transparent));
}
@media (max-width: 600px) {
  html body.notebook #skills .skill-groups { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* A single full-height surface keeps the grid and tint continuous through
   the torn About/Skills overlap, instead of repeating them in a small strip. */
html:root[data-theme] body.notebook #skills { background: none; }
html:root[data-theme] body.notebook #skills::before {
  inset: -36px 0 0;
  height: auto;
  z-index: -1;
  background: var(--skills-surface);
  background-blend-mode: normal, normal, normal, normal, soft-light, normal;
  clip-path: polygon(0 15px, 3% 11px, 5% 16px, 8% 7px, 10% 9px, 12% 3px, 14% 11px, 18% 14px, 21% 8px, 24% 12px, 27% 6px, 30% 10px, 33% 19px, 35% 14px, 38% 21px, 41% 13px, 44% 17px, 46% 7px, 49% 11px, 52% 5px, 55% 10px, 57% 3px, 60% 9px, 63% 15px, 66% 11px, 68% 18px, 71% 14px, 74% 23px, 77% 17px, 79% 20px, 82% 10px, 85% 13px, 88% 6px, 90% 12px, 93% 4px, 96% 9px, 98% 5px, 100% 11px, 100% 100%, 0 100%);
}
html:root[data-theme] body.notebook #skills::after {
  z-index: -2;
  top: -39px;
  height: 40px;
}
html body.notebook #skills > .seam-tape { top: -35px; right: 14%; height: 42px; transform: rotate(17deg); }
html body.notebook #skills > .seam-tape-secondary {
  left: 19%;
  right: auto;
  width: 65px;
  height: 30px;
  top: -31px;
  transform: rotate(-24deg);
}

/* Original hero wording and motion; the rest of the page stays calm. */
/* Loose paper notes share irregular edges; the portrait keeps its own frame. */
html body.notebook :is(#about .about-text, #about .about-facts > .scrap, #about .song, #about .book, #skillNote, #awards .award, #experience .xp-detail) {
  --note-angle: -.6deg;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  -webkit-mask: none;
  mask: none;
  transform: rotate(var(--note-angle)) !important;
  filter: drop-shadow(1px 5px 3px rgba(33, 28, 20, .15));
}
html body.notebook :is(#about .about-text, #about .about-facts > .scrap, #about .song, #about .book, #skillNote, #awards .award, #experience .xp-detail)::after {
  content: '';
  position: absolute;
  inset: -3px -2px -6px;
  z-index: -1;
  pointer-events: none;
  transform: none;
  -webkit-mask: none;
  mask: none;
  background:
    repeating-linear-gradient(transparent 0 33px, var(--chapter-rule) 33px 34px),
    url("assets/paper-crumple.webp") 0 0 / 500px 500px,
    var(--note-paper, var(--card-bg));
  background-blend-mode: normal, soft-light, normal;
  clip-path: polygon(0 9px, 8% 4px, 16% 7px, 23% 1px, 35% 5px, 46% 0, 58% 6px, 70% 2px, 82% 5px, 92% 0, 100% 6px, calc(100% - 3px) 28%, 100% 54%, calc(100% - 2px) 77%, 100% calc(100% - 8px), 91% calc(100% - 3px), 83% calc(100% - 7px), 72% 100%, 63% calc(100% - 4px), 53% calc(100% - 1px), 42% calc(100% - 6px), 31% 100%, 22% calc(100% - 5px), 10% calc(100% - 1px), 0 calc(100% - 8px), 3px 68%, 0 42%, 2px 21%);
}
html body.notebook :is(#about .about-text, #about .about-facts > .scrap, #about .song, #about .book, #skillNote, #awards .award, #experience .xp-detail)::before {
  content: '';
  position: absolute;
  inset: -14px 24px auto auto;
  z-index: 2;
  width: 68px;
  height: 25px;
  pointer-events: none;
  background: repeating-linear-gradient(93deg, rgba(233, 206, 148, .7) 0 3px, rgba(246, 224, 175, .72) 3px 4px);
  clip-path: var(--tear-chip);
  transform: rotate(9deg);
  -webkit-mask: none;
  mask: none;
}
html body.notebook #about .about-facts > .scrap { --note-paper: var(--stock); --note-angle: .8deg; }
html body.notebook #about .about-facts > .scrap:nth-child(even) { --note-angle: -1.1deg; }
html body.notebook #about :is(.song, .book) { --note-angle: .4deg; }
html body.notebook #about :is(.song, .book):nth-child(even) { --note-angle: -.7deg; }
html body.notebook #about :is(.song, .book)::before { width: 42px; height: 18px; top: -9px; right: 18px; }
html body.notebook #about :is(.about-text, .about-facts > .scrap, .song, .book) {
  transform: rotate(calc(var(--note-angle) + var(--spring-angle, 0deg))) !important;
  transform-origin: calc(100% - 58px) 0;
}
@media (prefers-reduced-motion: reduce) {
  html body.notebook #about :is(.about-text, .about-facts > .scrap, .song, .book) { transform: rotate(var(--note-angle)) !important; }
}
html body.notebook #awards .award { --note-angle: -.9deg; padding: clamp(28px, 4vw, 48px); }
html body.notebook #awards .award::before { left: 38px; right: auto; width: 92px; height: 30px; transform: rotate(-11deg); }
html body.notebook #skillNote { --note-angle: .7deg; padding: 30px; }
html body.notebook #experience .xp-detail { --note-angle: -.4deg; }
html body.notebook .xp-desktop:not(.details-open) .xp-detail {
  min-height: 220px;
  display: grid;
  place-items: center;
  font: 500 clamp(24px, 3vw, 38px)/1.3 var(--font-display);
  color: var(--signal-blue);
}
@media (max-width: 1000px) {
  html body.notebook .xp-desktop:not(.details-open) .xp-detail { display: none; }
}

/* A compact native range control follows the shelf's actual scroll position. */
.project-scrollbar { display: none; }
@media (min-width: 1001px) {
  html body.notebook #project-gallery .project-track { scrollbar-width: none; }
  html body.notebook #project-gallery .project-track::-webkit-scrollbar { display: none; }
  html body.notebook #project-gallery:has(.project-scrollbar:focus) .project-track { scroll-snap-type: none; }
  html body.notebook .project-scrollbar:not([hidden]) {
    display: block;
    appearance: none;
    width: clamp(170px, 24vw, 280px);
    height: 28px;
    margin: 12px auto 0;
    background: transparent;
    cursor: ew-resize;
    accent-color: var(--signal-blue);
  }
  .project-scrollbar::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--signal-blue) 18%, transparent); }
  .project-scrollbar::-webkit-slider-thumb { appearance: none; width: 40px; height: 9px; margin-top: -2px; border: 0; border-radius: 99px; background: linear-gradient(100deg, var(--signal-blue), var(--signal-amber)); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
  .project-scrollbar::-moz-range-track { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--signal-blue) 18%, transparent); }
  .project-scrollbar::-moz-range-thumb { width: 40px; height: 9px; border: 0; border-radius: 99px; background: linear-gradient(100deg, var(--signal-blue), var(--signal-amber)); }
  .project-scrollbar:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 3px; border-radius: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  html body.notebook .typing-cursor { animation: blink .9s steps(1) infinite !important; }
}
html body.notebook .hero-paper { min-height: 300px; }
html body.notebook .song iframe { display: block; height: 80px; min-height: 80px; visibility: visible; opacity: 1; }

/* A small ink-and-brass scroll thumb for desktop; touch layouts stay clean. */
@media (min-width: 1001px) {
  html body.notebook .project-track,
  html body.notebook .xp-rail {
    scrollbar-width: thin;
    scrollbar-color: var(--signal-blue) transparent;
  }
  html body.notebook .project-track::-webkit-scrollbar,
  html body.notebook .xp-rail::-webkit-scrollbar { display: block; width: 6px; height: 6px; }
  html body.notebook .project-track::-webkit-scrollbar-track,
  html body.notebook .xp-rail::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--signal-blue) 8%, transparent);
    border-radius: 99px;
  }
  html body.notebook .project-track::-webkit-scrollbar-thumb,
  html body.notebook .xp-rail::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--signal-blue), var(--signal-amber));
    border-radius: 99px;
  }
  html body.notebook .project-track::-webkit-scrollbar-thumb:hover,
  html body.notebook .xp-rail::-webkit-scrollbar-thumb:hover { background: var(--signal-blue); }
  @supports selector(::-webkit-scrollbar) {
    html body.notebook .project-track,
    html body.notebook .xp-rail { scrollbar-width: auto; scrollbar-color: auto; }
  }
}

html:root[data-theme="dark"] body.notebook #about .photo-frame .monogram { color: var(--ink-soft); }


html:root[data-theme] body.notebook #about .about-name, html:root[data-theme] body.notebook #about .about-name small { color: var(--ink); }

/* Warm undertones carry through dark mode while each paper chapter keeps its hue. */
:root[data-theme="dark"] {
  --paper: #211F1D;
  --grid: #39332D;
  --ink: #ECE5DB;
  --ink-soft: #C8BEB1;
  --signal-blue: #A8BFE0;
  --signal-amber: #E0B978;
  --project-highlight: #C2D1E7;
  --card-bg: #302A25;
  --deckle: #40372F;
  --band-paper: #29241F;
  --blue-paper: #252C31;
  --route-paper: #2D2B27;
  --about-paper: #352B22;
  --experience-paper: #26302D;
  --award-paper: #2B2D25;
  --album-paper: #302B27;
  --chapter-rule: rgba(204, 188, 163, .13);
  --dark-page-stock: url("assets/about-paper-grain-dark.svg") 0 0 / 360px 250px repeat, #211F1D;
}
:root[data-theme="dark"] body.notebook {
  background: var(--dark-page-stock);
  background-blend-mode: soft-light, normal;
}
:root[data-theme="dark"] body::after {
  background: url("assets/about-paper-grain-dark.svg") 0 0 / 360px 250px repeat;
  mix-blend-mode: screen;
  opacity: .16;
}
:root[data-theme="dark"] body.notebook #hero {
  background: var(--dark-page-stock);
  background-blend-mode: soft-light, normal;
}
:root[data-theme="dark"] body.notebook #about {
  background: url("assets/about-paper-grain-dark.svg") 0 0 / 360px 250px repeat, var(--about-paper);
  background-blend-mode: screen, normal;
}
:root[data-theme="dark"] body.notebook #skills {
  --skills-surface:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='620' viewBox='0 0 640 620'%3E%3Cg fill='none' stroke='%23B4A38A' stroke-width='1.5' opacity='.17'%3E%3Ccircle cx='460' cy='170' r='108'/%3E%3Ccircle cx='460' cy='170' r='72' stroke-dasharray='3 7'/%3E%3Cpath d='M325 170H595M460 35V305M352 170L514 76L514 264Z'/%3E%3Cpath d='M40 525H295M70 560V350M70 515C115 515 130 480 155 460S210 430 260 365'/%3E%3Cpath d='M70 460H155V525M70 395H235V525' stroke-dasharray='4 7'/%3E%3Ccircle cx='155' cy='460' r='5'/%3E%3Ccircle cx='235' cy='395' r='5'/%3E%3C/g%3E%3C/svg%3E") right 32px top 35px / min(70vw, 640px) auto no-repeat,
    linear-gradient(var(--chapter-rule) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--chapter-rule) 1px, transparent 1px) 0 0 / 28px 28px,
    url("assets/about-paper-grain-dark.svg") 0 0 / 360px 250px repeat,
    var(--blue-paper);
}
:root[data-theme="dark"] body.notebook #skills::before {
  background: var(--skills-surface);
  background-blend-mode: normal, normal, normal, soft-light, normal;
}
:root[data-theme="dark"] body.notebook #experience {
  background: url("assets/experience-paper-grain-dark.svg") 0 0 / 360px 250px repeat, var(--experience-paper);
  background-blend-mode: screen, normal;
}
:root[data-theme="dark"] body.notebook #awards {
  background: url("assets/awards-speckled-paper-dark.svg") 0 0 / 360px 250px repeat, var(--award-paper);
  background-blend-mode: screen, normal;
}
:root[data-theme="dark"] body.notebook #work-intro {
  --project-stock: #302B27;
  background: url("assets/paper-crumple.webp") 0 0 / 340px 340px repeat, var(--project-stock);
  background-blend-mode: soft-light, normal;
}
:root[data-theme="dark"] body.notebook #project-gallery {
  background: url("assets/experience-paper-grain-dark.svg") 0 0 / 360px 250px repeat, var(--album-paper);
  background-blend-mode: soft-light, normal;
}
:root[data-theme="dark"] body.notebook .scrap::after {
  --stock: var(--card-bg);
  background-blend-mode: soft-light, normal;
}
:root[data-theme="dark"] body.notebook #about .about-facts > .scrap::after {
  --stock: #3A342A;
}
:root[data-theme="dark"] body.notebook #awards .award::after {
  --stock: #34352B;
}
:root[data-theme="dark"] body.notebook .project,
:root[data-theme="dark"] body.notebook #project-gallery .project {
  --project-stock: #302A26;
  background: url("assets/paper-crumple.webp") 0 0 / 340px 340px repeat, var(--project-stock);
  background-blend-mode: soft-light, normal;
  border-top-color: rgba(220, 201, 171, .12);
}
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="2"],
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="4"],
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="6"],
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="8"],
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="10"] {
  --project-stock: #332F27;
}
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="1"],
:root[data-theme="dark"] body.notebook #project-gallery .project[data-index="5"] {
  --project-stock: #292624;
}
:root[data-theme="dark"] body.notebook #project-gallery .project::before {
  background: url("assets/paper-crumple.webp") 0 0 / 340px 340px repeat, var(--project-stock);
  background-blend-mode: soft-light, normal;
}
:root[data-theme="dark"] body.notebook .top-nav a,
:root[data-theme="dark"] body.notebook .social-header a,
:root[data-theme="dark"] body.notebook .social-header .theme-toggle {
  color: var(--ink);
  background: rgba(53, 43, 34, .82);
  border-color: rgba(220, 201, 171, .2);
}
:root[data-theme="dark"] body.notebook .top-nav a:hover,
:root[data-theme="dark"] body.notebook .social-header a:hover,
:root[data-theme="dark"] body.notebook .social-header .theme-toggle:hover,
:root[data-theme="dark"] body.notebook .island-link:hover {
  background: #493B30;
}
:root[data-theme="dark"] body.notebook .header-blur {
  background: linear-gradient(to bottom, rgba(38, 32, 27, .88), rgba(38, 32, 27, 0));
}
@media (max-width: 720px) {
  :root[data-theme="dark"] body.notebook .island-bar,
  :root[data-theme="dark"] body.notebook .island-menu {
    background: rgba(48, 42, 37, .94);
    border-color: rgba(220, 201, 171, .2);
  }
  :root[data-theme="dark"] body.notebook .island.open .island-bar {
    background: rgba(62, 51, 42, .96);
  }
}
:root[data-theme="dark"] body.notebook .tape,
:root[data-theme="dark"] body.notebook .about-photo .tape-corner {
  background: linear-gradient(100deg, rgba(202, 174, 120, .52), rgba(202, 174, 120, .34));
}


/* Cooler landing stock, consistent dark notes, and visible tape over chapter seams. */
:root[data-theme="dark"] {
  --paper: #14161A;
  --grid: #292D33;
  --card-bg: #2D2926;
  --band-paper: #1A1D23;
  --chapter-rule: rgba(188, 198, 209, .11);
  --dark-page-stock: #14161A;
}
:root[data-theme="dark"] body.notebook {
  background: var(--dark-page-stock);
  background-blend-mode: normal;
}
:root[data-theme="dark"] body::after {
  background: url("assets/neutral-page-grain-dark.svg") 0 0 / 360px 250px repeat;
  mix-blend-mode: screen;
  opacity: .16;
}
:root[data-theme="dark"] body.notebook #hero {
  background: var(--dark-page-stock);
  background-blend-mode: normal;
}

/* The project intro and its first two case studies are one visual chapter. */
:root[data-theme="dark"] body.notebook #work-intro {
  --project-stock: #232A34;
  background: url("assets/paper-crumple.webp") 0 0 / 340px 340px repeat, var(--project-stock);
  background-blend-mode: soft-light, normal;
}

/* Keep repeated note sheets on one subdued stock, including About's fact cards. */
:root[data-theme="dark"] body.notebook :is(#about .about-text, #about .about-facts > .scrap, #about .song, #about .book, #skillNote, #awards .award, #experience .xp-detail)::after {
  background-blend-mode: normal, multiply, normal;
}
:root[data-theme="dark"] body.notebook #about .about-facts > .scrap {
  --note-paper: var(--card-bg);
}

/* The previous section's stacking layer was covering most of the tape strip. */
html body.notebook :is(#about, #skills, #experience, #awards, #work-intro) {
  position: relative;
  z-index: 3;
}
html body.notebook :is(#about, #skills, #experience, #awards, #work-intro) > .seam-tape {
  top: -20px;
  z-index: 5;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .35), inset 0 -1px rgba(87, 63, 24, .16);
}
@media (max-width: 720px) {
  html body.notebook :is(#about, #skills, #experience, #awards, #work-intro) > .seam-tape {
    top: -18px;
  }
}


/* Keep seam tape above the hero and the preceding section's stacking context. */
html body.notebook :is(#about, #skills, #experience, #awards, #work-intro) {
  z-index: 4 !important;
}


/* Center each strip on the torn edge so it grips both paper sheets. */
html body.notebook :is(#about, #skills, #experience, #awards, #work-intro) > .seam-tape {
  top: -20px;
  left: var(--tape-position);
  right: auto;
  width: var(--seam-tape-width, 94px);
  height: 30px;
  transform: translate(-50%, -50%) rotate(var(--tape-angle));
  transform-origin: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .25), inset 0 -1px rgba(87, 63, 24, .1);
}
html body.notebook #about > .seam-tape { --tape-position: 19%; --tape-angle: -26deg; --seam-tape-width: 96px; }
html body.notebook #skills > .seam-tape { --tape-position: 76%; --tape-angle: 31deg; --seam-tape-width: 100px; }
html body.notebook #skills > .seam-tape-secondary { --tape-position: 24%; --tape-angle: -34deg; --seam-tape-width: 68px; height: 26px; }
html body.notebook #experience > .seam-tape { --tape-position: 28%; --tape-angle: -19deg; --seam-tape-width: 86px; }
html body.notebook #awards > .seam-tape { --tape-position: 79%; --tape-angle: 24deg; --seam-tape-width: 92px; }
html body.notebook #work-intro > .seam-tape { --tape-position: 35%; --tape-angle: -32deg; --seam-tape-width: 90px; }
@media (max-width: 720px) {
  html body.notebook :is(#about, #skills, #experience, #awards, #work-intro) > .seam-tape {
    top: -14px;
    width: calc(var(--seam-tape-width, 94px) * .82);
    height: 27px;
  }
  html body.notebook #skills > .seam-tape-secondary { height: 23px; }
}

/* Keep the light theme's crumpled paper on one consistent dark project stock. */
html:root[data-theme="dark"] body.notebook :is(#work-intro, #p-qqq, #p-transit, #project-gallery),
html:root[data-theme="dark"] body.notebook #project-gallery .project,
html:root[data-theme="dark"] body.notebook #project-gallery .project::before {
  --project-stock: #302A26;
  background:
    linear-gradient(rgba(30, 26, 23, .68), rgba(30, 26, 23, .68)),
    url("assets/paper-crumple.webp") 0 0 / 340px 340px repeat,
    var(--project-stock);
  background-blend-mode: normal, soft-light, normal;
}

/* Put the grid below the star canvas, with the landing content above both. */
html:root[data-theme="dark"] body.notebook {
  background:
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--dark-page-stock);
  background-blend-mode: normal;
}
html:root[data-theme="dark"] body.notebook #hero {
  background: transparent;
}