/* Editorial scrapbook: white page, script display, plain Arial-style text, overlapping pictures. */
  :root {
    color-scheme: light;
    --ink: #111;
    --paper: #fff;
    --line: #111;
    --muted: #555;
    --script: "Pinyon Script", "Snell Roundhand", cursive;
    --sans: "Arimo", Arial, "Helvetica Neue", Helvetica, sans-serif;
  }
  * { box-sizing: border-box; }
  html, body { background: var(--paper); }
  html { overflow-x: clip; }
  body { margin: 0; color: var(--ink); font: 400 17px/1.4 var(--sans); overflow-x: clip; }
  a { color: inherit; }
  a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  img { display: block; max-width: 100%; }
  figure { margin: 0; }

  .script { font-family: var(--script); font-weight: 400; line-height: .9; letter-spacing: 0; margin: 0; }
  .box { border: 1.5px solid var(--line); background: var(--paper); padding: 14px 18px 18px; }
  .box h2, .box h3.script { font-size: 44px; margin: 0 0 6px; }
  .box p { margin: 0 0 .8em; }
  .box p:last-child { margin-bottom: 0; }

  /* ---------- hero collage ---------- */
  .hero {
    position: relative; container-type: inline-size;
    max-width: 1440px; margin-inline: auto; aspect-ratio: 1440 / 940;
  }
  .hero > * { position: absolute; margin: 0; }
  .hero .name { left: 1.5cqw; top: 0; font-size: 16.5cqw; z-index: 3; white-space: nowrap; }
  .hero .photo { left: 25cqw; top: 16.5cqw; width: 40cqw; z-index: 2; }
  .hero .photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; }
  .hero .about { left: 61cqw; top: 11cqw; width: 26cqw; z-index: 4; font-size: 1.55cqw; line-height: 1.3; padding: 1cqw 1.4cqw 1.3cqw; }
  .hero .about h2 { font-size: 3.4cqw; }
  .hero .nav { left: 3cqw; top: 36cqw; z-index: 1; font-weight: 700; font-size: 6.4cqw; line-height: .96; text-transform: uppercase; letter-spacing: -.01em; }
  .hero .nav a { display: block; text-decoration: none; }
  .hero .nav a:hover { font-style: italic; }
  .hero .skills { left: 68cqw; top: 43cqw; z-index: 1; display: grid; grid-template-columns: auto auto; column-gap: 2.4cqw; font-weight: 700; font-size: 1.9cqw; line-height: 1.12; list-style: none; padding: 0; }
  .hero .cut { z-index: 3; box-shadow: 0 1.2cqw 2.4cqw -1.4cqw rgba(0,0,0,.45); }
  .hero .cut-liminal { left: 57cqw; top: 38cqw; width: 14cqw; }
  .hero .cut-matcha { left: 90cqw; top: 47cqw; width: 9cqw; }
  .hero .cut-mundo { left: 61cqw; top: 51cqw; width: 19cqw; z-index: 4; }
  .hero .tag { right: 2cqw; top: 1.6cqw; font-size: 1.2cqw; text-transform: uppercase; letter-spacing: .08em; text-align: right; line-height: 1.5; }

  /* ---------- sections ---------- */
  .wrap { max-width: 1280px; margin-inline: auto; padding: clamp(56px, 8vw, 110px) clamp(16px, 4vw, 48px) 0; }
  .sec-title { font-size: clamp(72px, 11vw, 150px); }
  .role { margin: 6px 0 0; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 18px; }
  .opr h3 { margin: 0 0 2px; font-weight: 700; font-size: 15px; text-transform: uppercase; }
  .opr > div + div { margin-top: 14px; }
  .visit { display: inline-block; margin-top: 18px; font-weight: 700; text-transform: uppercase; font-size: 15px; text-underline-offset: 4px; }
  .visit:hover { font-style: italic; }

  /* overlapping picture piles */
  .pile { position: relative; }
  .pile figure { position: absolute; box-shadow: 0 18px 32px -20px rgba(0,0,0,.5); }
  .pile figure:hover { z-index: 9; }
  .pile figcaption { position: absolute; left: 0; bottom: -24px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  .pile img { width: 100%; }

  .about-full { max-width: 780px; }
  .about-full .box { font-size: 17px; line-height: 1.55; }

  .skill-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: 18px; }
  .skill-cols ul { list-style: none; margin: 8px 0 0; padding: 0; font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }
  .skill-cols h3 { font-size: 15px; text-transform: uppercase; margin: 0; }

  .jobs { list-style: none; margin: 0; padding: 0; }
  .jobs li { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1.5px solid var(--line); }
  .jobs li:last-child { border-bottom: 1.5px solid var(--line); }
  .jobs b { display: block; font-size: 19px; }
  .jobs .when { font-size: 14px; text-transform: uppercase; white-space: nowrap; }

  .contact-list { margin-top: 18px; font-weight: 700; font-size: clamp(30px, 5.2vw, 72px); line-height: 1; text-transform: uppercase; }
  .contact-list a, .contact-list button { display: block; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
  .contact-list a:hover, .contact-list button:hover { font-style: italic; }
  .contact-list small { display: block; font-size: 15px; font-weight: 400; text-transform: none; margin: 4px 0 18px; }

  footer { max-width: 1280px; margin: clamp(56px, 8vw, 110px) auto 0; padding: 0 clamp(16px, 4vw, 48px) 32px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; text-transform: uppercase; }
  footer .script { font-size: 40px; text-transform: none; }


  /* cutout stickers scattered on the page */
  .deco { position: absolute; pointer-events: none; user-select: none; z-index: 5; }
  .hero .deco { z-index: 6; }
  .hero .photo .d-wings { left: 25%; top: -16%; width: 50%; aspect-ratio: auto; height: auto; object-fit: contain; }
  .hero .d-blossoms { left: 84.5cqw; top: 5.5cqw; width: 11cqw; rotate: 8deg; }
  .hero .d-grad { left: 80cqw; top: 51cqw; width: 7.5cqw; }
  .has-deco { position: relative; }
  .d-memory { right: -2%; top: 40px; width: min(38vw, 420px); rotate: 6deg; }
  .about-full { position: relative; }
  .about-full .d-memory { right: auto; left: calc(100% - 70px); top: 120px; width: min(24vw, 320px); }
  .wrap { position: relative; }
  .d-starburst { left: min(64vw, 900px); top: 10px; width: min(20vw, 250px); rotate: -8deg; }
  .d-bfly-pink { right: 4%; top: 20px; width: min(18vw, 230px); rotate: 10deg; }
  .d-bfly-blue { left: min(50vw, 640px); top: 60px; width: min(12vw, 150px); rotate: -12deg; }
  .pile .d-flower { left: 70%; top: -30px; width: min(9vw, 110px); rotate: 14deg; z-index: 6; }
  .d-png { left: min(36vw, 470px); top: 40px; width: min(9vw, 110px); rotate: 6deg; }
  .d-lying { right: 40px; top: -104px; width: min(18vw, 210px); z-index: 6; }
  .about-full > .box { position: relative; }
  .d-dove { left: min(44vw, 560px); top: 40px; width: min(22vw, 280px); rotate: -6deg; }
  .d-rabbit2-foot { position: static; display: block; margin-left: auto; }
  .pile .d-moon { right: 1%; top: 330px; width: min(12vw, 150px); rotate: -10deg; z-index: 6; }
  .pile .d-clover { left: 0; top: 30px; width: min(14vw, 180px); rotate: -14deg; z-index: 6; }
  .pile .d-sprout { right: 6%; top: 290px; width: min(10vw, 130px); z-index: 6; }
  .pile .d-lotus { left: 0; top: 420px; width: min(24vw, 300px); z-index: 6; }
  .d-cat { display: block; width: min(12vw, 140px); margin: 36px 0 0 18%; pointer-events: none; user-select: none; }
  .d-rabbit1 { right: 6%; top: 10px; width: min(26vw, 300px); }
  .d-rabbit2 { right: 4%; top: 0; width: min(18vw, 220px); }
  @media (max-width: 1100px) { .about-full .d-memory { display: none; } }
  @media (max-width: 760px) {
    .pile .d-moon { top: auto; bottom: -34px; right: -4px; width: 18vw; }
    .pile .d-clover { top: -12px; left: -8px; right: auto; width: 15vw; }
    .hero .photo .d-wings { top: -22%; }
    .pile .d-sprout { top: auto; bottom: -26px; right: -6px; width: 14vw; }
    .pile .d-lotus { top: auto; bottom: -30px; left: auto; right: -6px; width: 22vw; }
    .d-cat { display: none; }
    .d-rabbit2 { display: none; }
    .about-full { padding-top: 120px; }
    .d-bfly-pink { top: -6px; right: 14px; width: 20vw; }
    .d-starburst { left: auto; right: 14px; top: -24px; width: 22vw; }
    .d-bfly-pink { top: 40px; width: 28vw; }
    .d-bfly-blue { display: none; }
    .pile .d-flower { left: auto; right: 12px; top: -20px; width: 20vw; }
    .d-png { left: auto; right: 16px; top: 50px; width: 18vw; }
    .d-lying { right: 16px; top: -74px; width: 34vw; }
    .d-dove { left: auto; right: 8px; top: 40px; width: 32vw; }
    .hero .deco { position: absolute; }
    .hero { position: relative; }
    .hero .d-blossoms { left: auto; right: 10px; top: 20px; width: 26%; }
    .hero .d-grad { display: none; }
    .d-rabbit1 { width: 34vw; top: 0; }
    .d-rabbit2 { width: 26vw; }
  }

  .trail { position: fixed; z-index: 9999; pointer-events: none; user-select: none; color: #111; font-family: "Arimo", Arial, "Segoe UI Symbol", sans-serif; line-height: 1; will-change: transform, opacity; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

  /* ---------- phones ---------- */
  @media (max-width: 760px) {
    body { font-size: 16px; }
    .hero { aspect-ratio: auto; padding: 16px 16px 0; display: grid; gap: 16px; }
    .hero > * { position: static; }
    .hero .name { font-size: 25vw; white-space: normal; line-height: .8; }
    .hero .name .ln2 { display: block; }
    .hero .photo { position: relative; left: auto; top: auto; }
    .hero .tag { display: none; }
    .hero .photo { width: 100%; }
    .hero .about { width: auto; font-size: 16px; padding: 12px 16px 16px; margin-top: -48px; margin-left: 24px; }
    .hero .about h2 { font-size: 40px; }
    .hero .nav { font-size: 17vw; }
    .hero .skills { font-size: 19px; column-gap: 20px; }
    .hero .cut-liminal, .hero .cut-matcha, .hero .cut-mundo { display: none; }
    .split, .skill-cols { grid-template-columns: 1fr; }
    .pile { height: auto !important; display: grid; gap: 34px; }
    .pile figure { position: relative; left: auto !important; top: auto !important; right: auto !important; width: 100% !important; }
    .pile figure:nth-child(even) { width: 86% !important; justify-self: end; margin-top: -40px; }
  }


  /* project chapters (Mundo's) */
  .chapter { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 7vw, 96px); }
  .chapter.flip { grid-template-columns: minmax(0, 2fr) minmax(0, .8fr); }
  .chapter.flip .chapter-text { order: 2; }
  .chapter h3.script { font-size: clamp(44px, 5vw, 64px); margin: 0 0 8px; }
  .chapter-text p { margin: 0; }
  .opr .tools { margin-top: 14px; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
  @media (min-width: 761px) {
    .pile .d-clover { left: auto; right: -2%; top: -40px; }
    .pile .d-sprout { right: auto; left: 30%; top: auto; bottom: -10px; }
  }
  @media (max-width: 760px) {
    .chapter, .chapter.flip { grid-template-columns: 1fr; gap: 18px; }
    .chapter.flip .chapter-text { order: 0; }
    .chapter .pile figure:first-of-type { margin-top: 0; width: 100% !important; justify-self: stretch; }
    .chapter .pile figure:nth-of-type(2) { width: 86% !important; justify-self: end; margin-top: -40px; }
  }

  /* ---------- interactive layer ---------- */
  :root { --hl: #F7CFDC; }

  /* pink highlighter sweeps under words on hover */
  .hero .skills li, .skill-cols li, .contact-list a, .contact-list button, .visit, .hero .nav a {
    background-image: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
    background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .35s ease;
  }
  .hero .skills li:hover, .skill-cols li:hover, .contact-list a:hover, .contact-list button:hover, .visit:hover, .hero .nav a:hover { background-size: 100% 100%; }
  .hero .nav a, .hero .skills li, .skill-cols li { width: fit-content; }

  /* scrapbook tilt on project photos; they straighten and lift on hover, click to enlarge */
  .pile figure { transition: rotate .35s ease, scale .35s ease, box-shadow .35s ease; cursor: zoom-in; }
  .pile figure:nth-of-type(odd) { rotate: -1.2deg; }
  .pile figure:nth-of-type(even) { rotate: 1.4deg; }
  .pile figure:hover { rotate: 0deg; scale: 1.025; box-shadow: 0 28px 44px -22px rgba(0,0,0,.55); }
  .hero .cut { transition: rotate .3s ease, scale .3s ease; }
  .hero .cut:nth-of-type(odd) { rotate: -3deg; }
  .hero .cut:nth-of-type(even) { rotate: 2.5deg; }
  .hero .cut:hover { rotate: 0deg; scale: 1.06; z-index: 7; }

  /* stickers: pick them up and move them (mouse), tap to spin (touch), gentle float */
  .deco { pointer-events: auto; cursor: grab; -webkit-user-drag: none; touch-action: auto; transition: scale .2s ease, filter .2s ease; }
  .deco:hover { filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
  .deco.held { cursor: grabbing; scale: 1.12; filter: drop-shadow(0 16px 16px rgba(0,0,0,.25)); transition: none; }
  .deco.float { animation: bob var(--bob, 5s) ease-in-out var(--delay, 0s) infinite alternate; }
  .deco.held, .deco.spin { animation: none; }
  .deco.spin { animation: spin .7s cubic-bezier(.3,1.4,.5,1); }
  @keyframes bob { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
  @keyframes spin { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(18deg) scale(1.15); } 100% { transform: rotate(0) scale(1); } }
  .hint { position: absolute; left: 3.2cqw; top: 59.5cqw; font-size: 1.1cqw; letter-spacing: .06em; text-transform: uppercase; margin: 0; z-index: 2; }
  .hint b { background: var(--hl); padding: 0 .3em; font-weight: 700; }
  .reset { position: fixed; right: 18px; bottom: 18px; z-index: 60; font: 700 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; background: #111; color: #fff; border: 0; padding: 12px 16px; cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .25s, translate .25s; }
  .reset.on { opacity: 1; translate: 0 0; pointer-events: auto; }

  /* things arrive as you scroll: script titles write themselves in, boxes slide up, stickers stick on */
  .js .reveal { opacity: 0; translate: 0 26px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.3,1); }
  .js .reveal.in { opacity: 1; translate: 0 0; }
  .js .write { clip-path: inset(-30% 100% -30% -8%); transition: clip-path 1.4s cubic-bezier(.6,.1,.3,1); }
  .js .write.in { clip-path: inset(-30% -8% -30% -8%); }
  .js .stick { opacity: 0; scale: .4; transition: opacity .4s ease, scale .55s cubic-bezier(.3,1.6,.5,1); }
  .js .stick.in { opacity: 1; scale: 1; }
  .js .stick.in.held { scale: 1.12; }

  /* lightbox */
  .lb { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; background: transparent; }
  .lb::backdrop { background: rgba(255,255,255,.94); backdrop-filter: blur(4px); }
  .lb[open] { display: grid; place-items: center; }
  .lb figure { margin: 0; display: grid; gap: 14px; justify-items: center; padding: 56px 16px 24px; }
  .lb img { max-width: min(92vw, 1400px); max-height: 78dvh; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); animation: lbin .35s cubic-bezier(.2,.8,.3,1); }
  .lb figcaption { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
  .lb figcaption .script { display: block; font-size: 34px; text-transform: none; letter-spacing: 0; margin-bottom: 4px; }
  .lb button { position: fixed; background: #fff; border: 1.5px solid #111; color: #111; font: 700 18px/1 var(--sans); width: 46px; height: 46px; cursor: pointer; }
  .lb button:hover { background: var(--hl); }
  .lb .x { top: 16px; right: 16px; }
  .lb .prev { left: 16px; top: 50%; }
  .lb .next { right: 16px; top: 50%; }
  @keyframes lbin { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }

  @media (hover: none), (pointer: coarse) { .hint { display: none; } .deco { cursor: pointer; } }
  @media (max-width: 760px) { .hint { display: none; } .lb .prev, .lb .next { top: auto; bottom: 16px; } .lb .prev { left: calc(50% - 56px); } .lb .next { right: calc(50% - 56px); } }
  @media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .write, .js .stick { opacity: 1 !important; translate: none !important; clip-path: none !important; scale: 1 !important; transition: none !important; }
    .deco.float, .deco.spin, .lb img { animation: none !important; }
  }

  /* ---------- easter egg: click the face 5 times ---------- */
  html.egg body, html.egg body *, html.egg body *::before, html.egg body *::after { font-family: Papyrus, "Papyrus", fantasy !important; }
  .hero .photo > img:first-child { cursor: pointer; }
  .hero .photo .boop { animation: boop .28s ease; }
  @keyframes boop { 50% { scale: .97; } }
  .party { position: fixed; left: 50%; bottom: 18px; translate: -50% 0; z-index: 70; display: flex; gap: 10px; align-items: center; background: #fff; border: 1.5px solid #111; padding: 10px 12px 10px 16px; font-size: 14px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.5); }
  .party button { font: inherit; font-weight: 700; background: var(--hl); border: 1.5px solid #111; padding: 6px 10px; cursor: pointer; }

  /* ---------- project teasers (home) ---------- */
  .teaser .num { font-size: 15px; font-weight: 700; letter-spacing: .08em; margin: 0 0 -6px; }
  .teaser .sec-title a { text-decoration: none; }
  .teaser .split { align-items: center; }
  .teaser .box p { font-size: 18px; line-height: 1.45; }
  .teaser .tags { margin-top: 14px !important; font-size: 13px !important; letter-spacing: .04em; text-transform: uppercase; }
  .teaser-shot { display: block; position: relative; rotate: 1.4deg; box-shadow: 0 22px 40px -22px rgba(0,0,0,.55); transition: rotate .35s ease, scale .35s ease, box-shadow .35s ease; }
  .teaser:nth-of-type(even) .teaser-shot { rotate: -1.2deg; }
  .teaser-shot:hover { rotate: 0deg !important; scale: 1.02; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); }
  .teaser-shot img { width: 100%; }
  .teaser-shot .open { position: absolute; right: -10px; bottom: -14px; background: var(--hl); border: 1.5px solid #111; padding: 8px 12px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; rotate: -3deg; }
  .teaser-shot.tall { width: min(100%, 380px); justify-self: center; margin-inline: auto; }

  /* ---------- project pages ---------- */
  .topbar { max-width: 1280px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 48px) 0; display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; }
  .topbar .home { font-family: var(--script); font-size: 44px; line-height: 1; text-decoration: none; }
  .topbar nav { display: flex; gap: 6px 20px; flex-wrap: wrap; font-weight: 700; font-size: 15px; text-transform: uppercase; }
  .topbar nav a { text-decoration: none; background-image: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .35s ease; }
  .topbar nav a:hover, .topbar nav a[aria-current] { background-size: 100% 100%; }
  .project-page main > .wrap:first-child { padding-top: clamp(28px, 4vw, 56px); }
  .project-page .crumb { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 clamp(14px, 2vw, 26px); }
  .project-page main { padding-bottom: clamp(70px, 9vw, 140px); }
  .project-page .crumb a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .next-proj { max-width: 1280px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 48px) 0; display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
  .next-proj a { text-decoration: none; display: grid; }
  .next-proj .cap { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .next-proj .script { font-size: clamp(54px, 8vw, 104px); line-height: 1; }
  .next-proj .script::after { content: " →"; font-family: var(--sans); font-size: .45em; vertical-align: middle; }
  .next-proj a:hover .script { font-style: italic; }
  .next-proj .all { font-weight: 700; text-transform: uppercase; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
  .next-proj-wrap { border-top: 1.5px solid #111; max-width: calc(1280px - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; }
  @media (max-width: 760px) { .topbar .home { font-size: 36px; } .teaser .box p { font-size: 16px; } .project-page .d-starburst { top: 4px; width: 17vw; } }
  .concept-note { display: inline-block; margin: 10px 0 0; background: var(--hl); border: 1.5px solid #111; padding: 6px 10px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
  .docs { margin-top: clamp(48px, 6vw, 80px); max-width: 760px; }
  .docs h3.script { font-size: clamp(40px, 4.5vw, 56px); margin: 0 0 4px; }
  .docs > p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
  .docs ul { list-style: none; margin: 0; padding: 0; }
  .docs li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1.2px solid #111; }
  .docs li:last-child { border-bottom: 1.2px solid #111; }
  .docs li a { font-weight: 700; text-transform: uppercase; font-size: 15px; text-decoration: none; background-image: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .35s ease; }
  .docs li a:hover { background-size: 100% 100%; }
  .docs li a::after { content: " ↗\FE0E"; }
  .docs li span { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

  /* ---------- print / save as PDF ---------- */
  .print-btn { font: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
  @media print {
    @page { size: letter; margin: .45in .5in; }
    html, body { background: #fff !important; overflow: visible !important; }
    body { font-size: 11pt; }
    .trail, .reset, .party, .hint, .lb, .print-btn, .teaser-shot .open, .next-proj, .next-proj-wrap, .topbar nav { display: none !important; }
    /* everything that animates in on scroll is simply shown */
    .reveal, .write, .stick, .js .reveal, .js .write, .js .stick { opacity: 1 !important; translate: none !important; clip-path: none !important; scale: 1 !important; transition: none !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .deco { translate: none !important; }
    /* project picture piles become a tidy two-column grid */
    .pile { position: static !important; height: auto !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: 26px 18px; margin-top: 14px !important; }
    .pile figure { position: relative !important; left: auto !important; right: auto !important; top: auto !important; width: 100% !important; margin: 0 !important; rotate: 0deg !important; scale: 1 !important; justify-self: stretch !important; box-shadow: 0 0 0 .5pt #ccc !important; }
    .pile figure:only-of-type, .pile figure:first-of-type:nth-last-of-type(3) { grid-column: 1 / -1; width: 72% !important; justify-self: center !important; }
    .pile img { max-height: 4.6in; object-fit: contain; }
    .box.opr { break-inside: auto !important; page-break-inside: auto !important; }
    .hero .cut, .hero .d-grad { display: none !important; }
    .pile figcaption { position: static !important; margin-top: 4px; }
    .pile .deco { display: none !important; }
    .chapter, .chapter.flip { display: block !important; margin-top: 30px !important; }
    .chapter.flip .chapter-text { order: 0 !important; }
    .wrap { padding-top: 28px !important; }
    .teaser-shot { rotate: 0deg !important; box-shadow: 0 0 0 .5pt #ccc !important; }
    figure, img, .box, .chapter-text, .jobs li, .docs li, .teaser .split { break-inside: avoid; page-break-inside: avoid; }
    h1, h2, h3, .role, .crumb, .num { break-after: avoid; page-break-after: avoid; }
    .chapter { break-inside: auto; }
    a { color: inherit; }
    footer { margin-top: 18px !important; break-before: avoid; page-break-before: avoid; }
    .project-page main { padding-bottom: 0 !important; }
  }